Why not config in environment except for the fonts?

Maybe it's useful to have these configurable:

autoClear: true,
clearDuration: 3000,
successMessage: 'Something',
includeFontAwesome,
icons,
etc...

No?

A while ago, I tried to update ember to 2.7 and could not run my application locally anymore. I went back to 2.6 and hoped the issue would magically go away, but trying 2.8 now changes little.

The error message relates to broccoli processing ember-cli-notifications and includes the path "C:\C:\Users...", which may be the culprit. Removing this add-on makes 'ember s' succeed again, so I guess this is the better place to report this than the ember issue tracker.

Reproduction:
ember init
ember install ember-cli-notification
ember s

Result (the first line is ok and familiar):

Serving on http://localhost:4200/
The Broccoli Plugin: [CSSModules] failed with:
Error: ENOENT: no such file or directory, open 'C:\C:\Users\ABI\Code\ember-28-test\tmp\cssmodules-input_base_path-J7jK7ZXQ.tmp\0\modules\ember-cli-notifications\styles\globals.css'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.readFileSync (fs.js:397:15)
    at CSSModules.loadPath (C:\Users\ABI\Code\ember-28-test\node_modules\ember-cli-notifications\node_modules\ember-css-modules\node_modules\broccoli-css-modules\index.js:105:20)
...

Windows: 10 Pro
node: 4.4.7
npm: 3.10.8
ember-cli: 2.8.0

Hey guys, can we get a npm publish ? Thanks !

Where do i need to set a global default value in my application ?
For eg: Where do i set this ~ this.get('notifications').setDefaultAutoClear(true); ?

I npm the add-on, but I get the error that it can not find '/node_modules/broccoli-sass'. Does this add-on have dependancies?

If I am required to download broccoli-sass, can anyone point me in the right direction as to how to consume this add-on with it?

Any tutorial, blog posts, etc. would be great.
I am new to ember-cli, and appreciate the patience.

Thanks.

Hi is there a way to customize the location of the message ?

I'd like to globally change the clearDuration to 1200 for every notification in my app in one location. If you agree that this could be useful I could take a crack at submitting a PR for this. Thanks!

Release 0.3.3 https://github.com/salsify/ember-css-modules/commits/v0.3.3 has the necessary upgrade to get rid of the init() deprecation notice.

DEPRECATION: Overriding init without calling this._super is deprecated. Please call `this._super.init && this._super.init.apply(this, arguments);` addon: `ember-css-modules`
    at Function.Addon.lookup (/Users/rpanthak/git_workspace/ember-frost-modal/node_modules/ember-cli/lib/models/addon.js:896:27)

When i bumped to the latest version 4.0.5. I get this error trying to run ember serve

The Broccoli Plugin: [CSSModules] failed with:
Error: ENOENT: no such file or directory, open 'C:\C:\Projects\GIT\APP\tmp\cssmodules-input_base_path-qhR6zwsN.tmp\0\modules\ember-cli-notifications\styles\globals.css'
    at Error (native)
    at Object.fs.openSync (fs.js:549:18)
    at Object.fs.readFileSync (fs.js:397:15)
    at CSSModules.loadPath (C:\Projects\GIT\APP\node_modules\broccoli-css-modules\index.js:105:20)
    at CSSModules.fetchExports (C:\Projects\GIT\APP\node_modules\broccoli-css-modules\index.js:93:15)
    at Parser.fetchImport (C:\Projects\GIT\APP\node_modules\css-modules-loader-core\lib\parser.js:90:19)
    at C:\Projects\GIT\APP\node_modules\css-modules-loader-core\lib\parser.js:49:31
    at Root.each (C:\Projects\GIT\APP\node_modules\postcss\lib\container.js:130:22)
    at Parser.fetchAllImports (C:\Projects\GIT\APP\node_modules\css-modules-loader-core\lib\parser.js:47:11)

If Font Awesome is not already included in the consuming application, add the following your applications config/environment.js file.

'ember-cli-notifications': {
    includeFontAwesome: true
}

Where exactly in the environment.js file?

Is the notification service not supposed to be exposed to being manually injected?

It seems to stem from the service being injected as 'name:type' as opposed to 'type:name'.

Hi,

The readme mentions using:

this.notifications.setDefaultAutoClear(true);

but this errors saying it is not a function (when I try and use it in my controllers init function) and I cant find a reference to it if i search through the src files.

