From 4b90b25bf5f28fc4cb31dfeb0bc300eeab05285d Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Mon, 11 Nov 2019 14:29:24 +0000 Subject: [PATCH] renaming service to simply 'notifications' --- addon/components/notification-container.js | 5 ++- addon/components/notification-message.js | 9 ++++-- ...n-messages-service.js => notifications.js} | 15 +++------ .../components/notification-container.hbs | 4 +-- app/initializers/notifications.js | 21 ------------- ...n-messages-service.js => notifications.js} | 2 +- tests/dummy/app/controllers/application.js | 2 +- tests/dummy/app/services/notifications.js | 5 --- tests/dummy/app/templates/application.hbs | 31 +++++++++++-------- .../components/notification-container-test.js | 2 +- tests/unit/services/notifications-test.js | 12 +++++++ 11 files changed, 51 insertions(+), 57 deletions(-) rename addon/services/{notification-messages-service.js => notifications.js} (91%) delete mode 100644 app/initializers/notifications.js rename app/services/{notification-messages-service.js => notifications.js} (71%) delete mode 100644 tests/dummy/app/services/notifications.js create mode 100644 tests/unit/services/notifications-test.js diff --git a/addon/components/notification-container.js b/addon/components/notification-container.js index 8660ca9c..ef51404c 100644 --- a/addon/components/notification-container.js +++ b/addon/components/notification-container.js @@ -1,11 +1,14 @@ import Component from '@ember/component'; import { computed } from '@ember/object'; import { htmlSafe } from '@ember/string'; +import { inject as service } from '@ember/service'; + import layout from '../templates/components/notification-container'; export default Component.extend({ - position: 'top', layout, + position: 'top', + notifications: service(), classNameBindings: ['computedPosition', ':ember-cli-notifications-notification__container'], attributeBindings: ['computedStyle:style', 'position:data-test-notification-container'], diff --git a/addon/components/notification-message.js b/addon/components/notification-message.js index fe713d59..fc69c6e0 100644 --- a/addon/components/notification-message.js +++ b/addon/components/notification-message.js @@ -1,12 +1,17 @@ -import { htmlSafe } from '@ember/string'; import Component from '@ember/component'; -import { computed } from '@ember/object'; import Ember from 'ember'; + +import { htmlSafe } from '@ember/string'; +import { computed } from '@ember/object'; +import { inject as service } from '@ember/service'; + import layout from '../templates/components/notification-message'; export default Component.extend({ layout, + notifications: service(), + classNameBindings: [ 'dismissClass', 'clickableClass', diff --git a/addon/services/notification-messages-service.js b/addon/services/notifications.js similarity index 91% rename from addon/services/notification-messages-service.js rename to addon/services/notifications.js index 7cfbf640..1ee3eaae 100644 --- a/addon/services/notification-messages-service.js +++ b/addon/services/notifications.js @@ -1,5 +1,5 @@ +import Service from '@ember/service'; import { assign, merge } from '@ember/polyfills'; -import ArrayProxy from '@ember/array/proxy'; import { A } from '@ember/array'; import { isEmpty } from '@ember/utils'; import EmberObject, { getWithDefault, set } from '@ember/object'; @@ -7,9 +7,10 @@ import { run } from '@ember/runloop'; import config from 'ember-get-config'; const notificationAssign = assign || merge; + const globals = config['ember-cli-notifications'] || {}; // Import app config object -const NotificationMessagesService = ArrayProxy.extend({ +export default Service.extend({ content: A(), // Method for adding a notification @@ -29,7 +30,7 @@ const NotificationMessagesService = ArrayProxy.extend({ cssClasses: options.cssClasses }); - this.pushObject(notification); + this.content.pushObject(notification); if (notification.autoClear) { notification.set('remaining', notification.get('clearDuration')); @@ -78,7 +79,7 @@ const NotificationMessagesService = ArrayProxy.extend({ // Delay removal from DOM for dismissal animation run.later(this, () => { - this.removeObject(notification); + this.content.removeObject(notification); }, 500); }, @@ -120,9 +121,3 @@ const NotificationMessagesService = ArrayProxy.extend({ set(globals, 'clearDuration', clearDuration); } }); - -NotificationMessagesService.reopenClass({ - isServiceFactory: true -}); - -export default NotificationMessagesService; diff --git a/addon/templates/components/notification-container.hbs b/addon/templates/components/notification-container.hbs index dba5ddfd..54accc4a 100644 --- a/addon/templates/components/notification-container.hbs +++ b/addon/templates/components/notification-container.hbs @@ -1,3 +1,3 @@ -{{#each notifications as |notification|}} +{{#each notifications.content as |notification|}} {{notification-message notification=notification}} -{{/each}} +{{/each}} \ No newline at end of file diff --git a/app/initializers/notifications.js b/app/initializers/notifications.js deleted file mode 100644 index 5978cba7..00000000 --- a/app/initializers/notifications.js +++ /dev/null @@ -1,21 +0,0 @@ -import Service from '@ember/service'; -import NotificationMessagesService from 'ember-cli-notifications/services/notification-messages-service'; - -export default { - name: 'notification-messages-service', - - initialize() { - let application = arguments[1] || arguments[0]; - if (Service) { - application.register('service:notification-messages', NotificationMessagesService); - application.inject('component:notification-container', 'notifications', 'service:notification-messages'); - application.inject('component:notification-message', 'notifications', 'service:notification-messages'); - return; - } - application.register('notification-messages:service', NotificationMessagesService); - - ['controller', 'component', 'route', 'router', 'service'].forEach(injectionTarget => { - application.inject(injectionTarget, 'notifications', 'notification-messages:service'); - }); - } -}; diff --git a/app/services/notification-messages-service.js b/app/services/notifications.js similarity index 71% rename from app/services/notification-messages-service.js rename to app/services/notifications.js index c1dafe93..f05ffedc 100644 --- a/app/services/notification-messages-service.js +++ b/app/services/notifications.js @@ -1 +1 @@ -export { default } from 'ember-cli-notifications/services/notification-messages-service'; +export { default } from 'ember-cli-notifications/services/notifications'; diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index 665465ae..6d91c142 100644 --- a/tests/dummy/app/controllers/application.js +++ b/tests/dummy/app/controllers/application.js @@ -15,7 +15,7 @@ export default Controller.extend({ clearAll: true, cssClasses: 'profile-saved-success-notification', - notifications: service('notification-messages'), + notifications: service(), disableTimeoutInput: not('autoClear'), diff --git a/tests/dummy/app/services/notifications.js b/tests/dummy/app/services/notifications.js deleted file mode 100644 index b0ad660a..00000000 --- a/tests/dummy/app/services/notifications.js +++ /dev/null @@ -1,5 +0,0 @@ -import NotificationsService from 'ember-cli-notifications/services/notification-messages-service'; - -export default NotificationsService.extend({ - // Extend the imported service -}); diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 59c27a3b..6122554f 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -30,7 +30,12 @@ {{notification-container position="top-right" zindex="9999"}}

Inject the notifications service where required.

- + import Controller from '@ember/controller'; +import { inject as service } from '@ember/service'; + +export default Controller.extend({ + notifications: service(), +});

Or inject it everywhere with an initializer.

// app/initializers/inject-notifications.js @@ -49,22 +54,22 @@ export default {

There are four styles of notification available.

Default value is info

// Info -this.get('notifications').info('You have one unread message'); +this.notifications.info('You have one unread message'); // Error -this.get('notifications').error('Something went wrong'); +this.notifications.error('Something went wrong'); // Success -this.get('notifications').success('Saved successfully!'); +this.notifications.success('Saved successfully!'); // Warning -this.get('notifications').warning('You have unsaved changes'); +this.notifications.warning('You have unsaved changes');

htmlContent

You can enable basic HTML markup for notification messages.

Warning: This introduces a potential security risk since the notification message will no longer be escaped by Ember.

-this.get('notifications').info('You have <b>one</b> unread message', { +this.notifications.info('You have <b>one</b> unread message', { htmlContent: true }); @@ -140,7 +145,7 @@ this.get('notifications').warning('You have unsaved changes');

Set a notification to automatically clear. This will take precedence over the global default value.

If true, inherits the default clearDuration value unless specified.

Default value is false

-this.get('notifications').success('Saved successfully!', { +this.notifications.success('Saved successfully!', { autoClear: true }); @@ -148,7 +153,7 @@ this.get('notifications').warning('You have unsaved changes');

clearDuration

Specify a duration (ms) before the notification clears. This will take precedence over the global default value.

Default value is 3200

-this.get('notifications').success('Saved successfully!', { +this.notifications.success('Saved successfully!', { autoClear: true, clearDuration: 1200 }); @@ -156,7 +161,7 @@ this.get('notifications').warning('You have unsaved changes');

clearAll

You can remove all present notifications before adding a new one.

-this.get('notifications').clearAll().success('Saved successfully!', { +this.notifications.clearAll().success('Saved successfully!', { autoClear: true }); @@ -185,7 +190,7 @@ this.get('notifications').warning('You have unsaved changes');

Notification with custom CSS

Pass a string of CSS classes to the notification component.

-this.get('notifications').success('Saved successfully!', { +this.notifications.success('Saved successfully!', { autoClear: true, cssClasses: 'profile-saved-success-notification' }); @@ -195,7 +200,7 @@ this.get('notifications').warning('You have unsaved changes');

Notification with callback

Add the ability to click the notification for a callback.

-this.get('notifications').error('Something went wrong. Click to try again', { +this.notifications.error('Something went wrong. Click to try again', { onClick: (notification) => { this.get('model').save(); } @@ -220,9 +225,9 @@ var ENV = {

Extend

-

The notification-messages-service service can be imported into the consuming app and extended.

+

The notifications service can be imported into the consuming app and extended.

// app/services/notifications.js -import NotificationsService from 'ember-cli-notifications/services/notification-messages-service'; +import NotificationsService from 'ember-cli-notifications/services/notifications'; export default NotificationsService.extend({ // Extend the imported service diff --git a/tests/integration/components/notification-container-test.js b/tests/integration/components/notification-container-test.js index 59c895f4..276b41d1 100644 --- a/tests/integration/components/notification-container-test.js +++ b/tests/integration/components/notification-container-test.js @@ -7,7 +7,7 @@ module('Integration | Component | notification container', function(hooks) { setupRenderingTest(hooks); test('it renders', async function(assert) { - let notificationMessages = this.owner.lookup('service:notification-messages-service'); + let notificationMessages = this.owner.lookup('service:notifications'); // fix strange setup bug notificationMessages.clearAll(); diff --git a/tests/unit/services/notifications-test.js b/tests/unit/services/notifications-test.js new file mode 100644 index 00000000..73d15516 --- /dev/null +++ b/tests/unit/services/notifications-test.js @@ -0,0 +1,12 @@ +import { module, test } from 'qunit'; +import { setupTest } from 'ember-qunit'; + +module('Unit | Service | notifications', function(hooks) { + setupTest(hooks); + + // Replace this with your real tests. + test('it exists', function(assert) { + let service = this.owner.lookup('service:notifications'); + assert.ok(service); + }); +});