[Summary view] [Print] [Text view]

   1  /**
   2   * @provides javelin-behavior-phabricator-nav
   3   * @requires javelin-behavior
   4   *           javelin-behavior-device
   5   *           javelin-stratcom
   6   *           javelin-dom
   7   *           javelin-magical-init
   8   *           javelin-vector
   9   *           javelin-request
  10   *           javelin-util
  11   * @javelin
  12   */
  13  
  14  JX.behavior('phabricator-nav', function(config) {
  15  
  16    var content = JX.$(config.contentID);
  17    var local = JX.$(config.localID);
  18    var main = JX.$(config.mainID);
  19    var drag = JX.$(config.dragID);
  20    var background = JX.$(config.backgroundID);
  21  
  22  
  23  // - Flexible Navigation Column ------------------------------------------------
  24  
  25  
  26    var dragging;
  27    var track;
  28  
  29    JX.enableDispatch(document.body, 'mousemove');
  30  
  31    JX.DOM.listen(drag, 'mousedown', null, function(e) {
  32      dragging = JX.$V(e);
  33  
  34      // Show the "col-resize" cursor on the whole document while we're
  35      // dragging, since the mouse will slip off the actual bar fairly often and
  36      // we don't want it to flicker.
  37      JX.DOM.alterClass(document.body, 'jx-drag-col', true);
  38  
  39      track = [
  40        {
  41          element: local,
  42          parameter: 'width',
  43          start: JX.Vector.getDim(local).x,
  44          width: JX.Vector.getDim(local).x,
  45          minWidth: 1
  46        },
  47        {
  48          element: background,
  49          parameter: 'width',
  50          start: JX.Vector.getDim(background).x,
  51          minWidth: 1
  52        },
  53        {
  54          element: drag,
  55          parameter: 'left',
  56          start: JX.$V(drag).x
  57        },
  58        {
  59          element: content,
  60          parameter: 'marginLeft',
  61          start: parseInt(getComputedStyle(content).marginLeft, 10),
  62          width: JX.Vector.getDim(content).x,
  63          minWidth: 300,
  64          minScale: -1
  65        }
  66      ];
  67  
  68      e.kill();
  69    });
  70  
  71    JX.Stratcom.listen('mousemove', null, function(e) {
  72      if (!dragging) {
  73        return;
  74      }
  75  
  76      var dx = JX.$V(e).x - dragging.x;
  77      var panel;
  78      var k;
  79  
  80      for (k = 0; k < track.length; k++) {
  81        panel = track[k];
  82        if (!panel.minWidth) {
  83          continue;
  84        }
  85        var new_width = panel.width + (dx * (panel.minScale || 1));
  86        if (new_width < panel.minWidth) {
  87          dx = (panel.minWidth - panel.width) * panel.minScale;
  88        }
  89      }
  90  
  91      for (k = 0; k < track.length; k++) {
  92        panel = track[k];
  93        var v = (panel.start + (dx * (panel.scale || 1)));
  94        panel.element.style[panel.parameter] = v + 'px';
  95      }
  96    });
  97  
  98    JX.Stratcom.listen('mouseup', null, function() {
  99      if (!dragging) {
 100        return;
 101      }
 102      JX.DOM.alterClass(document.body, 'jx-drag-col', false);
 103      dragging = false;
 104    });
 105  
 106  
 107    function resetdrag() {
 108      local.style.width = '';
 109      background.style.width = '';
 110      drag.style.left = '';
 111      content.style.marginLeft = '';
 112    }
 113  
 114    var collapsed = config.collapsed;
 115    JX.Stratcom.listen('differential-filetree-toggle', null, function() {
 116      collapsed = !collapsed;
 117      JX.DOM.alterClass(main, 'has-local-nav', !collapsed);
 118      JX.DOM.alterClass(main, 'has-drag-nav', !collapsed);
 119      resetdrag();
 120      new JX.Request('/settings/adjust/', JX.bag)
 121        .setData({ key : 'nav-collapsed', value : (collapsed ? 1 : 0) })
 122        .send();
 123    });
 124  
 125  
 126  // - Scroll --------------------------------------------------------------------
 127  
 128    // When the user scrolls or resizes the window, anchor the menu to to the top
 129    // of the navigation bar.
 130  
 131    function onresize() {
 132      if (JX.Device.getDevice() != 'desktop') {
 133        return;
 134      }
 135  
 136      local.style.top = Math.max(
 137        0,
 138        JX.$V(content).y - Math.max(0, JX.Vector.getScroll().y)) + 'px';
 139    }
 140  
 141    local.style.position = 'fixed';
 142    local.style.bottom = 0;
 143    local.style.left = 0;
 144  
 145    JX.Stratcom.listen(['scroll', 'resize'], null, onresize);
 146    onresize();
 147  
 148  
 149  // - Navigation Reset ----------------------------------------------------------
 150  
 151    JX.Stratcom.listen('phabricator-device-change', null, function() {
 152      resetdrag();
 153      onresize();
 154    });
 155  
 156  });