Is there an easy way to default all messages to auto clear, without manually editing the services/notification-messages-service.js file? ( I assume it would be possible to extend this file, but thought i would check this wasn't already taken into account by another means first)

I have already imported these into my project.

I got an error that said I needed to add {overwrite : true} to mergeTrees for this to work. I had to manually remove the fontawesome icons from my project to get it working. This could be a more serious issue if you had say 2 addons that were importing fontawesome as there is no nice way to rectify that situation.

http://emberjs.com/deprecations/v1.x/#toc_access-to-instances-in-initializers

Please note this can also be caused by a lack of documentation from your side, respectively understanding of Ember CLI internals from mine.

Everything works fine in my project regarding the notifications, except they are not animated and the autohide feature doesn't work at all. Font Awesome is working.

This could be caused by missing bits in the Brocfile.js, which would make it my fault. I'd be happy to know which is the correct (and complete) way to do it, then I promise a PR with a README update 😉

Hello, your addon is awesome! But, my app uses a strict color palette. So Im looking for a way to customize its colors without ending up doing !important on all your classes, on my app css.. Do you think is there a clean way to achieve this? Thanks man

Just installed this and I see the notification but the styles are all missing. If I copy the styles from basscss, basscss-colors, and basscss-background-colors into my own stylesheet the notifications work. But I also see another issue where the /* Base */ .c-notification__container in addon/styles/components/notification-container.css isn't working because the css attributes for this rule aren't being applied, .c-notification__container. Please let me know if I missed a step or if something is off with the addon.

I'm trying to install the package with

ember install ember-cli-notifications

But i'm getting an error

The 'ember generate' command requires an entity name to be specified.

If i install via NPM i get a build fail with the error.

File not found: \addon.sass

I see that the file is actually named .scss not .sass.

Is there a particular reason why autoclosing notifications lack a dismiss button?

Is there a reason why a tiny button is used to close a notification?

I believe that all notifications should be dismissable. And they should be dismissed by clicking anywhere on the notification slate. A close button could display on hover over the slate.

If you agree, i can send a PR.

I am using this inside an addon project but am getting the following error when running ember build.

Build failed.
Merge error: file fonts/fontawesome-webfont.eot exists in /home/me/git/myproject/boilerplate/tmp/funnel-dest_9h0xqj.tmp and /home/me/git/myproject/boilerplate/tmp/funnel-dest_psJknQ.tmp
Pass option { overwrite: true } to mergeTrees in order to have the latter file win.

The trouble is that I am already importing font-awesome from my addon, this was all project using my addon will get fontawesome automatically.

        //fontawesome
        app.import('vendor/font-awesome/css/font-awesome.css');
        app.import('vendor/font-awesome/fonts/fontawesome-webfont.eot', { destDir: '/fonts' });
        app.import('vendor/font-awesome/fonts/fontawesome-webfont.svg', { destDir: '/fonts' });
        app.import('vendor/font-awesome/fonts/fontawesome-webfont.ttf', { destDir: '/fonts' });
        app.import('vendor/font-awesome/fonts/fontawesome-webfont.woff', { destDir: '/fonts' });
        app.import('vendor/font-awesome/fonts/FontAwesome.otf', { destDir: '/fonts' });

It looks like the following configuration is not working when used inside another addon project.

var ENV = {
  'ember-cli-notifications': {
    includeFontAwesome: true
  }
}

I am have nailed it down to the following:

  importFontAwesome: function(app) {
    var projectConfig = this.project.config(app.env);
    var config = projectConfig['ember-cli-notifications'];

    if (!config || config.icons !== 'bootstrap') {
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.eot', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.svg', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.ttf', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.woff', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.woff2', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/css/font-awesome.css');
    }
  }

Should it not be:

    if (config.includeFontAwesome) {
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.eot', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.svg', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.ttf', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.woff', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/fonts/fontawesome-webfont.woff2', {
        destDir: 'fonts'
      });
      app.import(app.bowerDirectory + '/font-awesome/css/font-awesome.css');
    }

Is there a way to remove active notifications, or automatically remove them when the route changes?

The css from "basscss" does not have a prefix in front of each class name, this is affecting the rest of our applications style significantly.

For example, the classes ".left", ".right", and ".fixed" are applied to every element outside of the notifications component.

