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.28 or above
Ember CLI v3.28 or above
Node.js v14 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

sinankeskin / ember-notiflix Goto Github PK

ember-notiflix's Introduction

ember-notiflix

Compatibility

Installation

Configuration

Usage

Notify

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

Success

Failure

Warning

Info

Report

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

Success

Failure

Warning

Info

Loading

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

Standard

Hourglass

Circle

Arrows

Dots

Pulse

Custom

Confirm

Base

Ask

Block

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

Standard

Hourglass

Circle

Arrows

Dots

Pulse

Contributing

TODO

License

ember-notiflix's People

Contributors

Stargazers

Watchers

ember-notiflix's Issues

Recommend Projects

Recommend Topics

Recommend Org