]> jfr.im git - irc/quakenet/qwebirc.git/blobdiff - js/ui/frontends/qui.js
another silly QHash bug
[irc/quakenet/qwebirc.git] / js / ui / frontends / qui.js
index 548c659c6253665b1696f56b576b5df7b3d121d0..76fe7bdb13312a8cb513a7f6a0813c0c14ceb506 100644 (file)
@@ -14,30 +14,38 @@ qwebirc.ui.QUI = new Class({
         w.onResize();
     }.bind(this));
     this.qjsui.top.addClass("outertabbar");
-    
+    this.qjsui.left.addClass("outertabbar");
+
+    this.qjsui.top.addClass("outertabbar_top");
+    this.qjsui.left.addClass("outertabbar_left");
+
     this.qjsui.bottom.addClass("input");
     this.qjsui.right.addClass("nicklist");
     this.qjsui.topic.addClass("topic");
     this.qjsui.middle.addClass("lines");
     
-    this.outerTabs = this.qjsui.top;
+    this.outerTabs = new Element("div");
+    this.sideTabs = null;
 
     this.tabs = new Element("div");
     this.tabs.addClass("tabbar");
     
     this.__createDropdownMenu();
-    
+
     this.outerTabs.appendChild(this.tabs);
     this.origtopic = this.topic = this.qjsui.topic;
