]> jfr.im git - irc/quakenet/qwebirc.git/blobdiff - js/ui/qui.js
Try not to corrupt the namespaces.
[irc/quakenet/qwebirc.git] / js / ui / qui.js
index 83a6aff31a22603679f52c33bc9d4cd0b2c7d999..959b83694e7d295ae937921c3dc6fb5ef413e2ed 100644 (file)
-var QUIWindow = new Class({
-  Extends: UIWindow,
+qwebirc.ui.QUI = new Class({
+  Extends: qwebirc.ui.NewLoginUI,
+  initialize: function(parentElement, theme) {
+    this.parent(parentElement, qwebirc.ui.QUI.Window, "qui");
+    this.theme = theme;
+    this.parentElement = parentElement;
+  },
+  postInitialize: function() {
+    this.qjsui = new qwebirc.ui.QUI.JSUI("qwebirc-qui", this.parentElement);
+    
+    this.qjsui.top.addClass("tabbar");
+    
+    this.qjsui.bottom.addClass("input");
+    this.qjsui.right.addClass("nicklist");
+    this.qjsui.topic.addClass("topic");
+    this.qjsui.middle.addClass("lines");
+    
+    this.tabs = this.qjsui.top;
+    this.origtopic = this.topic = this.qjsui.topic;
+    this.origlines = this.lines = this.qjsui.middle;
+    this.orignicklist = this.nicklist = this.qjsui.right;
+    
+    this.input = this.qjsui.bottom;
+    this.reflow = this.qjsui.reflow.bind(this.qjsui);
+    
+    this.createInput();
+    this.reflow();
+  },
+  createInput: function() {
+    var form = new Element("form");
+    this.input.appendChild(form);
+    form.addClass("input");
+    
+    var inputbox = new Element("input");
+    form.appendChild(inputbox);
+    this.inputbox = inputbox;
+    
+    form.addEvent("submit", function(e) {
+      new Event(e).stop();
+    
+      if(inputbox.value == "")
+        return;
+        
+      this.getActiveWindow().historyExec(inputbox.value);
+      inputbox.value = "";
+    }.bind(this));
+    
+    inputbox.addEvent("keydown", function(e) {
+      var resultfn;
+      var cvalue = inputbox.value;
+
+      if(e.key == "up") {
+        resultfn = this.commandhistory.upLine;
+      } else if(e.key == "down") {
+        resultfn = this.commandhistory.downLine;
+      } else {
+        return;
+      }
+      
+      if((cvalue != "") && (this.lastcvalue != cvalue))
+        this.commandhistory.addLine(cvalue, true);
+      
+      var result = resultfn.bind(this.commandhistory)();
+      
+      new Event(e).stop();
+      if(!result)
+        result = "";
+      this.lastcvalue = result;
+        
+      inputbox.value = result;
+      setAtEnd(inputbox);
+    }.bind(this));
+  },
+  setLines: function(lines) {
+    this.lines.parentNode.replaceChild(lines, this.lines);
+    this.qjsui.middle = this.lines = lines;
+  },
+  setChannelItems: function(nicklist, topic) {
+    if(!$defined(nicklist)) {
+      nicklist = this.orignicklist;
+      topic = this.origtopic;
+    }
+    this.nicklist.parentNode.replaceChild(nicklist, this.nicklist);
+    this.qjsui.right = this.nicklist = nicklist;
+
+    this.topic.parentNode.replaceChild(topic, this.topic);
+    this.qjsui.topic = this.topic = topic;
+  }
+});
+
+qwebirc.ui.QUI.JSUI = new Class({
+  initialize: function(class_, parent, sizer) {
+    this.parent = parent;
+    this.sizer = $defined(sizer)?sizer:parent;
+    
+    this.class_ = class_;
+    this.create();
+    
+    this.reflowevent = null;
+    
+    window.addEvent("resize", function() {
+      this.reflow(100);
+    }.bind(this));
+  },
+  applyClasses: function(pos, l) {
+    l.addClass("dynamicpanel");    
+    l.addClass(this.class_);
+
+    if(pos == "middle") {
+      l.addClass("leftboundpanel");
+    } else if(pos == "top") {
+      l.addClass("topboundpanel");
+      l.addClass("widepanel");
+    } else if(pos == "topic") {
+      l.addClass("widepanel");
+    } else if(pos == "right") {
+      l.addClass("rightboundpanel");
+    } else if(pos == "bottom") {
+      l.addClass("bottomboundpanel");
+      l.addClass("widepanel");
+    }
+  },
+  create: function() {
+    var XE = function(pos) {
+      var element = new Element("div");
+      this.applyClasses(pos, element);
+      
+      this.parent.appendChild(element);
+      return element;
+    }.bind(this);
+    
+    this.top = XE("top");
+    this.topic = XE("topic");
+    this.middle = XE("middle");
+    this.right = XE("right");
+    this.bottom = XE("bottom");
+  },
+  reflow: function(delay) {
+    if(!delay)
+      delay = 1;
+      
+    if(this.reflowevent)
+      $clear(this.reflowevent);
+    this.__reflow();
+    this.reflowevent = this.__reflow.delay(delay, this);
+  },
+  __reflow: function() {
+    var bottom = this.bottom;
+    var middle = this.middle;
+    var right = this.right;
+    var topic = this.topic;
+    var top = this.top;
+    
+    var topicsize = topic.getSize();
+    var topsize = top.getSize();
+    var rightsize = right.getSize();
+    var bottomsize = bottom.getSize();
+    var docsize = this.sizer.getSize();
+    
+    var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y);
+    var mwidth = (docsize.x - rightsize.x);
+
+    topic.setStyle("top", topsize.y + "px");
+    
+    middle.setStyle("top", (topsize.y + topicsize.y) + "px");
+    if(mheight > 0) {
+      middle.setStyle("height", mheight + "px");
+      right.setStyle("height", mheight + "px");
+    }
+    
+    if(mwidth > 0)
+      middle.setStyle("width", mwidth + "px");
+    right.setStyle("top", (topsize.y + topicsize.y) + "px");
+    right.setStyle("left", mwidth + "px");
+    
+    bottom.setStyle("top", (docsize.y - bottomsize.y) + "px");
+  },
+  showChannel: function(state) {
+    var display = "none";
+    if(state)
+      display = "block";
+
+    this.right.setStyle("display", display);
+    this.topic.setStyle("display", display);
+  },
+  showInput: function(state) {
+    this.bottom.setStyle("display", state?"block":"none");
+  }
+});
+
+qwebirc.ui.QUI.Window = new Class({
+  Extends: qwebirc.ui.Window,
   
   initialize: function(parentObject, client, type, name) {
     this.parent(parentObject, client, type, name);
 
     this.tab = new Element("a", {"href": "#"});
     this.tab.addClass("tab");
+    parentObject.tabs.appendChild(this.tab);
     
     this.tab.appendText(name);
     this.tab.addEvent("click", function(e) {
       new Event(e).stop();
       parentObject.selectWindow(this);
     }.bind(this));
-
-    parentObject.tabs.appendChild(this.tab);
     
-    if(type != WINDOW_STATUS) {
-      tabclose = new Element("span");
+    if(type != qwebirc.ui.WINDOW_STATUS && type != qwebirc.ui.WINDOW_CONNECT) {
+      var tabclose = new Element("span");
+      tabclose.set("text", "X");
       tabclose.addClass("tabclose");
       tabclose.addEvent("click", function(e) {
         new Event(e).stop();
         
-        if(type == WINDOW_CHANNEL)
+        if(type == qwebirc.ui.WINDOW_CHANNEL)
           this.client.exec("/PART " + name);
 
         this.close();
       }.bind(this));
-      tabclose.set("text", "X");
+
       this.tab.appendChild(tabclose);
     }
 
-    this.parentObject.reflow();
-    
-    this.window = new Element("div");
-    this.window.addClass("window");
-    parentObject.container.appendChild(this.window);
-    
     this.lines = new Element("div");
+    this.parentObject.qjsui.applyClasses("middle", this.lines);
     this.lines.addClass("lines");
-    this.window.appendChild(this.lines);
-    
-    var formdiv = new Element("div");
-    this.window.appendChild(formdiv);  
-    this.formdiv = formdiv;
-    
-    var form = new Element("form");
-    var inputbox = new Element("input");
-    
-    formdiv.addClass("input");
-  
-    form.addEvent("submit", function(e) {
-      new Event(e).stop();
-    
-      this.historyExec(inputbox.value);
-      inputbox.value = "";
-    }.bind(this));
-    formdiv.appendChild(form);
-    form.appendChild(inputbox);
     
-    inputbox.addEvent("keypress", function(e) {
-      var result;
-      if(e.key == "up") {
-        result = this.commandhistory.nextLine();
-      } else if(e.key == "down") {
-        result = this.commandhistory.prevLine();
-      } else {
-        return;
-      }
-      
-      new Event(e).stop();
-      if(!result)
-        result = ""
-      inputbox.value = result;
-      setAtEnd(inputbox);
+    this.lines.addEvent("scroll", function() {
+      this.scrolleddown = this.scrolledDown();
     }.bind(this));
-    this.inputbox = inputbox;
-    
-    var toppos = 0;
-    var rightpos = 0;
-    var bottompos = formdiv.getSize().y;
     
-    if(type == WINDOW_CHANNEL) {
+    if(type == qwebirc.ui.WINDOW_CHANNEL) {
       this.topic = new Element("div");
       this.topic.addClass("topic");
+      this.topic.addClass("tab-invisible");
       this.topic.set("html", " ");
-      
-      this.window.appendChild(this.topic);
+      this.parentObject.qjsui.applyClasses("topic", this.topic);
       
       this.nicklist = new Element("div");
       this.nicklist.addClass("nicklist");
-      
-      this.window.appendChild(this.nicklist);
+      this.nicklist.addClass("tab-invisible");
+      this.parentObject.qjsui.applyClasses("nicklist", this.nicklist);
     }
-
-    this.lines.addClass("lines");
-    if(type == WINDOW_CHANNEL) {
-      /* calls reflow */
+    
+    if(type == qwebirc.ui.WINDOW_CHANNEL) {
       this.updateTopic("");
     } else {
       this.reflow();
     }
-    
-    this.lines.addEvent("scroll", function() {
-      this.scrolleddown = this.scrolledDown();
-    }.bind(this));
-    
-    window.addEvent("resize", function() {
-      if(this.scrolleddown)
-        this.scrollToBottom();
-      this.reflow();
-    }.bind(this));
   },
   reflow: function() {
-    var toppos = 0;
-    var rightpos = 0;
-    var bottompos = this.formdiv.getSize().y;
-    
-    if(this.type == WINDOW_CHANNEL) {
-      toppos = this.topic.getSize().y;
-
-      this.nicklist.setStyle("top", toppos + "px");
-      this.nicklist.setStyle("bottom", (bottompos - 1) + "px");
-      rightpos = this.nicklist.getSize().x;
-    }
-    
-    this.lines.setStyle("top", toppos + "px");
-    this.lines.setStyle("bottom", bottompos + "px");
-    this.lines.setStyle("right", rightpos + "px");
+    this.parentObject.reflow();
+  },
+  onResize: function() {
+    if(this.scrolleddown)
+      this.scrollToBottom();
   },
   updateNickList: function(nicks) {
     this.parent(nicks);
@@ -160,26 +286,32 @@ var QUIWindow = new Class({
     this.reflow();
   },
   select: function() {
-    this.window.removeClass("tab-invisible");
+    var inputVisible = this.type != qwebirc.ui.WINDOW_CONNECT && this.type != qwebirc.ui.WINDOW_CUSTOM;
+    
     this.tab.removeClass("tab-unselected");
     this.tab.addClass("tab-selected");
-    this.reflow();
 
+    this.parentObject.setLines(this.lines);
+    this.parentObject.setChannelItems(this.nicklist, this.topic);
+    this.parentObject.qjsui.showInput(inputVisible);
+    this.parentObject.qjsui.showChannel($defined(this.nicklist));
+
+    this.reflow();
+    
     this.parent();
     
-    this.inputbox.focus();
+    if(inputVisible)
+      this.parentObject.inputbox.focus();
   },
   deselect: function() {
     this.parent();
     
-    this.window.addClass("tab-invisible");
     this.tab.removeClass("tab-selected");
     this.tab.addClass("tab-unselected");
   },
   close: function() {
     this.parent();
     
-    this.parentObject.container.removeChild(this.window);
     this.parentObject.tabs.removeChild(this.tab);
   },
   addLine: function(type, line, colour) {
@@ -193,7 +325,7 @@ var QUIWindow = new Class({
       e.addClass("linestyle2");
     }
     this.lastcolour = !this.lastcolour;
-        
+
     this.parent(type, line, colour, e);
   },
   setHilighted: function(state) {
@@ -206,41 +338,3 @@ var QUIWindow = new Class({
     }
   }
 });
-
-var QUI = new Class({
-  Extends: UI,
-  initialize: function(parentElement, theme) {
-    this.parent(parentElement, QUIWindow, "qui");
-    this.theme = theme;
-    this.parentElement = parentElement;
-  },
-  reflow: function() {
-    var tabheight = this.tabs.getSize().y;
-    this.container.setStyle("top", tabheight + "px"); 
-  },
-  postInitialize: function() {
-    this.outerContainer = new Element("div");
-    this.outerContainer.addClass("outercontainer");
-    this.parentElement.appendChild(this.outerContainer);
-        
-    this.tabs = new Element("div");
-    this.tabs.addClass("tabbar");
-    this.outerContainer.appendChild(this.tabs);
-    
-    var tester = new Element("span");
-    this.tabs.appendChild(tester);
-    
-    this.tabheight = this.tabs.getSize().y;
-    this.tabs.removeChild(tester);
-
-    this.container = new Element("div");
-    this.container.addClass("container");
-    this.outerContainer.appendChild(this.container);
-  },
-  loginBox: function(callbackfn, intialNickname, initialChannels, autoConnect, autoNick) {
-    this.parent(function(options) {
-      this.postInitialize();
-      callbackfn(options);
-    }.bind(this), intialNickname, initialChannels, autoConnect, autoNick);
-  }
-});