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