From d7b60efdb533f1601de95fead5540418a996a7a5 Mon Sep 17 00:00:00 2001
From: Almar Klein <almar@almarklein.org>
Date: Sat, 7 Oct 2023 23:11:10 +0200
Subject: [PATCH 1/2] Allow setting custom anchors/hashes for the items.

---
 dist/faq-div.min.js | 47 +++++++++++++++++++++++----------------------
 src/faq-div.js      | 26 ++++++++++++++++---------
 website/faq.md      |  2 +-
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/dist/faq-div.min.js b/dist/faq-div.min.js
index cc0998b..d8b8ad2 100644
--- a/dist/faq-div.min.js
+++ b/dist/faq-div.min.js
@@ -23,31 +23,32 @@ var s=1;if(step==0){h.style.transition='none';}else if(step!=q[h.id]){return;}el
 q[h.id]=step+1;window.setTimeout(r,s,h,step+1);}
 function t(o,m){let p=a[o];if(p){p.toggle_one(m);}}
 function l(ref_node,o){var u=ref_node.dataset;a[o]={'onhash':v,'toggle_one':w};var x=[[null]];var y={};var z=[];var aa=document.createElement('input');var ab=document.createElement('div');ab.classList.add('search-info');aa.setAttribute('type','text');aa.setAttribute('placeholder',u.searchPlaceholder||'Search FAQ ...');aa.addEventListener('input',ac);aa.className='search';if(u.search=='false'){aa.style.display='none';}
-ad();ae();af();function ad(){var j=ref_node.children[0];while(j){var ag=j.nodeName.toLowerCase();if(ag=='h3'){var m='';for(let ah of j.innerText.toLowerCase().replace(new RegExp(' ','g'),'-')){if('abcdefghijklmnopqrstuvwxyz_-0123456789'.indexOf(ah)>=0){m=m+ah;}}
-var ai=m;for(let aj=1;aj<1000;aj++){if(typeof y[m]=='undefined'){break;}
-else{m=ai+aj;}}
-y[m]={'hash':m};x.push([m,j]);}else if(ag=='h2'||ag=='h1'||ag=='hr'){x.push([null,j]);}else{let ak=x[x.length-1];ak.push(j);}
+ad();ae();af();function ad(){var j=ref_node.children[0];while(j){var ag=j.nodeName.toLowerCase();if(ag=='h3'){var m='';for(let ah of j.children){if(ah.nodeName=="A"&&ah.name){m=ah.name;}}
+if(!m){for(let ai of j.innerText.toLowerCase().replace(new RegExp(' ','g'),'-')){if('abcdefghijklmnopqrstuvwxyz_-0123456789'.indexOf(ai)>=0){m=m+ai;}}
+var aj=m;for(let ak=1;ak<1000;ak++){if(typeof y[m]=='undefined'){break;}
+else{m=aj+ak;}}}
+y[m]={'hash':m};x.push([m,j]);}else if(ag=='h2'||ag=='h1'||ag=='hr'){x.push([null,j]);}else{let al=x[x.length-1];al.push(j);}
 j=j.nextSibling;}}
-function ae(){for(let al of x){let m=al[0];if(m!==null){y[m].headertext=al[1].textContent.toLowerCase();y[m].text='';for(let aj=2;aj<al.length;aj++){y[m].text+=al[aj].textContent.toLowerCase()+'\n';}}}}
-function af(){ref_node.innerHTML='';ref_node.appendChild(aa);ref_node.appendChild(ab);for(let al of x){let m=al[0];if(m!==null){let am=document.createElement('div');am.classList.add('qa');am.setAttribute('id',m);var an=al[1];am.appendChild(an);let ao=document.createElement('div');ao.classList.add('answer');for(let aj=2;aj<al.length;aj++){ao.append(al[aj]);}
-am.appendChild(ao);if(u.collapse!='false'){am.classList.add('collapsible');am.classList.add('collapsed');an.setAttribute('onclick','faqdiv.toggle("'+o+'","'+m+'");');let ap=document.createElement('a');ap.className='collapse-icon';an.appendChild(ap);}
-if(u.link!='false'){let aq=document.createElement('a');aq.className='link-icon';aq.setAttribute('href','#'+o+':'+m);aq.setAttribute('onclick','event.stopPropagation();');an.appendChild(aq);}
-ref_node.appendChild(am);y[m].node=am;}else{let ar=document.createElement('div');for(let aj=1;aj<al.length;aj++){ar.append(al[aj]);}
-ref_node.appendChild(ar);z.push(ar)}}}
-function as(){var i=[];for(let j of ref_node.getElementsByClassName('qa searchresult')){i.push(j);}
+function ae(){for(let am of x){let m=am[0];if(m!==null){y[m].headertext=am[1].textContent.toLowerCase();y[m].text='';for(let ak=2;ak<am.length;ak++){y[m].text+=am[ak].textContent.toLowerCase()+'\n';}}}}
+function af(){ref_node.innerHTML='';ref_node.appendChild(aa);ref_node.appendChild(ab);for(let am of x){let m=am[0];if(m!==null){let an=document.createElement('div');an.classList.add('qa');an.setAttribute('id',m);var ao=am[1];an.appendChild(ao);let ap=document.createElement('div');ap.classList.add('answer');for(let ak=2;ak<am.length;ak++){ap.append(am[ak]);}
+an.appendChild(ap);if(u.collapse!='false'){an.classList.add('collapsible');an.classList.add('collapsed');ao.setAttribute('onclick','faqdiv.toggle("'+o+'","'+m+'");');let aq=document.createElement('a');aq.className='collapse-icon';ao.appendChild(aq);}
+if(u.link!='false'){let ar=document.createElement('a');ar.className='link-icon';ar.setAttribute('href','#'+o+':'+m);ar.setAttribute('onclick','event.stopPropagation();');ao.appendChild(ar);}
+ref_node.appendChild(an);y[m].node=an;}else{let as=document.createElement('div');for(let ak=1;ak<am.length;ak++){as.append(am[ak]);}
+ref_node.appendChild(as);z.push(as)}}}
+function at(){var i=[];for(let j of ref_node.getElementsByClassName('qa searchresult')){i.push(j);}
 for(let j of i){ref_node.removeChild(j);}}
-function v(m){var at=y[m];if(at){at.node.classList.remove('hidden');at.node.classList.remove('collapsed');at.node.scrollIntoView();r(at.node);}else if(m){aa.value=m.replace(new RegExp('-','g'),' ');ac();}}
-function w(m){let at=y[m];at.node.classList.remove('hidden');if(at.node.classList.contains('collapsed')){if(u.collapse=='allbutone'){for(let au in y){let av=y[au];av.node.classList.add('collapsed');}}
-at.node.classList.remove('collapsed');}else if(at.node.classList.contains('collapsible')){at.node.classList.add('collapsed');}}
-function ac(){var aw='ljbsdfaljhsbdkey';aw;var ax=aa.value.toLowerCase().replace(',','');var ay=[];for(let az of ax.split(' ')){if(az.length>0){ay.push(az);}}
-var ba=' how can i , and , or , is ';var bb=[];for(let bc=0;bc<=ay.length;bc++){for(let bd=bc+1;bd<=ay.length;bd++){let be=ay.slice(bc,bd).join(' ');if(ba.indexOf(' '+be+' ')<0){bb.push([bd-bc,be]);}}}
-bb.sort(function(a,b){return b[0]-a[0];});if(bb.length==0){as();ab.innerHTML='';for(let m in y){let at=y[m];at.node.classList.remove('hidden');if(at.node.classList.contains('collapsible')){at.node.classList.add('collapsed');}}
-for(let j of z){j.classList.remove('hidden');}}else{for(let m in y){let at=y[m];at.node.classList.add('hidden');at.node.classList.remove('collapsed');}
+function v(m){var au=y[m];if(au){au.node.classList.remove('hidden');au.node.classList.remove('collapsed');au.node.scrollIntoView();r(au.node);}else if(m){aa.value=m.replace(new RegExp('-','g'),' ');ac();}}
+function w(m){let au=y[m];au.node.classList.remove('hidden');if(au.node.classList.contains('collapsed')){if(u.collapse=='allbutone'){for(let av in y){let aw=y[av];aw.node.classList.add('collapsed');}}
+au.node.classList.remove('collapsed');}else if(au.node.classList.contains('collapsible')){au.node.classList.add('collapsed');}}
+function ac(){var ax='ljbsdfaljhsbdkey';ax;var ay=aa.value.toLowerCase().replace(',','');var az=[];for(let ba of ay.split(' ')){if(ba.length>0){az.push(ba);}}
+var bb=' how can i , and , or , is ';var bc=[];for(let bd=0;bd<=az.length;bd++){for(let be=bd+1;be<=az.length;be++){let bf=az.slice(bd,be).join(' ');if(bb.indexOf(' '+bf+' ')<0){bc.push([be-bd,bf]);}}}
+bc.sort(function(a,b){return b[0]-a[0];});if(bc.length==0){at();ab.innerHTML='';for(let m in y){let au=y[m];au.node.classList.remove('hidden');if(au.node.classList.contains('collapsible')){au.node.classList.add('collapsed');}}
+for(let j of z){j.classList.remove('hidden');}}else{for(let m in y){let au=y[m];au.node.classList.add('hidden');au.node.classList.remove('collapsed');}
 for(let j of z){j.classList.add('hidden');}
-var bf=[];for(let m in y){let at=y[m];let bg=0;for(let n=0;n<bb.length;n++){let k=bb[n][0];let bh=bb[n][1];if(at.headertext.indexOf(bh)>=0){bg+=5*k;}
-if(at.text.indexOf(bh)>=0){bg+=1*k;}}
-bf.push([bg,at.node]);}
-bf.sort(function(a,b){return b[0]-a[0];});as();var bi=0;for(let n=0;n<bf.length;n++){let bg=bf[n][0];let j=bf[n][1];j.classList.add('hidden');if(bg>0&&n<16){let bj=j.cloneNode(true);bj.classList.add('searchresult');ref_node.appendChild(bj);bi+=1;bj.classList.remove('hidden');if(bj.classList.remove('collapsible')){if(n<5){bj.classList.remove('collapsed');}else{bj.classList.add('collapsed');}}}}
-let bk=u.searchInfo||'COUNT results';ab.innerHTML=bk.replace('COUNT',bi).replace('SUBJECT',aa.value)+'<br>';}}}
+var bg=[];for(let m in y){let au=y[m];let bh=0;for(let n=0;n<bc.length;n++){let k=bc[n][0];let bi=bc[n][1];if(au.headertext.indexOf(bi)>=0){bh+=5*k;}
+if(au.text.indexOf(bi)>=0){bh+=1*k;}}
+bg.push([bh,au.node]);}
+bg.sort(function(a,b){return b[0]-a[0];});at();var bj=0;for(let n=0;n<bg.length;n++){let bh=bg[n][0];let j=bg[n][1];j.classList.add('hidden');if(bh>0&&n<16){let bk=j.cloneNode(true);bk.classList.add('searchresult');ref_node.appendChild(bk);bj+=1;bk.classList.remove('hidden');if(bk.classList.remove('collapsible')){if(n<5){bk.classList.remove('collapsed');}else{bk.classList.add('collapsed');}}}}
+let bl=u.searchInfo||'COUNT results';ab.innerHTML=bl.replace('COUNT',bj).replace('SUBJECT',aa.value)+'<br>';}}}
 window.faqdiv={'version':version,'toggle':t,'init':b};
 })();