-    this.origlines = this.lines = this.qjsui.middle;
+    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.tabs.addEvent("mousewheel", function(x) {
+      if(this.sideTabs)
+        return;
+
       var event = new Event(x);
-      
+
       /* up */
       if(event.wheel > 0) {
         this.nextWindow();
@@ -51,9 +59,13 @@ qwebirc.ui.QUI = new Class({
     this.createInput();
     this.reflow();
     this.reflow.delay(100); /* Konqueror fix */
-    
-    /* HACK, in Chrome this should work immediately but doesn't */
-    this.__createDropdownHint.delay(100, this);
+    this.setSideTabs(this.uiOptions.SIDE_TABS);
+
+  },
+  newWindow: function(client, type, name) {
+    var w = this.parent(client, type, name);
+    w.setSideTabs(this.sideTabs);
+    return w;
   },
   __createDropdownMenu: function() {
     var dropdownMenu = new Element("span");
@@ -87,24 +99,17 @@ qwebirc.ui.QUI = new Class({
     dropdown.appendChild(new Element("img", {src: qwebirc.global.staticBaseURL + "images/icon.png", title: "menu", alt: "menu"}));
     dropdown.setStyle("opacity", 1);
 
-    var dropdownEffect = new Fx.Tween(dropdown, {duration: "long", property: "opacity", link: "chain"});
-    dropdownEffect.start(0.25);
-    dropdownEffect.start(1);
-    dropdownEffect.start(0.33);
-    dropdownEffect.start(1);
-    
     this.outerTabs.appendChild(dropdown);
     dropdownMenu.show = function(x) {
       new Event(x).stop();
-      this.hideHint();
-      
+
       if(dropdownMenu.visible) {
         dropdownMenu.hide();
         return;
       }
-      var top = this.outerTabs.getSize().y;
-      
-      dropdownMenu.setStyle("left", 0);
+      var parentSize = this.outerTabs.parentNode.getSize().y;
+
+      dropdownMenu.setStyle("left", parentSize.x);
       dropdownMenu.setStyle("top", top-1); /* -1 == top border */
       dropdownMenu.setStyle("display", "inline-block");
       dropdownMenu.visible = true;
@@ -114,31 +119,6 @@ qwebirc.ui.QUI = new Class({
     dropdown.addEvent("mousedown", function(e) { new Event(e).stop(); });
     dropdown.addEvent("click", dropdownMenu.show);
   },
-  __createDropdownHint: function() {
-    var dropdownhint = new Element("div");
-    dropdownhint.addClass("dropdownhint");
-    dropdownhint.set("text", "Click the icon for the main menu.");
-    dropdownhint.setStyle("top", this.outerTabs.getSize().y + 5);
-
-    this.parentElement.appendChild(dropdownhint);
-    new Fx.Morph(dropdownhint, {duration: "normal", transition: Fx.Transitions.Sine.easeOut}).start({left: [900, 5]});
-    
-    var hider = function() {
-      new Fx.Morph(dropdownhint, {duration: "long"}).start({left: [5, -900]});
-    }.delay(4000, this);
-    
-    var hider2 = function() {
-      if(dropdownhint.hidden)
-        return;
-      this.parentElement.removeChild(dropdownhint);
-      dropdownhint.hidden = 1;
-    }.bind(this);
-    hider2.delay(4000);
-    this.hideHint = hider2;
-    
-    document.addEvent("mousedown", hider2);
-    document.addEvent("keypress", hider2);
-  },
   createInput: function() {
     var form = new Element("form");
     this.input.appendChild(form);
@@ -147,7 +127,7 @@ qwebirc.ui.QUI = new Class({
     
     var inputbox = new Element("input");
     this.addEvent("signedOn", function() {
-      inputbox.placeholder = "type commands here, for example: /JOIN #channel";
+      inputbox.placeholder = "chat here! you can also use commands, like /JOIN or /HELP";
       var d = function() { inputbox.addClass("input-flash"); }.delay(250);
       var d = function() { inputbox.removeClass("input-flash"); }.delay(500);
       var d = function() { inputbox.addClass("input-flash"); }.delay(750);
@@ -249,6 +229,31 @@ qwebirc.ui.QUI = new Class({
 
     this.topic.parentNode.replaceChild(topic, this.topic);
     this.qjsui.topic = this.topic = topic;
+  },
+  setSideTabs: function(value) {
+    if(value === this.sideTabs)
+      return;
+
+    if(this.sideTabs === true) {
+      this.qjsui.left.removeChild(this.outerTabs);
+    } else if(this.sideTabs === false) {
+      this.qjsui.top.removeChild(this.outerTabs);
+    }
+    if(value) {
+      this.qjsui.left.appendChild(this.outerTabs);
+      this.qjsui.top.style.display = "none";
+      this.qjsui.left.style.display = "";
+    } else {
+      this.qjsui.top.appendChild(this.outerTabs);
+      this.qjsui.top.style.display = "";
+      this.qjsui.left.style.display = "none";
+    }
+    this.sideTabs = value;
+    this.windows.each(function(k, v) {
+      v.each(function(k, v2) {
+        v2.setSideTabs(value);
+      });
+    });
   }
 });
 
@@ -257,7 +262,7 @@ 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();
     
@@ -270,20 +275,7 @@ qwebirc.ui.QUI.JSUI = new Class({
   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");
-    }
+    l.addClass(pos + "boundpanel");
   },
   create: function() {
     var XE = function(pos) {
@@ -295,6 +287,7 @@ qwebirc.ui.QUI.JSUI = new Class({
     }.bind(this);
     
     this.top = XE("top");
+    this.left = XE("left");
     this.topic = XE("topic");
     this.middle = XE("middle");
     this.right = XE("right");
@@ -315,19 +308,37 @@ qwebirc.ui.QUI.JSUI = new Class({
     var right = this.right;
     var topic = this.topic;
     var top = this.top;
-    
+    var left = this.left;
+
+    /* |----------------------------------------------|
+     * | top                                          |
+     * |----------------------------------------------|
+     * | left | topic                         | right |
+     * |      |-------------------------------|       |
+     * |      | middle                        |       |
+     * |      |                               |       |
+     * |      |                               |       |
+     * |      |---------------------------------------|
+     * |      | bottom                                |
+     * |----------------------------------------------|
+     */
+
     var topicsize = topic.getSize();
     var topsize = top.getSize();
     var rightsize = right.getSize();
     var bottomsize = bottom.getSize();
+    var leftsize = left.getSize();
     var docsize = this.sizer.getSize();
     
     var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y);
-    var mwidth = (docsize.x - rightsize.x);
+    var mwidth = (docsize.x - rightsize.x - leftsize.x);
 
+    left.setStyle("top", topsize.y);
     topic.setStyle("top", topsize.y);
+    topic.setStyle("left", leftsize.x);
     
     middle.setStyle("top", (topsize.y + topicsize.y));
+    middle.setStyle("left", leftsize.x);
     if(mheight > 0) {
       middle.setStyle("height", mheight);
       right.setStyle("height", mheight);
@@ -336,9 +347,8 @@ qwebirc.ui.QUI.JSUI = new Class({
     if(mwidth > 0)
       middle.setStyle("width", mwidth);
     right.setStyle("top", (topsize.y + topicsize.y));
-    right.setStyle("left", mwidth);
-    
-    bottom.setStyle("top", (docsize.y - bottomsize.y));
+
+    bottom.setStyle("left",  leftsize.x);
     this.fireEvent("reflow");
   },
   showChannel: function(state, nicklistVisible) {
@@ -368,49 +378,53 @@ qwebirc.ui.QUI.Window = new Class({
     this.spaceNode = document.createTextNode(" ");
     parentObject.tabs.appendChild(this.tab);
     parentObject.tabs.appendChild(this.spaceNode);
-    
-    this.tab.appendText(name);
-    this.tab.addEvent("click", function(e) {
-      new Event(e).stop();
-      
-      if(this.closed)
-        return;
-        
-      parentObject.selectWindow(this);
-    }.bind(this));
-    
+
     if(type != qwebirc.ui.WINDOW_STATUS && type != qwebirc.ui.WINDOW_CONNECT) {
       var tabclose = new Element("span");
+      this.tabclose = tabclose;
       tabclose.set("text", "X");
       tabclose.addClass("tabclose");
       var close = function(e) {
         new Event(e).stop();
-        
+
         if(this.closed)
           return;
-          
+
         if(type == qwebirc.ui.WINDOW_CHANNEL)
           this.client.exec("/PART " + name);
 
         this.close();
-        
+
         //parentObject.inputbox.focus();
       }.bind(this);
-      
+
       tabclose.addEvent("click", close);
       this.tab.addEvent("mouseup", function(e) {
         var button = 1;
-        
+
         if(Browser.Engine.trident)
           button = 4;
 
         if(e.event.button == button)
           close(e);
       }.bind(this));
-      
+
       this.tab.appendChild(tabclose);
+    } else {
+      this.tabclose = null;
     }
 
+    this.tab.appendText(name);
+    this.tab.addEvent("click", function(e) {
+      new Event(e).stop();
+      
+      if(this.closed)
+        return;
+        
+      parentObject.selectWindow(this);
+    }.bind(this));
+    
+
     this.lines = new Element("div");
     this.parentObject.qjsui.applyClasses("middle", this.lines);
     this.lines.addClass("lines");
@@ -424,6 +438,7 @@ qwebirc.ui.QUI.Window = new Class({
     
     if(type == qwebirc.ui.WINDOW_CHANNEL) {
       this.topic = new Element("div");
+      this.parentObject.qjsui.applyClasses("topic", this.topic);
       this.topic.addClass("topic");
       this.topic.addClass("tab-invisible");
       this.topic.set("html", " ");
@@ -435,14 +450,14 @@ qwebirc.ui.QUI.Window = new Class({
       this.nicklist.addClass("nicklist");
       this.nicklist.addClass("tab-invisible");
       this.nicklist.addEvent("click", this.removePrevMenu.bind(this));
-      this.parentObject.qjsui.applyClasses("nicklist", this.nicklist);
+      this.parentObject.qjsui.applyClasses("right", this.nicklist);
     }
     
     if(type == qwebirc.ui.WINDOW_CHANNEL)
       this.updateTopic("");
 
     this.nicksColoured = this.parentObject.uiOptions.NICK_COLOURS;
-    this.reflow();    
+    this.reflow();
   },
   rename: function(name) {
     this.tab.replaceChild(document.createTextNode(name), this.tab.firstChild);
@@ -672,5 +687,15 @@ qwebirc.ui.QUI.Window = new Class({
         this.tab.addClass("tab-hilight-activity");
         break;
     }
+  },
+  setSideTabs: function(value) {
+    if(this.tabclose === null)
+      return;
+    this.tab.removeChild(this.tabclose);
+    if(value) {
+      this.tab.insertBefore(this.tabclose, this.tab.firstChild);
+    } else {
+      this.tab.appendChild(this.tabclose);
+    }
   }
 });