-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: rename native-modal => tiny-dialogue
- Loading branch information
1 parent
e0ccb2e
commit b8e4bb9
Showing
11 changed files
with
142 additions
and
141 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,28 @@ | ||
| { | ||
| "name": "native-modal", | ||
| "name": "tiny-dialogue", | ||
| "private": false, | ||
| "version": "0.0.9", | ||
| "description": "NativeModal - tiny wrapper over the <dialog />. No overhead scripts. Just modal.", | ||
| "description": "Dialogue - tiny wrapper over the <dialog />. No overhead scripts. Just dialog.", | ||
| "type": "module", | ||
| "author": "azabroflovski", | ||
| "license": "MIT", | ||
| "homepage": "https://azabroflovski.github.io/native-modal/", | ||
| "homepage": "https://azabroflovski.github.io/tiny-dialogue", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/azabroflovski/native-modal" | ||
| "url": "https://github.com/azabroflovski/tiny-dialogue" | ||
| }, | ||
| "bugs": { | ||
| "url": "https://github.com/azabroflovski/native-modal/issues", | ||
| "url": "https://github.com/azabroflovski/tiny-dialogue/issues", | ||
| "email": "[email protected]" | ||
| }, | ||
| "keywords": [ | ||
| "modal", | ||
| "modals", | ||
| "dialog", | ||
| "dialogs", | ||
| "tiny dialogue", | ||
| "tiny", | ||
| "dialogue", | ||
| "native-modal", | ||
| "native-dialog", | ||
| "native", | ||
|
|
||
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,105 +1 @@ | ||
| import './styles/main.css' | ||
| import './styles/default.css' | ||
| import { getDialogElement } from './helpers' | ||
|
|
||
| export function initNativeModal() { | ||
| // SSR FRIENDLY | ||
| if (typeof document === 'undefined' || typeof window === 'undefined') | ||
| return | ||
|
|
||
| function openDialog(dialog: HTMLDialogElement) { | ||
| if (dialog.hasAttribute('once')) { | ||
| if (!dialog.opened) { | ||
| dialog.showModal() | ||
| dialog.opened = true | ||
| } | ||
| } | ||
| else { | ||
| dialog.showModal() | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener('click', (event) => { | ||
| // The event.target property references the element that was clicked. | ||
| // The 'as Element' part casts the target to an Element type. | ||
| const target = event.target as Element | ||
|
|
||
| // Use the closest method to find the nearest ancestor of the clicked element | ||
| // (including the clicked element itself) that has the 'data-modal-open' attribute. | ||
| const openDialogElement = target.closest('[data-modal-open]') | ||
|
|
||
| // If an element with 'data-modal-open' was found... | ||
| if (openDialogElement) { | ||
| // Retrieve the value of the 'data-modal-open' attribute, which should correspond | ||
| // to the selector of the dialog to be opened. | ||
| const targetDialogSelector = openDialogElement?.getAttribute('data-modal-open') | ||
|
|
||
| // If the selector is not empty, use it to find and open the dialog. | ||
| if (targetDialogSelector) { | ||
| const dialog = getDialogElement(targetDialogSelector) | ||
|
|
||
| if (dialog.hasAttribute('once')) { | ||
|
|
||
| } | ||
|
|
||
| if (dialog.hasAttribute('show-delay')) { | ||
| setTimeout(() => { | ||
| openDialog(dialog) | ||
| }, +dialog.getAttribute('show-delay')!) | ||
| } | ||
| else { | ||
| openDialog(dialog) | ||
| } | ||
|
|
||
| if (dialog.hasAttribute('disable-esc')) { | ||
| dialog.addEventListener('keydown', (event) => { | ||
| if (event.key === 'Escape') | ||
| event.preventDefault() // Prevent the default action of closing the dialog | ||
| }) | ||
| } | ||
| } | ||
|
|
||
| return | ||
| } | ||
|
|
||
| // Similar to the previous block, but for closing dialogs. | ||
| // It finds the nearest ancestor element with the 'data-modal-close' attribute. | ||
| const closeDialogElement = target.closest('[data-modal-close]') | ||
| if (closeDialogElement) { | ||
| // Retrieve the value of the 'data-modal-close' attribute, which should correspond | ||
| // to the selector of the dialog to be closed. | ||
| const targetDialogSelector = closeDialogElement?.getAttribute('data-modal-close') | ||
|
|
||
| // If the selector is provided, use it to find and close the dialog. | ||
| if (targetDialogSelector) { | ||
| getDialogElement(targetDialogSelector).close() | ||
| } | ||
| else { | ||
| // If no specific dialog selector is provided, | ||
| // find the closest dialog element to the clicked element and close it. | ||
| const targetDialog = closeDialogElement.closest('dialog') | ||
|
|
||
| if (!targetDialog) | ||
| return | ||
|
|
||
| if (targetDialog.hasAttribute('animation')) { | ||
| targetDialog.setAttribute('close', '') | ||
| targetDialog.addEventListener('animationend', () => { | ||
| if (targetDialog.hasAttribute('close')) { | ||
| targetDialog.removeAttribute('close') | ||
| targetDialog.close() | ||
| } | ||
| }) | ||
| } | ||
| else { | ||
| targetDialog.close() | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| export class Modal { | ||
| constructor() { | ||
| } | ||
| } | ||
| export * from './plain.ts' |
Oops, something went wrong.