]>
Commit | Line | Data |
---|---|---|
1 | qwebirc.ui.QUI = new Class({ | |
2 | Extends: qwebirc.ui.RootUI, | |
3 | initialize: function(parentElement, theme, options) { | |
4 | this.parent(parentElement, qwebirc.ui.QUI.Window, "qui", options); | |
5 | this.theme = theme; | |
6 | this.parentElement = parentElement; | |
7 | }, | |
8 | postInitialize: function() { | |
9 | this.qjsui = new qwebirc.ui.QUI.JSUI("qwebirc-qui", this.parentElement); | |
10 | this.qjsui.addEvent("reflow", function() { | |
11 | var w = this.getActiveWindow(); | |
12 | if($defined(w)) | |
13 | w.onResize(); | |
14 | }.bind(this)); | |
15 | this.qjsui.top.addClass("outertabbar"); | |
16 | ||
17 | this.qjsui.bottom.addClass("input"); | |
18 | this.qjsui.right.addClass("nicklist"); | |
19 | this.qjsui.topic.addClass("topic"); | |
20 | this.qjsui.middle.addClass("lines"); | |
21 | ||
22 | this.outerTabs = this.qjsui.top; | |
23 | ||
24 | this.tabs = new Element("div"); | |
25 | this.tabs.addClass("tabbar"); | |
26 | ||
27 | this.__createDropdownMenu(); | |
28 | ||
29 | this.outerTabs.appendChild(this.tabs); | |
30 | this.origtopic = this.topic = this.qjsui.topic; | |
31 | this.origlines = this.lines = this.qjsui.middle; | |
32 | this.orignicklist = this.nicklist = this.qjsui.right; | |
33 | ||
34 | this.input = this.qjsui.bottom; | |
35 | this.reflow = this.qjsui.reflow.bind(this.qjsui); | |
36 | ||
37 | this.tabs.addEvent("mousewheel", function(x) { | |
38 | var event = new Event(x); | |
39 | ||
40 | /* up */ | |
41 | if(event.wheel > 0) { | |
42 | this.nextWindow(); | |
43 | } else if(event.wheel < 0) { | |
44 | /* down */ | |
45 | this.prevWindow(); | |
46 | } | |
47 | event.stop(); | |
48 | }.bind(this)); | |
49 | ||
50 | this.createInput(); | |
51 | this.reflow(); | |
52 | this.reflow.delay(100); /* Konqueror fix */ | |
53 | ||
54 | /* HACK, in Chrome this should work immediately but doesn't */ | |
55 | this.__createDropdownHint.delay(100, this); | |
56 | }, | |
57 | __createDropdownMenu: function() { | |
58 | var dropdownMenu = new Element("span"); | |
59 | dropdownMenu.addClass("dropdownmenu"); | |
60 | ||
61 | dropdownMenu.hide = function() { | |
62 | dropdownMenu.setStyle("display", "none"); | |
63 | dropdownMenu.visible = false; | |
64 | document.removeEvent("mousedown", hideEvent); | |
65 | }.bind(this); | |
66 | var hideEvent = function() { dropdownMenu.hide(); }; | |
67 | ||
68 | dropdownMenu.hide(); | |
69 | this.parentElement.appendChild(dropdownMenu); | |
70 | ||
71 | this.UICommands.forEach(function(x) { | |
72 | var text = x[0]; | |
73 | var fn = this[x[1] + "Window"].bind(this); | |
74 | var e = new Element("a"); | |
75 | e.addEvent("mousedown", function(e) { new Event(e).stop(); }); | |
76 | e.addEvent("click", function() { | |
77 | dropdownMenu.hide(); | |
78 | fn(); | |
79 | }); | |
80 | e.set("text", text); | |
81 | dropdownMenu.appendChild(e); | |
82 | }.bind(this)); | |
83 | ||
84 | var dropdown = new Element("div"); | |
85 | dropdown.addClass("dropdown-tab"); | |
86 | dropdown.appendChild(new Element("img", {src: "images/favicon.png", title: "menu", alt: "menu"})); | |
87 | dropdown.setStyle("opacity", 1); | |
88 | ||
89 | var dropdownEffect = new Fx.Tween(dropdown, {duration: "long", property: "opacity", link: "chain"}); | |
90 | dropdownEffect.start(0.25); | |
91 | dropdownEffect.start(1); | |
92 | dropdownEffect.start(0.33); | |
93 | dropdownEffect.start(1); | |
94 | ||
95 | this.outerTabs.appendChild(dropdown); | |
96 | dropdownMenu.show = function(x) { | |
97 | new Event(x).stop(); | |
98 | this.hideHint(); | |
99 | ||
100 | if(dropdownMenu.visible) { | |
101 | dropdownMenu.hide(); | |
102 | return; | |
103 | } | |
104 | var top = this.outerTabs.getSize().y; | |
105 | ||
106 | dropdownMenu.setStyle("left", 0); | |
107 | dropdownMenu.setStyle("top", top-1); /* -1 == top border */ | |
108 | dropdownMenu.setStyle("display", "inline-block"); | |
109 | dropdownMenu.visible = true; | |
110 | ||
111 | document.addEvent("mousedown", hideEvent); | |
112 | }.bind(this); | |
113 | dropdown.addEvent("mousedown", function(e) { new Event(e).stop(); }); | |
114 | dropdown.addEvent("click", dropdownMenu.show); | |
115 | }, | |
116 | __createDropdownHint: function() { | |
117 | var dropdownhint = new Element("div"); | |
118 | dropdownhint.addClass("dropdownhint"); | |
119 | dropdownhint.set("text", "Click the icon for the main menu."); | |
120 | dropdownhint.setStyle("top", this.outerTabs.getSize().y + 5); | |
121 | ||
122 | this.parentElement.appendChild(dropdownhint); | |
123 | new Fx.Morph(dropdownhint, {duration: "normal", transition: Fx.Transitions.Sine.easeOut}).start({left: [900, 5]}); | |
124 | ||
125 | var hider = function() { | |
126 | new Fx.Morph(dropdownhint, {duration: "long"}).start({left: [5, -900]}); | |
127 | }.delay(4000, this); | |
128 | ||
129 | var hider2 = function() { | |
130 | if(dropdownhint.hidden) | |
131 | return; | |
132 | this.parentElement.removeChild(dropdownhint); | |
133 | dropdownhint.hidden = 1; | |
134 | }.bind(this); | |
135 | hider2.delay(4000); | |
136 | this.hideHint = hider2; | |
137 | ||
138 | document.addEvent("mousedown", hider2); | |
139 | document.addEvent("keypress", hider2); | |
140 | ||
141 | }, | |
142 | createInput: function() { | |
143 | var form = new Element("form"); | |
144 | this.input.appendChild(form); | |
145 | form.addClass("input"); | |
146 | ||
147 | var inputbox = new Element("input"); | |
148 | form.appendChild(inputbox); | |
149 | this.inputbox = inputbox; | |
150 | this.inputbox.maxLength = 512; | |
151 | ||
152 | form.addEvent("submit", function(e) { | |
153 | new Event(e).stop(); | |
154 | ||
155 | if(inputbox.value == "") | |
156 | return; | |
157 | ||
158 | this.resetTabComplete(); | |
159 | this.getActiveWindow().historyExec(inputbox.value); | |
160 | inputbox.value = ""; | |
161 | }.bind(this)); | |
162 | ||
163 | inputbox.addEvent("focus", this.resetTabComplete.bind(this)); | |
164 | inputbox.addEvent("mousedown", this.resetTabComplete.bind(this)); | |
165 | ||
166 | inputbox.addEvent("keydown", function(e) { | |
167 | var resultfn; | |
168 | var cvalue = inputbox.value; | |
169 | ||
170 | if(e.key == "up") { | |
171 | resultfn = this.commandhistory.upLine; | |
172 | } else if(e.key == "down") { | |
173 | resultfn = this.commandhistory.downLine; | |
174 | } else if(e.key == "tab") { | |
175 | new Event(e).stop(); | |
176 | this.tabComplete(inputbox); | |
177 | return; | |
178 | } else { | |
179 | /* ideally alt and other keys wouldn't break this */ | |
180 | this.resetTabComplete(); | |
181 | return; | |
182 | } | |
183 | ||
184 | this.resetTabComplete(); | |
185 | if((cvalue != "") && (this.lastcvalue != cvalue)) | |
186 | this.commandhistory.addLine(cvalue, true); | |
187 | ||
188 | var result = resultfn.bind(this.commandhistory)(); | |
189 | ||
190 | new Event(e).stop(); | |
191 | if(!result) | |
192 | result = ""; | |
193 | this.lastcvalue = result; | |
194 | ||
195 | inputbox.value = result; | |
196 | qwebirc.util.setAtEnd(inputbox); | |
197 | }.bind(this)); | |
198 | }, | |
199 | setLines: function(lines) { | |
200 | this.lines.parentNode.replaceChild(lines, this.lines); | |
201 | this.qjsui.middle = this.lines = lines; | |
202 | }, | |
203 | setChannelItems: function(nicklist, topic) { | |
204 | if(!$defined(nicklist)) { | |
205 | nicklist = this.orignicklist; | |
206 | topic = this.origtopic; | |
207 | } | |
208 | this.nicklist.parentNode.replaceChild(nicklist, this.nicklist); | |
209 | this.qjsui.right = this.nicklist = nicklist; | |
210 | ||
211 | this.topic.parentNode.replaceChild(topic, this.topic); | |
212 | this.qjsui.topic = this.topic = topic; | |
213 | } | |
214 | }); | |
215 | ||
216 | qwebirc.ui.QUI.JSUI = new Class({ | |
217 | Implements: [Events], | |
218 | initialize: function(class_, parent, sizer) { | |
219 | this.parent = parent; | |
220 | this.sizer = $defined(sizer)?sizer:parent; | |
221 | ||
222 | this.class_ = class_; | |
223 | this.create(); | |
224 | ||
225 | this.reflowevent = null; | |
226 | ||
227 | window.addEvent("resize", function() { | |
228 | this.reflow(100); | |
229 | }.bind(this)); | |
230 | }, | |
231 | applyClasses: function(pos, l) { | |
232 | l.addClass("dynamicpanel"); | |
233 | l.addClass(this.class_); | |
234 | ||
235 | if(pos == "middle") { | |
236 | l.addClass("leftboundpanel"); | |
237 | } else if(pos == "top") { | |
238 | l.addClass("topboundpanel"); | |
239 | l.addClass("widepanel"); | |
240 | } else if(pos == "topic") { | |
241 | l.addClass("widepanel"); | |
242 | } else if(pos == "right") { | |
243 | l.addClass("rightboundpanel"); | |
244 | } else if(pos == "bottom") { | |
245 | l.addClass("bottomboundpanel"); | |
246 | l.addClass("widepanel"); | |
247 | } | |
248 | }, | |
249 | create: function() { | |
250 | var XE = function(pos) { | |
251 | var element = new Element("div"); | |
252 | this.applyClasses(pos, element); | |
253 | ||
254 | this.parent.appendChild(element); | |
255 | return element; | |
256 | }.bind(this); | |
257 | ||
258 | this.top = XE("top"); | |
259 | this.topic = XE("topic"); | |
260 | this.middle = XE("middle"); | |
261 | this.right = XE("right"); | |
262 | this.bottom = XE("bottom"); | |
263 | }, | |
264 | reflow: function(delay) { | |
265 | if(!delay) | |
266 | delay = 1; | |
267 | ||
268 | if(this.reflowevent) | |
269 | $clear(this.reflowevent); | |
270 | this.__reflow(); | |
271 | this.reflowevent = this.__reflow.delay(delay, this); | |
272 | }, | |
273 | __reflow: function() { | |
274 | var bottom = this.bottom; | |
275 | var middle = this.middle; | |
276 | var right = this.right; | |
277 | var topic = this.topic; | |
278 | var top = this.top; | |
279 | ||
280 | var topicsize = topic.getSize(); | |
281 | var topsize = top.getSize(); | |
282 | var rightsize = right.getSize(); | |
283 | var bottomsize = bottom.getSize(); | |
284 | var docsize = this.sizer.getSize(); | |
285 | ||
286 | var mheight = (docsize.y - topsize.y - bottomsize.y - topicsize.y); | |
287 | var mwidth = (docsize.x - rightsize.x); | |
288 | ||
289 | topic.setStyle("top", topsize.y); | |
290 | ||
291 | middle.setStyle("top", (topsize.y + topicsize.y)); | |
292 | if(mheight > 0) { | |
293 | middle.setStyle("height", mheight); | |
294 | right.setStyle("height", mheight); | |
295 | } | |
296 | ||
297 | if(mwidth > 0) | |
298 | middle.setStyle("width", mwidth); | |
299 | right.setStyle("top", (topsize.y + topicsize.y)); | |
300 | right.setStyle("left", mwidth); | |
301 | ||
302 | bottom.setStyle("top", (docsize.y - bottomsize.y)); | |
303 | this.fireEvent("reflow"); | |
304 | }, | |
305 | showChannel: function(state) { | |
306 | var display = "none"; | |
307 | if(state) | |
308 | display = "block"; | |
309 | ||
310 | this.right.setStyle("display", display); | |
311 | this.topic.setStyle("display", display); | |
312 | }, | |
313 | showInput: function(state) { | |
314 | this.bottom.isVisible = state; | |
315 | this.bottom.setStyle("display", state?"block":"none"); | |
316 | } | |
317 | }); | |
318 | ||
319 | qwebirc.ui.QUI.Window = new Class({ | |
320 | Extends: qwebirc.ui.Window, | |
321 | ||
322 | initialize: function(parentObject, client, type, name, identifier) { | |
323 | this.parent(parentObject, client, type, name, identifier); | |
324 | ||
325 | this.tab = new Element("a", {"href": "#"}); | |
326 | this.tab.addClass("tab"); | |
327 | this.tab.addEvent("focus", function() { this.blur() }.bind(this.tab));; | |
328 | ||
329 | parentObject.tabs.appendChild(this.tab); | |
330 | ||
331 | this.tab.appendText(name); | |
332 | this.tab.addEvent("click", function(e) { | |
333 | new Event(e).stop(); | |
334 | ||
335 | if(this.closed) | |
336 | return; | |
337 | ||
338 | parentObject.selectWindow(this); | |
339 | }.bind(this)); | |
340 | ||
341 | if(type != qwebirc.ui.WINDOW_STATUS && type != qwebirc.ui.WINDOW_CONNECT) { | |
342 | var tabclose = new Element("span"); | |
343 | tabclose.set("text", "X"); | |
344 | tabclose.addClass("tabclose"); | |
345 | var close = function(e) { | |
346 | new Event(e).stop(); | |
347 | ||
348 | if(this.closed) | |
349 | return; | |
350 | ||
351 | if(type == qwebirc.ui.WINDOW_CHANNEL) | |
352 | this.client.exec("/PART " + name); | |
353 | ||
354 | this.close(); | |
355 | ||
356 | //parentObject.inputbox.focus(); | |
357 | }.bind(this); | |
358 | ||
359 | tabclose.addEvent("click", close); | |
360 | this.tab.addEvent("mouseup", function(e) { | |
361 | var button = 1; | |
362 | ||
363 | if(Browser.Engine.trident) | |
364 | button = 4; | |
365 | ||
366 | if(e.event.button == button) | |
367 | close(e); | |
368 | }.bind(this)); | |
369 | ||
370 | this.tab.appendChild(tabclose); | |
371 | } | |
372 | ||
373 | this.lines = new Element("div"); | |
374 | this.parentObject.qjsui.applyClasses("middle", this.lines); | |
375 | this.lines.addClass("lines"); | |
376 | if(type != qwebirc.ui.WINDOW_CUSTOM && type != qwebirc.ui.WINDOW_CONNECT) | |
377 | this.lines.addClass("ircwindow"); | |
378 | ||
379 | this.lines.addEvent("scroll", function() { | |
380 | this.scrolleddown = this.scrolledDown(); | |
381 | this.scrollpos = this.getScrollParent().getScroll(); | |
382 | }.bind(this)); | |
383 | ||
384 | if(type == qwebirc.ui.WINDOW_CHANNEL) { | |
385 | this.topic = new Element("div"); | |
386 | this.topic.addClass("topic"); | |
387 | this.topic.addClass("tab-invisible"); | |
388 | this.topic.set("html", " "); | |
389 | this.topic.addEvent("click", this.editTopic.bind(this)); | |
390 | this.parentObject.qjsui.applyClasses("topic", this.topic); | |
391 | ||
392 | this.prevNick = null; | |
393 | this.nicklist = new Element("div"); | |
394 | this.nicklist.addClass("nicklist"); | |
395 | this.nicklist.addClass("tab-invisible"); | |
396 | this.nicklist.addEvent("click", this.removePrevMenu.bind(this)); | |
397 | this.parentObject.qjsui.applyClasses("nicklist", this.nicklist); | |
398 | } | |
399 | ||
400 | if(type == qwebirc.ui.WINDOW_CHANNEL) { | |
401 | this.updateTopic(""); | |
402 | } else { | |
403 | this.reflow(); | |
404 | } | |
405 | }, | |
406 | editTopic: function() { | |
407 | if(!this.client.nickOnChanHasPrefix(this.client.nickname, this.name, "@")) { | |
408 | /* var cmodes = this.client.getChannelModes(channel); | |
409 | if(cmodes.indexOf("t")) {*/ | |
410 | alert("Sorry, you need to be opped to change the topic!"); | |
411 | return; | |
412 | /*}*/ | |
413 | } | |
414 | var newTopic = prompt("Change topic of " + this.name + " to:", this.topic.topicText); | |
415 | if(newTopic === null) | |
416 | return; | |
417 | ||
418 | this.client.exec("/TOPIC " + newTopic); | |
419 | }, | |
420 | reflow: function() { | |
421 | this.parentObject.reflow(); | |
422 | }, | |
423 | onResize: function() { | |
424 | if(this.scrolleddown) { | |
425 | if(Browser.Engine.trident) { | |
426 | this.scrollToBottom.delay(5, this); | |
427 | } else { | |
428 | this.scrollToBottom(); | |
429 | } | |
430 | } else if($defined(this.scrollpos)) { | |
431 | if(Browser.Engine.trident) { | |
432 | this.getScrollParent().scrollTo(this.scrollpos.x, this.scrollpos.y); | |
433 | } else { | |
434 | this.getScrollParent().scrollTo.delay(5, this, [this.scrollpos.x, this.scrollpos.y]); | |
435 | } | |
436 | } | |
437 | }, | |
438 | createMenu: function(nick, parent) { | |
439 | var e = new Element("div"); | |
440 | parent.appendChild(e); | |
441 | e.addClass("menu"); | |
442 | ||
443 | var nickArray = [nick]; | |
444 | qwebirc.ui.MENU_ITEMS.forEach(function(x) { | |
445 | if(!x.predicate || x.predicate !== true && !x.predicate.apply(this, nickArray)) | |
446 | return; | |
447 | ||
448 | var e2 = new Element("a"); | |
449 | e.appendChild(e2); | |
450 | ||
451 | e2.href = "#"; | |
452 | e2.set("text", "- " + x.text); | |
453 | ||
454 | e2.addEvent("focus", function() { this.blur() }.bind(e2)); | |
455 | e2.addEvent("click", function(ev) { new Event(ev.stop()); this.menuClick(x.fn); }.bind(this)); | |
456 | }.bind(this)); | |
457 | return e; | |
458 | }, | |
459 | menuClick: function(fn) { | |
460 | /* | |
461 | this.prevNick.removeChild(this.prevNick.menu); | |
462 | this.prevNick.menu = null; | |
463 | */ | |
464 | fn.bind(this)(this.prevNick.realNick); | |
465 | this.removePrevMenu(); | |
466 | }, | |
467 | moveMenuClass: function() { | |
468 | if(!this.prevNick) | |
469 | return; | |
470 | if(this.nicklist.firstChild == this.prevNick) { | |
471 | this.prevNick.removeClass("selected-middle"); | |
472 | } else { | |
473 | this.prevNick.addClass("selected-middle"); | |
474 | } | |
475 | }, | |
476 | removePrevMenu: function() { | |
477 | if(!this.prevNick) | |
478 | return; | |
479 | ||
480 | this.prevNick.removeClass("selected"); | |
481 | this.prevNick.removeClass("selected-middle"); | |
482 | if(this.prevNick.menu) | |
483 | this.prevNick.removeChild(this.prevNick.menu); | |
484 | this.prevNick = null; | |
485 | }, | |
486 | nickListAdd: function(nick, position) { | |
487 | var e = new Element("a"); | |
488 | qwebirc.ui.insertAt(position, this.nicklist, e); | |
489 | ||
490 | e.href = "#"; | |
491 | e.appendChild(document.createTextNode(nick)); | |
492 | ||
493 | e.realNick = this.client.stripPrefix(nick); | |
494 | ||
495 | e.addEvent("click", function(x) { | |
496 | if(this.prevNick == e) { | |
497 | this.removePrevMenu(); | |
498 | return; | |
499 | } | |
500 | ||
501 | this.removePrevMenu(); | |
502 | this.prevNick = e; | |
503 | e.addClass("selected"); | |
504 | this.moveMenuClass(); | |
505 | e.menu = this.createMenu(e.realNick, e); | |
506 | new Event(x).stop(); | |
507 | }.bind(this)); | |
508 | ||
509 | e.addEvent("focus", function() { this.blur() }.bind(e)); | |
510 | this.moveMenuClass(); | |
511 | return e; | |
512 | }, | |
513 | nickListRemove: function(nick, stored) { | |
514 | this.nicklist.removeChild(stored); | |
515 | this.moveMenuClass(); | |
516 | }, | |
517 | updateTopic: function(topic) { | |
518 | var t = this.topic; | |
519 | ||
520 | while(t.firstChild) | |
521 | t.removeChild(t.firstChild); | |
522 | ||
523 | if(topic) { | |
524 | t.topicText = topic; | |
525 | this.parent(topic, t); | |
526 | } else { | |
527 | t.topicText = topic; | |
528 | var e = new Element("div"); | |
529 | e.set("text", "(no topic set)"); | |
530 | e.addClass("emptytopic"); | |
531 | t.appendChild(e); | |
532 | } | |
533 | this.reflow(); | |
534 | }, | |
535 | select: function() { | |
536 | var inputVisible = this.type != qwebirc.ui.WINDOW_CONNECT && this.type != qwebirc.ui.WINDOW_CUSTOM; | |
537 | ||
538 | this.tab.removeClass("tab-unselected"); | |
539 | this.tab.addClass("tab-selected"); | |
540 | ||
541 | this.parentObject.setLines(this.lines); | |
542 | this.parentObject.setChannelItems(this.nicklist, this.topic); | |
543 | this.parentObject.qjsui.showInput(inputVisible); | |
544 | this.parentObject.qjsui.showChannel($defined(this.nicklist)); | |
545 | ||
546 | this.reflow(); | |
547 | ||
548 | this.parent(); | |
549 | ||
550 | if(inputVisible) | |
551 | this.parentObject.inputbox.focus(); | |
552 | }, | |
553 | deselect: function() { | |
554 | this.parent(); | |
555 | ||
556 | this.tab.removeClass("tab-selected"); | |
557 | this.tab.addClass("tab-unselected"); | |
558 | }, | |
559 | close: function() { | |
560 | this.parent(); | |
561 | ||
562 | this.parentObject.tabs.removeChild(this.tab); | |
563 | }, | |
564 | addLine: function(type, line, colourClass) { | |
565 | var e = new Element("div"); | |
566 | ||
567 | if(colourClass) { | |
568 | e.addClass(colourClass); | |
569 | } else if(this.lastcolour) { | |
570 | e.addClass("linestyle1"); | |
571 | } else { | |
572 | e.addClass("linestyle2"); | |
573 | } | |
574 | this.lastcolour = !this.lastcolour; | |
575 | ||
576 | this.parent(type, line, colourClass, e); | |
577 | }, | |
578 | setHilighted: function(state) { | |
579 | var laststate = this.hilighted; | |
580 | ||
581 | this.parent(state); | |
582 | ||
583 | if(state == laststate) | |
584 | return; | |
585 | ||
586 | this.tab.removeClass("tab-hilight-activity"); | |
587 | this.tab.removeClass("tab-hilight-us"); | |
588 | this.tab.removeClass("tab-hilight-speech"); | |
589 | ||
590 | switch(this.hilighted) { | |
591 | case qwebirc.ui.HILIGHT_US: | |
592 | this.tab.addClass("tab-hilight-us"); | |
593 | break; | |
594 | case qwebirc.ui.HILIGHT_SPEECH: | |
595 | this.tab.addClass("tab-hilight-speech"); | |
596 | break; | |
597 | case qwebirc.ui.HILIGHT_ACTIVITY: | |
598 | this.tab.addClass("tab-hilight-activity"); | |
599 | break; | |
600 | } | |
601 | } | |
602 | }); |