var onMouseEnd = _.bind(function(event) {
$(window).unlisten('mousemove', onMouseMove);
$(window).unlisten('mouseup', onMouseEnd);
next.size = nextFlex;
previous.size = prevFlex;
this.dragging = previous.dragging = next.dragging = false;
}, this);
this.onMouseUp = _.bind(function(event) {
if (event.target == this.val()) {
this.focus();
}
$(document.body).removeClass('dragging-number');
this.removeClass('dragging');
$(window).unlisten('mousemove', this.onMouseMove, true)
.unlisten('mouseup', this.onMouseUp, true);
delete this.onMouseMove;
delete this.onMouseUp;
}, this);
var onMouseEnd = _.bind(function(event) {
$(window).unlisten('mousemove', onMouseMove);
$(window).unlisten('mouseup', onMouseEnd);
if (next) {
next.size = nextSize;
next.dragging = true;
}
if (previous) {
previous.size = prevSize;
previous.dragging = true;
}
this.dragging = true;
}, this);
hide: function() {
$(window).unlisten('mousedown', this.onMouseDown, true)
.unlisten('mousemove', this.onMouseMove, false)
.unlisten('mousewheel', this.onMouseWheel, true)
.unlisten('blur', this.onWindowBlur, true);
delete this.onMouseDown;
delete this.onMouseMove;
delete this.onMouseWheel;
delete this.onWindowBlur;
this.showingAtContainer.removeClass('showing-menu');
delete this.showingAtContainer;
this.addClass('fade');
var container = this.parent().closest('*[tabindex]');
if (container.length) {
container.focus();
} else {
this.val().blur();
}
setTimeout(_.bind(function() {
this.removeClass('fade').removeClass('visible');
this.select(null);
if (this.originalParent) {
this.originalParent.append(this, true);
}
this.hidden({target: this});
}, this), 100);
},
this.onMouseMove = _.bind(function(event) {
var menu = $(event.target).contained('menu');
if (!menu || !menu.equals(this)) {
event.stopPropagation();
event.preventDefault();
}
}, this);
onMouseDown: function(event) {
if (this.increment !== undefined) {
var startY = event.clientY;
var startValue = this.value;
var increment = -this.increment / this.pixelsPerIncrement;
var previousValue = this.value;
event.preventDefault();
this.onMouseMove = _.bind(function(event) {
var dy = event.clientY - startY;
var diff = dy * increment;
diff -= diff % this.increment;
var newValue = this.formatValue(startValue + diff);
this.value = newValue;
var evt = {target: this, value: newValue};
this.updated(evt);
if (evt.preventDefault) {
this.value = previousValue;
} else {
previousValue = newValue;
}
}, this);
this.onMouseUp = _.bind(function(event) {
if (event.target == this.val()) {
this.focus();
}
$(document.body).removeClass('dragging-number');
this.removeClass('dragging');
$(window).unlisten('mousemove', this.onMouseMove, true)
.unlisten('mouseup', this.onMouseUp, true);
delete this.onMouseMove;
delete this.onMouseUp;
}, this);
$(document.body).addClass('dragging-number');
this.addClass('dragging');
$(window).listen('mousemove', this.onMouseMove, true)
.listen('mouseup', this.onMouseUp, true);
}
},
onMouseDown: function(event) {
event.preventDefault();
var previous = this.getPreviousBox();
var next = this.getNextBox();
if (!((previous && previous.length) || (next && next.length))) return;
var isHorizontal = this.orientation == 'row';
var target = this.target.indexOf('inner-') == 0 ? 'parent' : 'siblings';
this.dragging = true;
if (previous) {
previous.dragging = true;
}
if (next) {
next.dragging = true;
}
var startMouse = isHorizontal ? event.clientX : event.clientY;
var startDelta = this.delta;
var startPos, startPrevSize, startNextSize, startNextPos;
if (isHorizontal) {
startPos = this.position().left;
if (target == 'parent') {
startNextSize = next.width();
startNextPos = next.position().left;
} else {
startPrevSize = previous.width();
startNextSize = next.width();
startNextPos = next.position().left;
}
} else {
startPos = this.position().top;
if (target == 'parent') {
startNextSize = next.height();
startNextPos = next.position().top;
} else {
startPrevSize = previous.height();
startNextSize = next.height();
startNextPos = next.position().top;
}
}
// XXXjoe Calculate me!
var minPos = 0;
var maxPos = 1000000;
if (this.target == 'flexible-siblings' || this.target == 'panels') {
var startPrevFlex = parseFloat(previous.style('-webkit-flex'));
var startNextFlex = parseFloat(next.style('-webkit-flex'));
var prevFlex, nextFlex;
var onMouseMove = _.bind(function(event) {
var mousePos = isHorizontal ? event.clientX : event.clientY;
var delta = mousePos - startMouse;
var splitterPos = startPos + delta;
var prevSize = startPrevSize + delta;
var nextSize = startNextSize - delta;
var nextPos = startNextPos + delta;
var deltaChange = 0;
if (splitterPos < minPos) {
deltaChange = minPos - splitterPos;
splitterPos = minPos;
} else if (splitterPos > maxPos) {
deltaChange = maxPos - splitterPos;
splitterPos = maxPos;
}
delta -= deltaChange;
nextSize -= deltaChange;
prevSize -= deltaChange;
prevFlex = (prevSize/startPrevSize) * startPrevFlex;
nextFlex = (nextSize/startNextSize) * startNextFlex;
previous.css('-webkit-flex', prevFlex);
next.css('-webkit-flex', nextFlex);
if (previous.onResize) {
previous.onResize();
}
if (next.onResize) {
next.onResize();
}
this.resized({target: this, delta: this.delta});
}, this);
var onMouseEnd = _.bind(function(event) {
$(window).unlisten('mousemove', onMouseMove);
$(window).unlisten('mouseup', onMouseEnd);
next.size = nextFlex;
previous.size = prevFlex;
this.dragging = previous.dragging = next.dragging = false;
}, this);
$(window).listen('mousemove', onMouseMove);
$(window).listen('mouseup', onMouseEnd);
} else {
var prevSize, nextSize, splitterPos;
var onMouseMove = _.bind(function(event) {
var mousePos = isHorizontal ? event.clientX : event.clientY;
var delta = mousePos - startMouse;
splitterPos = startPos + delta;
nextPos = startNextPos + delta;
prevSize = startPrevSize + delta;
nextSize = startNextSize - delta;
// var deltaChange = 0;
// if (splitterPos < minPos) {
// deltaChange = minPos - splitterPos;
// splitterPos = minPos;
// } else if (splitterPos > maxPos) {
// deltaChange = maxPos - splitterPos;
// splitterPos = maxPos;
// }
// delta -= deltaChange;
// nextSize -= deltaChange;
// prevSize -= deltaChange;
if (isHorizontal) {
this.css('left', splitterPos);
if (target == 'parent') {
next.css('width', nextSize);
next.css('left', nextPos);
} else {
previous.css('width', prevSize);
next.css('width', nextSize);
next.css('left', nextPos);
}
} else {
// this.css('top', splitterPos);
if (target == 'parent') {
next.css('height', nextSize);
// next.css('top', nextPos);
} else {
previous.css('height', prevSize);
next.css('height', nextSize);
next.css('top', nextPos);
}
}
this.resized({target: this, delta: this.delta});
}, this);
var onMouseEnd = _.bind(function(event) {
$(window).unlisten('mousemove', onMouseMove);
$(window).unlisten('mouseup', onMouseEnd);
if (next) {
next.size = nextSize;
next.dragging = true;
}
if (previous) {
previous.size = prevSize;
previous.dragging = true;
}
this.dragging = true;
}, this);
$(window).listen('mousemove', onMouseMove);
$(window).listen('mouseup', onMouseEnd);
}
}
onBlur: function() {
this.value = this.formatValue(this.val().value);
$(window).unlisten('mousewheel', this.onMouseWheel, true);
delete this.onMouseWheel;
},
showAt: function(anchorX, anchorY, container, dontUpdateCommands) {
if (!this.onMouseDown) {
this.showing({target: this});
}
if (!dontUpdateCommands) {
this.updateCommands(this.list);
}
this.originalParent = this.parent();
if (!container) {
container = $(document.body);
}
container.append(this);
var width = this.width();
if (anchorX+width > window.innerWidth && width < window.innerWidth) {
anchorX = anchorX - width;
}
var height = this.height();
if (anchorY+height > window.innerHeight && height < window.innerHeight) {
anchorY = anchorY - height;
}
this.css('left', anchorX);
this.css('top', anchorY);
if (!this.onMouseDown) {
this.onMouseDown = _.bind(function(event) {
var menu = $(event.target).contained('menu');
if (!menu || !menu.equals(this)) {
event.stopPropagation();
this.hide();
}
// event.preventDefault();
}, this);
this.onMouseMove = _.bind(function(event) {
var menu = $(event.target).contained('menu');
if (!menu || !menu.equals(this)) {
event.stopPropagation();
event.preventDefault();
}
}, this);
this.onWindowBlur = _.bind(function(event) {
if (event.target == window) {
this.hide();
}
}, this);
this.onMouseWheel = _.bind(function(event) {
// event.stopPropagation();
// event.preventDefault();
}, this);
$(window).listen('mousedown', this.onMouseDown, true)
.listen('mousemove', this.onMouseMove, false)
.listen('mousewheel', this.onMouseWheel, true)
.listen('blur', this.onWindowBlur, true);
container.addClass('showing-menu');
this.showingAtContainer = container;
this.addClass('visible');
this.focus();
this.shown({target: this});
return true;
}
},