2024-08-12 15:09:11 +02:00
|
|
|
{"version":3,"file":"popup-JRlLBLgR.js","sources":["../../node_modules/@skeletonlabs/skeleton/dist/utilities/Popup/popup.js"],"sourcesContent":["import { get, writable } from 'svelte/store';\n// Use a store to pass the Floating UI import references\nexport const storePopup = writable(undefined);\nexport function popup(triggerNode, args) {\n // Floating UI Modules\n const { computePosition, autoUpdate, offset, shift, flip, arrow, size, autoPlacement, hide, inline } = get(storePopup);\n // Local State\n const popupState = {\n open: false,\n autoUpdateCleanup: () => { }\n };\n const focusableAllowedList = ':is(a[href], button, input, textarea, select, details, [tabindex]):not([tabindex=\"-1\"])';\n let focusablePopupElements;\n const documentationLink = 'https://www.skeleton.dev/utilities/popups';\n // Elements\n let elemPopup;\n let elemArrow;\n function setDomElements() {\n elemPopup = document.querySelector(`[data-popup=\"${args.target}\"]`) ?? document.createElement('div');\n elemArrow = elemPopup.querySelector(`.arrow`) ?? document.createElement('div');\n }\n setDomElements(); // init\n // Render Floating UI Popup\n function render() {\n // Error handling for required Floating UI modules\n if (!elemPopup)\n throw new Error(`The data-popup=\"${args.target}\" element was not found. ${documentationLink}`);\n if (!computePosition)\n throw new Error(`Floating UI 'computePosition' not found for data-popup=\"${args.target}\". ${documentationLink}`);\n if (!offset)\n throw new Error(`Floating UI 'offset' not found for data-popup=\"${args.target}\". ${documentationLink}`);\n if (!shift)\n throw new Error(`Floating UI 'shift' not found for data-popup=\"${args.target}\". ${documentationLink}`);\n if (!flip)\n throw new Error(`Floating UI 'flip' not found for data-popup=\"${args.target}\". ${documentationLink}`);\n if (!arrow)\n throw new Error(`Floating UI 'arrow' not found for data-popup=\"${args.target}\". ${documentationLink}`);\n // Bundle optional middleware\n const optionalMiddleware = [];\n // https://floating-ui.com/docs/size\n if (size)\n optionalMiddleware.push(size(args.middleware?.size));\n // https://floating-ui.com/docs/autoPlacement\n if (autoPlacement)\n optionalMiddleware.push(autoPlacement(args.middleware?.autoPlacement));\n // https://floating-ui.com/docs/hide\n if (hide)\n optionalMiddleware.push(hide(args.middleware?.hide));\n // https://floating-ui.com/docs/inline\n if (inline)\n optionalMiddleware.push(inline(args.middleware?.inline));\n // Floating UI Compute Position\n // https://floating-ui.com/docs/computePosition\n computePosition(triggerNode, elemPopup, {\n placement: args.placement ?? 'bottom',\n // Middleware - NOTE: the order matters:\n // https://floating-ui.com/docs/middleware#ordering\n middleware: [\n // https://floating-ui.com/docs/offset\n offset(args.middleware?.offset ?? 8),\n // https://floating-ui.com/docs/shift\n shift(args.middleware?.shift ?? { padding: 8 }),\n // https://floating-ui.com/docs/flip\n flip(args.middleware?.flip),\n // https://floating-ui.com/docs/arrow\n arrow(args.middleware?.arrow ?? { element: elemArrow || null }),\n // Implement optional middleware\n ...optionalMiddleware\n ]\n }).then(({ x, y, placement, middlewareData }) => {\n Object.assign(elemPopup.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n // Handle Arrow Placement:\n // https://floating-ui.com/docs/arrow\n if (elemArrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arr
|