]> jfr.im git - irc/quakenet/qwebirc.git/blobdiff - js/ui/frontends/qui.js
Fix issue 5 (send button for mobile phones).
[irc/quakenet/qwebirc.git] / js / ui / frontends / qui.js
index 71112a341a4a3c9601c5fd155ef646b502f82a7c..9c10dc54248063d72f951d3ad8466adef2834a4f 100644 (file)
@@ -1,5 +1,5 @@
 qwebirc.ui.QUI = new Class({
-  Extends: qwebirc.ui.NewLoginUI,
+  Extends: qwebirc.ui.RootUI,
   initialize: function(parentElement, theme, options) {
     this.parent(parentElement, qwebirc.ui.QUI.Window, "qui", options);
     this.theme = theme;
@@ -12,14 +12,21 @@ qwebirc.ui.QUI = new Class({
       if($defined(w))
         w.onResize();
     }.bind(this));
-    this.qjsui.top.addClass("tabbar");
+    this.qjsui.top.addClass("outertabbar");
     
     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.outerTabs = this.qjsui.top;
+
+    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.orignicklist = this.nicklist = this.qjsui.right;
@@ -42,26 +49,144 @@ 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);
+  },
+  __createDropdownMenu: function() {
+    var dropdownMenu = new Element("span");
+    dropdownMenu.addClass("dropdownmenu");
+    
+    dropdownMenu.hide = function() {
+      dropdownMenu.setStyle("display", "none");
+      dropdownMenu.visible = false;
+      document.removeEvent("mousedown", hideEvent);
+    }.bind(this);
+    var hideEvent = function() { dropdownMenu.hide(); };
+    
+    dropdownMenu.hide();
+    this.parentElement.appendChild(dropdownMenu);
+    
+    this.UICommands.forEach(function(x) {
+      var text = x[0];
+      var fn = this[x[1] + "Window"].bind(this);
+      var e = new Element("a");
+      e.addEvent("mousedown", function(e) { new Event(e).stop(); });
+      e.addEvent("click", function() {
+        dropdownMenu.hide();
+        fn();
+      });
+      e.set("text", text);
+      dropdownMenu.appendChild(e);
+    }.bind(this));
+    
+    var dropdown = new Element("div");
+    dropdown.addClass("dropdown-tab");
+    dropdown.appendChild(new Element("img", {src: "images/favicon.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);
+      dropdownMenu.setStyle("top", top-1); /* -1 == top border */
+      dropdownMenu.setStyle("display", "inline-block");
+      dropdownMenu.visible = true;
+      
+      document.addEvent("mousedown", hideEvent);
+    }.bind(this);
+    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);
+    
     form.addClass("input");
     
     var inputbox = new Element("input");
     form.appendChild(inputbox);
     this.inputbox = inputbox;
-    
-    form.addEvent("submit", function(e) {
-      new Event(e).stop();
-    
+    this.inputbox.maxLength = 512;
+
+    var sendInput = function() {
       if(inputbox.value == "")
         return;
         
       this.resetTabComplete();
       this.getActiveWindow().historyExec(inputbox.value);
       inputbox.value = "";
-    }.bind(this));
+    }.bind(this);
+
+    if(!qwebirc.util.deviceHasKeyboard()) {
+      inputbox.addClass("mobile-input");
+      var inputButton = new Element("input", {type: "button"});
+      inputButton.addClass("mobile-button");
+      inputButton.addEvent("click", function() {
+        sendInput();
+        inputbox.focus();
+      });
+      inputButton.value = ">";
+      this.input.appendChild(inputButton);
+      var reflowButton = function() {
+        var containerSize = this.input.getSize();
+        var buttonSize = inputButton.getSize();
+        
+        var buttonLeft = containerSize.x - buttonSize.x - 5; /* lovely 5 */
+
+        inputButton.setStyle("left", buttonLeft);
+        inputbox.setStyle("width", buttonLeft - 5);
+        inputButton.setStyle("height", containerSize.y);
+      }.bind(this);
+      this.qjsui.addEvent("reflow", reflowButton);
+    } else {
+      inputbox.addClass("keyboard-input");
+    }
+    
+    form.addEvent("submit", function(e) {
+      new Event(e).stop();
+      sendInput();
+    });
     
     inputbox.addEvent("focus", this.resetTabComplete.bind(this));
     inputbox.addEvent("mousedown", this.resetTabComplete.bind(this));
@@ -189,20 +314,20 @@ qwebirc.ui.QUI.JSUI = new Class({
     var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y);
     var mwidth = (docsize.x - rightsize.x);
 
-    topic.setStyle("top", topsize.y + "px");
+    topic.setStyle("top", topsize.y);
     
-    middle.setStyle("top", (topsize.y + topicsize.y) + "px");
+    middle.setStyle("top", (topsize.y + topicsize.y));
     if(mheight > 0) {
-      middle.setStyle("height", mheight + "px");
-      right.setStyle("height", mheight + "px");
+      middle.setStyle("height", mheight);
+      right.setStyle("height", mheight);
     }
     
     if(mwidth > 0)
-      middle.setStyle("width", mwidth + "px");
-    right.setStyle("top", (topsize.y + topicsize.y) + "px");
-    right.setStyle("left", mwidth + "px");
+      middle.setStyle("width", mwidth);
+    right.setStyle("top", (topsize.y + topicsize.y));
+    right.setStyle("left", mwidth);
     
-    bottom.setStyle("top", (docsize.y - bottomsize.y) + "px");
+    bottom.setStyle("top", (docsize.y - bottomsize.y));
     this.fireEvent("reflow");
   },
   showChannel: function(state) {
@@ -214,6 +339,7 @@ qwebirc.ui.QUI.JSUI = new Class({
     this.topic.setStyle("display", display);
   },
   showInput: function(state) {
+    this.bottom.isVisible = state;
     this.bottom.setStyle("display", state?"block":"none");
   }
 });
@@ -255,7 +381,7 @@ qwebirc.ui.QUI.Window = new Class({
 
         this.close();
         
-        parentObject.inputbox.focus();
+        //parentObject.inputbox.focus();
       }.bind(this);
       
       tabclose.addEvent("click", close);
@@ -288,6 +414,7 @@ qwebirc.ui.QUI.Window = new Class({
       this.topic.addClass("topic");
       this.topic.addClass("tab-invisible");
       this.topic.set("html", " ");
+      this.topic.addEvent("click", this.editTopic.bind(this));
       this.parentObject.qjsui.applyClasses("topic", this.topic);
       
       this.prevNick = null;
@@ -304,6 +431,20 @@ qwebirc.ui.QUI.Window = new Class({
       this.reflow();
     }
   },
+  editTopic: function() {
+    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!");
+        return;
+      /*}*/
+    }
+    var newTopic = prompt("Change topic of " + this.name + " to:", this.topic.topicText);
+    if(newTopic === null)
+      return;
+
+    this.client.exec("/TOPIC " + newTopic);
+  },
   reflow: function() {
     this.parentObject.reflow();
   },
@@ -327,15 +468,19 @@ qwebirc.ui.QUI.Window = new Class({
     parent.appendChild(e);
     e.addClass("menu");
     
+    var nickArray = [nick];
     qwebirc.ui.MENU_ITEMS.forEach(function(x) {
+      if(!x.predicate || x.predicate !== true && !x.predicate.apply(this, nickArray))
+        return;
+      
       var e2 = new Element("a");
       e.appendChild(e2);
-      
+
       e2.href = "#";
-      e2.set("text", "- " + x[0]);
-      
+      e2.set("text", "- " + x.text);
+
       e2.addEvent("focus", function() { this.blur() }.bind(e2));
-      e2.addEvent("click", function(ev) { new Event(ev.stop()); this.menuClick(x[1]); }.bind(this));
+      e2.addEvent("click", function(ev) { new Event(ev.stop()); this.menuClick(x.fn); }.bind(this));
     }.bind(this));
     return e;
   },
@@ -385,12 +530,8 @@ qwebirc.ui.QUI.Window = new Class({
       this.prevNick = e;
       e.addClass("selected");
       this.moveMenuClass();
-      e.menu = this.createMenu(x.realNick, e);
-      new Event(x).stop();
-    }.bind(this));
-    e.addEvent("dblclick", function(x) {
+      e.menu = this.createMenu(e.realNick, e);
       new Event(x).stop();
-      this.client.exec("/QUERY " + e.realNick);
     }.bind(this));
     
     e.addEvent("focus", function() { this.blur() }.bind(e));
@@ -408,8 +549,10 @@ qwebirc.ui.QUI.Window = new Class({
       t.removeChild(t.firstChild);
 
     if(topic) {
+      t.topicText = topic;
       this.parent(topic, t);
     } else {
+      t.topicText = topic;
       var e = new Element("div");
       e.set("text", "(no topic set)");
       e.addClass("emptytopic");
@@ -461,7 +604,7 @@ qwebirc.ui.QUI.Window = new Class({
     this.parent(type, line, colourClass, e);
   },
   setHilighted: function(state) {
-    laststate = this.hilighted;
+    var laststate = this.hilighted;
     
     this.parent(state);