word/finder: move html formatting into common method

[sheet.git] / word / finder.js

diff --git a/word/finder.js b/word/finder.js
index 0f97c0f4258a264ff67d635a6471c7c2f6bd2b43..3dca29b8711061be90d9cbe5193fbca7c8329c7e 100644 (file)
--- a/word/finder.js
+++ b/word/finder.js
@@ -1,14 +1,4 @@
 class WordFinder extends WordQuiz {
-       namehtml(name) {
-               let aliases = name.split('/');
-               let html = aliases.shift();
-               html = html.replace(/\((.+)\)/, '<small>$1</small>');
-               for (let alias of aliases) {
-                       html += ` <small>(${alias})</small>`;
-               }
-               return html;
-       }
-
        add(catitem, rows) {
                rows.forEach(word => {
                        if (!word) return;
@@ -19,24 +9,40 @@ class WordFinder extends WordQuiz {
                        }
                        if (word.title) {
                                put(figitem, 'figcaption', {
-                                       innerHTML: this.namehtml(word.title),
+                                       innerHTML: word.html,
                                });
                        }
+                       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 ${ref} 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 = '';
                });
        }