adopted-ember-addons / ember-cli-flash Goto Github PK

If the flash message has text say: "You can copy paste this <URL>" before you start highlighting, the flash message closes due to (https://github.com/poteto/ember-cli-flash/blob/develop/addon/components/flash-message.js#L90):

click() {
    this._destroyFlashMessage();
}

This should be made as option based as the above use case might not work. Alternatively, should I extend the flash-message component?

The following example

{{#each flashMessages.queue as |flash|}}
  {{#flash-message flash=flash as |component flash|}}
    {{#if flash.template}}
      {{render flash.template flash.context}}
    {{else}}
      <h6>{{component.flashType}}</h6>
      <p>{{flash.message}}</p>
    {{/if}}
  {{/flash-message}}
{{/each}}

throws the following error.

Uncaught Error: Assertion Failed: The first argument of {{render}} must be quoted, e.g. {{render "sidebar"}}.

It would seem one cannot use render in this way. Another possibility would be to replace this line with a component helper, available since 1.11.

...
    {{#if flash.componentName}}
      {{component flash.componentName content=flash.content}}
    {{else}}
...

seeing the following error when started ember server

File: ember-cli-flash/components/flash-message
Unexpected token (3:21)
SyntaxError: Unexpected token (3:21)
    at raise (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:333:15)
    at unexpected (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:1366:5)
    at parseIdent (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:2471:7)
    at parsePropertyName (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:2250:78)
    at parseObj (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:2225:9)
    at parseExprAtom (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:2136:14)
    at parseVar (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:1875:57)
    at parseVarStatement (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:1763:5)
    at parseStatement (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:1569:47)
    at parseTopLevel (E:\Documents\Synapse\Projects\Synapse\Synapse MX\synapse-mx-client-ember-cli\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:1526:18)

Similar to #1 I think. Ember 1.10, CLI 0.1.15

The readme shows service injection with flashMessages: Ember.inject.service(), but the new name is flashMessagesService. Same for the case where you pass in a name: Ember.inject.service('flash-messages-service'). I am running into this from an add-on that is using ember-cli-flash 1.0.0.

Hi, I'm running an application that is using Ember 1.12.1 and Ember-CLI 0.2.7.

My package.json has the following line:

"ember-cli-flash": "^1.1.4",

Which updated the library to v1.2.0 on a recent npm install. My tests then started breaking with errors like:

Error: Element .alert.alert-warning not found.

If I run the test with the container visible, I can see the message flash, and the test hangs until the flash message disappears, and then it fails, and I get the aforementioned error.

Thank you for this library! It's great.

Hello,
I have an issue using ember-cli-flash with ember-cli 0.2.0. It was installed with ember install:addon ember-cli-flash
The error is javascript Uncaught Error: Could not find module ember-cli-flash/services/flash-messages-serviceimported fromxk21/initializers/flash-messages-service``

Nevermind, i see that extendedtimeout is not in release version yet..

https://github.com/poteto/ember-cli-flash/blob/40e58c4e99ed12a4b999077d18b01e04bc170929/app/initializers/flash-messages-service.js#L6

The plugin confuses me a little, as it injects everywhere by default, but also offers the plugin as an Ember 1.10 inject.service() property. For me it would be to make the injection points configurable, so I can choose to only inject on routes for instance.

I recently updated my app to Ember-CLI 0.2.4 and now the flash messages will not display their text. I will get the red box where they should be, but they are just empty.

Hi,

Thanks for the component. Would it be possible to pass a link inside the message? Right now because of the escaping, it prints the HTML rather than rendering the link.

Thanks!

Hi.
I was trying to test that the flash is shown during an acceptance test..:

visit('/customers').then ->
  click('button:contains(\'Delete Customer\')').then ->
    equal currentRouteName(), 'customers.index'
    equal find('.flashMessage').text(), 'Customer was deleted'

It feels like maybe I'm just tired and totally overlooking something, but a pointer would really be helpful.
If i get this working I can write up a little tutorial and add it to the README...

I'm trying to use ember-cli-flash with my application that is laid out in a pod structure. When calling this.get('flashMessage') from the controller, I get an error Uncaught TypeError: Cannot read property 'success' of undefined.

Do you know if the pod structure might cause conflict?

I will try to post an example of the error sometime tomorrow.

Given the following app:

// app/routes/application.js

export default Ember.Route.extend({
  actions: {
    sayHello() {
      let flashes = this.get('flashes');
      flashes.info('Hiya');
    }
  }
});

<!-- app/templates/application.hbs -->

<button {{action "sayHello"}}>Say hello</button>

{{#each flashes.queue as |flash|}}
  {{flash-message flash=flash}}
{{/each}}

An acceptance test has the following behaviour:

// tests/acceptance/hello-test.js

test('say hello', function(assert) {
  visit('/');
  click('button:contains("Say hello")');
  // Our test waits here until the run.later scheduled in _destroyLater is flushed
  andThen(() => {
    // By the time we get here the flash message has gone already
    assert.ok(find('Hiya').length);
  });
});

This is tricky both because andThen behaves unintuitively and because the test will pause for the full timeout duration.

I’ve worked around this in my tests with a total hack:

// tests/test-helper.js

import FlashObject from 'ember-cli-flash/flash/object';

FlashObject.reopen({ _destroyLater: null });

This is obviously not ideal but I’m struggling to come up with a reasonable API for this scenario. Any thoughts?

P.S. Love this addon so much ❤️

I get the following error when trying to use ember-cli-flash with Ember 1.9.1 and Handlebars 2.0.0: Uncaught Error: Unknown template object: function

I'm pretty new to Ember so it's quite possible I'm doing something wrong but some googling seemed to indicate that this has to do with incompatibilities between Handlebars 1.3.0 and 2.0.0. Is that the case?

With ember-cli 0.2.7 and ember-cli-flash 1.2.0 I'm getting this error stopping the entire Ember app from loading:

Uncaught Error: Computed Property declared without a property function
computed @ ember.debug.js:10586
add @ computed.js:17
(anonymous function) @ object.js:14

Stems from the following line within: https://github.com/poteto/ember-cli-flash/blob/develop/addon/flash/object.js

totalTimeout: customComputed.add('timeout', 'extendedTimeout').readOnly(),

Hey. Great plugin.
I'm thinking about using it but here's what I need to do. After a user selects something from a dropdown and clicks the "Save" button, I need to refresh the page (I need to clear some i18n stuff).

What would be the best way of showing a message after a page refresh? I'm thinking of storing the message in localStorage for example, and after the page refreshes, an initializer would check for the message in localStorage, and the message would get injected into ember-cli-flash and shown to the user.

Does that sound ok? Thanks.

Tests fail on empty project after ember install ember-cli-flash.

Building...

test-helper.js: line 2, col 8, 'flashMessageHelper' is defined but never used.

1 error

===== 1 JSHint Error

Built project successfully. Stored in "/Users/blimmer/code/oss/ember-cli-example-app-for-github/tmp/class-tests_dist-vxbmlNUY.tmp".
ok 1 PhantomJS 2.0 - JSHint - .: app.js should pass jshint
ok 2 PhantomJS 2.0 - JSHint - helpers: helpers/flash-message.js should pass jshint
ok 3 PhantomJS 2.0 - JSHint - helpers: helpers/resolver.js should pass jshint
ok 4 PhantomJS 2.0 - JSHint - helpers: helpers/start-app.js should pass jshint
ok 5 PhantomJS 2.0 - JSHint - .: router.js should pass jshint
not ok 6 PhantomJS 2.0 - JSHint - .: test-helper.js should pass jshint
    ---
        actual: >
            false
        expected: >
            true
        message: >
            test-helper.js should pass jshint.
            test-helper.js: line 2, col 8, 'flashMessageHelper' is defined but never used.

            1 error
        Log: |
    ...

1..6
# tests 6
# pass  5
# fail  1

https://github.com/ember-cli/ember-cli/releases/tag/v0.2.1

Thanks for the building this great add on. The error doesn't block installation but thought you might want to know.

$ ember install ember-cli-flash
version: 0.2.3
Installed packages for tooling via npm.
installing
  create tests/helpers/flash-messages.js
installing
The `ember generate` command requires an entity name to be specified. For more details, use `ember help`.

Using [email protected]
Ember : 1.13.6
Ember Data : 2.0.0-beta.1
jQuery : 2.1.4

in line 14 of object.js:

queue: ember_new_computed['default'].readOnly('flashService.queue'),

See https://github.com/dockyard/ember-wuphf/blob/master/app%2Fservices%2Fwuphf.js

I have pretty common scenario in which I need to display flash message on one place, automatically hide it after certain amount of time - (so that the user won't be bothered by multiple notifications). And then put the same notification into other place for later review if user misses the notification for the first time. This second place is some popup menu hidden under some icon.

I can think of a way that I would create each notificaiton two times. This does not seem right to me. Any better idea to this?

Hi,
I'm trying to use this addon inside my project built with ember-cli 0.1.11, but when I serve the development application this is what happens

File: ember-cli-flash/components/flash-message
Unexpected token (3:20)
SyntaxError: Unexpected token (3:20)
    at raise (D:\Work\ember-cli-flash-modal\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:333:15)
    at unexpected (D:\Work\ember-cli-flash-modal\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:1366:5)
    at parseIdent (D:\Work\ember-cli-flash-modal\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:2471:7)
    at parsePropertyName (D:\Work\ember-cli-flash-modal\node_modules\ember-cli\node_modules\broccoli-es6modules\node_modules\esperanto\node_modules\acorn\acorn.js:2250:78)

and so on... the problem is obviously the Destructors....
Let me know if you need more infos

Hi, thanks for this amazing plugin. What i`m trying to todo, is have different notifications in different controllers/views, but seems that this properties is shared between all of them, because when i create a message on one controller, the same message is displayed in all places where i have defined the template.

I´m not sure, if this is the expected behavior or if i`m missing something.

Thanks for your help!

I'm not super familiar with managing dependencies in addons but I think ember-new-computed needs to be in dependencies and not devDependencies.

Our builds broke with the new release that included the ember-new-computed (#86 ) as a dependency because npm install wasn't triggering the dependency to be installed.

Hi,

I just installed the addon using ember install:addon ember-cli-flash. However, when I run my project with ember server, I get the following error:

Uncaught SyntaxError: Unexpected token { 

The error occurred at at flash-message.js:5.

Today i've upgraded ember to 1.13.2, everything worked fine, besides one thing, i think it could be Ember related as it was working fine on 1.12 version.
When i have more than one flash message active at same time and i am changing route, it just stops on loading route and freezes firefox using whole 1 core cpu time, on chrome it freezes the current process, no way to refresh the page, or any other action on this tab is possible besides closing it by force.
Firefox is reporting 'Unresponsive script' and asking if i want to stop it etc.
I can't debug this because there is no information in console.
Interesting is that with only one flash message everything works fine.
Any ideas ?

• Update templates to remove bind-attr
• Remove use of prototype extensions (mostly Ember.String.classify())
• Escape CSS before binding to style attr
• Add warning to README about compatibility with older versions

When I have multiple flash messages being displayed on the page at the same time, but initiated at different times, multiple flash messages are removed at the same time. This appears to be random in which ones are removed together. It is independent of the type of flash message it is. Take a look at the attached gif.

For animation purposes.

Seems that custom flashMessageDefaults not working correctly. I keep getting the default ones (etc timeout value is always 3000).

When using the addon like so

{{#if flashMessages.queue}}
  <div class="FlashQueue">
    {{#each flashMessages.queue as |flash|}}
      {{capp-flash-message flash=flash action="destroyMessage"}}
    {{/each}}
  </div>
{{/if}}

I'd like to be able to destroy a flash message by bubbling up an action from the flash-message component. Is there a method on the flash that I can use to destroy it, or is there another recommended way?

When a message is destroyed with click (invoking public destroyMessage() of flash/object) the _destroyLater() try destroy again the object after timeout ... and throws a error. If the message clicked is on the middle of array ... the others messages (newer) are not erased by timeout.

One possible solution is cancel the try of _destroyLater() when _destroyMessage() is invoked (flash/object) :

  _destroyLaterTimer: null,
  _destroyLater: function() {
    var defaultTimeout = get(this, 'defaultTimeout');
    var timeout        = getWithDefault(this, 'timeout', defaultTimeout);

    this.set('_destroyLaterTimer', run.later(this, '_destroyMessage', timeout));
  }.on('init'),

  _destroyMessage: function() {
    var queue = get(this, 'queue');

    run.cancel(this.get('_destroyLaterTimer'));
    set(this, 'isDestroyed', true);
    if (queue) {
      queue.removeObject(this);
    }
  }

Other solution is verify if the object is already destroyed when _destroyMessage() is invoked:

  _destroyMessage: function() {
    var queue = get(this, 'queue');
    if ( queue && !this.get('isDestroyed') ) {
      queue.removeObject(this);
      set(this, 'isDestroyed', true);
    }   
  }

@poteto - First of all, thanks for creating this awesome add-on.

I was wondering if there is a way to set an app-wide timeout value, so I don't have to set it for every flash message?

Thanks!

Overridable animate in and out

Is there a reason why it is only injected in routes and controllers?

I've been scratching my head about this issue for a few days (trying the occasional hack while traveling) and haven't been able to run tests on a few of my projects recently.

I keep getting the error below:

Could not find module `ember-cli-flash/flash/object` imported from `my-app/tests/helpers/flash-message`

What's strange is that this is happening when running on Ubuntu or Codeship's CI servers and was working on my Mac dev environment until I refreshed my NPM cache... Not sure what seems to be the issue...

Great addon!

I've just included a CSS keyframe animation to fade in the flash messages but just scratching my head as to how to fade them out again.

The addon seems to remove the messages instantly from the DOM, is there any way it could remove the active class first, then waiting for the JS transition event before removing it?

If you have approach that works already it would be fantastic to hear it.

Thanks

@stefanpenner Please review this before we start including it in a large number of Yahoo ember apps :)