@cahyo-dimas/freeday 1.7.0

package/dist/freeday-timepicker.js

@@ -0,0 +1,180 @@
+/* Freeday — time picker enhancer (optional, zero-dependency).
+ * Builds an input-styled trigger + scrollable time-list popover (WAI-ARIA listbox)
+ * from an empty [data-fdy-timepicker] wrapper. 24h HH:MM. Options run from
+ * data-min (default 00:00) to data-max (default 23:59) every data-step minutes
+ * (default 30). Attributes: data-value, data-label, data-placeholder.
+ *
+ * Icon variants (Freeday convention, same as the date picker): [data-fdy-no-icon]
+ * omits the icon; a [data-fdy-icon] child supplies a custom SVG; otherwise a clock.
+ *
+ * Keyboard: trigger opens on click / Enter / Space / ArrowDown; in the list,
+ * Up/Down move, Home/End jump, Enter/Space select, Esc closes (focus returns to
+ * the trigger). Emits a bubbling "fdy-time-select" CustomEvent (detail {value}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var CLOCK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>';
+
+  function pad(n) { return (n < 10 ? '0' : '') + n; }
+  function valid(s) { return /^\d{1,2}:\d{2}$/.test(s || ''); }
+  function toMin(s) { var p = s.split(':'); return (+p[0]) * 60 + (+p[1]); }
+  function fromMin(m) { return pad(Math.floor(m / 60)) + ':' + pad(m % 60); }
+  function norm(s) { return valid(s) ? fromMin(toMin(s)) : ''; }
+
+  function initTime(wrap) {
+    if (wrap.dataset.fdyTpReady === '1') return;
+    wrap.dataset.fdyTpReady = '1';
+    wrap.classList.add('fdy-timepicker');
+
+    var label = wrap.getAttribute('data-label') || 'Pilih waktu';
+    var placeholder = wrap.getAttribute('data-placeholder') || '--:--';
+    var step = Math.max(1, parseInt(wrap.getAttribute('data-step') || '30', 10));
+    var minM = valid(wrap.getAttribute('data-min')) ? toMin(wrap.getAttribute('data-min')) : 0;
+    var maxM = valid(wrap.getAttribute('data-max')) ? toMin(wrap.getAttribute('data-max')) : 23 * 60 + 59;
+    var value = norm(wrap.getAttribute('data-value'));
+
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'fdy-timepicker__trigger';
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-label', label);
+    var valueSpan = document.createElement('span');
+    valueSpan.className = 'fdy-timepicker__value';
+    trigger.appendChild(valueSpan);
+    if (!wrap.hasAttribute('data-fdy-no-icon')) {
+      var customIcon = wrap.querySelector('[data-fdy-icon]');
+      var icon = document.createElement('span');
+      icon.className = 'fdy-timepicker__icon';
+      icon.innerHTML = customIcon ? customIcon.innerHTML : CLOCK;
+      if (customIcon) customIcon.remove();
+      trigger.appendChild(icon);
+    }
+
+    var panel = document.createElement('ul');
+    panel.className = 'fdy-timepicker__panel';
+    panel.setAttribute('role', 'listbox');
+    panel.setAttribute('aria-label', label);
+    panel.tabIndex = -1;
+    panel.hidden = true;
+
+    var opts = [];
+    for (var m = minM; m <= maxM; m += step) {
+      var t = fromMin(m);
+      var li = document.createElement('li');
+      seq += 1; li.id = 'fdy-tp-opt-' + seq;
+      li.className = 'fdy-timepicker__opt';
+      li.setAttribute('role', 'option');
+      li.setAttribute('data-value', t);
+      li.setAttribute('aria-selected', t === value ? 'true' : 'false');
+      li.textContent = t;
+      panel.appendChild(li);
+      opts.push(li);
+    }
+
+    wrap.appendChild(trigger);
+    wrap.appendChild(panel);
+
+    var active = -1;
+
+    function updateDisplay() {
+      if (value) {
+        valueSpan.textContent = value;
+        valueSpan.classList.remove('fdy-timepicker__value--placeholder');
+      } else {
+        valueSpan.textContent = placeholder;
+        valueSpan.classList.add('fdy-timepicker__value--placeholder');
+      }
+    }
+    function indexOfValue() {
+      for (var i = 0; i < opts.length; i++) { if (opts[i].getAttribute('data-value') === value) return i; }
+      return -1;
+    }
+    function setActive(i) {
+      if (active >= 0 && opts[active]) opts[active].classList.remove('is-active');
+      active = i;
+      if (i >= 0 && opts[i]) {
+        opts[i].classList.add('is-active');
+        panel.setAttribute('aria-activedescendant', opts[i].id);
+        opts[i].scrollIntoView({ block: 'nearest' });
+      } else {
+        panel.removeAttribute('aria-activedescendant');
+      }
+    }
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+    function open() {
+      if (!panel.hidden) return;
+      var p = popCtl(); if (p) p.show(); else panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      trigger.classList.add('is-open');
+      var i = indexOfValue();
+      setActive(i >= 0 ? i : 0);
+      panel.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');
+      panel.removeAttribute('aria-activedescendant');
+      document.removeEventListener('click', onDoc, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDoc(e) { if (!wrap.contains(e.target)) close(false); }
+    function choose(i) {
+      if (i < 0 || i >= opts.length) return;
+      value = opts[i].getAttribute('data-value');
+      for (var j = 0; j < opts.length; j++) opts[j].setAttribute('aria-selected', j === i ? 'true' : 'false');
+      updateDisplay();
+      wrap.dispatchEvent(new CustomEvent('fdy-time-select', { bubbles: true, detail: { value: value } }));
+      close(true);
+    }
+
+    trigger.addEventListener('click', function () { panel.hidden ? open() : close(true); });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); open(); }
+    });
+    panel.addEventListener('keydown', function (e) {
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); setActive(Math.min(opts.length - 1, active + 1)); break;
+        case 'ArrowUp': e.preventDefault(); setActive(Math.max(0, active - 1)); break;
+        case 'Home': e.preventDefault(); setActive(0); break;
+        case 'End': e.preventDefault(); setActive(opts.length - 1); break;
+        case 'Enter': case ' ': e.preventDefault(); choose(active); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    panel.addEventListener('click', function (e) {
+      var li = e.target.closest('[role="option"]');
+      if (li) choose(opts.indexOf(li));
+    });
+
+    updateDisplay();
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return value; },
+      clear: function () { value = ''; for (var i = 0; i < opts.length; i++) opts[i].setAttribute('aria-selected', 'false'); updateDisplay(); }
+    };
+    wrap._fdyTp = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-timepicker]'), initTime);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayTimepicker = { init: initTime, initAll: initAll };
+})();

package/dist/freeday-toast.js

@@ -0,0 +1,84 @@
+/* Freeday — toast API (optional, zero-dependency).
+ * Freeday.toast({ variant, title, message, timeout }) shows a transient
+ * notification in a live region (created on first use). Returns the element.
+ *   variant: 'success' | 'warning' | 'danger' | 'info' (default: neutral)
+ *   timeout: ms before auto-dismiss (default 4000; 0 = sticky)
+ * Danger toasts use role="alert"; others role="status".
+ */
+(function () {
+  'use strict';
+
+  var region = null;
+
+  function ensureRegion() {
+    if (region && document.body.contains(region)) return region;
+    region = document.querySelector('.fdy-toast-region');
+    if (!region) {
+      region = document.createElement('div');
+      region.className = 'fdy-toast-region';
+      region.setAttribute('aria-live', 'polite');
+      region.setAttribute('aria-atomic', 'false');
+      document.body.appendChild(region);
+    }
+    return region;
+  }
+
+  function dismiss(toast) {
+    if (!toast || toast.dataset.leaving === '1') return;
+    toast.dataset.leaving = '1';
+    toast.classList.add('is-leaving');
+    var remove = function () { if (toast.parentNode) toast.parentNode.removeChild(toast); };
+    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) { remove(); return; }
+    var done = false;
+    var finish = function () { if (!done) { done = true; remove(); } };
+    toast.addEventListener('transitionend', finish);
+    setTimeout(finish, 400); // fallback if transitionend never fires
+  }
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text != null) node.textContent = text;
+    return node;
+  }
+
+  function toast(opts) {
+    opts = opts || {};
+    var region = ensureRegion();
+    var node = el('div', 'fdy-toast' + (opts.variant ? ' fdy-toast--' + opts.variant : ''));
+    node.setAttribute('role', opts.variant === 'danger' ? 'alert' : 'status');
+
+    var accent = el('span', 'fdy-toast__accent');
+    accent.setAttribute('aria-hidden', 'true');
+    var body = el('div', 'fdy-toast__body');
+    if (opts.title) body.appendChild(el('div', 'fdy-toast__title', opts.title));
+    if (opts.message) body.appendChild(el('div', 'fdy-toast__text', opts.message));
+
+    var close = el('button', 'fdy-toast__close');
+    close.type = 'button';
+    close.setAttribute('aria-label', 'Tutup');
+    close.innerHTML = '×';
+    close.addEventListener('click', function () { dismiss(node); });
+
+    node.appendChild(accent);
+    node.appendChild(body);
+    node.appendChild(close);
+    region.appendChild(node);
+
+    var timeout = opts.timeout == null ? 4000 : opts.timeout;
+    if (timeout > 0) setTimeout(function () { dismiss(node); }, timeout);
+    return node;
+  }
+
+  // Pre-create the live region so the FIRST status toast is reliably announced
+  // (some screen readers ignore a live region created in the same tick as its content).
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureRegion);
+  } else {
+    ensureRegion();
+  }
+
+  window.Freeday = window.Freeday || {};
+  window.Freeday.toast = toast;
+})();

