Refactored, simplified and removed unused code.

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;
-
-        // 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;
-        }
+    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;
+    };
 
-        // 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();
         }
+    };
+
+    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;
+    };
 
-        if (ondragmove) this.ondragmove(isResize);
-        // Stop a normal drag event.
-        cancelEvent(e);
-    }};
 
+    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;
+        }
+        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);
-    }};
+    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 : '';
+    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 : '';
 
-        // 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;
-        }
-        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;
-        }
-        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;
-        }
-        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;
+        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;
         }
-        return processed;
-    }};
+    };
     return DragResize;
 }));