project/static/js/views/split.js

   1 /*globals Class*/
   2
   3 // Split view inspired by jQuery Splitter Plugin http://methvin.com/splitter/
   4 var SplitView = Class.extend({
   5   splitbarClass: 'splitview-splitbar',
   6   activeClass: 'splitview-active',
   7   element: null,
   8   zombie: null,
   9   leftViewOffset: 0,
  10
  11   // Cache
  12   _splitbarWidth: 0,
  13
  14   init: function(element) {
  15     this.element = $(element).css('position', 'relative');
  16     this.views = $(">*", this.element[0]).css({
  17         position: 'absolute',                     // positioned inside splitter container
  18         'z-index': 1,                                           // splitbar is positioned above
  19         '-moz-outline-style': 'none',   // don't show dotted outline
  20         overflow: 'auto'
  21     });
  22
  23     this.leftView = $(this.views[0]);
  24     this.rightView = $(this.views[1]);
  25     this.splitbar = $(this.views[2] || '<div></div>')
  26       .insertAfter(this.leftView)
  27       .css({
  28         position: 'absolute',
  29         'user-select': 'none',
  30         '-webkit-user-select': 'none',
  31         '-khtml-user-select': 'none',
  32         '-moz-user-select': 'none',
  33         'z-index': 100
  34       })
  35       .attr('unselectable', 'on')
  36       .addClass(this.splitbarClass)
  37       .bind('mousedown.splitview', this.beginResize.bind(this));
  38
  39     this._splitbarWidth = this.splitbar.outerWidth();
  40
  41     // Solomon's algorithm ;-)
  42     this.resplit(this.element.width() / 2);
  43   },
  44
  45   beginResize: function(event) {
  46     this.zombie = this.zombie || this.splitbar.clone(false).insertAfter(this.leftView);
  47     this.views.css("-webkit-user-select", "none"); // Safari selects A/B text on a move
  48     this.splitbar.addClass(this.activeClass);
  49     this.leftViewOffset = this.leftView[0].offsetWidth - event.pageX;
  50
  51     $(document)
  52       .bind('mousemove.splitview', this.resizeChanged.bind(this))
  53       .bind('mouseup.splitview', this.endResize.bind(this));
  54   },
  55
  56   resizeChanged: function(event) {
  57     var newPosition = event.pageX + this.leftViewOffset;
  58     newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
  59     this.splitbar.css('left', newPosition);
  60   },
  61
  62   endResize: function(event) {
  63     var newPosition = event.pageX + this.leftViewOffset;
  64     this.zombie.remove();
  65     this.zombie = null;
  66     this.resplit(newPosition);
  67
  68     $(document)
  69       .unbind('mousemove.splitview')
  70       .unbind('mouseup.splitview');
  71   },
  72
  73   resplit: function(newPosition) {
  74     newPosition = Math.max(0, Math.min(newPosition, this.element.width() - this._splitbarWidth));
  75     this.splitbar.css('left', newPosition);
  76     this.leftView.css({
  77       left: 0,
  78       width: newPosition
  79     });
  80     this.rightView.css({
  81       left: newPosition + this._splitbarWidth,
  82       width: this.element.width() - newPosition - this._splitbarWidth
  83     });
  84     if (!$.browser.msie) {
  85                   this.views.trigger("resize");
  86                 }
  87   },
  88
  89   dispose: function() {
  90     this.splitter.unbind('mousedown.splitview');
  91   }
  92 });
  93