project/static/js/views/split.js

   1 /*globals Class*/
   2
   3 var SplitView = Class.extend({
   4   leftPanelClass: 'splitview-left-panel',
   5   rightPanelClass: 'splitview-right-panel',
   6   splitterClass: 'splitview-splitter',
   7   overlayClass: 'splitview-overlay',
   8   element: null,
   9
  10   init: function(element) {
  11     this.element = $(element);
  12     this.leftPanel = $(this.leftPanelClass, element);
  13     this.rightPanel = $(this.rightPanelClass, element);
  14     this.splitter = $(this.splitterClass, element);
  15     this.overlay = this._createOverlay(this.overlayClass);
  16
  17     this.splitter.bind('mousedown.splitview', this.beginResize.bind(this));
  18   },
  19
  20   _createOverlay: function(cssClass) {
  21     var pos = this.root.position();
  22     return $('<div />')
  23       .addClass(cssClass)
  24       .css({
  25         position: 'absolute',
  26         left: pos.left,
  27         top: pos.top,
  28         width: this.root.width(),
  29         height: this.root.height()
  30       })
  31       .hide()
  32       .appendTo(this.element);
  33   },
  34
  35   beginResize: function(event) {
  36     this.hotspotX = event.pageX - this.splitter.position().left;
  37
  38     $(document)
  39       .bind('mousemove.splitview', this.resizeChanged.bind(this))
  40       .bind('mouseup.splitview', this.endResize.bind(this));
  41
  42     this.overlay.show();
  43     return false;
  44   },
  45
  46   resizeChanged: function(event) {
  47     var old_width = this.overlay.width();
  48     var delta = event.pageX + this.hotspotX - old_width;
  49
  50     if(old_width + delta < 12) delta = 12 - old_width;
  51     if(old_width + delta > $(window).width()) {
  52       delta = $(window).width() - old_width;
  53     }
  54
  55     this.overlay.css({'width': old_width + delta});
  56
  57     if(this.overlay.next) {
  58         var left = parseInt(this.overlay.next.css('left'), 10);
  59         this.overlay.next.css('left', left+delta);
  60     }
  61     return false;
  62   },
  63
  64   endResize: function(event) {
  65     $(document)
  66       .unbind('mousemove.splitview')
  67       .unbind('mouseup.splitview');
  68
  69     this.leftPanel.css({
  70       left: 0,
  71       right: this.hotspotX
  72     });
  73
  74     this.rightPanel.css({
  75       left: this.hotspotX,
  76       right: 0
  77     });
  78
  79     this.overlay.hide();
  80   },
  81
  82   dispose: function() {
  83     this.splitter.unbind('mousedown.splitview');
  84   }
  85 });
  86