dragresize: render handles in the plugin

instead of having them already in the templates.

src/converse-dragresize.js

@@ -19,6 +19,17 @@
     var $ = converse.env.jQuery,
         _ = converse.env._;
 
+    function renderDragResizeHandles (_converse, view) {
+        var flyout = view.el.querySelector('.box-flyout');
+        var div = document.createElement('div');
+        div.innerHTML = tpl_dragresize();
+        flyout.insertBefore(
+            div,
+            flyout.firstChild
+        );
+    }
+
+
     converse.plugins.add('converse-dragresize', {
         /* Optional dependencies are other plugins which might be
          * overridden or relied upon, and therefore need to be loaded before
@@ -102,6 +113,7 @@
 
                 render: function () {
                     var result = this.__super__.render.apply(this, arguments);
+                    renderDragResizeHandles(this.__super__._converse, this);
                     this.setWidth();
                     return result;
                 },
@@ -257,8 +269,10 @@
                 },
 
                 render: function () {
-                    $(window).on('resize', _.debounce(this.setWidth.bind(this), 100));
-                    return this.__super__.render.apply(this, arguments);
+                    var result = this.__super__.render.apply(this, arguments);
+                    renderDragResizeHandles(this.__super__._converse, this);
+                    this.setWidth();
+                    return result;
                 }
             },
 
@@ -274,6 +288,13 @@
                     this.__super__.initialize.apply(this, arguments);
                 },
 
+                render: function () {
+                    var result = this.__super__.render.apply(this, arguments);
+                    renderDragResizeHandles(this.__super__._converse, this);
+                    this.setWidth();
+                    return result;
+                },
+
                 renderLoginPanel: function () {
                     var result = this.__super__.renderLoginPanel.apply(this, arguments);
                     this.initDragResize().setDimensions();
@@ -301,20 +322,9 @@
 
                 render: function () {
                     var result = this.__super__.render.apply(this, arguments);
-                    this.renderDragResizeHandles();
+                    renderDragResizeHandles(this.__super__._converse, this);
                     this.setWidth();
                     return result;
-                },
-
-                renderDragResizeHandles: function () {
-                    var _converse = this.__super__._converse;
-                    var flyout = this.el.querySelector('.box-flyout');
-                    var div = document.createElement('div');
-                    div.innerHTML = tpl_dragresize();
-                    flyout.insertBefore(
-                        div,
-                        flyout.firstChild
-                    );
                 }
             }
         },

src/templates/chatbox.html

@@ -1,7 +1,4 @@
 <div class="flyout box-flyout">
-    <div class="dragresize dragresize-top"></div>
-    <div class="dragresize dragresize-topleft"></div>
-    <div class="dragresize dragresize-left"></div>
     <div class="chat-head chat-head-chatbox">
         <a class="chatbox-btn close-chatbox-button icon-close" title="{{{info_close}}}"></a>
         <div class="chat-title">

src/templates/controlbox.html

@@ -1,7 +1,4 @@
 <div class="flyout box-flyout">
-    <div class="dragresize dragresize-top"></div>
-    <div class="dragresize dragresize-topleft"></div>
-    <div class="dragresize dragresize-left"></div>
     <div class="chat-head controlbox-head">
         <ul id="controlbox-tabs"></ul>
         {[ if (!sticky_controlbox) { ]}