word/finder.js

   1 class WordFinder extends WordQuiz {
   2         add(catitem, rows) {
   3                 rows.forEach(word => {
   4                         if (!word) return;
   5                         const worditem = put(catitem, 'li');
   6                         const figitem = put(worditem, 'figure');
   7                         if (word.imgid) {
   8                                 put(figitem, 'img[src=$]', word.thumb());
   9                         }
  10                         if (word.title) {
  11                                 put(figitem, 'figcaption', {
  12                                         innerHTML: word.html,
  13                                 });
  14                         }
  15                         if (this.preset.debug) {
  16                                 put(figitem, '[title=$]', `id ${word.id} level ${word.level}`);
  17                         }
  18                         put(worditem, '.level' + word.level);
  19                         if (!word.subs.length) {
  20                                 return;
  21                         }
  22                         if (word.level <= 1 && word.subs.length >= 4) {
  23                                 put(worditem, '.large');
  24                         }
  25                         put(worditem, '.parent.expand');
  26
  27                         put(figitem, '[data-sup=$]', word.subs.length);
  28                         figitem.onclick = () => {
  29                                 let expansion;
  30                                 if (expansion = worditem.querySelector('ul')) {
  31                                         put(expansion, '!');
  32                                         put(worditem, '.expand');
  33                                         return;
  34                                 }
  35                                 expansion = put(worditem, 'ul');
  36                                 this.add(expansion, word.subs);
  37                                 put(worditem, '!expand');
  38                         };
  39                         return;
  40
  41                         // delve into subcategory
  42                         const expansion = put(worditem, 'ul');
  43                         //expansion.style.display = 'none';
  44                         this.add(expansion, word.subs);
  45                         //worditem.onclick = () => expansion.style.display = '';
  46                 });
  47         }
  48
  49         configure(input) {
  50                 this.preset.level = 3;
  51                 this.preset.images = false;
  52                 return super.configure(input);
  53         }
  54
  55         setup() {
  56                 super.setup();
  57                 if (this.preset.debug) {
  58                         put(document.head, 'link', {rel: 'stylesheet', href: '/word/debug.css'});
  59                 }
  60                 this.form.innerHTML = '';
  61                 put(this.form, 'p', 'Under construction.');
  62                 for (let cat of this.data.root()) {
  63                         this.add(put(this.form, 'ul.gallery'), [cat]);
  64                 }
  65         }
  66
  67         stop() {}
  68 };