phorge-phorge/webroot/rsrc/js/phuix/PHUIXFormationColumnView.js

/**
 * @provides phuix-formation-column-view
 * @requires javelin-install
 *           javelin-dom
 */

JX.install('PHUIXFormationColumnView', {

  construct: function(node) {
    this._node = node;
  },

  properties: {
    isRightAligned: false,
    isVisible: true,
    expanderNode: null,
    resizerItem: null,
    resizerControl: null,
    width: null,
    flank: null
  },

  members: {
    _node: null,
    _resizingWidth: null,
    _resizingBarPosition: null,
    _dragging: null,

    start: function() {
      var onshow = JX.bind(this, this._setVisibility, true);
      var onhide = JX.bind(this, this._setVisibility, false);

      JX.DOM.listen(this._node, 'click', 'phui-flank-header-hide', onhide);

      var expander = this.getExpanderNode();
      if (expander) {
        JX.DOM.listen(expander, 'click', null, onshow);
      }

      var resizer = this.getResizerItem();
      if (resizer) {
        var ondown = JX.bind(this, this._onresizestart);
        JX.DOM.listen(resizer, 'mousedown', null, ondown);

        var onmove = JX.bind(this, this._onresizemove);
        JX.Stratcom.listen('mousemove', null, onmove);

        var onup = JX.bind(this, this._onresizeend);
        JX.Stratcom.listen('mouseup', null, onup);
      }

      this.repaint();
    },

    _onresizestart: function(e) {
      if (!e.isNormalMouseEvent()) {
        return;
      }

      this._dragging = JX.$V(e);
      this._resizingWidth = this.getWidth();
      this._resizingBarPosition = JX.$V(this.getResizerControl());

      // Show the "col-resize" cursor on the whole document while we're
      // dragging, since the mouse will slip off the actual bar fairly often
      // and we don't want it to flicker.
      JX.DOM.alterClass(document.body, 'jx-drag-col', true);

      e.kill();
    },

    _onresizemove: function(e) {
      if (!this._dragging) {
        return;
      }

      var dx = (JX.$V(e).x - this._dragging.x);

      var width;
      if (this.getIsRightAligned()) {
        width = this.getWidth() - dx;
      } else {
        width = this.getWidth() + dx;
      }

      // TODO: Make these configurable?
      width = Math.max(width, 150);
      width = Math.min(width, 512);

      this._resizingWidth = width;

      this._node.style.width = this._resizingWidth + 'px';

      var adjust_x = (this._resizingWidth - this.getWidth());
      if (this.getIsRightAligned()) {
        adjust_x = -adjust_x;
      }

      this.getResizerControl().style.left =
        (this._resizingBarPosition.x + adjust_x) + 'px';

      var flank = this.getFlank();
      if (flank) {
        flank
          .setWidth(this._resizingWidth)
          .repaint();
      }
    },

    _onresizeend: function(e) {
      if (!this._dragging) {
        return;
      }

      this.setWidth(this._resizingWidth);

      JX.log('new width is ' + this.getWidth());

      JX.DOM.alterClass(document.body, 'jx-drag-col', false);
      this._dragging = null;

      // TODO: Save new width setting.

    // new JX.Request('/settings/adjust/', JX.bag)
    //   .setData(
    //     {
    //       key: 'filetree.width',
    //       value: get_width()
    //     })
    //   .send();

    },

    _setVisibility: function(visible, e) {
      e.kill();

      // TODO: Save the visibility setting.

      this.setIsVisible(visible);
      this.repaint();
    },

    repaint: function() {
      var resizer = this.getResizerItem();
      var expander = this.getExpanderNode();

      if (this.getIsVisible()) {
        JX.DOM.show(this._node);
        if (resizer) {
          JX.DOM.show(resizer);
        }
        if (expander) {
          JX.DOM.hide(expander);
        }
      } else {
        JX.DOM.hide(this._node);
        if (resizer) {
          JX.DOM.hide(resizer);
        }
        if (expander) {
          JX.DOM.show(expander);
        }
      }

      if (this.getFlank()) {
        this.getFlank().repaint();
      }

    },


  }

});