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 (file)
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 (file)
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 bb12a832c73b170e496dc09e25e6fb88aa0c8849..d32368bb01bdaae2160c64798384e7fe29138418 100644 (file)
--- a/word/quiz.js
+++ b/word/quiz.js
@@ -8,21 +8,30 @@ Array.prototype.shuffle = function () {
 
 class WordQuiz {
        dataselect(json) {
 
 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);
                // 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 = [];
                        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);
                        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]);
                }
                        }
                        rows = rows.map(row => json[row]).filter(row => row[2]);
                }