mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-27 13:47:58 +01:00
Poll tabs bug (#129)
* poll tabs hiding comment tabs fix * scope change to hiding tabs specifically * selectorCbChildren readability
This commit is contained in:
parent
35ba4087fa
commit
61cafb9054
1 changed files with 15 additions and 3 deletions
|
@ -4,7 +4,7 @@
|
||||||
* Apply event-based actions through data-* attributes. The attributes are structured like so: [data-event-action]
|
* Apply event-based actions through data-* attributes. The attributes are structured like so: [data-event-action]
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { $ } from './utils/dom';
|
import { $, $$ } from './utils/dom';
|
||||||
import { fetchHtml, handleError } from './utils/requests';
|
import { fetchHtml, handleError } from './utils/requests';
|
||||||
import { showBlock } from './utils/image';
|
import { showBlock } from './utils/image';
|
||||||
import { addTag } from './tagsinput';
|
import { addTag } from './tagsinput';
|
||||||
|
@ -21,6 +21,8 @@ const types = {
|
||||||
const actions = {
|
const actions = {
|
||||||
hide(data) { selectorCb(data.base, data.value, el => el.classList.add('hidden')); },
|
hide(data) { selectorCb(data.base, data.value, el => el.classList.add('hidden')); },
|
||||||
|
|
||||||
|
tabHide(data) { selectorCbChildren(data.base, data.value, el => el.classList.add('hidden')); },
|
||||||
|
|
||||||
show(data) { selectorCb(data.base, data.value, el => el.classList.remove('hidden')); },
|
show(data) { selectorCb(data.base, data.value, el => el.classList.remove('hidden')); },
|
||||||
|
|
||||||
toggle(data) { selectorCb(data.base, data.value, el => el.classList.toggle('hidden')); },
|
toggle(data) { selectorCb(data.base, data.value, el => el.classList.toggle('hidden')); },
|
||||||
|
@ -57,7 +59,7 @@ const actions = {
|
||||||
data.el.classList.add('selected');
|
data.el.classList.add('selected');
|
||||||
|
|
||||||
// Switch contents
|
// Switch contents
|
||||||
this.hide({ base: block, value: '.block__tab' });
|
this.tabHide({ base: block, value: '.block__tab' });
|
||||||
this.show({ base: block, value: `.block__tab[data-tab="${data.value}"]` });
|
this.show({ base: block, value: `.block__tab[data-tab="${data.value}"]` });
|
||||||
|
|
||||||
// If the tab has a 'data-load-tab' attribute, load and insert the content
|
// If the tab has a 'data-load-tab' attribute, load and insert the content
|
||||||
|
@ -81,6 +83,16 @@ function selectorCb(base = document, selector, cb) {
|
||||||
[].forEach.call(base.querySelectorAll(selector), cb);
|
[].forEach.call(base.querySelectorAll(selector), cb);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function selectorCbChildren(base = document, selector, cb) {
|
||||||
|
const sel = $$(selector, base);
|
||||||
|
|
||||||
|
for (const el of base.children) {
|
||||||
|
if (!sel.includes(el)) continue;
|
||||||
|
|
||||||
|
cb(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function matchAttributes(event) {
|
function matchAttributes(event) {
|
||||||
if (!types[event.type](event)) {
|
if (!types[event.type](event)) {
|
||||||
for (const action in actions) {
|
for (const action in actions) {
|
||||||
|
@ -102,4 +114,4 @@ function registerEvents() {
|
||||||
for (const type in types) document.addEventListener(type, matchAttributes);
|
for (const type in types) document.addEventListener(type, matchAttributes);
|
||||||
}
|
}
|
||||||
|
|
||||||
export { registerEvents };
|
export { registerEvents };
|
||||||
|
|
Loading…
Reference in a new issue