Add code that allows resize by click+drag.

Removed dragresize.js and instead wrote new much smaller and simpler code
in converse.js.

converse.js

@@ -12,12 +12,11 @@
         define("converse",
               ["converse-dependencies", "converse-templates"],
             function(dependencies, templates) {
-                var DragResize = dependencies[0];
-                var otr = dependencies[1];
+                var otr = dependencies[0];
                 if (typeof otr !== "undefined") {
-                    return factory(jQuery, _, otr.OTR, otr.DSA, templates, DragResize);
+                    return factory(jQuery, _, otr.OTR, otr.DSA, templates);
                 } else {
-                    return factory(jQuery, _, undefined, undefined, templates, DragResize);
+                    return factory(jQuery, _, undefined, undefined, templates);
                 }
             }
         );
@@ -29,26 +28,9 @@
             interpolate : /\{\{([\s\S]+?)\}\}/g
         };
         // TODO Templates not defined
-        root.converse = factory(jQuery, _, OTR, DSA, templates, DragResize);
+        root.converse = factory(jQuery, _, OTR, DSA, templates);
     }
-}(this, function ($, _, OTR, DSA, templates, DragResize) {
-
-    var dragresize = new DragResize('dragresize', {
-        minWidth: 200,
-        minHeight: 250,
-        minLeft: 20,
-        minTop: 20,
-        maxLeft: 0,
-        maxTop: 600,
-        handles: ['tm']
-    });
-    dragresize.isElement = function(elm) {
-        if (elm.className && elm.className.indexOf('box-flyout') > -1) {
-            return true;
-        }
-    };
-    dragresize.apply(document);
-
+}(this, function ($, _, OTR, DSA, templates) {
     if (typeof console === "undefined" || typeof console.log === "undefined") {
         console = { log: function () {}, error: function () {} };
     }
@@ -154,6 +136,7 @@
         // Default configuration values
         // ----------------------------
         this.allow_contact_requests = true;
+        this.allow_dragresize = true;
         this.allow_muc = true;
         this.allow_otr = true;
         this.animate = true;
@@ -178,6 +161,7 @@
         // Allow only whitelisted configuration attributes to be overwritten
         _.extend(this, _.pick(settings, [
             'allow_contact_requests',
+            'allow_dragresize',
             'allow_muc',
             'allow_otr',
             'animate',
@@ -499,7 +483,18 @@
                     }
                 });
 
-                $(window).on("blur focus", $.proxy(function(e) {
+                $(document).on('mousemove', $.proxy(function (ev) {
+                    if (!this.resized_chatbox || !this.allow_dragresize) { return true; }
+                    ev.preventDefault();
+                    this.resized_chatbox.resizeChatbox(ev);
+                }, this));
+
+                $(document).on('mouseup', $.proxy(function (ev) {
+                    if (!this.resized_chatbox || !this.allow_dragresize) { return true; }
+                    this.resized_chatbox = null;
+                }, this));
+
+                $(window).on("blur focus", $.proxy(function (e) {
                     if ((this.windowState != e.type) && (e.type == 'focus')) {
                         converse.clearMsgCounter();
                     }
@@ -758,7 +753,8 @@
                 'click .start-otr': 'startOTRFromToolbar',
                 'click .end-otr': 'endOTR',
                 'click .auth-otr': 'authOTR',
-                'click .toggle-call': 'toggleCall'
+                'click .toggle-call': 'toggleCall',
+                'mousedown .dragresize-tm': 'onDragResizeStart'
             },
 
             initialize: function (){
@@ -782,6 +778,10 @@
                 if (this.model.get('status')) {
                     this.showStatusMessage(this.model.get('status'));
                 }
+                // Drag to resize values
+                this.chatboxMinHeight = 250;
+                this.chatboxHeight = this.$el.children('.box-flyout').height();
+                this.prevPageY = 0; // To store last known mouse position
             },
 
             render: function () {
@@ -999,6 +999,25 @@
                 }
             },
 
+            onDragResizeStart: function (ev) {
+                if (!converse.allow_dragresize) { return true; }
+                // Record element attributes for mouseMove().
+                this.chatboxHeight = this.$el.children('.box-flyout').height();
+                converse.resized_chatbox = this;
+                this.prevPageY = ev.pageY;
+            },
+
+            resizeChatbox: function (ev) {
+                var diff = ev.pageY - this.prevPageY;
+                if (!diff) { return; }
+                if (this.chatboxHeight - diff < this.chatboxMinHeight) {
+                    diff = this.chatboxHeight - this.chatboxMinHeight;
+                }
+                this.chatboxHeight -= diff;
+                this.prevPageY = ev.pageY;
+                this.$el.children('.box-flyout')[0].style.height = this.chatboxHeight + 'px';
+            },
+
             insertEmoticon: function (ev) {
                 ev.stopPropagation();
                 this.$el.find('.toggle-smiley ul').slideToggle(200);

main.js

@@ -2,7 +2,6 @@ config = {
     paths: {
         "jquery": "components/jquery/jquery",
         "jquery.tinysort": "components/tinysort/src/jquery.tinysort",
-        "dragresize": "src/dragresize",
         "locales": "locale/locales",
         "underscore": "components/underscore/underscore",
         "backbone": "components/backbone/backbone",

src/deps-full.js

@@ -1,5 +1,4 @@
 define("converse-dependencies", [
-    "dragresize",
     "otr",
     "locales",
     "backbone.localStorage",

src/dragresize.js

@@ -1,232 +0,0 @@
-/*
-DragResize v1.1
-(c) 2005-2006 Angus Turnbull, TwinHelix Designs http://www.twinhelix.com
-
-Licensed under the CC-GNU LGPL, version 2.1 or later:
-http://creativecommons.org/licenses/LGPL/2.1/
-This is distributed WITHOUT ANY WARRANTY; without even the implied
-warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-
-Simplified and modified for Converse.js by JC Brand https://opkode.com
-*/
-
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        define("dragresize", [], function() { return factory(); });
-    } else {
-        root.DragResize = factory();
-    }
-}(this, function () {
-    function cancelEvent(e, c) {
-        e.returnValue = false;
-        if (e.preventDefault) {
-            e.preventDefault();
-        }
-        if (c) {
-            e.cancelBubble = true;
-            if (e.stopPropagation) {
-                e.stopPropagation();
-            }
-        }
-    }
-
-    // *** DRAG/RESIZE CODE ***
-    function DragResize(myName, config) {
-        var props = {
-            myName: myName,                  // Name of the object.
-            enabled: true,                   // Global toggle of drag/resize.
-            handles: ['tl', 'tm', 'tr',
-            'ml', 'mr', 'bl', 'bm', 'br'],   // Array of drag handles: top/mid/bot/right.
-            isElement: null,                 // Function ref to test for an element.
-            element: null,                   // The currently selected element.
-            handle: null,                    // Active handle reference of the element.
-            minWidth: 10, minHeight: 10,     // Minimum pixel size of elements.
-            zIndex: 1,                       // The highest Z-Index yet allocated.
-            lastMouseX: 0, lastMouseY: 0,    // Last processed mouse positions.
-            mOffX: 0, mOffY: 0,              // A known offset between position & mouse.
-            elmW: 0, elmH: 0,                // Element size.
-            allowBlur: true,                 // Whether to allow automatic blur onclick.
-            ondragfocus: null,               // Event handler functions.
-            ondragstart: null,
-            ondragend: null,
-            ondragblur: null
-        };
-        for (var p in props) {
-            this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
-        }
-    };
-
-
-    DragResize.prototype.apply = function(node) {
-        /* 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.
-            if (!document.getElementById || !enabled) return;
-
-            // Activate and record our new dragging element.
-            if (newElement && (newElement != element) && enabled) {
-                element = newElement;
-                // Elevate it
-                element.style.zIndex = ++zIndex;
-                // Record element attributes for mouseMove().
-                elmW = element.offsetWidth;
-                elmH = element.offsetHeight;
-                if (ondragfocus) this.ondragfocus();
-            }
-        }
-    };
-
-    DragResize.prototype.deselect = function(delHandles) {
-        with (this) {
-            // Immediately stops dragging an element. If 'delHandles' is true, this
-            // remove the handles from the element and clears the element flag,
-            // completely resetting the .
-            if (!document.getElementById || !enabled) return;
-
-            if (delHandles) {
-                if (ondragblur) this.ondragblur();
-                element = null;
-            }
-            handle = null;
-            mOffX = 0;
-            mOffY = 0;
-        }
-    };
-
-    DragResize.prototype.mouseDown = function(e) {
-        with (this) {
-            // Suitable elements are selected for drag/resize on mousedown.
-            // We also initialise the resize boxes, and drag parameters like mouse position etc.
-            if (!document.getElementById || !enabled) return true;
-
-            var elm = e.target || e.srcElement,
-                newElement = null,
-                newHandle = null,
-                hRE = new RegExp(myName + '-([trmbl]{2})', '');
-
-            while (elm) {
-                // Loop up the DOM looking for matching elements. Remember one if found.
-                if (elm.className) {
-                    if (!newHandle && (hRE.test(elm.className))) newHandle = elm;
-                    if (isElement(elm)) { newElement = elm; break }
-                }
-                elm = elm.parentNode;
-            }
-
-            // If this isn't on the last dragged element, call deselect(),
-            // which will hide its handles and clear element.
-            if (element && (element != newElement) && allowBlur) deselect(true);
-
-            // If we have a new matching element, call select().
-            if (newElement && (!element || (newElement == element))) {
-                // Stop mouse selections if we're dragging a handle.
-                if (newHandle) cancelEvent(e);
-                select(newElement, newHandle);
-                handle = newHandle;
-                if (handle && ondragstart) this.ondragstart(hRE.test(handle.className));
-            }
-        }
-    };
-
-
-    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;
-    };
-
-
-    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');
-            if (!oDF) {
-                var oDF = document.createElement('input');
-                oDF.id = 'op-drag-fix';
-                oDF.style.display = 'none';
-                document.body.appendChild(oDF);
-            }
-            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;
-    };
-
-
-    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.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;
-        }
-    };
-    return DragResize;
-}));