word/finder: collapse categories until clicked

Reduce image traffic until wanted.  Concept without proper filtering,
recursion, or initial defaults.

diff --git a/base.css b/base.css
index 97d8128a9eb4c9ae9594662417e20d6f83f4ec09..46f6e35f2014dbee7799cd42c0dfb365950e4fee 100644 (file)
--- a/base.css
+++ b/base.css
@@ -767,6 +767,23 @@ figure img {
        background: rgba(0, 0, 0, .5);
 }
 
+.gallery figure[data-sup]:after {
+       position: absolute;
+       right: 0;
+       content: attr(data-sup);
+       color: #FFF;
+       background: #0006;
+       border-radius: 1em;
+       padding: .1ex .4em;
+       margin: .4em;
+}
+.gallery .expand > figure[data-sup]:after {
+       content: '+' attr(data-sup);
+       background: #0008;
+       font-size: 150%;
+       border: 2px solid #FFF8;
+}
+
 /* specialised galleries */
 
 body#word {

diff --git a/word/debug.css b/word/debug.css
index ce0738cead3ef5b15c0465caafafdc07a8663d86..a07469693df3cf20287793edfe16a608ab7fd938 100644 (file)
--- a/word/debug.css
+++ b/word/debug.css
@@ -4,15 +4,6 @@ figure:before {
        width: 100%;
        height: 100%;
 }
-.parent > figure:after {
-       position: absolute;
-       right: 0;
-       content: '+';
-       color: #FFF;
-       background: #0008;
-       border-radius: 1em;
-       padding: 0 .2em;
-}
 figure .debug {
        position: absolute;
        left: .1em;

diff --git a/word/finder.js b/word/finder.js
index 9d2b6cf321ba4f3534ac31857df856b5d31a21ce..ed8905462a098fb43e4029dddb0d468baacd8284 100644 (file)
--- a/word/finder.js
+++ b/word/finder.js
@@ -22,21 +22,37 @@ class WordFinder extends WordQuiz {
                                        innerHTML: this.namehtml(word.title),
                                });
                        }
+                       if (this.preset.debug) {
+                               put(figitem, '[title=$]', `id ${word.id} level ${word.level}`);
+                       }
                        put(worditem, '.level' + word.level);
+                       if (!word.subs.length) {
+                               return;
+                       }
                        if (word.level <= 1 && word.subs.length >= 4) {
                                put(worditem, '.large');
                        }
-                       if (word.subs.length) {
-                               // delve into subcategory
-                               put(worditem, '.parent');
-                               const expansion = put(worditem, 'ul');
-                               //expansion.style.display = 'none';
+                       put(worditem, '.parent.expand');
+
+                       put(figitem, '[data-sup=$]', word.subs.length);
+                       figitem.onclick = () => {
+                               let expansion;
+                               if (expansion = worditem.querySelector('ul')) {
+                                       put(expansion, '!');
+                                       put(worditem, '.expand');
+                                       return;
+                               }
+                               expansion = put(worditem, 'ul');
                                this.add(expansion, word.subs);
-                               //worditem.onclick = () => expansion.style.display = '';
-                       }
-                       if (this.preset.debug) {
-                               put(figitem, '[title=$]', `id ${word.id} level ${word.level}`);
-                       }
+                               put(worditem, '!expand');
+                       };
+                       return;
+
+                       // delve into subcategory
+                       const expansion = put(worditem, 'ul');
+                       //expansion.style.display = 'none';
+                       this.add(expansion, word.subs);
+                       //worditem.onclick = () => expansion.style.display = '';
                });
        }