word/finder.js

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