]> jfr.im git - irc/quakenet/qwebirc.git/commitdiff
Rewrite SWMUI, now with IE6/7 support, auto-scrolling is broken though, extra scrollb...
authorChris Porter <redacted>
Sat, 12 Jul 2008 13:47:34 +0000 (14:47 +0100)
committerChris Porter <redacted>
Sat, 12 Jul 2008 13:47:34 +0000 (14:47 +0100)
js/ui/swmlayout.js
js/ui/swmui.js
static/css/swmui.css
static/swmui.html
static/swmuidebug.html
static/uglyui.html
static/uglyuidebug.html

index 17a0e319b11d5d3ba58b40db96c50afe3db89ff6..dae0b0187395cd871c604d226084ae2cc7e122a7 100644 (file)
@@ -4,22 +4,160 @@ var SWM_ANCHOR_BOTTOM = 0x02;
 var SWM_ANCHOR_LEFT =   0x04;
 var SWM_ANCHOR_RIGHT =  0x08;
 
-var SWMPanel = new Class({
-  initialize: function(parent, hidden) {
-    this.parent = parent;
+var SWMContainer = new Class({
+  initialize: function(parentElement) {
+    this.parentElement = parentElement;
+  },
+  getInnerSize: function() {
+//    return {x: this.element.clientWidth, y: this.element.clientHeight};
+    return this.element.getSize();
+  },
+  getOuterSize: function() {
+    return this.element.getSize();
+  },
+  appendChild: function(element) {
+    this.element.appendChild(element);
+  },
+  removeChild: function(element) {
+    this.element.removeChild(element);
+  },
+  setStyle: function(style, value) {
+    this.element.setStyle(setstyle, value);
+  },
+  removeAllChildren: function(element) {
+    while(this.element.firstChild)
+      this.removeChild(this.element.firstChild);
+  },
+  setSize: function(top, left, bottom, right) {
+    var data = {};
+
+    var outer = this.getOuterSize();
+    var inner = this.getInnerSize();
+    var p = this.parentElement.getInnerSize();
+
+    if(top != undefined && bottom != undefined) {
+      data.top = top;
+      data.height = p.y - top - bottom;
+    } else if(top == undefined) {
+      data.bottom = bottom;
+    } else { /* bottom == undefined */
+      data.top = top;
+    }
+
+    if(left != undefined && right != undefined) {
+      data.left = left;
+      data.width = p.x - left - right;
+    } else if(left == undefined) {
+      data.right = right;
+    } else { /* right == undefined */
+      data.left = left;
+    }
+
+    if(data.height)
+      data.height = data.height - (outer.y - inner.y);
+    if(data.width)
+      data.width = data.width - (outer.x - inner.x);
+
+    var data2 = {};
+    for(var k in data)
+      data2[k] = data[k] + "px";
+
+    this.element.setStyles(data2);
+    this.rework();
+  },
+  rework: function() {
+    var x = this.element.getChildren().map(function(x) {
+      return x.wmpanel;
+    });
+
+    var anchorFilter = function(x, y) {
+      return x.filter(function(z) {
+        if(z && (z.anchor == y) && !z.hidden) {
+          return true;
+        }
+      });
+    }
+
+    var top = anchorFilter(x, SWM_ANCHOR_TOP);
+    var bottom = anchorFilter(x, SWM_ANCHOR_BOTTOM);
+    var left = anchorFilter(x, SWM_ANCHOR_LEFT);
+    var right = anchorFilter(x, SWM_ANCHOR_RIGHT);
+    var none = anchorFilter(x, SWM_ANCHOR_NONE);
     
-    var element = new Element("div", {"styles": { "position": "absolute" } });
-    this.element = element;
+    var x = this.getInnerSize();
+    var y = this.getOuterSize();
+
+    var tpos = 0;
+    top.each(function(obj) {
+      obj.setSize(tpos, 0, undefined, 0);
+      tpos = tpos + obj.getOuterSize().y;
+    });
+
+    var bpos = 0;
+    bottom.each(function(obj) {
+      obj.setSize(undefined, 0, bpos, 0);
+      bpos = bpos + obj.getOuterSize().y;
+    });
+
+    var lpos = 0;
+    left.each(function(obj) {
+      obj.setSize(tpos, lpos, bpos, undefined);
+      lpos = lpos + obj.getOuterSize().x;
+    });
+
+    var rpos = 0;
+    right.each(function(obj) {
+      obj.setSize(tpos, undefined, bpos, rpos);
+      rpos = rpos + obj.getOuterSize().x;
+    });
+
+    var bpos = 0;
+    bottom.each(function(obj) {
+      obj.setSize(undefined, 0, bpos, 0);
+      bpos = bpos + obj.getOuterSize().y;
+    });
+
+    none.each(function(obj) {
+      obj.setSize(tpos, lpos, bpos, rpos);
+    });
+  }
+});
+
+var SWMFrame = new Class({
+  Extends: SWMContainer,
+  initialize: function(parentElement) {
+    this.parent(this);
+
+    this.element = new Element("div", {"styles": {
+      "position": "relative",
+      "top": "0px",
+      "left": "0px",
+      "height": "100%",
+      "width": "100%"
+    }}); 
     this.element.wmpanel = this;
-    
+
+    parentElement.appendChild(this.element);
+    this.element.addClass("swmelement");
+  }
+});
+
+var SWMPanel = new Class({
+  Extends: SWMContainer,
+  initialize: function(parentPanel, hidden) {
+    this.parent(parentPanel);
+    this.element = new Element("div", {"styles": {
+      "position": "absolute"
+    }}); 
+    this.element.wmpanel = this;
+
     if(hidden) {
       this.setHidden(true);
     } else {
       this.hidden = false;
     }
-    parent.addClass("swmelement");
     
-    parent.appendChild(this.element);
+    parentPanel.element.appendChild(this.element);
     this.anchor = SWM_ANCHOR_NONE;
   },
   setHeight: function(height) {
@@ -35,72 +173,19 @@ var SWMPanel = new Class({
     } else {
       this.element.setStyle("display", "block");
     }
+  },
+  addClass: function(class_) {
+    this.element.addClass(class_);
+  },
+  getScrollSize: function() {
+    return this.element.getScrollSize();
   }
 });
 
 window.addEvent("domready", function() {
-  function reworkLayout(container) {
-    function anchorFilter(x, anchor) {
-      return x.filter(function(y) {
-        if(y.anchor == anchor)
-          return true;
-      });
-    }
-    var x = container.getChildren().map(function(x) {
-      return x.wmpanel
-    });
-    var top = anchorFilter(x, SWM_ANCHOR_TOP);
-    var bottom = anchorFilter(x, SWM_ANCHOR_BOTTOM);
-    var none = anchorFilter(x, SWM_ANCHOR_NONE);
-
-    var left = anchorFilter(x, SWM_ANCHOR_LEFT);
-    var right = anchorFilter(x, SWM_ANCHOR_RIGHT);
-    
-    var tpos = 0;
-    for(var i=0;i<top.length;i++) {
-      if(top[i].hidden)
-        continue;
-      var obj = top[i].element;
-      obj.setStyles({"top": tpos + "px", "left": "0px", "right": "0px"});
-      tpos = tpos + obj.getSize().y;
-    }
-    
-    var bpos = 0;
-    for(var i=0;i<bottom.length;i++) {
-      if(bottom[i].hidden)
-        continue;
-      var obj = bottom[i].element;
-      obj.setStyles({"bottom": bpos + "px", "left": "0px", "right": "0px"});
-      bpos = bpos + obj.getSize().y;
-    }
-    
-    var lpos = 0;
-    for(var i=0;i<left.length;i++) {
-      if(left[i].hidden)
-        continue;
-      var obj = left[i].element;
-      obj.setStyles({"left": lpos + "px", "top": tpos + "px", "bottom": bpos + "px"});
-      lpos = lpos + obj.getSize().x;
-    }
-
-    var rpos = 0;
-    for(var i=0;i<right.length;i++) {
-      if(right[i].hidden)
-        continue;
-      var obj = right[i].element;
-      obj.setStyles({"right": rpos + "px", "top": tpos + "px", "bottom": bpos + "px"});
-      rpos = rpos + obj.getSize().x;
-    }
-
-    for(var i=0;i<none.length;i++) {
-      if(none[i].hidden)
-        continue;
-      var obj = none[i].element;
-      obj.setStyles({"left": lpos + "px", "right": rpos + "px", "top": tpos + "px", "bottom": bpos + "px"});
-    }
-  }
-  
   window.addEvent("resize", function() {
-    $$("div.swmelement").each(reworkLayout);
+    $$("div.swmelement").each(function(x) {
+      x.wmpanel.rework();
+    });
   });
-});
\ No newline at end of file
+});
index a9345633d783793cf3064657c30baafe4c52ba30..9ffdda92e9c113b37a9b7d074274043288b0096a 100644 (file)
@@ -3,25 +3,20 @@ var SWMUIWindow = new Class({
   
   initialize: function(parentObject, client, type, name) {
     this.parent(parentObject, client, type, name);
-    this.contentPanel = new SWMPanel(parentObject.mainPanel.element, true);
-    this.contentPanel.element.addClass("content");
-    this.contentPanel.element.setStyle("overflow", "auto");
+    this.contentPanel = new SWMPanel(parentObject.mainPanel, true);
+    this.contentPanel.addClass("content");
 
     if(type == WINDOW_CHANNEL) {
-      this.nickList = new SWMPanel(this.contentPanel.element);
+      this.nickList = new SWMPanel(this.contentPanel);
       this.nickList.anchor = SWM_ANCHOR_RIGHT;
-      this.nickList.element.setStyle("overflow", "auto");
-      this.nickList.element.addClass("nicklist");
-    }
+      this.nickList.addClass("nicklist");
 
-    if(type == WINDOW_CHANNEL) {
-      this.topic = new SWMPanel(this.contentPanel.element);
+      this.topic = new SWMPanel(this.contentPanel);
       this.topic.anchor = SWM_ANCHOR_TOP;
-      this.topic.element.addClass("topic");
+      this.topic.addClass("topic");
     }
     
-    this.lines = new SWMPanel(this.contentPanel.element);
-    this.lines.element.setStyle("overflow", "auto");
+    this.lines = new SWMPanel(this.contentPanel);
     
     this.tab = new Element("span");
     this.tab.addClass("tab");
@@ -31,7 +26,7 @@ var SWMUIWindow = new Class({
       parentObject.selectWindow(this);
     }.bind(this));
 
-    parentObject.tabPanel.element.appendChild(this.tab);
+    parentObject.tabPanel.appendChild(this.tab);
     parentObject.resize();
     
     if(type != WINDOW_STATUS) {
@@ -52,26 +47,20 @@ var SWMUIWindow = new Class({
   updateNickList: function(nicks) {
     this.parent(nicks);
 
-    var n = this.nickList.element;
-    while(n.firstChild)
-      n.removeChild(n.firstChild);
-
+    this.nickList.removeAllChildren();
     nicks.each(function(nick) {
       var e = new Element("div");
-      n.appendChild(e);
+      this.nickList.appendChild(e);
       e.appendChild(document.createTextNode(nick));
-    });
+    }.bind(this));
     
     this.parentObject.resize();
   },
   updateTopic: function(topic) {
     this.parent(topic);
-    var t = this.topic.element;
-    
-    while(t.firstChild)
-      t.removeChild(t.firstChild);
 
-    Colourise(topic, t);
+    this.topic.removeAllChildren();
+    Colourise(topic, this.topic.element);
 
     this.parentObject.resize();
   },
@@ -95,8 +84,8 @@ var SWMUIWindow = new Class({
   close: function() {
     this.parent();
 
-    this.parentObject.mainPanel.element.removeChild(this.contentPanel.element);
-    this.parentObject.tabPanel.element.removeChild(this.tab);
+    this.parentObject.mainPanel.removeChild(this.contentPanel.element);
+    this.parentObject.tabPanel.removeChild(this.tab);
   },
   addLine: function(type, line, colour) {
     this.parent(type, line, colour);
@@ -117,15 +106,15 @@ var SWMUIWindow = new Class({
     Colourise(IRCTimestamp(new Date()) + " " + line, e);
     
     this.lastcolour = !this.lastcolour;
-    
+
     var prev = this.lines.element.getScroll();
     var prevbottom = this.lines.element.getScrollSize().y;
     var prevsize = this.lines.element.getSize();
-    this.lines.element.appendChild(e);
-    
+    this.lines.appendChild(e);
+  
     if(prev.y + prevsize.y == prevbottom)
       this.lines.element.scrollTo(prev.x, this.lines.element.getScrollSize().y);
-      
+    
     if(!this.active)
       this.tab.addClass("tab-highlighted");
   }
@@ -135,27 +124,31 @@ var SWMUI = new Class({
   Extends: UI,
   initialize: function(parentElement, theme) {
     this.parent(parentElement, SWMUIWindow, "swmui");
+
     this.parentElement = parentElement;
     this.theme = theme;
   },
   postInitialize: function() {
-    this.tabPanel = new SWMPanel(this.parentElement);
+    this.rootFrame = new SWMFrame(this.parentElement);
+
+    this.tabPanel = new SWMPanel(this.rootFrame);
     this.tabPanel.anchor = SWM_ANCHOR_TOP;
-    this.tabPanel.element.addClass("tabs");
+    this.tabPanel.addClass("tabs");
     
-    this.mainPanel = new SWMPanel(this.parentElement);
-    this.mainPanel.element.addClass("main");
+    this.mainPanel = new SWMPanel(this.rootFrame);
+    this.mainPanel.addClass("main");
     
-    this.entryPanel = new SWMPanel(this.parentElement);
+    this.entryPanel = new SWMPanel(this.rootFrame);
     this.entryPanel.anchor = SWM_ANCHOR_BOTTOM;
-    this.entryPanel.element.addClass("entry");
+    this.entryPanel.addClass("entry");
 
     var form = new Element("form");
     
     var inputbox = new Element("input");
+    inputbox.setStyle("border", "0px");
     
     window.addEvent("resize", function() {
-      var s = this.entryPanel.element.getSize().x - 4;
+      var s = this.entryPanel.getInnerSize().x;
       inputbox.setStyle("width", s + "px");
     }.bind(this));
 
@@ -166,7 +159,7 @@ var SWMUI = new Class({
       inputbox.value = "";
     }.bind(this));
 
-    this.entryPanel.element.appendChild(form);
+    this.entryPanel.appendChild(form);
     form.appendChild(inputbox);
     inputbox.focus();
 
index 34a5ca6a67cd6e1f58f855097b0255a7764aff91..50cbbfe452d51491f36c5cc53749ed2758421771 100644 (file)
@@ -19,22 +19,32 @@ body, html {
   background: #ddf;
 }
 
+.qwebirc-swmui .topic {
+  background: #fdf;
+}
+
 .qwebirc-swmui .entry {
   background: #dfd;
 }
 
+.qwebirc-swmui .entry input {
+  background: #dfd;
+}
+
 .qwebirc-swmui .content {
   background: #ddf;
+  overflow: auto;
 }
 
 .qwebirc-swmui .nicklist {
   background: #dff;
+  overflow: auto;
 }
 
 .qwebirc-swmui .tab {
+  position: relative;
   float: left;
   min-width: 100px;
-  width: 100px;
   display: block;
   border: 1px solid black;
   margin-right: 2px;
@@ -42,9 +52,10 @@ body, html {
 }
 
 .qwebirc-swmui .tabclose {
-  border: 1px solid black;
   margin: 2px;
+  width: 15px;
   font-size: 0.5em;
+  vertical-align: top;
 }
 
 .qwebirc-swmui .entry input {
@@ -72,4 +83,4 @@ body, html {
 
 .qwebirc-swmui .tab-unselected {
   background: #eee;
-}
\ No newline at end of file
+}
index 16f588293f744c15b1bfda761e92b01aaf3eba68..e4dd7beae803708645096e6cbee15a1c81062c29 100644 (file)
@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
 <head>
   <title>QuakeNet Web IRC</title>
   <link rel="stylesheet" href="css/colours.css" type="text/css">
@@ -13,6 +12,6 @@
   </script>
 </head>
 <body>
-  <div id="ircui"></div>
+  <div id="ircui" style="height: 100%; width: 100%; position: absolute;"></div>
 </body>
 </html>
index 1735f3073ccd48c31c13ef0e1443c80a0952d0fb..e529dc78f602f11ff06c2de6e613c38b666abf35 100644 (file)
@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
 <head>
   <title>QuakeNet Web IRC</title>
   <link rel="stylesheet" href="css/colours.css" type="text/css">
@@ -26,6 +25,6 @@
   </script>
 </head>
 <body>
-  <div id="ircui"></div>
+  <div id="ircui" style="height: 100%; width: 100%; position: absolute"></div>
 </body>
 </html>
index 64d2f0f4e844f82e19ea1de06901f201a20e7179..8adb04988b737d3d59e34304e660bca31c1897f1 100644 (file)
@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
 <head>
   <title>QuakeNet Web IRC</title>
   <link rel="stylesheet" href="css/colours.css" type="text/css">
index 2c6af6586f9c1f04861b86c5501e011449d8b0e2..30a73a9c36654c594f8e773079b451c732036d5c 100644 (file)
@@ -1,6 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
 <head>
   <title>QuakeNet Web IRC</title>
   <link rel="stylesheet" href="css/colours.css" type="text/css">