From 5b4693e621491f1b6e86f95346a70ac007249335 Mon Sep 17 00:00:00 2001
From: abhin4v <abhinav@abhinavsarkar.net>
Date: Tue, 2 Dec 2008 11:43:47 +0000
Subject: [PATCH] moved html template to xbl component

git-svn-id: file:///tmp/snv/trunk@7 12951d8a-c33d-4b7c-b961-822215c816e1
---
 chrome/content/TODO.txt        |   7 +-
 chrome/content/diggsidebar.js  | 147 ++++++---------------------------
 chrome/content/diggsidebar.xul |  41 ---------
 chrome/content/diggstory.xml   | 107 ++++++++++++++++++++++++
 chrome/skin/diggsidebar.css    |  22 ++---
 install.rdf                    |   6 +-
 6 files changed, 149 insertions(+), 181 deletions(-)
 create mode 100644 chrome/content/diggstory.xml

diff --git a/chrome/content/TODO.txt b/chrome/content/TODO.txt
index 63efd1d..aba38dc 100644
--- a/chrome/content/TODO.txt
+++ b/chrome/content/TODO.txt
@@ -1,7 +1,8 @@
 move to JSON data format -- done
-XBL -> Templates
+XBL -- done
+externalize strings
 format JS/refactor JS/Use FUEL
-caching/db
-threading
+put license
+caching/db, threading, XUL templates
 new UI
 JQuery
diff --git a/chrome/content/diggsidebar.js b/chrome/content/diggsidebar.js
index ef65c2b..3ecf037 100644
--- a/chrome/content/diggsidebar.js
+++ b/chrome/content/diggsidebar.js
@@ -8,44 +8,6 @@ function $ei(id, parentNode) {
 	return parentNode.getElementById(id);
 }
 
