Server select implemented

diff --git a/client_backbone/index.html b/client_backbone/index.html
index ea3a52a81e494590787e2940f40badde242140f3..7fa49ff4af9b33a7726b86fa37f3daaecb7d6def 100644 (file)
--- a/client_backbone/index.html
+++ b/client_backbone/index.html
@@ -38,6 +38,27 @@
         </div>
     </script>
 
+    <script type="text/x-jquery-tmpl" id="tmpl_server_select">
+        <div class="server_select">
+            <form>
+                <div class="basic">
+                    <label for="server_select_nick">Nickname</label>
+                    <input type="text" class="nick" id="server_select_nick"> <br />
+
+                    <button type="submit">Connect..</button>
+                    <a class="show_more">More</a>
+                </div>
+
+                <div class="more">
+                    <label for="server_select_server">Server</label>
+                    <input type="text" class="server" id="server_select_server"> <br />
+                    <label for="server_select_channel">Channel</label>
+                    <input type="text" class="channel" id="server_select_channel"> <br />
+                </div>
+            </form>
+        </div>
+    </script>
+
     <script src="jquery-1.7.1.min.js"></script>
     <script src="underscore-min.js"></script>
     <script src="backbone-git.js"></script>
@@ -51,7 +72,7 @@
 
 <script>
     $(function () {
-        kiwi.app = new kiwi.model.Application({container: $('body')[0]});
+        kiwi.app = new kiwi.model.Application({container: $('#kiwi')});
     });
 </script>
 </body>

diff --git a/client_backbone/model.js b/client_backbone/model.js
index 55f23ac1d61705d18ffdf9038fb15d2f15e02df7..c1ef197fa562c5b357b553835cdbfa90a644dac4 100644 (file)
--- a/client_backbone/model.js
+++ b/client_backbone/model.js
@@ -273,6 +273,8 @@ kiwi.model.Panel = Backbone.Model.extend({
 });\r
 \r
 kiwi.model.Server = kiwi.model.Panel.extend({\r
+    server_login: null,\r
+\r
     initialize: function (attributes) {\r
         var name = "Server";\r
         this.view = new kiwi.view.Panel({"model": this, "name": name});\r
@@ -281,7 +283,10 @@ kiwi.model.Server = kiwi.model.Panel.extend({
             "name": name\r
         }, {"silent": true});\r
 \r
-        this.addMsg(' ', '--> Kiwi IRC: Such an awesome IRC client', '', {style: 'color:#009900;'});\r
+        //this.addMsg(' ', '--> Kiwi IRC: Such an awesome IRC client', '', {style: 'color:#009900;'});\r
+\r
+        this.server_login = new kiwi.view.ServerSelect();\r
+        this.view.$el.append(this.server_login.$el);\r
     }\r
 });\r
 \r

