X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/7f3f79476a57d10991566c511d40e20154c01064..78644811ca0c6042212788dc67add42bc41fb74c:/platforma/static/js/views/split.js

diff --git a/platforma/static/js/views/split.js b/platforma/static/js/views/split.js
new file mode 100644
index 00000000..30eda4ab
--- /dev/null
+++ b/platforma/static/js/views/split.js
@@ -0,0 +1,118 @@
+/*globals View*/
+
+// Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/
+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, 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'
+    });
+    
+    this.leftView = $(this.views[0]);
+    this.rightView = $(this.views[1]);
+    
+    this.splitbar = $(this.views[2] || '<div></div>')
+      .insertAfter(this.leftView)
+      .css({
+        position: 'absolute',
+        'user-select': 'none',
+        '-webkit-user-select': 'none',
+        '-khtml-user-select': 'none',
+        '-moz-user-select': 'none',
+        'z-index': 100
+      })
+      .attr('unselectable', 'on')
+      .addClass(this.splitbarClass)
+      .bind('mousedown.splitview', this.beginResize.bind(this));
+    
+    this._splitbarWidth = this.splitbar.outerWidth();
+    
+    // Solomon's algorithm ;-)
+    this.resplit(this.element.width() / 2);
+  },
+    
+  beginResize: function(event) {
+    this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView);
+    this.overlay = this.overlay || $('<div></div>').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;
+    
+    $(document)
+      .bind('mousemove.splitview', this.resizeChanged.bind(this))
+      .bind('mouseup.splitview', this.endResize.bind(this));
+  },
+  
+  resizeChanged: function(event) {
+    var newPosition = event.pageX + this.leftViewOffset;
+    newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
+    this.splitbar.css('left', newPosition);
+  },
+
+  endResize: function(event) {
+    var newPosition = event.pageX + this.leftViewOffset;
+    this.zombie.remove();
+    this.zombie = null;
+    this.overlay.remove();
+    this.overlay = null;
+    this.resplit(newPosition);
+
+    $(document)
+      .unbind('mousemove.splitview')
+      .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);
+    this.leftView.css({
+      left: 0,
+      width: newPosition
+    });
+    this.rightView.css({
+      left: newPosition + this._splitbarWidth,
+      width: this.element.width() - newPosition - this._splitbarWidth
+    });
+    if (!$.browser.msie) {
+      this._resizingSubviews = true;
+		  $(window).trigger('resize');
+		  this._resizingSubviews = false;
+		}
+  },
+  
+  dispose: function() {
+    this.splitter.unbind('mousedown.splitview');
+    this._super();
+  }
+});
+