]> jfr.im git - irc/quakenet/qwebirc.git/blobdiff - static/js/ui/uglyui.js
Refactor entire UI, and CommandParser.
[irc/quakenet/qwebirc.git] / static / js / ui / uglyui.js
index 33eb505682665915023f09da37e0b73d2d1be91a..76274bd03344895e303abe4e25d383d6f7105809 100644 (file)
-function UglyUI(parent, theme) {\r
-  var self = this;\r
-  var active;\r
+var UglyUIWindow = new Class({\r
+  Extends: UIWindow,\r
   \r
-  var tabs = new Element("div", {"styles": { "border": "1px solid black", "padding": "4px", "font-family": "Lucida Console" } });\r
-  parent.appendChild(tabs);\r
-  var tabhash = {};\r
-  \r
-  var window = new Element("div", {"styles": { "border": "1px solid black", "margin": "2px 0px 0px 0px", "height": "480px" } });\r
-  parent.appendChild(window);\r
-  \r
-  var form = new Element("form");\r
-  var inputbox = new Element("input", {"styles": { "width": "400px", "border": "1px solid black", "margin": "2px 0px 0px 0px"} });\r
-  \r
-  form.addEvent("submit", function(e) {\r
-    new Event(e).stop();\r
-    \r
-    self.send(inputbox.value);\r
-    inputbox.value = "";\r
-  });\r
-  parent.appendChild(form);  \r
-  form.appendChild(inputbox);\r
-  inputbox.focus();\r
-\r
-  this.newWindow = function(windowname, ischannel, displayname) {\r
-    var o = tabhash[windowname];\r
-    if(o)\r
-      return o;\r
-      \r
-    var container = new Element("div", { "styles": { "display": "none", "font-family": "Lucida Console" } });\r
-    window.appendChild(container);\r
-    \r
-    var nicklist;\r
-    var topic;\r
-    \r
-    if(ischannel) {\r
-      nicklist = new Element("div", {"styles": { "border-left": "1px solid black", "width": "125px", "float": "right", "height": "480px", "clear": "both", "overflow": "auto", "background": "white"} });\r
-      container.appendChild(nicklist);\r
-    }\r
-      \r
-    var x = new Element("div", {"styles": { "height": "480px" }});\r
-    container.appendChild(x);\r
-\r
-    if(ischannel) {\r
-      topic = new Element("div", {"styles": { "background": "#fef", "height": "20px" } });\r
-      x.appendChild(topic);      \r
+  initialize: function(parentObject, client, type, name) {\r
+    this.parent(parentObject, client, type, name);\r
+        \r
+    this.outerContainer = new Element("div", { "styles": { "display": "none", "font-family": "Lucida Console" } });\r
+    parentObject.container.appendChild(this.outerContainer);\r
+    \r
+    if(type == WINDOW_CHANNEL) {\r
+      this.nicklist = new Element("div", {"styles": { "border-left": "1px solid black", "width": "125px", "float": "right", "height": "480px", "clear": "both", "overflow": "auto", "background": "white"} });\r
+      this.outerContainer.appendChild(this.nicklist);\r
     }\r
     \r
-    var e = new Element("div", {"styles": { "height": "460px", "overflow": "auto", "word-wrap": "break-word" }});\r
-    x.appendChild(e);\r
-\r
-    var tab = new Element("span", {"styles": { "border": "1px black solid", "padding": "2px", "cursor": "default", "margin-right": "2px", "background": "#eee", "clear": "both" } });\r
-    if(displayname) {\r
-      tab.appendText(displayname);\r
-    } else {\r
-      tab.appendText(windowname);\r
+    var innerContainer = new Element("div", {"styles": { "height": "480px" }});\r
+    this.outerContainer.appendChild(innerContainer);\r
+    \r
+    if(type == WINDOW_CHANNEL) {\r
+      this.topic = new Element("div", {"styles": { "background": "#fef", "height": "20px" } });\r
+      innerContainer.appendChild(this.topic);\r
     }\r
-    tab.addEvent("click", function() {\r
-      self.selectTab(windowname);\r
-    });\r
-    tabs.appendChild(tab);\r
     \r
-    if(windowname != "") {\r
-      var tabclose = new Element("span", {"styles": { "border": "1px black solid", "margin-left": "5px", "padding": "2px", "font-size": "0.5em" } });\r
-      tabclose.addEvent("click", function() {\r
-        if(ischannel)\r
-          self.send("/PART " + windowname);\r
+    this.lines = new Element("div", {"styles": { "height": "460px", "overflow": "auto", "word-wrap": "break-word" }});\r
+    innerContainer.appendChild(this.lines);\r
+    \r
+    this.tab = new Element("span", {"styles": { "border": "1px black solid", "padding": "2px", "cursor": "default", "margin-right": "2px", "background": "#eee", "clear": "both" } });\r
+    this.tab.appendText(name);\r
+    this.tab.addEvent("click", function() {\r
+      parentObject.selectWindow(this);\r
+    }.bind(this));\r
+\r
+    parentObject.tabs.appendChild(this.tab);\r
+    \r
+    if(type != WINDOW_STATUS) {\r
+      tabclose = new Element("span", {"styles": { "border": "1px black solid", "margin-left": "5px", "padding": "2px", "font-size": "0.5em" } });\r
+      tabclose.addEvent("click", function(e) {\r
+        new Event(e).stop();\r
+        \r
+        if(type == WINDOW_CHANNEL)\r
+          this.client.dispatch("/PART " + name);\r
 \r
-        self.closeWindow(windowname);\r
-      });\r
+        this.close();\r
+      }.bind(this));\r
       tabclose.set("text", "X");\r
-      tab.appendChild(tabclose);\r
+      this.tab.appendChild(tabclose);\r
     }\r
-    tabhash[windowname] = { "name": windowname, "container": container, "tab": tab, "element": e, "lastcolour": false, "nicklist": nicklist, "topic": topic, "ischannel": ischannel };\r
-    \r
-    return tabhash[windowname];\r
-  }\r
-  \r
-  this.getWindow = function(windowname) {\r
-    return tabhash[windowname];\r
-  }\r
-  \r
-  this.updateNickList = function(windowname, nicks) {\r
-    var w = tabhash[windowname];\r
-    if(!w)\r
-      return;\r
-    var n = w.nicklist;\r
+  },\r
+  updateNickList: function(nicks) {\r
+    this.parent(nicks);\r
     \r
+    var n = this.nicklist;\r
     while(n.firstChild)\r
       n.removeChild(n.firstChild);\r
 \r
     forEach(nicks, function(nick) {\r
-      var e = document.createElement("div");\r
+      var e = new Element("div");\r
       n.appendChild(e);\r
       e.appendChild(document.createTextNode(nick));\r
     });\r
-  }\r
-  \r
-  this.updateTopic = function(windowname, topic) {\r
-    var w = tabhash[windowname];\r
-    if(!w)\r
-      return;\r
-      \r
-    var t = w.topic;\r
+  },\r
+  updateTopic: function(topic) {\r
+    this.parent(topic);\r
+    \r
+    var t = this.topic;\r
     \r
     while(t.firstChild)\r
       t.removeChild(t.firstChild);\r
 \r
     colourise(topic, t);\r
-  }\r
-  \r
-  this.selectTab = function(windowname) {\r
-    var w = tabhash[windowname];\r
-    if(!w)\r
-      return;\r
-      \r
-    for(var i in tabhash) {\r
-      var o = tabhash[i];\r
-      o.container.setStyle("display", "none");\r
-      o.tab.setStyle("background", "#eee");\r
-    }\r
-    \r
-    w.container.setStyle("display", "block");\r
-    w.tab.setStyle("background", "#dff");\r
-    w.tab.setStyle("color", "");\r
-    self.active = windowname;\r
-  }\r
-  \r
-  this.newLine = function(windowname, type, line, colour) {\r
-    var window = tabhash[windowname];\r
-    if(!window) {\r
-      if(windowname == false) {\r
-        windowname = self.active;\r
-        window = tabhash[self.active];\r
-      } else {\r
-        window = tabhash[""];\r
-        windowname = "";\r
-      }\r
-    }\r
+  },\r
+  select: function() {\r
+    this.parent();\r
+    \r
+    this.outerContainer.setStyle("display", "block");\r
+    this.tab.setStyle("background", "#dff");\r
+    this.tab.setStyle("color", "");\r
+  },\r
+  deselect: function() {\r
+    this.parent();\r
+    \r
+    this.outerContainer.setStyle("display", "none");\r
+    this.tab.setStyle("background", "#eee");\r
+  },\r
+  close: function() {\r
+    this.parent();\r
+    \r
+    this.parentObject.container.removeChild(this.outerContainer);\r
+    this.parentObject.tabs.removeChild(this.tab);\r
+  },\r
+  addLine: function(type, line, colour) {\r
+    this.parent(type, line, colour);\r
     \r
-    var wx = window;\r
-    window = window.element;\r
     var c;\r
     if(colour) {\r
       c = colour;\r
-    } else if(wx.lastcolour) {\r
+    } else if(this.lastcolour) {\r
       c = "#efefef";\r
     } else {\r
       c = "#eeffff";\r
@@ -151,43 +101,40 @@ function UglyUI(parent, theme) {
     \r
     var e = new Element("div", { "styles": { "background": c } });\r
     if(type)\r
-      line = theme.message(type, line);\r
+      line = this.parentObject.theme.message(type, line);\r
     \r
     colourise(timestamp() + " " + line, e);\r
+    this.lines.appendChild(e);\r
     \r
-    wx.lastcolour = !wx.lastcolour;\r
-\r
-    var prev = window.getScroll();\r
-    var prevbottom = window.getScrollSize().y;\r
-    var prevsize = window.getSize();\r
-    window.appendChild(e);\r
-    \r
-    if(prev.y + prevsize.y == prevbottom)\r
-      window.scrollTo(prev.x, window.getScrollSize().y);\r
-      \r
-    if(windowname != self.active)\r
-      wx.tab.setStyle("color", "red");\r
-  }\r
-  \r
-  this.getActiveWindow = function() {\r
-    return tabhash[self.active];\r
+    this.lastcolour = !this.lastcolour;\r
   }\r
-  \r
-  this.closeWindow = function(windowname) {\r
-    var w = tabhash[windowname];\r
-    if(!w)\r
-      return;\r
+});\r
+\r
+var UglyUI = new Class({\r
+  Extends: UI,\r
+  initialize: function(parentElement, theme) {\r
+    this.parent(UglyUIWindow);\r
     \r
-    window.removeChild(w.container);\r
-    tabs.removeChild(w.tab);\r
+    this.parentElement = parentElement;\r
+    this.theme = theme;\r
     \r
-    if(self.active == windowname)\r
-      self.selectTab("");\r
+    this.tabs = new Element("div", {"styles": { "border": "1px solid black", "padding": "4px", "font-family": "Lucida Console" } });\r
+    parentElement.appendChild(this.tabs);\r
     \r
-    delete tabhash[windowname];\r
-  }\r
+    this.container = new Element("div", {"styles": { "border": "1px solid black", "margin": "2px 0px 0px 0px", "height": "480px" } });\r
+    parentElement.appendChild(this.container);\r
   \r
-  this.errorMessage = function(message) {\r
-    self.newLine(false, "", message, "red");\r
-  }\r
-}\r
+    var form = new Element("form");\r
+    var inputbox = new Element("input", {"styles": { "width": "400px", "border": "1px solid black", "margin": "2px 0px 0px 0px"} });\r
+  \r
+    form.addEvent("submit", function(e) {\r
+      new Event(e).stop();\r
+    \r
+      this.getActiveWindow().client.dispatch(inputbox.value);\r
+      inputbox.value = "";\r
+    }.bind(this));\r
+    parentElement.appendChild(form);  \r
+    form.appendChild(inputbox);\r
+    inputbox.focus();\r
+  },\r
+});
\ No newline at end of file