# All files / src/parts notifyFader.js

0% Statements 0/28
0% Branches 0/24
0% Functions 0/9
0% Lines 0/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94

    /**
     * A method to use the implemented notifier, via ajax or javascript
     *
     * @param text string  | The text to be displayed
     * @param classes string | The classes that will be put onto the inner container
     * @param styles object | An object of css-attributes that will be put onto the inner container
     * @param customOptions | possible options are:
     *                         useHtml (boolean) -> use the @text as html
     *                         timeout (int) -> the timeout in milliseconds until the notifier will fade/slide out
     *                         inAnimation (string) -> The jQuery animation to call for the notifier [fadeIn||slideDown]
     *                         outAnimation (string) -> The jQuery animation to remove the notifier [fadeOut||slideUp]
     *                         animationTime (int) -> The time in milliseconds the animation will last
     */

    window.LS = window.LS || {};

    class NotifyFader {
        constructor(){
            this.count = 0;
        }

        increment(){this.count = this.count+1;}
        decrement(){this.count = this.count-1;}
        getCount(){return this.count;};

        create(text, classes, styles, customOptions){

            this.increment();
            customOptions = customOptions || {};
            styles = styles || {};
            classes = classes || "well well-lg";

            const options = {
                useHtml : customOptions.useHtml || true,
                timeout : customOptions.timeout || 3500,
                inAnimation : customOptions.inAnimation || "slideDown",
                outAnimation : customOptions.outAnimation || "slideUp",
                animationTime : customOptions.animationTime || 450
            };

            const container = $("<div> </div>");
            const newID = "notif-container_"+this.getCount();

            container.addClass(classes);
            container.css(styles);

            if(options.useHtml){
                container.html(text);
            } else {
                container.text(text);
            }

            $('#notif-container').clone()
                .attr('id', newID)
                .css({
                    display: 'none',
                    top : (8*((this.getCount())))+"%",
                    position: 'fixed',
                    left : "15%",
                    width : "70%",
                    'z-index':3500
                })
                .appendTo($('#notif-container').parent())
                .html(container);

            // using the option inAnimation as funtion of jquery
            $('#'+newID)[options.inAnimation](
                options.animationTime,
                () => {
                    const remove = () => {
                        $('#'+newID)[options.outAnimation](
                            options.animationTime,
                            () => {
                                $('#'+newID).remove();
                                this.decrement();
                            }
                        );
                    }
                    $(this).on('click', remove);
                    if(options.timeout) {
                        setTimeout(remove, options.timeout);
                    }
                }
            );
        };
    };

    window.LS.LsGlobalNotifier = window.LS.LsGlobalNotifier || new NotifyFader();

    export default function (text, classes, styles, customOptions) {
        window.LS.LsGlobalNotifier.create(text, classes, styles, customOptions);
    };