diff --git a/.prettierignore b/.prettierignore index ce032c2..ab5dd49 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,8 @@ dist/ -docs/ +docs/css/dialogify.css +docs/js/dialogify.min.js +docs/js/custom-elements.min.js +docs/js/dialog-polyfill.min.js node_modules/ src/css/ src/js/dialog-polyfill.esm.js diff --git a/CHANGELOG.md b/CHANGELOG.md index cad2120..4785b27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +## 2.3.0 + feat: a dark palette behind data-theme="dark", with data-theme="auto" following prefers-color-scheme; opt-in, so an existing site is unchanged on upgrade + feat: every colour in the stylesheet is now a --dialogify-* custom property, so a page can retheme the dialog without overriding rules + feat: --dialogify-icon-filter re-tints the built-in single-colour icons, whose fill is baked into the inline SVGs + +## 2.2.2 + fix: toasts and non-modal dialogs no longer hide behind site chrome such as a sticky nav; the z-index defaults are now 1010 and 1000 + feat: --dialogify-z-index and --dialogify-toast-z-index custom properties to fit another layering scheme + chore: postcss no longer emits a static fallback next to every var(), which is dead weight for the browsers this build targets + ## 2.2.1 chore: build target raised from es2018 to es2022, matching the browsers that ship a native chore: replaced the deprecated jQuery `.click()` shorthand with `.on('click')`/`.trigger('click')`, so the library is clean under jQuery 4 diff --git a/README.md b/README.md index eb515f7..65455a5 100644 --- a/README.md +++ b/README.md @@ -214,6 +214,130 @@ its own height at the same time, so the toasts stacked below it slide up instead of jumping when it is removed. All of them are disabled under `prefers-reduced-motion: reduce`. +### Stacking (`z-index`) + +`showModal()` promotes a dialog to the browser's top layer, which always paints +above the page, so `z-index` never applies to modal dialogs. Everything else — +`show()`, `showAt()` popovers and toasts — stays in the normal stacking context +and has to out-stack the rest of the page. + +The defaults are deliberately high so a toast is not hidden behind a sticky +header: + +| Custom property | Default | Applies to | +| --------------------------- | ------- | ------------------------------ | +| `--dialogify-z-index` | `1000` | Non-modal dialogs and popovers | +| `--dialogify-toast-z-index` | `1010` | The toast container | + +Override them anywhere in your own CSS to fit a different layering scheme: + +```css +:root { + --dialogify-z-index: 500; + --dialogify-toast-z-index: 510; +} +``` + +The bundled stylesheet only reads these properties (they are `var()` fallbacks, +never declared by the library), so your declaration wins regardless of source +order — even though the browser build injects its stylesheet last. + +## Theming + +Every colour in the bundled stylesheet is read through a custom property, so you +can retheme the dialog without fighting selectors: + +```css +:root { + --dialogify-primary: #6741d9; + --dialogify-primary-hover: #7950f2; + --dialogify-surface: #fdfdfd; +} +``` + +The library never declares these properties itself — the light values are only +`var()` fallbacks — so your declaration wins regardless of source order, even +though the browser build injects its stylesheet last. + +
+All theme properties + +| Custom property | Default | Applies to | +| -------------------------------- | -------------------------- | ------------------------------------ | +| `--dialogify-surface` | `#fff` | Dialog background | +| `--dialogify-text` | `#464646` | Body text | +| `--dialogify-heading` | `#00555f` | `title()` and the close button | +| `--dialogify-muted` | `#a6a6a6` | Secondary text | +| `--dialogify-divider` | `#e0e6e8` | `
` | +| `--dialogify-link` | `#117e96` | Links in the body | +| `--dialogify-link-hover` | `#126e7d` | Links on hover | +| `--dialogify-focus-ring` | `#117e96` | `:focus-visible` outlines | +| `--dialogify-icon-filter` | `none` | Filter applied to the built-in icons | +| `--dialogify-shadow` | three-layer drop shadow | Dialog shadow | +| `--dialogify-loading-overlay` | `rgba(255, 255, 255, .75)` | `setLoading()` overlay | +| `--dialogify-button-bg` | `#e5e5e5` | Default button | +| `--dialogify-button-hover-bg` | `#dcdcdc` | Default button on hover | +| `--dialogify-button-text` | `#a6a6a6` | Default button label | +| `--dialogify-primary` | `#117e96` | `BUTTON_PRIMARY` | +| `--dialogify-primary-hover` | `#126e7d` | `BUTTON_PRIMARY` on hover | +| `--dialogify-on-primary` | `#fff` | `BUTTON_PRIMARY` label | +| `--dialogify-danger` | `#f44336` | `BUTTON_DANGER` | +| `--dialogify-danger-hover` | `#de2427` | `BUTTON_DANGER` on hover | +| `--dialogify-on-danger` | `#fff` | `BUTTON_DANGER` label | +| `--dialogify-danger-shadow` | red-tinted drop shadow | `.btn-danger-shadow` | +| `--dialogify-field-bg` | `#fff` | `.text-field` background | +| `--dialogify-field-border` | `#d9d9d9` | `.text-field` border | +| `--dialogify-field-text` | `#00555f` | `.text-field` text | +| `--dialogify-field-focus-border` | `#117e96` | `.text-field` border on focus | +| `--dialogify-field-placeholder` | `#b3b3b3` | `.text-field` placeholder | +| `--dialogify-error` | `#de2427` | `.is-error` fields | +| `--dialogify-toast-info` | `#117e96` | Toast status bar, `info` | +| `--dialogify-toast-success` | `#2f9e44` | Toast status bar, `success` | +| `--dialogify-toast-warning` | `#e8a33d` | Toast status bar, `warning` | +| `--dialogify-toast-error` | `#de2427` | Toast status bar, `error` | +| `--dialogify-toast-close` | `#8d8d8d` | Toast close button | +| `--dialogify-toast-close-hover` | `#464646` | Toast close button on hover | +| `--dialogify-backdrop` | `#000` | Modal backdrop | +| `--dialogify-backdrop-opacity` | `0.7` | Modal backdrop opacity | + +
+ +### Dark theme + +A dark palette ships with the stylesheet, behind `data-theme`: + +```html + +``` + +| `data-theme` | Result | +| ------------ | ---------------------------------------------------- | +| absent | Light (the default, unchanged from earlier releases) | +| `light` | Light | +| `dark` | Dark | +| `auto` | Follows `prefers-color-scheme` | + +The attribute can sit on any ancestor of the dialog — `` is the usual +choice — and can be flipped at runtime without reloading: + +```js +document.documentElement.dataset.theme = 'dark'; +``` + +Dark mode is **opt-in on purpose**: without the attribute the dialog stays light +even when the visitor's system is set to dark, so an existing site never changes +appearance on upgrade. Use `data-theme="auto"` to follow the system. + +The dark rules only set custom properties, never a real declaration, so if you +already ship your own overrides for `.dialogify` they keep winning by source +order exactly as before. Be aware that anything your stylesheet leaves alone +will pick up the dark palette, which can mix the two; declare +`--dialogify-*` properties instead of rules if you want full control. + +The built-in icons are single-colour SVGs with the fill baked in, so they are +re-tinted with `--dialogify-icon-filter` rather than swapped. This also applies +to a custom `closeButton.image`; set `--dialogify-icon-filter: none` to opt out. + ## Accessibility - `title()` links the heading to the dialog with `aria-labelledby`. diff --git a/build.mjs b/build.mjs index 9b1e8c8..d333d57 100644 --- a/build.mjs +++ b/build.mjs @@ -25,7 +25,14 @@ async function buildCss() { async transform(source) { const { css } = await postcss([ autoprefixer, - postcssPresetEnv({ stage: 0 }) + // Custom properties are the public theming hook. The + // transform would prepend a static fallback to every + // var(), which is dead weight for the browsers this + // build targets. + postcssPresetEnv({ + stage: 0, + features: { 'custom-properties': false } + }) ]).process(source, { from: undefined }); return css; } diff --git a/dist/dialogify.cjs b/dist/dialogify.cjs index b2c2292..7bfedb3 100644 --- a/dist/dialogify.cjs +++ b/dist/dialogify.cjs @@ -1,3 +1,3 @@ -var W=Object.create;var M=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var U=(n,i)=>{for(var t in i)M(n,t,{get:i[t],enumerable:!0})},P=(n,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of Y(i))!V.call(n,e)&&e!==t&&M(n,e,{get:()=>i[e],enumerable:!(o=G(i,e))||o.enumerable});return n};var L=(n,i,t)=>(t=n!=null?W($(n)):{},P(i||!n||!n.__esModule?M(t,"default",{value:n,enumerable:!0}):t,n)),F=n=>P(M({},"__esModule",{value:!0}),n);var pi={};U(pi,{default:()=>ui});module.exports=F(pi);var a=L(require("jquery"),1);function z(){let n=window.dialogifyConfig;return(n==null||typeof n!="object")&&(n={}),n.locale=n.locale||"zh_TW",n}function S(n,i,t){if(!Object.prototype.hasOwnProperty.call(n,i)){let o=window.HTMLDialogElement&&window.HTMLDialogElement.prototype;if(o&&typeof o[i]=="function")return o[i].apply(n,t||[])}return n[i].apply(n,t||[])}function m(n,i,t){if(typeof window.CustomEvent!="function")return!0;let o=new window.CustomEvent(i,{bubbles:!1,cancelable:!0,detail:t});return n.dispatchEvent(o),!o.defaultPrevented}function I(){let n=z();return s.LOCALE[n.locale]||s.LOCALE.zh_TW}var Q=["left","right","top","bottom"],X=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],k="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMzZweCcgaGVpZ2h0PSczNnB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgY2xhc3M9InVpbC1kZWZhdWx0Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgY2xhc3M9ImJrIj48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSgwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMHMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nb3BhY2l0eScgZnJvbT0nMScgdG89JzAnIGR1cj0nMXMnIGJlZ2luPScwLjA4MzMzMzMzMzMzMzMzMzMzcycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuMTY2NjY2NjY2NjY2NjY2NjZzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDkwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC4yNXMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMTIwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC4zMzMzMzMzMzMzMzMzMzMzcycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nb3BhY2l0eScgZnJvbT0nMScgdG89JzAnIGR1cj0nMXMnIGJlZ2luPScwLjQxNjY2NjY2NjY2NjY2NjdzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDE4MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuNXMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMjEwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC41ODMzMzMzMzMzMzMzMzM0cycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nb3BhY2l0eScgZnJvbT0nMScgdG89JzAnIGR1cj0nMXMnIGJlZ2luPScwLjY2NjY2NjY2NjY2NjY2NjZzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDI3MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuNzVzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDMwMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuODMzMzMzMzMzMzMzMzMzNHMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMzMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC45MTY2NjY2NjY2NjY2NjY2cycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PC9zdmc+";function K(n){return String(n??"").replace(/[&<>"']/g,function(i){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[i]})}function B(n,i,t){return Math.min(Math.max(n,i),t)}function A(n,i,t,o){return n=="center"?i+t/2-o/2:n=="end"?i+t-o:i}var q=600;function ii(n,i){let t=typeof n.getAnimations=="function"?n.getAnimations():[];if(!t.length){i();return}let o=!1,e=function(){o||(o=!0,i())};Promise.all(t.map(function(d){return d.finished.catch(function(){})})).then(e),window.setTimeout(e,q)}function ti(n,i){let t=n.getBoundingClientRect();return!t.width&&!t.height?!0:i.clientXt.right||i.clientYt.bottom}var s=class n{constructor(i,t){this._setup(window.document.createElement("dialog"),i,t,{append:!0})}_setup(i,t,o,e){let d=z();(e==null||typeof e!="object")&&(e={}),window.dialogPolyfill&&typeof window.dialogPolyfill.registerDialog=="function"&&window.dialogPolyfill.registerDialog(i),(o==null||typeof o!="object")&&(o={}),this.options=o;let r=o.ajaxPrefix===void 0?"/ajax/":o.ajaxPrefix,l=this,c,g=!1,u=e.content||null;u?c=null:t.charAt(0)=="#"?c=(0,a.default)(t).html():t.indexOf(r)==0?(c=`
${K(I().loading)}
`,g=!0):c=t,c=c==null?null:`
${c}
`;let H=o.size||"dialogify__fixedwidth",w="dialogify";o.fixed!==!1&&(w+=" fixed"),Q.indexOf(o.position)>=0&&(w+=` dialogify--drawer dialogify--${o.position}`),o.variant&&(w+=` dialogify--${o.variant}`);let j=`
`;o.useDialogForm!==!1&&(j=`
${j}
`),n.counter++,this.id=i.id||`dialogify_${n.counter}`;let v=(0,a.default)(i).attr("id",this.id).addClass(w).append(j).on("close",function(){l._teardownAnchor(),(0,a.default)(l).triggerHandler("close"),o.backgroundScroll===!1&&(0,a.default)("body").css({overflow:"","padding-right":""}),(0,a.default)(i).addClass("dialogify--closing"),l._onClosing&&l._onClosing(),ii(i,function(){(0,a.default)(i).removeClass("dialogify--closing"),o.autoRemove!==!1&&(l._resizeObserver&&l._resizeObserver.disconnect(),(0,a.default)(i).remove()),l._onExit&&l._onExit()}),l._resolveClosePromise()}).on("cancel",function(f){(0,a.default)(l).triggerHandler("cancel"),o.closable===!1||!l._fireBeforeClose()?f.preventDefault():l._markClosing()}).on("click",function(f){o.closable!==!1&&f.target==i&&ti(i,f)&&m(i,"cancel")&&l.close()});if(o.useDialogForm!==!1&&v.find('form[method="dialog"]').on("submit",function(f){l._fireBeforeClose(this.returnValue)?l._markClosing():f.preventDefault()}),e.append!==!1&&v.appendTo("body"),o.closable!==!1){let f="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzA1NTY2Njt9PC9zdHlsZT48cmVjdCB4PSIzLjEiIHk9IjEiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjciIGhlaWdodD0iMSIvPjxyZWN0IHg9IjIuMSIgeT0iMi4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMSIgeT0iMy4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIxIiB5PSIxMS4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIyLjEiIHk9IjEyLjkiIGNsYXNzPSJzdDAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIzLjEiIHk9IjEzLjkiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjciIGhlaWdodD0iMSIvPjxnPjxyZWN0IHg9IjQuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjYuMyIgaGVpZ2h0PSIxIi8+PC9nPjxyZWN0IHg9IjQuOSIgeT0iMTUiIGNsYXNzPSJzdDAiIHdpZHRoPSI2LjMiIGhlaWdodD0iMSIvPjxyZWN0IHk9IjQuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjEiIGhlaWdodD0iNi4zIi8+PHJlY3QgeD0iMTEuMSIgeT0iMSIgY2xhc3M9InN0MCIgd2lkdGg9IjEuNyIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTIuOSIgeT0iMi4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTMuOSIgeT0iMy4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIxMy45IiB5PSIxMS4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIxMi45IiB5PSIxMi45IiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTEuMSIgeT0iMTMuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjEuNyIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTUiIHk9IjQuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjEiIGhlaWdodD0iNi4zIi8+PHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI5LjcsMy44IDkuNyw0LjkgOC43LDQuOSA4LjcsNS45IDcuMyw1LjkgNy4zLDQuOSA2LjMsNC45IDYuMywzLjggMy44LDMuOCAzLjgsNS4yIDQuOSw1LjIgNC45LDYuMyA1LjksNi4zIDUuOSw3LjMgNyw3LjMgNyw4LjMgNS45LDguMyA1LjksOS40IDQuOSw5LjQgNC45LDEwLjQgMy44LDEwLjQgMy44LDEwLjggMy44LDExLjggNi4zLDExLjggNi4zLDEwLjggNy4zLDEwLjggNy4zLDkuNyA4LjcsOS43IDguNywxMC44IDkuNywxMC44IDkuNywxMS44IDEyLjIsMTEuOCAxMi4yLDEwLjQgMTEuMSwxMC40IDExLjEsOS40IDEwLjEsOS40IDEwLjEsOC4zIDksOC4zIDksNy4zIDEwLjEsNy4zIDEwLjEsNi4zIDExLjEsNi4zIDExLjEsNS4yIDEyLjIsNS4yIDEyLjIsNC45IDEyLjIsMy44ICIvPjwvc3ZnPg==",x="",h={},b=o.closeButton||d.closeButton;b!=null&&typeof b=="object"&&(f=b.image||f,x=b.className||x,h=b.style||h);let R=(0,a.default)("").attr({src:f,alt:""}),J=(0,a.default)("").addClass("dialogify__close").attr({role:"button",tabindex:0,"aria-label":I().close}).css(h).append(R).on("click",function(){m(i,"cancel")&&l.close()}).on("keydown",function(_){(_.key=="Enter"||_.key==" "||_.key=="Spacebar")&&(_.preventDefault(),(0,a.default)(this).trigger("click"))});x&&J.addClass(x),(0,a.default)(i).append(J)}let p=o.dialog||d.dialog;if(p!=null&&typeof p=="object"){(0,a.default)(i).css(p.style||{}),p.className&&(0,a.default)(i).addClass(p.className);let f=(0,a.default)(i).find(".dialogify__content");f.css(p.contentStyle||{}),p.contentClassName&&f.addClass(p.contentClassName)}if(this.$content=(0,a.default)(i).find(".dialogify__content > div"),u?this.$content.append((0,a.default)("
").addClass("dialogify__body").append(u)):this.$content.append(c),this.$body=this.$content.find(".dialogify__body"),this.$form=(0,a.default)(i).find('form[method="dialog"]'),g){let f=t,x=o.ajaxData||{};try{let h=new URL(t,window.location.href);Object.keys(x).forEach(function(b){h.searchParams.append(b,x[b])}),f=h.toString()}catch{}window.fetch(f,{headers:{"X-Requested-With":"XMLHttpRequest"}}).then(function(h){return h.text()}).then(function(h){o.ajaxComplete&&o.ajaxComplete.call(l),l.$content.find(".dialogify-ajax-content").html(h)})}this.dialog=i,window.ResizeObserver&&!(0,a.default)(i).is(".dialogify--drawer, .dialogify--toast")&&(this._resizeObserver=new window.ResizeObserver(function(){(0,a.default)(i).is(".dialogify--popover")||ai(i)}),this._resizeObserver.observe(i))}_fireBeforeClose(i){let t=a.default.Event("beforeclose");return t.returnValue=i,(0,a.default)(this).triggerHandler(t),m(this.dialog,"beforeclose",{returnValue:i})&&!t.isDefaultPrevented()}_resolveClosePromise(){if(this._closeResolver){let i=this._closeResolver;this._closeResolver=null,this._closePromise=null,i(this.dialog.returnValue)}}_openPromise(){let i=this;return(0,a.default)(this.dialog).removeClass("dialogify--closing"),this._closePromise||(this._closePromise=new Promise(function(t){i._closeResolver=t})),this._closePromise}showModal(){this.options.backgroundScroll===!1&&E();let i=this._openPromise();return S(this.dialog,"showModal"),m(this.dialog,"show"),(0,a.default)(this).triggerHandler("show"),i}show(){this.options.backgroundScroll===!1&&E();let i=this._openPromise();return S(this.dialog,"show"),m(this.dialog,"show"),(0,a.default)(this).triggerHandler("show"),i}showAt(i,t){let o=(0,a.default)(i);if(!o.length)return this.show();(t==null||typeof t!="object")&&(t={}),this._anchor=o[0],this._anchorOptions=t,(0,a.default)(this.dialog).addClass("dialogify--popover").removeClass("fixed");let e=this.show();this.reposition();let d=this;return this._anchorListener=function(){d.reposition()},window.addEventListener("scroll",this._anchorListener,!0),window.addEventListener("resize",this._anchorListener),this.options.closable!==!1&&(this._outsideListener=function(r){if(d.dialog.contains(r.target))return;let l=t.toggle!==!1&&d._anchor.contains(r.target);m(d.dialog,"cancel")&&(l&&(r.preventDefault(),r.stopImmediatePropagation()),d.close())},this._outsideTimer=window.setTimeout(function(){d._outsideListener&&window.document.addEventListener("click",d._outsideListener,!0)},0)),e}reposition(){if(!this._anchor||!this.dialog.open)return this;let i=this._anchorOptions||{},t=i.offset===void 0?8:i.offset,o=i.align||"start",e=this._anchor.getBoundingClientRect(),d=this.dialog.getBoundingClientRect(),r=window.innerWidth||0,l=window.innerHeight||0,c=i.placement||"bottom";c=="bottom"&&e.bottom+t+d.height>l?c="top":c=="top"&&e.top-t-d.height<0?c="bottom":c=="right"&&e.right+t+d.width>r?c="left":c=="left"&&e.left-t-d.width<0&&(c="right");let g,u;return c=="top"||c=="bottom"?(g=c=="bottom"?e.bottom+t:e.top-t-d.height,u=A(o,e.left,e.width,d.width)):(u=c=="right"?e.right+t:e.left-t-d.width,g=A(o,e.top,e.height,d.height)),u=B(u,0,Math.max(0,r-d.width)),g=B(g,0,Math.max(0,l-d.height)),(0,a.default)(this.dialog).attr("data-placement",c).css({position:"fixed",top:`${Math.round(g)}px`,left:`${Math.round(u)}px`,right:"auto",bottom:"auto",transform:"none",margin:0}),this}_teardownAnchor(){this._anchorListener&&(window.removeEventListener("scroll",this._anchorListener,!0),window.removeEventListener("resize",this._anchorListener),this._anchorListener=null),this._outsideTimer&&(window.clearTimeout(this._outsideTimer),this._outsideTimer=null),this._outsideListener&&(window.document.removeEventListener("click",this._outsideListener,!0),this._outsideListener=null),this._anchor=null}_markClosing(){this.dialog.open&&(0,a.default)(this.dialog).addClass("dialogify--closing")}close(i){return this._fireBeforeClose(i)?(this._markClosing(),S(this.dialog,"close",i===void 0?[]:[i]),this):this}isOpen(){return this.dialog.open}on(i,t){return(0,a.default)(this).on(i,t),this}off(i,t){return(0,a.default)(this).off(i,t),this}setContent(i){return i instanceof window.Node||i instanceof a.default?this.$body.empty().append(i):this.$body.html(i??""),this}getContent(){return this.$body.html()}load(i,t){let o=this,e=i;try{let d=new URL(i,window.location.href),r=t||{};Object.keys(r).forEach(function(l){d.searchParams.append(l,r[l])}),e=d.toString()}catch{}return this.setLoading(!0),window.fetch(e,{headers:{"X-Requested-With":"XMLHttpRequest"}}).then(function(d){return d.text()}).then(function(d){return o.setContent(d),o.setLoading(!1),o.options.ajaxComplete&&o.options.ajaxComplete.call(o),o}).catch(function(d){throw o.setLoading(!1),d})}setLoading(i){if(i===!1)return this.$content.find(".dialogify__loading").remove(),(0,a.default)(this.dialog).removeClass("is-loading"),this;if(!this.$content.find(".dialogify__loading").length){let t=typeof i=="string"?i:I().loading;this.$content.append((0,a.default)("
").addClass("dialogify__loading").attr({role:"status","aria-live":"polite"}).append((0,a.default)("").attr({src:k,alt:t}))),(0,a.default)(this.dialog).addClass("is-loading")}return this}isLoading(){return this.$content.find(".dialogify__loading").length>0}validate(){let i=this.$form[0];return!i||typeof i.reportValidity!="function"?!0:i.reportValidity()}formData(){let i=this.$form[0];return!i||typeof window.FormData!="function"?null:new window.FormData(i)}formValues(){let i=this.formData();if(!i)return{};let t={};return i.forEach(function(o,e){Object.prototype.hasOwnProperty.call(t,e)?(Array.isArray(t[e])||(t[e]=[t[e]]),t[e].push(o)):t[e]=o}),t}title(i){let t=`${this.id}_title`,o=(0,a.default)("
").addClass("dialogify_title").attr("id",t).append('').append(i);return this.$content.find(".dialogify_title").length?this.$content.find(".dialogify_title").replaceWith(o):this.$content.prepend(o),(0,a.default)(this.dialog).attr("aria-labelledby",t),this}_createButton(i,t){let o=this;if(typeof i=="string"){let d=(0,a.default)(i);return{id:d.attr("id")||t,$button:d}}(i==null||typeof i!="object")&&(i={});let e=(0,a.default)(' + + + Dialogify + 2.3.0 + + +
+ + Star + + + + + + + +
-
- Dialogify -
- - - - - - - - - - - - - - - + + + + + + + + diff --git a/docs/js/dialogify.min.js b/docs/js/dialogify.min.js index 8463314..ce3c507 100644 --- a/docs/js/dialogify.min.js +++ b/docs/js/dialogify.min.js @@ -1,2 +1,2 @@ -(()=>{var v=window.jQuery||window.$;if(!v)throw new Error("Dialogify requires jQuery to be loaded before it.");var a=v;function S(){let n=window.dialogifyConfig;return(n==null||typeof n!="object")&&(n={}),n.locale=n.locale||"zh_TW",n}function M(n,i,t){if(!Object.prototype.hasOwnProperty.call(n,i)){let o=window.HTMLDialogElement&&window.HTMLDialogElement.prototype;if(o&&typeof o[i]=="function")return o[i].apply(n,t||[])}return n[i].apply(n,t||[])}function m(n,i,t){if(typeof window.CustomEvent!="function")return!0;let o=new window.CustomEvent(i,{bubbles:!1,cancelable:!0,detail:t});return n.dispatchEvent(o),!o.defaultPrevented}function I(){let n=S();return s.LOCALE[n.locale]||s.LOCALE.zh_TW}var Z=["left","right","top","bottom"],H=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],J="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMzZweCcgaGVpZ2h0PSczNnB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgY2xhc3M9InVpbC1kZWZhdWx0Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgY2xhc3M9ImJrIj48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSgwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMHMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nb3BhY2l0eScgZnJvbT0nMScgdG89JzAnIGR1cj0nMXMnIGJlZ2luPScwLjA4MzMzMzMzMzMzMzMzMzMzcycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuMTY2NjY2NjY2NjY2NjY2NjZzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDkwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC4yNXMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMTIwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC4zMzMzMzMzMzMzMzMzMzMzcycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nb3BhY2l0eScgZnJvbT0nMScgdG89JzAnIGR1cj0nMXMnIGJlZ2luPScwLjQxNjY2NjY2NjY2NjY2NjdzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDE4MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuNXMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMjEwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC41ODMzMzMzMzMzMzMzMzM0cycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PHJlY3QgIHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjMDA5NDk5JyB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPiAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0nb3BhY2l0eScgZnJvbT0nMScgdG89JzAnIGR1cj0nMXMnIGJlZ2luPScwLjY2NjY2NjY2NjY2NjY2NjZzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDI3MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuNzVzJyByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPjwvcmVjdD48cmVjdCAgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyMwMDk0OTknIHRyYW5zZm9ybT0ncm90YXRlKDMwMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+ICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSdvcGFjaXR5JyBmcm9tPScxJyB0bz0nMCcgZHVyPScxcycgYmVnaW49JzAuODMzMzMzMzMzMzMzMzMzNHMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJy8+PC9yZWN0PjxyZWN0ICB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzAwOTQ5OScgdHJhbnNmb3JtPSdyb3RhdGUoMzMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4gIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9J29wYWNpdHknIGZyb209JzEnIHRvPScwJyBkdXI9JzFzJyBiZWdpbj0nMC45MTY2NjY2NjY2NjY2NjY2cycgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz48L3JlY3Q+PC9zdmc+";function R(n){return String(n??"").replace(/[&<>"']/g,function(i){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[i]})}function P(n,i,t){return Math.min(Math.max(n,i),t)}function L(n,i,t,o){return n=="center"?i+t/2-o/2:n=="end"?i+t-o:i}var W=600;function G(n,i){let t=typeof n.getAnimations=="function"?n.getAnimations():[];if(!t.length){i();return}let o=!1,e=function(){o||(o=!0,i())};Promise.all(t.map(function(d){return d.finished.catch(function(){})})).then(e),window.setTimeout(e,W)}function Y(n,i){let t=n.getBoundingClientRect();return!t.width&&!t.height?!0:i.clientXt.right||i.clientYt.bottom}var s=class n{constructor(i,t){this._setup(window.document.createElement("dialog"),i,t,{append:!0})}_setup(i,t,o,e){let d=S();(e==null||typeof e!="object")&&(e={}),window.dialogPolyfill&&typeof window.dialogPolyfill.registerDialog=="function"&&window.dialogPolyfill.registerDialog(i),(o==null||typeof o!="object")&&(o={}),this.options=o;let r=o.ajaxPrefix===void 0?"/ajax/":o.ajaxPrefix,l=this,c,g=!1,u=e.content||null;u?c=null:t.charAt(0)=="#"?c=a(t).html():t.indexOf(r)==0?(c=`
${R(I().loading)}
`,g=!0):c=t,c=c==null?null:`
${c}
`;let E=o.size||"dialogify__fixedwidth",w="dialogify";o.fixed!==!1&&(w+=" fixed"),Z.indexOf(o.position)>=0&&(w+=` dialogify--drawer dialogify--${o.position}`),o.variant&&(w+=` dialogify--${o.variant}`);let D=`
`;o.useDialogForm!==!1&&(D=`
${D}
`),n.counter++,this.id=i.id||`dialogify_${n.counter}`;let T=a(i).attr("id",this.id).addClass(w).append(D).on("close",function(){l._teardownAnchor(),a(l).triggerHandler("close"),o.backgroundScroll===!1&&a("body").css({overflow:"","padding-right":""}),a(i).addClass("dialogify--closing"),l._onClosing&&l._onClosing(),G(i,function(){a(i).removeClass("dialogify--closing"),o.autoRemove!==!1&&(l._resizeObserver&&l._resizeObserver.disconnect(),a(i).remove()),l._onExit&&l._onExit()}),l._resolveClosePromise()}).on("cancel",function(f){a(l).triggerHandler("cancel"),o.closable===!1||!l._fireBeforeClose()?f.preventDefault():l._markClosing()}).on("click",function(f){o.closable!==!1&&f.target==i&&Y(i,f)&&m(i,"cancel")&&l.close()});if(o.useDialogForm!==!1&&T.find('form[method="dialog"]').on("submit",function(f){l._fireBeforeClose(this.returnValue)?l._markClosing():f.preventDefault()}),e.append!==!1&&T.appendTo("body"),o.closable!==!1){let f="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2IDE2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzA1NTY2Njt9PC9zdHlsZT48cmVjdCB4PSIzLjEiIHk9IjEiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjciIGhlaWdodD0iMSIvPjxyZWN0IHg9IjIuMSIgeT0iMi4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMSIgeT0iMy4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIxIiB5PSIxMS4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIyLjEiIHk9IjEyLjkiIGNsYXNzPSJzdDAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIzLjEiIHk9IjEzLjkiIGNsYXNzPSJzdDAiIHdpZHRoPSIxLjciIGhlaWdodD0iMSIvPjxnPjxyZWN0IHg9IjQuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjYuMyIgaGVpZ2h0PSIxIi8+PC9nPjxyZWN0IHg9IjQuOSIgeT0iMTUiIGNsYXNzPSJzdDAiIHdpZHRoPSI2LjMiIGhlaWdodD0iMSIvPjxyZWN0IHk9IjQuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjEiIGhlaWdodD0iNi4zIi8+PHJlY3QgeD0iMTEuMSIgeT0iMSIgY2xhc3M9InN0MCIgd2lkdGg9IjEuNyIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTIuOSIgeT0iMi4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTMuOSIgeT0iMy4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIxMy45IiB5PSIxMS4xIiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxLjciLz48cmVjdCB4PSIxMi45IiB5PSIxMi45IiBjbGFzcz0ic3QwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTEuMSIgeT0iMTMuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjEuNyIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTUiIHk9IjQuOSIgY2xhc3M9InN0MCIgd2lkdGg9IjEiIGhlaWdodD0iNi4zIi8+PHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI5LjcsMy44IDkuNyw0LjkgOC43LDQuOSA4LjcsNS45IDcuMyw1LjkgNy4zLDQuOSA2LjMsNC45IDYuMywzLjggMy44LDMuOCAzLjgsNS4yIDQuOSw1LjIgNC45LDYuMyA1LjksNi4zIDUuOSw3LjMgNyw3LjMgNyw4LjMgNS45LDguMyA1LjksOS40IDQuOSw5LjQgNC45LDEwLjQgMy44LDEwLjQgMy44LDEwLjggMy44LDExLjggNi4zLDExLjggNi4zLDEwLjggNy4zLDEwLjggNy4zLDkuNyA4LjcsOS43IDguNywxMC44IDkuNywxMC44IDkuNywxMS44IDEyLjIsMTEuOCAxMi4yLDEwLjQgMTEuMSwxMC40IDExLjEsOS40IDEwLjEsOS40IDEwLjEsOC4zIDksOC4zIDksNy4zIDEwLjEsNy4zIDEwLjEsNi4zIDExLjEsNi4zIDExLjEsNS4yIDEyLjIsNS4yIDEyLjIsNC45IDEyLjIsMy44ICIvPjwvc3ZnPg==",x="",h={},b=o.closeButton||d.closeButton;b!=null&&typeof b=="object"&&(f=b.image||f,x=b.className||x,h=b.style||h);let O=a("").attr({src:f,alt:""}),C=a("").addClass("dialogify__close").attr({role:"button",tabindex:0,"aria-label":I().close}).css(h).append(O).on("click",function(){m(i,"cancel")&&l.close()}).on("keydown",function(_){(_.key=="Enter"||_.key==" "||_.key=="Spacebar")&&(_.preventDefault(),a(this).trigger("click"))});x&&C.addClass(x),a(i).append(C)}let p=o.dialog||d.dialog;if(p!=null&&typeof p=="object"){a(i).css(p.style||{}),p.className&&a(i).addClass(p.className);let f=a(i).find(".dialogify__content");f.css(p.contentStyle||{}),p.contentClassName&&f.addClass(p.contentClassName)}if(this.$content=a(i).find(".dialogify__content > div"),u?this.$content.append(a("
").addClass("dialogify__body").append(u)):this.$content.append(c),this.$body=this.$content.find(".dialogify__body"),this.$form=a(i).find('form[method="dialog"]'),g){let f=t,x=o.ajaxData||{};try{let h=new URL(t,window.location.href);Object.keys(x).forEach(function(b){h.searchParams.append(b,x[b])}),f=h.toString()}catch{}window.fetch(f,{headers:{"X-Requested-With":"XMLHttpRequest"}}).then(function(h){return h.text()}).then(function(h){o.ajaxComplete&&o.ajaxComplete.call(l),l.$content.find(".dialogify-ajax-content").html(h)})}this.dialog=i,window.ResizeObserver&&!a(i).is(".dialogify--drawer, .dialogify--toast")&&(this._resizeObserver=new window.ResizeObserver(function(){a(i).is(".dialogify--popover")||F(i)}),this._resizeObserver.observe(i))}_fireBeforeClose(i){let t=a.Event("beforeclose");return t.returnValue=i,a(this).triggerHandler(t),m(this.dialog,"beforeclose",{returnValue:i})&&!t.isDefaultPrevented()}_resolveClosePromise(){if(this._closeResolver){let i=this._closeResolver;this._closeResolver=null,this._closePromise=null,i(this.dialog.returnValue)}}_openPromise(){let i=this;return a(this.dialog).removeClass("dialogify--closing"),this._closePromise||(this._closePromise=new Promise(function(t){i._closeResolver=t})),this._closePromise}showModal(){this.options.backgroundScroll===!1&&k();let i=this._openPromise();return M(this.dialog,"showModal"),m(this.dialog,"show"),a(this).triggerHandler("show"),i}show(){this.options.backgroundScroll===!1&&k();let i=this._openPromise();return M(this.dialog,"show"),m(this.dialog,"show"),a(this).triggerHandler("show"),i}showAt(i,t){let o=a(i);if(!o.length)return this.show();(t==null||typeof t!="object")&&(t={}),this._anchor=o[0],this._anchorOptions=t,a(this.dialog).addClass("dialogify--popover").removeClass("fixed");let e=this.show();this.reposition();let d=this;return this._anchorListener=function(){d.reposition()},window.addEventListener("scroll",this._anchorListener,!0),window.addEventListener("resize",this._anchorListener),this.options.closable!==!1&&(this._outsideListener=function(r){if(d.dialog.contains(r.target))return;let l=t.toggle!==!1&&d._anchor.contains(r.target);m(d.dialog,"cancel")&&(l&&(r.preventDefault(),r.stopImmediatePropagation()),d.close())},this._outsideTimer=window.setTimeout(function(){d._outsideListener&&window.document.addEventListener("click",d._outsideListener,!0)},0)),e}reposition(){if(!this._anchor||!this.dialog.open)return this;let i=this._anchorOptions||{},t=i.offset===void 0?8:i.offset,o=i.align||"start",e=this._anchor.getBoundingClientRect(),d=this.dialog.getBoundingClientRect(),r=window.innerWidth||0,l=window.innerHeight||0,c=i.placement||"bottom";c=="bottom"&&e.bottom+t+d.height>l?c="top":c=="top"&&e.top-t-d.height<0?c="bottom":c=="right"&&e.right+t+d.width>r?c="left":c=="left"&&e.left-t-d.width<0&&(c="right");let g,u;return c=="top"||c=="bottom"?(g=c=="bottom"?e.bottom+t:e.top-t-d.height,u=L(o,e.left,e.width,d.width)):(u=c=="right"?e.right+t:e.left-t-d.width,g=L(o,e.top,e.height,d.height)),u=P(u,0,Math.max(0,r-d.width)),g=P(g,0,Math.max(0,l-d.height)),a(this.dialog).attr("data-placement",c).css({position:"fixed",top:`${Math.round(g)}px`,left:`${Math.round(u)}px`,right:"auto",bottom:"auto",transform:"none",margin:0}),this}_teardownAnchor(){this._anchorListener&&(window.removeEventListener("scroll",this._anchorListener,!0),window.removeEventListener("resize",this._anchorListener),this._anchorListener=null),this._outsideTimer&&(window.clearTimeout(this._outsideTimer),this._outsideTimer=null),this._outsideListener&&(window.document.removeEventListener("click",this._outsideListener,!0),this._outsideListener=null),this._anchor=null}_markClosing(){this.dialog.open&&a(this.dialog).addClass("dialogify--closing")}close(i){return this._fireBeforeClose(i)?(this._markClosing(),M(this.dialog,"close",i===void 0?[]:[i]),this):this}isOpen(){return this.dialog.open}on(i,t){return a(this).on(i,t),this}off(i,t){return a(this).off(i,t),this}setContent(i){return i instanceof window.Node||i instanceof a?this.$body.empty().append(i):this.$body.html(i??""),this}getContent(){return this.$body.html()}load(i,t){let o=this,e=i;try{let d=new URL(i,window.location.href),r=t||{};Object.keys(r).forEach(function(l){d.searchParams.append(l,r[l])}),e=d.toString()}catch{}return this.setLoading(!0),window.fetch(e,{headers:{"X-Requested-With":"XMLHttpRequest"}}).then(function(d){return d.text()}).then(function(d){return o.setContent(d),o.setLoading(!1),o.options.ajaxComplete&&o.options.ajaxComplete.call(o),o}).catch(function(d){throw o.setLoading(!1),d})}setLoading(i){if(i===!1)return this.$content.find(".dialogify__loading").remove(),a(this.dialog).removeClass("is-loading"),this;if(!this.$content.find(".dialogify__loading").length){let t=typeof i=="string"?i:I().loading;this.$content.append(a("
").addClass("dialogify__loading").attr({role:"status","aria-live":"polite"}).append(a("").attr({src:J,alt:t}))),a(this.dialog).addClass("is-loading")}return this}isLoading(){return this.$content.find(".dialogify__loading").length>0}validate(){let i=this.$form[0];return!i||typeof i.reportValidity!="function"?!0:i.reportValidity()}formData(){let i=this.$form[0];return!i||typeof window.FormData!="function"?null:new window.FormData(i)}formValues(){let i=this.formData();if(!i)return{};let t={};return i.forEach(function(o,e){Object.prototype.hasOwnProperty.call(t,e)?(Array.isArray(t[e])||(t[e]=[t[e]]),t[e].push(o)):t[e]=o}),t}title(i){let t=`${this.id}_title`,o=a("
").addClass("dialogify_title").attr("id",t).append('').append(i);return this.$content.find(".dialogify_title").length?this.$content.find(".dialogify_title").replaceWith(o):this.$content.prepend(o),a(this.dialog).attr("aria-labelledby",t),this}_createButton(i,t){let o=this;if(typeof i=="string"){let d=a(i);return{id:d.attr("id")||t,$button:d}}(i==null||typeof i!="object")&&(i={});let e=a('