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());
  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             this.$el.animate({
 164                 width: parseInt($side_panel.css('left'), 10) + $side_panel.find('.content:first').outerWidth()
 165             });
 166         },
 167
 168         infoBoxHide: function() {
 169             var $side_panel = this.$el.find('.side_panel');
 170             this.$el.animate({
 171                 width: parseInt($side_panel.css('left'), 10)
 172             });
 173         },
 174
 175         infoBoxSet: function($info_view) {
 176             this.$el.find('.side_panel .content')
 177                 .empty()
 178                 .append($info_view);
 179         },
 180
 181         setStatus: function (text, class_name) {
 182             $('.status', this.$el)
 183                 .text(text)
 184                 .attr('class', 'status')
 185                 .addClass(class_name||'')
 186                 .show();
 187         },
 188         clearStatus: function () {
 189             $('.status', this.$el).hide();
 190         },
 191
 192         networkConnected: function (event) {
 193             this.setStatus('Connected :)', 'ok');
 194             $('form', this.$el).hide();
 195         },
 196
 197         networkConnecting: function (event) {
 198             this.setStatus('Connecting..', 'ok');
 199         },
 200
 201         onIrcError: function (data) {
 202             $('button', this.$el).attr('disabled', null);
 203
 204             if (data.error == 'nickname_in_use') {
 205                 this.setStatus('Nickname already taken');
 206                 this.show('nick_change');
 207             }
 208
 209             if (data.error == 'password_mismatch') {
 210                 this.setStatus('Incorrect Password');
 211                 this.show('nick_change');
 212                 that.$el.find('.password').select();
 213             }
 214         },
 215
 216         showError: function (error_reason) {
 217             var err_text = 'Error Connecting';
 218
 219             if (error_reason) {
 220                 switch (error_reason) {
 221                 case 'ENOTFOUND':
 222                     err_text = 'Server not found';
 223                     break;
 224
 225                 case 'ECONNREFUSED':
 226                     err_text += ' (Connection refused)';
 227                     break;
 228
 229                 default:
 230                     err_text += ' (' + error_reason + ')';
 231                 }
 232             }
 233
 234             this.setStatus(err_text, 'error');
 235             $('button', this.$el).attr('disabled', null);
 236             this.show();
 237         }
 238     });
 239
 240
 241     return new model(arguments);
 242 };