diff --git a/src/dragresize.js b/src/dragresize.js index 4e2eebf37..9bb11bba0 100644 --- a/src/dragresize.js +++ b/src/dragresize.js @@ -17,48 +17,6 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com root.DragResize = factory(); } }(this, function () { - - // Common API code. - if (typeof addEvent != 'function') { - var removeEvent = function(o, t, f, l) { - var d = 'removeEventListener'; - if (o[d] && !l) { - return o[d](t, f, false); - } - if (o._evts && o._evts[t] && f._i) { - delete o._evts[t][f._i]; - } - }; - - var addEvent = function(o, t, f, l) { - var d = 'addEventListener', n = 'on' + t, rO = o, rT = t, rF = f, rL = l; - if (o[d] && !l) { - return o[d](t, f, false); - } - if (!o._evts) { - o._evts = {}; - } - if (!o._evts[t]) { - o._evts[t] = o[n] ? { b: o[n] } : {}; - o[n] = new Function('e', - 'var r = true, o = this, a = o._evts["' + t + '"], i; for (i in a) {' + - 'o._f = a[i]; r = o._f(e||window.event) != false && r; o._f = null;' + - '} return r' - ); - if (t != 'unload') { - addEvent(window, 'unload', function() { - removeEvent(rO, rT, rF, rL); - }); - } - } - if (!f._i) { - f._i = addEvent._i++; - } - o._evts[t][f._i] = f; - }; - addEvent._i = 1; - } - function cancelEvent(e, c) { e.returnValue = false; if (e.preventDefault) { @@ -83,22 +41,16 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com element: null, // The currently selected element. handle: null, // Active handle reference of the element. minWidth: 10, minHeight: 10, // Minimum pixel size of elements. - minLeft: 0, maxLeft: 9999, // Bounding box area, in pixels. - minTop: 0, maxTop: 9999, zIndex: 1, // The highest Z-Index yet allocated. - mouseX: 0, mouseY: 0, // Current mouse position, recorded live. lastMouseX: 0, lastMouseY: 0, // Last processed mouse positions. mOffX: 0, mOffY: 0, // A known offset between position & mouse. - elmX: 0, elmY: 0, // Element position. elmW: 0, elmH: 0, // Element size. allowBlur: true, // Whether to allow automatic blur onclick. ondragfocus: null, // Event handler functions. ondragstart: null, - ondragmove: null, ondragend: null, ondragblur: null }; - for (var p in props) { this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p]; } @@ -106,13 +58,13 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com DragResize.prototype.apply = function(node) { - // Adds object event handlers to the specified DOM node. - var obj = this; - addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } ); - addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } ); - addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } ); + /* Adds object event handlers to the specified DOM node */ + $(node).bind('mousedown', this.mouseDown.bind(this)); + $(node).bind('mousemove', this.mouseMove.bind(this)); + $(node).bind('mouseup', this.mouseUp.bind(this)); }; + DragResize.prototype.select = function(newElement) { with (this) { // Selects an element for dragging. @@ -124,8 +76,6 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com // Elevate it element.style.zIndex = ++zIndex; // Record element attributes for mouseMove(). - elmX = parseInt(element.style.left); - elmY = parseInt(element.style.top); elmW = element.offsetWidth; elmH = element.offsetHeight; if (ondragfocus) this.ondragfocus(); @@ -185,53 +135,16 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com } }; - DragResize.prototype.mouseMove = function(e) { with (this) { - // This continually offsets the dragged element by the difference between the - // last recorded mouse position (mouseX/Y) and the current mouse position. - if (!document.getElementById || !enabled) return true; - // We always record the current mouse position. - mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft; - mouseY = e.pageY || e.clientY + document.documentElement.scrollTop; - // Record the relative mouse movement, in case we're dragging. - // Add any previously stored & ignored offset to the calculations. - var diffX = mouseX - lastMouseX + mOffX; - var diffY = mouseY - lastMouseY + mOffY; - mOffX = mOffY = 0; - // Update last processed mouse positions. - lastMouseX = mouseX; - lastMouseY = mouseY; + DragResize.prototype.updateMouseCoordinates = function (e) { + /* Update last processed mouse positions */ + this.mOffX = this.mOffY = 0; + this.lastMouseX = e.pageX || e.clientX + document.documentElement.scrollLeft; + this.lastMouseY = e.pageY || e.clientY + document.documentElement.scrollTop; + }; - // That's all we do if we're not dragging anything. - if (!handle) return true; - - // If included in the script, run the resize handle drag routine. - // Let it create an object representing the drag offsets. - var isResize = false; - if (this.resizeHandleDrag && this.resizeHandleDrag(diffX, diffY)) { - isResize = true; - } else { - // If the resize drag handler isn't set or returns fase (to indicate the drag was - // not on a resize handle), we must be dragging the whole element, so move that. - // Bounds check left-right... - var dX = diffX, dY = diffY; - if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX)); - else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW)); - // ...and up-down. - if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY)); - else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH)); - elmX += diffX; - elmY += diffY; - } - - // Assign new info back to the element, with minimum dimensions. - with (element.style) { - left = elmX + 'px'; - width = elmW + 'px'; - top = elmY + 'px'; - height = elmH + 'px'; - } + DragResize.prototype.operaHack = function (e) { // Evil, dirty, hackish Opera select-as-you-drag fix. if (window.opera && document.documentElement) { var oDF = document.getElementById('op-drag-fix'); @@ -243,65 +156,77 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com } oDF.focus(); } + }; - if (ondragmove) this.ondragmove(isResize); - // Stop a normal drag event. - cancelEvent(e); - }}; + DragResize.prototype.resizeElement = function (e) { + // Let it create an object representing the drag offsets. + var resize = this.resizeHandleDrag(e) ? true : false; + // Assign new info back to the element, with minimum dimensions. + this.element.style.width = this.elmW + 'px'; + this.element.style.height = this.elmH + 'px'; + this.operaHack(); + return e; + }; - DragResize.prototype.mouseUp = function(e) { with (this) { - // On mouseup, stop dragging, but don't reset handler visibility. - if (!document.getElementById || !enabled) return; - - var hRE = new RegExp(myName + '-([trmbl]{2})', ''); - if (handle && ondragend) this.ondragend(hRE.test(handle.className)); - deselect(false); - }}; - - DragResize.prototype.resizeHandleDrag = function(diffX, diffY) { with (this) { - // Passed the mouse movement amounts. This function checks to see whether the - // drag is from a resize handle created above; if so, it changes the stored - // elm* dimensions and mOffX/Y. - - var hClass = handle && handle.className && - handle.className.match(new RegExp(myName + '-([tmblr]{2})')) ? RegExp.$1 : ''; - - // If the hClass is one of the resize handles, resize one or two dimensions. - // Bounds checking is the hard bit -- basically for each edge, check that the - // element doesn't go under minimum size, and doesn't go beyond its boundary. - var dY = diffY, dX = diffX, processed = false; - if (hClass.indexOf('t') >= 0) { - rs = 1; - if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight)); - else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY)); - elmY += diffY; - elmH -= diffY; - processed = true; + DragResize.prototype.mouseMove = function (e) { + /* Continuously offsets the dragged element by the difference between the + * previous mouse position and the current mouse position. + */ + if (!this.enabled) return true; + if (!this.handle) { + // We're not dragging anything + this.updateMouseCoordinates(e); + return true; } - if (hClass.indexOf('b') >= 0) { - rs = 1; - if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH)); - else if (elmY + elmH + dY > maxTop) mOffY = (dY - (diffY = maxTop - elmY - elmH)); - elmH += diffY; - processed = true; + cancelEvent(this.resizeElement(e)); + }; + + + DragResize.prototype.mouseUp = function(e) { + with (this) { + // On mouseup, stop dragging, but don't reset handler visibility. + if (!document.getElementById || !enabled) return; + var hRE = new RegExp(myName + '-([trmbl]{2})', ''); + if (handle && ondragend) this.ondragend(hRE.test(handle.className)); + deselect(false); } - if (hClass.indexOf('l') >= 0) { - rs = 1; - if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth)); - else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX)); - elmX += diffX; - elmW -= diffX; - processed = true; + }; + + + DragResize.prototype.resizeHandleDrag = function(e) { + /* Checks to see whether the + * drag is from a resize handle created above; if so, it changes the stored + * elm* dimensions and mOffX/Y. + */ + var x = e.pageX || e.clientX + document.documentElement.scrollLeft; + var y = e.pageY || e.clientY + document.documentElement.scrollTop; + var diffX = x - this.lastMouseX + this.mOffX; + var diffY = y - this.lastMouseY + this.mOffY; + var hClass = this.handle && + this.handle.className && + this.handle.className.match(new RegExp(this.myName + '-([tmblr]{2})')) ? RegExp.$1 : ''; + + with (this) { + // If the hClass is one of the resize handles, resize one or two dimensions. + // Bounds checking is the hard bit -- basically for each edge, check that the + // element doesn't go under minimum size, and doesn't go beyond its boundary. + var dY = diffY, dX = diffX, processed = false; + if (hClass.indexOf('t') >= 0) { + rs = 1; + if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight)); + elmH -= diffY; + processed = true; + } + if (hClass.indexOf('b') >= 0) { + rs = 1; + if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH)); + elmH += diffY; + processed = true; + } + this.updateMouseCoordinates(e); + return processed; } - if (hClass.indexOf('r') >= 0) { - rs = 1; - if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW)); - else if (elmX + elmW + dX > maxLeft) mOffX = (dX - (diffX = maxLeft - elmX - elmW)); - elmW += diffX; - processed = true; - } - return processed; - }}; + }; return DragResize; }));