HomePhorge
Diffusion Phorge (master) Code

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

Last Change
Raw File

PHUIXFormationColumnView.js
View Options

/**
* @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();
}
},
}
});

Owner Packages

  • No Owners