diff --git a/client_backbone/model_application.js b/client_backbone/model_application.js
index a6beac06187fcab4f8d30fca80939b4be328a6ca..32e70dd356f38045a254cd59d9436e9ee896ef6b 100644 (file)
--- a/client_backbone/model_application.js
+++ b/client_backbone/model_application.js
@@ -12,21 +12,20 @@ kiwi.model.Application = Backbone.Model.extend(new (function () {
         kiwi.gateway = new kiwi.model.Gateway();\r
         this.bindGatewayCommands(kiwi.gateway);\r
 \r
-        //this.initializeLogin();\r
         this.initializeClient();\r
+        this.view.barsHide(true);\r
 \r
-        kiwi.gateway.set('nick', 'kiwi_' + Math.ceil(Math.random() * 10000).toString());\r
-        kiwi.gateway.connect('ate.anonnet.org', 6667, false, false, function () {\r
-            console.log('gateway connected');\r
-        });\r
-\r
+        this.panels.server.server_login.on('server_connect', function (event) {\r
+            var form = this;\r
 \r
-    };\r
+            kiwi.gateway.set('nick', event.nick);\r
+            kiwi.gateway.connect(event.server, 6667, false, false, function () {\r
+                console.log('gateway connected');\r
+                that.view.barsShow();\r
+                form.hide();\r
+            });\r
+        });\r
 \r
-    this.initializeLogin = function () {\r
-        // TODO: this\r
-        // Show the server selection/login screen.\r
-        // Once connected and logged in, then open the client screen (initializeClient)\r
     };\r
 \r
 \r
@@ -46,6 +45,13 @@ kiwi.model.Application = Backbone.Model.extend(new (function () {
 \r
         // Rejigg the UI sizes\r
         this.view.doLayout();\r
+\r
+        // Populate the server select box with defaults\r
+        this.panels.server.server_login.populateFields({\r
+            'nick': getQueryVariable('nick') || 'kiwi_' + Math.ceil(Math.random() * 10000).toString(),\r
+            'server': getQueryVariable('server') || 'irc.anonnet.org',\r
+            'channel': window.location.hash || '#test'\r
+        });\r
     };\r
 \r
 \r

diff --git a/client_backbone/style.css b/client_backbone/style.css
index 0abf539cb21540f4de94fcf3cffe9f7cb8c7d422..05c28dba7eb79cbd4a8b21b042bf848092cd1d48 100644 (file)
--- a/client_backbone/style.css
+++ b/client_backbone/style.css
@@ -153,4 +153,16 @@ body {
     position:absolute;
     top:2; bottom:2px; left:0; width:100%;
     text-align: center;
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+.server_select { width:300px; margin: 2em auto; }
+.server_select .more { display: none; }
+.server_select button { padding:3px 7px; margin-left: 178px; }
+.server_select input { margin-bottom:5px; padding:3px 7px; }
+.server_select label { width:5em; float:left; margin-right:1em; }
+.server_select .basic .show_more { display: block; border-bottom: 1px dashed gray; margin:10px 0; }
\ No newline at end of file

diff --git a/client_backbone/utils.js b/client_backbone/utils.js
index 0cd14fae56d5d566a96a14b3f6e114bde877a7d4..89e348f1dd990215dadbab3d5ed63f269ef8520b 100644 (file)
--- a/client_backbone/utils.js
+++ b/client_backbone/utils.js
@@ -105,6 +105,19 @@ function secondsToTime(secs) {
 
 
 
+function getQueryVariable(variable) {
+    var query = window.location.search.substring(1);
+    var vars = query.split('&');
+    for (var i = 0; i < vars.length; i++) {
+        var pair = vars[i].split('=');
+        if (decodeURIComponent(pair[0]) == variable) {
+            return decodeURIComponent(pair[1]);
+        }
+    }
+}
+
+
+
 
 /**
 *   Formats a message. Adds bold, underline and colouring

diff --git a/client_backbone/view.js b/client_backbone/view.js
index 65158fe449e9848e2aecfc73cb73caf840f04452..97e49819e298cdfd481ab0505b56bc278c395108 100644 (file)
--- a/client_backbone/view.js
+++ b/client_backbone/view.js
@@ -62,6 +62,59 @@ kiwi.view.UserBox = Backbone.View.extend({
 });\r
 \r
 \r
+kiwi.view.ServerSelect = Backbone.View.extend({\r
+    that: null,\r
+\r
+    events: {\r
+        'submit form': 'submitLogin',\r
+        'click .show_more': 'showMore'\r
+    },\r
+\r
+    initialize: function () {\r
+        that = this;\r
+\r
+        this.$el = $($('#tmpl_server_select').html());\r
+    },\r
+\r
+    submitLogin: function (event) {\r
+        var values = {\r
+            nick: $('.nick', this.$el).val(),\r
+            server: $('.server', this.$el).val(),\r
+            channel: $('.channel', this.$el).val()\r
+        };\r
+\r
+        that.trigger('server_connect', values);\r
+        return false;\r
+    },\r
+\r
+    showMore: function (event) {\r
+        $('.more', this.$el).slideDown('fast');\r
+    },\r
+\r
+    populateFields: function (defaults) {\r
+        var nick, server, channel;\r
+\r
+        defaults = defaults || {};\r
+\r
+        nick = defaults.nick || '';\r
+        server = defaults.server || '';\r
+        channel = defaults.channel || '';\r
+\r
+        $('.nick', this.$el).val(nick);\r
+        $('.server', this.$el).val(server);\r
+        $('.channel', this.$el).val(channel);\r
+    },\r
+\r
+    hide: function () {\r
+        this.$el.slideUp();\r
+    },\r
+\r
+    show: function () {\r
+        this.$el.slideDown();\r
+    }\r
+});\r
+\r
+\r
 kiwi.view.Panel = Backbone.View.extend({\r
     tagName: "div",\r
     className: "messages",\r
@@ -270,10 +323,11 @@ kiwi.view.ControlBox = Backbone.View.extend({
     },\r
 \r
     initialize: function () {\r
+        var cb = this; // TODO: Why is `that` not recognised in the below closure?\r
         that = this;\r
 \r
         kiwi.gateway.bind('change:nick', function () {\r
-            $('.nick', that.$el).text(this.get('nick'));\r
+            $('.nick', cb.$el).text(this.get('nick'));\r
         });\r
     },\r
 \r
@@ -377,5 +431,31 @@ kiwi.view.Application = Backbone.View.extend({
 \r
         el_panels.css(css_heights);\r
         el_memberlists.css(css_heights);\r
+    },\r
+\r
+\r
+    barsHide: function (instant) {\r
+        var that = this;\r
+\r
+        if (!instant) {\r
+            $('#toolbar').slideUp();\r
+            $('#controlbox').slideUp(function () { that.doLayout(); });\r
+        } else {\r
+            $('#toolbar').hide();\r
+            $('#controlbox').hide();\r
+        }\r
+    },\r
+\r
+    barsShow: function (instant) {\r
+        var that = this;\r
+\r
+        if (!instant) {\r
+            $('#toolbar').slideDown();\r
+            $('#controlbox').slideDown(function () { that.doLayout(); });\r
+        } else {\r
+            $('#toolbar').hide();\r
+            $('#controlbox').hide();\r
+            this.doLayout();\r
+        }\r
     }\r
 });
\ No newline at end of file