\ No newline at end of file
diff --git a/src/faq-div.js b/src/faq-div.js
index 67ad021..271a5ea 100644
--- a/src/faq-div.js
+++ b/src/faq-div.js
@@ -138,18 +138,26 @@ function faq_this_div(ref_node, faq_id) {
         while (node) {
             var node_type = node.nodeName.toLowerCase();
             if (node_type == 'h3') {
-                // Get hash for this question
+                // Get hash for this question. First try to find an actual anchor.
                 var hash = '';
-                for (let c of node.innerText.toLowerCase().replace(new RegExp(' ', 'g'), '-')) {
-                    if ('abcdefghijklmnopqrstuvwxyz_-0123456789'.indexOf(c) >= 0) {
-                        hash = hash + c;
+                for (let subnode of node.children) {
+                    if (subnode.nodeName == "A" && subnode.name) {
+                        hash = subnode.name;
                     }
                 }
-                // Make sure it is unique
-                var ori_hash = hash;
-                for (let j=1; j<1000; j++) {
-                    if (typeof index[hash] == 'undefined') {break; }
-                    else { hash = ori_hash + j; }
+                if (!hash) {
+                    // Derive hash from the text. The downside of this is that when the text is changed, any links using the hash become invalid.
+                    for (let c of node.innerText.toLowerCase().replace(new RegExp(' ', 'g'), '-')) {
+                        if ('abcdefghijklmnopqrstuvwxyz_-0123456789'.indexOf(c) >= 0) {
+                            hash = hash + c;
+                        }
+                    }
+                    // Make sure it is unique
+                    var ori_hash = hash;
+                    for (let j=1; j<1000; j++) {
+                        if (typeof index[hash] == 'undefined') {break; }
+                        else { hash = ori_hash + j; }
+                    }
                 }
                 // Add to index and sections
                 index[hash] = {'hash': hash};
diff --git a/website/faq.md b/website/faq.md
index 8ec6999..9c1ff2e 100644
--- a/website/faq.md
+++ b/website/faq.md
@@ -65,7 +65,7 @@ of your FAQ in a div that has the class "faq":
 ```
 
 
-### How can I configure my FAQ?
+### <a name="configure"></a> How can I configure my FAQ?
 
 Configurarion is done using the `data` attributes, e.g.:
 ```

From 162f462295e90419f0c59d759bbffbf404ce12e3 Mon Sep 17 00:00:00 2001
From: Almar Klein <almar@almarklein.org>
Date: Sat, 7 Oct 2023 23:36:45 +0200
Subject: [PATCH 2/2] more reliable collapsing

---
 dist/faq-div.min.js | 24 ++++++++++++------------
 src/faq-div.js      | 16 ++++++++++------
 website/index.html  |  2 +-
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/dist/faq-div.min.js b/dist/faq-div.min.js
index d8b8ad2..03dadba 100644
--- a/dist/faq-div.min.js
+++ b/dist/faq-div.min.js
@@ -37,18 +37,18 @@ ref_node.appendChild(an);y[m].node=an;}else{let as=document.createElement('div')
 ref_node.appendChild(as);z.push(as)}}}
 function at(){var i=[];for(let j of ref_node.getElementsByClassName('qa searchresult')){i.push(j);}
 for(let j of i){ref_node.removeChild(j);}}
-function v(m){var au=y[m];if(au){au.node.classList.remove('hidden');au.node.classList.remove('collapsed');au.node.scrollIntoView();r(au.node);}else if(m){aa.value=m.replace(new RegExp('-','g'),' ');ac();}}
-function w(m){let au=y[m];au.node.classList.remove('hidden');if(au.node.classList.contains('collapsed')){if(u.collapse=='allbutone'){for(let av in y){let aw=y[av];aw.node.classList.add('collapsed');}}
-au.node.classList.remove('collapsed');}else if(au.node.classList.contains('collapsible')){au.node.classList.add('collapsed');}}
-function ac(){var ax='ljbsdfaljhsbdkey';ax;var ay=aa.value.toLowerCase().replace(',','');var az=[];for(let ba of ay.split(' ')){if(ba.length>0){az.push(ba);}}
-var bb=' how can i , and , or , is ';var bc=[];for(let bd=0;bd<=az.length;bd++){for(let be=bd+1;be<=az.length;be++){let bf=az.slice(bd,be).join(' ');if(bb.indexOf(' '+bf+' ')<0){bc.push([be-bd,bf]);}}}
-bc.sort(function(a,b){return b[0]-a[0];});if(bc.length==0){at();ab.innerHTML='';for(let m in y){let au=y[m];au.node.classList.remove('hidden');if(au.node.classList.contains('collapsible')){au.node.classList.add('collapsed');}}
-for(let j of z){j.classList.remove('hidden');}}else{for(let m in y){let au=y[m];au.node.classList.add('hidden');au.node.classList.remove('collapsed');}
+function au(){if(u.collapse=='allbutone'){for(let m in y){let av=y[m];av.node.classList.add('collapsed');}}}
+function v(m){var av=y[m];if(av){au();av.node.classList.remove('hidden');av.node.classList.remove('collapsed');av.node.scrollIntoView();r(av.node);}else if(m){aa.value=m.replace(new RegExp('-','g'),' ');ac();}}
+function w(m){let av=y[m];av.node.classList.remove('hidden');if(av.node.classList.contains('collapsed')){au();av.node.classList.remove('collapsed');}else if(av.node.classList.contains('collapsible')){av.node.classList.add('collapsed');}}
+function ac(){var aw='ljbsdfaljhsbdkey';aw;var ax=aa.value.toLowerCase().replace(',','');var ay=[];for(let az of ax.split(' ')){if(az.length>0){ay.push(az);}}
+var ba=' how can i , and , or , is ';var bb=[];for(let bc=0;bc<=ay.length;bc++){for(let bd=bc+1;bd<=ay.length;bd++){let be=ay.slice(bc,bd).join(' ');if(ba.indexOf(' '+be+' ')<0){bb.push([bd-bc,be]);}}}
+bb.sort(function(a,b){return b[0]-a[0];});if(bb.length==0){at();ab.innerHTML='';for(let m in y){let av=y[m];av.node.classList.remove('hidden');if(av.node.classList.contains('collapsible')){av.node.classList.add('collapsed');}}
+for(let j of z){j.classList.remove('hidden');}}else{for(let m in y){let av=y[m];av.node.classList.add('hidden');av.node.classList.remove('collapsed');}
 for(let j of z){j.classList.add('hidden');}
-var bg=[];for(let m in y){let au=y[m];let bh=0;for(let n=0;n<bc.length;n++){let k=bc[n][0];let bi=bc[n][1];if(au.headertext.indexOf(bi)>=0){bh+=5*k;}
-if(au.text.indexOf(bi)>=0){bh+=1*k;}}
-bg.push([bh,au.node]);}
-bg.sort(function(a,b){return b[0]-a[0];});at();var bj=0;for(let n=0;n<bg.length;n++){let bh=bg[n][0];let j=bg[n][1];j.classList.add('hidden');if(bh>0&&n<16){let bk=j.cloneNode(true);bk.classList.add('searchresult');ref_node.appendChild(bk);bj+=1;bk.classList.remove('hidden');if(bk.classList.remove('collapsible')){if(n<5){bk.classList.remove('collapsed');}else{bk.classList.add('collapsed');}}}}
-let bl=u.searchInfo||'COUNT results';ab.innerHTML=bl.replace('COUNT',bj).replace('SUBJECT',aa.value)+'<br>';}}}
+var bf=[];for(let m in y){let av=y[m];let bg=0;for(let n=0;n<bb.length;n++){let k=bb[n][0];let bh=bb[n][1];if(av.headertext.indexOf(bh)>=0){bg+=5*k;}
+if(av.text.indexOf(bh)>=0){bg+=1*k;}}
+bf.push([bg,av.node]);}
+bf.sort(function(a,b){return b[0]-a[0];});at();var bi=0;for(let n=0;n<bf.length;n++){let bg=bf[n][0];let j=bf[n][1];j.classList.add('hidden');if(bg>0&&n<16){let bj=j.cloneNode(true);bj.classList.add('searchresult');ref_node.appendChild(bj);bi+=1;bj.classList.remove('hidden');if(bj.classList.remove('collapsible')){if(n<5){bj.classList.remove('collapsed');}else{bj.classList.add('collapsed');}}}}
+let bk=u.searchInfo||'COUNT results';ab.innerHTML=bk.replace('COUNT',bi).replace('SUBJECT',aa.value)+'<br>';}}}
 window.faqdiv={'version':version,'toggle':t,'init':b};
 })();
