{"id":20525959,"url":"https://github.com/codeyellowbv/marionette-notifications","last_synced_at":"2025-07-14T01:04:05.281Z","repository":{"id":66356455,"uuid":"49733261","full_name":"CodeYellowBV/marionette-notifications","owner":"CodeYellowBV","description":"Show notifications in a Marionette region","archived":false,"fork":false,"pushed_at":"2016-08-01T10:51:51.000Z","size":22,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-01-16T11:26:54.129Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/CodeYellowBV.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":"2016-01-15T17:13:29.000Z","updated_at":"2016-08-15T13:10:34.000Z","dependencies_parsed_at":"2023-02-22T06:30:54.887Z","dependency_job_id":null,"html_url":"https://github.com/CodeYellowBV/marionette-notifications","commit_stats":{"total_commits":28,"total_committers":4,"mean_commits":7.0,"dds":0.1785714285714286,"last_synced_commit":"b0adde21ba6b442511c307a47e39a4f374801b0e"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmarionette-notifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmarionette-notifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmarionette-notifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmarionette-notifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeYellowBV","download_url":"https://codeload.github.com/CodeYellowBV/marionette-notifications/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242132936,"owners_count":20077092,"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":"2024-11-15T23:11:30.616Z","updated_at":"2025-03-06T01:36:03.784Z","avatar_url":"https://github.com/CodeYellowBV.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# marionette-notifications\nShows sexy notifications in a region.\n\nSome features:\n\n- When a notification is added that already has the same content as a notification that already exists, no notification is added.\n- A notification will disappear after 3 seconds. When hovering over a notification, it will not disappear.\n\nInstallation:\n\n```\n$ npm install marionette-notifications --save\n```\n\n## Usage\n\nFirst make sure you have `underscore`, `marionette` and `backbone` as a dependency.\n\nNow create a view where you listen to all events that need to trigger a notification (I will name it `view/notification.js`);\n\n```js\nvar Notification = require('marionette-notifications').CollectionView;\nvar vent = require('vent');\n\nmodule.exports = Notification.extend({\n    initialize: function () {\n        Notification.prototype.initialize.call(this);\n\n        // Listen to events here, e.g.:\n        this.listenTo(vent, 'user:delete', this.onUserDelete);\n    },\n    onUserDelete: function () {\n        // Let's create the notification, shall we?\n        this.info({\n            content: 'User is successfully deleted.'\n        });\n    }\n});\n```\n\nIn your template, create a div: `\u003cdiv id=\"_notifications\u003e\u003c/div\u003e`. Then add this as a region:\n\n```js\napp.addRegions({\n    notification: '#_notification'\n});\n```\n\nNow show the region:\n\n```js\napp.addInitializer(function () {\n    var VNotification = require('view/notification');\n\n    app.notification.show(new VNotification());\n});\n```\n\nFor now, no CSS is added. You can copy/paste this to use as a base:\n\n```scss\n.notifications {\n    position: absolute;\n    top: 20px;\n    z-index: 100;\n    width: 100%;\n    display: flex;\n    flex-flow: column wrap;\n    align-items: center;\n    pointer-events: none;\n}\n\n.notification {\n    max-width: 300px;\n    padding: 10px 40px 10px 14px;\n    color: #000;\n    background: #fbf9e4;\n    margin-bottom: 15px;\n    position: relative;\n    background-size: 20px 20px;\n    background-repeat: no-repeat;\n    background-position: 10px 10px;\n    pointer-events: all;\n\n    a {\n        text-decoration: underline;\n    }\n\n    \u0026.notification-error {\n        padding-left: 40px;\n        background-image: url('img/alert.svg');\n        color: #ba0000;\n\n        a {\n            color: #ba0000;\n        }\n    }\n\n    .action-small {\n        margin-left: 11px;\n        position: absolute;\n        top: 13px;\n        right: 7px;\n    }\n}\n```\n\n## Usage\n\n| __Option__  | __Description__ | __Type__  | __Default__ |\n| ---         | ---             | ---       | ---         |\n| `prependContent` | Add some text wrapped in `\u003cstrong\u003e` before `content`. | `string` | `null` |\n| `content` | Content of the notification. | `string` | `''` |\n| `type` | Type of the notification. Must be one of these: `error`, `info` or `success`. | `string` | `'info'` |\n| `closeAfter` | Close the popup after x ms. | `integer` | `3000` |\n| `linkText` | Add a link after the `content`. Can also be an array of text | `string || [string]` | `null` |\n| `link` | URL of the link. Can also be a callback. If a callback, the url will be set to `#`. Can also be an array of links or callbacks.| `mixed` | `null` |\n\nShortcuts for adding a notification:\n`this.info(options)`, `this.error(options)` and `this.success(options)`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fmarionette-notifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeyellowbv%2Fmarionette-notifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fmarionette-notifications/lists"}