X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/d3c74552a8f8509ff85cf956cf2b750d8387b683..7f3f79476a57d10991566c511d40e20154c01064:/project/static/js/views/split.js?ds=sidebyside diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js index 9d6dabd2..30eda4ab 100644 --- a/project/static/js/views/split.js +++ b/project/static/js/views/split.js @@ -1,18 +1,24 @@ -/*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', element: null, + model: null, zombie: null, leftViewOffset: 0, // Cache _splitbarWidth: 0, - init: function(element) { - this.element = $(element).css('position', 'relative'); + init: function(element, 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 @@ -22,6 +28,7 @@ var SplitView = Class.extend({ this.leftView = $(this.views[0]); this.rightView = $(this.views[1]); + this.splitbar = $(this.views[2] || '
') .insertAfter(this.leftView) .css({ @@ -44,6 +51,13 @@ var SplitView = Class.extend({ beginResize: function(event) { this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView); + this.overlay = this.overlay || $('').addClass(this.overlayClass).css({ + position: 'absolute', + width: this.element.width(), + height: this.element.height(), + top: this.element.position().top, + left: this.element.position().left + }).appendTo(this.element); this.views.css("-webkit-user-select", "none"); // Safari selects A/B text on a move this.splitbar.addClass(this.activeClass); this.leftViewOffset = this.leftView[0].offsetWidth - event.pageX; @@ -63,6 +77,8 @@ var SplitView = Class.extend({ var newPosition = event.pageX + this.leftViewOffset; this.zombie.remove(); this.zombie = null; + this.overlay.remove(); + this.overlay = null; this.resplit(newPosition); $(document) @@ -70,6 +86,12 @@ var SplitView = Class.extend({ .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); @@ -82,12 +104,15 @@ var SplitView = Class.extend({ 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(); } });