From 69020af0c7f6d6b612ce325c8e9095001a90ee80 Mon Sep 17 00:00:00 2001 From: epriestley Date: Sun, 29 Mar 2015 07:27:06 -0700 Subject: [PATCH] Make column show/hide behaviors a little simpler Summary: Ref T7062. The previous fix caused an extra, unnecessary thread load on mobile. Make this code a bit simpler and fix the unnecessary load. Test Plan: No more load on mobile. Reviewers: btrahan, chad Reviewed By: chad Subscribers: epriestley Maniphest Tasks: T7062 Differential Revision: https://secure.phabricator.com/D12196 --- resources/celerity/map.php | 28 ++++---- .../conpherence/behavior-durable-column.js | 69 ++++++++----------- 2 files changed, 43 insertions(+), 54 deletions(-) diff --git a/resources/celerity/map.php b/resources/celerity/map.php index f8397508bb..8698710ef1 100644 --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -45,7 +45,7 @@ return array( 'rsrc/css/application/config/setup-issue.css' => '22270af2', 'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2', 'rsrc/css/application/conpherence/durable-column.css' => 'e2011d85', - 'rsrc/css/application/conpherence/menu.css' => '2c1c727c', + 'rsrc/css/application/conpherence/menu.css' => '9b37a261', 'rsrc/css/application/conpherence/message-pane.css' => '44154798', 'rsrc/css/application/conpherence/notification.css' => '04a6e10a', 'rsrc/css/application/conpherence/update.css' => '1099a660', @@ -354,7 +354,7 @@ return array( 'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18', 'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de', 'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => 'bb928342', - 'rsrc/js/application/conpherence/behavior-durable-column.js' => 'cccebf26', + 'rsrc/js/application/conpherence/behavior-durable-column.js' => 'c81c2bba', 'rsrc/js/application/conpherence/behavior-menu.js' => 'de5579b4', 'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861', 'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3', @@ -515,7 +515,7 @@ return array( 'config-options-css' => '7fedf08b', 'config-welcome-css' => '6abd79be', 'conpherence-durable-column-view' => 'e2011d85', - 'conpherence-menu-css' => '2c1c727c', + 'conpherence-menu-css' => '9b37a261', 'conpherence-message-pane-css' => '44154798', 'conpherence-notification-css' => '04a6e10a', 'conpherence-thread-manager' => 'bb928342', @@ -584,7 +584,7 @@ return array( 'javelin-behavior-diffusion-locate-file' => '6d3e1947', 'javelin-behavior-diffusion-pull-lastmodified' => '2b228192', 'javelin-behavior-doorkeeper-tag' => 'e5822781', - 'javelin-behavior-durable-column' => 'cccebf26', + 'javelin-behavior-durable-column' => 'c81c2bba', 'javelin-behavior-error-log' => '6882e80a', 'javelin-behavior-fancy-datepicker' => 'c51ae228', 'javelin-behavior-global-drag-and-drop' => 'bbdf75ca', @@ -1736,6 +1736,16 @@ return array( 'javelin-stratcom', 'javelin-vector', ), + 'c81c2bba' => array( + 'javelin-behavior', + 'javelin-dom', + 'javelin-stratcom', + 'javelin-behavior-device', + 'javelin-scrollbar', + 'javelin-quicksand', + 'phabricator-keyboard-shortcut', + 'conpherence-thread-manager', + ), 'c90a04fc' => array( 'javelin-dom', 'javelin-dynval', @@ -1750,16 +1760,6 @@ return array( 'javelin-stratcom', 'phabricator-phtize', ), - 'cccebf26' => array( - 'javelin-behavior', - 'javelin-dom', - 'javelin-stratcom', - 'javelin-behavior-device', - 'javelin-scrollbar', - 'javelin-quicksand', - 'phabricator-keyboard-shortcut', - 'conpherence-thread-manager', - ), 'd19198c8' => array( 'javelin-install', 'javelin-dom', diff --git a/webroot/rsrc/js/application/conpherence/behavior-durable-column.js b/webroot/rsrc/js/application/conpherence/behavior-durable-column.js index 0641dc18d1..86573871b4 100644 --- a/webroot/rsrc/js/application/conpherence/behavior-durable-column.js +++ b/webroot/rsrc/js/application/conpherence/behavior-durable-column.js @@ -24,7 +24,8 @@ JX.behavior('durable-column', function(config, statics) { statics.initialized = true; } - var show = false; + var userVisible = config.visible; + var show = null; var loadThreadID = null; var scrollbar = null; @@ -43,62 +44,54 @@ JX.behavior('durable-column', function(config, statics) { return JX.DOM.find(column, 'div', 'conpherence-durable-column-main'); } - function _autocloseColumn() { + function _isViewportWideEnoughForColumn() { var viewport = JX.Vector.getViewport(); if (viewport.x < minimumViewportWidth) { - if (show) { - _toggleColumn(false); - resizeClose = true; - } - return true; + return false; } else { - if (resizeClose) { - resizeClose = false; - if (!show) { - _toggleColumn(false); - } - } + return true; } + } - return false; + function _updateColumnVisibility() { + var new_value = (userVisible && _isViewportWideEnoughForColumn()); + if (new_value !== show) { + show = new_value; + _drawColumn(show); + } } function _toggleColumn(explicit) { - if (explicit) { - if (_autocloseColumn()) { - return; - } - } + userVisible = !userVisible; + _updateColumnVisibility(); - show = !show; - JX.DOM.alterClass(document.body, 'with-durable-column', show); + new JX.Request(config.settingsURI) + .setData({value: (show ? 1 : 0)}) + .send(); + } + + function _drawColumn(visible) { + JX.DOM.alterClass(document.body, 'with-durable-column', visible); var column = _getColumnNode(); - if (show) { + if (visible) { JX.DOM.show(column); threadManager.loadThreadByID(loadThreadID); } else { JX.DOM.hide(column); } - JX.Stratcom.invoke('resize'); - JX.Quicksand.setFrame(show ? quick : null); + JX.Quicksand.setFrame(visible ? quick : null); // When we activate the column, adjust the tablet breakpoint so that we // convert the left side of the screen to tablet mode on narrow displays. var breakpoint = JX.Device.getTabletBreakpoint(); JX.Device.setTabletBreakpoint( - show ? (breakpoint + columnWidth) : (breakpoint - columnWidth)); + visible ? (breakpoint + columnWidth) : (breakpoint - columnWidth)); - // If this was an explicit toggle action from the user, save their - // preference. - if (explicit) { - new JX.Request(config.settingsURI) - .setData({value: (show ? 1 : 0)}) - .send(); - } + JX.Stratcom.invoke('resize'); } new JX.KeyboardShortcut('\\', 'Toggle Conpherence Column') - .setHandler(JX.bind(null, _toggleColumn, true)) + .setHandler(_toggleColumn) .register(); scrollbar = new JX.Scrollbar(_getColumnScrollNode()); @@ -193,7 +186,7 @@ JX.behavior('durable-column', function(config, statics) { break; case 'hide_column': JX.Stratcom.invoke('notification-panel-close'); - _toggleColumn(true); + _toggleColumn(); break; } }); @@ -220,8 +213,7 @@ JX.behavior('durable-column', function(config, statics) { threadManager.loadThreadByID(data.threadID); }); - var resizeClose = false; - JX.Stratcom.listen('resize', null, _autocloseColumn); + JX.Stratcom.listen('resize', null, _updateColumnVisibility); function _getColumnBodyNode() { var column = JX.$('conpherence-durable-column'); @@ -347,9 +339,6 @@ JX.behavior('durable-column', function(config, statics) { } }); - if (config.visible) { - _toggleColumn(false); - _autocloseColumn(); - } + _updateColumnVisibility(); });