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

git-svn-id: file:///tmp/snv/trunk@14 12951d8a-c33d-4b7c-b961-822215c816e1
master
Abhinav Sarkar 2008-12-05 21:44:05 +00:00
parent fc0419fc57
commit 507406c079
8 changed files with 103 additions and 64 deletions

View File

@ -25,17 +25,19 @@ var DiggSidebar = {
topic: null,
category: "all"
},
updateInterval: 10,
updateInterval: 1000,
updateIntervalDecay: 0,
lastUpdateAt: new Date().getTime(),
shownStoriesCount: 30,
categories: ['All', 'Popular', 'Upcoming', 'Hot', 'Top'],
timerId: null,
storyIds: [],
playing: true,
refreshing: false,
stories: [],
expandedStory: null,
fetchData: function(url, handler) {
DiggSidebar.UI.indicator.style.display = '';
DiggSidebar.indicateActivity();
var request = new XMLHttpRequest();
request.onerror = DiggSidebar.errorHandler;
@ -45,7 +47,17 @@ var DiggSidebar = {
},
errorHandler: function(e) {
window.alert("Error in accessing data from Digg");
/*if (DiggSidebar.UI.notificationBox.allNotifications.length > 0)
DiggSidebar.UI.notificationBox.removeAllNotifications(true);*/
DiggSidebar.UI.notificationBox.appendNotification(
"Unable to access Digg",
"dsAccessFailNotification",
null,
"PRIORITY_CRITICAL_HIGH",
[{callback:DiggSidebar.getStories, label: "Retry", accessKey: "R"}]
);
DiggSidebar.refreshing = false;
DiggSidebar.indicateInactivity();
},
populateMenu: function(e) {
@ -117,11 +129,10 @@ var DiggSidebar = {
menu.appendChild(menupopup);
DiggSidebar.UI.containerPopup.appendChild(menu);
}
DiggSidebar.UI.indicator.style.display = 'none';
//DiggSidebar.indicateInactivity();
},
populateStoryList: function() {
DiggSidebar.Utils.removeAllChildren(DiggSidebar.UI.storyListBox);
var newStoryIds = new Array();
var jp = new JPath(DiggSidebar.stories);
@ -138,6 +149,9 @@ var DiggSidebar = {
return story.$("container/short_name").json == DiggSidebar.endpoint.container;
}).json;
if (filteredStories.length > 0)
DiggSidebar.Utils.removeAllChildren(DiggSidebar.UI.storyListBox);
filteredStories.forEach(function (story, index) {
if (index < DiggSidebar.shownStoriesCount) {
var now = new Date();
@ -173,27 +187,23 @@ var DiggSidebar = {
link: story.link,
href: story.href
}
for (attr in attributes)
for (var attr in attributes)
li.setAttribute(attr, attributes[attr]);
li.read = story.read;
if (story.id == DiggSidebar.expandedStory)
li.showDescription();
}
if (DiggSidebar.storyIds.indexOf(story.id) == -1) newStoryIds.push(story.id);
});
DiggSidebar.storyIds = DiggSidebar.storyIds.concat(newStoryIds);
DiggSidebar.setUpdateInterval(DiggSidebar.stories.slice(0,5));
window.clearTimeout(DiggSidebar.timerId);
var timeout = Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)));
DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
DiggSidebar.UI.indicator.style.display = 'none';
},
showDescription: function(storyId) {
var jp = new JPath(DiggSidebar.stories);
var story = jp.query('//[id == ' + storyId + ']')[0];
story.read = true;
DiggSidebar.expandedStory = parseInt(storyId);
var listitems = DiggSidebar.UI.storyListBox.children;
for (var i=0; i<listitems.length; i++)
@ -203,26 +213,42 @@ var DiggSidebar = {
},
getStories: function() {
var ep = DiggSidebar.prefs.get("endpoint").value || '';
DiggSidebar.UI.endPointDesc.value = "digg" + ep;
if (!DiggSidebar.refreshing) {
DiggSidebar.refreshing = true;
var ep = DiggSidebar.prefs.get("endpoint").value || '';
DiggSidebar.fetchData("http://services.digg.com/stories" + ep.replace(/\/all/g, '') +
"?count=30" + "&type=json" +
"&appkey=" + encodeURIComponent("http://diggsidebar.googlepages.com"),
function(e) {
var newStories = DiggSidebar.Utils.decodeJson(e.target.responseText).stories.filter(
function(story) {
return !(DiggSidebar.storyIds.indexOf(story.id) != -1);
DiggSidebar.fetchData("http://services.digg.com/stories" + ep.replace(/\/all/g, '') +
"?count=30" + "&type=json" +
"&appkey=" + encodeURIComponent("http://diggsidebar.googlepages.com"),
function(e) {
DiggSidebar.UI.endPointDesc.value = "digg" + ep;
var stories = DiggSidebar.Utils.decodeJson(e.target.responseText).stories;
var newStories = stories.filter(
function(story) {
return !(DiggSidebar.storyIds.indexOf(story.id) != -1);
});
newStories.forEach(function(story) {
story.category = DiggSidebar.endpoint.category;
story.read = false;
});
newStories.forEach(function(story) {
story.category = DiggSidebar.endpoint.category;
story.read = false;
DiggSidebar.stories = newStories.concat(DiggSidebar.stories);
var observerService = Components.classes["@mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.notifyObservers(null, DiggSidebar.storyListRefreshEventTopic, null);
DiggSidebar.refreshing = false;
DiggSidebar.setUpdateInterval(stories);
window.clearTimeout(DiggSidebar.timerId);
var timeout = DiggSidebar.calculateTimeout();
DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
DiggSidebar.indicateInactivity();
});
DiggSidebar.stories = newStories.concat(DiggSidebar.stories);
var observerService = Components.classes["@mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
observerService.notifyObservers(null, DiggSidebar.storyListRefreshEventTopic, null);
});
} else {
window.setTimeout(DiggSidebar.getStories, 1000);
}
},
createMenu: function() {
@ -264,6 +290,10 @@ var DiggSidebar = {
//Adaptive update interval code END
},
calculateTimeout: function() {
return Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)))
},
setEndPoint: function(ep) {
DiggSidebar.prefs.get("endpoint").value = ep;
DiggSidebar.endpoint = DiggSidebar.getEndpointParts(ep);
@ -287,32 +317,46 @@ var DiggSidebar = {
return tmp;
},
togglePlayPause: function() {
if (DiggSidebar.playing) {
window.clearTimeout(DiggSidebar.timerId);
DiggSidebar.UI.playPauseButton.image = "chrome://diggsidebar/content/image/Play.png";
DiggSidebar.UI.playPauseButton.setAttribute("tooltiptext", "Click to Start autoupdate");
DiggSidebar.playing = false;
} else {
var timeout = Math.round(DiggSidebar.updateInterval*(Math.pow(1.5, DiggSidebar.updateIntervalDecay)));
DiggSidebar.timerId = window.setTimeout(DiggSidebar.getStories, timeout);
DiggSidebar.UI.playPauseButton.image = "chrome://diggsidebar/content/image/Pause.png";
DiggSidebar.UI.playPauseButton.setAttribute("tooltiptext", "Click to Pause autoupdate");
DiggSidebar.playing = true;
indicateActivity: function() {
DiggSidebar.UI.indicator.src = "chrome://global/skin/icons/loading_16.png";
with (DiggSidebar.UI.indicator.parentNode) {
disabled = true;
setAttribute('tooltiptext', "Refreshing");
onmouseover = null;
}
},
indicateInactivity: function() {
DiggSidebar.UI.indicator.src = "chrome://global/skin/icons/notloading_16.png";
with (DiggSidebar.UI.indicator.parentNode) {
disabled = false;
onmouseover = function() {
var autoRefreshTime = Math.round(
(DiggSidebar.lastUpdateAt + DiggSidebar.calculateTimeout() - new Date().getTime())/1000
);
autoRefreshTime = (autoRefreshTime > 3600) ?
Math.round(autoRefreshTime/3600) + " hours":
(autoRefreshTime > 60) ?
Math.round(autoRefreshTime/60) + " minutes":
autoRefreshTime + " seconds";
setAttribute('tooltiptext', "Click to refresh now.\n" +
"Autorefreshing in " + autoRefreshTime);
}
}
DiggSidebar.lastUpdateAt = new Date().getTime();
},
initialize: function(){
DiggSidebar.endpoint = DiggSidebar.getEndpointParts(DiggSidebar.prefs.get("endpoint").value);
var $ = function(id) {return document.getElementById(id)};
DiggSidebar.UI = {};
DiggSidebar.UI.notificationBox = $('dsNotificationBox');
DiggSidebar.UI.indicator = $('dsBusyIndicator');
DiggSidebar.UI.topicPopup = $('dsTopicPopup');
DiggSidebar.UI.containerPopup = $('dsContainerPopup');
DiggSidebar.UI.storyListBox = $('dsStoryListBox');
DiggSidebar.UI.endPointDesc = $('dsEndPointDesc');
DiggSidebar.UI.playPauseButton = $('dsPlayPauseButton');
DiggSidebar.storyListObserver = new DiggSidebar.StoryListObserver();
DiggSidebar.createMenu();

View File

@ -41,22 +41,19 @@
</menu>
</menubar>
</toolbaritem>
<toolbarbutton id="dsPlayPauseButton"
image="chrome://diggsidebar/content/image/Pause.png"
tooltiptext="Click to Pause autoupdate"
oncommand="DiggSidebar.togglePlayPause()" />
<toolbarspacer flex="5" />
<toolbaritem>
<progressmeter flex="1"
width="5"
mode="undetermined"
id="dsBusyIndicator"
style="height: 85% !important; width: 30% !important" />
<toolbarbutton tooltiptext="Click to refresh" oncommand="DiggSidebar.getStories()">
<image id="dsBusyIndicator"/>
</toolbarbutton>
</toolbaritem>
</toolbar>
</hbox>
<description id="dsEndPointDesc">digg</description>
<richlistbox flex="1"
<notificationbox id="dsNotificationBox" dir="reverse">
<description id="dsEndPointDesc">digg</description>
</notificationbox>
<richlistbox flex="1"
id="dsStoryListBox"
seltype="single"
onselect="DiggSidebar.showDescription(this.selectedItem.id.substr(6))" />
</page>

View File

@ -11,7 +11,7 @@
<content>
<xul:vbox flex="1">
<xul:vbox class="storyHeader" flex="1">
<xul:label xbl:inherits="xbl:text=title" class="storyTitle"/>
<xul:description xbl:inherits="xbl:text=title" class="storyTitle"/>
</xul:vbox>
<xul:vbox class="storyDetails" flex="1">
<html:div class="storyCategory">
@ -34,7 +34,7 @@
</html:div>
<html:div>
<html:span class="storyPopularity">
<html:img src="chrome://diggsidebar/content/image/digg.png" width="15px" />
<html:img src="chrome://diggsidebar/content/image/digg.gif" 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>
@ -53,15 +53,11 @@
<![CDATA[
this.d = {};
this.d.read = false;
this.d.collapsed = true;
]]>
</constructor>
<property name="read"
onget="return this.d.read;"
onset="this.d.read = val; if(val==true) this.markAsRead();"/>
<property name="collapsed"
onget="return this.d.collapsed;"
onset="this.d.collapsed = val;"/>
<method name="markAsRead">
<body>
<![CDATA[
@ -76,7 +72,7 @@
<![CDATA[
document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'block';
this.read = true;
this.collapsed = false;
this.selected = true;
]]>
</body>
</method>
@ -84,7 +80,7 @@
<body>
<![CDATA[
document.getAnonymousElementByAttribute(this, "class", "storyDetails").style.display = 'none';
this.collapsed = true;
this.selected = false;
]]>
</body>
</method>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 929 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 KiB

View File

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