Make subscription list collapsible

themes/asf/default.css

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

themes/asf/index.html.xslt

@@ -30,12 +30,52 @@
         <xsl:text>&#10;</xsl:text>
         <h1><xsl:value-of select="atom:title"/></h1>
 
-        <xsl:text>&#10;</xsl:text>
+        <xsl:text>&#10;&#10;</xsl:text>
-        <div id="sidebar">
+        <div id="body">
-
+          <xsl:apply-templates select="atom:entry"/>
           <xsl:text>&#10;&#10;</xsl:text>
-          <h2>Subscriptions</h2>
+        </div>
-          <xsl:text>&#10;</xsl:text>
+
+        <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>
+        <xsl:text>&#10;</xsl:text>
-        <div id="body">
-          <xsl:apply-templates select="atom:entry"/>
-          <xsl:text>&#10;&#10;</xsl:text>
-        </div>
       </body>
     </html>
   </xsl:template>

themes/asf/personalize.js

@@ -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');
-    var sidebar = document.getElementById('sidebar');
+  if (!sidebar) return;
-    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();