Dodanie podstawowego widoku split.js.

[redakcja.git] / project / static / js / views / split.js

diff --git a/project/static/js/views/split.js b/project/static/js/views/split.js
new file mode 100644 (file)
index 0000000..84f48ea
--- /dev/null
+++ b/project/static/js/views/split.js
@@ -0,0 +1,86 @@
+/*globals Class*/
+
+var SplitView = Class.extend({
+  leftPanelClass: 'splitview-left-panel',
+  rightPanelClass: 'splitview-right-panel',
+  splitterClass: 'splitview-splitter',
+  overlayClass: 'splitview-overlay',
+  element: null,
+  
+  init: function(element) {
+    this.element = $(element);
+    this.leftPanel = $(this.leftPanelClass, element);
+    this.rightPanel = $(this.rightPanelClass, element);
+    this.splitter = $(this.splitterClass, element);
+    this.overlay = this._createOverlay(this.overlayClass);
+    
+    this.splitter.bind('mousedown.splitview', this.beginResize.bind(this));
+  },
+  
+  _createOverlay: function(cssClass) {
+    var pos = this.root.position();
+    return $('<div />')
+      .addClass(cssClass)
+      .css({
+        position: 'absolute',
+        left: pos.left,
+        top: pos.top,
+        width: this.root.width(),
+        height: this.root.height()
+      })
+      .hide()
+      .appendTo(this.element);
+  },
+  
+  beginResize: function(event) {
+    this.hotspotX = event.pageX - this.splitter.position().left;
+    
+    $(document)
+      .bind('mousemove.splitview', this.resizeChanged.bind(this))
+      .bind('mouseup.splitview', this.endResize.bind(this));
+
+    this.overlay.show();
+    return false;
+  },
+  
+  resizeChanged: function(event) {
+    var old_width = this.overlay.width();
+    var delta = event.pageX + this.hotspotX - old_width;
+
+    if(old_width + delta < 12) delta = 12 - old_width;
+    if(old_width + delta > $(window).width()) {
+      delta = $(window).width() - old_width;
+    }
+    
+    this.overlay.css({'width': old_width + delta});
+    
+    if(this.overlay.next) {
+        var left = parseInt(this.overlay.next.css('left'), 10);
+        this.overlay.next.css('left', left+delta);
+    }
+    return false;
+  },
+
+  endResize: function(event) {
+    $(document)
+      .unbind('mousemove.splitview')
+      .unbind('mouseup.splitview');
+    
+    this.leftPanel.css({
+      left: 0,
+      right: this.hotspotX
+    });
+
+    this.rightPanel.css({
+      left: this.hotspotX,
+      right: 0
+    });
+
+    this.overlay.hide();
+  },
+  
+  dispose: function() {
+    this.splitter.unbind('mousedown.splitview');
+  }
+});
+