jqx-es 1.2.0 → 1.2.1

package/src/Utilities.js

@@ -1,65 +1,141 @@
 import {default as tagFNFactory} from "./tinyDOM.js";
 import {default as IS, maybe} from "./TypeofAnything.js";
 import styleFactory from "./LifeCSS.js";
+
 const characters4RandomString = [...Array(26)]
   .map((x, i) => String.fromCharCode(i + 65))
   .concat([...Array(26)].map((x, i) => String.fromCharCode(i + 97)))
   .concat([...Array(10)].map((x, i) => `${i}`));
-const pad0 = (nr, n=2) => `${nr}`.padStart(n, `0`);
-const randomNr = (max, min = 0) => {
+const systemLog = systemLogFactory();
+
+function pad0(nr, n=2) {
+  return `${nr}`.padStart(n, `0`);
+}
+
+function randomNr(max, min = 0) {
   [max, min] = [Math.floor(max), Math.ceil(min)];
   return Math.floor( ([...crypto.getRandomValues(new Uint32Array(1))].shift() / 2 ** 32 ) * (max - min + 1) + min );
-};
-const isNonEmptyString = function(str, minlen = 1) {
+}
+
+function isNonEmptyString(str, minlen = 1) {
   minlen = IS(minlen, Number) && minlen || 1;
   return IS(str, String) && str.length >= minlen;
-};
-const resolveEventTypeParameter = function(maybeTypes) {
+}
+
+function resolveEventTypeParameter (maybeTypes) {
   maybeTypes = IS(maybeTypes, String) && /,/.test(maybeTypes) ? maybeTypes.split(`,`) : maybeTypes;
   return IS(maybeTypes, Array)
     ? maybeTypes.filter(t => isNonEmptyString(t)).map(t => t.trim().toLowerCase())
     : IS(maybeTypes, String) && maybeTypes?.trim().toLowerCase() || ``;
-};
-const shuffle = array => {
+}
+
+function shuffle(array) {
   let i = array.length;
   while (i--) {
     const ri = randomNr(i);
     [array[i], array[ri]] = [array[ri], array[i]];
   }
   return array;
-};
-const hex2Full = hex => {
+}
+
+function hex2Full(hex) {
   hex = (hex.trim().startsWith("#") ? hex.slice(1) : hex).trim();
   return hex.length === 3 ? [...hex].map(v => v + v).join("") : hex;
-};
-const truncateHtmlStr = (str, maxLength = 120) => `${str}`.trim()
-  .slice(0, maxLength)
-  .replace(/>\s+</g, `><`)
-  .replace(/</g, `&lt;`)
-  .replace(/\s{2,}/g, ` `)
-  .replace(/\n/g, `\\n`) + (str.length > maxLength ? ` &hellip;` : ``).trim();
-const toDashedNotation = str2Convert =>str2Convert.replace(/[A-Z]/g, a => `-${a.toLowerCase()}`).replace(/^-|-$/, ``);
-const ucFirst = ([first, ...theRest]) => `${first.toUpperCase()}${theRest.join(``)}`;
-const toCamelcase = str2Convert =>
-  IS(str2Convert, String) ? str2Convert.toLowerCase()
-    .split(`-`)
-    .map( (str, i) => i && `${ucFirst(str)}` || str)
-    .join(``) : str2Convert;
-const randomString = () => `_${shuffle(characters4RandomString).slice(0, 8).join(``)}`;
-const truncate2SingleStr = (str, maxLength = 120) =>
-  truncateHtmlStr(str, maxLength).replace(/&lt;/g, `<`);
-const logTime = () => ((d) =>
-  `[${pad0(d.getHours())}:${pad0(d.getMinutes())}:${
-    pad0(d.getSeconds())}.${pad0(d.getMilliseconds(), 3)}]`)(new Date());
-const hex2RGBA = function (hex, opacity = 100) {
+}
+
+function truncateHtmlStr(str, maxLength = 120) {
+ return `${str}`
+   .trim()
+   .slice(0, maxLength)
+   .replace(/>\s+</g, `><`)
+   .replace(/</g, `&lt;`)
+   .replace(/\s{2,}/g, ` `)
+   .replace(/\n/g, `\\n`) + (str.length > maxLength ? ` &hellip;` : ``).trim();
+}
+
+function toDashedNotation(str2Convert) {
+  return str2Convert.replace(/[A-Z]/g, a => `-${a.toLowerCase()}`).replace(/^-|-$/, ``);
+}
+
+function ucFirst([first, ...theRest]) {
+  return `${first.toUpperCase()}${theRest.join(``)}`;
+}
+
+function toCamelcase(str2Convert) {
+  return IS(str2Convert, String)
+    ? str2Convert.toLowerCase()
+      .split(`-`)
+      .map( (str, i) => i && `${ucFirst(str)}` || str)
+      .join(``)
+    : str2Convert;
+}
+
+function randomString() {
+  return `_${shuffle(characters4RandomString).slice(0, 8).join(``)}`;
+}
+
+function truncate2SingleStr(str, maxLength = 120) {
+  return truncateHtmlStr(str, maxLength).replace(/&lt;/g, `<`);
+}
+
+function logTime() {
+  return ((d) =>
+    `[${pad0(d.getHours())}:${pad0(d.getMinutes())}:${
+      pad0(d.getSeconds())}.${pad0(d.getMilliseconds(), 3)}]`)(new Date());
+}
+
+function hex2RGBA(hex, opacity = 100) {
   hex = hex2Full(hex.slice(1));
   const op = opacity % 100 !== 0;
   return `rgb${op ? "a" : ""}(${
     parseInt(hex.slice(0, 2), 16)}, ${
     parseInt(hex.slice(2, 4), 16)}, ${
     parseInt(hex.slice(-2), 16)}${op ? `, ${opacity / 100}` : ""})`;
-};
-const escHtml = html => html.replace(/</g, `&lt;`);
+}
+
+function escHtml(html) {
+  return html.replace(/</g, `&lt;`).replace(/>/g, `&gt;`);
+}
+
+function extensionHelpers() {
+  const isCommentOrTextNode = elem => IS(elem, Comment, Text);
+  const isNode = input => IS(input, Text, HTMLElement, Comment);
+  const isComment = input => IS(input, Comment);
+  const isText = input => IS(input, Text);
+  const isHtmlString = input => IS(input, String) && /^<|>$/.test(`${input}`.trim());
+  const isArrayOfHtmlStrings = input => IS(input, Array) && !input?.find(s => !isHtmlString(s));
+  const isArrayOfHtmlElements = input => IS(input, Array) && !input?.find(el => !isNode(el));
+  const ElemArray2HtmlString = elems => elems?.filter(el => el).reduce((acc, el) =>
+    acc.concat(isComment(el) ? `<!--${el.data}-->`
+      : isCommentOrTextNode(el) ?  el.textContent
+        : el.outerHTML), ``);
+  const input2Collection = input =>
+    !input ? []
+      : IS(input, Proxy) ? [input.EL]
+        : IS(input, NodeList) ? [...input]
+          : isNode(input) ? [input]
+            : isArrayOfHtmlElements(input) ? input
+              : input.isJQx ? input.collection : undefined;
+  const setCollectionFromCssSelector = (input, root, self) => {
+    const selectorRoot = root !== document.body && (IS(input, String) && input.toLowerCase() !== "body") ? root : document;
+    let errorStr = undefined;
+
+    try { self.collection = [...selectorRoot.querySelectorAll(input)]; }
+    catch (err) { errorStr = `Invalid CSS querySelector. [${!IS(input, String) ? `Nothing valid given!` : input}]`; }
+
+    return errorStr ?? `CSS querySelector "${input}", output ${self.collection.length} element(s)`;
+  };
+  const addHandlerId = instance => {
+    const handleId = instance.data.get(`hid`) || `HID${randomString()}`;
+    instance.data.add({hid: handleId});
+    return `[data-hid="${handleId}"]`;
+  };
+
+  return {
+    isCommentOrTextNode, isNode, isComment, isText, isHtmlString, isArrayOfHtmlElements,
+    isArrayOfHtmlStrings, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
+    addHandlerId };
+}
 
 function ExamineElementFeatureFactory() {
   const isVisible = function(el) {
@@ -116,6 +192,41 @@ function ExamineElementFeatureFactory() {
   };
 }
 
+function decodeForConsole(something) {
+  return IS(something, String) &&
+    Object.assign(document.createElement(`textarea`), {innerHTML: something}).textContent || something;
+}
+
+function systemLogFactory() {
+  let on = false;
+  const backLog = [];
+  const systemLogger = {
+    get on() { on = true; return systemLogger; },
+    get off() { on = false; return systemLogger; },
+    get backLog() { return backLog; },
+  };
+
+  function error(...args) {
+    backLog.unshift(...args.map(arg => `${logTime()} ⨻ ${decodeForConsole(arg)}`));
+    console.error(backLog.slice(0, args.length).join(`\n`));
+    return systemLogger;
+  }
+
+  function log(...args) {
+    backLog.unshift(...args.map(arg => `${logTime()} ✔ ${decodeForConsole(arg)}`));
+    if (!on) { return systemLogger; }
+    console.log(backLog.slice(0, args.length).join(`\n`));
+    return systemLogger;
+  }
+
+  Object.defineProperties(systemLogger, {
+    log: {value: log, enumerable: false},
+    error: {value: error, enumerable: false},
+  });
+
+  return Object.freeze(systemLogger);
+}
+
 export {
   IS,
   maybe,
@@ -133,4 +244,6 @@ export {
   styleFactory,
   tagFNFactory,
   resolveEventTypeParameter,
+  extensionHelpers,
+  systemLog,
 };

package/src/JQxLog.js

@@ -1,172 +0,0 @@
-import { logTime } from "./Utilities.js";
-import { createElementFromHtmlString, element2DOM, insertPositions } from "./DOM.js";
-import { logStyling } from "./EmbedResources.js";
-
-function logFactory(jqx) {
-  let logSystem = false;
-  let useLogging = false;
-  let log2Console = true;
-  let reverseLogging = false;
-  let useHtml = true;
-  let editLogRules;
-  const getLogBox = () => jqx(`#logBox`);
-  const logBoxTextBoxId = `#jqx_logger`;
-  const setStyling4Log = setStyle => {
-    logStyling?.forEach(selector => setStyle(selector));
-  };
-
-  const decodeForConsole = something => jqx.IS(something, String) &&
-    Object.assign(document.createElement(`textarea`), {innerHTML: something}).textContent || something;
-
-  function createLogElement(jqx) {
-    // note: jqx is not fully proxified here ...
-    const jqx_logger_element_name = useHtml ? `div` : `pre`;
-    const loggingFieldSet = `
-      <div id="logBox">
-      <div class="legend">
-        <div><!--legend text--></div>
-      </div>
-      <${jqx_logger_element_name} id="jqx_logger"></${jqx_logger_element_name}>`;
-    const logBoxElement = createElementFromHtmlString(loggingFieldSet);
-    element2DOM(logBoxElement, undefined, insertPositions.AfterBegin);
-    return jqx.node(logBoxTextBoxId);
-  }
-
-  const Log = (...args) => {
-    const isInstanceLog = args[0] === `fromStatic`;
-
-    if (!jqx.node(`#JQxLogCSS`)) {
-      editLogRules = jqx.editStylesheet(`JQxLogCSS`);
-      for (const rule of logStyling) { editLogRules(rule); }
-    }
-
-    args = isInstanceLog ? args.slice(1) : args;
-
-    if (isInstanceLog && !useLogging) {
-      return args.forEach(arg => console.info(`${logTime()} ✔ ${decodeForConsole(arg)}`));
-    }
-
-    if (!useLogging) { return; }
-
-    if (!log2Console && !jqx.node(`#logBox`)) { createLogElement(jqx); }
-
-    const logLine = arg => `${jqx.IS(arg, Object) ? JSON.stringify(arg, null, 2) : arg}\n`;
-
-    args.forEach(arg => log2Console
-      ? console.info(`${logTime()} ✔ ${decodeForConsole(arg)}`)
-      : jqx.node(`#jqx_logger`).insertAdjacentHTML(
-        reverseLogging ? `afterbegin` : `beforeend`,
-        `<div class="entry">${logTime()} ${logLine(arg.replace(/\n/g, `<br>`))}</div>`)
-    );
-  };
-
-  const logActive = {
-    on() {
-      useLogging = true;
-      Log(`Logging activated (CSS in style#JQxLogCSS)`);
-    },
-    off() {
-      useLogging = false;
-      console.log(`${logTime()} ✔ Logging deactivated`)
-    },
-  }
-
-  const setSystemLog = {
-    on() {
-      logSystem = true;
-    },
-    off() {
-      logSystem = false;
-    },
-  };
-
-  const systemLog = (...logTxt) => logSystem && Log(...logTxt);
-
-  const debugLog = {
-    get isConsole() {
-      return log2Console === true;
-    },
-    get isOn() {
-      return useLogging;
-    },
-    isVisible: function () {
-      return jqx(`#jqx_logger`).is(`visible`);
-    },
-    on() {
-      logActive.on();
-      setSystemLog.on();
-      if (!log2Console) {
-        getLogBox()?.addClass(`visible`);
-      }
-      Log(`Debug logging started. Every call to [jqx instance] is logged`);
-      return debugLog;
-    },
-    off() {
-      if (!getLogBox().isEmpty) {
-        setSystemLog.off();
-        Log(`Debug logging stopped`);
-        getLogBox()?.removeClass(`visible`);
-      }
-      logActive.off();
-      return debugLog;
-    },
-    toConsole: {
-      on() {
-        log2Console = true;
-        Log(`Started logging to console`);
-        return debugLog;
-      },
-      off() {
-        Log(`Stopped logging to console (except error messages)`);
-        log2Console = false;
-        return debugLog;
-      }
-    },
-    remove() {
-      logActive.off();
-      setSystemLog.off();
-      getLogBox()?.remove();
-      console.clear();
-      console.log(`${logTime()} logging completely disabled and all entries removed`);
-      return debugLog;
-    },
-    log: function (...args) {
-      Log(...args);
-      return debugLog;
-    },
-    hide() {
-      getLogBox()?.removeClass(`visible`);
-      return debugLog;
-    },
-    show: () => {
-      getLogBox()?.addClass(`visible`);
-      return debugLog;
-    },
-    get reversed() {
-      return {
-        on: () => {
-          reverseLogging = true;
-          Log(`Reverse logging set: now logging bottom to top (latest first)`);
-          jqx(`#logBox .legend`).addClass(`reversed`);
-          return debugLog;
-        },
-        off: () => {
-          reverseLogging = false;
-          jqx(`#logBox .legend`).removeClass(`reversed`);
-          Log(`Reverse logging reset: now logging chronological (latest last)`);
-          return debugLog;
-        },
-      };
-    },
-    clear() {
-      jqx(logBoxTextBoxId).text(``);
-      console.clear();
-      Log(`Logging cleared`);
-      return debugLog;
-    }
-  };
-
-  return { Log, debugLog, systemLog };
-}
-
-export default logFactory;