Browse Source

more changes in UI. added notification-on-error feature

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

+ 89
- 45
chrome/content/diggsidebar.js View File

@@ -25,17 +25,19 @@ var DiggSidebar = {
25 25
         topic: null,
26 26
         category: "all"
27 27
     },
28
-    updateInterval: 10,
28
+    updateInterval: 1000,
29 29
     updateIntervalDecay: 0,
30
+    lastUpdateAt: new Date().getTime(),
30 31
     shownStoriesCount: 30,
31 32
     categories: ['All', 'Popular', 'Upcoming', 'Hot', 'Top'],
32 33
     timerId: null,
33 34
     storyIds: [],
34
-    playing: true,
35
+    refreshing: false,
35 36
     stories: [],
37
+    expandedStory: null,
36 38
 
37 39
     fetchData: function(url, handler) {
38
-        DiggSidebar.UI.indicator.style.display = '';
40
+        DiggSidebar.indicateActivity();
39 41
 
40 42
         var request = new XMLHttpRequest();
41 43
         request.onerror = DiggSidebar.errorHandler;
@@ -45,7 +47,17 @@ var DiggSidebar = {
45 47
     },
46 48
 
47 49
     errorHandler: function(e) {
48
-        window.alert("Error in accessing data from Digg");
50
+        /*if (DiggSidebar.UI.notificationBox.allNotifications.length > 0)
51
+            DiggSidebar.UI.notificationBox.removeAllNotifications(true);*/
52
+        DiggSidebar.UI.notificationBox.appendNotification(
53
+            "Unable to access Digg",
54
+            "dsAccessFailNotification",
55
+            null,
56
+            "PRIORITY_CRITICAL_HIGH",
57
+            [{callback:DiggSidebar.getStories, label: "Retry", accessKey: "R"}]
58
+        );
59
+        DiggSidebar.refreshing = false;
60
+        DiggSidebar.indicateInactivity();
49 61
     },
50 62
 
51 63
     populateMenu: function(e) {
@@ -117,11 +129,10 @@ var DiggSidebar = {
117 129
             menu.appendChild(menupopup);
118 130
             DiggSidebar.UI.containerPopup.appendChild(menu);
119 131
         }
120
-        DiggSidebar.UI.indicator.style.display = 'none';
132
+        //DiggSidebar.indicateInactivity();
121 133
     },
122 134
 
123 135
     populateStoryList: function() {
124
-        DiggSidebar.Utils.removeAllChildren(DiggSidebar.UI.storyListBox);
125 136
         var newStoryIds = new Array();
126 137
 
127 138
         var jp = new JPath(DiggSidebar.stories);
@@ -138,6 +149,9 @@ var DiggSidebar = {
138 149
                 return story.$("container/short_name").json == DiggSidebar.endpoint.container;
139 150
             }).json;
140 151
 
152
+        if (filteredStories.length > 0)
153
+            DiggSidebar.Utils.removeAllChildren(DiggSidebar.UI.storyListBox);
154
+
141 155
         filteredStories.forEach(function (story, index) {
142 156
             if (index < DiggSidebar.shownStoriesCount) {
143 157
                 var now = new Date();
@@ -173,27 +187,23 @@ var DiggSidebar = {
173 187
                     link: story.link,
174 188
                     href:  story.href
175 189
                 }
176
-                for (attr in attributes)
190
+                for (var attr in attributes)
177 191
                     li.setAttribute(attr, attributes[attr]);
178 192
 
179 193
                 li.read = story.read;
194
+                if (story.id == DiggSidebar.expandedStory)
195
+                    li.showDescription();
180 196
             }
181 197
             if (DiggSidebar.storyIds.indexOf(story.id) == -1) newStoryIds.push(story.id);
182 198
         });
183 199
         DiggSidebar.storyIds = DiggSidebar.storyIds.concat(newStoryIds);
184
-        DiggSidebar.setUpdateInterval(DiggSidebar.stories.slice(0,5));
185
-
186
-        window.clearTimeout(DiggSidebar.timerId);
187
-        var timeout = Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)));
188
-        DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
189
-
190
-        DiggSidebar.UI.indicator.style.display = 'none';
191 200
     },
