jqx-es 1.0.0

package/src/JQxExtensionHelpers.js

@@ -0,0 +1,276 @@
+import { createElementFromHtmlString, insertPositions, inject2DOMTree, cleanupHtml, ATTRS} from "./DOM.js";
+import { debugLog, Log, systemLog } from "./JQxLog.js";
+import allMethods from "./JQxMethods.js";
+import PopupFactory from "./Popup.js";
+import HandleFactory from "./HandlerFactory.js";
+import tagLib from "./HTMLTags.js";
+import {
+  randomString, toDashedNotation, IS, truncateHtmlStr, tagFNFactory as $T,
+  truncate2SingleStr, logTime, hex2RGBA, styleFactory, toCamelcase
+} from "./Utilities.js";
+let static4Docs = {};
+const {
+  instanceMethods, instanceGetters,isCommentOrTextNode, isNode,
+  isHtmlString, isArrayOfHtmlElements, isArrayOfHtmlStrings, ElemArray2HtmlString,
+  input2Collection, setCollectionFromCssSelector, addHandlerId, cssRuleEdit,
+  addFn, elems4Docs } = smallHelpersFactory();
+
+/* region functions */
+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);
+  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}"]`;
+  };
+  const elems4Docs = Object.entries(tagLib.tagsRaw)
+    .filter( ([,cando]) => cando)
+    .map( ([key,]) => key)
+    .sort( (a, b) => a.localeCompare(b));
+  
+  return {
+    instanceMethods, instanceGetters,isCommentOrTextNode, isNode, isComment, isText,
+    isHtmlString, isArrayOfHtmlElements, isArrayOfHtmlStrings, ElemArray2HtmlString,
+    input2Collection, setCollectionFromCssSelector, addHandlerId, cssRuleEdit,
+    addFn, elems4Docs };
+}
+
+function proxify(instance) {
+  return new Proxy( instance, { get: (obj, key) => proxyKeyFactory(obj, key, instance) } );
+}
+
+function wrapExtension(method, instance) {
+  return  (...args) => IS(method, Function) && method(proxify(instance), ...args);
+}
+
+function wrapGetter(method, instance) {
+  return (...args) => IS(method, Function) && method(proxify(instance), ...args);
+}
+
+function proxyKeyFactory(self, key, instance) {
+  switch(true) {
+    case IS(key, Symbol): return self;
+    case IS(+key, Number): return self.collection?.[key] || `ELEMENT WITH INDEX ${key} NOT FOUND`;
+    case !!(key in instanceGetters): return wrapGetter(instanceGetters[key], instance)();
+    case !!(key in instanceMethods): return wrapExtension(instanceMethods[key], instance);
+    default: return self[key];
+  }
+}
+
+function addJQxStaticMethods(jqx) {
+  const staticMethods = defaultStaticMethodsFactory(jqx);
+  Object.entries(Object.getOwnPropertyDescriptors(staticMethods))
+    .forEach( ([key, descriptor]) => {
+      Object.defineProperty(jqx, key, descriptor);
+      Object.defineProperty(static4Docs, key, descriptor); } );
+  return jqx;
+}
+
+function allowances(jqx) {
+  return {
+    allow: tagName => {
+      const isWebComponent = /-/.test(tagName);
+      const webComponentTagName = isWebComponent && tagName;
+      tagName =  isWebComponent ? toCamelcase(tagName) : tagName.toLowerCase();
+      tagLib.allowTag(tagName);
+      
+      if (!IS(jqx[tagName], Function)) {
+        Object.defineProperties( jqx, addGetters(tagName, true, jqx, webComponentTagName) );
+      }
+    },
+    prohibit: tagName => {
+      tagName = tagName.toLowerCase();
+      tagLib.prohibitTag(tagName);
+      
+      if (IS(jqx[tagName], Function)) {
+        Object.defineProperties( jqx, addGetters(tagName, false, jqx) );
+      }
+    }
+  }
+}
+
+function cssRemove(...rules) {
+  if (rules.length === 1) {
+    const ruleStr = String(rules.shift().trim());
+    rules = !ruleStr.startsWith(`!`)
+      ? ruleStr.split(`,`).map(v => v.trim())
+      : [ruleStr.slice(1, -1)];
+  }
+  rules.map(rule => rule.startsWith(`!`) ? rule.slice(1, -1) : rule)
+    .forEach(rule => cssRuleEdit(rule, {removeRule: 1}));
+}
+
+function delegateFactory(handle) {
+  return function(type, origin, ...handlers) {
+    if (IS(origin, Function)) {
+      handlers.push(origin);
+      origin = undefined;
+    }
+    
+    return handlers.forEach(handler => handle(type, origin, handler));
+  }
+}
+
+function virtualFactory(jqx) {
+  return function(html, root, position) {
+    root = root?.isJQx ? root?.[0] : root;
+    position = position && Object.values(insertPositions).find(pos => position === pos) ? position : undefined;
+    const virtualElem = jqx(html, document.createElement(`br`));
+    if (root && !IS(root, HTMLBRElement)) {
+      virtualElem.collection.forEach(elem =>
+        position ? root.insertAdjacentElement(position, elem) : root.append(elem));
+    }
+    return virtualElem;
+  }
+}
+
+function combineObjectSources(...sources) {
+  const result = {};
+  
+  for (const source of sources) {
+    const descriptors = Object.getOwnPropertyDescriptors(source);
+    Object.entries(descriptors).forEach( ([key, descriptor]) =>
+      !(key in result) && Object.defineProperty(result, key, descriptor) );
+  }
+  
+  return result;
+}
+
+function tagNotAllowed(tagName) {
+  console.error(`JQx: "${tagName}" not allowed, not rendered`);
+  return undefined;
+}
+
+function tagGetterFactory(tagName, cando, jqx, webComponentTagName) {
+  tagName = toDashedNotation(webComponentTagName || tagName.toLowerCase());
+  
+  return {
+    get() {
+      return  (...args) => {
+        if (!cando) { return tagNotAllowed(tagName) }
+        return jqx.virtual(cleanupHtml($T[tagName](...args)));
+      }
+    },
+    enumerable: false,
+    configurable: true,
+  }
+}
+
+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, };
+}
+
+function defaultStaticMethodsFactory(jqx) {
+  return combineObjectSources(
+    Object.entries(tagLib.tagsRaw).reduce(staticTagsLambda(jqx), {}),
+    staticMethodsFactory(jqx));
+}
+
+function staticTagsLambda(jqx) {
+  return function(acc, [tag, cando]) {
+    cando && Object.defineProperties( acc, addGetters(tag, cando, jqx) );
+    return acc;
+  }
+}
+
+function staticMethodsFactory(jqx) {
+  const editCssRule = (ruleOrSelector, ruleObject) => cssRuleEdit(ruleOrSelector, ruleObject);
+  const allowProhibit = allowances(jqx);
+  return {
+    debugLog,
+    log: (...args) => Log(`fromStatic`, ...args),
+    insertPositions,
+    get at() { return insertPositions; },
+    editCssRules: (...rules) => rules.forEach(rule => cssRuleEdit(rule)),
+    editCssRule,
+    get setStyle() { /*deprecated*/return editCssRule; },
+    delegate: delegateFactory(HandleFactory()),
+    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)],
+  };
+}
+/* endregion functions */
+
+export {
+  hex2RGBA,
+  addHandlerId,
+  isHtmlString,
+  isNode,
+  logTime,
+  toDashedNotation,
+  randomString,
+  isArrayOfHtmlStrings,
+  isArrayOfHtmlElements,
+  isCommentOrTextNode,
+  inject2DOMTree,
+  ElemArray2HtmlString,
+  input2Collection,
+  setCollectionFromCssSelector,
+  truncateHtmlStr,
+  truncate2SingleStr,
+  proxify,
+  addJQxStaticMethods,
+  createElementFromHtmlString,
+  insertPositions,
+  systemLog,
+  IS,
+  static4Docs,
+  elems4Docs,
+};

package/src/JQxLog.js

@@ -0,0 +1,144 @@
+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);
+};
+
+const decodeForConsole = something => IS(something, String) &&
+  Object.assign(document.createElement(`textarea`), {innerHTML: something}).textContent || something;
+
+const Log = (...args) => {
+    const isInstanceLog = args[0] === `fromStatic`;
+    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`)) {
+      editLogRule = jqx.createStyle(`JQxLogCSS`);
+      createLogElement();
+    }
+
+    const logLine = arg => `${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`); },
+  off() { useLogging = false; console.log(`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;
+  }
+};
+
+export { Log, debugLog, systemLog };