moved html template to xbl component
git-svn-id: file:///tmp/snv/trunk@7 12951d8a-c33d-4b7c-b961-822215c816e1master
부모
b9d6c2f9a2
커밋
5b4693e621
|
@ -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
|
||||
|
|
|
@ -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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
|
|
|
@ -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> >
|
||||
<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>
|
||||
|
|
|
@ -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> >
|
||||
<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>
|
|
@ -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;
|
||||
|
|
|
@ -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/"
|
||||
|
|
불러오는 중...
Reference in New Issue