ember-notiflix

This addon provides all Notiflix functionalities (notify, report, loading and confirm) and Notiflix is a pure JavaScript notification library with no dependency.

This addon expose all functionalities as an Ember Service. If you want to reach all functions (in your controllers, components or routes) you should inject the service to your code like down below.

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';

export default class MyComponent extends Component {
  @service
  notiflix;
}

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Installation

ember install ember-notiflix

Configuration

You can change all initial global configuration settings via config/environment.js file. Notice that seperate notify, report, loading, confirm and block sections.

Please check the Notiflix documentation for more initial configuration details.

ENV['ember-notiflix'] = {
  notify: {},
  report: {},
  loading: {
    customSvgUrl:
      'https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153',
    svgSize: '80px',
  },
  confirm: {},
  block: {},
};

WARNING: All merge functions private now. Please use @options instead.

Usage

Notify

Base - ( You can change the type with one of these values: success[default], failure, warning, info )

{{!--
    Since Ember 3.4 we can create a component without a dash in name,
    all "-base" named components are deprecated now.
--}}
<Notify @type="success" @message="Success" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.notify(type, message, callback, options);

Success

<NotifySuccess @message="Success" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.notifySuccess(message, callback, options);

Failure

<NotifyFailure @message="Failure" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.notifyFailure(message, callback, options);

Warning

<NotifyWarning @message="Warning" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.notifyWarning(message, callback, options);

Info

<NotifyInfo @message="Info" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.notifyInfo(message, callback, options);

Report

Base - ( You can change the type with one of these values: success[default], failure, warning, info )

{{!--
    Since Ember 3.4 we can create a component without a dash in name,
    all "-base" named components are deprecated now.
--}}
<Report @type="success" @title="Success" @message="Message" @btnText="OK" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.report(type, title, message, btnText, callback, options);

Success

<ReportSuccess @title="Success" @message="Message" @btnText="OK" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.reportSuccess(title, message, btnText, callback, options);

Failure

<ReportFailure @title="Failure" @message="Message" @btnText="OK" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.reportFailure(title, message, btnText, callback, options);

Warning

<ReportWarning @title="Warning" @message="Message" @btnText="OK" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.reportWarning(title, message, btnText, callback, options);

Info

<ReportInfo @title="Info" @message="Message" @btnText="OK" @onClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.reportInfo(title, message, btnText, callback, options);

Loading

Base - ( You can change the type with one of these values: standard[default], hourglass, circle, arrows, dots, pulse )

{{!--
    Since Ember 3.4 we can create a component without a dash in name,
    all "-base" named components are deprecated now.
--}}
<Loading @type="standard" @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loading(type, message, options);

Standard

<LoadingStandard @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingStandard(message, options);

Hourglass

<LoadingHourglass @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingHourglass(message, options);

Circle

<LoadingCircle @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingCircle(message, options);

Arrows

<LoadingArrows @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingArrows(message, options);

Dots

<LoadingDots @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingDots(message, options);

Pulse

<LoadingPulse @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingPulse(message, options);

Custom

<LoadingCustom @message="Loading..." @options={{hash svgSize=0}} />

this.notiflix.loadingCustom(message, options);

You can change the message in the loading screen in any time.

this.notiflix.loadingChange('Loading... %20');

You can remove the loading screen immediately,

this.notiflix.loadingRemove();

or you can remove the loading screen after some delay.

this.notiflix.loadingRemove(600); // milliseconds

Confirm

Base

{{!--
    Since Ember 3.4 we can create a component without a dash in name,
    all "-base" named components are deprecated now.
--}}
<Confirm @title="Notiflix Confirm" @message="Do you agree with me?" @okBtnText="Yes" @cancelBtnText="No" @okClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.confirm(
  title,
  message,
  okBtnText,
  cancelBtnText,
  okClick,
  cancelClick,
  options
);

Ask

{{!--
    Since Ember 3.4 we can create a component without a dash in name,
    all "-base" named components are deprecated now.
--}}
<Ask @title="'Where is Padmé?" @question="Is she safe? Is she all right?" @answer="It seems, in your anger, you killed her." @okBtnText="Answer" @cancelBtnText="Cancel" @okClick={{fn this.showAlert "Message"}} @options={{hash svgSize=0}} />

this.notiflix.ask(
  title,
  question,
  answer,
  okBtnText,
  cancelBtnText,
  okClick,
  cancelClick,
  options
);

Block

Base - ( You can change the type with one of these values: standard[default], hourglass, circle, arrows, dots, pulse )

{{!--
    Since Ember 3.4 we can create a component without a dash in name,
    all "-base" named components are deprecated now.
--}}
<Block @type="standard" @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.block(type, elements, message, options);

Standard

<BlockStandard @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.blockStandard(elements, message, options);

Hourglass

<BlockHourglass @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.blockHourglass(elements, message, options);

Circle

<BlockCircle @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.blockCircle(elements, message, options);

Arrows

<BlockArrows @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.blockArrows(elements, message, options);

Dots

<BlockDots @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.blockDots(elements, message, options);

Pulse

<BlockPulse @elements="li.items" @message="Blocking..." @options={{hash svgSize=0}} />

this.notiflix.blockPulse(elements, message, options);

You can remove the block screen immediately,

this.notiflix.blockRemove(elements);

or you can remove the block screen after some delay.

this.notiflix.blockRemove(elements, 600); // milliseconds

Contributing

See the Contributing guide for details.

TODO

• Custom Loading
• Loading change
• Loading remove
• Initial settings
• Merge functions
• Confirm cancel callback (onClick changed to okClick)
• Added brand new block components
• Added @options for components and functions
• Added merge functions deprecations message
• Merge functions private now
• Ask component added

License

This project is licensed under the MIT License.