client/assets/src/views/serverselect.js

   1 _kiwi.view.ServerSelect = function () {
   2     // Are currently showing all the controlls or just a nick_change box?
   3     var state = 'all';
   4
   5     var model = Backbone.View.extend({
   6         events: {
   7             'submit form': 'submitForm',
   8             'click .show_more': 'showMore',
   9             'change .have_pass input': 'showPass',
  10             'change .have_key input': 'showKey',
  11             'click .icon-key': 'channelKeyIconClick'
  12         },
  13
  14         initialize: function () {
  15             var that = this;
  16
  17             this.$el = $($('#tmpl_server_select').html().trim());
  18
  19             // Remove the 'more' link if the server has disabled server changing
  20             if (_kiwi.app.server_settings && _kiwi.app.server_settings.connection) {
  21                 if (!_kiwi.app.server_settings.connection.allow_change) {
  22                     this.$el.find('.show_more').remove();
  23                     this.$el.addClass('single_server');
  24                 }
  25             }
  26
  27             _kiwi.gateway.bind('onconnect', this.networkConnected, this);
  28             _kiwi.gateway.bind('connecting', this.networkConnecting, this);
  29             _kiwi.gateway.bind('onirc_error', this.onIrcError, this);
  30         },
  31
  32         dispose: function() {
  33             _kiwi.gateway.off('onconnect', this.networkConnected, this);
  34             _kiwi.gateway.off('connecting', this.networkConnecting, this);
  35             _kiwi.gateway.off('onirc_error', this.onIrcError, this);
  36
  37             this.$el.remove();
  38         },
  39
  40         submitForm: function (event) {
  41             event.preventDefault();
  42
  43             // Make sure a nick is chosen
  44             if (!$('input.nick', this.$el).val().trim()) {
  45                 this.setStatus('Select a nickname first!');
  46                 $('input.nick', this.$el).select();
  47                 return;
  48             }
  49
  50             if (state === 'nick_change') {
  51                 this.submitNickChange(event);
  52             } else {
  53                 this.submitLogin(event);
  54             }
  55
  56             $('button', this.$el).attr('disabled', 1);
  57             return;
  58         },
  59
  60         submitLogin: function (event) {
  61             // If submitting is disabled, don't do anything
  62             if ($('button', this.$el).attr('disabled')) return;
  63
  64             var values = {
  65                 nick: $('input.nick', this.$el).val(),
  66                 server: $('input.server', this.$el).val(),
  67                 port: $('input.port', this.$el).val(),
  68                 ssl: $('input.ssl', this.$el).prop('checked'),
  69                 password: $('input.password', this.$el).val(),
  70                 channel: $('input.channel', this.$el).val(),
  71                 channel_key: $('input.channel_key', this.$el).val()
  72             };
  73
  74             this.trigger('server_connect', values);
  75         },
  76
  77         submitNickChange: function (event) {
  78             _kiwi.gateway.changeNick(null, $('input.nick', this.$el).val());
  79             this.networkConnecting();
  80         },
  81
  82         showPass: function (event) {
  83             if (this.$el.find('tr.have_pass input').is(':checked')) {
  84                 this.$el.find('tr.pass').show().find('input').focus();
  85             } else {
  86                 this.$el.find('tr.pass').hide().find('input').val('');
  87             }
  88         },
  89
  90         channelKeyIconClick: function (event) {
  91             this.$el.find('tr.have_key input').click();
  92         },
  93
  94         showKey: function (event) {
  95             if (this.$el.find('tr.have_key input').is(':checked')) {
  96                 this.$el.find('tr.key').show().find('input').focus();
  97             } else {
  98                 this.$el.find('tr.key').hide().find('input').val('');
  99             }
 100         },
 101
 102         showMore: function (event) {
 103             $('.more', this.$el).slideDown('fast');
 104             $('input.server', this.$el).select();
 105         },
 106
 107         populateFields: function (defaults) {
 108             var nick, server, port, channel, channel_key, ssl, password;
 109
 110             defaults = defaults || {};
 111
 112             nick = defaults.nick || '';
 113             server = defaults.server || '';
 114             port = defaults.port || 6667;
 115             ssl = defaults.ssl || 0;
 116             password = defaults.password || '';
 117             channel = defaults.channel || '';
 118             channel_key = defaults.channel_key || '';
 119
 120             $('input.nick', this.$el).val(nick);
 121             $('input.server', this.$el).val(server);
 122             $('input.port', this.$el).val(port);
 123             $('input.ssl', this.$el).prop('checked', ssl);
 124             $('input#server_select_show_pass', this.$el).prop('checked', !(!password));
 125             $('input.password', this.$el).val(password);
 126             if (!(!password)) {
 127                 $('tr.pass', this.$el).show();
 128             }
 129             $('input.channel', this.$el).val(channel);
 130             $('input#server_select_show_channel_key', this.$el).prop('checked', !(!channel_key));
 131             $('input.channel_key', this.$el).val(channel_key);
 132             if (!(!channel_key)) {
 133                 $('tr.key', this.$el).show();
 134             }
 135         },
 136
 137         hide: function () {
 138             this.$el.slideUp();
 139         },
 140
 141         show: function (new_state) {
 142             new_state = new_state || 'all';
 143
 144             this.$el.show();
 145
 146             if (new_state === 'all') {
 147                 $('.show_more', this.$el).show();
 148
 149             } else if (new_state === 'more') {
 150                 $('.more', this.$el).slideDown('fast');
 151
 152             } else if (new_state === 'nick_change') {
 153                 $('.more', this.$el).hide();
 154                 $('.show_more', this.$el).hide();
 155                 $('input.nick', this.$el).select();
 156             }
 157
 158             state = new_state;
 159         },
 160
 161         infoBoxShow: function() {
 162             var $side_panel = this.$el.find('.side_panel');
 163
 164             // Some theme may hide the info panel so check before we
 165             // resize ourselves
 166             if (!$side_panel.is(':visible'))
 167                 return;
 168
 169             this.$el.animate({
 170                 width: parseInt($side_panel.css('left'), 10) + $side_panel.find('.content:first').outerWidth()
 171             });
 172         },
 173
 174         infoBoxHide: function() {
 175             var $side_panel = this.$el.find('.side_panel');
 176             this.$el.animate({
 177                 width: parseInt($side_panel.css('left'), 10)
 178             });
 179         },
 180
 181         infoBoxSet: function($info_view) {
 182             this.$el.find('.side_panel .content')
 183                 .empty()
 184                 .append($info_view);
 185         },
 186
 187         setStatus: function (text, class_name) {
 188             $('.status', this.$el)
 189                 .text(text)
 190                 .attr('class', 'status')
 191                 .addClass(class_name||'')
 192                 .show();
 193         },
 194         clearStatus: function () {
 195             $('.status', this.$el).hide();
 196         },
 197
 198         networkConnected: function (event) {
 199             this.setStatus('Connected :)', 'ok');
 200             $('form', this.$el).hide();
 201         },
 202
 203         networkConnecting: function (event) {
 204             this.setStatus('Connecting..', 'ok');
 205         },
 206
 207         onIrcError: function (data) {
 208             $('button', this.$el).attr('disabled', null);
 209
 210             switch(data.error) {
 211             case 'nickname_in_use':
 212                 this.setStatus('Nickname already taken');
 213                 this.show('nick_change');
 214                 this.$el.find('.nick').select();
 215                 break;
 216             case 'erroneus_nickname':
 217                 this.setStatus('Erroneus nickname');
 218                 this.show('nick_change');
 219                 this.$el.find('.nick').select();
 220                 break;
 221             case 'password_mismatch':
 222                 this.setStatus('Incorrect Password');
 223                 this.show('nick_change');
 224                 this.$el.find('.password').select();
 225                 break;
 226             }
 227         },
 228
 229         showError: function (error_reason) {
 230             var err_text = 'Error Connecting';
 231
 232             if (error_reason) {
 233                 switch (error_reason) {
 234                 case 'ENOTFOUND':
 235                     err_text = 'Server not found';
 236                     break;
 237
 238                 case 'ECONNREFUSED':
 239                     err_text += ' (Connection refused)';
 240                     break;
 241
 242                 default:
 243                     err_text += ' (' + error_reason + ')';
 244                 }
 245             }
 246
 247             this.setStatus(err_text, 'error');
 248             $('button', this.$el).attr('disabled', null);
 249             this.show();
 250         }
 251     });
 252
 253
 254     return new model(arguments);
 255 };