js/ui/qui.js

   1 qwebirc.ui.QUI = new Class({
   2   Extends: qwebirc.ui.NewLoginUI,
   3   initialize: function(parentElement, theme) {
   4     this.parent(parentElement, qwebirc.ui.QUI.Window, "qui");
   5     this.theme = theme;
   6     this.parentElement = parentElement;
   7   },
   8   postInitialize: function() {
   9     this.qjsui = new qwebirc.ui.QUI.JSUI("qwebirc-qui", this.parentElement);
  10
  11     this.qjsui.top.addClass("tabbar");
  12
  13     this.qjsui.bottom.addClass("input");
  14     this.qjsui.right.addClass("nicklist");
  15     this.qjsui.topic.addClass("topic");
  16     this.qjsui.middle.addClass("lines");
  17
  18     this.tabs = this.qjsui.top;
  19     this.origtopic = this.topic = this.qjsui.topic;
  20     this.origlines = this.lines = this.qjsui.middle;
  21     this.orignicklist = this.nicklist = this.qjsui.right;
  22
  23     this.input = this.qjsui.bottom;
  24     this.reflow = this.qjsui.reflow.bind(this.qjsui);
  25
  26     this.createInput();
  27     this.reflow();
  28   },
  29   createInput: function() {
  30     var form = new Element("form");
  31     this.input.appendChild(form);
  32     form.addClass("input");
  33
  34     var inputbox = new Element("input");
  35     form.appendChild(inputbox);
  36     this.inputbox = inputbox;
  37
  38     form.addEvent("submit", function(e) {
  39       new Event(e).stop();
  40
  41       if(inputbox.value == "")
  42         return;
  43
  44       this.getActiveWindow().historyExec(inputbox.value);
  45       inputbox.value = "";
  46     }.bind(this));
  47
  48     inputbox.addEvent("keydown", function(e) {
  49       var resultfn;
  50       var cvalue = inputbox.value;
  51
  52       if(e.key == "up") {
  53         resultfn = this.commandhistory.upLine;
  54       } else if(e.key == "down") {
  55         resultfn = this.commandhistory.downLine;
  56       } else {
  57         return;
  58       }
  59
  60       if((cvalue != "") && (this.lastcvalue != cvalue))
  61         this.commandhistory.addLine(cvalue, true);
  62
  63       var result = resultfn.bind(this.commandhistory)();
  64
  65       new Event(e).stop();
  66       if(!result)
  67         result = "";
  68       this.lastcvalue = result;
  69
  70       inputbox.value = result;
  71       qwebirc.util.setAtEnd(inputbox);
  72     }.bind(this));
  73   },
  74   setLines: function(lines) {
  75     this.lines.parentNode.replaceChild(lines, this.lines);
  76     this.qjsui.middle = this.lines = lines;
  77   },
  78   setChannelItems: function(nicklist, topic) {
  79     if(!$defined(nicklist)) {
  80       nicklist = this.orignicklist;
  81       topic = this.origtopic;
  82     }
  83     this.nicklist.parentNode.replaceChild(nicklist, this.nicklist);
  84     this.qjsui.right = this.nicklist = nicklist;
  85
  86     this.topic.parentNode.replaceChild(topic, this.topic);
  87     this.qjsui.topic = this.topic = topic;
  88   }
  89 });
  90
  91 qwebirc.ui.QUI.JSUI = new Class({
  92   initialize: function(class_, parent, sizer) {
  93     this.parent = parent;
  94     this.sizer = $defined(sizer)?sizer:parent;
  95
  96     this.class_ = class_;
  97     this.create();
  98
  99     this.reflowevent = null;
 100
 101     window.addEvent("resize", function() {
 102       this.reflow(100);
 103     }.bind(this));
 104   },
 105   applyClasses: function(pos, l) {
 106     l.addClass("dynamicpanel");
 107     l.addClass(this.class_);
 108
 109     if(pos == "middle") {
 110       l.addClass("leftboundpanel");
 111     } else if(pos == "top") {
 112       l.addClass("topboundpanel");
 113       l.addClass("widepanel");
 114     } else if(pos == "topic") {
 115       l.addClass("widepanel");
 116     } else if(pos == "right") {
 117       l.addClass("rightboundpanel");
 118     } else if(pos == "bottom") {
 119       l.addClass("bottomboundpanel");
 120       l.addClass("widepanel");
 121     }
 122   },
 123   create: function() {
 124     var XE = function(pos) {
 125       var element = new Element("div");
 126       this.applyClasses(pos, element);
 127
 128       this.parent.appendChild(element);
 129       return element;
 130     }.bind(this);
 131
 132     this.top = XE("top");
 133     this.topic = XE("topic");
 134     this.middle = XE("middle");
 135     this.right = XE("right");
 136     this.bottom = XE("bottom");
 137   },
 138   reflow: function(delay) {
 139     if(!delay)
 140       delay = 1;
 141
 142     if(this.reflowevent)
 143       $clear(this.reflowevent);
 144     this.__reflow();
 145     this.reflowevent = this.__reflow.delay(delay, this);
 146   },
 147   __reflow: function() {
 148     var bottom = this.bottom;
 149     var middle = this.middle;
 150     var right = this.right;
 151     var topic = this.topic;
 152     var top = this.top;
 153
 154     var topicsize = topic.getSize();
 155     var topsize = top.getSize();
 156     var rightsize = right.getSize();
 157     var bottomsize = bottom.getSize();
 158     var docsize = this.sizer.getSize();
 159
 160     var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y);
 161     var mwidth = (docsize.x - rightsize.x);
 162
 163     topic.setStyle("top", topsize.y + "px");
 164
 165     middle.setStyle("top", (topsize.y + topicsize.y) + "px");
 166     if(mheight > 0) {
 167       middle.setStyle("height", mheight + "px");
 168       right.setStyle("height", mheight + "px");
 169     }
 170
 171     if(mwidth > 0)
 172       middle.setStyle("width", mwidth + "px");
 173     right.setStyle("top", (topsize.y + topicsize.y) + "px");
 174     right.setStyle("left", mwidth + "px");
 175
 176     bottom.setStyle("top", (docsize.y - bottomsize.y) + "px");
 177   },
 178   showChannel: function(state) {
 179     var display = "none";
 180     if(state)
 181       display = "block";
 182
 183     this.right.setStyle("display", display);
 184     this.topic.setStyle("display", display);
 185   },
 186   showInput: function(state) {
 187     this.bottom.setStyle("display", state?"block":"none");
 188   }
 189 });
 190
 191 qwebirc.ui.QUI.Window = new Class({
 192   Extends: qwebirc.ui.Window,
 193
 194   initialize: function(parentObject, client, type, name) {
 195     this.parent(parentObject, client, type, name);
 196
 197     this.tab = new Element("a", {"href": "#"});
 198     this.tab.addClass("tab");
 199     this.tab.addEvent("focus", function() { this.blur() }.bind(this.tab));;
 200
 201     parentObject.tabs.appendChild(this.tab);
 202
 203     this.tab.appendText(name);
 204     this.tab.addEvent("click", function(e) {
 205       new Event(e).stop();
 206       parentObject.selectWindow(this);
 207     }.bind(this));
 208
 209     if(type != qwebirc.ui.WINDOW_STATUS && type != qwebirc.ui.WINDOW_CONNECT) {
 210       var tabclose = new Element("span");
 211       tabclose.set("text", "X");
 212       tabclose.addClass("tabclose");
 213       tabclose.addEvent("click", function(e) {
 214         new Event(e).stop();
 215
 216         if(type == qwebirc.ui.WINDOW_CHANNEL)
 217           this.client.exec("/PART " + name);
 218
 219         this.close();
 220       }.bind(this));
 221
 222       this.tab.appendChild(tabclose);
 223     }
 224
 225     this.lines = new Element("div");
 226     this.parentObject.qjsui.applyClasses("middle", this.lines);
 227     this.lines.addClass("lines");
 228
 229     this.lines.addEvent("scroll", function() {
 230       this.scrolleddown = this.scrolledDown();
 231     }.bind(this));
 232
 233     if(type == qwebirc.ui.WINDOW_CHANNEL) {
 234       this.topic = new Element("div");
 235       this.topic.addClass("topic");
 236       this.topic.addClass("tab-invisible");
 237       this.topic.set("html", "&nbsp;");
 238       this.parentObject.qjsui.applyClasses("topic", this.topic);
 239
 240       this.prevNick = null;
 241       this.nicklist = new Element("div");
 242       this.nicklist.addClass("nicklist");
 243       this.nicklist.addClass("tab-invisible");
 244       this.nicklist.addEvent("click", this.removePrevMenu.bind(this));
 245       this.parentObject.qjsui.applyClasses("nicklist", this.nicklist);
 246     }
 247
 248     if(type == qwebirc.ui.WINDOW_CHANNEL) {
 249       this.updateTopic("");
 250     } else {
 251       this.reflow();
 252     }
 253   },
 254   reflow: function() {
 255     this.parentObject.reflow();
 256   },
 257   onResize: function() {
 258     if(this.scrolleddown)
 259       this.scrollToBottom();
 260   },
 261   createMenu: function(nick, parent) {
 262     var e = new Element("div");
 263     parent.appendChild(e);
 264     e.addClass("menu");
 265
 266     qwebirc.ui.MENU_ITEMS.forEach(function(x) {
 267       var e2 = new Element("a");
 268       e.appendChild(e2);
 269
 270       e2.href = "#";
 271       e2.set("text", "- " + x[0]);
 272
 273       e2.addEvent("focus", function() { this.blur() }.bind(e2));
 274       e2.addEvent("click", function(ev) { new Event(ev.stop()); this.menuClick(x[1]); }.bind(this));
 275     }.bind(this));
 276     return e;
 277   },
 278   menuClick: function(fn) {
 279     /*
 280     this.prevNick.removeChild(this.prevNick.menu);
 281     this.prevNick.menu = null;
 282     */
 283     fn.bind(this)(this.prevNick.realNick);
 284     this.removePrevMenu();
 285   },
 286   moveMenuClass: function() {
 287     if(!this.prevNick)
 288       return;
 289     if(this.nicklist.firstChild == this.prevNick) {
 290       this.prevNick.removeClass("selected-middle");
 291     } else {
 292       this.prevNick.addClass("selected-middle");
 293     }
 294   },
 295   removePrevMenu: function() {
 296     if(!this.prevNick)
 297       return;
 298
 299     this.prevNick.removeClass("selected");
 300     this.prevNick.removeClass("selected-middle");
 301     if(this.prevNick.menu)
 302       this.prevNick.removeChild(this.prevNick.menu);
 303     this.prevNick = null;
 304   },
 305   nickListAdd: function(nick, position) {
 306     var e = new Element("a");
 307     qwebirc.ui.insertAt(position, this.nicklist, e);
 308
 309     e.href = "#";
 310     e.appendChild(document.createTextNode(nick));
 311
 312     e.realNick = this.client.stripPrefix(nick);
 313
 314     e.addEvent("click", function(x) {
 315       if(this.prevNick == e) {
 316         this.removePrevMenu();
 317         return;
 318       }
 319
 320       this.removePrevMenu();
 321       this.prevNick = e;
 322       e.addClass("selected");
 323       this.moveMenuClass();
 324       e.menu = this.createMenu(x.realNick, e);
 325       new Event(x).stop();
 326     }.bind(this));
 327     e.addEvent("dblclick", function(x) {
 328       new Event(x).stop();
 329       this.client.exec("/QUERY " + e.realNick);
 330     }.bind(this));
 331
 332     e.addEvent("focus", function() { this.blur() }.bind(e));
 333     this.moveMenuClass();
 334     return e;
 335   },
 336   nickListRemove: function(nick, stored) {
 337     this.nicklist.removeChild(stored);
 338     this.moveMenuClass();
 339   },
 340   updateTopic: function(topic) {
 341     var t = this.topic;
 342
 343     while(t.firstChild)
 344       t.removeChild(t.firstChild);
 345
 346     if(topic) {
 347       this.parent(topic, t);
 348     } else {
 349       var e = new Element("div");
 350       e.set("text", "(no topic set)");
 351       e.addClass("emptytopic");
 352       t.appendChild(e);
 353     }
 354     this.reflow();
 355   },
 356   select: function() {
 357     var inputVisible = this.type != qwebirc.ui.WINDOW_CONNECT && this.type != qwebirc.ui.WINDOW_CUSTOM;
 358
 359     this.tab.removeClass("tab-unselected");
 360     this.tab.addClass("tab-selected");
 361
 362     this.parentObject.setLines(this.lines);
 363     this.parentObject.setChannelItems(this.nicklist, this.topic);
 364     this.parentObject.qjsui.showInput(inputVisible);
 365     this.parentObject.qjsui.showChannel($defined(this.nicklist));
 366
 367     this.reflow();
 368
 369     this.parent();
 370
 371     if(inputVisible)
 372       this.parentObject.inputbox.focus();
 373   },
 374   deselect: function() {
 375     this.parent();
 376
 377     this.tab.removeClass("tab-selected");
 378     this.tab.addClass("tab-unselected");
 379   },
 380   close: function() {
 381     this.parent();
 382
 383     this.parentObject.tabs.removeChild(this.tab);
 384   },
 385   addLine: function(type, line, colour) {
 386     var e = new Element("div");
 387
 388     if(colour) {
 389       e.setStyles({"background": colour});
 390     } else if(this.lastcolour) {
 391       e.addClass("linestyle1");
 392     } else {
 393       e.addClass("linestyle2");
 394     }
 395     this.lastcolour = !this.lastcolour;
 396
 397     this.parent(type, line, colour, e);
 398   },
 399   setHilighted: function(state) {
 400     laststate = this.hilighted;
 401
 402     this.parent(state);
 403
 404     if(state == laststate)
 405       return;
 406
 407     this.tab.removeClass("tab-hilight-activity");
 408     this.tab.removeClass("tab-hilight-us");
 409     this.tab.removeClass("tab-hilight-speech");
 410
 411     switch(this.hilighted) {
 412       case qwebirc.ui.HILIGHT_US:
 413         this.tab.addClass("tab-hilight-us");
 414         break;
 415       case qwebirc.ui.HILIGHT_SPEECH:
 416         this.tab.addClass("tab-hilight-speech");
 417         break;
 418       case qwebirc.ui.HILIGHT_ACTIVITY:
 419         this.tab.addClass("tab-hilight-activity");
 420         break;
 421     }
 422   }
 423 });