-/*globals Class*/
+/*globals View*/
// Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/
-var SplitView = Class.extend({
+var SplitView = View.extend({
+ _className: 'SplitView',
splitbarClass: 'splitview-splitbar',
activeClass: 'splitview-active',
overlayClass: 'splitview-overlay',
_splitbarWidth: 0,
init: function(element, model) {
- this.element = $(element).css('position', 'relative');
- this.model = model;
+ this._super(element, model, null);
+ this.element.css('position', 'relative');
+ this._resizingSubviews = false;
+
this.views = $(">*", this.element[0]).css({
position: 'absolute', // positioned inside splitter container
'z-index': 1, // splitbar is positioned above
this.leftView = $(this.views[0]);
this.rightView = $(this.views[1]);
+
this.splitbar = $(this.views[2] || '<div></div>')
.insertAfter(this.leftView)
.css({
.unbind('mouseup.splitview');
},
+ resized: function(event) {
+ if (!this._resizingSubviews) {
+ this.resplit(Math.min(this.leftView.width(), this.element.width() - this._splitbarWidth));
+ }
+ },
+
resplit: function(newPosition) {
newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
this.splitbar.css('left', newPosition);
width: this.element.width() - newPosition - this._splitbarWidth
});
if (!$.browser.msie) {
- this.views.trigger("resize");
+ this._resizingSubviews = true;
+ $(window).trigger('resize');
+ this._resizingSubviews = false;
}
},
dispose: function() {
this.splitter.unbind('mousedown.splitview');
+ this._super();
}
});