moved html template to xbl component

git-svn-id: file:///tmp/snv/trunk@7 12951d8a-c33d-4b7c-b961-822215c816e1
master
Abhinav Sarkar 2008-12-02 11:43:47 +00:00
parent b9d6c2f9a2
commit 5b4693e621
6 changed files with 149 additions and 181 deletions

View File

@ -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

View File

@ -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';
}

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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/"