X-Git-Url: https://jfr.im/git/irc/quakenet/qwebirc.git/blobdiff_plain/4dd199c33768fd3252a714a55f04f306c241aca9..cb9d1c92d4e7e543bad3adefd706ec614007dd1d:/js/ui/frontends/qui.js diff --git a/js/ui/frontends/qui.js b/js/ui/frontends/qui.js index de150f5..948cd2d 100644 --- a/js/ui/frontends/qui.js +++ b/js/ui/frontends/qui.js @@ -14,22 +14,27 @@ 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; @@ -37,12 +42,24 @@ qwebirc.ui.QUI = new Class({ this.tabs.addEvent("mousewheel", 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(); @@ -51,9 +68,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"); @@ -84,27 +105,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; @@ -114,31 +128,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); @@ -146,9 +135,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 == "") @@ -157,6 +155,7 @@ qwebirc.ui.QUI = new Class({ this.resetTabComplete(); this.getActiveWindow().historyExec(inputbox.value); inputbox.value = ""; + inputbox.placeholder = ""; }.bind(this); if(!qwebirc.util.deviceHasKeyboard()) { @@ -200,7 +199,7 @@ qwebirc.ui.QUI = new Class({ resultfn = this.commandhistory.upLine; } else if(e.key == "down") { resultfn = this.commandhistory.downLine; - } else if(e.key == "tab") { + } else if(e.key == "tab" && !e.altKey && !e.ctrlKey && !e.shiftKey) { new Event(e).stop(); this.tabComplete(inputbox); return; @@ -239,6 +238,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); + }); + }); } }); @@ -247,7 +271,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(); @@ -260,20 +284,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) { @@ -285,6 +296,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"); @@ -305,19 +317,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); @@ -326,17 +357,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) { @@ -351,54 +381,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"); @@ -412,10 +448,11 @@ 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", " "); - this.topic.addEvent("click", this.editTopic.bind(this)); + this.topic.addEvent("dblclick", this.editTopic.bind(this)); this.parentObject.qjsui.applyClasses("topic", this.topic); this.prevNick = null; @@ -423,22 +460,23 @@ 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) { + if(type == qwebirc.ui.WINDOW_CHANNEL) this.updateTopic(""); - } else { - this.reflow(); - } - + this.nicksColoured = this.parentObject.uiOptions.NICK_COLOURS; + this.reflow(); + }, + rename: function(name) { + this.tab.replaceChild(document.createTextNode(name), this.tab.firstChild); }, 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!"); + alert("Sorry, you need to be a channel operator to change the topic!"); return; /*}*/ } @@ -479,7 +517,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)); @@ -519,8 +556,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); @@ -581,7 +616,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(); @@ -619,6 +654,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"); @@ -657,5 +694,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); + } } });