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

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