{"id":19356886,"url":"https://github.com/alexfigliolia/modal-stack","last_synced_at":"2025-04-23T10:33:03.671Z","repository":{"id":251678634,"uuid":"838116578","full_name":"alexfigliolia/modal-stack","owner":"alexfigliolia","description":"A stack utility for managing open dialogs","archived":false,"fork":false,"pushed_at":"2025-01-13T19:17:12.000Z","size":326,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T15:17:00.698Z","etag":null,"topics":["dialogs","modals","notifications","stack","toasts"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@figliolia/modal-stack","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexfigliolia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-05T01:21:01.000Z","updated_at":"2025-01-13T19:17:16.000Z","dependencies_parsed_at":"2024-08-07T18:17:44.955Z","dependency_job_id":"caa4af70-3427-43dd-a5e5-e62ef8a76347","html_url":"https://github.com/alexfigliolia/modal-stack","commit_stats":null,"previous_names":["alexfigliolia/modal-stack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmodal-stack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmodal-stack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmodal-stack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexfigliolia%2Fmodal-stack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexfigliolia","download_url":"https://codeload.github.com/alexfigliolia/modal-stack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250416900,"owners_count":21427085,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dialogs","modals","notifications","stack","toasts"],"created_at":"2024-11-10T07:05:45.881Z","updated_at":"2025-04-23T10:32:58.660Z","avatar_url":"https://github.com/alexfigliolia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modal Stack\nA stack utility for managing open dialogs. Modals, toasts, drawer menus, and notifications have long-been an integral part of UI design, but few utilities exist for managing these views when they begin to overlap.\n\nThis tool aims to help developers manage overlapping UI views that user's can escape from either by clicking outside or tapping the escape key.\n\n## Installation\n```bash\nnpm i @figliolia/modal-stack\n# or\nyarn add @figliolia/modal-stack\n```\n\n## Basic Usage \nTo begin using the modal stack to manage dialog-like UI elements create a `ModalStack` instance:\n```typescript\n// ModalStack.ts\n\nimport { ModalStack } from \"@figliolia/modal-stack\";\n\nconst Stack = new ModalStack();\n```\nNext, create `ModalToggle`'s for opening and closing your various UI dialogs:\n```typescript\n// Notification.ts\n\nimport { Stack } from \"./ModalStack\";\n\nconst show = (msg: string) =\u003e {\n  const node = document.getElementById(\"notification\");\n  node.textContent = msg;\n  node.style.display = \"block\";\n}\n\nconst hide = () =\u003e {\n  const node = document.getElementById(\"notification\");\n  node.textContent = \"\";\n  node.style.display = \"none\"\n}\n\nconst NotificationToggle = Stack.create(show, hide);\n\n// To open your notification and add an entry onto the modal stack\nNotificationToggle.open(\"Notification Message\");\n\n// If the user taps the escape key, your hide function will be called. When there are multiple entries or notifications on the stack, only the hide function for the top-most entry will be called each time the escape key is pressed\n\n// To manually close the notification and clean up its entry on the stack\nNotificationToggle.close();\n```\n\n## Cleaning Up\nWhen user leaves a part of your app that contains open dialog UI's, it's usually pertantent to close each of the open dialogs before transitioning to a different part of your application. To do so, you can invoke the `cleanUp()` method on your `ModalStack` instance:\n\n```typescript\nimport { ModalStack } from \"@figliolia/modal-stack\";\n\nconst Stack = new ModalStack();\n\n// To close all open dialogs\nStack.closeAll();\n```\n\n## API\n#### `ModalStack.push()`\nAdds a callback to the top of the stack. This callback will be invoked if the user presses the escape key, or if `ModalStack.pop()` is manually invoked\n```typescript\nModalStack.push(callback: () =\u003e void);\n```\n\n#### `ModalStack.pop()`\nRemoves the callback at the top of the stack and invokes it\n```typescript\nModalStack.pop();\n```\n#### `ModalStack.create()`\nCreates a `ModalToggle` instance. The `ModalToggle` exposes open and close methods that will automatically add or remove the associated UI from the stack\n```typescript\nconst Toggle = ModalStack.create(\n  (...args: any[]) =\u003e {\n    // Open your UI dialog\n  }, \n  () = {\n    // Close UI dialog\n  }\n);\n// To open the UI and add an entry on the to the stack\nToggle.open() \n\n// To close the UI and remove its entry from the stack\nToggle.close() \n```\n\n#### `ModalStack.closeAll()`\nCloses all open dialogs and removes them from the stack\n```typescript\nModalStack.closeAll()\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Fmodal-stack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexfigliolia%2Fmodal-stack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexfigliolia%2Fmodal-stack/lists"}