Browse Source

moved html template to xbl component

git-svn-id: file:///tmp/snv/trunk@7 12951d8a-c33d-4b7c-b961-822215c816
Abhinav Sarkar 13 years ago
parent
commit
5b4693e621

+ 4
- 3
chrome/content/TODO.txt View File

@@ -1,7 +1,8 @@
1 1
 move to JSON data format -- done
2
-XBL -> Templates
2
+XBL -- done
3
+externalize strings
3 4
 format JS/refactor JS/Use FUEL
4
-caching/db
5
-threading
5
+put license
6
+caching/db, threading, XUL templates
6 7
 new UI
7 8
 JQuery

+ 29
- 122
chrome/content/diggsidebar.js View File

@@ -8,44 +8,6 @@ function $ei(id, parentNode) {
8 8
 	return parentNode.getElementById(id);
9 9
 }
10 10
 
11
-//getAttribute
12
-function $a(parentNode, att) {
13
-	return parentNode.getAttribute(att);
14
-}
15
-
16
-//getElementByTagName
17
-function $et(tagName, parentNode) {
18
-	parentNode = parentNode || document;
19
-	return parentNode.getElementsByTagName(tagName)[0];
20
-}
21
-
22
-//getElementByClassName
23
-function $ec(className, parentNode) {
24
-        parentNode = parentNode || document;
25
-        elements = parentNode.getElementsByTagName("*");
26
-        for (i=0; i<elements.length; i++) {
27
-                if (elements[i].hasAttribute('class') && elements[i].getAttribute('class') == className) {
28
-                        return elements[i];
29
-                }
30
-        }
31
-
32
-}
33
-//Xpath
34
-function $xp(aNode, aExpr) {
35
-	var xpe = new XPathEvaluator();
36
-	var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
37
-	aNode.documentElement : aNode.ownerDocument.documentElement);
38
-	var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
39
-	var found = [];
40
-	var res;
41
-	while (res = result.iterateNext())
42
-		found.push(res);
43
-	return found;
44
-}
45
-String.prototype.escapeEntities = function() {
46
-	return this.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
47
-}
48
-
49 11
 function fetchData(url, handler) {
50 12
 	//alert("inside fetchData");
51 13
         $ei('diggIndicator').style.display = '';
@@ -84,8 +46,7 @@ function populateMenu(e) {
84 46
             $ei('topicPopup').removeChild($ei('topicPopup').firstChild);
85 47
     }
86 48
 
87
-    for (i=0; i<topics.length; i++) {
88
-        topic = topics[i];
49
+    topics.forEach(function (topic) {
89 50
         menu = document.createElement('menu');
90 51
         menu.setAttribute('id', topic.short_name + 'Menu');
91 52
         menu.setAttribute('label', topic.name);
@@ -108,21 +69,21 @@ function populateMenu(e) {
108 69
         $ei('topicPopup').appendChild(menu);
109 70
 
110 71
         containers.push(topic.container);
111
-    }
72
+    });
112 73
 
113 74
     while ($ei('containerPopup').firstChild) {
114 75
             $ei('containerPopup').removeChild($ei('containerPopup').firstChild);
115 76
     }
116 77
 
117 78
     filteredContainers = {name: [], short_name: []};
118
-    for (i=0; i<containers.length; i++) {
119
-        name = containers[i].name;
120
-        short_name = containers[i].short_name;
79
+    containers.forEach(function (container) {
80
+        name = container.name;
81
+        short_name = container.short_name;
121 82
         if (filteredContainers.name.indexOf(name) == -1) {
122 83
             filteredContainers.name.push(name);
123 84
             filteredContainers.short_name.push(short_name);
124 85
         }
125
-    }
86
+    });
126 87
 
127 88
     for (i=0; i<filteredContainers.name.length; i++) {
128 89
         menu = document.createElement('menu');
@@ -164,32 +125,16 @@ function populateStoryList(e) {
164 125
     var newStories = new Array();
165 126
     //Application.console.log(stories.length);
166 127
 
167
-	for (i=0; i<stories.length; i++) {
168
-        story = stories[i];
128
+	stories.forEach(function (story) {
169 129
         newStories.push(story.id);
170 130
 		//Application.console.log(i + " " + story.title + " " + story.id);
171 131
 
172 132
         listitem = $ei('storyList').appendChild(document.createElement('richlistitem'));
173 133
         listitem.id = "story_" + story.id;
134
+        listitem.setAttribute('title', story.title);
174 135
 
175
-        htmllistitem = listitem.appendChild(
176
-            document.createElementNS("http://www.w3.org/1999/xhtml","html:div"));
177
-        htmllistitem.innerHTML = $ei('storyTitleFormat').innerHTML;
178
-
179
-        storyTitle = listitem.getElementsByAttribute('class', 'storyTitle')[0];
180
-        storyTitle.appendChild(document.createTextNode(story.title));
181
-
182
-        htmllistitem.innerHTML += $ei('storyDetailsFormat').innerHTML;
183
-
184
-        storyNew= listitem.getElementsByAttribute('class', 'storyNew')[0];
185
-
186
-        if (currentStories.indexOf(story.id) != -1) {
187
-            storyNew.style.textDecoration = "line-through";
188
-            storyNew.style.backgroundColor = "black";
189
-            storyNew.style.color = "white";
190
-            storyNew.title = "Old";
191
-        }
192
-    }
136
+        if (currentStories.indexOf(story.id) != -1) listitem.new = false;
137
+    });
193 138
     currentStories = newStories;
194 139
 
195 140
     //Adaptive update interval code START
@@ -235,23 +180,8 @@ function populateStoryList(e) {
235 180
     //Adaptive update interval code END
236 181
 
237 182
     $ei('diggIndicator').style.display = 'none';
238
-
239
-    //prefs.setIntPref("extensions.diggsidebar.progress", 100);
240
-    //$ei("diggIndicator").setAttribute('mode', 'determined');
241
-    //$ei("diggIndicator").setAttribute('value', 100);
242
-    //psi = window.setInterval(showProgress, Math.round(timeout/100));
243
-    //window.setTimeout("window.clearInterval(psi)", timeout);
244 183
 }
245 184
 
246
-//function showProgress() {
247
-//        var prefs = Components.classes["@mozilla.org/preferences-service;1"].
248
-//                getService(Components.interfaces.nsIPrefBranch);
249
-//        progress = prefs.getIntPref("extensions.diggsidebar.progress");
250
-//        prefs.setIntPref("extensions.diggsidebar.progress", (progress - 1));
251
-//
252
-//        $ei("diggIndicator").setAttribute('value', (parseInt($ei("diggIndicator").getAttribute('value')) - 1));
253
-//}
254
-
255 185
 function populateDescription(e) {
256 186
 	XHR = e.target;
257 187
     //Application.console.log(XHR.responseText);
@@ -270,55 +200,32 @@ function populateDescription(e) {
270 200
 
271 201
     listitems = document.getElementsByTagName('richlistitem');
272 202
     for (i=0; i<listitems.length; i++) {
273
-            listitems[i].getElementsByAttribute('class', 'storyDetails')[0].style.display = 'none';
274
-            listitems[i].getElementsByAttribute('class', 'storyCEIcon')[0].src =
275
-                "chrome://diggsidebar/content/image/up.jpg";
203
+            listitems[i].hideDesc();
276 204
     }
277 205
 
278
-    storyListItem = $ei('story_'+ story.id)
279
-    storyDetails = storyListItem.getElementsByAttribute('class', 'storyDetails')[0];
280
-    storyDate = storyListItem.getElementsByAttribute('class', 'storyDate')[0];
281
-    storyStatus = storyListItem.getElementsByAttribute('class', 'storyStatus')[0];
282
-    storyContainer = storyListItem.getElementsByAttribute('class', 'storyContainer')[0];
283
-    storyTopic = storyListItem.getElementsByAttribute('class', 'storyTopic')[0];
284
-    storyUserName = storyListItem.getElementsByAttribute('class', 'storyUserName')[0];
285
-    storyDiggs = storyListItem.getElementsByAttribute('class', 'storyDiggs')[0];
286
-    storyComments = storyListItem.getElementsByAttribute('class', 'storyComments')[0];
287
-    storyDesc = storyListItem.getElementsByAttribute('class', 'storyDesc')[0];
288
-    storyLink = storyListItem.getElementsByAttribute('class', 'storyLink')[0];
289
-    storyHref = storyListItem.getElementsByAttribute('class', 'storyHref')[0];
290
-
291
-    storyCEIcon = storyListItem.getElementsByAttribute('class', 'storyCEIcon')[0];
292
-    storyRead = storyListItem.getElementsByAttribute('class', 'storyRead')[0];
293
-
294
-	storyDate.innerHTML = ((hr > 0) && (min > 0)) ?
206
+    li = $ei('story_'+ story.id)
207
+
208
+	storyDate = ((hr > 0) && (min > 0)) ?
295 209
         (hr + " hr " + min + " mins ago") :
296 210
         ((hr == 0) && (min > 0)) ?
297 211
         (min + " mins ago") :
298 212
         ((hr == 0) && (min == 0)) ?
299 213
         "just now" : "";
300
-	storyStatus.innerHTML = story.status.escapeEntities();
301
-	storyContainer.innerHTML = story.container.name.escapeEntities();
302
-	storyTopic.innerHTML = story.topic.name.escapeEntities();
303
-	storyUserName.href = "http://digg.com/users/" + story.user.name;
304
-	storyUserName.innerHTML = story.user.name.escapeEntities();
305
-	storyDiggs.innerHTML = story.diggs;
306
-	storyComments.innerHTML = story.comments;
307
-	storyDesc.innerHTML = story.description.escapeEntities();
308
-	storyLink.href = story.link;
309
-	storyHref.href = story.href;
310
-
311
-    storyCEIcon.src = "chrome://diggsidebar/content/image/down.jpg";
312
-    storyRead.style.textDecoration = "line-through";
313
-    storyRead.style.backgroundColor = "black";
314
-    storyRead.style.color = "white";
315
-    storyRead.title = "Read";
316
-    storyNew.style.textDecoration = "line-through";
317
-    storyNew.style.backgroundColor = "black";
318
-    storyNew.style.color = "white";
319
-    storyNew.title = "Old";
320
-
321
-	storyDetails.style.display = 'block';
214
+    li.setAttribute('date', storyDate);
215
+	li.setAttribute('status', story.status);
216
+	li.setAttribute('container', story.container.name);
217
+	li.setAttribute('topic', story.topic.name);
218
+	li.setAttribute('username', story.user.name);
219
+    li.setAttribute('userlink', "http://digg.com/users/" + story.user.name);
220
+	li.setAttribute('diggs', story.diggs);
221
+	li.setAttribute('comments', story.comments);
222
+	li.setAttribute('desc', story.description);
223
+	li.setAttribute('link', story.link);
224
+	li.setAttribute('href',  story.href);
225
+
226
+    li.read = true;
227
+    li.new = false;
228
+    li.showDesc()
322 229
 
323 230
     $ei('diggIndicator').style.display = 'none';
324 231
 }

+ 0
- 41
chrome/content/diggsidebar.xul View File

@@ -6,7 +6,6 @@
6 6
 
7 7
 <page id="sbDiggSidebar" title="&diggsidebar.title;"
8 8
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
9
-    xmlns:html="http://www.w3.org/1999/xhtml"
10 9
     onload="createMenu();getStories()">
11 10
     <script src="chrome://diggsidebar/content/diggsidebar.js" type="application/x-javascript" />
12 11
     <hbox>
@@ -40,48 +39,8 @@
40 39
             <toolbaritem>
41 40
                 <progressmeter flex="1" width="5" mode="undetermined" id="diggIndicator" style="height: 85% !important; width: 30% !important" />
42 41
             </toolbaritem>
43
-
44 42
         </toolbar>
45 43
     </hbox>
46 44
     <description id="diggEndPoint">digg</description>
47 45
     <richlistbox flex="1" id="storyList" onselect="getDescription(this.selectedItem.id.substr(6))"></richlistbox>
48
-    <html:div id="storyTitleFormat" style="display:none">
49
-        <html:span class="storyHeader">
50
-            <html:span class="storyRead" title="Unread">R</html:span>
51
-            <html:span class="storyNew" title="New">N</html:span>
52
-            <html:img src="chrome://diggsidebar/content/image/up.jpg" class="storyCEIcon" />
53
-            <html:span class="storyTitle"></html:span>
54
-        </html:span>
55
-    </html:div>
56
-    <html:div id="storyDetailsFormat" style="display:none">
57
-        <html:div class="storyDetails">
58
-            <html:div>
59
-                <html:span class="storyContainer"></html:span> &gt;
60
-                <html:span class="storyTopic"></html:span> /
61
-                <html:span class="storyStatus"></html:span>
62
-            </html:div>
63
-            <html:div>
64
-                <html:span class="storyDesc"></html:span>
65
-                <html:a class="storyLink" onclick="openInTab(this.href); return false">
66
-                    <html:img src="chrome://diggsidebar/content/image/external.png" />
67
-                </html:a>
68
-            </html:div>
69
-            <html:div style="text-align:center;">
70
-                <html:a class="storyHref" onclick="openInTab(this.href); return false">Digg This</html:a>
71
-            </html:div>
72
-            <html:div>
73
-                <html:span class="storyPopularity">
74
-                    <html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
75
-                    <html:span class="storyDiggs"></html:span>
76
-                    <html:img src="chrome://diggsidebar/content/image/comments.png" width="15px" />
77
-                    <html:span class="storyComments"></html:span>
78
-                </html:span>
79
-                by
80
-                <html:span class="storyUserLink">
81
-                   <html:a class="storyUserName" onclick="openInTab(this.href); return false"></html:a>
82
-                </html:span>
83
-                <html:span class="storyDate"></html:span>
84
-            </html:div>
85
-        </html:div>
86
-    </html:div>
87 46
 </page>

+ 107
- 0
chrome/content/diggstory.xml View File

@@ -0,0 +1,107 @@
1
+<?xml version="1.0"?>
2
+<bindings id="diggstory"
3
+   xmlns="http://www.mozilla.org/xbl"
4
+   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
5
+   xmlns:xbl="http://www.mozilla.org/xbl"
6
+   xmlns:html="http://www.w3.org/1999/xhtml">
7
+    <binding id="diggstoryitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
8
+        <resources>
9
+            <stylesheet src="chrome://diggsidebar/skin/diggsidebar.css"/>
10
+        </resources>
11
+        <content>
12
+            <xul:vbox>
13
+            <html:div class="storyHeader">
14
+                <html:span class="storyRead" title="Unread">R</html:span>
15
+                <html:span class="storyNew" title="New">N</html:span>
16
+                <html:img src="chrome://diggsidebar/content/image/up.jpg" class="storyCEIcon" />
17
+                <html:span xbl:inherits="xbl:text=title" class="storyTitle"></html:span>
18
+            </html:div>
19
+            <html:div class="storyDetails">
20
+                <html:div>
21
+                    <html:span xbl:inherits="xbl:text=container" class="storyContainer"></html:span> &gt;
22
+                    <html:span xbl:inherits="xbl:text=topic" class="storyTopic"></html:span> /
23
+                    <html:span xbl:inherits="xbl:text=status" class="storyStatus"></html:span>
24
+                </html:div>
25
+                <html:div>
26
+                    <html:span xbl:inherits="xbl:text=desc" class="storyDesc"></html:span>
27
+                    <html:a xbl:inherits="href=link" class="storyLink" onclick="openInTab(this.href); return false">
28
+                        <html:img src="chrome://diggsidebar/content/image/external.png" />
29
+                    </html:a>
30
+                </html:div>
31
+                <html:div style="text-align:center;">
32
+                    <html:a xbl:inherits="href=href" class="storyHref" onclick="openInTab(this.href); return false">
33
+                        Digg This
34
+                    </html:a>
35
+                </html:div>
36
+                <html:div>
37
+                    <html:span class="storyPopularity">
38
+                        <html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
39
+                        <html:span xbl:inherits="xbl:text=diggs" class="storyDiggs"></html:span>
40
+                        <html:img src="chrome://diggsidebar/content/image/comments.png" width="15px" />
41
+                        <html:span xbl:inherits="xbl:text=comments" class="storyComments"></html:span>
42
+                    </html:span>
43
+                    by
44
+                    <html:a xbl:inherits="href=userlink,xbl:text=username" class="storyUserLink" onclick="openInTab(this.href); return false"></html:a>
45
+                    <html:span xbl:inherits="xbl:text=date" class="storyDate"></html:span>
46
+                </html:div>
47
+            </html:div>
48
+            </xul:vbox>
49
+        </content>
50
+        <implementation>
51
+            <constructor>
52
+                <![CDATA[
53
+                this.d = {};
54
+                this.d.read = false;
55
+                this.d.new = true;
56
+                ]]>
57
+            </constructor>
58
+            <property name="read"
59
+                onget="return this.d.read;"
60
+                onset="this.d.read = val; if(val==true) this.markAsRead();"/>
61
+            <property name="new"
62
+                onget="return this.d.new;"
63
+                onset="this.d.new = val; if(val==false) this.markAsOld();"/>
64
+            <method name="markAsRead">
65
+                <body>
66
+                <![CDATA[
67
+                    var storyRead = document.getAnonymousElementByAttribute(this, "class", "storyRead");
68
+                    storyRead.style.textDecoration = "line-through";
69
+                    storyRead.style.backgroundColor = "black";
70
+                    storyRead.style.color = "white";
71
+                    storyRead.title = "Read";
72
+                ]]>
73
+                </body>
74
+            </method>
75
+            <method name="markAsOld">
76
+                <body>
77
+                <![CDATA[
78
+                    var storyNew = document.getAnonymousElementByAttribute(this, "class", "storyNew");
79
+                    storyNew.style.textDecoration = "line-through";
80
+                    storyNew.style.backgroundColor = "black";
81
+                    storyNew.style.color = "white";
82
+                    storyNew.title = "Old";
83
+                ]]>
84
+                </body>
85
+            </method>
86
+            <method name="showDesc">
87
+                <body>
88
+                <![CDATA[
89
+                    document.getAnonymousElementByAttribute(this, "class", "storyCEIcon").src =
90
+                        "chrome://diggsidebar/content/image/down.jpg";
91
+                    document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'block';
92
+                ]]>
93
+                </body>
94
+            </method>
95
+            <method name="hideDesc">
96
+                <body>
97
+                <![CDATA[
98
+                    document.getAnonymousElementByAttribute(this, "class", "storyCEIcon").src =
99
+                        "chrome://diggsidebar/content/image/up.jpg";
100
+                    document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'none';
101
+                ]]>
102
+                </body>
103
+            </method>
104
+        </implementation>
105
+        <handlers></handlers>
106
+    </binding>
107
+</bindings>

+ 8
- 14
chrome/skin/diggsidebar.css View File

@@ -6,22 +6,18 @@ a {
6 6
 a img {
7 7
     border: none;
8 8
 }
9
-.storyList {
9
+#storyList {
10 10
     margin: 1px;
11 11
     border-style: solid !important;
12 12
     border-color: #000;
13 13
     border-width: 1px;
14
-    -moz-border-bottom-colors: #000 !important;
15
-    -moz-border-top-colors: #000 !important;
16
-    -moz-border-left-colors: #000 !important;
17
-    -moz-border-right-colors: #000 !important;
18 14
 }
19
-
20 15
 .storyDetails {
21 16
     padding: 3px;
22 17
     display: none;
23 18
     background-color: #ffffff;
24 19
     clear: both;
20
+    border-top: 1px dashed black;
25 21
 }
26 22
 .storyDetails > div {
27 23
     clear: both;
@@ -32,6 +28,7 @@ a img {
32 28
     padding: 0px 5px;
33 29
     font-size: x-small;
34 30
     font-weight: bold;
31
+    width: 100%;
35 32
 }
36 33
 .storyNew, .storyRead, .storyPopularity {
37 34
     float: right;
@@ -55,23 +52,20 @@ a img {
55 52
     background-color: blue;
56 53
 }
57 54
 
58
-richlistitem {
55
+#storyList richlistitem{
59 56
     border-bottom: 1px solid black;
60 57
     padding-bottom: 3px;
61 58
     color: #000000!important;
59
+    -moz-binding: url("chrome://diggsidebar/content/diggstory.xml#diggstoryitem");
62 60
 }
63
-richlistitem > div{
61
+
62
+richlistitem > vbox > div{
64 63
     width: 250px;
65 64
 }
66 65
 richlistitem[selected="true"] {
67
-    background-color: #FFFBF0;
66
+    background-color: #FFEBF0;
68 67
     color: inherit;
69 68
 }
70
-richlistitem[selected="true"] .storyDetails {
71
-    border-top: 1px dashed black;
72
-    background-color: #FFFBF0;
73
-}
74
-
75 69
 richlistitem .storyTitle:hover {
76 70
     background-color: green;
77 71
     color: white;

+ 3
- 3
install.rdf View File

@@ -4,12 +4,12 @@
4 4
          xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
5 5
   <RDF:Description RDF:about="rdf:#$55wJ23"
6 6
                    em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
7
-                   em:minVersion="1.5"
8
-                   em:maxVersion="3.0.*" />
7
+                   em:minVersion="3.0"
8
+                   em:maxVersion="3.1.*" />
9 9
   <RDF:Description RDF:about="urn:mozilla:install-manifest"
10 10
                    em:id="diggsidebar@abhinavsarkar.net"
11 11
                    em:name="Digg Sidebar"
12
-                   em:version="0.5.1"
12
+                   em:version="0.6"
13 13
                    em:creator="Abhinav Sarkar"
14 14
                    em:description="Shows Digg stories in real time in firefox sidebar."
15 15
                    em:homepageURL="http://code.google.com/p/digg-sidebar/"

Loading…
Cancel
Save