caddy-website/new/resources/js/lib.js
Matthew Holt 18c3cd841e
Initial commit; starting new design
Dropdown menu
2023-12-08 18:49:07 -05:00

82 lines
No EOL
2.6 KiB
JavaScript

// AJQuery: https://github.com/coolaj86/ajquery.js (modified slightly by me)
function $(sel, el) { return ((typeof el === 'string' ? $(el) : el) || document).querySelector(sel); }
function $$(sel, el) { return (el || document).querySelectorAll(sel); }
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
function on(eventName, elemSelector, handler, capture) {
let events = [eventName];
if (eventName.indexOf(',') >= 0) {
events = eventName.split(',');
}
events.forEach(eventName => {
// from youmightnotneedjquery.com
document.addEventListener(eventName.trim(), function (e) {
// loop parent nodes from the target to the delegation node
for (let target = e.target; target && target != this; target = target.parentNode) {
if (NodeList.prototype.isPrototypeOf(elemSelector)) {
for (el of elemSelector) {
if (el == target) {
handler.call(target, e);
return;
}
}
} else if (!elemSelector || target.matches(elemSelector)) {
handler.call(target, e);
return;
}
}
}, capture); // I find capture=true helpful when using :not() selectors to exclude one elem of the node tree
});
}
function trigger(el, eventType) {
if (typeof el === 'string') {
el = $(el); // assume it was a selector, for convenience
}
// from youmightnotneedjquery.com
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else {
const event =
typeof eventType === 'string'
? new Event(eventType, { bubbles: true, cancelable: true })
: eventType;
el.dispatchEvent(event);
}
}
// cloneTemplate does a deep clone of the <template> tag selected by tplSelector.
function cloneTemplate(tplSelector) {
// Ohhhhhh wow, we need to use firstElementChild when cloning the content of a template tag (!!!!):
// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#avoiding_documentfragment_pitfall
// I spent way too long on this.
const elem = $(tplSelector);
if (!elem) return;
return elem.content.firstElementChild.cloneNode(true);
// return document.importNode(elem.content, true);
}
// isVisible returns true if elem (an element or selector) is visible.
function isVisible(elem) {
if (typeof elem === 'string') {
elem = $(elem);
}
return elem.offsetParent !== null;
}
// queryParam returns the named query string parameter's value(s).
function queryParam(name) {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
return params[name];
}