From: Mischa POSLAWSKY <perl@shiar.org>
Date: Tue, 8 Feb 2022 22:04:22 +0000 (+0100)
Subject: word/finder: emulate gallery page in javascript
X-Git-Tag: v1.13~22
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/20332e82f5c6365a8d65c75192985d846a99a2dd

word/finder: emulate gallery page in javascript

Prepare replacement of the server-side index page.
---

diff --git a/word/finder.js b/word/finder.js
new file mode 100644
index 0000000..606f033
--- /dev/null
+++ b/word/finder.js
@@ -0,0 +1,32 @@
+class WordFinder extends WordQuiz {
+	add(parentitem, rows) {
+		const catitem = put(parentitem, 'ul');
+		rows.forEach(ref => {
+			const [title, level, imgid] = this.data[ref];
+			const worditem = put(catitem, 'li');
+			const figitem = put(worditem, 'figure');
+			if (imgid) {
+				put(figitem, 'img[src=$]', `/data/word/32/${imgid}.jpg`);
+			}
+			if (title) {
+				let html = title.replace(/\/(.*)/, ' <small>($1)</small>');
+				put(figitem, 'figcaption', {
+					innerHTML: html,
+				});
+			}
+			if (this.cats[ref]) {
+				// delve into subcategory
+				put(worditem, '.parent');
+				this.add(worditem, this.cats[ref]);
+			}
+		});
+	}
+
+	setup() {
+		this.gallery = document.getElementById('gallery');
+		put(this.gallery, '-p', 'Under construction.');
+		this.add(this.gallery, this.preset.cat ? [this.preset.cat] : this.cats[null]);
+	}
+
+	stop() {}
+};
diff --git a/word/finder.plp b/word/finder.plp
new file mode 100644
index 0000000..6e302ba
--- /dev/null
+++ b/word/finder.plp
@@ -0,0 +1,15 @@
+<(../common.inc.plp)><:
+
+our $wordlistbase;
+
+Html({
+	raw => <<'EOT',
+<script src="/word/put.min.js"></script>
+<script src="/word/quiz.js"></script>
+<script src="/word/finder.js"></script>
+EOT
+});
+
+say '<h1>Words</h1>';
+say '<section id="gallery" class="gallery"></section>';
+say "<script>new WordFinder('/$wordlistbase.json')</script>";
diff --git a/word/quiz.js b/word/quiz.js
index bb12a83..d32368b 100644
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -8,21 +8,30 @@ Array.prototype.shuffle = function () {
 
 class WordQuiz {
 	dataselect(json) {
+		this.data = json;
+		this.cats = {}; // category lookup
+		for (let i in json) {
+			let cat = json[i][3];
+			if (this.cats[cat]) {
+				this.cats[cat].push(i);
+			}
+			else {
+				this.cats[cat] = [i];
+			}
+		}
+		return this.datafilter(json);
+	}
+
+	datafilter(json) {
 		// find viable rows from json data
 		let rows = Object.values(json);
-		if (this.preset.cat !== undefined) {
-			let cats = {}; // category lookup
-			for (let i in json) {
-				let cat = json[i][3];
-				if (!cats[cat]) cats[cat] = [];
-				cats[cat].push(i)
-			}
 
+		if (this.preset.cat !== undefined) {
 			rows = [];
-			let children = cats[this.preset.cat];
+			let children = this.cats[this.preset.cat];
 			for (let loop = 0; children.length && loop < 20; loop++) {
 				rows.push(...children);
-				children = children.map(cat => cats[cat]).filter(is => is).flat();
+				children = children.map(cat => this.cats[cat]).filter(is => is).flat();
 			}
 			rows = rows.map(row => json[row]).filter(row => row[2]);
 		}