From fe1fa67958826dbeb5b1fe0106cbf9668513ab93 Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Tue, 2 Oct 2012 11:37:23 +0100
Subject: [PATCH] Memberlist resizing #56

---
 client_backbone/css/style.css                 |   5 +-
 client_backbone/dev/model_application.js      |   1 +
 client_backbone/dev/view.js                   |  48 +++++++++++++++++-
 .../{scroll_handle.png => resize_handle.png}  | Bin
 client_backbone/index.html                    |   4 +-
 5 files changed, 54 insertions(+), 4 deletions(-)
 rename client_backbone/img/{scroll_handle.png => resize_handle.png} (100%)

diff --git a/client_backbone/css/style.css b/client_backbone/css/style.css
index f7e92cc..bc3e3ae 100644
--- a/client_backbone/css/style.css
+++ b/client_backbone/css/style.css
@@ -20,7 +20,10 @@ a { color:#36C; text-decoration:none; cursor:pointer; }
 #panels { position:absolute; left:0px; right:200px; bottom:100px; top:100px; }
 #memberlists { position:absolute; right:0px; width:200px; bottom:100px; top:100px; overflow-y:auto; }
 #controlbox { position: absolute; bottom:0px; width:100%; background-color:#1B1B1B; display:none; }
-
+#memberlists_resize_handle {
+    position: absolute; width:10px; z-index:1; cursor:w-resize;
+    background:url('../img/resize_handle.png') no-repeat; background-position:center;
+}
 
 
 #toolbar #tabs { margin-right: 200px; }
diff --git a/client_backbone/dev/model_application.js b/client_backbone/dev/model_application.js
index 48dc8a3..64ed872 100755
--- a/client_backbone/dev/model_application.js
+++ b/client_backbone/dev/model_application.js
@@ -99,6 +99,7 @@ kiwi.model.Application = Backbone.Model.extend(new (function () {
 
         this.message = new kiwi.view.StatusMessage({el: $('#status_message')[0]});
 
+        this.resize_handle = new kiwi.view.ResizeHandler({el: $('#memberlists_resize_handle')[0]});
         
         this.panels.server.view.show();
 
diff --git a/client_backbone/dev/view.js b/client_backbone/dev/view.js
index 13fffa3..277eebb 100755
--- a/client_backbone/dev/view.js
+++ b/client_backbone/dev/view.js
@@ -348,13 +348,13 @@ kiwi.view.Panel = Backbone.View.extend({
         if (members) {
             $('#memberlists').show();
             members.view.show();
-            this.$container.parent().css('right', '200px');
         } else {
             // Memberlist not found for this panel, hide any active ones
             $('#memberlists').hide().children().removeClass('active');
-            this.$container.parent().css('right', '0');
         }
 
+        kiwi.app.view.doLayout();
+
         this.scrollToBottom();
         this.alert('none');
 
@@ -817,6 +817,38 @@ kiwi.view.StatusMessage = Backbone.View.extend({
 
 
 
+kiwi.view.ResizeHandler = Backbone.View.extend({
+    events: {
+        'mousedown': 'startDrag',
+        'mouseup': 'stopDrag'
+    },
+
+    dragging: false,
+    starting_width: {},
+
+    initialize: function () {
+        $(window).on('mousemove', $.proxy(this.onDrag, this));
+    },
+
+    startDrag: function (event) {
+        this.dragging = true;
+    },
+
+    stopDrag: function (event) {
+        this.dragging = false;
+    },
+
+    onDrag: function (event) {
+        if (!this.dragging) return;
+
+        this.$el.css('left', event.clientX - (this.$el.outerWidth(true) / 2));
+        $('#memberlists').css('width', this.$el.parent().width() - (this.$el.position().left + this.$el.outerWidth()));
+        kiwi.app.view.doLayout();
+    }
+});
+
+
+
 kiwi.view.Application = Backbone.View.extend({
     initialize: function () {
         $(window).resize(this.doLayout);
@@ -850,6 +882,7 @@ kiwi.view.Application = Backbone.View.extend({
         var el_memberlists = $('#memberlists');
         var el_toolbar = $('#toolbar');
         var el_controlbox = $('#controlbox');
+        var el_resize_handle = $('#memberlists_resize_handle');
 
         var css_heights = {
             top: el_toolbar.outerHeight(true),
@@ -858,6 +891,17 @@ kiwi.view.Application = Backbone.View.extend({
 
         el_panels.css(css_heights);
         el_memberlists.css(css_heights);
+        el_resize_handle.css(css_heights);
+
+        if (el_memberlists.css('display') != 'none') {
+            // Handle + panels to the side of the memberlist
+            el_panels.css('right', el_memberlists.outerWidth(true) + el_resize_handle.outerWidth(true));
+            el_resize_handle.css('left', el_memberlists.position().left - el_resize_handle.outerWidth(true));
+        } else {
+            // Memberlist is hidden so handle + panels to the right edge
+            el_panels.css('right', el_resize_handle.outerWidth(true));
+            el_resize_handle.css('left', el_panels.outerWidth(true));
+        }
     },
 
 
diff --git a/client_backbone/img/scroll_handle.png b/client_backbone/img/resize_handle.png
similarity index 100%
rename from client_backbone/img/scroll_handle.png
rename to client_backbone/img/resize_handle.png
diff --git a/client_backbone/index.html b/client_backbone/index.html
index 9fb30dd..b3cd01e 100755
--- a/client_backbone/index.html
+++ b/client_backbone/index.html
@@ -27,6 +27,8 @@
             <div id="status_message"></div>
         </div>
 
+        <div id="memberlists_resize_handle"></div>
+
         <div id="panels">
             <div class="panel_container container1"></div>
         </div>
@@ -186,7 +188,7 @@
                 // Override the kiwi_server to use. (Think: running on standalone client..)
                 //kiwi_server: 'http://kiwiirc.com:80'
             };
-            
+
             // Start the app by either the dev or closed environment
             (kiwi && kiwi.global && kiwi.global.start(opts)) || (kiwi && kiwi.start(opts));
         }
-- 
2.25.1