1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-01 19:22:42 +01:00

Activate "jx-toggle-class" on click to fix broken mobile behavior

Summary:
See downstream <https://phabricator.wikimedia.org/T201480>. Searching for things on mobile is a significant challenge because clicking the "Magnifying Glass" icon shows and then immediately hides the menu. I believe some aspect of iOS event handling has changed since this was originally written.

At some point, I'd like to rewrite this to work more cleanly and get rid of `jx-toggle-class`. In particular, it isn't smart enough to know that it should be modal with other menus, so you can get states like this by clicking multiple things:

{F6320110}

This would also probably just look and work better if it was an inline element that showed up under the header instead of a floating dropdown element.

However, I'm having a hard time getting the Safari debugger to actually connect to the iOS simulator, so take a small step toward this bright future and fix the immediate problem for now: toggle on click instead of mousedown/touchstart.

This means the menu opens ~100ms later, but actually works. Big improvement!

I'd like to move away from "jx-toggle-class" anyway (it usually isn't sophisticated enough to fully describe a behavior) so reducing complexity here seems good. It isn't used in //too// many places so this is unlikely to have any negative effects, I hope.

Test Plan: On iOS simulator, clicked the magnifying glass icon in the main menu to get a search input. Before: got a search input for a microsecond. After: actually got a search input.

Reviewers: amckinley

Reviewed By: amckinley

Differential Revision: https://secure.phabricator.com/D20343
This commit is contained in:
epriestley 2019-03-28 16:49:03 -07:00
parent 953a449305
commit eecee17213
2 changed files with 9 additions and 18 deletions

View file

@ -10,7 +10,7 @@ return array(
'conpherence.pkg.css' => '3c8a0668', 'conpherence.pkg.css' => '3c8a0668',
'conpherence.pkg.js' => '020aebcf', 'conpherence.pkg.js' => '020aebcf',
'core.pkg.css' => '2dd936d6', 'core.pkg.css' => '2dd936d6',
'core.pkg.js' => 'eb53fc5b', 'core.pkg.js' => 'a747b035',
'differential.pkg.css' => '8d8360fb', 'differential.pkg.css' => '8d8360fb',
'differential.pkg.js' => '67e02996', 'differential.pkg.js' => '67e02996',
'diffusion.pkg.css' => '42c75c37', 'diffusion.pkg.css' => '42c75c37',
@ -498,7 +498,7 @@ return array(
'rsrc/js/core/behavior-select-on-click.js' => '66365ee2', 'rsrc/js/core/behavior-select-on-click.js' => '66365ee2',
'rsrc/js/core/behavior-setup-check-https.js' => '01384686', 'rsrc/js/core/behavior-setup-check-https.js' => '01384686',
'rsrc/js/core/behavior-time-typeahead.js' => '5803b9e7', 'rsrc/js/core/behavior-time-typeahead.js' => '5803b9e7',
'rsrc/js/core/behavior-toggle-class.js' => 'f5c78ae3', 'rsrc/js/core/behavior-toggle-class.js' => '32db8374',
'rsrc/js/core/behavior-tokenizer.js' => '3b4899b0', 'rsrc/js/core/behavior-tokenizer.js' => '3b4899b0',
'rsrc/js/core/behavior-tooltip.js' => '73ecc1f8', 'rsrc/js/core/behavior-tooltip.js' => '73ecc1f8',
'rsrc/js/core/behavior-user-menu.js' => '60cd9241', 'rsrc/js/core/behavior-user-menu.js' => '60cd9241',
@ -687,7 +687,7 @@ return array(
'javelin-behavior-stripe-payment-form' => '02cb4398', 'javelin-behavior-stripe-payment-form' => '02cb4398',
'javelin-behavior-test-payment-form' => '4a7fb02b', 'javelin-behavior-test-payment-form' => '4a7fb02b',
'javelin-behavior-time-typeahead' => '5803b9e7', 'javelin-behavior-time-typeahead' => '5803b9e7',
'javelin-behavior-toggle-class' => 'f5c78ae3', 'javelin-behavior-toggle-class' => '32db8374',
'javelin-behavior-toggle-widget' => '8f959ad0', 'javelin-behavior-toggle-widget' => '8f959ad0',
'javelin-behavior-trigger-rule-editor' => '398fdf13', 'javelin-behavior-trigger-rule-editor' => '398fdf13',
'javelin-behavior-typeahead-browse' => '70245195', 'javelin-behavior-typeahead-browse' => '70245195',
@ -1186,6 +1186,11 @@ return array(
'javelin-install', 'javelin-install',
'javelin-util', 'javelin-util',
), ),
'32db8374' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-dom',
),
34450586 => array( 34450586 => array(
'javelin-color', 'javelin-color',
'javelin-install', 'javelin-install',
@ -2149,11 +2154,6 @@ return array(
'javelin-stratcom', 'javelin-stratcom',
'javelin-dom', 'javelin-dom',
), ),
'f5c78ae3' => array(
'javelin-behavior',
'javelin-stratcom',
'javelin-dom',
),
'f84bcbf4' => array( 'f84bcbf4' => array(
'javelin-behavior', 'javelin-behavior',
'javelin-stratcom', 'javelin-stratcom',

View file

@ -17,7 +17,7 @@
JX.behavior('toggle-class', function(config, statics) { JX.behavior('toggle-class', function(config, statics) {
function install() { function install() {
JX.Stratcom.listen( JX.Stratcom.listen(
['touchstart', 'mousedown'], 'click',
'jx-toggle-class', 'jx-toggle-class',
function(e) { function(e) {
e.kill(); e.kill();
@ -29,15 +29,6 @@ JX.behavior('toggle-class', function(config, statics) {
} }
}); });
// Swallow the regular click handler event so e.g. Quicksand
// click handler doesn't get a hold of it
JX.Stratcom.listen(
['click'],
'jx-toggle-class',
function(e) {
e.kill();
});
return true; return true;
} }