Narcoleptic's Patch Mangler

    ovh-angular-toaster

    0.8.0 • Public • Published

    Toaster

    githubbanner

    Maintenance Chat on gitter Build Status

    A factory to create toast

    Toaster is a component to show an in-app notification, like a toast for android applications.

    Example

    Require Angular module toaster. If you need to change theme or css classes, you can define it inside module configuration like this:

    angular.module("myApp", ['ovh-angular-toaster']).config(function (ToastProvider) {
     
        // CSS classes
        ToastProvider.setExtraClasses('messenger-fixed messenger-on-bottom messenger-on-right');
     
        // Graphic theme
        ToastProvider.setTheme('air');
     
        // Set duration
        ToastProvider.setHideAfter(42);
    });

    To add a notification, you had to inject Toast as dependency and use it like this example inside a controller

    angular.module('myApp').controller('iLikeLicorn',[ 'Toast', function (Toast) {
        "use strict";
     
        Toast.success("Licorns eat toast?");
     
    }]);

    Toast can by targetted with an ID. So, you can update a toast on-the-fly, like this:

    Toast.info('Loading...', {
        id: 42,
        hideAfter: false
    });
     
    $timeout(function () {
        Toast.success('Done!', {
            id: 42
        });
    }, 2000);

    Also, a main Toast fct returns the instance of the Toast created. Then you can play with it!

    var msg = Toast.info('Hello!', {
        hideAfter: false
    });
     
    $timeout(function () {
        Toast.hide(msg);
        $timeout(function () {
            Toast.show(msg);
        }, 2000);
    }, 2000);

    Installation

    Bower

    bower install ovh-angular-toaster --save
    

    NPM

    npm install ovh-angular-toaster --save
    

    Get the sources

        git clone https://github.com/ovh-ux/ovh-angular-toaster.git
        cd ovh-angular-toaster
        npm install
        bower install

    Warning

    By default, CSS from messenger dependency download fonts from google... Two themes are banned :

    • air
    • ice

    Don't forgot to disable CSS loading!!!

    Toaster include version of these themes without fonts dependencies. To avoid loading CSS file, you had to exclude theses files into your wiredep (in gruntfile.js), like this:

    wiredep: {
      target: {
        ...
        exclude: [
            'bower_components/messenger/build/css/messenger-theme-air.css',              'bower_components/messenger/build/css/messenger-theme-ice.css']
      }
    },

    Features

    • Show a notification with success, error, info or light mode.
    • Can by update on-the-fly!
    • Automatically hidden by default.
    • Doesn't translate message by default. The best way is to translate before send message to Toaster.

    Dependencies

    API

    Main functions

    • Toast.success(message, parameters) show a success notification.
    • Toast.info(message, parameters) show an information notification.
    • Toast.error(message, parameters) show an error notification.
    • Toast.light(message, parameters) show a light notification.

    Params:

    • message: message to show
    • parameters: Object to configure lib use to show notification. Please report to Messenger repo documentation. Inside parameters, you can add all parameters from Messenger library: Messenger documentation

    Returns:

    • notification: the instance of the Toast.

    Others functions

    • Toast.infoWithInProgress(messageProgress, message, parameters) show a info notification with progress information. Return notification reference.
    • Toast.update(notification, message, parameters) update message inside notification. Return operation status.
    • Toast.show(notification) show a specific notification. Return operation status.
    • Toast.hide(notification) hide a specific notification. Return operation status.
    • Toast.hideAll() hide all notification. Return operation status.

    You've developed a new cool feature? Fixed an annoying bug? We'd be happy to hear from you!

    Have a look in CONTRIBUTING.md

    ## Run the tests

    npm test
    

    ## Build the documentation

    grunt ngdocs
    

    # Related links

    # License

    See https://github.com/ovh-ux/ovh-angular-toaster/blob/master/LICENSE

    Keywords

    none

    Install

    npm i ovh-angular-toaster

    DownloadsWeekly Downloads

    4

    Version

    0.8.0

    License

    BSD-3-Clause

    Last publish

    Collaborators

    • marie-j
    • jisay
    • axelpeter
    • blary_jp
    • antleblanc
    • cbourgois
    • ovh-ux-cds
    • lizardk
    • ovh
    • gioindahouz
    • jleveugle
    • bnjjj
    • khuang