js/ui/qui.js

   1 var QJSUI = new Class({
   2   initialize: function(class_, parent, sizer) {
   3     this.parent = parent;
   4     this.sizer = $defined(sizer)?sizer:parent;
   5
   6     this.create(class_);
   7
   8     window.addEvent("resize", function() {
   9       this.reflow();
  10       this.reflow.delay(100, this);
  11     }.bind(this));
  12   },
  13   create: function(class_) {
  14     var XE = function(classes) {
  15       var l = new Element("div");
  16       l.addClass(class_);
  17       l.addClass("dynamicpanel");
  18
  19       classes.split(" ").each(function(x) {
  20         l.addClass(x);
  21       });
  22
  23       this.parent.appendChild(l);
  24       return l;
  25     }.bind(this);
  26
  27     this.top = XE("widepanel topboundpanel");
  28     this.topic = XE("widepanel");
  29     this.middle = XE("leftboundpanel");
  30     this.right = XE("rightboundpanel");
  31     this.bottom = XE("bottomboundpanel widepanel");
  32   },
  33   reflow: function() {
  34     var bottom = this.bottom;
  35     var middle = this.middle;
  36     var right = this.right;
  37     var topic = this.topic;
  38     var top = this.top;
  39
  40     var topicsize = topic.getSize();
  41     var topsize = top.getSize();
  42     var rightsize = right.getSize();
  43     var bottomsize = bottom.getSize();
  44     var docsize = this.sizer.getSize();
  45
  46     var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y);
  47     var mwidth = (docsize.x - rightsize.x);
  48
  49     topic.setStyle("top", topsize.y + "px");
  50
  51     middle.setStyle("top", (topsize.y + topicsize.y) + "px");
  52     if(mheight > 0) {
  53       middle.setStyle("height", mheight + "px");
  54       right.setStyle("height", mheight + "px");
  55     }
  56
  57     if(mwidth > 0) {
  58       middle.setStyle("width", mwidth + "px");
  59     } else {
  60       alert(mwidth);
  61     }
  62     right.setStyle("top", (topsize.y + topicsize.y) + "px");
  63     right.setStyle("left", mwidth + "px");
  64
  65     bottom.setStyle("top", (docsize.y - bottomsize.y) + "px");
  66   },
  67   showChannel: function(state) {
  68     var display = "none";
  69     if(state)
  70       display = "block";
  71
  72     this.right.setStyle("display", display);
  73     this.topic.setStyle("display", display);
  74     //this.reflow.delay(0, this);
  75   }
  76 });
  77
  78 var QUIWindow = new Class({
  79   Extends: UIWindow,
  80
  81   initialize: function(parentObject, client, type, name) {
  82     this.parent(parentObject, client, type, name);
  83
  84     this.tab = new Element("a", {"href": "#"});
  85     this.tab.addClass("tab");
  86     parentObject.tabs.appendChild(this.tab);
  87
  88     this.tab.appendText(name);
  89     this.tab.addEvent("click", function(e) {
  90       new Event(e).stop();
  91       parentObject.selectWindow(this);
  92     }.bind(this));
  93
  94     if(type != WINDOW_STATUS) {
  95       tabclose = new Element("span");
  96       tabclose.addClass("tabclose");
  97       tabclose.addEvent("click", function(e) {
  98         new Event(e).stop();
  99
 100         if(type == WINDOW_CHANNEL)
 101           this.client.exec("/PART " + name);
 102
 103         this.close();
 104       }.bind(this));
 105       tabclose.set("text", "X");
 106       if(BrowserVersion() == "ie7" || BrowserVersion() == "ie6") {
 107       } else {
 108         tabclose.setStyle("padding", "2px");
 109         tabclose.setStyle("vertical-align", "top");
 110       }
 111       this.tab.appendChild(tabclose);
 112     }
 113
 114     this.lines = new Element("div");
 115     this.lines.addClass("lines");
 116     this.lines.addClass("tab-invisible");
 117     parentObject.lines.appendChild(this.lines);
 118     this.lines.addEvent("scroll", function() {
 119       this.scrolleddown = this.scrolledDown();
 120     }.bind(this));
 121
 122     if(type == WINDOW_CHANNEL) {
 123       this.topic = new Element("div");
 124       this.topic.addClass("topic");
 125       this.topic.addClass("tab-invisible");
 126       this.topic.set("html", "&nbsp;");
 127       parentObject.topic.appendChild(this.topic);
 128
 129       this.nicklist = new Element("div");
 130       this.nicklist.addClass("nicklist");
 131       this.nicklist.addClass("tab-invisible");
 132       parentObject.nicklist.appendChild(this.nicklist);
 133     }
 134
 135     if(type == WINDOW_CHANNEL) {
 136       this.updateTopic("");
 137     } else {
 138       this.reflow();
 139     }
 140   },
 141   reflow: function() {
 142     this.parentObject.reflow();
 143   },
 144   onResize: function() {
 145     if(this.scrolleddown)
 146       this.scrollToBottom();
 147   },
 148   updateNickList: function(nicks) {
 149     this.parent(nicks);
 150
 151     var n = this.nicklist;
 152     while(n.firstChild)
 153       n.removeChild(n.firstChild);
 154
 155     nicks.each(function(nick) {
 156       var e = new Element("div");
 157       n.appendChild(e);
 158       e.appendChild(document.createTextNode(nick));
 159     });
 160   },
 161   updateTopic: function(topic) {
 162     this.parent(topic);
 163
 164     var t = this.topic;
 165
 166     while(t.firstChild)
 167       t.removeChild(t.firstChild);
 168
 169     if(topic) {
 170       Colourise("[" + topic + "]", t);
 171     } else {
 172       var e = new Element("div");
 173       e.set("text", "(no topic set)");
 174       e.addClass("emptytopic");
 175       t.appendChild(e);
 176     }
 177     this.reflow();
 178   },
 179   showChannel: function() {
 180     this.parentObject.qjsui.showChannel($defined(this.nicklist));
 181     this.reflow();
 182   },
 183   select: function() {
 184     this.tab.removeClass("tab-unselected");
 185     this.tab.addClass("tab-selected");
 186
 187     this.lines.removeClass("tab-invisible");
 188     if(this.nicklist) {
 189       this.nicklist.removeClass("tab-invisible");
 190       this.topic.removeClass("tab-invisible");
 191     }
 192     this.showChannel();
 193     this.parent();
 194
 195     this.parentObject.inputbox.focus();
 196   },
 197   deselect: function() {
 198     this.parent();
 199
 200     this.lines.addClass("tab-invisible");
 201     if(this.nicklist) {
 202       this.nicklist.addClass("tab-invisible");
 203       this.topic.addClass("tab-invisible");
 204     }
 205     this.tab.removeClass("tab-selected");
 206     this.tab.addClass("tab-unselected");
 207
 208     //this.showChannel();
 209   },
 210   close: function() {
 211     this.parent();
 212
 213     this.parentObject.lines.removeChild(this.lines);
 214     if(this.nicklist) {
 215       this.parentObject.nicklist.removeChild(this.nicklist);
 216       this.parentObject.topic.removeChild(this.topic);
 217     }
 218     this.parentObject.tabs.removeChild(this.tab);
 219   },
 220   addLine: function(type, line, colour) {
 221     var e = new Element("div");
 222
 223     if(colour) {
 224       e.setStyles({"background": colour});
 225     } else if(this.lastcolour) {
 226       e.addClass("linestyle1");
 227     } else {
 228       e.addClass("linestyle2");
 229     }
 230     this.lastcolour = !this.lastcolour;
 231
 232     this.parent(type, line, colour, e);
 233   },
 234   setHilighted: function(state) {
 235     this.parent(state);
 236
 237     if(state) {
 238       this.tab.addClass("tab-hilighted");
 239     } else {
 240       this.tab.removeClass("tab-hilighted");
 241     }
 242   }
 243 });
 244
 245 var QUI = new Class({
 246   Extends: UI,
 247   initialize: function(parentElement, theme) {
 248     this.parent(parentElement, QUIWindow, "qui");
 249     this.theme = theme;
 250     this.parentElement = parentElement;
 251   },
 252   reflow: function() {
 253     //alert("REFLOW");
 254     this.qjsui.reflow();
 255   },
 256   postInitialize: function() {
 257     this.qjsui = new QJSUI("qwebirc-qui", this.parentElement, document);
 258
 259     this.qjsui.top.addClass("tabbar");
 260
 261     this.qjsui.bottom.addClass("input");
 262     this.qjsui.right.addClass("nicklist");
 263     this.qjsui.topic.addClass("topic");
 264     this.qjsui.middle.addClass("lines");
 265
 266     this.tabs = this.qjsui.top;
 267     this.topic = this.qjsui.topic;
 268     this.lines = this.qjsui.middle;
 269     this.nicklist = this.qjsui.right;
 270     this.input = this.qjsui.bottom;
 271     this.createInput();
 272     this.reflow();
 273   },
 274   createInput: function() {
 275     var form = new Element("form");
 276     this.input.appendChild(form);
 277     form.addClass("input");
 278
 279     var inputbox = new Element("input");
 280     form.appendChild(inputbox);
 281     this.inputbox = inputbox;
 282
 283     form.addEvent("submit", function(e) {
 284       new Event(e).stop();
 285
 286       if(inputbox.value == "")
 287         return;
 288
 289       this.getActiveWindow().historyExec(inputbox.value);
 290       inputbox.value = "";
 291     }.bind(this));
 292
 293     inputbox.addEvent("keydown", function(e) {
 294       var resultfn;
 295       var cvalue = inputbox.value;
 296
 297       if(e.key == "up") {
 298         resultfn = this.commandhistory.upLine;
 299       } else if(e.key == "down") {
 300         resultfn = this.commandhistory.downLine;
 301       } else {
 302         return;
 303       }
 304
 305       if((cvalue != "") && (this.lastcvalue != cvalue))
 306         this.commandhistory.addLine(cvalue, true);
 307
 308       var result = resultfn.bind(this.commandhistory)();
 309
 310       new Event(e).stop();
 311       if(!result)
 312         result = "";
 313       this.lastcvalue = result;
 314
 315       inputbox.value = result;
 316       setAtEnd(inputbox);
 317     }.bind(this));
 318   },
 319   loginBox: function(callbackfn, intialNickname, initialChannels, autoConnect, autoNick) {
 320     this.parent(function(options) {
 321       this.postInitialize();
 322       callbackfn(options);
 323     }.bind(this), intialNickname, initialChannels, autoConnect, autoNick);
 324   }
 325 });