philomena/assets/js/boorujs.js

/**
 * BoorUJS
 *
 * Apply event-based actions through data-* attributes. The attributes are structured like so: [data-event-action]
 */

import { $, $$ } from './utils/dom';
import { fetchHtml, handleError } from './utils/requests';
import { showBlock } from './utils/image';
import { addTag } from './tagsinput';

// Event types and any qualifying conditions - return true to not run action
const types = {
  click(event) { return event.button !== 0; /* Left-click only */ },

  change() { /* No qualifier */ },

  fetchcomplete() { /* No qualifier */ },
};

const actions = {
  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')); },

  toggle(data) { selectorCb(data.base, data.value, el => el.classList.toggle('hidden')); },

  submit(data) { selectorCb(data.base, data.value, el => el.submit()); },

  disable(data) { selectorCb(data.base, data.value, el => el.disabled = true); },

  copy(data) {
    document.querySelector(data.value).select();
    document.execCommand('copy');
  },

  inputvalue(data) { document.querySelector(data.value).value = data.el.dataset.setValue; },

  selectvalue(data) { document.querySelector(data.value).value = data.el.querySelector(':checked').dataset.setValue; },

  checkall(data) { $$(`${data.value} input[type=checkbox]`).forEach(c => { c.checked = !c.checked; }); },

  focus(data) { document.querySelector(data.value).focus(); },

  preventdefault() { /* The existence of this entry is enough */ },

  addtag(data) {
    addTag(document.querySelector(data.el.closest('[data-target]').dataset.target), data.el.dataset.tagName);
  },

  tab(data) {
    const block = data.el.parentNode.parentNode,
          newTab = $(`.block__tab[data-tab="${data.value}"]`),
          loadTab = data.el.dataset.loadTab;

    // Switch tab
    const selectedTab = block.querySelector('.selected');
    if (selectedTab) {
      selectedTab.classList.remove('selected');
    }
    data.el.classList.add('selected');

    // Switch contents
    this.tabHide({ base: block, value: '.block__tab' });
    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 (loadTab && !newTab.dataset.loaded) {
      fetchHtml(loadTab)
        .then(handleError)
        .then(response => response.text())
        .then(response => newTab.innerHTML = response)
        .then(() => newTab.dataset.loaded = true)
        .catch(() => newTab.textContent = 'Error!');
    }

  },

  unfilter(data) { showBlock(data.el.closest('.image-show-container')); },

};

// Use this function to apply a callback to elements matching the selectors
function selectorCb(base = document, 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) {
  if (!types[event.type](event)) {
    for (const action in actions) {

      const attr = `data-${event.type}-${action.toLowerCase()}`,
            el = event.target && event.target.closest(`[${attr}]`),
            value = el && el.getAttribute(attr);

      if (el) {
        // Return true if you don't want to preventDefault
        actions[action]({ attr, el, value }) || event.preventDefault();
      }

    }
  }
}

function registerEvents() {
  for (const type in types) document.addEventListener(type, matchAttributes);
}

export { registerEvents };