Make subscription list collapsible

This commit is contained in:
Sam Ruby 2006-11-19 12:57:44 -05:00
parent 20cb60df7c
commit 52716d99f7
3 changed files with 98 additions and 50 deletions

View File

@ -146,6 +146,10 @@ h1 {
display: inline;
}
#footer img {
display: none;
}
/* ----------------------------- Body ---------------------------- */
#body {

View File

@ -30,12 +30,52 @@
<xsl:text>&#10;</xsl:text>
<h1><xsl:value-of select="atom:title"/></h1>
<xsl:text>&#10;</xsl:text>
<div id="sidebar">
<xsl:text>&#10;&#10;</xsl:text>
<div id="body">
<xsl:apply-templates select="atom:entry"/>
<xsl:text>&#10;&#10;</xsl:text>
<h2>Subscriptions</h2>
<xsl:text>&#10;</xsl:text>
</div>
<h1>Subscriptions </h1>
<xsl:text>&#10;&#10;</xsl:text>
<div id="sidebar">
<h2>Info</h2>
<dl>
<dt>Last updated:</dt>
<dd>
<span class="date" title="GMT">
<xsl:value-of select="atom:updated/@planet:format"/>
</span>
</dd>
<dt>Powered by:</dt>
<dd>
<a href="http://intertwingly.net/code/venus/">
<img src="images/venus.png" width="80" height="15"
alt="Venus" border="0"/>
</a>
</dd>
<dt>Export:</dt>
<dd>
<ul>
<li>
<a href="opml.xml">
<img src="images/opml.png" alt="OPML"/>
</a>
</li>
<li>
<a href="foafroll.xml">
<img src="images/foaf.png" alt="FOAF"/>
</a>
</li>
</ul>
</dd>
</dl>
</div>
<xsl:text>&#10;&#10;</xsl:text>
<div id="footer">
<ul>
<xsl:for-each select="planet:source">
<xsl:sort select="planet:name"/>
@ -80,48 +120,9 @@
</xsl:for-each>
<xsl:text>&#10;</xsl:text>
</ul>
<xsl:text>&#10;&#10;</xsl:text>
<h2>Info</h2>
<dl>
<dt>Last updated:</dt>
<dd>
<span class="date" title="GMT">
<xsl:value-of select="atom:updated/@planet:format"/>
</span>
</dd>
<dt>Powered by:</dt>
<dd>
<a href="http://intertwingly.net/code/venus/">
<img src="images/venus.png" width="80" height="15"
alt="Venus" border="0"/>
</a>
</dd>
<dt>Export:</dt>
<dd>
<ul>
<li>
<a href="opml.xml">
<img src="images/opml.png" alt="OPML"/>
</a>
</li>
<li>
<a href="foafroll.xml">
<img src="images/foaf.png" alt="FOAF"/>
</a>
</li>
</ul>
</dd>
</dl>
</div>
<xsl:text>&#10;&#10;</xsl:text>
<div id="body">
<xsl:apply-templates select="atom:entry"/>
<xsl:text>&#10;&#10;</xsl:text>
</div>
<xsl:text>&#10;</xsl:text>
</body>
</html>
</xsl:template>

View File

@ -18,6 +18,7 @@ function stopPropagation(event) {
// scroll back to the previous article
function prevArticle(event) {
for (var i=entries.length; --i>=0;) {
if (!entries[i].anchor) continue;
if (entries[i].anchor.offsetTop < document.documentElement.scrollTop) {
window.location.hash=entries[i].anchor.id;
stopPropagation(event);
@ -29,6 +30,7 @@ function prevArticle(event) {
// advance to the next article
function nextArticle(event) {
for (var i=1; i<entries.length; i++) {
if (!entries[i].anchor) continue;
if (entries[i].anchor.offsetTop-20 > document.documentElement.scrollTop) {
window.location.hash=entries[i].anchor.id;
stopPropagation(event);
@ -84,17 +86,20 @@ function selectOption() {
// add navkeys option to sidebar
function addOption(event) {
if (entries.length > 1 && entries[entries.length-1].parent.offsetTop > 0) {
var sidebar = document.getElementById('sidebar');
if (!sidebar) return;
var sidebar = document.getElementById('sidebar');
if (!sidebar) return;
for (var i=entries.length; --i>=0;) {
var h2 = null;
for (var i=entries.length; --i>=0;) {
if (entries[i].parent.offsetTop > 0) {
var a = entries[i].anchor = document.createElement('a');
a.id = "news-" + i;
entries[i].parent.insertBefore(a, entries[i].parent.firstChild);
if (h2 == null) h2 = document.createElement('h2');
}
}
var h2 = document.createElement('h2');
if (h2 != null) {
h2.appendChild(document.createTextNode('Options'));
sidebar.appendChild(h2);
@ -203,8 +208,46 @@ function moveDateHeaders() {
}
}
function moveSidebar() {
var sidebar = document.getElementById('sidebar');
var h1 = sidebar.previousSibling;
while (h1.nodeType != 1) h1=h1.previousSibling;
h1.parentNode.removeChild(h1);
var footer = document.getElementById('footer');
var ul = footer.firstChild;
while (ul.nodeType != 1) ul=ul.nextSibling;
footer.removeChild(ul);
sidebar.insertBefore(ul, sidebar.firstChild);
var h2 = document.createElement('h2');
h2.appendChild(h1.firstChild);
var twisty = document.createElement('a');
twisty.appendChild(document.createTextNode('\u25bc'));
twisty.title = 'hide';
twisty.onclick = function() {
var display = 'block';
if (this.childNodes[0].nodeValue == '\u25ba') {
this.title = 'hide';
this.childNodes[0].nodeValue = '\u25bc';
} else {
this.title = 'show';
this.childNodes[0].nodeValue = '\u25ba';
display = 'none';
}
ul.style.display = display;
createCookie("subscriptions", display, 365);
}
var cookie = readCookie("subscriptions");
if (cookie && cookie == 'none') twisty.onclick();
h2.appendChild(twisty);
sidebar.insertBefore(h2, sidebar.firstChild);
var body = document.getElementById('body');
sidebar.parentNode.removeChild(sidebar);
body.parentNode.insertBefore(sidebar, body);
}
// adjust dates to local time zones, optionally provide navigation keys
function personalize() {
moveSidebar();
findEntries();
addOption();
moveDateHeaders();