-//getAttribute
-function $a(parentNode, att) {
-	return parentNode.getAttribute(att);
-}
-
-//getElementByTagName
-function $et(tagName, parentNode) {
-	parentNode = parentNode || document;
-	return parentNode.getElementsByTagName(tagName)[0];
-}
-
-//getElementByClassName
-function $ec(className, parentNode) {
-        parentNode = parentNode || document;
-        elements = parentNode.getElementsByTagName("*");
-        for (i=0; i<elements.length; i++) {
-                if (elements[i].hasAttribute('class') && elements[i].getAttribute('class') == className) {
-                        return elements[i];
-                }
-        }
-
-}
-//Xpath
-function $xp(aNode, aExpr) {
-	var xpe = new XPathEvaluator();
-	var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
-	aNode.documentElement : aNode.ownerDocument.documentElement);
-	var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
-	var found = [];
-	var res;
-	while (res = result.iterateNext())
-		found.push(res);
-	return found;
-}
-String.prototype.escapeEntities = function() {
-	return this.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-}
-
 function fetchData(url, handler) {
 	//alert("inside fetchData");
         $ei('diggIndicator').style.display = '';
@@ -84,8 +46,7 @@ function populateMenu(e) {
             $ei('topicPopup').removeChild($ei('topicPopup').firstChild);
     }
 
-    for (i=0; i<topics.length; i++) {
-        topic = topics[i];
+    topics.forEach(function (topic) {
         menu = document.createElement('menu');
         menu.setAttribute('id', topic.short_name + 'Menu');
         menu.setAttribute('label', topic.name);
@@ -108,21 +69,21 @@ function populateMenu(e) {
         $ei('topicPopup').appendChild(menu);
 
         containers.push(topic.container);
-    }
+    });
 
     while ($ei('containerPopup').firstChild) {
             $ei('containerPopup').removeChild($ei('containerPopup').firstChild);
     }
 
     filteredContainers = {name: [], short_name: []};
-    for (i=0; i<containers.length; i++) {
-        name = containers[i].name;
-        short_name = containers[i].short_name;
+    containers.forEach(function (container) {
+        name = container.name;
+        short_name = container.short_name;
         if (filteredContainers.name.indexOf(name) == -1) {
             filteredContainers.name.push(name);
             filteredContainers.short_name.push(short_name);
         }
-    }
+    });
 
     for (i=0; i<filteredContainers.name.length; i++) {
         menu = document.createElement('menu');
@@ -164,32 +125,16 @@ function populateStoryList(e) {
     var newStories = new Array();
     //Application.console.log(stories.length);
 
-	for (i=0; i<stories.length; i++) {
-        story = stories[i];
+	stories.forEach(function (story) {
         newStories.push(story.id);
 		//Application.console.log(i + " " + story.title + " " + story.id);
 
         listitem = $ei('storyList').appendChild(document.createElement('richlistitem'));
         listitem.id = "story_" + story.id;
+        listitem.setAttribute('title', story.title);
 
-        htmllistitem = listitem.appendChild(
-            document.createElementNS("http://www.w3.org/1999/xhtml","html:div"));
-        htmllistitem.innerHTML = $ei('storyTitleFormat').innerHTML;
-
-        storyTitle = listitem.getElementsByAttribute('class', 'storyTitle')[0];
-        storyTitle.appendChild(document.createTextNode(story.title));
-
-        htmllistitem.innerHTML += $ei('storyDetailsFormat').innerHTML;
-
-        storyNew= listitem.getElementsByAttribute('class', 'storyNew')[0];
-
-        if (currentStories.indexOf(story.id) != -1) {
-            storyNew.style.textDecoration = "line-through";
-            storyNew.style.backgroundColor = "black";
-            storyNew.style.color = "white";
-            storyNew.title = "Old";
-        }
-    }
+        if (currentStories.indexOf(story.id) != -1) listitem.new = false;
+    });
     currentStories = newStories;
 
     //Adaptive update interval code START
@@ -235,23 +180,8 @@ function populateStoryList(e) {
     //Adaptive update interval code END
 
     $ei('diggIndicator').style.display = 'none';
-
-    //prefs.setIntPref("extensions.diggsidebar.progress", 100);
-    //$ei("diggIndicator").setAttribute('mode', 'determined');
-    //$ei("diggIndicator").setAttribute('value', 100);
-    //psi = window.setInterval(showProgress, Math.round(timeout/100));
-    //window.setTimeout("window.clearInterval(psi)", timeout);
 }
 
-//function showProgress() {
-//        var prefs = Components.classes["@mozilla.org/preferences-service;1"].
-//                getService(Components.interfaces.nsIPrefBranch);
-//        progress = prefs.getIntPref("extensions.diggsidebar.progress");
-//        prefs.setIntPref("extensions.diggsidebar.progress", (progress - 1));
-//
-//        $ei("diggIndicator").setAttribute('value', (parseInt($ei("diggIndicator").getAttribute('value')) - 1));
-//}
-
 function populateDescription(e) {
 	XHR = e.target;
     //Application.console.log(XHR.responseText);
@@ -270,55 +200,32 @@ function populateDescription(e) {
 
     listitems = document.getElementsByTagName('richlistitem');
     for (i=0; i<listitems.length; i++) {
-            listitems[i].getElementsByAttribute('class', 'storyDetails')[0].style.display = 'none';
-            listitems[i].getElementsByAttribute('class', 'storyCEIcon')[0].src =
-                "chrome://diggsidebar/content/image/up.jpg";
+            listitems[i].hideDesc();
     }
 
-    storyListItem = $ei('story_'+ story.id)
-    storyDetails = storyListItem.getElementsByAttribute('class', 'storyDetails')[0];
-    storyDate = storyListItem.getElementsByAttribute('class', 'storyDate')[0];
-    storyStatus = storyListItem.getElementsByAttribute('class', 'storyStatus')[0];
-    storyContainer = storyListItem.getElementsByAttribute('class', 'storyContainer')[0];
-    storyTopic = storyListItem.getElementsByAttribute('class', 'storyTopic')[0];
-    storyUserName = storyListItem.getElementsByAttribute('class', 'storyUserName')[0];
-    storyDiggs = storyListItem.getElementsByAttribute('class', 'storyDiggs')[0];
-    storyComments = storyListItem.getElementsByAttribute('class', 'storyComments')[0];
-    storyDesc = storyListItem.getElementsByAttribute('class', 'storyDesc')[0];
-    storyLink = storyListItem.getElementsByAttribute('class', 'storyLink')[0];
-    storyHref = storyListItem.getElementsByAttribute('class', 'storyHref')[0];
+    li = $ei('story_'+ story.id)
 
-    storyCEIcon = storyListItem.getElementsByAttribute('class', 'storyCEIcon')[0];
-    storyRead = storyListItem.getElementsByAttribute('class', 'storyRead')[0];
-
-	storyDate.innerHTML = ((hr > 0) && (min > 0)) ?
+	storyDate = ((hr > 0) && (min > 0)) ?
         (hr + " hr " + min + " mins ago") :
         ((hr == 0) && (min > 0)) ?
         (min + " mins ago") :
         ((hr == 0) && (min == 0)) ?
         "just now" : "";
-	storyStatus.innerHTML = story.status.escapeEntities();
-	storyContainer.innerHTML = story.container.name.escapeEntities();
-	storyTopic.innerHTML = story.topic.name.escapeEntities();
-	storyUserName.href = "http://digg.com/users/" + story.user.name;
-	storyUserName.innerHTML = story.user.name.escapeEntities();
-	storyDiggs.innerHTML = story.diggs;
-	storyComments.innerHTML = story.comments;
-	storyDesc.innerHTML = story.description.escapeEntities();
-	storyLink.href = story.link;
-	storyHref.href = story.href;
+    li.setAttribute('date', storyDate);
+	li.setAttribute('status', story.status);
+	li.setAttribute('container', story.container.name);
+	li.setAttribute('topic', story.topic.name);
+	li.setAttribute('username', story.user.name);
+    li.setAttribute('userlink', "http://digg.com/users/" + story.user.name);
+	li.setAttribute('diggs', story.diggs);
+	li.setAttribute('comments', story.comments);
+	li.setAttribute('desc', story.description);
+	li.setAttribute('link', story.link);
+	li.setAttribute('href',  story.href);
 
-    storyCEIcon.src = "chrome://diggsidebar/content/image/down.jpg";
-    storyRead.style.textDecoration = "line-through";
-    storyRead.style.backgroundColor = "black";
-    storyRead.style.color = "white";
-    storyRead.title = "Read";
-    storyNew.style.textDecoration = "line-through";
-    storyNew.style.backgroundColor = "black";
-    storyNew.style.color = "white";
-    storyNew.title = "Old";
-
-	storyDetails.style.display = 'block';
+    li.read = true;
+    li.new = false;
+    li.showDesc()
 
     $ei('diggIndicator').style.display = 'none';
 }
diff --git a/chrome/content/diggsidebar.xul b/chrome/content/diggsidebar.xul
index 073ba8c..7cc97c8 100644
--- a/chrome/content/diggsidebar.xul
+++ b/chrome/content/diggsidebar.xul
@@ -6,7 +6,6 @@
 
 <page id="sbDiggSidebar" title="&diggsidebar.title;"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-    xmlns:html="http://www.w3.org/1999/xhtml"
     onload="createMenu();getStories()">
     <script src="chrome://diggsidebar/content/diggsidebar.js" type="application/x-javascript" />
     <hbox>
@@ -40,48 +39,8 @@
             <toolbaritem>
                 <progressmeter flex="1" width="5" mode="undetermined" id="diggIndicator" style="height: 85% !important; width: 30% !important" />
             </toolbaritem>
-
         </toolbar>
     </hbox>
     <description id="diggEndPoint">digg</description>
     <richlistbox flex="1" id="storyList" onselect="getDescription(this.selectedItem.id.substr(6))"></richlistbox>
-    <html:div id="storyTitleFormat" style="display:none">
-        <html:span class="storyHeader">
-            <html:span class="storyRead" title="Unread">R</html:span>
-            <html:span class="storyNew" title="New">N</html:span>
-            <html:img src="chrome://diggsidebar/content/image/up.jpg" class="storyCEIcon" />
-            <html:span class="storyTitle"></html:span>
-        </html:span>
-    </html:div>
-    <html:div id="storyDetailsFormat" style="display:none">
-        <html:div class="storyDetails">
-            <html:div>
-                <html:span class="storyContainer"></html:span> &gt;
-                <html:span class="storyTopic"></html:span> /
-                <html:span class="storyStatus"></html:span>
-            </html:div>
-            <html:div>
-                <html:span class="storyDesc"></html:span>
-                <html:a class="storyLink" onclick="openInTab(this.href); return false">
-                    <html:img src="chrome://diggsidebar/content/image/external.png" />
-                </html:a>
-            </html:div>
-            <html:div style="text-align:center;">
-                <html:a class="storyHref" onclick="openInTab(this.href); return false">Digg This</html:a>
-            </html:div>
-            <html:div>
-                <html:span class="storyPopularity">
-                    <html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
-                    <html:span class="storyDiggs"></html:span>
-                    <html:img src="chrome://diggsidebar/content/image/comments.png" width="15px" />
-                    <html:span class="storyComments"></html:span>
-                </html:span>
-                by
-                <html:span class="storyUserLink">
-                   <html:a class="storyUserName" onclick="openInTab(this.href); return false"></html:a>
-                </html:span>
-                <html:span class="storyDate"></html:span>
-            </html:div>
-        </html:div>
-    </html:div>
 </page>
diff --git a/chrome/content/diggstory.xml b/chrome/content/diggstory.xml
new file mode 100644
index 0000000..8efc174
--- /dev/null
+++ b/chrome/content/diggstory.xml
@@ -0,0 +1,107 @@
+<?xml version="1.0"?>
+<bindings id="diggstory"
+   xmlns="http://www.mozilla.org/xbl"
+   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   xmlns:xbl="http://www.mozilla.org/xbl"
+   xmlns:html="http://www.w3.org/1999/xhtml">
+    <binding id="diggstoryitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
+        <resources>
+            <stylesheet src="chrome://diggsidebar/skin/diggsidebar.css"/>
+        </resources>
+        <content>
+            <xul:vbox>
+            <html:div class="storyHeader">
+                <html:span class="storyRead" title="Unread">R</html:span>
+                <html:span class="storyNew" title="New">N</html:span>
+                <html:img src="chrome://diggsidebar/content/image/up.jpg" class="storyCEIcon" />
+                <html:span xbl:inherits="xbl:text=title" class="storyTitle"></html:span>
+            </html:div>
+            <html:div class="storyDetails">
+                <html:div>
+                    <html:span xbl:inherits="xbl:text=container" class="storyContainer"></html:span> &gt;
+                    <html:span xbl:inherits="xbl:text=topic" class="storyTopic"></html:span> /
+                    <html:span xbl:inherits="xbl:text=status" class="storyStatus"></html:span>
+                </html:div>
+                <html:div>
+                    <html:span xbl:inherits="xbl:text=desc" class="storyDesc"></html:span>
+                    <html:a xbl:inherits="href=link" class="storyLink" onclick="openInTab(this.href); return false">
+                        <html:img src="chrome://diggsidebar/content/image/external.png" />
+                    </html:a>
+                </html:div>
+                <html:div style="text-align:center;">
+                    <html:a xbl:inherits="href=href" class="storyHref" onclick="openInTab(this.href); return false">
+                        Digg This
+                    </html:a>
+                </html:div>
+                <html:div>
+                    <html:span class="storyPopularity">
+                        <html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
+                        <html:span xbl:inherits="xbl:text=diggs" class="storyDiggs"></html:span>
+                        <html:img src="chrome://diggsidebar/content/image/comments.png" width="15px" />
+                        <html:span xbl:inherits="xbl:text=comments" class="storyComments"></html:span>
+                    </html:span>
+                    by
+                    <html:a xbl:inherits="href=userlink,xbl:text=username" class="storyUserLink" onclick="openInTab(this.href); return false"></html:a>
+                    <html:span xbl:inherits="xbl:text=date" class="storyDate"></html:span>
+                </html:div>
+            </html:div>
+            </xul:vbox>
+        </content>
+        <implementation>
+            <constructor>
+                <![CDATA[
+                this.d = {};
+                this.d.read = false;
+                this.d.new = true;
+                ]]>
+            </constructor>
+            <property name="read"
+                onget="return this.d.read;"
+                onset="this.d.read = val; if(val==true) this.markAsRead();"/>
+            <property name="new"
+                onget="return this.d.new;"
+                onset="this.d.new = val; if(val==false) this.markAsOld();"/>
+            <method name="markAsRead">
+                <body>
+                <![CDATA[
+                    var storyRead = document.getAnonymousElementByAttribute(this, "class", "storyRead");
+                    storyRead.style.textDecoration = "line-through";
+                    storyRead.style.backgroundColor = "black";
+                    storyRead.style.color = "white";
+                    storyRead.title = "Read";
+                ]]>
+                </body>
+            </method>
+            <method name="markAsOld">
+                <body>
+                <![CDATA[
+                    var storyNew = document.getAnonymousElementByAttribute(this, "class", "storyNew");
+                    storyNew.style.textDecoration = "line-through";
+                    storyNew.style.backgroundColor = "black";
+                    storyNew.style.color = "white";
+                    storyNew.title = "Old";
+                ]]>
+                </body>
+            </method>
+            <method name="showDesc">
+                <body>
+                <![CDATA[
+                    document.getAnonymousElementByAttribute(this, "class", "storyCEIcon").src =
+                        "chrome://diggsidebar/content/image/down.jpg";
+                    document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'block';
+                ]]>
+                </body>
+            </method>
+            <method name="hideDesc">
+                <body>
+                <![CDATA[
+                    document.getAnonymousElementByAttribute(this, "class", "storyCEIcon").src =
+                        "chrome://diggsidebar/content/image/up.jpg";
+                    document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'none';
+                ]]>
+                </body>
+            </method>
+        </implementation>
+        <handlers></handlers>
+    </binding>
+</bindings>
diff --git a/chrome/skin/diggsidebar.css b/chrome/skin/diggsidebar.css
index 5d13d9d..1d098dd 100644
--- a/chrome/skin/diggsidebar.css
+++ b/chrome/skin/diggsidebar.css
@@ -6,22 +6,18 @@ a {
 a img {
     border: none;
 }
-.storyList {
+#storyList {
     margin: 1px;
     border-style: solid !important;
     border-color: #000;
     border-width: 1px;
-    -moz-border-bottom-colors: #000 !important;
-    -moz-border-top-colors: #000 !important;
-    -moz-border-left-colors: #000 !important;
-    -moz-border-right-colors: #000 !important;
 }
-
 .storyDetails {
     padding: 3px;
     display: none;
     background-color: #ffffff;
     clear: both;
+    border-top: 1px dashed black;
 }
 .storyDetails > div {
     clear: both;
@@ -32,6 +28,7 @@ a img {
     padding: 0px 5px;
     font-size: x-small;
     font-weight: bold;
+    width: 100%;
 }
 .storyNew, .storyRead, .storyPopularity {
     float: right;
@@ -55,23 +52,20 @@ a img {
     background-color: blue;
 }
 
-richlistitem {
+#storyList richlistitem{
     border-bottom: 1px solid black;
     padding-bottom: 3px;
     color: #000000!important;
+    -moz-binding: url("chrome://diggsidebar/content/diggstory.xml#diggstoryitem");
 }
-richlistitem > div{
+
+richlistitem > vbox > div{
     width: 250px;
 }
 richlistitem[selected="true"] {
-    background-color: #FFFBF0;
+    background-color: #FFEBF0;
     color: inherit;
 }
-richlistitem[selected="true"] .storyDetails {
-    border-top: 1px dashed black;
-    background-color: #FFFBF0;
-}
-
 richlistitem .storyTitle:hover {
     background-color: green;
     color: white;
diff --git a/install.rdf b/install.rdf
index 311658e..7bc6133 100644
--- a/install.rdf
+++ b/install.rdf
@@ -4,12 +4,12 @@
          xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
   <RDF:Description RDF:about="rdf:#$55wJ23"
                    em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
-                   em:minVersion="1.5"
-                   em:maxVersion="3.0.*" />
+                   em:minVersion="3.0"
+                   em:maxVersion="3.1.*" />
   <RDF:Description RDF:about="urn:mozilla:install-manifest"
                    em:id="diggsidebar@abhinavsarkar.net"
                    em:name="Digg Sidebar"
-                   em:version="0.5.1"
+                   em:version="0.6"
                    em:creator="Abhinav Sarkar"
                    em:description="Shows Digg stories in real time in firefox sidebar."
                    em:homepageURL="http://code.google.com/p/digg-sidebar/"