Allow workboards to be panned horizontally by dragging the background

Summary:
Ref T5240. For boards with a lot of columns and users without "shift + mousewheel" or a touchpad, allow click-drag on the board background to pan the board horizontally.

The `ew-resize` cursor cue might be a little too intense. If it's annoying, we could drop it and just leave this as a secret feature to discover.

Test Plan: Panned the board horizontally.

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T5240

Differential Revision: https://secure.phabricator.com/D15211

resources/celerity/map.php

@@ -154,7 +154,7 @@ return array(
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
     'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
-    'rsrc/css/phui/workboards/phui-workboard.css' => 'f526057c',
+    'rsrc/css/phui/workboards/phui-workboard.css' => '2b5367d2',
     'rsrc/css/phui/workboards/phui-workcard.css' => 'a869098a',
     'rsrc/css/phui/workboards/phui-workpanel.css' => 'e1bd8d04',
     'rsrc/css/sprite-login.css' => '60e8560e',
@@ -414,7 +414,7 @@ return array(
     'rsrc/js/application/phortune/phortune-credit-card-form.js' => '2290aeef',
     'rsrc/js/application/policy/behavior-policy-control.js' => 'd0c516d5',
     'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '5e9f347c',
-    'rsrc/js/application/projects/behavior-project-boards.js' => '5191522f',
+    'rsrc/js/application/projects/behavior-project-boards.js' => 'a1807fd7',
     'rsrc/js/application/projects/behavior-project-create.js' => '065227cc',
     'rsrc/js/application/projects/behavior-reorder-columns.js' => 'e1d25dfb',
     'rsrc/js/application/releeph/releeph-preview-branch.js' => 'b2b4fbaf',
@@ -654,7 +654,7 @@ return array(
     'javelin-behavior-phui-profile-menu' => '12884df9',
     'javelin-behavior-policy-control' => 'd0c516d5',
     'javelin-behavior-policy-rule-editor' => '5e9f347c',
-    'javelin-behavior-project-boards' => '5191522f',
+    'javelin-behavior-project-boards' => 'a1807fd7',
     'javelin-behavior-project-create' => '065227cc',
     'javelin-behavior-quicksand-blacklist' => '7927a7d3',
     'javelin-behavior-recurring-edit' => '5f1c4d5f',
@@ -831,7 +831,7 @@ return array(
     'phui-theme-css' => 'ab7b848c',
     'phui-timeline-view-css' => '2efceff8',
     'phui-two-column-view-css' => 'c75bfc5b',
-    'phui-workboard-view-css' => 'f526057c',
+    'phui-workboard-view-css' => '2b5367d2',
     'phui-workcard-view-css' => 'a869098a',
     'phui-workpanel-view-css' => 'e1bd8d04',
     'phuix-action-list-view' => 'b5c256b8',
@@ -1190,16 +1190,6 @@ return array(
       'javelin-typeahead-source',
       'javelin-util',
     ),
-    '5191522f' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'phabricator-drag-and-drop-file-upload',
-    ),
     '519705ea' => array(
       'javelin-install',
       'javelin-dom',
@@ -1616,6 +1606,16 @@ return array(
       'javelin-dom',
       'javelin-reactor-dom',
     ),
+    'a1807fd7' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'phabricator-drag-and-drop-file-upload',
+    ),
     'a2828756' => array(
       'javelin-dom',
       'javelin-util',

src/view/phui/PHUIWorkboardView.php

@@ -29,7 +29,7 @@ final class PHUIWorkboardView extends AphrontTagView {
       'div',
       array(
         'class' => 'phui-workboard-view-shadow',
-        'sigil' => 'lock-scroll-while-dragging',
+        'sigil' => 'workboard-shadow lock-scroll-while-dragging',
       ),
       $view);
 

webroot/rsrc/css/phui/workboards/phui-workboard.css

@@ -77,3 +77,12 @@
   overflow-y: scroll;
   overflow-x: hidden;
 }
+
+.device-desktop .phui-workboard-view .aphront-multi-column-view {
+  pointer-events: none;
+}
+
+.device-desktop .phui-workpanel-view {
+  pointer-events: auto;
+  cursor: auto;
+}

webroot/rsrc/js/application/projects/behavior-project-boards.js

@@ -382,6 +382,47 @@ JX.behavior('project-boards', function(config, statics) {
       drop.start();
     }
 
+    // When the user drags the workboard background, pan the workboard
+    // horizontally. This allows you to scroll across cards with only the
+    // mouse, without shift + scrollwheel or using the scrollbar.
+
+    var pan_origin = null;
+    var pan_node = null;
+    var pan_x = null;
+
+    JX.Stratcom.listen('mousedown', 'workboard-shadow', function(e) {
+      if (!JX.Device.isDesktop()) {
+        return;
+      }
+
+      if (e.getNode('workpanel')) {
+        return;
+      }
+
+      if (JX.Stratcom.pass()) {
+        return;
+      }
+
+      e.kill();
+
+      pan_origin = JX.$V(e);
+      pan_node = e.getNode('workboard-shadow');
+      pan_x = pan_node.scrollLeft;
+    });
+
+    JX.Stratcom.listen('mousemove', null, function(e) {
+      if (!pan_origin) {
+        return;
+      }
+
+      var cursor = JX.$V(e);
+      pan_node.scrollLeft = pan_x + (pan_origin.x - cursor.x);
+    });
+
+    JX.Stratcom.listen('mouseup', null, function() {
+      pan_origin = null;
+    });
+
     return true;
   }