this.qjsui.middle.addClass("lines");
this.outerTabs = this.qjsui.top;
- this.__createDropdown();
-
+
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.createInput();
this.reflow();
+
+ /* HACK, in Chrome this should work immediately but doesn't */
+ this.__createDropdownHint.delay(100, this);
},
- __createDropdown: function() {
- var dropdownMenu = new Element("div");
+ __createDropdownMenu: function() {
+ var dropdownMenu = new Element("span");
dropdownMenu.addClass("dropdownmenu");
- var surface = new Element("div");
- surface.addClass("surface");
- dropdownMenu.hide = function(noRemove) {
+
+ dropdownMenu.hide = function() {
dropdownMenu.setStyle("display", "none");
dropdownMenu.visible = false;
- if(!noRemove)
- this.parentElement.removeChild(surface);
+ document.removeEvent("mousedown", hideEvent);
}.bind(this);
- surface.addEvent("click", function() {
- dropdownMenu.hide();
- });
-
- dropdownMenu.hide(true);
+ 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();
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){
+ dropdownMenu.show = function(x) {
new Event(x).stop();
+ this.hideHint();
if(dropdownMenu.visible) {
dropdownMenu.hide();
return;
}
- this.parentElement.appendChild(surface);
-/*
- var left = x.client.x;
- var top = x.client.y;
- */
- /* -1 == border */
- var top = this.tabs.getSize().y - 1;
-
+ var top = this.outerTabs.getSize().y;
+
dropdownMenu.setStyle("left", 0);
- dropdownMenu.setStyle("top", top);
+ 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.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);
- }.delay(3000, this);
- this.parentElement.appendChild(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");
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) {
e.menu = this.createMenu(x.realNick, e);
new Event(x).stop();
}.bind(this));
- e.addEvent("dblclick", function(x) {
- new Event(x).stop();
- this.client.exec("/QUERY " + e.realNick);
- }.bind(this));
e.addEvent("focus", function() { this.blur() }.bind(e));
this.moveMenuClass();
this.parent(type, line, colourClass, e);
},
setHilighted: function(state) {
- laststate = this.hilighted;
+ var laststate = this.hilighted;
this.parent(state);