not-jquery.js
| 1 | /** |
| 2 | * Collect all siblings until a selector. |
| 3 | * |
| 4 | * @param {Node} node |
| 5 | * @param {string} selector |
| 6 | * |
| 7 | * @return {Node[]} |
| 8 | */ |
| 9 | export function nextUntil(node, selector) { |
| 10 | const siblings = []; |
| 11 | const sibling = node.nextElementSibling; |
| 12 | |
| 13 | while (sibling) { |
| 14 | if (sibling.matches(selector)) break; |
| 15 | |
| 16 | siblings.push(sibling); |
| 17 | sibling = sibling.nextElementSibling; |
| 18 | } |
| 19 | |
| 20 | return siblings; |
| 21 | } |
| 22 | |
| 23 | /** |
| 24 | * The missing after version of insertBefore. |
| 25 | * |
| 26 | * @param {Node} newNode |
| 27 | * @param {Node} referenceNode |
| 28 | */ |
| 29 | export function insertAfter(newNode, referenceNode) { |
| 30 | referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); |
| 31 | } |
| 32 | |
| 33 | /** |
| 34 | * @param {Node} node |
| 35 | */ |
| 36 | export function removeNode(nodeToRemove) { |
| 37 | nodeToRemove?.parentNode.removeChild(nodeToRemove); |
| 38 | } |
| 39 | |
| 40 | /** |
| 41 | * Creates a DOM Node from an HTML string. |
| 42 | * |
| 43 | * @param {string} htmlString |
| 44 | * @returns {Node} |
| 45 | */ |
| 46 | export function nodeFromString(htmlString) { |
| 47 | const temp = document.createElement('template'); |
| 48 | htmlString.trim(); |
| 49 | temp.innerHTML = htmlString; |
| 50 | return temp.content.firstChild; |
| 51 | } |
| 52 | |
| 53 | /** |
| 54 | * Execute a function when the DOM is fully loaded. |
| 55 | * |
| 56 | * @param {function} fn |
| 57 | */ |
| 58 | export const domIsReady = (fn) => |
| 59 | document.readyState !== 'loading' ? window.setTimeout(fn, 0) : document.addEventListener('DOMContentLoaded', fn); |
| 60 | |
| 61 | /** |
| 62 | * Convert pixels to rem. |
| 63 | * |
| 64 | * @param {string|number} pixelValue |
| 65 | * @returns {string} The pixel value in rem as a DOM string. |
| 66 | */ |
| 67 | export function pixelsToRem(pixelValue) { |
| 68 | const {fontSize: rootFontSize} = window.getComputedStyle(document.documentElement); |
| 69 | |
| 70 | // Using parseInt here is an assumption that no one is overriding our root font-size. |
| 71 | return `${Number.parseFloat(pixelValue) / Number.parseFloat(rootFontSize)}rem`; |
| 72 | } |
| 73 | |
| 74 | /** |
| 75 | * Convert pixels to em. |
| 76 | * |
| 77 | * @param {string|number} pixelValue |
| 78 | * @param {Element} element |
| 79 | * @returns {string} The pixel value in rem as a DOM string. |
| 80 | */ |
| 81 | export function pixelsToEm(pixelValue, element) { |
| 82 | const {fontSize} = window.getComputedStyle(element); |
| 83 | |
| 84 | return `${Number.parseFloat(pixelValue) / Number.parseFloat(fontSize)}em`; |
| 85 | } |
| 86 | |
| 87 | /** |
| 88 | * Measure some text. |
| 89 | * |
| 90 | * @param {string} text |
| 91 | * @param {string} textProp - defaults to the node’s textContent |
| 92 | * @returns {string} |
| 93 | */ |
| 94 | export function measureText(node, textProp = 'textContent') { |
| 95 | const context = document.createElement('canvas').getContext('2d'); |
| 96 | const {fontWeight, fontSize, fontFamily} = window.getComputedStyle(node); |
| 97 | context.font = `${fontWeight} ${fontSize} ${fontFamily}`; |
| 98 | |
| 99 | return context.measureText(node[textProp]).width; |
| 100 | } |
| 101 |