-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: .element is deprecated for similar .render
- Loading branch information
Showing
5 changed files
with
94 additions
and
98 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| var main = require('./main') | ||
| var Notifications = require('./main') | ||
| var style = require('./style') | ||
| var insertCss = require('insert-css') | ||
|
|
||
| module.exports = function (opts) { | ||
| insertCss(style) | ||
| return main(opts) | ||
| return new Notifications(opts) | ||
| } |
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,104 +1,91 @@ | ||
| var yo = require('yo-yo') | ||
| var defaults = require('lodash.defaults') | ||
| var Nanocomponent = require('nanocomponent') | ||
| var html = require('nanohtml') | ||
|
|
||
| module.exports = function (opts) { | ||
| opts = opts || {} | ||
| class Notifications extends Nanocomponent { | ||
| constructor (opts) { | ||
| opts = opts || {} | ||
| super() | ||
|
|
||
| opts.icons = defaults(opts.icons, { | ||
| error: 'octicon octicon-flame', | ||
| warning: 'octicon octicon-alert', | ||
| info: 'octicon octicon-info', | ||
| success: 'octicon octicon-check', | ||
| close: 'octicon octicon-x' | ||
| }) | ||
| this.repo = opts.repo | ||
| this.icons = Object.assign({ | ||
| error: 'octicon octicon-flame', | ||
| warning: 'octicon octicon-alert', | ||
| info: 'octicon octicon-info', | ||
| success: 'octicon octicon-check', | ||
| close: 'octicon octicon-x' | ||
| }, opts.icons) | ||
|
|
||
| var notifications = [] | ||
| var tree | ||
|
|
||
| return { | ||
| element: element, | ||
| render: render, | ||
| add: add, | ||
| error: error, | ||
| info: info, | ||
| warning: warning, | ||
| success: success, | ||
| state: notifications, | ||
| options: opts | ||
| } | ||
|
|
||
| function add (notification) { | ||
| if (typeof notification === 'string') notification = {message: notification} | ||
| notifications.push(notification) | ||
| update() | ||
| } | ||
|
|
||
| function error (message) { | ||
| add({type: 'error', message: message}) | ||
| } | ||
|
|
||
| function info (message) { | ||
| add({type: 'info', message: message}) | ||
| this.getMessageBody = this.getMessageBody.bind(this) | ||
| this.notifications = [] | ||
| } | ||
|
|
||
| function warning (message) { | ||
| add({type: 'warning', message: message}) | ||
| add (notification) { | ||
| this.notifications.push(notification) | ||
| this.rerender() | ||
| } | ||
|
|
||
| function success (message) { | ||
| add({type: 'success', message: message}) | ||
| info (text) { | ||
| this.add({type: 'info', message: text}) | ||
| } | ||
|
|
||
| function element () { | ||
| tree = render() | ||
| return tree | ||
| error (text) { | ||
| this.add({type: 'error', message: text}) | ||
| } | ||
|
|
||
| function update () { | ||
| yo.update(tree, render()) | ||
| warning (text) { | ||
| this.add({type: 'warning', message: text}) | ||
| } | ||
|
|
||
| function render () { | ||
| return yo` | ||
| <div class="notification-container"> | ||
| ${ | ||
| notifications | ||
| .map(function (notification) { | ||
| var classNames = [ | ||
| 'notification', | ||
| notification.closed ? 'notification-hidden' : 'notification-show', | ||
| 'notification-' + (notification.type || 'info') | ||
| ] | ||
| return yo` | ||
| <div class="${classNames.join(' ')}"> | ||
| <div class="notification-icon"> | ||
| <span> | ||
| <span class="${opts.icons[notification.type || 'info']}"></span> | ||
| </span> | ||
| </div> | ||
| ${getMessageBody(notification)} | ||
| <span onclick=${function () { notification.closed = true; update() }} class="notification-close" title="Dismiss this notification"> | ||
| <span class="${opts.icons.close}"></span> | ||
| </span> | ||
| </div>` | ||
| }) | ||
| } | ||
| </div>` | ||
| success (text) { | ||
| this.add({type: 'success', message: text}) | ||
| } | ||
|
|
||
| function getMessageBody (notification) { | ||
| getMessageBody (notification) { | ||
| if (notification.element) { | ||
| notification.element.className = 'notification-message' | ||
| return notification.element | ||
| } | ||
| if (opts.repo && notification.type === 'error') { | ||
| return yo` | ||
| if (this.repo && notification.type === 'error') { | ||
| return html` | ||
| <div class="notification-message"> | ||
| ${notification.message}<br> | ||
| <a href="${opts.repo}/issues/new?title=${encodeURI(notification.message)}" target="_blank" rel="noopener noreferrer" class="notification-btn">Create an issue for this error</a> | ||
| <a href="${this.repo}/issues/new?title=${encodeURI(notification.message)}" target="_blank" rel="noopener noreferrer" class="notification-btn">Create an issue for this error</a> | ||
| </div>` | ||
| } else { | ||
| return yo`<div class="notification-message">${notification.message}</div>` | ||
| return html`<div class="notification-message">${notification.message}</div>` | ||
| } | ||
| } | ||
|
|
||
| createElement (notifications) { | ||
| if (notifications) this.notifications = notifications | ||
| return html`<div class="notification-container">${ | ||
| notifications | ||
| .map((notification) => { | ||
| var classNames = [ | ||
| 'notification', | ||
| notification.closed ? 'notification-hidden' : 'notification-show', | ||
| 'notification-' + (notification.type || 'info') | ||
| ] | ||
| return html` | ||
| <div class="${classNames.join(' ')}"> | ||
| <div class="notification-icon"> | ||
| <span> | ||
| <span class="${this.icons[notification.type || 'info']}"></span> | ||
| </span> | ||
| </div> | ||
| ${this.getMessageBody(notification)} | ||
| <span onclick=${() => { notification.closed = true; this.rerender() }} class="notification-close" title="Dismiss this notification"> | ||
| <span class="${this.icons.close}"></span> | ||
| </span> | ||
| </div>` | ||
| }) | ||
| } | ||
| </div>` | ||
| } | ||
|
|
||
| update (notifications) { | ||
| return notifications !== this.notifications | ||
| } | ||
| } | ||
|
|
||
| module.exports = Notifications |
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