background: rgba(0, 0, 0, .5);
}
+.gallery figure[data-sup]:after {
+ position: absolute;
+ right: 0;
+ content: attr(data-sup);
+ color: #FFF;
+ background: #0006;
+ border-radius: 1em;
+ padding: .1ex .4em;
+ margin: .4em;
+}
+.gallery .expand > figure[data-sup]:after {
+ content: '+' attr(data-sup);
+ background: #0008;
+ font-size: 150%;
+ border: 2px solid #FFF8;
+}
+
/* specialised galleries */
body#word {
innerHTML: this.namehtml(word.title),
});
}
+ 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 ${word.id} 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 = '';
});
}