client/js/front.ui.js

   1 /*jslint browser: true, devel: true, sloppy: true, plusplus: true, nomen: true, forin: true, continue: true */
   2 /*globals kiwi, $, _, Tabview, Userlist, User, Box */
   3 kiwi.front.ui = {
   4
   5     doLayoutSize: function () {
   6         var kiwi, toolbars, ul, n_top, n_bottom, nl;
   7         kiwi = $('#kiwi');
   8
   9         if (kiwi.width() < 330 && !kiwi.hasClass('small_kiwi')) {
  10             console.log("switching to small kiwi");
  11             kiwi.removeClass('large_kiwi');
  12             kiwi.addClass('small_kiwi');
  13         } else if (kiwi.width() >= 330 && !kiwi.hasClass('large_kiwi')) {
  14             kiwi.removeClass('small_kiwi');
  15             kiwi.addClass('large_kiwi');
  16         }
  17
  18         toolbars = $('#kiwi .toolbars');
  19         ul = $('#kiwi .userlist');
  20
  21         n_top = parseInt(toolbars.offset().top, 10) + parseInt(toolbars.outerHeight(true), 10);
  22         n_bottom = $(document).height() - parseInt($('#kiwi .control').offset().top, 10);
  23
  24         $('#kiwi .windows').css({top: n_top + 'px', bottom: n_bottom + 'px'});
  25         ul.css({top: n_top + 'px', bottom: n_bottom + 'px'});
  26
  27         nl = $('#nicklist_resize');
  28         nl.css({top: n_top + 'px', bottom: n_bottom + 'px', left: $(document).width() - ul.outerWidth(true)});
  29     },
  30
  31
  32     doLayout: function () {
  33         $('#kiwi .msginput .nick a').text(kiwi.gateway.nick);
  34         $('#kiwi_msginput').val(' ');
  35         $('#kiwi_msginput').focus();
  36     },
  37
  38
  39     registerKeys: function () {
  40         var tabcomplete = {active: false, data: [], prefix: ''};
  41         $('#kiwi_msginput').bind('keydown', function (e) {
  42             var windows, meta, num, msg, data, self;
  43             windows = $('#windows');
  44             //var meta = e.altKey;
  45             meta = e.ctrlKey;
  46
  47             if (e.which !== 9) {
  48                 tabcomplete.active = false;
  49                 tabcomplete.data = [];
  50                 tabcomplete.prefix = '';
  51             }
  52
  53             switch (true) {
  54             case (e.which >= 48) && (e.which <= 57):
  55                 if (meta) {
  56                     num = e.which - 48;
  57                     if (num === 0) {
  58                         num = 10;
  59                     }
  60                     num = num - 1;
  61                     kiwi.front.ui.windowsShow(num);
  62                     return false;
  63                 }
  64                 break;
  65             case e.which === 27:            // escape
  66                 return false;
  67             case e.which === 13:            // return
  68                 msg = $('#kiwi_msginput').val();
  69                 msg = msg.trim();
  70
  71                 kiwi.front.buffer.push(msg);
  72                 kiwi.front.buffer_pos = kiwi.front.buffer.length;
  73
  74                 kiwi.front.run(msg);
  75                 $('#kiwi_msginput').val('');
  76
  77                 break;
  78             case e.which === 33:             // page up
  79                 console.log("page up");
  80                 windows[0].scrollTop = windows[0].scrollTop - windows.height();
  81                 return false;
  82             case e.which === 34:             // page down
  83                 windows[0].scrollTop = windows[0].scrollTop + windows.height();
  84                 return false;
  85             case e.which === 37:            // left
  86                 if (meta) {
  87                     kiwi.front.ui.windowsPrevious();
  88                     return false;
  89                 }
  90                 break;
  91             case e.which === 38:            // up
  92                 if (kiwi.front.buffer_pos > 0) {
  93                     kiwi.front.buffer_pos--;
  94                     $('#kiwi_msginput').val(kiwi.front.buffer[kiwi.front.buffer_pos]);
  95                 }
  96                 break;
  97             case e.which === 39:            // right
  98                 if (meta) {
  99                     kiwi.front.ui.windowsNext();
 100                     return false;
 101                 }
 102                 break;
 103             case e.which === 40:            // down
 104                 if (kiwi.front.buffer_pos < kiwi.front.buffer.length) {
 105                     kiwi.front.buffer_pos++;
 106                     $('#kiwi_msginput').val(kiwi.front.buffer[kiwi.front.buffer_pos]);
 107                 }
 108                 break;
 109
 110             case e.which === 9:                // tab
 111                 tabcomplete.active = true;
 112                 if (_.isEqual(tabcomplete.data, [])) {
 113                     // Get possible autocompletions
 114                     data = [];
 115                     $.each(Tabview.getCurrentTab().userlist.listUsers(false), function () {
 116                         var nick;
 117                         nick = User.stripPrefix(this.nick);
 118                         data.push(nick);
 119                     });
 120                     data = _.sortBy(data, function (nick) {
 121                         return nick;
 122                     });
 123                     tabcomplete.data = data;
 124                 }
 125
 126                 if (this.value[this.selectionStart - 1] === ' ') {
 127                     return false;
 128                 }
 129                 self = this;
 130                 (function () {
 131                     var tokens = self.value.substring(0, self.selectionStart).split(" "),
 132                         val,
 133                         p1,
 134                         newnick,
 135                         range,
 136                         nick = tokens[tokens.length - 1];
 137                     if (tabcomplete.prefix === '') {
 138                         tabcomplete.prefix = nick;
 139                     }
 140
 141                     tabcomplete.data = _.select(tabcomplete.data, function (n) {
 142                         return (n.toLowerCase().indexOf(tabcomplete.prefix.toLowerCase()) === 0);
 143                     });
 144
 145                     if (tabcomplete.data.length > 0) {
 146                         p1 = self.selectionStart - (nick.length);
 147                         val = self.value.substr(0, p1);
 148                         newnick = tabcomplete.data.shift();
 149                         tabcomplete.data.push(newnick);
 150                         val += newnick;
 151                         val += self.value.substr(self.selectionStart);
 152                         self.value = val;
 153                         if (self.setSelectionRange) {
 154                             self.setSelectionRange(p1 + newnick.length, p1 + newnick.length);
 155                         } else if (self.createTextRange) { // not sure if this bit is actually needed....
 156                             range = self.createTextRange();
 157                             range.collapse(true);
 158                             range.moveEnd('character', p1 + newnick.length);
 159                             range.moveStart('character', p1 + newnick.length);
 160                             range.select();
 161                         }
 162                     }
 163                 }());
 164                 return false;
 165             }
 166         });
 167
 168
 169         $('#kiwi .control .msginput .nick').click(function () {
 170             kiwi.front.ui.showChangeNick();
 171         });
 172
 173
 174
 175
 176
 177         $('#kiwi .plugins .load_plugin_file').click(function () {
 178             if (typeof kiwi.front.boxes.plugins !== "undefined") {
 179                 return;
 180             }
 181
 182             kiwi.front.boxes.plugins = new Box("plugin_file");
 183             $('#tmpl_plugins').tmpl({}).appendTo(kiwi.front.boxes.plugins.content);
 184             kiwi.front.boxes.plugins.box.css('top', -(kiwi.front.boxes.plugins.height + 40));
 185
 186             // Populate the plugin list..
 187             function enumPlugins() {
 188                 var lst, j, txt;
 189                 lst = $('#plugin_list');
 190                 lst.find('option').remove();
 191                 for (j in kiwi.plugs.loaded) {
 192                     txt = kiwi.plugs.loaded[j].name;
 193                     lst.append('<option value="' + txt + '">' + txt + '</option>');
 194                 }
 195             }
 196             enumPlugins();
 197
 198             // Event bindings
 199             $('#kiwi .plugin_file').submit(function () {
 200                 $('<div></div>').load($('.txtpluginfile').val(), function (e) {
 201                     enumPlugins();
 202                 });
 203                 return false;
 204             });
 205             $('#kiwi .cancelpluginfile').click(function () {
 206                 kiwi.front.boxes.plugins.destroy();
 207             });
 208
 209             $('#kiwi #plugins_list_unload').click(function () {
 210                 var selected_plugin;
 211                 selected_plugin = $('#plugin_list').val();
 212                 kiwi.plugs.unloadPlugin(selected_plugin);
 213                 enumPlugins();
 214             });
 215
 216             $('#kiwi .txtpluginfile').focus();
 217
 218         });
 219
 220         $('#kiwi .plugins .reload_css').click(function () {
 221             var links = document.getElementsByTagName("link"),
 222                 i;
 223             for (i = 0; i < links.length; i++) {
 224                 if (links[i].rel === "stylesheet") {
 225                     if (links[i].href.indexOf("?") === -1) {
 226                         links[i].href += "?";
 227                     }
 228                     links[i].href += "x";
 229                 }
 230             }
 231         });
 232
 233
 234         $('#kiwi .about .about_close').click(function () {
 235             $('#kiwi .about').css('display', 'none');
 236         });
 237
 238
 239         $('#kiwi .poweredby').click(function () {
 240             $('#kiwi .about').css('display', 'block');
 241         });
 242
 243     },
 244
 245
 246     showChangeNick: function (caption) {
 247         caption = (typeof caption !== 'undefined') ? caption : '';
 248
 249         $('#kiwi').append($('#tmpl_change_nick').tmpl({}));
 250
 251         $('#kiwi .newnick .caption').text(caption);
 252
 253         $('#kiwi .form_newnick').submit(function () {
 254             kiwi.front.run('/NICK ' + $('#kiwi .txtnewnick').val());
 255             $('#kiwi .newnick').remove();
 256             return false;
 257         });
 258
 259         $('#kiwi .txtnewnick').keypress(function (ev) {
 260             if (!this.first_press) {
 261                 this.first_press = true;
 262                 return false;
 263             }
 264         });
 265
 266         $('#kiwi .txtnewnick').keydown(function (ev) {
 267             if (ev.which === 27) {  // ESC
 268                 $('#kiwi_msginput').focus();
 269                 $('#kiwi .newnick').remove();
 270             }
 271         });
 272
 273         $('#kiwi .cancelnewnick').click(function () {
 274             $('#kiwi .newnick').remove();
 275         });
 276
 277         $('#kiwi .txtnewnick').focus();
 278     },
 279
 280
 281
 282     setTopicText: function (new_topic) {
 283         kiwi.front.cache.original_topic = new_topic;
 284         $('#kiwi .cur_topic .topic').text(new_topic);
 285         kiwi.front.ui.doLayoutSize();
 286     },
 287
 288
 289
 290
 291     tabviewsNext: function () {
 292         var wl = $('#kiwi .windowlist ul'),
 293             next_left = parseInt(wl.css('text-indent').replace('px', ''), 10) + 170;
 294         wl.css('text-indent', next_left);
 295     },
 296
 297     tabviewsPrevious: function () {
 298         var wl = $('#kiwi .windowlist ul'),
 299             next_left = parseInt(wl.css('text-indent').replace('px', ''), 10) - 170;
 300         wl.css('text-indent', next_left);
 301     },
 302
 303     windowsNext: function () {
 304         var tab, tabs, curTab, next;
 305         next = false;
 306         tabs = Tabview.getAllTabs();
 307         curTab = Tabview.getCurrentTab();
 308         for (tab in tabs) {
 309             if (!next) {
 310                 if (tabs[tab] === curTab) {
 311                     next = true;
 312                     continue;
 313                 }
 314             } else {
 315                 tabs[tab].show();
 316                 return;
 317             }
 318         }
 319     },
 320
 321     windowsPrevious: function () {
 322         var tab, tabs, curTab, prev_tab, next;
 323         next = false;
 324         tabs = Tabview.getAllTabs();
 325         curTab = Tabview.getCurrentTab();
 326         for (tab in tabs) {
 327             if (tabs[tab] === curTab) {
 328                 if (prev_tab) {
 329                     prev_tab.show();
 330                 }
 331                 return;
 332             }
 333             prev_tab = tabs[tab];
 334         }
 335     },
 336
 337     windowsShow: function (num) {
 338         num = parseInt(num, 10);
 339         console.log('Showing window ' + num.toString());
 340         var i = 0, tab, tabs;
 341         tabs = Tabview.getAllTabs();
 342         for (tab in tabs) {
 343             if (i === num) {
 344                 tabs[tab].show();
 345                 return;
 346             }
 347             i++;
 348         }
 349     },
 350
 351
 352
 353     barsShow: function () {
 354         $('#kiwi .control').slideDown();
 355         $('#kiwi .toolbars').slideDown(400, function () {
 356             kiwi.front.ui.doLayoutSize();
 357         });
 358     },
 359
 360     barsHide: function () {
 361         $('#kiwi .control').slideUp();
 362         $('#kiwi .toolbars').slideUp(400, function () {
 363             kiwi.front.ui.doLayoutSize();
 364         });
 365     },
 366
 367
 368
 369
 370
 371
 372
 373
 374     tutorial: function () {
 375         var b = $('<div id="tutorial_box" style="border:3px solid blue;"></div>'),
 376             bounds,
 377             s,
 378             current_s,
 379             next_s;
 380         b.css({display: 'block', position: 'absolute', height:'100%', width:'100%'});
 381         $('#kiwi').append(b);
 382
 383         bounds = function (el) {
 384             var b = 3, ret = {};
 385             ret.top = el.offset().top;
 386             ret.left = el.offset().left;
 387             ret.width = parseInt(el.outerWidth(true), 10) - (b*2);
 388             ret.height = parseInt(el.outerHeight(true), 10) - (b*2);
 389             return ret;
 390         };
 391
 392         s = [
 393             function(){
 394                 b.animate(bounds($('#kiwi .msginput')), 2000, '', next_s);
 395             },
 396
 397             function(){
 398                 b.animate(bounds($('#kiwi .userlist')), 2000, '', next_s);
 399             },
 400
 401             function(){
 402                 b.animate(bounds($('#panel1')), 2000, '', next_s);
 403             },
 404
 405             function(){
 406                 b.animate(bounds($('#kiwi .cur_topic')), 2000, '', next_s);
 407             },
 408
 409             function(){
 410                 b.animate(bounds($('#kiwi .windowlist')), 2000, '', next_s);
 411             }
 412         ];
 413
 414
 415         current_s = -1;
 416         next_s = function () {
 417             current_s++;
 418             if (typeof s[current_s] === 'function') {
 419                 console.log('Animating ' + current_s.toString());
 420                 s[current_s]();
 421             }
 422         };
 423         next_s();
 424     }
 425
 426 };