refactor(frontend): bring tether-drop into vendor folder to build from source

This commit is contained in:
Jack Westbrook
2025-03-03 09:44:16 +01:00
parent 904084614b
commit 732dc952de
4 changed files with 873 additions and 18 deletions
-1
View File
@@ -392,7 +392,6 @@
"symbol-observable": "4.0.0",
"systemjs": "6.15.1",
"systemjs-cjs-extra": "0.2.1",
"tether-drop": "https://github.com/torkelo/drop",
"tinycolor2": "1.6.0",
"tslib": "2.8.1",
"tween-functions": "^1.2.0",
+495
View File
@@ -0,0 +1,495 @@
import {
extend,
addClass,
removeClass,
hasClass,
Evented,
} from "./tetherUtils";
function sortAttach(str) {
let [first, second] = str.split(" ");
if (["left", "right"].indexOf(first) >= 0) {
[first, second] = [second, first];
}
return [first, second].join(" ");
}
function removeFromArray(arr, item) {
let index;
let results = [];
while ((index = arr.indexOf(item)) !== -1) {
results.push(arr.splice(index, 1));
}
return results;
}
let clickEvents = ["click"];
if ("ontouchstart" in document.documentElement) {
clickEvents.push("touchstart");
}
const transitionEndEvents = {
WebkitTransition: "webkitTransitionEnd",
MozTransition: "transitionend",
OTransition: "otransitionend",
transition: "transitionend",
};
let transitionEndEvent = "";
for (let name in transitionEndEvents) {
if ({}.hasOwnProperty.call(transitionEndEvents, name)) {
let tempEl = document.createElement("p");
if (typeof tempEl.style[name] !== "undefined") {
transitionEndEvent = transitionEndEvents[name];
}
}
}
const MIRROR_ATTACH = {
left: "right",
right: "left",
top: "bottom",
bottom: "top",
middle: "middle",
center: "center",
};
let allDrops = {};
// Drop can be included in external libraries. Calling createContext gives you a fresh
// copy of drop which won't interact with other copies on the page (beyond calling the document events).
function createContext(options = {}) {
let drop = (...args) => new DropInstance(...args);
extend(drop, {
createContext: createContext,
drops: [],
defaults: {},
});
const defaultOptions = {
classPrefix: "drop",
defaults: {
position: "bottom left",
openOn: "click",
beforeClose: null,
constrainToScrollParent: true,
constrainToWindow: true,
classes: "",
remove: false,
openDelay: 0,
closeDelay: 50,
// inherited from openDelay and closeDelay if not explicitly defined
focusDelay: null,
blurDelay: null,
hoverOpenDelay: null,
hoverCloseDelay: null,
tetherOptions: {},
},
};
extend(drop, defaultOptions, options);
extend(drop.defaults, defaultOptions.defaults, options.defaults);
if (typeof allDrops[drop.classPrefix] === "undefined") {
allDrops[drop.classPrefix] = [];
}
drop.updateBodyClasses = () => {
// There is only one body, so despite the context concept, we still iterate through all
// drops which share our classPrefix.
let anyOpen = false;
const drops = allDrops[drop.classPrefix];
const len = drops.length;
for (let i = 0; i < len; ++i) {
if (drops[i].isOpened()) {
anyOpen = true;
break;
}
}
if (anyOpen) {
addClass(document.body, `${drop.classPrefix}-open`);
} else {
removeClass(document.body, `${drop.classPrefix}-open`);
}
};
class DropInstance extends Evented {
constructor(opts) {
super();
this.options = extend({}, drop.defaults, opts);
this.target = this.options.target;
if (typeof this.target === "undefined") {
throw new Error("Drop Error: You must provide a target.");
}
const dataPrefix = `data-${drop.classPrefix}`;
const contentAttr = this.target.getAttribute(dataPrefix);
if (contentAttr && this.options.content == null) {
this.options.content = contentAttr;
}
const attrsOverride = ["position", "openOn"];
for (let i = 0; i < attrsOverride.length; ++i) {
const override = this.target.getAttribute(
`${dataPrefix}-${attrsOverride[i]}`
);
if (override && this.options[attrsOverride[i]] == null) {
this.options[attrsOverride[i]] = override;
}
}
if (this.options.classes && this.options.addTargetClasses !== false) {
addClass(this.target, this.options.classes);
}
drop.drops.push(this);
allDrops[drop.classPrefix].push(this);
this._boundEvents = [];
this.bindMethods();
this.setupElements();
this.setupEvents();
this.setupTether();
}
_on(element, event, handler) {
this._boundEvents.push({ element, event, handler });
element.addEventListener(event, handler);
}
bindMethods() {
this.transitionEndHandler = this._transitionEndHandler.bind(this);
}
setupElements() {
this.drop = document.createElement("div");
addClass(this.drop, drop.classPrefix);
if (this.options.classes) {
addClass(this.drop, this.options.classes);
}
this.content = document.createElement("div");
addClass(this.content, `${drop.classPrefix}-content`);
if (typeof this.options.content === "function") {
const generateAndSetContent = () => {
// content function might return a string or an element
const contentElementOrHTML = this.options.content.call(this, this);
if (typeof contentElementOrHTML === "string") {
this.content.innerHTML = contentElementOrHTML;
} else if (typeof contentElementOrHTML === "object") {
this.content.innerHTML = "";
this.content.appendChild(contentElementOrHTML);
} else {
throw new Error(
"Drop Error: Content function should return a string or HTMLElement."
);
}
};
this.on("beforeOpen", generateAndSetContent.bind(this));
} else if (typeof this.options.content === "object") {
this.content.appendChild(this.options.content);
} else {
this.content.innerHTML = this.options.content;
}
this.drop.appendChild(this.content);
}
setupTether() {
// Tether expects two attachment points, one in the target element, one in the
// drop. We use a single one, and use the order as well, to allow us to put
// the drop on either side of any of the four corners. This magic converts between
// the two:
let dropAttach = this.options.position.split(" ");
dropAttach[0] = MIRROR_ATTACH[dropAttach[0]];
dropAttach = dropAttach.join(" ");
let constraints = [];
if (this.options.constrainToScrollParent) {
constraints.push({
to: "scrollParent",
pin: "top, bottom",
attachment: "together none",
});
} else {
// To get 'out of bounds' classes
constraints.push({
to: "scrollParent",
});
}
if (this.options.constrainToWindow !== false) {
constraints.push({
to: "window",
attachment: "together",
});
} else {
// To get 'out of bounds' classes
constraints.push({
to: "window",
});
}
const opts = {
element: this.drop,
target: this.target,
attachment: sortAttach(dropAttach),
targetAttachment: sortAttach(this.options.position),
classPrefix: drop.classPrefix,
offset: "0 0",
targetOffset: "0 0",
enabled: false,
constraints: constraints,
addTargetClasses: this.options.addTargetClasses,
};
if (this.options.tetherOptions !== false) {
this.tether = new Tether(extend({}, opts, this.options.tetherOptions));
}
}
setupEvents() {
if (!this.options.openOn) {
return;
}
if (this.options.openOn === "always") {
setTimeout(this.open.bind(this));
return;
}
const events = this.options.openOn.split(" ");
if (events.indexOf("click") >= 0) {
const openHandler = (event) => {
this.toggle(event);
event.preventDefault();
};
const closeHandler = (event) => {
if (!this.isOpened()) {
return;
}
// Clicking inside dropdown
if (event.target === this.drop || this.drop.contains(event.target)) {
return;
}
// Clicking target
if (
event.target === this.target ||
this.target.contains(event.target)
) {
return;
}
this.close(event);
};
for (let i = 0; i < clickEvents.length; ++i) {
const clickEvent = clickEvents[i];
this._on(this.target, clickEvent, openHandler);
this._on(document, clickEvent, closeHandler);
}
}
let inTimeout = null;
let outTimeout = null;
const inHandler = (event) => {
if (outTimeout !== null) {
clearTimeout(outTimeout);
} else {
inTimeout = setTimeout(() => {
this.open(event);
inTimeout = null;
}, (event.type === "focus" ? this.options.focusDelay : this.options.hoverOpenDelay) || this.options.openDelay);
}
};
const outHandler = (event) => {
if (inTimeout !== null) {
clearTimeout(inTimeout);
} else {
outTimeout = setTimeout(() => {
this.close(event);
outTimeout = null;
}, (event.type === "blur" ? this.options.blurDelay : this.options.hoverCloseDelay) || this.options.closeDelay);
}
};
if (events.indexOf("hover") >= 0) {
this._on(this.target, "mouseover", inHandler);
this._on(this.drop, "mouseover", inHandler);
this._on(this.target, "mouseout", outHandler);
this._on(this.drop, "mouseout", outHandler);
}
if (events.indexOf("focus") >= 0) {
this._on(this.target, "focus", inHandler);
this._on(this.drop, "focus", inHandler);
this._on(this.target, "blur", outHandler);
this._on(this.drop, "blur", outHandler);
}
}
isOpened() {
if (this.drop) {
return hasClass(this.drop, `${drop.classPrefix}-open`);
}
}
toggle(event) {
if (this.isOpened()) {
this.close(event);
} else {
this.open(event);
}
}
open(event) {
/* eslint no-unused-vars: 0 */
if (this.isOpened()) {
return;
}
if (!this.drop.parentNode) {
document.body.appendChild(this.drop);
}
if (typeof this.tether !== "undefined") {
this.tether.enable();
}
addClass(this.drop, `${drop.classPrefix}-open`);
addClass(this.drop, `${drop.classPrefix}-open-transitionend`);
setTimeout(() => {
if (this.drop) {
addClass(this.drop, `${drop.classPrefix}-after-open`);
}
});
this.trigger("beforeOpen");
if (typeof this.tether !== "undefined") {
this.tether.position();
}
this.trigger("open");
drop.updateBodyClasses();
}
_transitionEndHandler(e) {
if (e.target !== e.currentTarget) {
return;
}
if (!hasClass(this.drop, `${drop.classPrefix}-open`)) {
removeClass(this.drop, `${drop.classPrefix}-open-transitionend`);
}
this.drop.removeEventListener(
transitionEndEvent,
this.transitionEndHandler
);
}
beforeCloseHandler(event) {
let shouldClose = true;
if (!this.isClosing && typeof this.options.beforeClose === "function") {
this.isClosing = true;
shouldClose = this.options.beforeClose(event, this) !== false;
}
this.isClosing = false;
return shouldClose;
}
close(event) {
if (!this.isOpened()) {
return;
}
if (!this.beforeCloseHandler(event)) {
return;
}
removeClass(this.drop, `${drop.classPrefix}-open`);
removeClass(this.drop, `${drop.classPrefix}-after-open`);
this.drop.addEventListener(transitionEndEvent, this.transitionEndHandler);
this.trigger("close");
if (typeof this.tether !== "undefined") {
this.tether.disable();
}
drop.updateBodyClasses();
if (this.options.remove) {
this.remove(event);
}
}
remove(event) {
this.close(event);
if (this.drop.parentNode) {
this.drop.parentNode.removeChild(this.drop);
}
}
position() {
if (this.isOpened() && typeof this.tether !== "undefined") {
this.tether.position();
}
}
destroy() {
this.remove();
if (typeof this.tether !== "undefined") {
this.tether.destroy();
}
for (let i = 0; i < this._boundEvents.length; ++i) {
const { element, event, handler } = this._boundEvents[i];
element.removeEventListener(event, handler);
}
this._boundEvents = [];
this.tether = null;
this.drop = null;
this.content = null;
this.target = null;
removeFromArray(allDrops[drop.classPrefix], this);
removeFromArray(drop.drops, this);
}
}
return drop;
}
const Drop = createContext();
export default Drop;
document.addEventListener("DOMContentLoaded", () => {
Drop.updateBodyClasses();
});
+378
View File
@@ -0,0 +1,378 @@
let TetherBase;
if (typeof TetherBase === "undefined") {
TetherBase = { modules: [] };
}
let zeroElement = null;
// Same as native getBoundingClientRect, except it takes into account parent <frame> offsets
// if the element lies within a nested document (<frame> or <iframe>-like).
function getActualBoundingClientRect(node) {
let boundingRect = node.getBoundingClientRect();
// The original object returned by getBoundingClientRect is immutable, so we clone it
// We can't use extend because the properties are not considered part of the object by hasOwnProperty in IE9
let rect = {};
for (var k in boundingRect) {
rect[k] = boundingRect[k];
}
try {
if (node.ownerDocument !== document) {
let frameElement = node.ownerDocument.defaultView.frameElement;
if (frameElement) {
let frameRect = getActualBoundingClientRect(frameElement);
rect.top += frameRect.top;
rect.bottom += frameRect.top;
rect.left += frameRect.left;
rect.right += frameRect.left;
}
}
} catch (err) {
// Ignore "Access is denied" in IE11/Edge
}
return rect;
}
function getScrollParents(el) {
// In firefox if the el is inside an iframe with display: none; window.getComputedStyle() will return null;
// https://bugzilla.mozilla.org/show_bug.cgi?id=548397
const computedStyle = getComputedStyle(el) || {};
const position = computedStyle.position;
let parents = [];
if (position === "fixed") {
return [el];
}
let parent = el;
while ((parent = parent.parentNode) && parent && parent.nodeType === 1) {
let style;
try {
style = getComputedStyle(parent);
} catch (err) {}
if (typeof style === "undefined" || style === null) {
parents.push(parent);
return parents;
}
const { overflow, overflowX, overflowY } = style;
if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
if (
position !== "absolute" ||
["relative", "absolute", "fixed"].indexOf(style.position) >= 0
) {
parents.push(parent);
}
}
}
parents.push(el.ownerDocument.body);
// If the node is within a frame, account for the parent window scroll
if (el.ownerDocument !== document) {
parents.push(el.ownerDocument.defaultView);
}
return parents;
}
const uniqueId = (() => {
let id = 0;
return () => ++id;
})();
const zeroPosCache = {};
const getOrigin = () => {
// getBoundingClientRect is unfortunately too accurate. It introduces a pixel or two of
// jitter as the user scrolls that messes with our ability to detect if two positions
// are equivilant or not. We place an element at the top left of the page that will
// get the same jitter, so we can cancel the two out.
let node = zeroElement;
if (!node || !document.body.contains(node)) {
node = document.createElement("div");
node.setAttribute("data-tether-id", uniqueId());
extend(node.style, {
top: 0,
left: 0,
position: "absolute",
});
document.body.appendChild(node);
zeroElement = node;
}
const id = node.getAttribute("data-tether-id");
if (typeof zeroPosCache[id] === "undefined") {
zeroPosCache[id] = getActualBoundingClientRect(node);
// Clear the cache when this position call is done
defer(() => {
delete zeroPosCache[id];
});
}
return zeroPosCache[id];
};
function removeUtilElements() {
if (zeroElement) {
document.body.removeChild(zeroElement);
}
zeroElement = null;
}
function getBounds(el) {
let doc;
if (el === document) {
doc = document;
el = document.documentElement;
} else {
doc = el.ownerDocument;
}
const docEl = doc.documentElement;
const box = getActualBoundingClientRect(el);
const origin = getOrigin();
box.top -= origin.top;
box.left -= origin.left;
if (typeof box.width === "undefined") {
box.width = document.body.scrollWidth - box.left - box.right;
}
if (typeof box.height === "undefined") {
box.height = document.body.scrollHeight - box.top - box.bottom;
}
box.top = box.top - docEl.clientTop;
box.left = box.left - docEl.clientLeft;
box.right = doc.body.clientWidth - box.width - box.left;
box.bottom = doc.body.clientHeight - box.height - box.top;
return box;
}
function getOffsetParent(el) {
return el.offsetParent || document.documentElement;
}
let _scrollBarSize = null;
function getScrollBarSize() {
if (_scrollBarSize) {
return _scrollBarSize;
}
const inner = document.createElement("div");
inner.style.width = "100%";
inner.style.height = "200px";
const outer = document.createElement("div");
extend(outer.style, {
position: "absolute",
top: 0,
left: 0,
pointerEvents: "none",
visibility: "hidden",
width: "200px",
height: "150px",
overflow: "hidden",
});
outer.appendChild(inner);
document.body.appendChild(outer);
const widthContained = inner.offsetWidth;
outer.style.overflow = "scroll";
let widthScroll = inner.offsetWidth;
if (widthContained === widthScroll) {
widthScroll = outer.clientWidth;
}
document.body.removeChild(outer);
const width = widthContained - widthScroll;
_scrollBarSize = { width, height: width };
return _scrollBarSize;
}
function extend(out = {}) {
const args = [];
Array.prototype.push.apply(args, arguments);
args.slice(1).forEach((obj) => {
if (obj) {
for (let key in obj) {
if ({}.hasOwnProperty.call(obj, key)) {
out[key] = obj[key];
}
}
}
});
return out;
}
function removeClass(el, name) {
if (typeof el.classList !== "undefined") {
name.split(" ").forEach((cls) => {
if (cls.trim()) {
el.classList.remove(cls);
}
});
} else {
const regex = new RegExp(`(^| )${name.split(" ").join("|")}( |$)`, "gi");
const className = getClassName(el).replace(regex, " ");
setClassName(el, className);
}
}
function addClass(el, name) {
if (typeof el.classList !== "undefined") {
name.split(" ").forEach((cls) => {
if (cls.trim()) {
el.classList.add(cls);
}
});
} else {
removeClass(el, name);
const cls = getClassName(el) + ` ${name}`;
setClassName(el, cls);
}
}
function hasClass(el, name) {
if (typeof el.classList !== "undefined") {
return el.classList.contains(name);
}
const className = getClassName(el);
return new RegExp(`(^| )${name}( |$)`, "gi").test(className);
}
function getClassName(el) {
// Can't use just SVGAnimatedString here since nodes within a Frame in IE have
// completely separately SVGAnimatedString base classes
if (el.className instanceof el.ownerDocument.defaultView.SVGAnimatedString) {
return el.className.baseVal;
}
return el.className;
}
function setClassName(el, className) {
el.setAttribute("class", className);
}
function updateClasses(el, add, all) {
// Of the set of 'all' classes, we need the 'add' classes, and only the
// 'add' classes to be set.
all.forEach((cls) => {
if (add.indexOf(cls) === -1 && hasClass(el, cls)) {
removeClass(el, cls);
}
});
add.forEach((cls) => {
if (!hasClass(el, cls)) {
addClass(el, cls);
}
});
}
const deferred = [];
const defer = (fn) => {
deferred.push(fn);
};
const flush = () => {
let fn;
while ((fn = deferred.pop())) {
fn();
}
};
class Evented {
on(event, handler, ctx, once = false) {
if (typeof this.bindings === "undefined") {
this.bindings = {};
}
if (typeof this.bindings[event] === "undefined") {
this.bindings[event] = [];
}
this.bindings[event].push({ handler, ctx, once });
}
once(event, handler, ctx) {
this.on(event, handler, ctx, true);
}
off(event, handler) {
if (
typeof this.bindings === "undefined" ||
typeof this.bindings[event] === "undefined"
) {
return;
}
if (typeof handler === "undefined") {
delete this.bindings[event];
} else {
let i = 0;
while (i < this.bindings[event].length) {
if (this.bindings[event][i].handler === handler) {
this.bindings[event].splice(i, 1);
} else {
++i;
}
}
}
}
trigger(event, ...args) {
if (typeof this.bindings !== "undefined" && this.bindings[event]) {
let i = 0;
while (i < this.bindings[event].length) {
const { handler, ctx, once } = this.bindings[event][i];
let context = ctx;
if (typeof context === "undefined") {
context = this;
}
handler.apply(context, args);
if (once) {
this.bindings[event].splice(i, 1);
} else {
++i;
}
}
}
}
}
export {
getActualBoundingClientRect,
getScrollParents,
getBounds,
getOffsetParent,
extend,
addClass,
removeClass,
hasClass,
updateClasses,
defer,
flush,
uniqueId,
Evented,
getScrollBarSize,
removeUtilElements,
};
-17
View File
@@ -18497,7 +18497,6 @@ __metadata:
systemjs: "npm:6.15.1"
systemjs-cjs-extra: "npm:0.2.1"
testing-library-selector: "npm:0.3.1"
tether-drop: "https://github.com/torkelo/drop"
tinycolor2: "npm:1.6.0"
tracelib: "npm:1.0.1"
ts-jest: "npm:29.2.5"
@@ -29566,22 +29565,6 @@ __metadata:
languageName: node
linkType: hard
"tether-drop@https://github.com/torkelo/drop":
version: 1.5.0
resolution: "tether-drop@https://github.com/torkelo/drop.git#commit=fc83ca88db0076fbf6359cbe1743a9ef0f1ee6e1"
dependencies:
tether: "npm:^1.1.0"
checksum: 10/178c3afb889ee6dc860f767ffd7a959774adce200148e067aff631888b98fd046123f887ca40152581a13c430ad1fa72e2a9dba9de4e79e3f7634e224c229188
languageName: node
linkType: hard
"tether@npm:^1.1.0":
version: 1.4.7
resolution: "tether@npm:1.4.7"
checksum: 10/4185215f28392733f6248ea5d1734cd411d921ba3d5ae92df977bc1d11bd88dcf469ed6ceb9195accd8facc136ddd87d286f18cab2544300412e3f2d073d8e68
languageName: node
linkType: hard
"text-extensions@npm:^1.0.0":
version: 1.9.0
resolution: "text-extensions@npm:1.9.0"