From dad990fe598fd110e5d1a269896a371cec477b78 Mon Sep 17 00:00:00 2001
From: Nicole Karhoff <45244877+nkarhoff@users.noreply.github.com>
Date: Thu, 12 Sep 2024 12:07:48 -0400
Subject: [PATCH] TW29378047 Explo Eclipse Hero (#45)
* Hero Paragraph Initial Setup
* Set up vertical alignment
* Styles for mobile
* Adjust min-height on mobile
* Switch to Video media
* Adjust position for hero content if no overlay is set
* Update template to include remote video
* Fix field name in hero template
* Add patch-package and patch youtube-background to use aria-checked
* Remove underscore from hero.js file name and fix extra js folder in libraries file
* Fix hero content positioning on mobile
* Update patch to add aria-label to Play and Mute buttons
---
assets/js/hero.js | 2 +
assets/scss/_hero.scss | 125 ++++++++
package-lock.json | 17 +-
package.json | 6 +-
patches/youtube-background+1.1.8.patch | 302 ++++++++++++++++++
saplings_child.libraries.yml | 7 +
...d--paragraph--sa-hero-background.html.twig | 3 +
...ield--paragraph--sa-hero-content.html.twig | 3 +
.../paragaphs/paragraph--sa-hero.html.twig | 137 ++++++++
9 files changed, 599 insertions(+), 3 deletions(-)
create mode 100644 assets/js/hero.js
create mode 100644 assets/scss/_hero.scss
create mode 100644 patches/youtube-background+1.1.8.patch
create mode 100644 templates/overrides/fields/field--paragraph--sa-hero-background.html.twig
create mode 100644 templates/overrides/fields/field--paragraph--sa-hero-content.html.twig
create mode 100644 templates/overrides/paragaphs/paragraph--sa-hero.html.twig
diff --git a/assets/js/hero.js b/assets/js/hero.js
new file mode 100644
index 0000000..5b497a7
--- /dev/null
+++ b/assets/js/hero.js
@@ -0,0 +1,2 @@
+import 'youtube-background';
+new VideoBackgrounds('[data-vbg]');
diff --git a/assets/scss/_hero.scss b/assets/scss/_hero.scss
new file mode 100644
index 0000000..12cf496
--- /dev/null
+++ b/assets/scss/_hero.scss
@@ -0,0 +1,125 @@
+.paragraph--type--sa-hero {
+ display: flex;
+ flex-direction: column;
+ // justify-content: center;
+ width: 100%;
+ overflow: hidden;
+ position: relative;
+
+ @include media-breakpoint-up(lg) {
+ min-height: 55vh;
+ }
+
+
+
+ #hero-video-control {
+ background-color: unset;
+ border: 0;
+
+ &.play {
+ .bi-pause {
+ display: none;
+ }
+ }
+
+ &.pause {
+ .bi-play {
+ display: none;
+ }
+ }
+
+ .bi {
+ font-size: 1.5rem;
+ }
+ }
+
+ .hero-image {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ aspect-ratio: 16 / 9;
+
+ @include media-breakpoint-down(lg) {
+ position: relative !important;
+ iframe {
+ height: 100% !important;
+ width: 100% !important;
+ }
+ }
+ }
+
+ &.video {
+ @include media-breakpoint-up(lg) {
+ aspect-ratio: 16 / 9;
+ }
+
+ video {
+ height: 100%;
+ width: 100%;
+ }
+ }
+
+ @include media-breakpoint-down(lg) {
+ .hero-content {
+ color: white;
+
+ .bi {
+ color: white;
+ }
+ }
+ }
+
+ @include media-breakpoint-up(lg) {
+ .hero-content {
+ position: relative;
+ }
+
+ /* Overlay. */
+ &[data-overlay] {
+ .hero-content {
+ padding: 20px;
+ color: white;
+
+ .bi {
+ color: white;
+ }
+
+ // Set all inner content to be higher z-index than before.
+ .text-wrapper, #hero-video-control {
+ position: relative;
+ z-index: 2;
+ }
+
+ &:before {
+ background: #252525 none repeat scroll 0 0;
+ content: "";
+ display: block;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: 0;
+ }
+
+ &--overlay-invert {
+ &:before {
+ background: #fff none repeat scroll 0 0;
+ }
+ }
+ }
+ // Loops 1 - 9 and adds opacity $i x 0.1
+ @for $i from 1 through 9 {
+ &[data-overlay="#{$i}"] {
+ .hero-content {
+ &:before {
+ opacity: calc($i * 0.1);
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index 7d15c1a..4b38542 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,11 +7,13 @@
"": {
"name": "saplings_child",
"version": "5.0.0",
+ "hasInstallScript": true,
"dependencies": {
"cssnano": "^6.0.1",
"dotenv": "^16.0.3",
"patch-package": "^8.0.0",
- "postcss-inline-svg": "^5.0.0"
+ "postcss-inline-svg": "^5.0.0",
+ "youtube-background": "^1.1.8"
},
"devDependencies": {
"@babel/core": "^7.17.7",
@@ -3288,6 +3290,11 @@
"node": ">= 6"
}
},
+ "node_modules/book-of-spells": {
+ "version": "1.0.32",
+ "resolved": "https://registry.npmjs.org/book-of-spells/-/book-of-spells-1.0.32.tgz",
+ "integrity": "sha512-9uf85aVE//Etv7UBaYRLx5PABH7DhSJeqZyMZWyW1NCEa9FzZgWELUsL/OLKQL2WkXMsaevpRZWDk9fQpLgVfA=="
+ },
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -12655,6 +12662,14 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "node_modules/youtube-background": {
+ "version": "1.1.8",
+ "resolved": "https://registry.npmjs.org/youtube-background/-/youtube-background-1.1.8.tgz",
+ "integrity": "sha512-M2w1qiWlsA3Q4KerfDE+dNWv4tf8BTjiqq0WqX1Mm1nXhLYk1oUqR7mEm16OOka4goAoz4oVXRafbDGYKFhyhg==",
+ "dependencies": {
+ "book-of-spells": "^1.0.18"
+ }
}
}
}
diff --git a/package.json b/package.json
index 149f34b..7a87bc3 100644
--- a/package.json
+++ b/package.json
@@ -33,12 +33,14 @@
"gulp": "gulp",
"watch": "gulp watch",
"build": "gulp build",
- "criticalcss": "node critical-css/clean.js && node critical-css/criticalcss.mjs"
+ "criticalcss": "node critical-css/clean.js && node critical-css/criticalcss.mjs",
+ "postinstall": "patch-package"
},
"dependencies": {
"cssnano": "^6.0.1",
"dotenv": "^16.0.3",
"patch-package": "^8.0.0",
- "postcss-inline-svg": "^5.0.0"
+ "postcss-inline-svg": "^5.0.0",
+ "youtube-background": "^1.1.8"
}
}
diff --git a/patches/youtube-background+1.1.8.patch b/patches/youtube-background+1.1.8.patch
new file mode 100644
index 0000000..0732c25
--- /dev/null
+++ b/patches/youtube-background+1.1.8.patch
@@ -0,0 +1,302 @@
+diff --git a/node_modules/youtube-background/jquery.youtube-background.js b/node_modules/youtube-background/jquery.youtube-background.js
+index 771bfb1..220e48e 100644
+--- a/node_modules/youtube-background/jquery.youtube-background.js
++++ b/node_modules/youtube-background/jquery.youtube-background.js
+@@ -7,7 +7,7 @@
+ buttonObj.element.classList.add(buttonObj.stateClassName);
+ buttonObj.element.firstChild.classList.remove(buttonObj.stateChildClassNames[0]);
+ buttonObj.element.firstChild.classList.add(buttonObj.stateChildClassNames[1]);
+- buttonObj.element.setAttribute("aria-pressed", false);
++ buttonObj.element.setAttribute("aria-checked", false);
+ }
+ function buttonOff(buttonObj) {
+ if (!buttonObj)
+@@ -15,7 +15,7 @@
+ buttonObj.element.classList.remove(buttonObj.stateClassName);
+ buttonObj.element.firstChild.classList.add(buttonObj.stateChildClassNames[0]);
+ buttonObj.element.firstChild.classList.remove(buttonObj.stateChildClassNames[1]);
+- buttonObj.element.setAttribute("aria-pressed", true);
++ buttonObj.element.setAttribute("aria-checked", true);
+ }
+ function generateActionButton(obj, props) {
+ const btn = document.createElement("button");
+@@ -23,7 +23,8 @@
+ btn.innerHTML = props.innerHtml;
+ btn.setAttribute("role", "switch");
+ btn.firstChild.classList.add(props.stateChildClassNames[0]);
+- btn.setAttribute("aria-pressed", !props.initialState);
++ btn.setAttribute("aria-checked", !props.initialState);
++ btn.setAttribute("aria-label", props.ariaLabel);
+ props.element = btn;
+ if (obj.params[props.condition_parameter] === props.initialState) {
+ buttonOn(props);
+@@ -267,7 +268,8 @@
+ stateClassName: "paused",
+ condition_parameter: "paused",
+ stateChildClassNames: ["fa-pause-circle", "fa-play-circle"],
+- actions: ["play", "pause"]
++ actions: ["play", "pause"],
++ ariaLabel: "Toggle Play/Pause"
+ });
+ }
+ if (this.params["mute-button"]) {
+@@ -279,7 +281,8 @@
+ stateClassName: "muted",
+ condition_parameter: "muted",
+ stateChildClassNames: ["fa-volume-up", "fa-volume-mute"],
+- actions: ["unmute", "mute"]
++ actions: ["unmute", "mute"],
++ ariaLabel: "Toggle Mute/Unmute"
+ });
+ }
+ }
+diff --git a/node_modules/youtube-background/jquery.youtube-background.js.map b/node_modules/youtube-background/jquery.youtube-background.js.map
+index 278c2e6..cfa39b3 100644
+--- a/node_modules/youtube-background/jquery.youtube-background.js.map
++++ b/node_modules/youtube-background/jquery.youtube-background.js.map
+@@ -1,7 +1,7 @@
+ {
+ "version": 3,
+ "sources": ["src/lib/buttons.js", "node_modules/book-of-spells/src/helpers.mjs", "node_modules/book-of-spells/src/regex.mjs", "node_modules/book-of-spells/src/parsers.mjs", "node_modules/book-of-spells/src/dom.mjs", "node_modules/book-of-spells/src/browser.mjs", "src/lib/super-video-background.js", "src/lib/youtube-background.js", "src/lib/vimeo-background.js", "src/lib/video-background.js", "src/video-backgrounds.js", "src/main.js"],
+- "sourcesContent": ["\nfunction buttonOn(buttonObj) {\n if (!buttonObj) return;\n buttonObj.element.classList.add(buttonObj.stateClassName);\n buttonObj.element.firstChild.classList.remove(buttonObj.stateChildClassNames[0]);\n buttonObj.element.firstChild.classList.add(buttonObj.stateChildClassNames[1]);\n buttonObj.element.setAttribute('aria-pressed', false);\n}\n\nfunction buttonOff(buttonObj) {\n if (!buttonObj) return;\n buttonObj.element.classList.remove(buttonObj.stateClassName);\n buttonObj.element.firstChild.classList.add(buttonObj.stateChildClassNames[0]);\n buttonObj.element.firstChild.classList.remove(buttonObj.stateChildClassNames[1]);\n buttonObj.element.setAttribute('aria-pressed', true);\n}\n\nexport function generateActionButton(obj, props) {\n const btn = document.createElement('button');\n btn.className = props.className;\n btn.innerHTML = props.innerHtml;\n btn.setAttribute('role', 'switch');\n btn.firstChild.classList.add(props.stateChildClassNames[0]);\n btn.setAttribute('aria-pressed', !props.initialState);\n props.element = btn;\n\n if (obj.params[props.condition_parameter] === props.initialState) {\n buttonOn(props);\n }\n\n btn.addEventListener('click', function(e) {\n if (this.classList.contains(props.stateClassName)) {\n buttonOff(props);\n obj[props.actions[0]]();\n } else {\n buttonOn(props);\n obj[props.actions[1]]();\n }\n });\n\n obj.buttons[props.name] = {\n element: btn,\n button_properties: props\n };\n\n obj.controls_element.appendChild(btn);\n};\n", "/**\n * Shallow merges two objects together. Used to pass simple options to functions.\n * \n * @param {object} target The target object to merge into\n * @param {object} source The source object to merge from\n * @returns object The merged object, in this case the target object with the source object's properties merged into it\n * @example\n * const target = { foo: 'bar' }\n * const source = { bar: 'baz' }\n * shallowMerge(target, source) // { foo: 'bar', bar: 'baz' }\n */\nexport function shallowMerge(target, source) {\n for (const key in source) {\n target[key] = source[key]\n }\n\n return target\n}\n\n/**\n * Deep merge function that's mindful of arrays and objects\n * \n * @param {object} target The target object to merge into\n * @param {object} source The source object to merge from\n * @returns object The merged object, in this case the target object with the source object's properties merged into it\n * @example\n * const target = { foo: 'bar' }\n * const source = { bar: 'baz' }\n * deepMerge(target, source) // { foo: 'bar', bar: 'baz' }\n */\nexport function deepMerge(target, source) {\n if (isObject(source) && isObject(target)) {\n for (const key in source) {\n target[key] = deepMerge(target[key], source[key])\n }\n } else if (isArray(source) && isArray(target)) {\n for (let i = 0; i < source.length; i++) {\n target[i] = deepMerge(target[i], source[i])\n }\n } else {\n target = source\n }\n return target\n}\n\n/**\n * Deep clone function that's mindful of nested arrays and objects\n * \n * @param {object} o The object to clone\n * @returns object The cloned object\n * @example\n * const obj = { foo: 'bar' }\n * const clone = clone(obj)\n * clone.foo = 'baz'\n * console.log(obj.foo) // 'bar'\n * console.log(clone.foo) // 'baz'\n * console.log(obj === clone) // false\n * console.log(JSON.stringify(obj) === JSON.stringify(clone)) // true\n * @todo Check if faster than assign. This function is pretty old...\n */ \nexport function clone(o) {\n let res = null\n if (isArray(o)) {\n res = []\n for (const i in o) {\n res[i] = clone(o[i])\n }\n } else if (isObject(o)) {\n res = {}\n for (const i in o) {\n res[i] = clone(o[i])\n }\n } else {\n res = o\n }\n return res\n}\n\n/**\n * Check if an object is empty\n * \n * @param {object} o The object to check\n * @returns boolean True if the object is empty, false otherwise\n * @example\n * isEmptyObject({}) // => true\n * isEmptyObject({ foo: 'bar' }) // => false\n */\nexport function isEmptyObject(o) {\n for (const i in o) {\n return false\n }\n return true\n}\n\n/**\n * Check if an array is empty, substitute for Array.length === 0\n * \n * @param {array} o The array to check\n * @returns boolean True if the array is empty, false otherwise\n * @example\n * isEmptyArray([]) // => true\n * isEmptyArray([1, 2, 3]) // => false\n */\nexport function isEmptyArray(o) {\n return o.length === 0\n}\n\n/**\n * Check if a variable is empty\n * \n * @param {any} o The variable to check\n * @returns boolean True if the variable is empty, false otherwise\n * @example\n * isEmpty({}) // => true\n * isEmpty([]) // => true\n * isEmpty('') // => true\n * isEmpty(null) // => false\n * isEmpty(undefined) // => false\n * isEmpty(0) // => false\n */\nexport function isEmpty(o) {\n if (isObject(o)) {\n return isEmptyObject(o)\n } else if (isArray(o)) {\n return isEmptyArray(o)\n } else if (isString(o)) {\n return o === ''\n }\n return false\n}\n\n/**\n * Try to convert a string to a boolean\n * \n * @param {string} str The string to convert\n * @returns boolean The converted boolean or undefined if conversion failed\n * @example\n * stringToBoolean('true') // => true\n * stringToBoolean('false') // => false\n * stringToBoolean('foo') // => null\n */\nexport function stringToBoolean(str) {\n if (/^\\s*(true|false)\\s*$/i.test(str)) return str === 'true'\n}\n\n/**\n * Try to convert a string to a number\n * \n * @param {string} str The string to convert\n * @returns number The converted number or undefined if conversion failed\n * @example\n * stringToNumber('1') // => 1\n * stringToNumber('1.5') // => 1.5\n * stringToNumber('foo') // => null\n * stringToNumber('1foo') // => null\n */\nexport function stringToNumber(str) {\n if (/^\\s*\\d+\\s*$/.test(str)) return parseInt(str)\n if (/^\\s*[\\d.]+\\s*$/.test(str)) return parseFloat(str)\n}\n\n/**\n * Try to convert a string to an array\n * \n * @param {string} str The string to convert\n * @returns array The converted array or undefined if conversion failed\n * @example\n * stringToArray('[1, 2, 3]') // => [1, 2, 3]\n * stringToArray('foo') // => null\n * stringToArray('1') // => null\n * stringToArray('{\"foo\": \"bar\"}') // => null\n */\nexport function stringToArray(str) {\n if (!/^\\s*\\[.*\\]\\s*$/.test(str)) return\n try {\n return JSON.parse(str)\n } catch (e) {}\n}\n\n/**\n * Try to convert a string to an object\n * \n * @param {string} str The string to convert\n * @returns object The converted object or undefined if conversion failed\n * @example\n * stringToObject('{ \"foo\": \"bar\" }') // => { foo: 'bar' }\n * stringToObject('foo') // => null\n * stringToObject('1') // => null\n * stringToObject('[1, 2, 3]') // => null\n */\nexport function stringToObject(str) {\n if (!/^\\s*\\{.*\\}\\s*$/.test(str)) return\n try {\n return JSON.parse(str)\n } catch (e) {}\n}\n\n/**\n * Try to convert a string to a regex\n * \n * @param {string} str The string to convert\n * @returns regex The converted regex or undefined if conversion failed\n * @example\n * stringToRegex('/foo/i') // => /foo/i\n * stringToRegex('foo') // => null\n * stringToRegex('1') // => null\n */\nexport function stringToRegex(str) {\n if (!/^\\s*\\/.*\\/g?i?\\s*$/.test(str)) return\n try {\n return new RegExp(str)\n } catch (e) {}\n}\n\n/**\n * Try to convert a string to a primitive\n * \n * @param {string} str The string to convert\n * @returns {null|boolean|int|float|string} The converted primitive or input string if conversion failed\n * @example\n * stringToPrimitive('null') // => null\n * stringToPrimitive('true') // => true\n * stringToPrimitive('false') // => false\n * stringToPrimitive('1') // => 1\n * stringToPrimitive('1.5') // => 1.5\n * stringToPrimitive('foo') // => 'foo'\n * stringToPrimitive('1foo') // => '1foo'\n */\nexport function stringToPrimitive(str) {\n if (/^\\s*null\\s*$/.test(str)) return null\n const bool = stringToBoolean(str)\n if (bool !== undefined) return bool\n return stringToNumber(str) || str\n}\n\n/**\n * Try to convert a string to a data type\n * \n * @param {string} str The string to convert\n * @returns any The converted data type or input string if conversion failed\n * @example\n * stringToData('null') // => null\n * stringToData('true') // => true\n * stringToData('false') // => false\n * stringToData('1') // => 1\n * stringToData('1.5') // => 1.5\n * stringToData('foo') // => 'foo'\n * stringToData('1foo') // => '1foo'\n * stringToData('[1, 2, 3]') // => [1, 2, 3]\n * stringToData('{ \"foo\": \"bar\" }') // => { foo: 'bar' }\n * stringToData('/foo/i') // => /foo/i\n */\nexport function stringToType(str) {\n if (/^\\s*null\\s*$/.test(str)) return null\n const bool = stringToBoolean(str)\n if (bool !== undefined) return bool\n return stringToNumber(str) || stringToArray(str) || stringToObject(str) || stringToRegex(str) || str\n}\n\n/**\n * If provided variable is an object\n * \n * @param {any} o \n * @returns boolean\n * @example\n * isObject({}) // => true\n * isObject([]) // => false\n * isObject(null) // => false\n */\nexport function isObject(o) {\n return typeof o === 'object' && !Array.isArray(o) && o !== null\n}\n\n/**\n * If provided variable is an array. Just a wrapper for Array.isArray\n * \n * @param {any} o\n * @returns boolean\n * @example\n * isArray([]) // => true\n * isArray({}) // => false\n */\nexport function isArray(o) {\n return Array.isArray(o)\n}\n\n/**\n * If provided variable is a string. Just a wrapper for typeof === 'string'\n * \n * @param {any} o\n * @returns boolean\n * @example\n * isString('foo') // => true\n * isString({}) // => false\n */\nexport function isString(o) {\n return typeof o === 'string'\n}\n\n/**\n * If provided variable is a function, substitute for typeof === 'function'\n * \n * @param {any} o\n * @returns boolean\n * @example\n * isFunction(function() {}) // => true\n * isFunction({}) // => false\n */\nexport function isFunction(o) {\n return typeof o === 'function'\n}\n\n/**\n * If object property is a function\n * \n * @param {object} obj\n * @param {string} propertyName\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: function() {} }\n * propertyIsFunction(obj, 'foo') // => false\n * propertyIsFunction(obj, 'baz') // => true\n */\nexport function propertyIsFunction(obj, propertyName) {\n return obj.hasOwnProperty(propertyName) && isFunction(obj[propertyName])\n}\n\n/**\n * If object property is a string\n * \n * @param {object} obj\n * @param {string} propertyName\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: function() {} }\n * propertyIsString(obj, 'foo') // => true\n * propertyIsString(obj, 'baz') // => false\n */\nexport function propertyIsString(obj, propertyName) {\n return obj.hasOwnProperty(propertyName) && isString(obj[propertyName])\n}\n\n/**\n * Transforms a dash separated string to camelCase\n *\n * @param {string} str\n * @returns boolean\n * @example\n * transformDashToCamelCase('foo-bar') // => 'fooBar'\n * transformDashToCamelCase('foo-bar-baz') // => 'fooBarBaz'\n * transformDashToCamelCase('foo') // => 'foo'\n * transformDashToCamelCase('fooBarBaz-qux') // => 'fooBarBazQux'\n */\nexport function transformDashToCamelCase(str) {\n return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase() });\n}\n\n/**\n * Transforms a camelCase string to dash separated string\n * \n * @param {string} str\n * @returns boolean\n * @example\n * transformCamelCaseToDash('fooBar') // => 'foo-bar'\n * transformCamelCaseToDash('fooBarBaz') // => 'foo-bar-baz'\n * transformCamelCaseToDash('foo') // => 'foo'\n * transformDashToCamelCase('fooBarBaz-qux') // => 'foo-bar-baz-qux'\n */\nexport function transformCamelCaseToDash(str) {\n return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\n/**\n * Maps an array of objects by a property name\n * \n * @param {array} arr\n * @param {string} propertyName\n * @returns object\n * @example\n * const arr = [{ foo: 'bar' }, { foo: 'baz' }]\n * mapByProperty(arr, 'foo') // => { bar: { foo: 'bar' }, baz: { foo: 'baz' } }\n */\nexport function mapByProperty(arr, propertyName) {\n const res = {}\n for (let i = 0; i < arr.length; i++) {\n res[arr[i][propertyName]] = arr[i]\n }\n return res\n}\n\n/**\n * Maps an array of objects by a property name to another property name\n * \n * @param {array} arr\n * @param {string} keyPropertyName\n * @param {string} valuePropertyName\n * @returns object\n * @example\n * const arr = [{ foo: 'bar', baz: 'qux' }, { foo: 'quux', baz: 'corge' }]\n * mapPropertyToProperty(arr, 'foo', 'baz') // => { bar: 'qux', quux: 'corge' }\n */\nexport function mapPropertyToProperty(arr, keyPropertyName, valuePropertyName) {\n const res = {}\n for (let i = 0; i < arr.length; i++) {\n res[arr[i][keyPropertyName]] = arr[i][valuePropertyName]\n }\n return res\n}\n\n/**\n * Remove accents from a string\n * \n * @param {string} inputString\n * @returns string\n * @example\n * removeAccents('\u00E1\u00E9\u00ED\u00F3\u00FA') // => 'aeiou'\n * removeAccents('\u00C1\u00C9\u00CD\u00D3\u00DA') // => 'AEIOU'\n * removeAccents('se\u00F1or') // => 'senor'\n * removeAccents('\u0152') // => 'OE'\n */\nexport function removeAccents(inputString) {\n return inputString.normalize('NFD').replace(/[\\u0300-\\u036f]/g, '').replace(/\\\u0153/g, \"oe\").replace(/\\\u00E6/g, \"ae\").normalize('NFC')\n}\n\n/**\n * Strip HTML tags from a string\n * \n * @param {string} inputString\n * @returns string\n * @example\n * stripHTMLTags('foo') // => 'foo'\n * stripHTMLTags('foobar') // => 'foo bar'\n */\nexport function stripHTMLTags(inputString) {\n return inputString.replace(/<[^>]*>/g, '')\n}\n\n/**\n * Slugify a string, e.g. 'Foo Bar' => 'foo-bar'. Similar to WordPress' sanitize_title(). Will remove accents and HTML tags.\n * \n * @param {string} str \n * @returns string\n * @example\n * slugify('Foo Bar') // => 'foo-bar'\n * slugify('Foo Bar baz') // => 'foo-bar-baz'\n */\nexport function slugify(str) {\n str = str.trim().toLowerCase()\n str = removeAccents(str)\n str = stripHTMLTags(str)\n return str.replace(/\\s+|\\.+|\\/+|\\\\+|\u2014+|\u2013+/g, '-').replace(/[^\\w0-9\\-]+/g, '').replace(/-{2,}/g, '-').replace(/^-|-$/g, '')\n}\n\n/**\n * Check if object has multiple properties\n * \n * @param {object} obj\n * @param {string|array} properties\n * @returns boolean\n * @example\n * const obj = { foo: 'bar', baz: 'qux' }\n * hasOwnProperties(obj, ['foo', 'baz']) // => true\n * hasOwnProperties(obj, ['foo', 'baz', 'qux']) // => false\n */\nexport function hasOwnProperties(obj, properties) {\n if(!isArray(properties)) properties = [properties]\n for (let i = 0; i < properties.length; i++) {\n if (!obj.hasOwnProperty(properties[i])) return false\n }\n return true\n}\n\n/**\n * Finds the closest number to the set goal in an array to a given number\n * \n * @param {number} goal Number to search for\n * @param {array} arr Array of numbers to search in\n * @returns number\n * @example\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9]) // => 9\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 11]) // => 9\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 9.5]) // => 9.5\n * closestNumber(10, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11) // => 10\n */\nexport function closestNumber(goal, arr) {\n return arr.reduce(function(prev, curr) {\n return Math.abs(curr - goal) < Math.abs(prev - goal) ? curr : prev\n })\n}\n\n/**\n * Truncate a string to a given number of words\n * \n * @param {string} str String to truncate\n * @param {number} numWords Number of words to truncate to\n * @param {string} ellipsis Ellipsis to append to the end of the string\n * @returns string\n * @example\n * truncateString('foo bar baz', 2) // => 'foo bar\u2026'\n * truncateString('foo bar baz', 2, '...') // => 'foo bar...'\n * truncateString('foo bar. baz', 2, '...') // => 'foo bar. ...'\n */\nexport function truncateString(str, numWords, ellipsis = '\u2026') {\n const words = str.trim().split(' ')\n if (words.length <= numWords) return str\n if (numWords <= 0) return ''\n if (/[.?!]$/.test(words[numWords - 1]) && ellipsis.trim() !== '') ellipsis = ` ${ellipsis}`\n return words.slice(0, numWords).join(' ') + ellipsis\n}\n\n/**\n * Generates a random integer between two values, inclusive of both\n * \n * @param {number} min Minimum value\n * @param {number} max Maximum value\n * @param {boolean} safe Defaults to false, if true will use a cryptographically secure random number generator\n * @returns number\n * @example\n * randomIntInclusive(1, 10) // => 1\n * randomIntInclusive(1, 10) // => 10\n * randomIntInclusive(1, 10) // => 5\n */\nexport function randomIntInclusive(min, max, safe = false) {\n min = Number(min)\n max = Number(max)\n if (isNaN(min) || isNaN(max)) throw new TypeError('Both min and max must be numbers')\n if (min > max) [min, max] = [max, min]\n if (min === max) return min\n min = Math.round(min)\n max = Math.round(max)\n const rand = safe ? random() : Math.random()\n return Math.floor(rand * (max - min + 1)) + min\n}\n\n/**\n * Gets fixed number of digits after the decimal point\n * \n * @param {number} number Number to fix\n * @param {number} digits Number of digits to fix to\n * @returns number\n * @example\n * fixed(1.234, 2) // => 1.23\n * fixed(1.235, 2) // => 1.24\n * fixed(1.234) // => 1\n * fixed(1.234, 0) // => 1\n * fixed(1.234, 5) // => 1.234\n * @note Gotta ask myself why I wrote this function in the first place... \uD83E\uDD14 It's just not useful in a lot of cases lol...\n */\nexport function fixed(number, digits) {\n if (!digits) return parseInt(number)\n return parseFloat(number.toFixed(digits))\n}\n\n/**\n * Calculates the percentage of a number in relation to another number\n * \n * @param {number} num Number to calculate percentage of\n * @param {number} total Total number\n * @returns number\n * @example\n * percentage(1, 10) // => 10\n * percentage(5, 10) // => 50\n * percentage(10, 10) // => 100\n * percentage(0, 10) // => 0\n * percentage(10, 2) // => 500\n */\nexport function percentage(num, total) {\n if (!num || !total || Number.isNaN(num) || Number.isNaN(total)) return 0\n return num / total * 100\n}\n\nexport function pickProperties(obj, props) {\n const res = {}\n if (!props) return res\n if (!isArray(props)) props = [props]\n for (let i = 0; i < props.length; i++) {\n if (obj.hasOwnProperty(props[i])) res[props[i]] = obj[props[i]]\n }\n return res\n}\n\nexport function rejectProperties(obj, props, clone = true) {\n if (clone) obj = { ...obj }\n if (!props) return obj\n if (!isArray(props)) props = [props]\n for (let i = 0; i < props.length; i++) {\n if (obj.hasOwnProperty(props[i])) delete obj[props[i]]\n }\n return obj\n}\n\nexport function pickArrayElements(arr, indexes) {\n if (!isArray(arr)) return\n if (!isArray(indexes)) indexes = [indexes]\n const res = []\n for (let i = 0; i < indexes.length; i++) {\n if (arr.hasOwnProperty(indexes[i])) res.push(arr[indexes[i]])\n }\n return res\n}\n\nexport function rejectArrayElements(arr, indexes, clone = true) {\n if (clone) arr = [...arr]\n if (!isArray(arr)) return\n if (!isArray(indexes)) indexes = [indexes]\n for (let i = indexes.length - 1; i >= 0; i--) {\n if (arr.hasOwnProperty(indexes[i])) arr.splice(indexes[i], 1)\n }\n return arr\n}\n\n/**\n * Pick properties from an object or elements from an array\n * \n * @param {array} obj Object or array to pick properties or elements from\n * @param {array | string | number} props Properties to remove, can be an array of strings or a single string or number\n * @returns object | array | undefined\n * @example\n * \n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }) // => {}\n * pick({}, []) // => {}\n * pick(null, 'foo') // => undefined\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, undefined) // => {}\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, 'foo') // => { foo: 'bar'}\n * pick({ foo: 'bar', bar: 'baz', baz: 'qux' }, ['foo', 'baz']) // => { foo: 'bar', baz: 'qux' }\n * \n * pick(['foo', 'bar', 'baz'], []) // => []\n * pick([], []) // => []\n * pick(null, 0) // => undefined\n * pick(['foo', 'bar', 'baz'], undefined) // => []\n * pick(['foo', 'bar', 'baz'], 0) // => ['foo']\n * pick(['foo', 'bar', 'baz'], [0, 2]) // => ['foo', 'baz']\n * pick(['foo', 'bar', 'baz'], [0, 2, 3]) // => ['foo', 'baz']\n */\nexport function pick(obj, props) {\n return isObject(obj) ? pickProperties(obj, props) : pickArrayElements(obj, props)\n}\n\n/**\n * Remove properties from an object or elements from an array\n * \n * @param {array} obj Object or array to remove properties or elements from\n * @param {array | string | number} props Properties to remove, can be an array of strings or a single string or number\n * @param {boolean} clone Defaults to true, will clone the object or array before removing properties or elements.\n * @returns object | array | undefined\n * @example\n * \n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }) // => {}\n * reject({}, []) // => {}\n * reject(null, 'foo') // => undefined\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, undefined) // => {}\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, 'foo') // => { bar: 'baz', baz: 'qux' }\n * reject({ foo: 'bar', bar: 'baz', baz: 'qux' }, ['foo', 'baz']) // => { bar: 'baz' }\n * \n * reject(['foo', 'bar', 'baz'], []) // => []\n * reject([], []) // => []\n * reject(null, 0) // => undefined\n * reject(['foo', 'bar', 'baz'], undefined) // => []\n * reject(['foo', 'bar', 'baz'], 0) // => ['bar', 'baz']\n * reject(['foo', 'bar', 'baz'], [0, 2]) // => ['bar']\n * reject(['foo', 'bar', 'baz'], [0, 2, 3]) // => ['bar']\n */\nexport function reject(obj, props, clone = true) {\n return isObject(obj) ? rejectProperties(obj, props, clone) : rejectArrayElements(obj, props, clone)\n}\n\n/**\n * Basic timestamp first UID generator that's good enough for most use cases but not for security purposes.\n * There's an extremely small chance of collision, so create a map object to check for collisions if you're worried about that.\n * \n * - `Date.now().toString(16)` is used for the timestamp, which is a base16 representation of the current timestamp in milliseconds.\n * - `random().toString(16).substring(2)` is used for the random number, which is a base16 representation of a random number between 0 and 1, with the first two characters removed.\n * \n * @param {boolean} safe Defaults to false, if true will use a cryptographically secure random number generator for the random number improving security but reducing performance. If crypto is not available, will use Math.random() instead.\n * @returns string\n * @example\n * basicUID() // => '18d4613e4d2-750bf066ac6158'\n */\nexport function basicUID(safe = false) {\n const rand = safe ? random() : Math.random()\n return Date.now().toString(16)+'-'+rand.toString(16).substring(2)\n}\n\nfunction cryptoUUIDFallback() {\n return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>\n (c ^ Math.random() * 16 >> c / 4).toString(16)\n )\n}\n\n// Taken from https://stackoverflow.com/a/2117523/5437943\nfunction cryptoRandomUUIDFallback() {\n return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, c =>\n (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)\n )\n}\n\n/**\n * Generates a UUID v4\n * - Uses crypto.randomUUID if available\n * - Uses crypto.getRandomValues if available\n * - Uses a fallback if neither is available, which is not safe because it uses Math.random() instead of a cryptographically secure random number generator\n * \n * I'm bad at crypto and bitwise operations, not my cup of tea, so I had to rely on StackOverflow for the fallback: https://stackoverflow.com/a/2117523/5437943\n * \n * @param {boolean} safe Defaults to true, if false will use a fallback that's not cryptographically secure but significantly faster\n * @returns string\n * @example\n * generateUUID() // UUID v4, example 09ed0fe4-8eb6-4c2a-a8d3-a862b7513294\n */\nexport function generateUUID(safe = true) {\n if (!crypto || !safe) return cryptoUUIDFallback()\n if (crypto.randomUUID) return crypto.randomUUID()\n if (crypto.getRandomValues) return cryptoRandomUUIDFallback();\n}\n\n/**\n * Generates a random number between 0 and 1, inclusive of 0 but not inclusive of 1.\n * \n * - Uses crypto.getRandomValues if available\n * - Uses Math.random() if crypto.getRandomValues is not available\n * \n * @returns number\n * @example\n * random() // => 0.123456789\n */\nexport function random() {\n if (!crypto) return Math.random()\n if (crypto.getRandomValues) return crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295 // 2^32 - 1 = 4294967295\n}\n", "/**\n * @module regex\n */\n\n/**\n * Regular expression for matching a YouTube video links and extracting their ID, works with both embed and watch URLs\n */\nexport const RE_YOUTUBE = /(?:youtube\\.com\\/(?:[^\\/]+\\/.+\\/|(?:v|e(?:mbed)?)\\/|.*[?&]v=)|youtu\\.be\\/)([^\"&?\\/ ]{11})/i\n\n/**\n * Regular expression for matching a Vimeo video links and extracting their ID, works with both embed and watch URLs, channels and groups\n */\nexport const RE_VIMEO = /(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)?|groups\\/(?:[^\\/]*)\\/videos\\/|album\\/(?:\\d+)\\/video\\/|video\\/|)(\\d+)(?:[a-zA-Z0-9_\\-]+)?/i\n\n/**\n * Regular expression for matching a video URLs\n */\nexport const RE_VIDEO = /\\/([^\\/]+\\.(?:mp4|ogg|ogv|ogm|webm|avi))\\s*$/i\n\n/**\n * Regular expression for matching a image URLs\n */\nexport const RE_IMAGE = /\\/([^\\/]+\\.(?:jpg|jpeg|png|gif|svg|webp))\\s*$/i\n\n/**\n * Regular expression for matching a URL parameters\n */\nexport const RE_URL_PARAMETER = /([^\\s=&]+)=?([^&\\s]+)?/\n\n/**\n * Regular expression for matching a HTML attribute and tag names, also for matching shortcode attributes and names\n */\nexport const RE_ATTRIBUTES = /\\s*(?:([a-z_]{1}[a-z0-9\\-_]*)=?(?:\"([^\"]+)\"|'([^']+)')*)\\s*/gi\n\n/**\n * Regular expression for matching a single attribute without value\n */\nexport const RE_ATTRIBUTE_WITHOUT_VALUE = /^\\s*([a-z_]{1}[a-z0-9\\-_]*)\\s*$/i\n\n/**\n * Regular expression for matching a single attribute with value\n */\nexport const RE_ATTRIBUTE_WITH_VALUE = /^\\s*([a-z_]{1}[a-z0-9\\-_]*)=(\"[^\"]+\"|'[^']+')\\s*$/i\n\n/**\n * Regular expression for matching the first or last quote of a string used for removing them\n */\nexport const RE_FIRST_OR_LAST_QUOTE = /^[\"']|[\"']$/g\n", "/** @module parsers */\n\nimport { isArray, isObject, isString, stringToType } from './helpers.mjs'\nimport { RE_ATTRIBUTES, RE_ATTRIBUTE_WITHOUT_VALUE, RE_ATTRIBUTE_WITH_VALUE, RE_URL_PARAMETER, RE_FIRST_OR_LAST_QUOTE } from './regex.mjs'\nimport { decodeHTML, encodeHTML } from './dom.mjs'\n\n/**\n * Parse a string of attributes and return an object\n * \n * @param {string} str\n * @returns object\n * @example\n * parseAttributes('button text=\"Click me\" data='{\"key\": \\\"value\"}' class=\"btn btn-primary\"')\n * // => { button: null, text: 'Click me', data: '{\"key\": \"value\"}', class: 'btn btn-primary' }\n */\nexport function parseAttributes(str) {\n\tconst re = RE_ATTRIBUTES\n\tconst reWithoutValue = RE_ATTRIBUTE_WITHOUT_VALUE\n\tconst reHasValue = RE_ATTRIBUTE_WITH_VALUE\n\tconst reReplaceFirstAndLastQuote = RE_FIRST_OR_LAST_QUOTE\n\t\n\tconst res = {}\n\tconst match = str.match(re)\n\n\tfor (let i = 0; i < match.length; i++) {\n\t\tconst m = match[i]\n\t\tif (m === '') continue\n\n\t\tif (reWithoutValue.test(m)) {\n\t\t\tconst [, key] = m.match(reWithoutValue)\n\t\t\tres[key] = null\n\t\t\treWithoutValue.lastIndex = 0\n\t\t} else if (reHasValue.test(m)) {\n\t\t\tconst [, key, value] = m.match(reHasValue)\n\t\t\tres[key] = stringToType(decodeHTML(value.replace(reReplaceFirstAndLastQuote, '')))\n\t\t\treReplaceFirstAndLastQuote.lastIndex = 0\n\t\t\treHasValue.lastIndex = 0\n\t\t}\n\t}\n\n\treturn res\n}\n\n/**\n * Serialize an object of key value pairs into a string of attributes\n * \n * @param {object} obj - The object to serialize\n * @returns {string} of attributes\n * @example\n * serializeAttributes({ button: null, text: 'Click me', data: '{\"key\": \"value\"}', class: 'btn btn-primary' }) // button text=\"Click me\" data=\"{\\\"key\\\": \\\"value\\\"}\" class=\"btn btn-primary\"\n */\nexport function serializeAttributes(obj) {\n\tconst res = []\n\n\tObject.keys(obj).forEach((key) => {\n\t\tlet value = obj[key]\n\t\tif (isObject(value) || isArray(value)) value = JSON.stringify(value)\n\t\tif (isString(value)) value = encodeHTML(value)\n\t\tconst valueString = value === null || value === undefined ? '' : `=\"${value}\"`\n\t\tres.push(`${key}${valueString}`)\n\t})\n\n\treturn res.join(' ')\n}\n\n/**\n * Encodes HTML entities in a string using the following rules:\n * \n * - & (ampersand) becomes &\n * - \" (double quote) becomes "\n * - ' (single quote) becomes '\n * - < (less than) becomes <\n * - > (greater than) becomes >\n * \n * It is different than dom.encodeHTML, which encodes all characters using the browser's DOMParser. This function only encodes the characters listed above and should be used when DOMParser is not available.\n * @see {@link module:dom.encodeHTML}\n * \n * @param {string} str - The string to encode\n * @returns {string} The encoded string\n * @example\n * htmlEncode('Link') // <a href="#">Link</a>\n */\nexport function encodeHtmlEntities(str) {\n\treturn str.replace(/[<>\"'\\&]/g, (m) => {\n\t\tswitch (m) {\n\t\t\tcase '<': return '<'\n\t\t\tcase '>': return '>'\n\t\t\tcase '\"': return '"'\n\t\t\tcase \"'\": return '''\n\t\t\tcase '&': return '&'\n\t\t}\n\t})\n}\n\n/**\n * Decodes HTML entities in a string using the following rules:\n * \n * - & becomes &\n * - " becomes \"\n * - ' becomes '\n * - < becomes <\n * - > becomes >\n * \n * It is different than dom.decodeHTML, which decodes all characters using the browser's DOMParser. This function only decodes the characters listed above and should be used when DOMParser is not available.\n * @see {@link module:dom.decodeHTML}\n * \n * @param {string} str - The string to decode\n * @returns {string} The decoded string\n * @example\n * htmlDecode('<a href="#">Link</a>') // Link\n */\nexport function decodeHtmlEntities(str) {\n\treturn str.replace(/<|>|"|'|&/g, (m) => {\n\t\tswitch (m) {\n\t\t\tcase '<': return '<'\n\t\t\tcase '>': return '>'\n\t\t\tcase '"': return '\"'\n\t\t\tcase ''': return \"'\"\n\t\t\tcase '&': return '&'\n\t\t}\n\t})\n}\n\n\n/**\n * Parses a string of url parameters into an object of key value pairs\n * \n * @param {string} paramString - The string to parse without ? or # and with & as separator\n * @param {boolean} [decode=true] - Whether to decode the values or not\n * @returns {object} of key value pairs\n * @example\n * parseUrlParams('foo=true&baz=555') // { foo: true, baz: 555 }\n * parseUrlParams('foo=bar&baz=qux', false) // { foo: 'true', baz: '555' }\n * parseUrlParams('foo&bar&baz=qux') // { foo: undefined, bar: undefined, baz: 'qux' }\n */\nexport function parseUrlParameters(paramString, decode = true) {\n const res = {}\n\n const paramParts = paramString.split('&')\n paramParts.forEach((part) => {\n const m = part.match(RE_URL_PARAMETER)\n\t\tif (!m) return\n const key = m[1]\n const value = m[2]\n res[key] = value !== undefined && decode ? stringToType(decodeURIComponent(value)) : stringToType(value)\n\t\tRE_URL_PARAMETER.lastIndex = 0\n })\n\n return res\n}\n\n/**\n * Serialize an object of key value pairs into a string of url parameters\n * \n * @param {object} obj - The object to serialize\n * @param {boolean} [encode=true] - Whether to encode the values or not\n * @returns {string} of url parameters\n * @example\n * serializeUrlParams({ foo: true, baz: 555 }) // foo=true&baz=555\n * serializeUrlParams({ bar: undefined, baz: 'qux' }, false) // bar=&baz=qux\n */\nexport function serializeUrlParameters(obj, encode = true) {\n\tconst res = []\n\n\tObject.keys(obj).forEach((key) => {\n\t\tconst value = obj[key]\n\t\tif (value === undefined) return res.push(key)\n\t\tconst encodedValue = encode ? encodeURIComponent(value) : value\n\t\tres.push(`${key}=${encodedValue}`)\n\t})\n\n\treturn res.join('&')\n}\n\n/**\n * Parses a resolution string into a number. Resolution string is in the format of 'width:height', e.g. '16:9' \n * \n * @param {string} res Resolution string. Format is 'width:height', e.g. '16:9', or 'widthxheight', e.g. '16x9', or 'width-height', e.g. '16-9', or 'width/height', e.g. '16/9'\n * @returns number\n * @example\n * parseResolutionString('16:9') // => 1.7777777778\n * parseResolutionString('4:3') // => 1.3333333333\n * parseResolutionString('4x3') // => 1.3333333333\n * parseResolutionString('4-3') // => 1.3333333333\n */\nexport function parseResolutionString(res) {\n const DEFAULT_RESOLUTION = 1.7777777778 // 16:9\n if (!res || !res.length || /16[\\:x\\-\\/]{1}9/i.test(res)) return DEFAULT_RESOLUTION\n const pts = res.split(/\\s?[\\:x\\-\\/]{1}\\s?/i)\n if (pts.length < 2) return DEFAULT_RESOLUTION\n\n const w = parseInt(pts[0])\n const h = parseInt(pts[1])\n\n if (w === 0 || h === 0) return DEFAULT_RESOLUTION\n if (isNaN(w) || isNaN(h)) return DEFAULT_RESOLUTION\n\n return w/h;\n}\n", "/** @module dom */\n\nimport { transformDashToCamelCase, isArray, isString, isObject, isFunction, shallowMerge, percentage } from './helpers.mjs'\nimport { encodeHtmlEntities, decodeHtmlEntities } from './parsers.mjs'\n\n/**\n * Checks if an element is empty\n * \n * @param {HTMLElement} element \n * @returns boolean\n * @example\n * document.body.innerHTML = `\n * \n *
foo
\n *
`\n * \n * isEmptyElement(document.getElementById('empty-element')) // => true\n * isEmptyElement(document.getElementById('non-empty-element1')) // => false\n * isEmptyElement(document.getElementById('non-empty-element2')) // => false\n */\nexport function isEmptyElement(element) {\n return element.innerHTML.trim() === ''\n}\n\n/**\n * Removes all elements matching a selector from the DOM\n * \n * @param {string|HTMLElement|Element} selector The selector to select elements to remove\n * @param {HTMLElement|Element} [from=document] The element to remove elements from\n * @example\n * document.body.innerHTML = `\n * \n * \n * `\n * `\n * remove('#foo, #bar') // => removes #foo and #bar\n */\nexport function remove(selector, from = document) {\n const elements = query(selector, from)\n for (const element of elements) {\n element.remove()\n }\n}\n\n/**\n * Queries the DOM for a single element and returns it. Substitutes for `document.querySelector(selector)` and JQuery's `$(selector).first()`\n * \n * @param {string|HTMLElement|Element|Array|NodeList} selector The selector to select an element\n * @param {HTMLElement|Element} [from=document] The element to query from\n * @returns {HTMLElement|Element}\n * @example\n * document.body.innerHTML = `\n * \n * \n * `\n * \n * querySingle('#foo') // => \n * querySingle(document.getElementById('foo')) // => \n * querySingle(document.querySelector('#foo')) // => \n */\nexport function querySingle(selector, from = document) {\n if (selector instanceof Element) return selector\n return from.querySelector(selector)\n}\n\n/**\n * Queries the DOM for elements and returns them. Substitutes for `document.querySelectorAll(selector)` and JQuery's `$(selector)`\n * \n * @param {string|HTMLElement|Element|Array|NodeList} selector The selector to select elements\n * @param {HTMLElement|Element} [from=document] The element to query from\n * @returns {Array|NodeList}\n * @example\n * document.body.innerHTML = `\n * \n * \n * `\n * \n * query('#foo') // => []\n * query(document.getElementById('foo')) // => []\n * query('div') // => [, , ]\n */\nexport function query(selector, from = document) {\n if (selector instanceof Array || selector instanceof NodeList) return selector\n if (selector instanceof Element) return [selector]\n if (from instanceof Element || from instanceof Document) return from.querySelectorAll(selector)\n if (isString(from)) from = query(from)\n if (!from instanceof Array && !from instanceof NodeList) return []\n const res = []\n for (const element of from) {\n res.push(...element.querySelectorAll(selector))\n }\n return res\n}\n\n/**\n * Sets element styles from passed object of styles. Can also transform dash-case to camelCase for CSS properties\n * \n * @param {HTMLElement} element The element to set styles on\n * @param {object} styles The object of styles to set\n * @param {boolean} transform Whether to transform dash-case to camelCase for CSS properties\n * @example\n * css(document.getElementById('foo'), { 'background-color': 'red', 'font-size': '16px' }, true) // => sets background-color and font-size\n * css(document.getElementById('foo'), { backgroundColor: 'red', fontSize: '16px' }) // => sets background-color and font-size\n */\nexport function css(element, styles, transform = false) {\n if (!element || !styles) return\n for (let property in styles) {\n if (transform) property = transformDashToCamelCase(property)\n element.style[property] = styles[property]\n }\n}\n\n/**\n * Decodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to decode the basic entities.\n * \n * @see {@link module:parsers.decodeHtmlEntities}\n * \n * @param {string} html The HTML string to decode\n * @returns {string} The decoded HTML string\n * @example\n * decodeHTML('<div>foo</div>') // => '
'\n */\nexport function decodeHTML(html) {\n if (typeof document === 'undefined') return decodeHtmlEntities(html)\n const txt = document.createElement('textarea')\n txt.innerHTML = html\n const res = txt.value\n txt.remove()\n return res\n}\n\n/**\n * Encodes HTML entities in a string using the browser's DOMParser. If the DOMParser is not available, it uses a regular expression to encode the basic entities.\n * \n * @see {@link module:parsers.encodeHtmlEntities}\n * \n * @param {string} html The HTML string to encode\n * @returns {string} The encoded HTML string\n * @example\n * encodeHTML('
foo
') // => '<div>foo</div>'\n * encodeHTML('
foo
bar
') // => '<div>foo</div><div>bar</div>'\n */\nexport function encodeHTML(html) {\n if (typeof document === 'undefined') return encodeHtmlEntities(html)\n const txt = document.createElement('textarea')\n txt.textContent = html\n const res = txt.innerHTML\n txt.remove()\n return res\n}\n\n/**\n * Inserts an element before another element\n * \n * @param {HTMLElement} targetElement The element to insert before\n * @param {HTMLElement} newElement The element to insert\n * @example\n * const target = document.getElementById('target')\n * const newElement = document.createElement('div')\n * newElement.id = 'newElement'\n * insertBeforeElement(target, newElement)\n * // \n * // \n */\nexport function insertBeforeElement(targetElement, newElement) {\n if (!targetElement || !newElement) return\n targetElement.parentNode.insertBefore(newElement, targetElement);\n}\n\n/**\n * Toggles an attribute value on an element\n * \n * @param {HTMLElement} element The element to toggle the attribute on\n * @param {string} attribute The attribute to toggle\n * @param {string} on Default: 'true'\n * @param {string} off Default: 'false'\n * @example\n * toggleAttributeValue(element, 'aria-expanded', 'true', 'false')\n * toggleAttributeValue(element, 'aria-expanded')\n */\nexport function toggleAttributeValue(element, attribute, on = 'true', off = 'false') {\n if (!element.hasAttribute(attribute)) return\n\n if (element.getAttribute(attribute) === on) {\n element.setAttribute(attribute, off)\n } else {\n element.setAttribute(attribute, on)\n }\n}\n\n/**\n * Converts a duration string to milliseconds integer\n * \n * @param {string} duration The duration string to convert, e.g. '1s', '100ms', '0.5s'\n * @returns {number} The duration in milliseconds\n * @example\n * convertToMilliseconds('1s') // 1000\n * convertToMilliseconds('100ms') // 100\n * convertToMilliseconds('0.5s') // 500\n * convertToMilliseconds('0.5') // 0\n * convertToMilliseconds('foo') // 0\n */\nexport function cssTimeToMilliseconds(duration) {\n const regExp = new RegExp('([0-9.]+)([a-z]+)', 'i')\n const matches = regExp.exec(duration)\n if (!matches) return 0\n \n const unit = matches[2]\n switch (unit) {\n case 'ms':\n return parseFloat(matches[1])\n case 's':\n return parseFloat(matches[1]) * 1000\n default:\n return 0\n }\n}\n\n/**\n * Returns a map of transition properties and durations\n * \n * @param {HTMLElement} element The element to get the transition properties and durations from\n * @returns {object} A map of transition properties and durations\n * @example\n * getTransitionDurations(element) // { height: 1000 } if transition in CSS is set to 'height 1s'\n * getTransitionDurations(element) // { height: 500, opacity: 1000 } if transition in CSS is set to 'height 0.5s, opacity 1s'\n */\nexport function getTransitionDurations(element) {\n if (!element) {}\n const styles = getComputedStyle(element)\n const transitionProperties = styles.getPropertyValue('transition-property').split(',')\n const transitionDurations = styles.getPropertyValue('transition-duration').split(',')\n \n const map = {}\n \n for (let i = 0; i < transitionProperties.length; i++) {\n const property = transitionProperties[i].trim()\n map[property] = transitionDurations.hasOwnProperty(i) ? cssTimeToMilliseconds(transitionDurations[i].trim()) : null\n }\n \n return map\n}\n\n/**\n * Check a list of elements if any of them matches a selector\n * \n * @param {Array|NodeList|HTMLElement} elements The elements to check\n * @param {string} selector The selector to check\n * @returns {boolean} True if any of the elements matches the selector, false otherwise\n * @example\n * document.body.innerHTML = `\n * \n * \n * `\n * \n * matchesAny(document.querySelectorAll('div'), '#foo') // => true\n * matchesAny(document.querySelectorAll('div'), '#qux') // => false\n */\nexport function matchesAny(elements, selector) {\n if (!elements || !selector || !elements.length) return false\n if (elements instanceof Element) elements = [elements]\n if (isString(elements)) elements = query(elements)\n for (const element of elements) {\n if (element.matches(selector)) return true\n }\n return false\n}\n\n/**\n * Check a list of elements if all of them matches a selector\n * \n * @param {Array|NodeList|HTMLElement} elements The elements to check\n * @param {string} selector The selector to check\n * @returns {boolean} True if all of the elements matches the selector, false otherwise\n * @example\n * document.body.innerHTML = `\n * \n * \n * `\n * \n * matchesAll(document.querySelectorAll('div'), 'div') // => true\n * matchesAll(document.querySelectorAll('div'), '#foo') // => false\n */\nexport function matchesAll(elements, selector) {\n if (!elements || !selector || !elements.length) return false\n if (elements instanceof Element) elements = [elements]\n if (isString(elements)) elements = query(elements)\n for (const element of elements) {\n if (!element.matches(selector)) return false\n }\n return true\n}\n\n\n/**\n * Detaches an element from the DOM and returns it\n * \n * @param {HTMLElement} element The element to detach\n * @example\n * detachElement(element)\n * // => element\n * console.log(element.parentNode) // => null\n */\nexport function detachElement(element) {\n if (element && element.parentNode) {\n element.parentNode.removeChild(element);\n }\n return element\n}\n\n/**\n * Gets table data from a table element, a simple regular table element, or a table like structure.\n * Useful for scraping data.\n * \n * @param {string} selector The selector to select the table element\n * @param {Array|string|null} headers The headers to use for the data. If 'auto' is passed, the row containing th or the first row will be used as headers\n * @param {string} [rowSelector='tr'] The selector to select the rows\n * @param {string} [cellSelector='td'] The selector to select the cells\n * @returns {Array