X-Git-Url: https://jfr.im/git/irc/quakenet/qwebirc.git/blobdiff_plain/8eb4377c03772b484d13c0e028ee13f33c632714..5e83905fb952c62b861844797603e4b081cc1b5d:/js/ui/frontends/qui.js

diff --git a/js/ui/frontends/qui.js b/js/ui/frontends/qui.js
index ab22ca3..c3b06e2 100644
--- a/js/ui/frontends/qui.js
+++ b/js/ui/frontends/qui.js
@@ -4,6 +4,7 @@ qwebirc.ui.QUI = new Class({
     this.parent(parentElement, qwebirc.ui.QUI.Window, "qui", options);
     this.theme = theme;
     this.parentElement = parentElement;
+    this.setModifiableStylesheet("qui");
   },
   postInitialize: function() {
     this.qjsui = new qwebirc.ui.QUI.JSUI("qwebirc-qui", this.parentElement);
@@ -13,46 +14,69 @@ 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) {
+
+    var scrollHandler = function(x) {
       var event = new Event(x);
-      
-      /* up */
-      if(event.wheel > 0) {
+      var up, down;
+      if(this.sideTabs) {
+        var p = this.qjsui.left;
+
+        /* don't scroll if we're scrollable */
+        if(p.getScrollSize().y > p.clientHeight)
+          return;
+
+        up = event.wheel < 0;
+        down = event.wheel > 0;
+      } else {
+        up = event.wheel > 0;
+        down = event.wheel < 0;
+      }
+
+      if(up) {
         this.nextWindow();
-      } else if(event.wheel < 0) {
-        /* down */
+      } else if(down) {
         this.prevWindow();
       }
       event.stop();
-    }.bind(this));
-    
+    }.bind(this);
+    this.qjsui.left.addEvent("mousewheel", scrollHandler);
+    this.qjsui.top.addEvent("mousewheel", scrollHandler);
+
     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");
@@ -83,27 +107,20 @@ qwebirc.ui.QUI = new Class({
     
     var dropdown = new Element("div");
     dropdown.addClass("dropdown-tab");
-    dropdown.appendChild(new Element("img", {src: "images/favicon.png", title: "menu", alt: "menu"}));
+    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;
@@ -113,31 +130,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);
@@ -145,9 +137,18 @@ qwebirc.ui.QUI = new Class({
     form.addClass("input");
     
     var inputbox = new Element("input");
+    this.addEvent("signedOn", function() {
+      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);
+      var d = function() { inputbox.removeClass("input-flash"); }.delay(1000);
+      var d = function() { inputbox.addClass("input-flash"); }.delay(1250);
+      var d = function() { inputbox.removeClass("input-flash"); }.delay(1750);
+    });
     form.appendChild(inputbox);
     this.inputbox = inputbox;
-    this.inputbox.maxLength = 512;
+    this.inputbox.maxLength = 470;
 
     var sendInput = function() {
       if(inputbox.value == "")
@@ -156,6 +157,7 @@ qwebirc.ui.QUI = new Class({
       this.resetTabComplete();
       this.getActiveWindow().historyExec(inputbox.value);
       inputbox.value = "";
+      inputbox.placeholder = "";
     }.bind(this);
 
     if(!qwebirc.util.deviceHasKeyboard()) {
@@ -187,25 +189,30 @@ qwebirc.ui.QUI = new Class({
       new Event(e).stop();
       sendInput();
     });
-    
-    inputbox.addEvent("focus", this.resetTabComplete.bind(this));
-    inputbox.addEvent("mousedown", this.resetTabComplete.bind(this));
-    
+
+    var reset = this.resetTabComplete.bind(this);
+    inputbox.addEvent("focus", reset);
+    inputbox.addEvent("mousedown", reset);
+    inputbox.addEvent("keypress", reset);
+
     inputbox.addEvent("keydown", function(e) {
       var resultfn;
       var cvalue = inputbox.value;
-      
-      if(e.key == "up") {
+
+      if(e.alt || e.control || e.meta)
+        return;
+
+      if(e.key == "up" && !e.shift) {
         resultfn = this.commandhistory.upLine;
-      } else if(e.key == "down") {
+      } else if(e.key == "down" && !e.shift) {
         resultfn = this.commandhistory.downLine;
       } else if(e.key == "tab") {
+        this.tabComplete(inputbox, e.shift);
+
         new Event(e).stop();
-        this.tabComplete(inputbox);
+        e.preventDefault();
         return;
       } else {
-        /* ideally alt and other keys wouldn't break this */
-        this.resetTabComplete();
         return;
       }
       
@@ -216,6 +223,8 @@ qwebirc.ui.QUI = new Class({
       var result = resultfn.bind(this.commandhistory)();
       
       new Event(e).stop();
+      e.preventDefault();
+
       if(!result)
         result = "";
       this.lastcvalue = result;
@@ -238,6 +247,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);
+      });
+    });
   }
 });
 
@@ -246,7 +280,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();
     
@@ -259,20 +293,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) {
@@ -284,6 +305,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");
@@ -304,19 +326,38 @@ 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);
+    topic.setStyle("width", docsize.x - 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);
@@ -325,17 +366,16 @@ 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) {
+  showChannel: function(state, nicklistVisible) {
     var display = "none";
     if(state)
       display = "block";
 
-    this.right.setStyle("display", display);
+    this.right.setStyle("display", nicklistVisible ? display : "none");
     this.topic.setStyle("display", display);
   },
   showInput: function(state) {
@@ -350,54 +390,60 @@ qwebirc.ui.QUI.Window = new Class({
   initialize: function(parentObject, client, type, name, identifier) {
     this.parent(parentObject, client, type, name, identifier);
 
-    this.tab = new Element("a", {"href": "#"});
+    this.tab = new Element("a");
     this.tab.addClass("tab");
     this.tab.addEvent("focus", function() { this.blur() }.bind(this.tab));;
-    
+
+    this.spaceNode = document.createTextNode(" ");
     parentObject.tabs.appendChild(this.tab);
-    
-    this.tab.appendText(name);
-    this.tab.addEvent("click", function(e) {
-      new Event(e).stop();
-      
-      if(this.closed)
-        return;
-        
-      parentObject.selectWindow(this);
-    }.bind(this));
-    
+    parentObject.tabs.appendChild(this.spaceNode);
+
     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");
@@ -409,35 +455,47 @@ qwebirc.ui.QUI.Window = new Class({
       this.scrollpos = this.getScrollParent().getScroll();
     }.bind(this));
     
-    if(type == qwebirc.ui.WINDOW_CHANNEL) {
+    if(type == qwebirc.ui.WINDOW_CHANNEL || type == qwebirc.ui.WINDOW_QUERY) {
       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", "&nbsp;");
       this.topic.addEvent("dblclick", this.editTopic.bind(this));
       this.parentObject.qjsui.applyClasses("topic", this.topic);
-      
+
       this.prevNick = null;
       this.nicklist = new Element("div");
       this.nicklist.addClass("nicklist");
       this.nicklist.addClass("tab-invisible");
       this.nicklist.addEvent("click", this.removePrevMenu.bind(this));
-      this.parentObject.qjsui.applyClasses("nicklist", this.nicklist);
-    }
-    
-    if(type == qwebirc.ui.WINDOW_CHANNEL) {
+      this.parentObject.qjsui.applyClasses("right", this.nicklist);
+
       this.updateTopic("");
-    } else {
-      this.reflow();
     }
     
     this.nicksColoured = this.parentObject.uiOptions.NICK_COLOURS;
+    this.reflow();
+  },
+  rename: function(name) {
+    var newNode = document.createTextNode(name);
+    if(this.parentObject.sideTabs) {
+      this.tab.replaceChild(newNode, this.tab.childNodes[1]);
+    } else {
+      this.tab.replaceChild(newNode, this.tab.firstChild);
+    }
+
+    if(this.type == qwebirc.ui.WINDOW_QUERY)
+      this.updateTopic("");
   },
   editTopic: function() {
+    if(this.type != qwebirc.ui.WINDOW_CHANNEL)
+      return;
+
     if(!this.client.nickOnChanHasPrefix(this.client.nickname, this.name, "@")) {
 /*      var cmodes = this.client.getChannelModes(channel);
       if(cmodes.indexOf("t")) {*/
-        alert("Sorry, you need to be opped to change the topic!");
+        alert("Sorry, you need to be a channel operator to change the topic!");
         return;
       /*}*/
     }
@@ -478,7 +536,6 @@ qwebirc.ui.QUI.Window = new Class({
       var e2 = new Element("a");
       e.appendChild(e2);
 
-      e2.href = "#";
       e2.set("text", "- " + x.text);
 
       e2.addEvent("focus", function() { this.blur() }.bind(e2));
@@ -518,8 +575,6 @@ qwebirc.ui.QUI.Window = new Class({
     
     var e = new Element("a");
     qwebirc.ui.insertAt(position, this.nicklist, e);
-    
-    e.href = "#";
     var span = new Element("span");
     if(this.parentObject.uiOptions.NICK_COLOURS) {
       var colour = realNick.toHSBColour(this.client);
@@ -559,16 +614,23 @@ qwebirc.ui.QUI.Window = new Class({
     while(t.firstChild)
       t.removeChild(t.firstChild);
 
-    if(topic) {
-      t.topicText = topic;
-      this.parent(topic, t);
+    var suffix;
+    if(this.type == qwebirc.ui.WINDOW_CHANNEL) {
+      suffix = ": ";
     } else {
+      suffix = "";
+    }
+    qwebirc.ui.Colourise(this.name + suffix, t, null, null, this);
+
+    if(this.type == qwebirc.ui.WINDOW_CHANNEL) {
       t.topicText = topic;
-      var e = new Element("div");
-      e.set("text", "(no topic set)");
-      e.addClass("emptytopic");
-      t.appendChild(e);
+      if (topic) {
+        this.parent(topic, t);
+      } else {
+        t.appendChild(document.createTextNode("(no topic set)"));
+      }
     }
+
     this.reflow();
   },
   select: function() {
@@ -580,7 +642,7 @@ qwebirc.ui.QUI.Window = new Class({
     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.parentObject.qjsui.showChannel($defined(this.nicklist), this.parentObject.uiOptions.SHOW_NICKLIST);
 
     this.reflow();
     
@@ -618,6 +680,8 @@ qwebirc.ui.QUI.Window = new Class({
     this.parent();
     
     this.parentObject.tabs.removeChild(this.tab);
+    this.parentObject.tabs.removeChild(this.spaceNode);
+    this.reflow();
   },
   addLine: function(type, line, colourClass) {
     var e = new Element("div");
@@ -656,5 +720,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);
+    }
   }
 });