X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/e68a54005c36b6a2282e4446fb04fda6cd9b953e..3669f00df3636d92c7de6fb0c7ebeac89150e5fe:/project/static/js/views/split.js diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js index d8c5e6bb..48f0de73 100644 --- a/project/static/js/views/split.js +++ b/project/static/js/views/split.js @@ -1,23 +1,29 @@ -/*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 '-moz-outline-style': 'none', // don't show dotted outline - overflow: 'auto' + overflow: 'auto' }); this.leftView = $(this.views[0]); @@ -44,6 +50,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 +76,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 +85,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 +103,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(); } });