shortBulma ライブラリ

shortBulma$$.jsのソースコード

// shortBulma$$.js

// ss: String, not selector
const $$Id0 = (id) => {
  return document.getElementById(id);
};
const $$Id = (id) => {
  id = id.substring(0, 1) === '#' ? id.substring(1) : id;
  return document.getElementById(id);
};

// selector
const $$q = (sel) => document.querySelector(sel);
const $$qAll = (sel) => document.querySelectorAll(sel);
const $$oq = (o, sel) => o.querySelector(sel);
const $$oqAll = (o, sel) => o.querySelectorAll(sel);

const $$de = (f) => {
  document.addEventListener('DOMContentLoaded', f);
};

const $$oe = (o, f, evNa = 'click') => {
  o.addEventListener(evNa, f);
};

const $$qoe = (sel, f, evNa = 'click') => {
  $$oe($$q(sel), f, evNa);
};

const $$dqoe = (sel, f) => {
  $$de(() => $$qe(sel, f));
};

const $$qecL = (sel, selT, cN = 'is-active', mN = 'toggle') => {
  $$qe(sel, (e) => {
    e.stopPropagation();
    $$qcL(sel, cN, mN);
    $$qcL(selT, cN, mN);
  });
};

const $$qe = (sel, f, evNa = 'click') => {
  $$oe($$q(sel), f, evNa);
};

const $$doe = (o, f) => {
  $$de(() => $$oe(o, f));
};

const $$qAe = (sel, f) => {
  $$qAll(sel).forEach((o) => $$oe(o, f));
};

const $$qcL = (sel, cN = 'is-active', mN = 'toggle') =>
  $$q(sel).classList[mN](cN);

const $$ocL = (o, cN = 'is-active', mN = 'toggle') => o.classList[mN](cN);

const $$DF = () => new DocumentFragment();

const $$oes = (o, f) => {
  o.addEventListener('submit', f);
};

//  <template> 要素は、そのHTMLTemplateElement.contentプロパティにDocumentFragmentを含みます。
const $$tC = (id) => {
  return $$Id(id).content;
};

const $$tCc = (id, b = true) => {
  return document.importNode($$tC(id), b);
};

const $$tCco = (o, b = true) => {
  return document.importNode(o, b);
};

const $$mkTemplate = (id, v) => {
  const template = document.createElement('template');
  template.id = id;
  template.innerHTML = v;
  $$q('body').appendChild(template);
};

const $$da_t = (id) => document.body.appendChild($$tCc(id));
const $$oa_t = (o, id) => o.appendChild($$tCc(id));

const $$ogA = (o, ss) => o.getAttribute('data-' + ss);
const $$ogD = (o, ss) => o.dataset[ss];
const $$qogA = (sel, ss) => $$q(sel).getAttribute('data-' + ss);
const $$qogD = (sel, ss) => $$q(sel).dataset[ss];

const $$na = (ss) => document.getElementsByName(ss); // form radio

const $$qcLm = (
  sel,
  { selT, cN = 'is-active' },
  mN = 'toggle',
  stopP = true
) => {
  $$ocLm($$q(sel), { trgt: $$q(selT) });
};

const $$ocLm = (o, { trgt, cN = 'is-active' }, mN = 'toggle', stopP = true) => {
  $$oe(o, (e) => {
    if (stopP) e.stopPropagation();
    trgt.classList[mN](cN);
  });
};

const $$oAcLm = (
  o,
  { trgts, cN = 'is-active' }, // trgts: array
  mN = 'toggle',
  stopP = true
) => {
  $$oe(o, (e) => {
    if (stopP) e.stopPropagation();
    trgts.forEach((t) => t.classList[mN](cN));
  });
};

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
const $$bulmaMenu = (ss, ssT) => {
  $$qecL(ss, ssT);
  $$dqoe('body', (e) => {
    e.stopPropagation();
    const b = $$q(ss);
    if (b.classList.contains('is-active')) {
      $$ocL(b);
      $$qcL(ssT);
    }
  });
};

const $$bulmaTabs = (ssTabs, ssContent) => {
  const tabs = $$qAll(ssTabs);
  const boxes = $$qAll(ssContent);

  tabs.forEach((tab) => {
    const target = $$Id(tab.dataset.target);

    $$oe(tab, () => {
      $$bulmaTab(tabs, tab);
      $$bulmaTabR(boxes, target, 'is-hidden');
    });
  });
};

// $$bulmaTabs('.tabs li', '#tab-content > div');

const $$bulmaTab = (items, target, cN = 'is-active') => {
  items.forEach((item) => {
    if (item === target) {
      $$ocL(item, cN, 'add');
    } else {
      $$ocL(item, cN, 'remove');
    }
  });
};

const $$bulmaTabR = (items, target, cN = 'is-active') => {
  items.forEach((item) => {
    if (item === target) {
      $$ocL(item, cN, 'remove');
    } else {
      $$ocL(item, cN, 'add');
    }
  });
};

const $$bulmaModal = (sel, selB, selM) => {
  $$qcLm(sel, { selT: selM });
  $$qcLm(selB, { selT: selM });
};

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Bulmaとは直接関係ありません。
const $$codeS = (id) => { // クリックしたテキストをすべて選択
  const pre1 = $$Id(id);
  if (!pre1) return;

  $$oe(pre1, () => {
    document
      .getSelection()
      .setBaseAndExtent(pre1, 0, pre1, pre1.childNodes.length);
    // console.log('pre1.childNodes.length', pre1.childNodes.length);
  });
};