platforma/static/js/views/split.js

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