ember-notiflix

    3.4.0 • Public • Published

    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.20 or above
    • Ember CLI v3.20 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

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

    License

    This project is licensed under the MIT License.

    Install

    npm i ember-notiflix

    DownloadsWeekly Downloads

    80

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    50.7 kB

    Total Files

    63

    Last publish

    Collaborators

    • khons