Repository navigation
Feat/dialogify enhancements - #25
Merged
Merged
Conversation
adds a customized built-in element so a lightbox can be written in html,
while keeping every existing feature and api untouched.
- split src/js/dialogify.js into core.js (class) + element.js (element)
and a thin dialogify.js entry that registers the element
- the element name is prefixed because custom element names must contain
a hyphen, so is="dialogify" is not valid
- dialogify methods (show/showModal/isOpen/setTitle/buttons/on) live on
the element returned by document.querySelector()
- options via attributes: dialog-title, size, closable, fixed,
background-scroll, use-dialog-form, src, ajax-prefix, buttons-position
and options='{...}' for anything else
- declarative buttons via <button ok|cancel|close|primary|danger>,
rendered into the same markup buttons() produces
- events via addEventListener, on* properties, or onshow="handlerName";
names resolve from Dialogify.handlers then window at dispatch time,
so no string is ever evaluated by dialogify
- content nodes are moved rather than re-parsed, keeping listeners bound
before upgrade, and declarative dialogs are not removed on close so
they can be reopened (new autoRemove option)
- setTitle() instead of title(), since HTMLElement.title is the native
tooltip property
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
accessibility: aria-labelledby from title(), keyboard-focusable close button with a label, role=status on loading and toasts, aria-busy on loading buttons and prefers-reduced-motion support. open dialogs are no longer write-once: setContent()/load() swap the body, setLoading() overlays a spinner, and addButton()/updateButton()/ removeButton() manage buttons one at a time. declarative buttons now join $buttonList so markup and script can drive the same button. show()/showModal() return a promise that resolves with returnValue, and a cancelable beforeclose event covers every close path including the native form submit that otherwise bypasses javascript entirely. validate()/formValues()/formData() build on the existing dialog form. new presentations: position turns a dialog into an edge drawer, Dialogify.toast() shows stacking auto-dismissing notifications, and showAt() anchors a dialog to an element with viewport flipping and follow-on-scroll. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
the blurry-render ResizeObserver hack read the current computed transform and wrote it back as an inline style. for a drawer it fired during the slide-in and pinned translateX(100%), leaving only the backdrop visible. it is only meaningful for centred dialogs, so drawers and toasts no longer register the observer and popovers skip it in the callback. a click on the dialog element itself was treated as a backdrop click, so clicking empty space inside a drawer closed it. backdrop detection now also requires the pointer to fall outside the dialog's box. - add an optional @ungap/custom-elements bundle so safari can upgrade <dialog is="bahamut-dialogify">, exposed as ./custom-elements - give drawers, toasts and popovers paired enter/exit animations, held in the dom by a dialogify--closing class until they finish and skipped under prefers-reduced-motion - dismiss an anchored popover on any click outside it, including its trigger - drop the 40px content floor and stray scroll bars from toasts and popovers Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
clicking the element that opened a popover closed it and then let the click reach the trigger, which opened a fresh one. the two exit and enter animations overlapped in the same spot and read as a double flash. the outside-click listener now swallows a click on its own anchor, so that click only toggles the popover shut. a click on a different trigger is left alone and still closes this popover before opening its own. pass toggle: false to opt out. the toast position constants the demo and docs referred to never existed, so Dialogify.TOAST_BOTTOM_CENTER was undefined and every toast silently fell back to the top-right corner. three toasts with staggered durations therefore faded out over each other in one corner. define all six. a closing toast also held its slot for the length of the exit animation and the stack below it jumped when it was finally removed. collapse its height in step with the fade so the rest slide up. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…-animation flash Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR bumps dialogify to v2.2.0 and significantly expands the library’s UI and API capabilities (drawers, toasts, anchored popovers, loading/content updates, and richer form/button APIs), while adding a declarative <dialog is="bahamut-dialogify"> custom-element integration (with an optional Safari/WebKit polyfill), plus updated docs, styles, typings, and test coverage.
Changes:
- Added/expanded features around open-dialog lifecycle (promise-returning
show/showModal, cancelablebeforeclose, exit animations, loading/content updates, drawers/toasts/popovers). - Introduced/packaged a customized built-in element (
<dialog is="bahamut-dialogify">) and an optional@ungap/custom-elementsbundle for WebKit. - Updated documentation/demo site assets and TypeScript declarations; added extensive Vitest coverage.
Reviewed changes
Copilot reviewed 12 out of 27 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| test/features.test.js | New end-to-end-ish unit tests covering new runtime features (a11y, promises, beforeclose, loading, buttons, toast, popover, backdrop click, exit animation). |
| test/element.test.js | New tests validating customized built-in element upgrade, attribute options, declarative buttons, and event handler resolution. |
| src/scss/dialogify.scss | Added styling for loading overlay, loading buttons, drawer/popover/toast variants, exit animations, and reduced-motion handling. |
| src/js/element.js | Implements the customized built-in <dialog is="bahamut-dialogify"> wrapper and declarative behavior. |
| src/js/dialogify.js | Refactors entrypoint to re-export core, define the element, and expose element helpers/constants. |
| src/js/custom-elements.browser.js | New optional polyfill entry (bundles @ungap/custom-elements) for WebKit customized built-ins. |
| src/css/dialogify.css | Regenerated compiled CSS including new variants/animations/loading styles. |
| README.md | Documents new APIs and declarative usage, including drawers/toasts/popovers and accessibility notes. |
| package.json | Version bump to 2.2.0; adds export for ./custom-elements; adds @ungap/custom-elements dev dependency. |
| package-lock.json | Lockfile update for 2.2.0 and @ungap/custom-elements. |
| docs/js/custom-elements.min.js | Bundled/minified customized built-ins polyfill for the demo site. |
| docs/index.html | Demo site docs expanded for declarative dialogs, toast, drawer, popover, beforeclose/loading/forms updates. |
| docs/css/dialogify.css | Demo site CSS updated to match new compiled styles. |
| dist/dialogify.d.ts | Updated public TypeScript declarations for the expanded API surface. |
| dist/dialogify.css | Published compiled CSS updated for the new UI variants and animations. |
| dist/custom-elements.min.js.map | Sourcemap artifact for the bundled customized built-ins polyfill. |
| dist/custom-elements.min.js | Published bundled/minified customized built-ins polyfill. |
| CHANGELOG.md | Adds 2.2.0 release notes enumerating the new capabilities and fixes. |
| build.mjs | Adds build step for the custom-elements bundle and copies it into the docs site. |
Files not reviewed (2)
- docs/css/dialogify.css: Generated file
- src/css/dialogify.css: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
無 onClose 可設定，另外加上 title Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.