From 2af700880f18c6a248d1a1e15d38eeb1b1e3d4fa Mon Sep 17 00:00:00 2001 From: Darren Date: Sun, 26 Aug 2012 04:16:39 +0100 Subject: [PATCH] Server select implemented --- client_backbone/index.html | 23 +++++++- client_backbone/model.js | 7 ++- client_backbone/model_application.js | 28 ++++++---- client_backbone/style.css | 14 ++++- client_backbone/utils.js | 13 +++++ client_backbone/view.js | 82 +++++++++++++++++++++++++++- 6 files changed, 152 insertions(+), 15 deletions(-) diff --git a/client_backbone/index.html b/client_backbone/index.html index ea3a52a..7fa49ff 100644 --- a/client_backbone/index.html +++ b/client_backbone/index.html @@ -38,6 +38,27 @@ + + @@ -51,7 +72,7 @@ diff --git a/client_backbone/model.js b/client_backbone/model.js index 55f23ac..c1ef197 100644 --- a/client_backbone/model.js +++ b/client_backbone/model.js @@ -273,6 +273,8 @@ kiwi.model.Panel = Backbone.Model.extend({ }); kiwi.model.Server = kiwi.model.Panel.extend({ + server_login: null, + initialize: function (attributes) { var name = "Server"; this.view = new kiwi.view.Panel({"model": this, "name": name}); @@ -281,7 +283,10 @@ kiwi.model.Server = kiwi.model.Panel.extend({ "name": name }, {"silent": true}); - this.addMsg(' ', '--> Kiwi IRC: Such an awesome IRC client', '', {style: 'color:#009900;'}); + //this.addMsg(' ', '--> Kiwi IRC: Such an awesome IRC client', '', {style: 'color:#009900;'}); + + this.server_login = new kiwi.view.ServerSelect(); + this.view.$el.append(this.server_login.$el); } }); diff --git a/client_backbone/model_application.js b/client_backbone/model_application.js index a6beac0..32e70dd 100644 --- 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(); this.bindGatewayCommands(kiwi.gateway); - //this.initializeLogin(); this.initializeClient(); + this.view.barsHide(true); - kiwi.gateway.set('nick', 'kiwi_' + Math.ceil(Math.random() * 10000).toString()); - kiwi.gateway.connect('ate.anonnet.org', 6667, false, false, function () { - console.log('gateway connected'); - }); - + this.panels.server.server_login.on('server_connect', function (event) { + var form = this; - }; + kiwi.gateway.set('nick', event.nick); + kiwi.gateway.connect(event.server, 6667, false, false, function () { + console.log('gateway connected'); + that.view.barsShow(); + form.hide(); + }); + }); - this.initializeLogin = function () { - // TODO: this - // Show the server selection/login screen. - // Once connected and logged in, then open the client screen (initializeClient) }; @@ -46,6 +45,13 @@ kiwi.model.Application = Backbone.Model.extend(new (function () { // Rejigg the UI sizes this.view.doLayout(); + + // Populate the server select box with defaults + this.panels.server.server_login.populateFields({ + 'nick': getQueryVariable('nick') || 'kiwi_' + Math.ceil(Math.random() * 10000).toString(), + 'server': getQueryVariable('server') || 'irc.anonnet.org', + 'channel': window.location.hash || '#test' + }); }; diff --git a/client_backbone/style.css b/client_backbone/style.css index 0abf539..05c28db 100644 --- 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 0cd14fa..89e348f 100644 --- 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 65158fe..97e4981 100644 --- a/client_backbone/view.js +++ b/client_backbone/view.js @@ -62,6 +62,59 @@ kiwi.view.UserBox = Backbone.View.extend({ }); +kiwi.view.ServerSelect = Backbone.View.extend({ + that: null, + + events: { + 'submit form': 'submitLogin', + 'click .show_more': 'showMore' + }, + + initialize: function () { + that = this; + + this.$el = $($('#tmpl_server_select').html()); + }, + + submitLogin: function (event) { + var values = { + nick: $('.nick', this.$el).val(), + server: $('.server', this.$el).val(), + channel: $('.channel', this.$el).val() + }; + + that.trigger('server_connect', values); + return false; + }, + + showMore: function (event) { + $('.more', this.$el).slideDown('fast'); + }, + + populateFields: function (defaults) { + var nick, server, channel; + + defaults = defaults || {}; + + nick = defaults.nick || ''; + server = defaults.server || ''; + channel = defaults.channel || ''; + + $('.nick', this.$el).val(nick); + $('.server', this.$el).val(server); + $('.channel', this.$el).val(channel); + }, + + hide: function () { + this.$el.slideUp(); + }, + + show: function () { + this.$el.slideDown(); + } +}); + + kiwi.view.Panel = Backbone.View.extend({ tagName: "div", className: "messages", @@ -270,10 +323,11 @@ kiwi.view.ControlBox = Backbone.View.extend({ }, initialize: function () { + var cb = this; // TODO: Why is `that` not recognised in the below closure? that = this; kiwi.gateway.bind('change:nick', function () { - $('.nick', that.$el).text(this.get('nick')); + $('.nick', cb.$el).text(this.get('nick')); }); }, @@ -377,5 +431,31 @@ kiwi.view.Application = Backbone.View.extend({ el_panels.css(css_heights); el_memberlists.css(css_heights); + }, + + + barsHide: function (instant) { + var that = this; + + if (!instant) { + $('#toolbar').slideUp(); + $('#controlbox').slideUp(function () { that.doLayout(); }); + } else { + $('#toolbar').hide(); + $('#controlbox').hide(); + } + }, + + barsShow: function (instant) { + var that = this; + + if (!instant) { + $('#toolbar').slideDown(); + $('#controlbox').slideDown(function () { that.doLayout(); }); + } else { + $('#toolbar').hide(); + $('#controlbox').hide(); + this.doLayout(); + } } }); \ No newline at end of file -- 2.25.1