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                         if (true) {
  26                                 // delve into subcategory
  27                                 put(worditem, '.parent');
  28                                 const expansion = put(worditem, 'ul');
  29                                 this.add(expansion, word.subs);
  30                         }
  31
  32                         // hide or reselect subcategories
  33                         put(figitem, '[data-sup=$]', word.subs.length);
  34                         figitem.onclick = () => {
  35                                 let expansion;
  36                                 if (expansion = worditem.querySelector('ul')) {
  37                                         put(expansion, '!');
  38                                         put(worditem, '.expand');
  39                                         return;
  40                                 }
  41                                 expansion = put(worditem, 'ul');
  42                                 this.add(expansion, word.subs);
  43                                 put(worditem, '!expand');
  44                         };
  45                 });
  46         }
  47
  48         configure(input) {
  49                 this.preset.level = 1;
  50                 this.preset.images = false;
  51                 return super.configure(input);
  52         }
  53
  54         setup() {
  55                 super.setup();
  56                 if (this.preset.debug) {
  57                         put(document.head, 'link', {rel: 'stylesheet', href: '/word/debug.css'});
  58                 }
  59                 this.form.innerHTML = '';
  60                 put(this.form, 'p', 'Under construction.');
  61                 for (let cat of this.data.root()) {
  62                         this.add(put(this.form, 'ul.gallery'), [cat]);
  63                 }
  64         }
  65
  66         stop() {}
  67 };