mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-29 10:12:41 +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:
parent
953a449305
commit
eecee17213
2 changed files with 9 additions and 18 deletions
|
@ -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',
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue