Ember Wuphf

About

Easily add alert messages everywhere in your ember-cli apps

Learn more about WUPHF!

Install

npm install ember-wuphf --save-dev

Usage

In the template you want the alert messages to appear use the componenent:

{{x-wuphf}}

Write a new message to the alert system for it to appear:

this.wuphf.info("Thank you for signing up!");

You can access the wuphf object from Controllers, Routes, and Components.

Message Types

Danger

this.wuphf.danger("Danger message");

Info

this.wuphf.info("Info message");

Success

this.wuphf.success("Success message");

Warning

this.wuphf.warning("Warning message");

Custom

this.wuphf.pushObject({type: 'custom', message: 'Custom Message');

Register custom types

If you have a custom type you want to use often you can register it for easy use later.

this.wuphf.registerType('emergency');
this.wuphf.emergency('Oh no!');

You can register multiple types at once with the plural form:

this.wuphf.registerTypes('emergency', 'normal');
this.wuphf.emergency('Oh no!');
this.wuphf.normal('Back to business');

Styling

The alert container has a class of .wuphf-message-container. Each message has a class of .wuphf-message as well as the :type.

Customizing

By default messages only disappear after a user clicks on it. You can set an optional timeout for the message to automatically dismiss.

Global timeout

// dismiss after 5 seconds
this.wuphf.timeout = 5000;

Per-message timeout

// dismiss after 5 seconds
this.wuphf.info('Info message', 5000);

// dismiss after 5 seconds
this.wuphf.pushObject({type: 'custom', message: 'Custom Message', timeout: 5000});

Clearing

If you don't set a timeout the messages don't disappear automatically so sometimes you may want to clear them before showing a new message. As the queue is an Ember.ArrayProxy object you can use its clear() method.

// clear messages queue
this.wuphf.clear();

Authors

• Brian Cardarella

We are very thankful for the many contributors

Versioning

This library follows Semantic Versioning

Want to help?

Please do! We are always looking to improve this gem. Please see our Contribution Guidelines on how to properly submit issues and pull requests.

Legal

DockYard, Inc © 2014

@dockyard

Licensed under the MIT license