jqx-es 1.2.4 → 1.2.6

package/src/_JQxX.js

@@ -1,500 +0,0 @@
-import {
-  addHandlerId, ExamineElementFeatureFactory,
-  insertPositions,
-  IS, isCommentOrTextNode,
-  isNode,
-  isNonEmptyString, randomString,
-  systemLog,
-  toDashedNotation,
-  truncateHtmlStr
-} from "./Utilities.js";
-import {ATTRS, createElementFromHtmlString, inject2DOMTree} from "./DOM.js";
-
-const isIt = ExamineElementFeatureFactory();
-
-/* region functions */
-function emptyElement(el) {
-  return el && (el.textContent = "");
-}
-
-function loop(instance, callback) {
-  const cleanCollection = instance.collection.filter(el => !isCommentOrTextNode(el));
-  for (let i = 0; i < cleanCollection.length; i += 1) {
-    callback(cleanCollection[i], i);
-  }
-
-  return instance;
-}
-
-function compareCI(key, compareTo) {
-  return key.toLowerCase().trim() === compareTo.trim().toLowerCase();
-}
-
-function cloneAndDestroy(elem) {
-  const cloned = elem.cloneNode(true)
-  cloned.removeAttribute && cloned.removeAttribute(`id`);
-  elem.isConnected ? elem.remove() : elem = null;
-  return cloned;
-}
-
-function setData(el, keyValuePairs) {
-  if (el && IS(keyValuePairs, Object)) {
-    for (const [key, value] of Object.entries(keyValuePairs)) {
-      el.setAttribute(`data-${toDashedNotation(key)}`, value);
-    }
-  }
-}
-
-function before (instance, elem2AddBefore) {
-  return instance.andThen(elem2AddBefore, true);
-}
-
-function after(instance, elem2AddAfter) {
-  return instance.andThen(elem2AddAfter);
-}
-
-function checkProp(prop) {
-  return prop.startsWith(`data`) || ATTRS.html.find(attr => prop.toLowerCase() === attr);
-}
-
-function css(el, keyOrKvPairs, value, jqx) {
-  if (value && IS(keyOrKvPairs, String)) {
-    keyOrKvPairs = {[keyOrKvPairs]: value === "-" ? "" : value};
-  }
-
-  let nwClass = undefined;
-
-  if (keyOrKvPairs.className) {
-    nwClass = keyOrKvPairs.className;
-    delete keyOrKvPairs.className;
-  }
-
-  const classExists = ([...el.classList].find(c => c.startsWith(`JQxClass-`) || nwClass && c === nwClass));
-  nwClass = classExists || nwClass || `JQxClass-${randomString().slice(1)}`;
-  jqx.editCssRule(`.${nwClass}`, keyOrKvPairs);
-  el.classList.add(nwClass);
-}
-
-function assignAttrValues(/*NODOC*/el, keyValuePairs) {
-  if (el) {
-    for (let [key, value] of Object.entries(keyValuePairs)) {
-      key = toDashedNotation(key);
-      if (key.startsWith(`data`)) {
-        return setData(el, value);
-      }
-
-      if (IS(value, String) && checkProp(key)) {
-        el.setAttribute(key, value.split(/[, ]/)?.join(` `));
-      }
-    }
-  }
-}
-
-function applyStyle(el, rules) {
-  if (IS(rules, Object)) {
-    for (let [key, value] of Object.entries(rules)) {
-      let priority;
-      if (/!important/i.test(value)) {
-        value = value.slice(0, value.indexOf(`!`)).trim();
-        priority = 'important';
-      }
-
-      el.style.setProperty(toDashedNotation(key), value, priority)
-    }
-  }
-}
-
-function logDebug(...args) {
-  debugLog.log(`❗` + args.map(v => String(v)).join(`, `) ) ;
-}
-
-function findParentScrollDistance(node, distance = 0, top = true) {
-  node = node?.parentElement;
-  const what = top ? `scrollTop` : `scrollLeft`;
-  distance += node ? node[what] : 0;
-  return !node ? distance : findParentScrollDistance(node, distance, top);
-}
-/* endregion functions */
-
-function instanceExtensionsFactory(instance) {
-  const allMethods = {
-    addClass: (...classNames) => loop(instance, el => el && classNames.forEach(cn => el.classList.add(cn))),
-    after,
-    afterMe: after,
-    andThen: (elem2Add, before = false) => {
-      if (!elem2Add || !IS(elem2Add, String, Node, Proxy)) {
-        logDebug(`[JQx instance].[beforeMe | afterMe | andThen]: insufficient input [${elem2Add}]`, );
-        return instance;
-      }
-
-      elem2Add = elem2Add?.isJQx
-        ? elem2Add.collection
-        : IS(elem2Add, Node) ? jqx.virtual(elem2Add).collection
-          : jqx.virtual(createElementFromHtmlString(elem2Add)).collection;
-
-      const [index, method, reCollected] = before
-        ? [0, `before`, elem2Add.concat(instance.collection)]
-        : [instance.collection.length - 1, `after`, instance.collection.concat(elem2Add)];
-
-      instance[index][method](...elem2Add);
-      instance.collection = reCollected;
-      return instance;
-    },
-    append: (...elems2Append) => {
-      if (!instance.is.empty && elems2Append.length) {
-        const shouldMove = instance.length === 1;
-
-        for (let elem2Append of elems2Append) {
-          if (!elem2Append.isJQx && isNonEmptyString(elem2Append)) {
-            const elem2Append4Test = elem2Append.trim();
-            const isPlainString = !/^<(.+)[^>]+>$/m.test(elem2Append4Test);
-            let toAppend = isPlainString ? jqx.text(elem2Append) : createElementFromHtmlString(elem2Append);
-            loop(instance, el => el.append(shouldMove ? toAppend : cloneAndDestroy(toAppend)));
-          }
-
-          if (isNode(elem2Append)) {
-            loop(instance, el => el.append(shouldMove ? elem2Append : cloneAndDestroy(elem2Append)));
-          }
-
-          if (elem2Append.isJQx && !elem2Append.is.empty) {
-            loop(instance, el =>
-              elem2Append.collection.forEach(elem =>
-                el.append(shouldMove ? elem : cloneAndDestroy(elem)))
-            );
-          }
-        }
-      }
-      return instance;
-    },
-    appendTo: (appendTo) => {
-      if (!appendTo.isJQx) {
-        appendTo = jqx(appendTo);
-      }
-      appendTo.append(instance);
-      return instance;
-    },
-    attr: (keyOrObj, value) => {
-      const firstElem = instance[0];
-
-      if (!firstElem) { return instance }
-
-      if (!value && isNonEmptyString(keyOrObj)) {
-        keyOrObj = toDashedNotation(keyOrObj);
-
-        if (keyOrObj === `class`) {
-          return [...firstElem?.classList]?.join(` `);
-        }
-
-        return firstElem?.getAttribute(keyOrObj);
-      }
-
-      if (isNonEmptyString(keyOrObj) && value) {
-        keyOrObj = toDashedNotation(keyOrObj);
-
-        switch(true) {
-          case keyOrObj.startsWith(`data-`):
-            keyOrObj = { data: {[keyOrObj.replace(`data-`, ``)]: value } };
-            break;
-          default: keyOrObj = { [keyOrObj]: value };
-        }
-      }
-
-      if (IS(keyOrObj, Object) && !instance.is.empty) {
-        assignAttrValues(firstElem, keyOrObj);
-      }
-
-      return instance;
-    },
-    before,
-    beforeMe: before,
-    clear: instance => loop(instance, emptyElement),
-    closest: (selector) => {
-      const theClosest = isNonEmptyString(selector) ? instance[0].closest(selector) : null;
-      return theClosest ? jqx(theClosest) : instance
-    },
-    computedStyle: (property) => instance.first() && getComputedStyle(instance.first())[property],
-    css: (keyOrKvPairs, value) => loop(instance, el => css(el, keyOrKvPairs, value, jqx)),
-    duplicate: (toDOM = false, root = document.body) => {
-      const nodes = instance.toNodeList().map(el => el.removeAttribute && el.removeAttribute(`id`) || el);
-      const nwJQx = jqx.virtual(nodes);
-      return toDOM ? nwJQx.toDOM(root) : nwJQx;
-    },
-    each: (cb) => loop(instance, cb),
-    empty: instance => loop(instance, emptyElement),
-    find: (selector) =>
-      instance.collection.length > 0 ? [...instance.first()?.querySelectorAll(selector)] : [],
-    find$: (selector) => { return instance.collection.length > 0 ? jqx(selector, instance) : instance; },
-    first: (asJQxInstance = false) => {
-      if (instance.collection.length > 0) {
-        return asJQxInstance
-          ? instance.single()
-          : instance.collection[0];
-      }
-      return undefined;
-    },
-    first$: (indexOrSelector) => instance.single(indexOrSelector),
-    getData: (dataAttribute, valueWhenFalsy) =>
-      instance.first() && instance.first().dataset?.[dataAttribute] || valueWhenFalsy,
-    hasClass: (...classNames) => {
-      const firstElem = instance[0];
-      return !firstElem || !firstElem.classList.length
-        ? false : classNames.find(cn => firstElem.classList.contains(cn)) && true || false;
-    },
-    hide: instance => loop(instance, el => applyStyle(el, {display: `none !important`})),
-    html: (htmlValue, append) => {
-      if (htmlValue === undefined) {
-        const node = instance.node;
-        return node?.getHTML && node.getHTML() || ``;
-      }
-
-      if (!instance.isEmpty()) {
-        const nwElement = createElementFromHtmlString(
-          `<div>${htmlValue.isJQx ? htmlValue.HTML.get(true) : htmlValue}</div>`
-        );
-
-        if (!IS(nwElement, Comment)) {
-          const cb = el => {
-            if (!append) { el.textContent = ``; }
-
-            return el.insertAdjacentHTML(jqx.at.end, nwElement.getHTML());
-          }
-          return loop(instance, cb);
-        }
-      }
-
-      return instance;
-    },
-    htmlFor: (forQuery, htmlString = "", append = false) => {
-      if (forQuery && instance.collection.length) {
-        if (!forQuery || !isNonEmptyString(htmlString)) { return instance; }
-
-        const el2Change = instance.find$(forQuery);
-
-        if (el2Change.length < 1) { return instance; }
-
-        const nwElement = createElementFromHtmlString(`<span>${htmlString}</span>`);
-
-        el2Change.each(el => {
-          if (!append) { el.textContent = ``; }
-          el.insertAdjacentHTML(jqx.at.end, nwElement?.getHTML());
-        });
-
-      }
-
-      return instance;
-    },
-    isEmpty: instance => instance.collection.length < 1,
-    nth$: (indexOrSelector) => instance.single(indexOrSelector),
-    on: (type, ...callback) => {
-      if (instance.collection.length && IS(type, String, Array)) {
-        if (type?.length < 1 || callback.length < 1) { return instance; }
-        const cssSelector4Handler = addHandlerId(instance);
-        jqx.handle({type, selector: cssSelector4Handler, handlers: callback});
-      }
-
-      return instance;
-    },
-    prepend: (...elems2Prepend) => {
-      if (!instance.is.empty && elems2Prepend) {
-        const shouldMove = instance.length === 1;
-
-        for (let elem2Prepend of elems2Prepend) {
-          if (isNonEmptyString(elem2Prepend)) {
-            elem2Prepend = elem2Prepend.trim();
-            const isPlainString = !/^<(.+)[^>]+>$/m.test(elem2Prepend);
-            let toPrepend = isPlainString ? jqx.text(elem2Prepend) : createElementFromHtmlString(elem2Prepend);
-            toPrepend = shouldMove ? toPrepend : cloneAndDestroy(toPrepend);
-            loop(instance, el => el.prepend(toPrepend.cloneNode(true)));
-          }
-
-          if (isNode(elem2Prepend)) {
-            loop(instance, el => el.prepend(shouldMove ? elem2Prepend : cloneAndDestroy(elem2Prepend)));
-          }
-
-          if (elem2Prepend.isJQx && !elem2Prepend.is.empty) {
-            elem2Prepend.collection.length > 1 && elem2Prepend.collection.reverse();
-            loop(instance, el => loop( elem2Prepend, elem => el.prepend(shouldMove ? elem : cloneAndDestroy(elem)) ) );
-            elem2Prepend.collection.reverse();
-          }
-        }
-      }
-
-      return instance;
-    },
-    prependTo: (prependTo) => {
-      if (!prependTo.isJQx) {
-        prependTo = jqx.virtual(prependTo);
-      }
-
-      prependTo.prepend(instance);
-      return instance;
-    },
-    prop: (nameOrProperties, value) => {
-      if (IS(nameOrProperties, String) && !value) {
-        return nameOrProperties.startsWith(`data`)
-          ? instance[0]?.dataset[nameOrProperties.slice(nameOrProperties.indexOf(`-`)+1)]
-          : instance[0]?.[nameOrProperties];
-      }
-
-      const props = !IS(nameOrProperties, Object) ? { [nameOrProperties]: value } : nameOrProperties;
-      for (let [propName, propValue] of Object.entries(props)) {
-        propName = propName.trim();
-
-        if (propValue && !checkProp(propName) || !propValue) {
-          return false;
-        }
-
-        const isId = propName.toLowerCase() === `id`;
-
-        if (isId) { return instance[0].id = propValue; }
-
-        loop(instance, el => {
-          if (propName.startsWith(`data`)) {
-            return el.dataset[propName.slice(propName.indexOf(`-`)+1)] = propValue;
-          }
-
-          el[propName] = propValue;
-        });
-      }
-
-      return instance;
-    },
-    remove: (selector) => {
-      systemLog.log(`remove ${truncateHtmlStr(instance.HTML.get(1), 40)}${selector ? ` /w selector ${selector}` : ``}`);
-      const remover = el => el.remove();
-      const removeFromCollection = () =>
-        instance.collection = instance.collection.filter(el => document.documentElement.contains(el));
-
-      if (selector) {
-        const selectedElements = instance.find$(selector);
-        if (!selectedElements.is.empty) {
-          loop(selectedElements, remover);
-          removeFromCollection();
-        }
-        return instance;
-      }
-      loop(instance, remover);
-      removeFromCollection();
-      return instance;
-    },
-    rmAttr: (...attrNames) => {
-      for (const attr of attrNames) { instance.node.removeAttribute(attr); }
-      return instance;
-    },
-    removeClass: (...classNames) =>
-      loop(instance, el => { if (el) { for (const cn of classNames) { el.classList.remove(cn); } } }),
-    renderTo: (root = document.body, at = jqx.at.end) => {
-      instance.first$().toDOM(root, at);
-      return instance;
-    },
-    replace: (oldChild, newChild) => {
-      const firstElem = instance[0];
-
-      if (!oldChild || (!newChild || !IS(newChild, HTMLElement) && !newChild.isJQx)) {
-        console.error(`JQx replace: invalid replacement value`);
-        return instance;
-      }
-
-      if (newChild.isJQx) {
-        newChild = newChild[0];
-      }
-
-      if (IS(newChild, NodeList)) {
-        newChild = newChild[0];
-      }
-
-      if (firstElem && oldChild) {
-        oldChild = IS(oldChild, String)
-          ? firstElem.querySelectorAll(oldChild)
-          : oldChild.isJQx
-            ? oldChild.collection
-            : oldChild;
-
-        if (IS(oldChild, HTMLElement, NodeList, Array) && IS(newChild, HTMLElement)) {
-          (IS(oldChild, HTMLElement) ? [oldChild] : [...oldChild])
-            .forEach(chld => chld.replaceWith(newChild.cloneNode(true)));
-        }
-      }
-
-      return instance;
-    },
-    replaceClass: (className, ...nwClassNames) => loop( instance, el => {
-      el.classList.remove(className);
-      for (const name of nwClassNames) { el.classList.add(name); }
-    } ),
-    replaceMe: (newChild) => /*NODOC*/ instance.replaceWith(newChild),
-    replaceWith: (newChild) => {
-      newChild = IS(newChild, Element) ? newChild : newChild.isJQx ? newChild[0] : undefined;
-
-      if (newChild) {
-        instance[0].replaceWith(newChild);
-        instance = jqx.virtual(newChild);
-      }
-
-      return instance;
-    },
-    setData: (keyValuePairs) => loop(instance, el => setData(el, keyValuePairs)),
-    show: instance => loop(instance, el => applyStyle(el, {display: `revert-layer !important`})),
-    single: (indexOrSelector) => {
-      if (instance.collection.length > 0) {
-        if (IS(indexOrSelector, String)) {
-          return instance.find$(indexOrSelector);
-        }
-
-        if (IS(indexOrSelector, Number)) {
-          return jqx(instance.collection[indexOrSelector]);
-        }
-
-        return jqx(instance.collection[0]);
-      }
-
-      return instance;
-    },
-    style: (keyOrKvPairs, value) => {
-      const loopCollectionLambda = el => {
-        if (value && IS(keyOrKvPairs, String)) {
-          keyOrKvPairs = { [keyOrKvPairs]: value || `none` };
-        }
-
-        applyStyle(el, keyOrKvPairs);
-      };
-      return loop(instance, loopCollectionLambda);
-    },
-    text: (textValue, append = false) => {
-      if (instance.isEmpty()) { return instance; }
-      if (!IS(textValue, String)) { return instance.first().textContent; }
-      const loopCollectionLambda = el => el.textContent = append ? el.textContent + textValue : textValue;
-      return loop(instance, loopCollectionLambda);
-    },
-    toDOM: (root = document.body, position = insertPositions.BeforeEnd) => {
-      if (instance.isVirtual) { instance.isVirtual = false; }
-      instance.collection = inject2DOMTree(instance.collection, root, position);
-
-      return instance;
-    },
-    toggleClass: (className) => loop(instance, el => el.classList.toggle(className)),
-    toNodeList: instance => [...instance.collection].map(el => document.importNode(el, true)),
-    trigger: (evtType, SpecifiedEvent = Event, options = {}) => {
-      if (instance.collection.length) {
-        const evObj = new SpecifiedEvent( evtType, { ...options, bubbles: options.bubbles??true} );
-        for( let elem of instance.collection ) { elem.dispatchEvent(evObj); }
-      }
-      return instance;
-    },
-    val: (newValue) => {
-      const firstElem = instance[0];
-
-      if (!firstElem || !IS(firstElem, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement)) {
-        return instance;
-      }
-
-      if (newValue === undefined) {
-        return firstElem.value;
-      }
-
-      firstElem.value = !IS(newValue, String) ? "" : newValue;
-
-      return instance;
-    },
-  };
-}