jqx-es 1.1.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jqx-es",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "private": false,
   "type": "module",
   "description": "The good parts of JQuery",

package/src/DOMCleanup.js

@@ -1,7 +1,6 @@
-import { truncate2SingleStr, IS } from "./JQxExtensionHelpers.js";
+import { truncate2SingleStr, IS, debugLog } from "./JQxExtensionHelpers.js";
 import cleanupTagInfo from "./HTMLTags.js";
 import {ATTRS} from "./EmbedResources.js";
-import {debugLog} from "./JQxLog.js";
 import {escHtml} from "./Utilities.js";
 
 let logElementCreationErrors2Console = true;
@@ -31,7 +30,7 @@ const cleanupHtml = el2Clean => {
     rawHTML: el2Clean?.parentElement?.getHTML() ?? `no html`,
     removed: { },
   }
-  
+
   if (IS(el2Clean, HTMLElement)) {
     [...el2Clean.childNodes].forEach(child => {
       if (child?.children?.length) {
@@ -58,11 +57,11 @@ const cleanupHtml = el2Clean => {
             }
           });
       }
-      
+
       const allowed = elementCheck(child) ||
         child.constructor === CharacterData ||
         child.constructor === Comment;
-      
+
       if (!allowed) {
         const tag = (child?.outerHTML || child?.textContent).trim();
         let tagValue = truncate2SingleStr(tag, 60) ?? `EMPTY`;

package/src/HandlerFactory.js

@@ -1,14 +1,13 @@
-import jqx from "../index.js";
-import {isNonEmptyString} from "./Utilities.js";
+import { isNonEmptyString } from "./Utilities.js";
 const handlerStore = {};
 const shouldCaptureEventTypes = [
   `load`, `unload`, `scroll`, `focus`, `blur`, `DOMNodeRemovedFromDocument`,
   `DOMNodeInsertedIntoDocument`, `loadstart`, `progress`, `error`, `abort`,
   `load`, `loadend`, `pointerenter`, `pointerleave`, `readystatechange`];
 const getCapture = eventType => !!(shouldCaptureEventTypes.find(t => t === eventType));
-export {handlerStore as listeners, HandleFactory as default};
+export { handlerStore as listeners, HandleFactory as default };
 
-function HandleFactory() {
+function HandleFactory(jqx) {
   return function(spec) { /*NODOC*/
     let {eventType, selector, callback, name, capture, once, canRemove} = spec;
 

package/src/JQxExtensionHelpers.js

@@ -1,8 +1,8 @@
-import { createElementFromHtmlString, insertPositions, inject2DOMTree, cleanupHtml, ATTRS} from "./DOM.js";
-import { debugLog, Log, systemLog } from "./JQxLog.js";
-import allMethods from "./JQxMethods.js";
+import { createElementFromHtmlString, insertPositions, inject2DOMTree, cleanupHtml } from "./DOM.js";
+import logFactory from "./JQxLog.js";
+import allMethodsFactory from "./JQxMethods.js";
 import PopupFactory from "./Popup.js";
-import {listeners, default as HandleFactory} from "./HandlerFactory.js";
+import { listeners, default as HandleFactory } from "./HandlerFactory.js";
 import tagLib from "./HTMLTags.js";
 import {
   randomString, toDashedNotation, IS, truncateHtmlStr, tagFNFactory as $T,
@@ -10,8 +10,10 @@ import {
   isNonEmptyString, resolveEventTypeParameter,
 } from "./Utilities.js";
 let static4Docs = {};
+let instanceGetters, instanceMethods, $, systemLogger, debugLogger;
+
 const {
-  instanceMethods, instanceGetters,isCommentOrTextNode, isNode,
+  isCommentOrTextNode, isNode,
   isHtmlString, isArrayOfHtmlElements, isArrayOfHtmlStrings, ElemArray2HtmlString,
   input2Collection, setCollectionFromCssSelector, addHandlerId, cssRuleEdit,
   addFn, elems4Docs } = smallHelpersFactory();
@@ -20,8 +22,6 @@ const {
 function smallHelpersFactory() {
   const cssRuleEdit = styleFactory( { createWithId: `JQxStylesheet` } );
   const addFn = (name, fn) => instanceMethods[name] = (self, ...params) => fn(self, ...params);
-  const instanceMethods = allMethods.instanceExtensions;
-  const instanceGetters = allMethods.factoryExtensions;
   const isCommentOrTextNode = elem => IS(elem, Comment, Text);
   const isNode = input => IS(input, Text, HTMLElement, Comment);
   const isComment = input => IS(input, Comment);
@@ -60,10 +60,9 @@ function smallHelpersFactory() {
     .sort( (a, b) => a.localeCompare(b));
 
   return {
-    instanceMethods, instanceGetters,isCommentOrTextNode, isNode, isComment, isText,
-    isHtmlString, isArrayOfHtmlElements, isArrayOfHtmlStrings, ElemArray2HtmlString,
-    input2Collection, setCollectionFromCssSelector, addHandlerId, cssRuleEdit,
-    addFn, elems4Docs };
+    isCommentOrTextNode, isNode, isComment, isText, isHtmlString, isArrayOfHtmlElements,
+    isArrayOfHtmlStrings, ElemArray2HtmlString, input2Collection, setCollectionFromCssSelector,
+    addHandlerId, cssRuleEdit, addFn, elems4Docs };
 }
 
 function proxify(instance) {
@@ -148,14 +147,12 @@ function virtualFactory(jqx) {
 
 function combineObjectSources(...sources) {
   const result = {};
-
   for (const source of sources) {
     const descriptors = Object.getOwnPropertyDescriptors(source);
     for (const [key, descriptor] of Object.entries(descriptors)) {
       !(key in result) && Object.defineProperty(result, key, descriptor);
     }
   }
-
   return result;
 }
 
@@ -166,7 +163,6 @@ function tagNotAllowed(tagName) {
 
 function tagGetterFactory(tagName, cando, jqx, webComponentTagName) {
   tagName = toDashedNotation(webComponentTagName || tagName.toLowerCase());
-
   return {
     get() {
       return  (...args) => {
@@ -182,7 +178,6 @@ function tagGetterFactory(tagName, cando, jqx, webComponentTagName) {
 function addGetters(tag, cando, jqx, webComponentTagName) {
   tag = tag.toLowerCase();
   const jqxGetterForThisTag = tagGetterFactory(tag, cando, jqx, webComponentTagName);
-
   return webComponentTagName
     ? { [webComponentTagName]: jqxGetterForThisTag, [toCamelcase(webComponentTagName)]: jqxGetterForThisTag, }
     : { [tag]: jqxGetterForThisTag, [tag.toUpperCase()]: jqxGetterForThisTag, };
@@ -223,10 +218,6 @@ function delegateCaptureFactory(listen) {
     canRemove = IS(canRemove, Boolean) ? canRemove : false;
     const params = { eventType: typesResolved, selector: selector || origin, capture,
       name: specifiedName, once, canRemove};
-    const doHandle = handler => {
-      params.name = specifiedName;
-      IS(handler, Function) && listen({...params, callback: handler});
-    }
     switch(true) {
       case IS(typesResolved, Array) && typesResolved.length > 0:
         for (const type of typesResolved) {
@@ -234,8 +225,12 @@ function delegateCaptureFactory(listen) {
           for (const handler of handlers) { doHandle(handler); }
         }
         return;
-      default:
-        for (const handler of handlers) { doHandle(handler); }
+      default: for (const handler of handlers) { doHandle(handler); }
+    }
+
+    function doHandle(handler) {
+      params.name = specifiedName;
+      IS(handler, Function) && listen({...params, callback: handler});
     }
   }
 }
@@ -248,51 +243,58 @@ function getNamedListener(type, name) {
   }
 }
 
+function popupGetter(jqx) {
+  if (!jqx.activePopup) {
+    Object.defineProperty(
+      jqx, `activePopup`, {
+        value: PopupFactory(jqx),
+        enumerable: false
+      } );
+  }
+  return jqx.activePopup;
+}
+
 function staticMethodsFactory(jqx) {
+  const { debugLog, Log, systemLog } = logFactory(jqx);
+  const { factoryExtensions, instanceExtensions } = allMethodsFactory(jqx);
+  systemLogger = systemLog;
+  debugLogger = debugLog;
+  instanceGetters = factoryExtensions;
+  instanceMethods = instanceExtensions;
+  $ = jqx;
   const editCssRule = (ruleOrSelector, ruleObject) => cssRuleEdit(ruleOrSelector, ruleObject);
   const allowProhibit = allowances(jqx);
-  const handle = HandleFactory();
+  const handle = HandleFactory(jqx);
   const capturedHandling = delegateCaptureFactory(handle);
+
   return {
-    debugLog,
-    log: (...args) => Log(`fromStatic`, ...args),
-    insertPositions,
+    log(...args) { Log(`fromStatic`, ...args); },
+    editCssRules(...rules) { for (const rule of rules) { cssRuleEdit(rule); } },
+    createStyle(id) { return styleFactory({createWithId: id || `jqx${randomString()}`}); },
+    editStylesheet(id) { return styleFactory({createWithId: id || `jqx${randomString()}`}); },
+    text(str, isComment = false) { return isComment ? jqx.comment(str) : document.createTextNode(str); },
+    node(selector, root = document) { return root.querySelector(selector, root); },
+    nodes(selector, root = document) {return [...root.querySelectorAll(selector, root)]; },
+    get editCssRule() { return editCssRule; },
+    get getNamedListener() { return getNamedListener; },
+    get debugLog() { return debugLog },
+    get virtual() { return virtualFactory(jqx); },
+    get allowTag() { return allowProhibit.allow; },
+    get prohibitTag() { return allowProhibit.prohibit; },
+    get removeCssRule() { return cssRemove; },
+    get removeCssRules() { return cssRemove; },
+    get delegate()  { return delegateFactory(capturedHandling); },
+    get delegateCaptured() { return capturedHandling; } ,
+    get handle() { return  capturedHandling; },
     get at() { return insertPositions; },
-    editCssRules: (...rules) => { for (const rule of rules) { cssRuleEdit(rule); } },
-    editCssRule,
     get setStyle() { /*deprecated*/return editCssRule; },
-    getNamedListener,
-    delegate: delegateFactory(capturedHandling),
-    delegateCaptured: capturedHandling,
-    handle: capturedHandling,
-    virtual: virtualFactory(jqx),
     get fn() { return addFn; },
-    allowTag: allowProhibit.allow,
-    prohibitTag: allowProhibit.prohibit,
     get lenient() { return tagLib.allowUnknownHtmlTags; },
     get IS() { return IS; },
-    get Popup() {
-      if (!jqx.activePopup) {
-        Object.defineProperty(
-          jqx, `activePopup`, {
-            value: PopupFactory(jqx),
-            enumerable: false
-          } );
-      }
-      return jqx.activePopup;
-    },
-    popup: () => jqx.Popup,
-    createStyle: id => styleFactory({createWithId: id || `jqx${randomString()}`}),
-    editStylesheet: id => styleFactory({createWithId: id || `jqx${randomString()}`}),
-    removeCssRule: cssRemove,
-    removeCssRules: cssRemove,
-    text: (str, isComment = false) => isComment ? jqx.comment(str) : document.createTextNode(str),
-    node: (selector, root = document) => root.querySelector(selector, root),
-    nodes: (selector, root = document) => [...root.querySelectorAll(selector, root)],
+    get Popup() { return popupGetter(jqx); },
   };
 }
 /* endregion functions */
-
 export {
   hex2RGBA,
   addHandlerId,
@@ -314,8 +316,10 @@ export {
   addJQxStaticMethods,
   createElementFromHtmlString,
   insertPositions,
-  systemLog,
+  systemLogger as systemLog,
+  debugLogger as debugLog,
   IS,
   static4Docs,
   elems4Docs,
+  $ as jqx,
 };

package/src/JQxLog.js

@@ -1,144 +1,172 @@
-import jqx from "../index.js";
-import {createElementFromHtmlString, element2DOM, insertPositions} from "./DOM.js";
-import {IS, logTime,} from "./JQxExtensionHelpers.js";
-import {logStyling} from "./EmbedResources.js";
-let logSystem = false;
-let useLogging = false;
-let log2Console = true;
-let reverseLogging = false;
-let useHtml = true;
-let editLogRule;
-const getLogBox = () => jqx(`#logBox`);
-const logBoxTextBoxId = `#jqx_logger`;
-
-const setStyling4Log = setStyle => { logStyling?.forEach(selector => setStyle(selector)); };
-
-const createLogElement = () => {
-  if (logStyling) {
-    setStyling4Log(editLogRule);
-  }
-  const jqx_logger_element_name = useHtml ? `div` : `pre`;
-  const loggingFieldSet = `<div id="logBox"><div class="legend"><div></div></div><${
-    jqx_logger_element_name} id="jqx_logger"></${jqx_logger_element_name}></div>`;
-  element2DOM(createElementFromHtmlString(loggingFieldSet), undefined, insertPositions.AfterBegin);
-  return jqx.node(logBoxTextBoxId);
-};
+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 => IS(something, String) &&
-  Object.assign(document.createElement(`textarea`), {innerHTML: something}).textContent || something;
+  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 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) {
+
+    if (isInstanceLog && !useLogging) {
       return args.forEach(arg => console.info(`${logTime()} ✔ ${decodeForConsole(arg)}`));
     }
 
     if (!useLogging) { return; }
 
-    if (!log2Console && !jqx.node(`#logBox`)) {
-      editLogRule = jqx.createStyle(`JQxLogCSS`);
-      createLogElement();
-    }
+    if (!log2Console && !jqx.node(`#logBox`)) { createLogElement(jqx); }
 
-    const logLine = arg => `${IS(arg, Object) ? JSON.stringify(arg, null, 2) : arg}\n`;
+    const logLine = arg => `${jqx.IS(arg, Object) ? JSON.stringify(arg, null, 2) : arg}\n`;
 
-    args.forEach( arg => log2Console
+    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>`)
+        reverseLogging ? `afterbegin` : `beforeend`,
+        `<div class="entry">${logTime()} ${logLine(arg.replace(/\n/g, `<br>`))}</div>`)
     );
-};
+  };
 
-const logActive = {
-  on() {  useLogging = true; Log(`Logging activated`); },
-  off() { useLogging = false; console.log(`Logging deactivated`) },
-}
+  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: {
+  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() {
-      log2Console = true;
-      Log(`Started logging to console`);
+      logActive.on();
+      setSystemLog.on();
+      if (!log2Console) {
+        getLogBox()?.addClass(`visible`);
+      }
+      Log(`Debug logging started. Every call to [jqx instance] is logged`);
       return debugLog;
     },
     off() {
-      Log(`Stopped logging to console (except error messages)`);
-      log2Console = false;
+      if (!getLogBox().isEmpty) {
+        setSystemLog.off();
+        Log(`Debug logging stopped`);
+        getLogBox()?.removeClass(`visible`);
+      }
+      logActive.off();
       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`);
+    },
+    toConsole: {
+      on() {
+        log2Console = true;
+        Log(`Started logging to console`);
         return debugLog;
       },
-      off: () => {
-        reverseLogging = false;
-        jqx(`#logBox .legend`).removeClass(`reversed`);
-        Log(`Reverse logging reset: now logging chronological (latest last)`);
+      off() {
+        Log(`Stopped logging to console (except error messages)`);
+        log2Console = false;
         return debugLog;
-      },
-    };
-  },
-  clear() {
-    jqx(logBoxTextBoxId).text(``);
-    console.clear();
-    Log(`Logging cleared`);
-    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 { Log, debugLog, systemLog };
+export default logFactory;