Poll tabs bug (#129)

* poll tabs hiding comment tabs fix

* scope change to hiding tabs specifically

* selectorCbChildren readability
This commit is contained in:
alpacawren 2020-06-06 17:58:55 -04:00 committed by GitHub
parent 35ba4087fa
commit 61cafb9054
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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 };