package/dist/freeday-tree.js

@@ -0,0 +1,94 @@
+/* Freeday — tree checkbox cascade (optional, zero-dependency).
+ * Turns a [data-fdy-tree] checkbox tree into a selectable one: checking a branch checks
+ * every descendant; a partially-selected branch shows the native :indeterminate state.
+ * Rows are native <input class="fdy-checkbox">, labelled via aria-label — Space toggles.
+ * Selection never toggles the <details> (the checkbox stops click propagation).
+ *
+ * Markup contract:
+ *  <ul class="fdy-tree fdy-tree--checkbox" data-fdy-tree>
+ *    <li>
+ *      <details class="fdy-tree__branch">
+ *        <summary>…chevron… <input class="fdy-checkbox fdy-tree__check" type="checkbox" aria-label="…"> …icon… Label</summary>
+ *        <ul> …child <li>s (branches or .fdy-tree__leaf leaves)… </ul>
+ *      </details>
+ *    </li>
+ *    <li class="fdy-tree__leaf"><input class="fdy-checkbox fdy-tree__check" type="checkbox" aria-label="…"> …icon… Label</li>
+ *  </ul>
+ */
+(function () {
+  'use strict';
+
+  // The <li>s directly under a branch's own child list (skip text nodes).
+  function childItems(li) {
+    var ul = li.querySelector(':scope > details > ul');
+    if (!ul) return [];
+    return Array.prototype.filter.call(ul.children, function (n) { return n.tagName === 'LI'; });
+  }
+
+  // The checkbox belonging to a row's own <li> — branch summary or leaf, never a child's.
+  function ownBox(li) {
+    return li.querySelector(':scope > details > summary input[type="checkbox"]')
+      || li.querySelector(':scope > input[type="checkbox"]');
+  }
+
+  function setSubtree(li, checked) {
+    childItems(li).forEach(function (child) {
+      var box = ownBox(child);
+      if (box) { box.checked = checked; box.indeterminate = false; }
+      setSubtree(child, checked);
+    });
+  }
+
+  // Recompute one branch's box from the state of its direct children.
+  function recompute(li) {
+    var box = ownBox(li);
+    var kids = childItems(li).map(ownBox).filter(Boolean);
+    if (!box || !kids.length) return;
+    var allOn = kids.every(function (b) { return b.checked && !b.indeterminate; });
+    var anyOn = kids.some(function (b) { return b.checked || b.indeterminate; });
+    box.checked = allOn;
+    box.indeterminate = anyOn && !allOn;
+  }
+
+  function refreshAncestors(li) {
+    var parent = li.parentElement ? li.parentElement.closest('li') : null;
+    while (parent) {
+      recompute(parent);
+      parent = parent.parentElement ? parent.parentElement.closest('li') : null;
+    }
+  }
+
+  // Post-order pass so pre-checked leaves resolve their branches on load.
+  function initState(li) {
+    childItems(li).forEach(initState);
+    recompute(li);
+  }
+
+  function initTree(tree) {
+    if (tree.dataset.fdyTreeReady === '1') return;
+    tree.dataset.fdyTreeReady = '1';
+    Array.prototype.forEach.call(tree.querySelectorAll('input[type="checkbox"]'), function (box) {
+      // A branch checkbox lives inside <summary>; keep its click from toggling the branch.
+      box.addEventListener('click', function (e) { e.stopPropagation(); });
+      box.addEventListener('change', function () {
+        var li = box.closest('li');
+        setSubtree(li, box.checked);
+        box.indeterminate = false;
+        refreshAncestors(li);
+      });
+    });
+    Array.prototype.filter.call(tree.children, function (n) { return n.tagName === 'LI'; }).forEach(initState);
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-tree]'), initTree);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayTree = { init: initTree, initAll: initAll };
+})();