DEPRECATION: Usage of Ember.merge is deprecated, use Ember.assign instead. [deprecation id: ember-metal.merge] See http://emberjs.com/deprecations/v2.x/#toc_ember-merge for more details.

Triggered here - https://github.com/stonecircle/ember-cli-notifications/blob/master/addon/services/notification-messages-service.js

Hello,

I have a problem with ember-cli-notifications. I would like to use your addon on my website. I have successfully installed it etc. The problem is when I would like to display a notification. In the application.hbs template I added: {{notification-container position="bottom-right"}}. From a component FAQ I want to call a success notification when user click vote. The FAQ component code is:
`import Ember from 'ember';

export default Ember.Component.extend({
i18n: Ember.inject.service('i18n'),
notifications: Ember.inject.service('notification-messages'),

//Question
faq: null,

//Voted status
hasVoted: false,

actions: {
helpful: function() {
// TODO:
this.get('notifications').error('Something went wrong');
this.set('hasVoted', true);
}
}
});`

Now what happens is that the notification is inserted into the HTML code but the class of the notification is not being added. The html code of the notification is:
`

As you can see the alert-danger class is not added and instead of it I have alert- and also the style is to display: none; so the notification is not going to be displayed.

Do you know what am I doing wrong?

Thanks for your help!

Hey! I'd like to use your addon but I'm not using font-awesome. I'm trying to keep my vendor.* as small as possible and Bootstrap glyphicons contain 4 very similar icons that could totally be used in place of the font-awesome ones.

The code change should be fairly simple. I think the users could then specify a global option:

var ENV = {
  'ember-cli-notifications': {
    theme: 'bootstrap' // default would be 'font-awesome'
  }
}

What do you think? I should be able to send a PR over in the coming days if you like the idea.

After upgrade to v4 when on ember s I get:

Cannot find module 'stylelint'
Error: Cannot find module 'stylelint'
  at Function.Module._resolveFilename (module.js:440:15)
  at Function.Module._load (module.js:388:25)
  at Module.require (module.js:468:17)
  at require (internal/module.js:20:19)
  at Object.<anonymous> (/Users/uni_mac/Desktop/Semios/brae-ember/node_modules/ember-cli-notifications/index.js:14:11)
  at Module._compile (module.js:541:32)
  at Object.Module._extensions..js (module.js:550:10)
  at Module.load (module.js:458:32)
  at tryModuleLoad (module.js:417:12)
  at Function.Module._load (module.js:409:3)
  at Module.require (module.js:468:17)
  at require (internal/module.js:20:19)
  at Function.Addon.lookup (/Users/uni_mac/Desktop/Semios/brae-ember/node_modules/ember-cli/lib/models/addon.js:1002:19)

I have installed stylelint globally but it did fix the problem.

Thank you.

It appears that the {{bind-attr}} is back in the repo after it was removed previously.

See: https://github.com/Blooie/ember-cli-notifications/blame/master/app/templates/components/notification-message.hbs

Looks like this revert caused it.

19209a3

Nice job with the addon! It would be great if helper methods were added for the different types of notifications (error, info, success, warning). The method signature would really cut down on repetitive code. I could wrap these into my own service, but if this could be supported out of the box that would be even better.

Examples of what I am proposing:

let message = 'Hello, World!';
let options = { autoClear: true, clearDuration: 1200 };

this.notifications.error(message); // default options, message provided, type: 'error'
this.notifications.success(message, options); // options would override defaults
this.notifications.info(message, options);
this.notifications.warning(message, options);

One thing to consider would be whether to guard against options that include message and type, or just merge the properties provided.

It would be good if when hovering your mouse over an auto closing notification it would cancel the autoclose functionality and start it again on mouseout.

This would give the user time to read a notification that might have more text than usual.

The close icon is hardcoded to use the FontAwesome icon.

README.md says to put the following into your template

<div class="notifications-container">
    {{#each notification in notifications}}
        {{notification-message notification=this}}
    {{/each}}
</div>

should be the following as the above does not work in the latest ember

<div class="notifications-container">
    {{#each notification in notifications}}
        {{notification-message notification=notification}}
    {{/each}}
</div>

I need to use this inside a service but the default initializer does not support this. Can this be changed to also inject into services or is there some reason you don't want this?

Hey,
First of all, thanks for the great addon :)
I've got a question if there's a possibility to turn off vendor styles? I want to write them by myself, but overriding every single selector is a pain :(

Thanks for the addon.

Just installed 1.2.2, Apart from #31, there seems to be an issue with loading source map.
http://localhost:8000/static/dist/assets/ember-cli-notifications.css.map 404 (NOT FOUND)

Please take a look.
Was googling around and found this - if it helps.
ember-cli/ember-cli#810

I installed broccoli-sass as per the instructions but then I can't start the server because it complains about tmp/app/styles/app.[scss|sass] not existing in my project. I don't want to use sass in my own application. Is there a workaround for this?

This seems like it might be a ember-cli issue as I can't see how an addon can dictate how to consuming application should format it's css code.

Getting an error installing:

C:\ember install ember-cli-notifications
version: 1.13.8
File: C:\WINDOWS\system32\cmd.exe
[email protected] postinstall: `node postinstall`
spawn C:\WINDOWS\system32\cmd.exe ENOENT
Error: [email protected] postinstall: `node postinstall`
spawn C:\WINDOWS\system32\cmd.exe ENOENT
    at exports._errnoException (util.js:746:11)
    at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
    at child_process.js:1144:20
    at process._tickCallback (node.js:355:11)

Hi! Thanks for this great library.

I want to use this library in my component integration tests, but I'm not sure how exactly... ?

import notifications from 'appName/initializers/notifications';

moduleForComponent('x-send-message', 'Integration | Component | x-send-message', {
   integration: true,
  setup() {
     notifications.initialize(this)
     manualSetup(this.container);
   }
 });    

the problem with this approach is that application context in this integration test doesn't have an inject method, but this library wants to application.inject(injectionTarget, 'notifications', 'notification-messages:service'); so that can't work.

Any suggestions on how I can use this library in an integration test?

So i receive this warning:

WARNING: Binding style attributes may introduce cross-site scripting vulnerabilities; please ensure that values being bound are properly escaped. For more information, including how to disable this warning, see http://emberjs.com/deprecations/v1.x/#toc_warning-when-binding-style-attributes.

I don't have style bindings in my project, so i searched node_modules for someone to blame.

It seems to me that this line is the offender:

https://github.com/Blooie/ember-cli-notifications/blob/master/app/templates/components/notification-message.hbs#L10-10

I would like to start a discussion on providing the opportunity to create notifications with custom HTML. Has this been discussed yet, or is it on the roadmap?

Hi!

I can see animations working in the official demo, but in my app they don't.

The reason is the lack of prefixes.

Plugin seems to work according to docs, but I'm receiving this error in the console:

GET http://www.******.com:4200/assets/ember-cli-notifications.css.map 404 (Not Found)

Great add-on!

The library will be more useful if messages can be shown without icons.

What is the simplest way to remove the icon requirements?

Thanks!

When I update the ember-cli-notifications to 2.1.0 from 2.0.0 I get the following error:

Merge error: file fonts/fontawesome-webfont.eot exists in /home/cesar/src/bootenv/bootenv-webapp/tmp/funnel-output_path-EswIeip1.tmp and /home/cesar/src/bootenv/bootenv-webapp/tmp/funnel-output_path-dLNYnfA4.tmp
Pass option { overwrite: true } to mergeTrees in order to have the latter file win.
Error: Merge error: file fonts/fontawesome-webfont.eot exists in /home/cesar/src/bootenv/bootenv-webapp/tmp/funnel-output_path-EswIeip1.tmp and /home/cesar/src/bootenv/bootenv-webapp/tmp/funnel-output_path-dLNYnfA4.tmp
Pass option { overwrite: true } to mergeTrees in order to have the latter file win.
  at mergeRelativePath (/home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:98:21)
  at mergeRelativePath (/home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:122:17)
  at /home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:23:5
  at lib$rsvp$$internal$$tryCatch (/home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:489:16)
  at lib$rsvp$$internal$$invokeCallback (/home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:501:17)
  at lib$rsvp$$internal$$publish (/home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:472:11)
  at lib$rsvp$asap$$flush (/home/cesar/src/bootenv/bootenv-webapp/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1290:9)
  at doNTCallback0 (node.js:408:9)
  at process._tickCallback (node.js:337:13)

I have "font-awesome": "~4.4.0" defined on my bower.json file. Is there anything I should change elsewhere to make this work? How can I start debugging this?

Thanks!