From 1189f3a842debe4029b654052738a97ec6f6b80a Mon Sep 17 00:00:00 2001
From: q <q@moonq.org>
Date: Thu, 26 Oct 2017 11:20:45 +0300
Subject: [PATCH] fold topics in mobile view

---
 index.html | 42 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index a2e97ae..cbb786a 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,11 @@
     #open_blank_box { position:relative; left: 0.0em; border: 0px solid black; padding-left: 0em; }
     #open_blank_arrow { position: relative; left: 0em; top: 0em;}
     .hidden { display:none; }
+    .fold_plus::after {
+        content:" (+)";
+        vertical-align: super;
+        font-size: 50%;
+    }
 </STYLE>
 <script language="javascript">
 function init() {
@@ -73,6 +78,7 @@ function init() {
     filter_load();
     hitList=search_hits(document.getElementById("filter").value);
     print_results(hitList);
+    fold_initial();
     scroll_load();
 }
 function narrow_window() {
@@ -94,11 +100,13 @@ function make_link(md) {
     return "<li class=nolink>"+md
 }
 
-function make_head(c) {
+function make_head(c,index="") {
     var name=c.substring(1).trim();
     var head=c.replace(/ /g,"&nbsp;");
-    var id=name.replace(/ /g,"");
-    return '<a name="'+name+'" id="anchor_'+id+'"><div class=head align=center>'+head+'</div></a><hr WIDTH="100%" SIZE=3 NOSHADE>';
+    var id=name.replace(/ /g,"")+"_"+index;
+    return '<a name="'+name+'" id="anchor_'+id+'" onclick="fold_content(\''+id+'\')">'+
+        '<div class=head align=center id="head_'+id+'">'+head+'</div></a>'+
+        '<hr WIDTH="100%" SIZE=3 NOSHADE>';
 }
 function make_menu() {
     var doc=document.getElementById("menu_span");
@@ -202,14 +210,17 @@ function print_results(hitList) {
         if ( linkList[c].substring(0,2) == "# " ) {
           var name=linkList[c].substring(1).trim().replace(/ /g,"");
           var td=document.createElement("td");
-          td.id="td_"+name;
+          td.id="td_"+name+"_"+cat;
+          var td_content = document.createElement("div");
+          td_content.id="content_"+name+"_"+cat;
           if (narrow_window()) { td.className+=" narrow"; }
-          td.innerHTML+=make_head(linkList[c]);
+          td.innerHTML+=make_head(linkList[c],cat);
+          td.appendChild(td_content);
           cats.push({name:name, td:td, count:0});
           cat+=1;
         } else {
           if (hitList.indexOf(c)==-1) { continue }
-          td.innerHTML+=make_link(linkList[c]);
+          td_content.innerHTML+=make_link(linkList[c]);
           cats[cat-1].count++;
         }
     }
@@ -345,6 +356,25 @@ function filter_cookies(cookies,name) {
   }
   return null
 }
+function fold_content(name) {
+  if (!narrow_window()) { return }
+  var title = document.getElementById("head_"+name);
+  var el = document.getElementById("content_"+name);
+  el.hidden = ! el.hidden;
+  title.classList.toggle("fold_plus");
+}
+function fold_initial() {
+  if (!narrow_window()) { return }
+  var slides = document.getElementsByClassName("head");
+  for(var i = 0; i < slides.length; i++) {
+    var el = slides.item(i);
+    var rect = el.getBoundingClientRect();
+    if (window.innerHeight < rect.top) {
+      var name = el.id.replace("head_","");
+      fold_content(name);
+    }
+  }
+}
 function set_cookie(name,value) {
   // Save cookies for 2 hours
   document.cookie = name + "=" + value.toString() + "&" + window.location.pathname +