From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 8 May 2023 19:32:34 +0000 (+0200)
Subject: word/finder: collapse categories until clicked
X-Git-Tag: v1.14~21
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/be8886dee519a890138da95643787b230e760295

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 97d8128..46f6e35 100644
--- 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 ce0738c..a074696 100644
--- 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 9d2b6cf..ed89054 100644
--- 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 = '';
 		});
 	}