{"id":18465134,"url":"https://github.com/avalynx/avalynx-alert","last_synced_at":"2025-04-08T08:31:45.176Z","repository":{"id":223672345,"uuid":"761134932","full_name":"avalynx/avalynx-alert","owner":"avalynx","description":"AvalynxAlert is a simple alert system for web applications. Based on Bootstrap \u003e=5.3 without any framework dependencies.","archived":false,"fork":false,"pushed_at":"2025-03-07T21:48:14.000Z","size":120,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T09:24:28.314Z","etag":null,"topics":["alert","avalynx","bootstrap","bootstrap5","component","notification","popup"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avalynx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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-02-21T09:57:36.000Z","updated_at":"2025-03-07T21:48:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"c195481b-40bf-4e25-9d66-ae6c5a86893f","html_url":"https://github.com/avalynx/avalynx-alert","commit_stats":null,"previous_names":["avalynx/avalynx-alert"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-alert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-alert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-alert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avalynx%2Favalynx-alert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avalynx","download_url":"https://codeload.github.com/avalynx/avalynx-alert/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247804538,"owners_count":20999008,"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":["alert","avalynx","bootstrap","bootstrap5","component","notification","popup"],"created_at":"2024-11-06T09:12:05.213Z","updated_at":"2025-04-08T08:31:45.170Z","avatar_url":"https://github.com/avalynx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AvalynxAlert\n\nAvalynxAlert is a lightweight, dependency-free alert system designed for web applications. It leverages Bootstrap (version 5.3 or higher) to provide a seamless integration with your project, offering a range of customizable alerts that can be positioned anywhere on the screen.\n\n## Features\n\n- **Customizable Alerts**: Supports various alert types like primary, secondary, success, danger, warning, info, light, and dark.\n- **Flexible Positioning**: Choose from predefined positions such as top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.\n- **Duration Control**: Set the duration for how long the alert should be displayed.\n- **Closeable Alerts**: Optionally allow users to close alerts.\n- **AutoClose Functionality**: Alerts can automatically disappear after a certain period.\n- **Easy to Use**: Simple API for creating and managing alerts within your web applications.\n\n## Example\n\nHere's a simple example of how to use AvalynxAlert in your project:\n\n* [Overview](https://avalynx-alert.jbs-newmedia.de/examples/index.html)\n* [Simple alert](https://avalynx-alert.jbs-newmedia.de/examples/simple-alert.html)\n* [Random alerts](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts.html)\n* [Callback on close](https://avalynx-alert.jbs-newmedia.de/examples/callback-onclose.html)\n* [Random alerts every 3 seconds](https://avalynx-alert.jbs-newmedia.de/examples/random-alerts-every-3s.html)\n\n## Installation\n\nTo use AvalynxAlert in your project, you can directly include it in your HTML file. Ensure you have Bootstrap 5.3 or higher included in your project for AvalynxAlert to work correctly.\n\nFirst, include Bootstrap:\n\n```html\n\u003c!-- Bootstrap --\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n```\n\nThen, include AvalynxAlert:\n\n```html\n\u003clink href=\"path/to/avalynx-alert.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"path/to/avalynx-alert.js\"\u003e\u003c/script\u003e\n```\n\nReplace `path/to/avalynx-alert.js` and `path/to/avalynx-alert.css` with the actual path to the files in your project.\n\n## Installation via jsDelivr ([Link](https://cdn.jsdelivr.net/npm/avalynx-alert/))\n\nAvalynxAlert is also available via [jsDelivr](https://www.jsdelivr.com/). You can include it in your project like this:\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/avalynx-alert@0.0.9/dist/css/avalynx-alert.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/avalynx-alert@0.0.9/dist/js/avalynx-alert.js\"\u003e\u003c/script\u003e\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.\n\n## Installation via NPM ([Link](https://www.npmjs.com/package/avalynx-alert))\n\nAvalynxAlert is also available as a npm package. You can add it to your project with the following command:\n\n```bash\nnpm install avalynx-alert\n```\n\nAfter installing, you can import AvalynxAlert into your JavaScript file like this:\n\n```javascript\nimport { AvalynxAlert } from 'avalynx-alert';\nimport 'avalynx-alert/dist/css/avalynx-alert.min.css';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.\n\n## Installation via Symfony AssetMapper\n\n```bash\nphp bin/console importmap:require avalynx-alert\n```\n\nAfter installing, you can import AvalynxAlert into your JavaScript file like this:\n\n```javascript\nimport { AvalynxAlert } from 'avalynx-alert';\nimport 'avalynx-alert/dist/css/avalynx-alert.min.css';\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.\n\n## Installation via Symfony AssetComposer\n\nMore information about the Symfony AssetComposer Bundle can be found [here](https://github.com/jbsnewmedia/asset-composer-bundle).\n\n```twig\n{% do addAssetComposer('avalynx/avalynx-alert/dist/css/avalynx-alert.css') %}\n{% do addAssetComposer('avalynx/avalynx-alert/dist/js/avalynx-alert.js') %}\n```\n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.\n\n## Installation via Composer ([Link](https://packagist.org/packages/avalynx/avalynx-alert))\n\nAvalynxAlert is also available as a Composer package. You can add it to your project with the following command:\n\n```bash\ncomposer require avalynx/avalynx-alert\n```\n\nAfter installing, you can import AvalynxAlert into your HTML file like this:\n\n```html\n\u003clink href=\"vendor/avalynx/avalynx-alert/dist/css/avalynx-alert.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"vendor/avalynx/avalynx-alert/dist/js/avalynx-alert.js\"\u003e\u003c/script\u003e\n``` \n\nMake sure to also include Bootstrap's JS/CSS in your project to ensure AvalynxAlert displays correctly.\n\n## Usage\n\nTo create an alert, simply instantiate a new `AvalynxAlert` object with the desired options:\n\n```javascript\nnew AvalynxAlert('Your message here', 'success', {\n  duration: 5000,\n  position: 'top-right',\n  closeable: true,\n  autoClose: true,\n  width: '400px'\n});\n```\n\n## Options\n\nAvalynxAlert allows the following options for customization:\n\n- `message`: (string) The message to display in the alert (default: `''`).\n- `type`: (string) The type of alert. One of (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`) (default: `'info'`).\n- `options`: An object containing the following keys:\n    - `duration`: (number) Duration in milliseconds for the alert to be displayed (default: `5000`).\n    - `position`: (string) Position of the alert on the screen. One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right` (default: `'top-right'`).\n    - `closeable`: (boolean) Whether the alert can be closed by the user (default: `true`).\n    - `autoClose`: (boolean) Whether the alert will close automatically after the duration (default: `true`).\n    - `width`: (string) The width of the alert (default: `400px`).\n    - `onClose`: (function) A callback function to execute when the alert is closed (default: `null`).\n\n## Contributing\n\nContributions are welcome! If you'd like to contribute, please fork the repository and submit a pull request with your changes or improvements. We're looking for contributions in the following areas:\n\n- Bug fixes\n- Feature enhancements\n- Documentation improvements\n\nBefore submitting your pull request, please ensure your changes are well-documented and follow the existing coding style of the project.\n\n## License\n\nAvalynxAlert is open-sourced software licensed under the [MIT license](LICENSE).\n\n## Contact\n\nIf you have any questions, feature requests, or issues, please open an issue on our [GitHub repository](https://github.com/avalynx/avalynx-alert/issues) or submit a pull request.\n\nThank you for considering AvalynxAlert for your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-alert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favalynx%2Favalynx-alert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favalynx%2Favalynx-alert/lists"}