\ No newline at end of file
diff --git a/src/faq-div.js b/src/faq-div.js
index 271a5ea..f7be0db 100644
--- a/src/faq-div.js
+++ b/src/faq-div.js
@@ -247,9 +247,18 @@ function faq_this_div(ref_node, faq_id) {
         }
     }
 
+    function maybe_collapse_all() {
+        if (config.collapse == 'allbutone') {
+            for (let hash in index) { // hide all
+                let qa = index[hash];
+                qa.node.classList.add('collapsed');
+            }
+        }
+    }
     function onhash(hash) {
         var qa = index[hash];
         if (qa) {
+            maybe_collapse_all();
             qa.node.classList.remove('hidden');
             qa.node.classList.remove('collapsed');
             qa.node.scrollIntoView();
@@ -264,12 +273,7 @@ function faq_this_div(ref_node, faq_id) {
         let qa = index[hash];
         qa.node.classList.remove('hidden');
         if (qa.node.classList.contains('collapsed')) {
-            if (config.collapse == 'allbutone') {
-                for (let hash2 in index) { // hide all
-                    let qa2 = index[hash2];
-                    qa2.node.classList.add('collapsed');
-                }
-            }
+            maybe_collapse_all();
             qa.node.classList.remove('collapsed');
         } else if (qa.node.classList.contains('collapsible')) {
             qa.node.classList.add('collapsed');
diff --git a/website/index.html b/website/index.html
index eb509c0..d65bd27 100644
--- a/website/index.html
+++ b/website/index.html
@@ -508,7 +508,7 @@ <h2>Docs</h2>
 </style>
 
 <div class='faqcontainer'>
-    <div class='faq' data-search-placeholder='Search docs ...'>
+    <div class='faq' data-search-placeholder='Search docs ...' data-collapse='allbutone'>
     {{ faq }}
     </div>
 </div>