192 201
 
193 202
     showDescription: function(storyId) {
194 203
         var jp = new JPath(DiggSidebar.stories);
195 204
         var story = jp.query('//[id == ' + storyId + ']')[0];
196 205
         story.read = true;
206
+        DiggSidebar.expandedStory = parseInt(storyId);
197 207
 
198 208
         var listitems = DiggSidebar.UI.storyListBox.children;
199 209
         for (var i=0; i<listitems.length; i++)
@@ -203,26 +213,42 @@ var DiggSidebar = {
203 213
     },
204 214
 
205 215
     getStories: function() {
206
-        var ep = DiggSidebar.prefs.get("endpoint").value || '';
207
-        DiggSidebar.UI.endPointDesc.value = "digg" + ep;
208
-
209
-        DiggSidebar.fetchData("http://services.digg.com/stories" + ep.replace(/\/all/g, '') +
210
-            "?count=30" + "&type=json" +
211
-            "&appkey=" + encodeURIComponent("http://diggsidebar.googlepages.com"),
212
-            function(e) {
213
-                var newStories = DiggSidebar.Utils.decodeJson(e.target.responseText).stories.filter(
214
-                    function(story) {
215
-                        return !(DiggSidebar.storyIds.indexOf(story.id) != -1);
216
+        if (!DiggSidebar.refreshing) {
217
+            DiggSidebar.refreshing = true;
218
+            var ep = DiggSidebar.prefs.get("endpoint").value || '';
219
+
220
+            DiggSidebar.fetchData("http://services.digg.com/stories" + ep.replace(/\/all/g, '') +
221
+                "?count=30" + "&type=json" +
222
+                "&appkey=" + encodeURIComponent("http://diggsidebar.googlepages.com"),
223
+                function(e) {
224
+                    DiggSidebar.UI.endPointDesc.value = "digg" + ep;
225
+
226
+                    var stories = DiggSidebar.Utils.decodeJson(e.target.responseText).stories;
227
+                    var newStories = stories.filter(
228
+                        function(story) {
229
+                            return !(DiggSidebar.storyIds.indexOf(story.id) != -1);
230
+                        });
231
+                    newStories.forEach(function(story) {
232
+                        story.category = DiggSidebar.endpoint.category;
233
+                        story.read = false;
216 234
                     });
217
-                newStories.forEach(function(story) {
218
-                    story.category = DiggSidebar.endpoint.category;
219
-                    story.read = false;
235
+                    DiggSidebar.stories = newStories.concat(DiggSidebar.stories);
236
+                    var observerService = Components.classes["@mozilla.org/observer-service;1"]
237
+                        .getService(Components.interfaces.nsIObserverService);
238
+                    observerService.notifyObservers(null, DiggSidebar.storyListRefreshEventTopic, null);
239
+
240
+                    DiggSidebar.refreshing = false;
241
+                    DiggSidebar.setUpdateInterval(stories);
242
+
243
+                    window.clearTimeout(DiggSidebar.timerId);
244
+                    var timeout = DiggSidebar.calculateTimeout();
245
+                    DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
246
+
247
+                    DiggSidebar.indicateInactivity();
220 248
                 });
221
-                DiggSidebar.stories = newStories.concat(DiggSidebar.stories);
222
-                var observerService = Components.classes["@mozilla.org/observer-service;1"]
223
-                    .getService(Components.interfaces.nsIObserverService);
224
-                observerService.notifyObservers(null, DiggSidebar.storyListRefreshEventTopic, null);
225
-            });
249
+        } else {
250
+            window.setTimeout(DiggSidebar.getStories, 1000);
251
+        }
226 252
     },
227 253
 
228 254
     createMenu: function() {
@@ -264,6 +290,10 @@ var DiggSidebar = {
264 290
         //Adaptive update interval code END
265 291
     },
266 292
 
293
+    calculateTimeout: function() {
294
+        return Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)))
295
+    },
296
+
267 297
     setEndPoint: function(ep) {
268 298
         DiggSidebar.prefs.get("endpoint").value = ep;
269 299
         DiggSidebar.endpoint = DiggSidebar.getEndpointParts(ep);
@@ -287,19 +317,33 @@ var DiggSidebar = {
287 317
         return tmp;
288 318
     },
289 319
 
290
-    togglePlayPause: function() {
291
-        if (DiggSidebar.playing) {
292
-            window.clearTimeout(DiggSidebar.timerId);
293
-            DiggSidebar.UI.playPauseButton.image = "chrome://diggsidebar/content/image/Play.png";
294
-            DiggSidebar.UI.playPauseButton.setAttribute("tooltiptext", "Click to Start autoupdate");
295
-            DiggSidebar.playing = false;
296
-        } else {
297
-            var timeout = Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)));
298
-            DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
299
-            DiggSidebar.UI.playPauseButton.image = "chrome://diggsidebar/content/image/Pause.png";
300
-            DiggSidebar.UI.playPauseButton.setAttribute("tooltiptext", "Click to Pause autoupdate");
301
-            DiggSidebar.playing = true;
320
+    indicateActivity: function() {
321
+        DiggSidebar.UI.indicator.src = "chrome://global/skin/icons/loading_16.png";
322
+        with (DiggSidebar.UI.indicator.parentNode) {
323
+            disabled = true;
324
+            setAttribute('tooltiptext', "Refreshing");
325
+            onmouseover = null;
326
+        }
327
+    },
328
+
329
+    indicateInactivity: function() {
330
+        DiggSidebar.UI.indicator.src = "chrome://global/skin/icons/notloading_16.png";
331
+        with (DiggSidebar.UI.indicator.parentNode) {
332
+            disabled = false;
333
+            onmouseover = function() {
334
+                var autoRefreshTime = Math.round(
335
+                    (DiggSidebar.lastUpdateAt + DiggSidebar.calculateTimeout() - new Date().getTime())/1000
336
+                );
337
+                autoRefreshTime = (autoRefreshTime > 3600) ?
338
+                                        Math.round(autoRefreshTime/3600) + " hours":
339
+                                        (autoRefreshTime > 60) ?
340
+                                            Math.round(autoRefreshTime/60) + " minutes":
341
+                                            autoRefreshTime + " seconds";
342
+                setAttribute('tooltiptext', "Click to refresh now.\n" +
343
+                    "Autorefreshing in " + autoRefreshTime);
344
+            }
302 345
         }
346
+        DiggSidebar.lastUpdateAt = new Date().getTime();
303 347
     },
304 348
 
305 349
     initialize: function(){
@@ -307,12 +351,12 @@ var DiggSidebar = {
307 351
         var $ = function(id) {return document.getElementById(id)};
308 352
 
309 353
         DiggSidebar.UI = {};
354
+        DiggSidebar.UI.notificationBox = $('dsNotificationBox');
310 355
         DiggSidebar.UI.indicator = $('dsBusyIndicator');
311 356
         DiggSidebar.UI.topicPopup = $('dsTopicPopup');
312 357
         DiggSidebar.UI.containerPopup = $('dsContainerPopup');
313 358
         DiggSidebar.UI.storyListBox = $('dsStoryListBox');
314 359
         DiggSidebar.UI.endPointDesc = $('dsEndPointDesc');
315
-        DiggSidebar.UI.playPauseButton = $('dsPlayPauseButton');
316 360
 
317 361
         DiggSidebar.storyListObserver = new DiggSidebar.StoryListObserver();
318 362
         DiggSidebar.createMenu();

+ 8
- 11
chrome/content/diggsidebar.xul View File

@@ -41,22 +41,19 @@
41 41
                     </menu>
42 42
                 </menubar>
43 43
             </toolbaritem>
44
-            <toolbarbutton id="dsPlayPauseButton"
45
-                           image="chrome://diggsidebar/content/image/Pause.png"
46
-                           tooltiptext="Click to Pause autoupdate"
47
-                           oncommand="DiggSidebar.togglePlayPause()" />
48 44
             <toolbarspacer flex="5" />
49 45
             <toolbaritem>
50
-                <progressmeter flex="1"
51
-                               width="5"
52
-                               mode="undetermined"
53
-                               id="dsBusyIndicator"
54
-                               style="height: 85% !important; width: 30% !important" />
46
+                <toolbarbutton tooltiptext="Click to refresh" oncommand="DiggSidebar.getStories()">
47
+                    <image id="dsBusyIndicator"/>
48
+                </toolbarbutton>
55 49
             </toolbaritem>
56 50
         </toolbar>
57 51
     </hbox>
58
-    <description id="dsEndPointDesc">digg</description>
59
-    <richlistbox flex="1"
52
+    <notificationbox id="dsNotificationBox" dir="reverse">
53
+        <description id="dsEndPointDesc">digg</description>
54
+    </notificationbox>
55
+        <richlistbox flex="1"
60 56
                  id="dsStoryListBox"
57
+                 seltype="single"
61 58
                  onselect="DiggSidebar.showDescription(this.selectedItem.id.substr(6))" />
62 59
 </page>

+ 4
- 8
chrome/content/diggstory.xml View File

@@ -11,7 +11,7 @@
11 11
         <content>
12 12
             <xul:vbox flex="1">
13 13
             <xul:vbox class="storyHeader" flex="1">
14
-                <xul:label xbl:inherits="xbl:text=title" class="storyTitle"/>
14
+                <xul:description xbl:inherits="xbl:text=title" class="storyTitle"/>
15 15
             </xul:vbox>
16 16
             <xul:vbox class="storyDetails" flex="1">
17 17
                 <html:div class="storyCategory">
@@ -34,7 +34,7 @@
34 34
                 </html:div>
35 35
                 <html:div>
36 36
                     <html:span class="storyPopularity">
37
-                        <html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
37
+                        <html:img src="chrome://diggsidebar/content/image/digg.gif" width="15px" />
38 38
                         <html:span xbl:inherits="xbl:text=diggs" class="storyDiggs"></html:span>
39 39
                         <html:img src="chrome://diggsidebar/content/image/comments.png" width="15px" />
40 40
                         <html:span xbl:inherits="xbl:text=comments" class="storyComments"></html:span>
@@ -53,15 +53,11 @@
53 53
                 <![CDATA[
54 54
                 this.d = {};
55 55
                 this.d.read = false;
56
-                this.d.collapsed = true;
57 56
                 ]]>
58 57
             </constructor>
59 58
             <property name="read"
60 59
                 onget="return this.d.read;"
61 60
                 onset="this.d.read = val; if(val==true) this.markAsRead();"/>
62
-            <property name="collapsed"
63
-                onget="return this.d.collapsed;"
64
-                onset="this.d.collapsed = val;"/>
65 61
             <method name="markAsRead">
66 62
                 <body>
67 63
                 <![CDATA[
@@ -76,7 +72,7 @@
76 72
                 <![CDATA[
77 73
                     document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'block';
78 74
                     this.read = true;
79
-                    this.collapsed = false;
75
+                    this.selected = true;
80 76
                 ]]>
81 77
                 </body>
82 78
             </method>
@@ -84,7 +80,7 @@
84 80
                 <body>
85 81
                 <![CDATA[
86 82
                     document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'none';
87
-                    this.collapsed = true;
83
+                    this.selected = false;
88 84
                 ]]>
89 85
                 </body>
90 86
             </method>

BIN
chrome/content/image/Pause.png View File


BIN
chrome/content/image/Play.png View File


BIN
chrome/content/image/digg.gif View File


BIN
chrome/content/image/digg.png View File


+ 3
- 1
chrome/skin/diggsidebar.css View File

@@ -47,7 +47,9 @@ a img {
47 47
     color: white;
48 48
     background-color: blue;
49 49
 }
50
-
50
+.storyDiggs, .storyComments {
51
+    font-size: xx-small;
52
+}
51 53
 #dsStoryListBox richlistitem{
52 54
     border: 2px solid #E5ECF3;
53 55
     border-top: none;

Loading…
Cancel
Save