package/dist/freeday-upload.js

@@ -0,0 +1,206 @@
+/* Freeday — file-upload enhancer (optional, zero-dependency).
+ * A drop target that also opens the file dialog on click / Enter / Space, validates each file
+ * (accept + max size), and renders a per-file row with explicit state. Actual upload is the
+ * consumer's job — this is a controlled reference: wire the emitted event's row API to your
+ * upload call, or set data-fdy-upload-simulate for a demo progress animation.
+ *
+ * Markup contract:
+ *  <div class="fdy-dropzone" data-fdy-dropzone role="button" tabindex="0"
+ *       data-max-size="10485760" data-filelist="#dz-list" [data-fdy-upload-simulate]
+ *       aria-label="Unggah berkas — seret ke sini atau tekan Enter">
+ *    <span class="fdy-dropzone__icon">…svg…</span>
+ *    <span class="fdy-dropzone__title">…</span>
+ *    <span class="fdy-dropzone__hint">…</span>
+ *    <input type="file" accept=".pdf,application/pdf" multiple hidden>
+ *  </div>
+ *  <div class="fdy-filelist" id="dz-list"></div>
+ *
+ * Emits bubbling CustomEvents on the dropzone: "fdy-upload-add" {file, rejected, reason, row}
+ * (row exposes .uploading()/.setProgress(pct)/.done()/.fail(msg)) and "fdy-upload-remove" {file}.
+ */
+(function () {
+  'use strict';
+
+  function fmtSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+  }
+
+  var FILE_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>';
+  var OK_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m8 12 3 3 5-6"></path></svg>';
+  var ERR_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>';
+
+  function accepts(file, acceptAttr) {
+    if (!acceptAttr) return true;
+    var name = file.name.toLowerCase();
+    var type = (file.type || '').toLowerCase();
+    return acceptAttr.split(',').map(function (s) { return s.trim().toLowerCase(); }).some(function (a) {
+      if (!a) return false;
+      if (a.charAt(0) === '.') return name.slice(-a.length) === a;
+      if (a.slice(-2) === '/*') return type.indexOf(a.slice(0, -1)) === 0;
+      return type === a;
+    });
+  }
+
+  function makeRow(file) {
+    var el = document.createElement('div');
+    el.className = 'fdy-file';
+    var icon = document.createElement('span');
+    icon.className = 'fdy-file__icon';
+    icon.innerHTML = FILE_ICON;
+    var meta = document.createElement('div');
+    meta.className = 'fdy-file__meta';
+    var name = document.createElement('div');
+    name.className = 'fdy-file__name';
+    name.textContent = file.name;
+    var sub = document.createElement('div');
+    sub.className = 'fdy-file__sub';
+    sub.textContent = fmtSize(file.size);
+    meta.appendChild(name);
+    meta.appendChild(sub);
+    var remove = document.createElement('button');
+    remove.type = 'button';
+    remove.className = 'fdy-file__remove';
+    remove.setAttribute('aria-label', 'Hapus ' + file.name);
+    remove.innerHTML = '&times;';
+    remove.addEventListener('click', function () {
+      el.dispatchEvent(new CustomEvent('fdy-upload-remove', { bubbles: true, detail: { file: file } }));
+      el.remove();
+    });
+    el.appendChild(icon);
+    el.appendChild(meta);
+    el.appendChild(remove);
+
+    var progressWrap = null, bar = null, progressEl = null;
+    function ensureProgress() {
+      if (progressWrap) return;
+      progressWrap = document.createElement('div');
+      progressWrap.className = 'fdy-file__progress';
+      progressEl = document.createElement('div');
+      progressEl.className = 'fdy-progress';
+      progressEl.setAttribute('role', 'progressbar');
+      progressEl.setAttribute('aria-valuemin', '0');
+      progressEl.setAttribute('aria-valuemax', '100');
+      progressEl.setAttribute('aria-label', 'Progres unggah ' + file.name);
+      bar = document.createElement('div');
+      bar.className = 'fdy-progress__bar';
+      bar.style.width = '0%';
+      progressEl.appendChild(bar);
+      progressWrap.appendChild(progressEl);
+      meta.appendChild(progressWrap);
+    }
+    function dropProgress() {
+      if (progressWrap) { progressWrap.remove(); progressWrap = null; bar = null; progressEl = null; }
+    }
+    return {
+      el: el,
+      uploading: function () {
+        el.classList.remove('fdy-file--error', 'fdy-file--success');
+        icon.innerHTML = FILE_ICON;
+        sub.textContent = fmtSize(file.size) + ' · Mengunggah…';
+        ensureProgress();
+      },
+      setProgress: function (pct) {
+        ensureProgress();
+        var v = Math.max(0, Math.min(100, pct));
+        bar.style.width = v + '%';
+        progressEl.setAttribute('aria-valuenow', String(Math.round(v)));
+      },
+      done: function () {
+        el.classList.add('fdy-file--success');
+        el.classList.remove('fdy-file--error');
+        icon.innerHTML = OK_ICON;
+        sub.textContent = fmtSize(file.size) + ' · Terunggah';
+        dropProgress();
+      },
+      fail: function (msg) {
+        el.classList.add('fdy-file--error');
+        el.classList.remove('fdy-file--success');
+        icon.innerHTML = ERR_ICON;
+        sub.textContent = msg;
+        dropProgress();
+      }
+    };
+  }
+
+  function simulateUpload(row) {
+    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) { row.setProgress(100); row.done(); return; }
+    var pct = 0;
+    var id = setInterval(function () {
+      pct += 12 + Math.random() * 18;
+      if (pct >= 100) {
+        row.setProgress(100);
+        clearInterval(id);
+        setTimeout(function () { row.done(); }, 200);
+      } else {
+        row.setProgress(pct);
+      }
+    }, 180);
+  }
+
+  function initDropzone(zone) {
+    if (zone.dataset.fdyUploadReady === '1') return;
+    zone.dataset.fdyUploadReady = '1';
+
+    var input = zone.querySelector('input[type="file"]');
+    var listSel = zone.getAttribute('data-filelist');
+    var list = listSel ? document.querySelector(listSel)
+      : (zone.parentNode ? zone.parentNode.querySelector('.fdy-filelist') : null);
+    var maxSize = parseInt(zone.getAttribute('data-max-size'), 10) || 0;
+    var simulate = zone.hasAttribute('data-fdy-upload-simulate');
+    var acceptAttr = input ? input.getAttribute('accept') : '';
+
+    function openDialog() { if (input) input.click(); }
+
+    zone.addEventListener('click', function (e) { if (e.target !== input) openDialog(); });
+    zone.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDialog(); }
+    });
+    ['dragenter', 'dragover'].forEach(function (ev) {
+      zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('is-dragover'); });
+    });
+    ['dragleave', 'dragend'].forEach(function (ev) {
+      zone.addEventListener(ev, function (e) { if (e.target === zone) zone.classList.remove('is-dragover'); });
+    });
+    zone.addEventListener('drop', function (e) {
+      e.preventDefault();
+      zone.classList.remove('is-dragover');
+      handleFiles(e.dataTransfer ? e.dataTransfer.files : null);
+    });
+    if (input) input.addEventListener('change', function () { handleFiles(input.files); input.value = ''; });
+
+    function handleFiles(fileList) {
+      if (!list || !fileList) return;
+      Array.prototype.slice.call(fileList).forEach(function (file) {
+        var reason = null;
+        if (!accepts(file, acceptAttr)) reason = 'Tipe berkas tidak didukung.';
+        else if (maxSize && file.size > maxSize) reason = 'Ukuran melebihi batas (' + fmtSize(maxSize) + ').';
+        var row = makeRow(file);
+        list.appendChild(row.el);
+        if (reason) {
+          row.fail(reason);
+        } else {
+          row.uploading();
+          if (simulate) simulateUpload(row);
+        }
+        zone.dispatchEvent(new CustomEvent('fdy-upload-add', {
+          bubbles: true, detail: { file: file, rejected: !!reason, reason: reason, row: row }
+        }));
+      });
+    }
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-dropzone]'), initDropzone);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayUpload = { init: initDropzone, initAll: initAll };
+})();