@es-joy/jsoe 0.0.1

package/src/utils/dialogs.js

@@ -0,0 +1,115 @@
+/* eslint-disable promise/avoid-new */
+import {jml, nbsp} from '../../node_modules/jamilih/dist/jml-es.js';
+import {$e} from './templateUtils.js';
+
+const localeStrings = {
+  submit: 'Submit',
+  cancel: 'Cancel',
+  ok: 'Ok'
+};
+
+// Todo: i18nize
+const dialogs = {
+  setLocale (locale = {}) {
+    this.localeStrings = {...localeStrings, ...locale};
+  },
+  makeDialog ({atts = {}, children = [], close, remove = true} = {}) {
+    if (close) {
+      if (!atts.$on) {
+        atts.$on = {};
+      }
+      if (!atts.$on.close) {
+        atts.$on.close = close;
+      }
+    }
+    const dialog = jml('dialog', atts, children, document.body);
+    dialog.showModal();
+    if (remove) {
+      dialog.addEventListener('close', () => {
+        dialog.remove();
+      });
+    }
+    return dialog;
+  },
+  makeSubmitDialog ({submit, submitClass = 'submit', ...args}) {
+    const dialog = this.makeCancelDialog(args);
+    $e(dialog, `button.${args.cancelClass || 'cancel'}`).before(
+      jml('button', {
+        class: submitClass,
+        $on: {
+          click (e) {
+            submit.call(this, {e, dialog});
+          }
+        }
+      }, [this.localeStrings.submit]),
+      nbsp.repeat(2)
+    );
+    return dialog;
+  },
+  makeCancelDialog ({
+    submit, // Don't pass this on to `args` if present
+    cancel,
+    cancelClass = 'cancel', submitClass = 'submit',
+    ...args
+  }) {
+    const dialog = this.makeDialog(args);
+    jml('div', {class: submitClass}, [
+      ['br'], ['br'],
+      ['button', {class: cancelClass, $on: {
+        click (e) {
+          e.preventDefault();
+          if (cancel) {
+            if (cancel.call(this, {e, dialog}) === false) {
+              return;
+            }
+          }
+          dialog.close();
+        }
+      }}, [this.localeStrings.cancel]]
+    ], dialog);
+    return dialog;
+  },
+  alert (message) {
+    message = typeof message === 'string' ? {message} : message;
+    const {submitClass = 'submit'} = message;
+    ({message} = message);
+    return new Promise((resolve, _reject) => {
+      const dialog = jml('dialog', [
+        message,
+        ['br'], ['br'],
+        ['div', {class: submitClass}, [
+          ['button', {$on: {click () {
+            dialog.close();
+            resolve();
+          }}}, [this.localeStrings.ok]]
+        ]]
+      ], document.body);
+      dialog.showModal();
+    });
+  },
+  confirm ({atts = {}, message, submitClass = 'submit'}) {
+    ({message} = typeof message === 'string' ? {message} : message);
+    return new Promise((resolve, reject) => {
+      const dialog = jml('dialog', atts, [
+        message,
+        ['br'], ['br'],
+        ['div', {class: submitClass}, [
+          ['button', {$on: {click () {
+            dialog.close();
+            resolve();
+          }}}, [this.localeStrings.ok]],
+          nbsp.repeat(2),
+          ['button', {$on: {click () {
+            dialog.close();
+            reject(new Error('cancelled'));
+          }}}, [this.localeStrings.cancel]]
+        ]]
+      ], document.body);
+      dialog.showModal();
+    });
+  }
+};
+
+dialogs.setLocale();
+
+export default dialogs;

package/src/utils/jsonPointer.js

