@cahyo-dimas/freeday 1.7.0

package/src/freeday-cascade.js

@@ -0,0 +1,256 @@
+/* Freeday — cascade select enhancer (optional, zero-dependency).
+ * Turns a [data-fdy-cascade] wrapper into a hierarchical drill-down picker. The
+ * data model is a hidden nested <ul> inside the wrapper: a <li> with a child <ul>
+ * is a branch (drills in), a <li> without is a leaf (selects). Each <li> carries
+ * its value in data-value; its own text (before any nested <ul>) is the label.
+ *
+ * The popover shows one level at a time (a listbox); a branch drills in, the back
+ * control ascends, a leaf selects and stores the full path as the value.
+ * Attributes: data-label, data-placeholder, data-value (pre-select a leaf value),
+ * data-separator (path separator in the display, default " / ").
+ *
+ * Keyboard: trigger opens on click / Enter / Space / ArrowDown. In the list:
+ * Up/Down move, Home/End jump, ArrowRight/Enter/Space drill into a branch or
+ * select a leaf, ArrowLeft/Backspace go up a level, Esc closes (focus returns to
+ * the trigger). Emits a bubbling "fdy-cascade-change" (detail {value, path, labels}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var BACK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg>';
+
+  // Own text of an <li>, excluding any nested <ul>.
+  function ownLabel(li) {
+    var s = '';
+    Array.prototype.forEach.call(li.childNodes, function (n) {
+      if (n.nodeType === 3) s += n.textContent;
+      else if (n.nodeType === 1 && n.tagName !== 'UL') s += n.textContent;
+    });
+    return s.trim();
+  }
+  function parse(ul) {
+    var nodes = [];
+    Array.prototype.forEach.call(ul.children, function (li) {
+      if (li.tagName !== 'LI') return;
+      var childUl = li.querySelector(':scope > ul');
+      nodes.push({
+        label: ownLabel(li),
+        value: li.getAttribute('data-value') || ownLabel(li),
+        children: childUl ? parse(childUl) : null
+      });
+    });
+    return nodes;
+  }
+  // Depth-first search for the stack of labels leading to a leaf value.
+  function pathTo(nodes, value, trail) {
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      var here = trail.concat([n]);
+      if (!n.children && n.value === value) return here;
+      if (n.children) { var found = pathTo(n.children, value, here); if (found) return found; }
+    }
+    return null;
+  }
+
+  function initCascade(wrap) {
+    if (wrap.dataset.fdyCascadeReady === '1') return;
+    wrap.dataset.fdyCascadeReady = '1';
+    wrap.classList.add('fdy-cascade');
+
+    var sourceUl = wrap.querySelector('ul');
+    var root = sourceUl ? parse(sourceUl) : [];
+    if (sourceUl) sourceUl.remove();
+
+    var label = wrap.getAttribute('data-label') || 'Pilih';
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih…';
+    var sep = wrap.getAttribute('data-separator') || ' / ';
+
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'fdy-cascade__trigger';
+    trigger.setAttribute('aria-haspopup', 'true');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-label', label);
+    var valueSpan = document.createElement('span');
+    valueSpan.className = 'fdy-cascade__value';
+    trigger.appendChild(valueSpan);
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-cascade__panel';
+    panel.hidden = true;
+    var head = document.createElement('div');
+    head.className = 'fdy-cascade__head';
+    var back = document.createElement('button');
+    back.type = 'button';
+    back.className = 'fdy-cascade__back';
+    back.setAttribute('aria-label', 'Kembali satu tingkat');
+    back.innerHTML = BACK;
+    back.hidden = true;
+    var crumb = document.createElement('span');
+    crumb.className = 'fdy-cascade__crumb';
+    crumb.setAttribute('aria-live', 'polite');
+    head.appendChild(back);
+    head.appendChild(crumb);
+    var list = document.createElement('ul');
+    seq += 1;
+    list.className = 'fdy-cascade__list';
+    list.id = 'fdy-cascade-list-' + seq;
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-label', label);
+    list.tabIndex = -1;
+    panel.appendChild(head);
+    panel.appendChild(list);
+
+    wrap.appendChild(trigger);
+    wrap.appendChild(panel);
+
+    var stack = [];        // branch nodes drilled through (context)
+    var current = root;    // nodes at the visible level
+    var opts = [];         // rendered <li> elements
+    var active = -1;
+    var selectedValue = wrap.getAttribute('data-value') || '';
+
+    function render() {
+      list.innerHTML = '';
+      opts = [];
+      back.hidden = stack.length === 0;
+      crumb.textContent = stack.length ? stack.map(function (n) { return n.label; }).join(sep) : label;
+      current.forEach(function (node, i) {
+        var li = document.createElement('li');
+        seq += 1; li.id = 'fdy-cascade-opt-' + seq;
+        li.className = 'fdy-cascade__opt';
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-index', String(i));
+        var isBranch = !!node.children;
+        li.setAttribute('aria-selected', (!isBranch && node.value === selectedValue) ? 'true' : 'false');
+        if (isBranch) li.setAttribute('aria-label', node.label + ', submenu');
+        var lbl = document.createElement('span');
+        lbl.className = 'fdy-cascade__opt-label';
+        lbl.textContent = node.label;
+        li.appendChild(lbl);
+        if (isBranch) {
+          var arrow = document.createElement('span');
+          arrow.className = 'fdy-cascade__opt-arrow';
+          arrow.setAttribute('aria-hidden', 'true');
+          li.appendChild(arrow);
+        }
+        list.appendChild(li);
+        opts.push(li);
+      });
+      setActive(0);
+    }
+    function setActive(i) {
+      if (active >= 0 && opts[active]) opts[active].classList.remove('is-active');
+      active = Math.max(-1, Math.min(opts.length - 1, i));
+      if (active >= 0) {
+        opts[active].classList.add('is-active');
+        list.setAttribute('aria-activedescendant', opts[active].id);
+        opts[active].scrollIntoView({ block: 'nearest' });
+      } else {
+        list.removeAttribute('aria-activedescendant');
+      }
+    }
+    function drill(i) {
+      var node = current[i];
+      if (!node || !node.children) return;
+      stack.push(node);
+      current = node.children;
+      render();
+    }
+    function ascend() {
+      if (!stack.length) return;
+      stack.pop();
+      current = stack.length ? stack[stack.length - 1].children : root;
+      render();
+    }
+    function activate(i) {
+      var node = current[i];
+      if (!node) return;
+      if (node.children) { drill(i); return; }
+      selectedValue = node.value;
+      var labels = stack.map(function (n) { return n.label; }).concat([node.label]);
+      valueSpan.textContent = labels.join(sep);
+      valueSpan.classList.remove('fdy-cascade__value--placeholder');
+      wrap.dispatchEvent(new CustomEvent('fdy-cascade-change', { bubbles: true, detail: { value: node.value, path: labels.join(sep), labels: labels } }));
+      close(true);
+    }
+
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+    function open() {
+      if (!panel.hidden) return;
+      // Re-open at the selected leaf's level for quick re-selection.
+      var trail = selectedValue ? pathTo(root, selectedValue, []) : null;
+      if (trail && trail.length > 1) { stack = trail.slice(0, -1); current = stack[stack.length - 1].children; }
+      else { stack = []; current = root; }
+      var p = popCtl(); if (p) p.show(); else panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      trigger.classList.add('is-open');
+      render();
+      list.focus();
+      document.addEventListener('click', onDoc, true);
+    }
+    function close(returnFocus) {
+      if (panel.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else panel.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.classList.remove('is-open');
+      document.removeEventListener('click', onDoc, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDoc(e) { if (!wrap.contains(e.target)) close(false); }
+
+    trigger.addEventListener('click', function () { panel.hidden ? open() : close(true); });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
+    });
+    back.addEventListener('click', function () { ascend(); list.focus(); });
+    list.addEventListener('keydown', function (e) {
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); setActive(active + 1); break;
+        case 'ArrowUp': e.preventDefault(); setActive(active - 1); break;
+        case 'Home': e.preventDefault(); setActive(0); break;
+        case 'End': e.preventDefault(); setActive(opts.length - 1); break;
+        case 'ArrowRight': case 'Enter': case ' ': e.preventDefault(); if (active >= 0) activate(active); break;
+        case 'ArrowLeft': case 'Backspace': e.preventDefault(); ascend(); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    list.addEventListener('click', function (e) {
+      var li = e.target.closest('[role="option"]');
+      if (li) activate(opts.indexOf(li));
+    });
+
+    // Initial display: pre-selected leaf shows its full path, else placeholder.
+    var initTrail = selectedValue ? pathTo(root, selectedValue, []) : null;
+    if (initTrail) {
+      valueSpan.textContent = initTrail.map(function (n) { return n.label; }).join(sep);
+    } else {
+      valueSpan.textContent = placeholder;
+      valueSpan.classList.add('fdy-cascade__value--placeholder');
+    }
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return selectedValue; },
+      clear: function () { selectedValue = ''; valueSpan.textContent = placeholder; valueSpan.classList.add('fdy-cascade__value--placeholder'); }
+    };
+    wrap._fdyCascade = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-cascade]'), initCascade);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCascade = { init: initCascade, initAll: initAll };
+})();

package/src/freeday-cfl.js

@@ -0,0 +1,213 @@
+/* Freeday — choose-from-list enhancer (optional, zero-dependency).
+ * Wires a searchable master-data picker dialog to read-only fields.
+ * Progressive enhancement over a native <dialog>; in a framework app, drive the
+ * dialog as a controlled component (fetchPage callback + server cache), not a store.
+ *
+ * Markup contract (see docs):
+ *  - Field group:  [data-fdy-cfl="<dialogId>"] — usually a `.fdy-input-group` holding a
+ *      read-only `.fdy-input` and a trigger `<button class="fdy-input-group__btn">`.
+ *      Optional `data-fdy-cfl-display="<key>"` picks which row dataset key fills the input
+ *      (default "value"); optional `data-fdy-cfl-summary="{n} dipilih"` formats the multi label.
+ *  - Standalone opener:  [data-fdy-cfl-open="<dialogId>"] — opens the dialog with no bound field.
+ *  - Dialog:  <dialog id="<dialogId>" class="fdy-modal fdy-modal--cfl"> containing
+ *      a `[data-fdy-cfl-search]` input, `.fdy-cfl__row` <tr> rows carrying `data-*` fields,
+ *      a `[data-fdy-cfl-empty]` element, and (multi only) `[data-fdy-cfl-multiple]` on the
+ *      dialog plus `[data-fdy-cfl-count]` and `[data-fdy-cfl-confirm]` in the footer.
+ *
+ * Emits a bubbling "fdy-cfl-select" CustomEvent on the field group (or the dialog when
+ * opened standalone): detail {row} for single-select, {rows} for multi-select — each a plain
+ * object copy of the row's dataset. Consumers fill sibling fields (code → name) from it.
+ */
+(function () {
+  'use strict';
+
+  function rowData(row) {
+    var out = {};
+    var ds = row.dataset;
+    for (var key in ds) { if (Object.prototype.hasOwnProperty.call(ds, key)) out[key] = ds[key]; }
+    return out;
+  }
+
+  function rowSearchText(row) {
+    return (row.getAttribute('data-search') != null ? row.getAttribute('data-search') : row.textContent)
+      .toLowerCase();
+  }
+
+  function initDialog(dialog) {
+    if (dialog.dataset.fdyCflReady === '1') return;
+    dialog.dataset.fdyCflReady = '1';
+
+    var search = dialog.querySelector('[data-fdy-cfl-search]');
+    var emptyEl = dialog.querySelector('[data-fdy-cfl-empty]');
+    var countEl = dialog.querySelector('[data-fdy-cfl-count]');
+    var confirmBtn = dialog.querySelector('[data-fdy-cfl-confirm]');
+    var multiple = dialog.hasAttribute('data-fdy-cfl-multiple');
+    var rows = Array.prototype.slice.call(dialog.querySelectorAll('.fdy-cfl__row'));
+
+    var activeGroup = null;   // field group that opened the dialog (null = standalone)
+    var trigger = null;       // control to restore focus to on close
+
+    rows.forEach(function (row) {
+      row.setAttribute('tabindex', '-1');
+      if (multiple && !row.hasAttribute('aria-selected')) row.setAttribute('aria-selected', 'false');
+    });
+
+    function visibleRows() {
+      return rows.filter(function (r) { return !r.hidden; });
+    }
+
+    function applyFilter() {
+      var q = (search ? search.value : '').trim().toLowerCase();
+      var shown = 0;
+      rows.forEach(function (row) {
+        var match = !q || rowSearchText(row).indexOf(q) !== -1;
+        row.hidden = !match;
+        if (match) shown++;
+      });
+      if (emptyEl) emptyEl.hidden = shown !== 0;
+    }
+
+    function updateCount() {
+      if (!countEl) return;
+      var n = rows.filter(function (r) { return r.getAttribute('aria-selected') === 'true'; }).length;
+      countEl.textContent = n + ' dipilih';
+    }
+
+    function fillGroup(detail) {
+      if (!activeGroup) return;
+      var input = activeGroup.querySelector('.fdy-input');
+      if (input) {
+        if (detail.rows) {
+          var tpl = activeGroup.getAttribute('data-fdy-cfl-summary') || '{n} dipilih';
+          input.value = detail.rows.length ? tpl.replace('{n}', String(detail.rows.length)) : '';
+        } else {
+          var key = activeGroup.getAttribute('data-fdy-cfl-display') || 'value';
+          input.value = detail.row[key] != null ? detail.row[key] : (detail.row.value || '');
+        }
+      }
+    }
+
+    function emit(detail) {
+      (activeGroup || dialog).dispatchEvent(new CustomEvent('fdy-cfl-select', {
+        bubbles: true, detail: detail
+      }));
+    }
+
+    function commitSingle(row) {
+      var detail = { row: rowData(row) };
+      fillGroup(detail);
+      emit(detail);
+      dialog.close();
+    }
+
+    function toggleSelect(row) {
+      var next = row.getAttribute('aria-selected') !== 'true';
+      row.setAttribute('aria-selected', String(next));
+      var box = row.querySelector('input[type="checkbox"]');
+      if (box) box.checked = next;
+      updateCount();
+    }
+
+    function confirmMulti() {
+      var picked = rows.filter(function (r) { return r.getAttribute('aria-selected') === 'true'; });
+      var detail = { rows: picked.map(rowData) };
+      fillGroup(detail);
+      emit(detail);
+      dialog.close();
+    }
+
+    function focusRow(row) { if (row) row.focus(); }
+
+    function moveFrom(current, delta) {
+      var vis = visibleRows();
+      var i = vis.indexOf(current);
+      if (i === -1) { focusRow(vis[0]); return; }
+      var target = i + delta;
+      if (target < 0) { if (search) search.focus(); return; }
+      if (target >= vis.length) return;
+      focusRow(vis[target]);
+    }
+
+    if (search) {
+      search.addEventListener('input', applyFilter);
+      search.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown') { e.preventDefault(); focusRow(visibleRows()[0]); }
+      });
+    }
+
+    dialog.addEventListener('click', function (e) {
+      var row = e.target.closest('.fdy-cfl__row');
+      if (!row || row.hidden) return;
+      if (multiple) toggleSelect(row); else commitSingle(row);
+    });
+
+    dialog.addEventListener('keydown', function (e) {
+      var row = e.target.closest('.fdy-cfl__row');
+      if (!row) return;
+      var vis = visibleRows();
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); moveFrom(row, 1); break;
+        case 'ArrowUp': e.preventDefault(); moveFrom(row, -1); break;
+        case 'Home': e.preventDefault(); focusRow(vis[0]); break;
+        case 'End': e.preventDefault(); focusRow(vis[vis.length - 1]); break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (multiple) toggleSelect(row); else commitSingle(row);
+          break;
+        default: break;
+      }
+    });
+
+    if (confirmBtn) confirmBtn.addEventListener('click', confirmMulti);
+
+    dialog.addEventListener('close', function () {
+      if (trigger && typeof trigger.focus === 'function') trigger.focus();
+      activeGroup = null;
+      trigger = null;
+    });
+
+    // Opening API used by triggers below.
+    dialog.fdyCflOpen = function (group, opener) {
+      activeGroup = group || null;
+      trigger = opener || null;
+      if (search) search.value = '';
+      applyFilter();
+      updateCount();
+      if (typeof dialog.showModal === 'function') dialog.showModal(); else dialog.setAttribute('open', '');
+      if (search) search.focus();
+    };
+  }
+
+  function initTriggers(context) {
+    var ctx = context || document;
+
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-cfl]'), function (group) {
+      if (group.dataset.fdyCflBound === '1') return;
+      var dialog = document.getElementById(group.getAttribute('data-fdy-cfl'));
+      if (!dialog) return;
+      initDialog(dialog);
+      var opener = group.querySelector('[data-fdy-cfl-trigger], .fdy-input-group__btn');
+      if (!opener) return;
+      group.dataset.fdyCflBound = '1';
+      opener.addEventListener('click', function () { dialog.fdyCflOpen(group, opener); });
+    });
+
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-cfl-open]'), function (opener) {
+      if (opener.dataset.fdyCflBound === '1') return;
+      var dialog = document.getElementById(opener.getAttribute('data-fdy-cfl-open'));
+      if (!dialog) return;
+      initDialog(dialog);
+      opener.dataset.fdyCflBound = '1';
+      opener.addEventListener('click', function () { dialog.fdyCflOpen(null, opener); });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initTriggers(); });
+  } else {
+    initTriggers();
+  }
+
+  window.FreedayCfl = { init: initTriggers };
+})();