recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

epriestley eecee172 953a4493

+9 -18
+8 -8
resources/celerity/map.php
··· 10 10 'conpherence.pkg.css' => '3c8a0668', 11 11 'conpherence.pkg.js' => '020aebcf', 12 12 'core.pkg.css' => '2dd936d6', 13 - 'core.pkg.js' => 'eb53fc5b', 13 + 'core.pkg.js' => 'a747b035', 14 14 'differential.pkg.css' => '8d8360fb', 15 15 'differential.pkg.js' => '67e02996', 16 16 'diffusion.pkg.css' => '42c75c37', ··· 498 498 'rsrc/js/core/behavior-select-on-click.js' => '66365ee2', 499 499 'rsrc/js/core/behavior-setup-check-https.js' => '01384686', 500 500 'rsrc/js/core/behavior-time-typeahead.js' => '5803b9e7', 501 - 'rsrc/js/core/behavior-toggle-class.js' => 'f5c78ae3', 501 + 'rsrc/js/core/behavior-toggle-class.js' => '32db8374', 502 502 'rsrc/js/core/behavior-tokenizer.js' => '3b4899b0', 503 503 'rsrc/js/core/behavior-tooltip.js' => '73ecc1f8', 504 504 'rsrc/js/core/behavior-user-menu.js' => '60cd9241', ··· 687 687 'javelin-behavior-stripe-payment-form' => '02cb4398', 688 688 'javelin-behavior-test-payment-form' => '4a7fb02b', 689 689 'javelin-behavior-time-typeahead' => '5803b9e7', 690 - 'javelin-behavior-toggle-class' => 'f5c78ae3', 690 + 'javelin-behavior-toggle-class' => '32db8374', 691 691 'javelin-behavior-toggle-widget' => '8f959ad0', 692 692 'javelin-behavior-trigger-rule-editor' => '398fdf13', 693 693 'javelin-behavior-typeahead-browse' => '70245195', ··· 1186 1186 'javelin-install', 1187 1187 'javelin-util', 1188 1188 ), 1189 + '32db8374' => array( 1190 + 'javelin-behavior', 1191 + 'javelin-stratcom', 1192 + 'javelin-dom', 1193 + ), 1189 1194 34450586 => array( 1190 1195 'javelin-color', 1191 1196 'javelin-install', ··· 2145 2150 'phabricator-darkmessage', 2146 2151 ), 2147 2152 'f51e9c17' => array( 2148 - 'javelin-behavior', 2149 - 'javelin-stratcom', 2150 - 'javelin-dom', 2151 - ), 2152 - 'f5c78ae3' => array( 2153 2153 'javelin-behavior', 2154 2154 'javelin-stratcom', 2155 2155 'javelin-dom',
+1 -10
webroot/rsrc/js/core/behavior-toggle-class.js
··· 17 17 JX.behavior('toggle-class', function(config, statics) { 18 18 function install() { 19 19 JX.Stratcom.listen( 20 - ['touchstart', 'mousedown'], 20 + 'click', 21 21 'jx-toggle-class', 22 22 function(e) { 23 23 e.kill(); ··· 27 27 for (var k in t.map) { 28 28 JX.DOM.alterClass(JX.$(k), t.map[k], t.state); 29 29 } 30 - }); 31 - 32 - // Swallow the regular click handler event so e.g. Quicksand 33 - // click handler doesn't get a hold of it 34 - JX.Stratcom.listen( 35 - ['click'], 36 - 'jx-toggle-class', 37 - function(e) { 38 - e.kill(); 39 30 }); 40 31 41 32 return true;