@@ -0,0 +1,89 @@
+/**
+ * @param {...string} args
+ * @returns {string}
+ */
+const makeJSONPointer = (...args) => {
+  return '#/' + args.map((path) => {
+    return escapeJSONPointer(path);
+  }).join('/');
+};
+
+/**
+ * @param {string} path
+ * @returns {string}
+ */
+const escapeJSONPointer = (path) => {
+  return path.replace(/~/gu, '~0').replace(/\//gu, '~1');
+};
+
+/**
+ * @param {string} pathPart
+ * @returns {string}
+ */
+const unescapeJSONPointerPart = (pathPart) => {
+  return pathPart.replace(/~([01])/gu, (_n0, n1) => {
+    if (n1 === '0') {
+      return '~';
+    }
+    return '/';
+  });
+};
+
+/**
+ * @param {string} path
+ * @returns {string[]}
+ */
+const getJSONPointerParts = (path) => {
+  return path.split('/').slice(1).map(
+    (pathPart) => unescapeJSONPointerPart(pathPart)
+  );
+};
+
+/**
+ * @param {ArbitraryObject} obj
+ * @param {string} pathPart
+ * @returns {ArbitraryObject|string}
+ */
+const reduceJSONPointerParts = (obj, pathPart) => {
+  if (!(pathPart in obj)) {
+    throw new TypeError('Path part not found in object');
+  }
+  obj = obj[pathPart];
+  return obj;
+};
+
+/**
+ * @param {object} cfg
+ * @param {string} cfg.path
+ * @param {ArbitraryObject} cfg.obj
+ * @returns {string|ArbitraryObject}
+ */
+const resolveJSONPointer = ({path, obj}) => {
+  return getJSONPointerParts(path).reduce(
+    (obj, pathPart) => reduceJSONPointerParts(obj, pathPart),
+    obj
+  );
+};
+
+/**
+ * @param {string} path
+ * @returns {string}
+ */
+const typesonPathToJSONPointer = (path) => {
+  if (!path) {
+    return path;
+  }
+  return '/' + path.split('.').map((keyPathComponent) => {
+    // Keep `~0` (representing tilde) escaped as same sequence in
+    //   JSONPointer (that's why we don't just use
+    //   Typeson's `unescapeKeyPathComponent` + `escapeJSONPointer` here)
+    return keyPathComponent.replace(/~1/gu, '.').replace(/\//gu, '~1');
+  }).join('/');
+};
+
+export {
+  makeJSONPointer, escapeJSONPointer,
+  unescapeJSONPointerPart, getJSONPointerParts, reduceJSONPointerParts,
+  resolveJSONPointer,
+  typesonPathToJSONPointer
+};

package/src/utils/templateUtils.js

@@ -0,0 +1,106 @@
+
+const nbsp = '\u00A0';
+const upArrow = '\u2191';
+const downArrow = '\u2193';
+const U = {nbsp, upArrow, downArrow};
+
+/**
+ * @param {string} sel
+ * @returns {Element}
+ */
+const $ = (sel) => document.querySelector(sel);
+
+/**
+ * @param {string} sel
+ * @returns {Element[]}
+ */
+const $$ = (sel) => [...document.querySelectorAll(sel)];
+
+/**
+ * @param {Element|string} el
+ * @param {string} descendentsSel
+ * @returns {Element}
+ */
+const $e = (el, descendentsSel) => {
+  el = typeof el === 'string' ? $(el) : el;
+  return el.querySelector(descendentsSel);
+};
+
+/**
+ * @param {Element|string} el
+ * @param {string} descendentsSel
+ * @returns {Element[]}
+ */
+const $$e = (el, descendentsSel) => {
+  el = typeof el === 'string' ? $(el) : el;
+  return [...el.querySelectorAll(descendentsSel)];
+};
+
+/**
+ * @param {Node} node
+ * @returns {void}
+ */
+const removeChildren = (node) => {
+  node = typeof node === 'string' ? $(node) : node;
+  while (node.hasChildNodes()) {
+    node.lastChild.remove();
+  }
+};
+
+/**
+ * @param {Element|string} sel
+ * @returns {void}
+ */
+const removeIfExists = (sel) => {
+  const el = typeof sel === 'string' ? $(sel) : sel;
+  if (el) {
+    el.remove();
+  }
+};
+
+/**
+ * @param {Element} el
+ * @param {string|string[]} selectors
+ * @returns {Element[]}
+ */
+const filterChildElements = (el, selectors) => {
+  /**
+   * @param {Element} el
+   * @param {string} sel
+   * @returns {Element[]}
+   */
+  const getMatchingChildrenForElement = (el, sel) => {
+    const childElements = el.children;
+    const matchingChildElements = [...childElements].filter((el) => {
+      return el.matches(sel);
+    });
+    return matchingChildElements;
+  };
+  el = typeof el === 'string' ? $(el) : el;
+  let filtered = [el];
+  selectors = Array.isArray(selectors) ? selectors : [selectors];
+  selectors.forEach((sel) => {
+    filtered = filtered.reduce((els, childElement) => {
+      els.push(...getMatchingChildrenForElement(childElement, sel));
+      return els;
+    }, []);
+  });
+  return filtered;
+};
+
+/**
+ * @param {string} s
+ * @returns {string}
+ */
+const initialCaps = (s) => {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+const DOM = {removeChildren, removeIfExists, filterChildElements, initialCaps};
+
+export {
+  U,
+  $, $$,
+  $e, $$e,
+  DOM
+};

package/src/utils/types.js

@@ -0,0 +1,6 @@
+/**
+ * @param {unknown} obj
+ */
+export const isNullish = (obj) => {
+  return obj === null || typeof obj === 'undefined';
+};