dom/query.js

  1. /**
  2.  * @module DOM
  3.  * @memberOf dom
  4.  */
  6. const {isEl, isEls, isStr, isVal} = require("../core/types");
  7. const L = require("../core/logging");
  8. const {cls} = require("../dom/classes");
  9. //
  10. // import {isEl, isEls, isStr, isVal} from "../core/types";
  11. // import {error} from "../core/logging";
  12. // import {cls} from "../dom/classes";
  13. //
  14. /**
  15.  * jQuery-like select "all" by query accepts element, nodes or query
  16.  * @param {String|HTMLElement|Element|Node|HTMLCollection|NodeList} q - query string
  17.  * @param {HTMLElement|Element|Node} [root] - root which query is issued from
  18.  * @return {Array}
  19.  */
  20. function $(q, root = document) {
  21.     if (isEl(q)) return Array.of(q);
  22.     if (isEls(q)) return Array.from(q);
  23.     if (!isStr(q)) {
  24.         L.error(`Query is not string nor element X.$(${q})`);
  25.         return null;
  26.     }
  27.     if (!isEl(root)) {
  28.         L.error(`Query root is not a node!\t[X.$(${q}, ${root})]`);
  29.         return null;
  30.     }
  31.     return Array.from(root.querySelectorAll(q));
  32. }
  34. /**
  35.  * jQuery-like select "one" by query accepts element, node or query
  36.  * @param {String|HTMLElement|Element|Node} q - query string
  37.  * @param {HTMLElement|Element|Node} [root] - root which query is issued from
  38.  * @return {Array} - returns array of length=1
  39.  */
  40. function $$(q, root = document) {
  41.     if (isEl(q)) return Array.of(q);
  42.     if (!isStr(q)) {
  43.         L.error(`Query is not string nor element X.$$(${q})`);
  44.         return null;
  45.     }
  46.     if (!isEl(root)) {
  47.         L.error(`Query root is not a node!\t[X.$(${q}, ${root})]`);
  48.         return null;
  49.     }
  50.     return Array.of(root.querySelector(q));
  51. }
  53. /**
  54.  * Generate relative query of given element/node
  55.  * @param {HTMLElement|Element|Node} e - element/node
  56.  * @param {HTMLElement|Element|Node} maxParent - parent where the query relates to
  57.  * @return {String} - query relative to maxParent
  58.  */
  59. function queryOf(e, maxParent, q) {
  60.     if ((!isVal(e) || !isEl(e))) {
  61.         L.error(`\nQuery generator's first parameter must be Element/Node! CAUSE: X.queryOf(${e}, ${maxParent})`);
  62.         return null;
  63.     }
  64.     maxParent = maxParent || document.body;
  65.     let gen = e.tagName;
  66.     q = q || "";
  68.     if (e.id) {
  69.         gen += e.id ? ('#' + e.id) : "";
  70.         return gen + (!(q === "") ? ' ' + q : "");
  71.     }
  73.     cls(e).items.forEach(function (value) {
  74.         gen = gen + (value !== '' ? '.' + value : '')
  75.     });
  77.     if (gen) {
  78.         let sibs = $(gen, e.parentElement);
  79.         if (sibs.length>1) {
  80.             let idx = Array.from(e.parentElement.children).findIndex(function (i) {
  81.                 return e === i;
  82.             });
  84.             if (idx > 0) {
  85.                 gen = gen + ":nth-child("+(idx+1)+")";
  86.             }
  87.         }
  88.     }
  89.     if (e.parentElement && (e.parentElement !== maxParent) && e.parentElement !== document) {
  91.         return (queryOf(e.parentElement, maxParent) + " > " + gen) + (!(q === "") ? ' ' + q : "");
  92.     } else {
  93.         return gen + (!(q === "") ? ' ' + q : "");
  94.     }
  95. }
  97. module.exports = {$, $$, queryOf};