dom.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. /*!
  2. * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  3. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  4. * v1.0.0-beta.82
  5. */
  6. import { CSS_UTILITY } from "./resources";
  7. import { guid } from "./guid";
  8. /**
  9. * This helper will guarantee an ID on the provided element.
  10. *
  11. * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
  12. *
  13. * @returns {string} The element's ID.
  14. */
  15. export function ensureId(el) {
  16. if (!el) {
  17. return "";
  18. }
  19. return (el.id = el.id || `${el.tagName.toLowerCase()}-${guid()}`);
  20. }
  21. export function nodeListToArray(nodeList) {
  22. return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
  23. }
  24. export function getThemeName(el) {
  25. const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
  26. return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
  27. }
  28. export function getElementDir(el) {
  29. const prop = "dir";
  30. const selector = `[${prop}]`;
  31. const closest = closestElementCrossShadowBoundary(el, selector);
  32. return closest ? closest.getAttribute(prop) : "ltr";
  33. }
  34. export function getElementProp(el, prop, fallbackValue) {
  35. const selector = `[${prop}]`;
  36. const closest = el.closest(selector);
  37. return closest ? closest.getAttribute(prop) : fallbackValue;
  38. }
  39. export function getRootNode(el) {
  40. return el.getRootNode();
  41. }
  42. export function getHost(root) {
  43. return root.host || null;
  44. }
  45. /**
  46. * This helper queries an element's rootNodes and any ancestor rootNodes.
  47. *
  48. * @returns {Element[]} The elements.
  49. */
  50. export function queryElementsRoots(element, selector) {
  51. // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
  52. // Based on: https://stackoverflow.com/q/54520554/194216
  53. function queryFromAll(el, allResults) {
  54. if (!el) {
  55. return allResults;
  56. }
  57. if (el.assignedSlot) {
  58. el = el.assignedSlot;
  59. }
  60. const rootNode = getRootNode(el);
  61. const results = Array.from(rootNode.querySelectorAll(selector));
  62. const uniqueResults = results.filter((result) => !allResults.includes(result));
  63. allResults = [...allResults, ...uniqueResults];
  64. const host = getHost(rootNode);
  65. return host ? queryFromAll(host, allResults) : allResults;
  66. }
  67. return queryFromAll(element, []);
  68. }
  69. /**
  70. * This helper queries an element's rootNode and any ancestor rootNodes.
  71. *
  72. * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
  73. *
  74. * @returns {Element} The element.
  75. */
  76. export function queryElementRoots(element, { selector, id }) {
  77. // Gets the rootNode and any ancestor rootNodes (shadowRoot or document) of an element and queries them for a selector.
  78. // Based on: https://stackoverflow.com/q/54520554/194216
  79. function queryFrom(el) {
  80. if (!el) {
  81. return null;
  82. }
  83. if (el.assignedSlot) {
  84. el = el.assignedSlot;
  85. }
  86. const rootNode = getRootNode(el);
  87. const found = id
  88. ? "getElementById" in rootNode
  89. ? /*
  90. Check to make sure 'getElementById' exists in cases where element is no longer connected to the DOM and getRootNode() returns the element.
  91. https://github.com/Esri/calcite-components/pull/4280
  92. */
  93. rootNode.getElementById(id)
  94. : null
  95. : selector
  96. ? rootNode.querySelector(selector)
  97. : null;
  98. const host = getHost(rootNode);
  99. return found ? found : host ? queryFrom(host) : null;
  100. }
  101. return queryFrom(element);
  102. }
  103. export function closestElementCrossShadowBoundary(element, selector) {
  104. // based on https://stackoverflow.com/q/54520554/194216
  105. function closestFrom(el) {
  106. return el ? el.closest(selector) || closestFrom(getHost(getRootNode(el))) : null;
  107. }
  108. return closestFrom(element);
  109. }
  110. export function isCalciteFocusable(el) {
  111. return typeof (el === null || el === void 0 ? void 0 : el.setFocus) === "function";
  112. }
  113. export async function focusElement(el) {
  114. if (!el) {
  115. return;
  116. }
  117. return isCalciteFocusable(el) ? el.setFocus() : el.focus();
  118. }
  119. const defaultSlotSelector = ":not([slot])";
  120. export function getSlotted(element, slotName, options) {
  121. if (slotName && !Array.isArray(slotName) && typeof slotName !== "string") {
  122. options = slotName;
  123. slotName = null;
  124. }
  125. const slotSelector = slotName
  126. ? Array.isArray(slotName)
  127. ? slotName.map((name) => `[slot="${name}"]`).join(",")
  128. : `[slot="${slotName}"]`
  129. : defaultSlotSelector;
  130. if (options === null || options === void 0 ? void 0 : options.all) {
  131. return queryMultiple(element, slotSelector, options);
  132. }
  133. return querySingle(element, slotSelector, options);
  134. }
  135. function getDirectChildren(el, selector) {
  136. return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
  137. }
  138. function queryMultiple(element, slotSelector, options) {
  139. let matches = slotSelector === defaultSlotSelector
  140. ? getDirectChildren(element, defaultSlotSelector)
  141. : Array.from(element.querySelectorAll(slotSelector));
  142. matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
  143. matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
  144. const selector = options === null || options === void 0 ? void 0 : options.selector;
  145. return selector
  146. ? matches
  147. .map((item) => Array.from(item.querySelectorAll(selector)))
  148. .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], [])
  149. .filter((match) => !!match)
  150. : matches;
  151. }
  152. function querySingle(element, slotSelector, options) {
  153. let match = slotSelector === defaultSlotSelector
  154. ? getDirectChildren(element, defaultSlotSelector)[0] || null
  155. : element.querySelector(slotSelector);
  156. match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
  157. match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
  158. const selector = options === null || options === void 0 ? void 0 : options.selector;
  159. return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
  160. }
  161. export function filterDirectChildren(el, selector) {
  162. return Array.from(el.children).filter((child) => child.matches(selector));
  163. }
  164. // set a default icon from a defined set or allow an override with an icon name string
  165. export function setRequestedIcon(iconObject, iconValue, matchedValue) {
  166. if (typeof iconValue === "string" && iconValue !== "") {
  167. return iconValue;
  168. }
  169. else if (iconValue === "") {
  170. return iconObject[matchedValue];
  171. }
  172. }
  173. export function intersects(rect1, rect2) {
  174. return !(rect2.left > rect1.right ||
  175. rect2.right < rect1.left ||
  176. rect2.top > rect1.bottom ||
  177. rect2.bottom < rect1.top);
  178. }
  179. /**
  180. * This helper makes sure that boolean aria attributes are properly converted to a string.
  181. *
  182. * It should only be used for aria attributes that require a string value of "true" or "false".
  183. *
  184. * @returns {string} The string conversion of a boolean value ("true" | "false").
  185. */
  186. export function toAriaBoolean(value) {
  187. return (!!value).toString();
  188. }