err.no Git - scalable-opengroupware.org/blob - UI/WebServerResources/SOGoDragHandles.js

   1 var SOGoDragHandlesInterface = {
   2   leftMargin: 180,
   3   topMargin: 120,
   4   dhType: null,
   5   origX: -1,
   6   origLeft: -1,
   7   origRight: -1,
   8   origY: -1,
   9   origUpper: -1,
  10   origLower: -1,
  11   delta: -1,
  12   leftBlock: null,
  13   rightBlock: null,
  14   upperBlock: null,
  15   lowerBlock: null,
  16   startHandleDraggingBound: null,
  17   stopHandleDraggingBound: null,
  18   moveBound: null,
  19   bind: function () {
  20     this.startHandleDraggingBound = this.startHandleDragging.bindAsEventListener(this);
  21     Event.observe(this, "mousedown", this.startHandleDraggingBound, false);
  22   },
  23   _determineType: function () {
  24     if (this.leftBlock && this.rightBlock)
  25       this.dhType = 'horizontal';
  26     else if (this.upperBlock && this.lowerBlock)
  27       this.dhType = 'vertical';
  28   },
  29   startHandleDragging: function (event) {
  30     if (!this.dhType)
  31       this._determineType();
  32     var targ = getTarget(event);
  33     if (targ.nodeType == 1) {
  34       if (this.dhType == 'horizontal') {
  35         this.origX = this.offsetLeft;
  36         this.origLeft = this.leftBlock.offsetWidth;
  37         delta = 0;
  38         this.origRight = this.rightBlock.offsetLeft - 5;
  39         document.body.setStyle({ cursor: "e-resize" });
  40       } else if (this.dhType == 'vertical') {
  41         this.origY = this.offsetTop;
  42         this.origUpper = this.upperBlock.offsetHeight;
  43         var pointY = Event.pointerY(event);
  44         if (pointY <= this.topMargin) delta = this.topMargin;
  45         else delta = pointY - this.offsetTop - 5;
  46         this.origLower = this.lowerBlock.offsetTop - 5;
  47         document.body.setStyle({ cursor: "n-resize" });
  48       }
  49       this.stopHandleDraggingBound = this.stopHandleDragging.bindAsEventListener(this);
  50       Event.observe(document.body, "mouseup", this.stopHandleDraggingBound, true);
  51       this.moveBound = this.move.bindAsEventListener(this);
  52       Event.observe(document.body, "mousemove", this.moveBound, true);
  53       this.move(event);
  54       event.cancelBubble = true;
  55     }
  56
  57     return false;
  58   },
  59   stopHandleDragging: function (event) {
  60     if (!this.dhType)
  61       this._determineType();
  62     if (this.dhType == 'horizontal') {
  63       var pointerX = Event.pointerX(event);
  64       if (pointerX <= this.leftMargin) {
  65         this.rightBlock.setStyle({ left: (this.leftMargin) + 'px' });
  66         this.leftBlock.setStyle({ width: (this.leftMargin) + 'px' });
  67       }
  68       else {
  69         var deltaX = Math.floor(pointerX - this.origX - (this.offsetWidth / 2));
  70         this.rightBlock.setStyle({ left: (this.origRight + deltaX) + 'px' });
  71         this.leftBlock.setStyle({ width: (this.origLeft + deltaX) + 'px' });
  72       }
  73     } else if (this.dhType == 'vertical') {
  74       var pointerY = Event.pointerY(event);
  75       if (pointerY <= this.topMargin) {
  76         this.lowerBlock.setStyle({ top: (this.topMargin - delta) + 'px' });
  77         this.upperBlock.setStyle({ height: (this.topMargin - delta) + 'px' });
  78       }
  79       else {
  80         var deltaY = Math.floor(pointerY - this.origY - (this.offsetHeight / 2));
  81         this.lowerBlock.setStyle({ top: (this.origLower + deltaY - delta) + 'px' });
  82         this.upperBlock.setStyle({ height: (this.origUpper + deltaY - delta) + 'px' });
  83       }
  84     }
  85     Event.stopObserving(document.body, "mouseup", this.stopHandleDraggingBound, true);
  86     Event.stopObserving(document.body, "mousemove", this.moveBound, true);
  87
  88     document.body.setAttribute('style', '');
  89
  90     Event.stop(event);
  91   },
  92   move: function (event) {
  93     if (!this.dhType)
  94       this._determineType();
  95     if (this.dhType == 'horizontal') {
  96       var hX =  Event.pointerX(event);
  97       var width = this.offsetWidth;
  98       if (hX < this.leftMargin)
  99         hX = this.leftMargin + Math.floor(width / 2);
 100       var newLeft = Math.floor(hX - (width / 2));
 101       this.setStyle({ left: newLeft + 'px' });
 102     } else if (this.dhType == 'vertical') {
 103       var height = this.offsetHeight;
 104       var hY = Event.pointerY(event);
 105       if (hY < this.topMargin)
 106         hY = this.topMargin + Math.floor(height / 2);
 107       var newTop = Math.floor(hY - (height / 2))  - delta;
 108       this.setStyle({ top: newTop + 'px' });
 109     }
 110     Event.stop(event);
 111   },
 112   doubleClick: function (event) {
 113     if (!this.dhType)
 114       this._determineType();
 115     if (this.dhType == 'horizontal') {
 116       var lLeft = this.leftBlock.offsetLeft;
 117
 118       if (this.offsetLeft > lLeft) {
 119         var leftdelta = this.rightBlock.offsetLeft - this.offsetLeft;
 120
 121         this.setStyle({ left: lLeft + 'px' });
 122         this.leftBlock.setStyle({ width: '0px' });
 123         this.rightBlock.setStyle({ left: (lLeft + leftdelta) + 'px' });
 124       }
 125     } else if (this.dhType == 'vertical') {
 126       var uTop = this.upperBlock.offsetTop;
 127
 128       if (this.offsetTop > uTop) {
 129         var topdelta = this.lowerBlock.offsetTop - this.offsetTop;
 130
 131         this.setStyle({ top: uTop + 'px' });
 132         this.upperBlock.setStyle({ width: '0px' });
 133         this.lowerBlock.setStyle({ top: (uTop + topdelta) + 'px' });
 134       }
 135     }
 136   }
 137
 138 };