{"id":25961690,"url":"https://github.com/ttab/notr","last_synced_at":"2025-06-20T16:34:06.514Z","repository":{"id":33617374,"uuid":"37269605","full_name":"ttab/notr","owner":"ttab","description":"Extremely simple notifications","archived":false,"fork":false,"pushed_at":"2015-06-16T14:00:09.000Z","size":152,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-05T01:30:35.944Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CoffeeScript","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/ttab.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}},"created_at":"2015-06-11T15:30:25.000Z","updated_at":"2023-03-15T18:11:09.000Z","dependencies_parsed_at":"2022-08-17T19:30:31.394Z","dependency_job_id":null,"html_url":"https://github.com/ttab/notr","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/ttab/notr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Fnotr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Fnotr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Fnotr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Fnotr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ttab","download_url":"https://codeload.github.com/ttab/notr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ttab%2Fnotr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259558274,"owners_count":22876463,"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":[],"created_at":"2025-03-04T19:41:00.392Z","updated_at":"2025-06-20T16:34:01.493Z","avatar_url":"https://github.com/ttab.png","language":"CoffeeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"notr\n====\n\n## Motivation\n\nThere are a ton of complicated notification frameworks out there. What I need is:\n\n* Simple (no need for different animations)\n* Simple (no jQuery)\n* Simple (no built in icons)\n* Simple (reasonable defaults)\n\n## Compatibility\n\n* IE9+, FF, Chrome, Safari, iOS5+, Android\n\nNote that the transition effect may not work devices not supporting\nthe `transition` CSS style.\n\n## Installing with NPM\n\n```bash\nnpm install -S notr\n```\n\n### Installing with Bower\n\n```bash\nbower install -S notr\n```\n\n## Usage\n\nRequire it\n\n```coffee\nnotr = require('notr')\n```\n\nSimple message, shows for 4 seconds.\n\n```coffee\nnotr('Hello \u003cb\u003eWorld!\u003c/b\u003e')\n```\n\nComplicated message, stays until clicked.\n\n```coffee\nnotr({\n    html: 'Hello \u003cb\u003eWorld!\u003c/b\u003e'\n    stay: 0\n})\n```\n\nHide message manually.\n\n```coffee\nel = notr({\n    html: 'Hello \u003cb\u003eWorld!\u003c/b\u003e'\n    stay: 0\n})\n\n... # sometime later\n\nel.hide() # div is extended with hide function\n```\n\nCallback on hide\n\n```javascript\nnotr('Hello \u003cb\u003eWorld!\u003c/b\u003e', function() {\n    console.log('it closed');\n});\n```\n\nChange content of existing\n\n```\nnotr({\n    html: 'Hello \u003cb\u003eWorld!\u003c/b\u003e'\n    id: 'myhello'\n})\n\n... # sometime later\n\nnotr({\n    html: 'Goodbye cruel world!'\n    id: 'myhello'\n})\n```\n\n## API\n\n#### notr(html, callback)\n\nShort form, equivalent to `el = notr({html:html, callback:callback})`\n\n#### notr(opts)\n\nShow a notification with possible options. Returns the `\u003cdiv\u003e` element.\n\nargs        | desc\n:---------- | :-----------------\n`html`      | Text `.innerHTML` of the notification `\u003cdiv\u003e`.\n`className` | `.className` of `\u003cdiv\u003e` in addition to `\"notr\"`. Default `\"alert alert-info\"`\n`stack`     | Stack to place the notification in. See `notr.defineStack()`. Default `\"def\"`\n`stay`      | Milliseconds to stay on screen. 0 to stay forever. Default 4000\n`id`        | Id to change content/settings of notification on subsequent calls. Default `null`\n`onclick`   | Click handler. Default `null` which hides the `\u003cdiv\u003e`\n`callback`  | Callback when notification is about to hide.\n\nReturns `\u003cdiv\u003e` extended with a `.hide()` function.\n\n#### notr.defineStack(name, parent, styles)\n\nTo define a stack on screen where notifications appear. The default\n(which can be changed) is:\n\n```coffee\nnotr.defineStack('def', 'body', {top:'65px', right:'15px'})\n```\n\nargs        | desc\n:---------- | :-----------------\n`name`      | Name of the stack. The default notification stack is `\"def\"`\n`parent`    | `document.querySelector` or element of where to `.appendChild` the stack.\n`styles`    | `el.style` styles to define for the stack.\n\n#### Default CSS styles\n\nThe notr default styles can be altered by overriding the default `.notr` css rule.\n\nHowever. Notr uses the `margin-top` and `opacity` css style to do the\ntransition animation. It's probably a bad idea to alter this value.\n\n```css\n.notr {\n    margin-top: 0; // do not change margin-top\n    opacity: 1.0;  // do not change opacity\n    float: left;   // probably a bad idea to change\n    clear: both;   // probably a bad idea to change\n    transition: margin-top 0.2s, opacity 0.2s;\n\n    min-width: 270px;\n    min-height: 50px;\n    margin-bottom: 3px;\n    background: white;\n    border: 1px solid #999;\n    padding: 5px;\n    box-shadow: 0 0 3px rgba(0,0,0,0.4);\n    cursor: pointer;\n}\n.notrstack {\n    position: fixed;\n    min-width: 270px;\n    min-height: 50px;\n    z-index: 9000;\n}\n```\n\n#### Events\n\nSome DOM events that are dispatched on the returned `\u003cdiv\u003e`.\n\nevent             | desc\n:---------------- | :-----------------\n`notr:beforeshow` | Before showing.\n`notr:show`       | When showing.\n`notr:beforehide` | Before hiding. Just before `opts.callback`.\n`notr:hide`       | After hiding.\n\nExample\n\n```javascript\nel = notr('Hi there')\nel.addEventListener('notr:show', function() {\n    console.log('here we go');\n});\n```\n\nLicense\n-------\n\nThe MIT License (MIT)\n\nCopyright © 2015 TT Nyhetsbyrån\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttab%2Fnotr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fttab%2Fnotr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fttab%2Fnotr/lists"}