salix/front/core/components/snackbar/snackbar.js

import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

/**
 * A simple component to show non-obstructive notifications to the user.
 */
export default class Controller extends Component {
    constructor($element, $translate) {
        super($element);
        this.$translate = $translate;
        this.snackbar = $element[0].firstChild;
        this.$snackbar = angular.element(this.snackbar);
    }

    /**
     * It creates a new snackbar notification
     * @param {Object} data Snackbar data
     * @return {Object} Created snackbar shape
     */
    createShape(data) {
        let shape = document.createElement('div');
        shape.className = 'shape';

        let button = document.createElement('button');

        let buttonText = data.actionText || this.$translate.instant('Hide');
        buttonText = document.createTextNode(buttonText);
        button.appendChild(buttonText);

        button.addEventListener('click', () => {
            this.onButtonClick(shape);
        });

        shape.appendChild(button);

        let shapeText = document.createElement('div');
        shapeText.setAttribute('class', 'text');
        shape.appendChild(shapeText);

        let text = document.createTextNode(data.message);
        shapeText.appendChild(text);

        if (data.shapeType)
            shape.classList.add(data.shapeType);

        let parent = this.snackbar.querySelectorAll('.shape')[0];

        if (parent)
            this.snackbar.insertBefore(shape, parent);
        else
            this.snackbar.appendChild(shape);


        return shape;
    }

    /**
     * Shows a notification.
     *
     * @param {Object} data The message data
     */
    show(data) {
        this.actionHandler = data.actionHandler;

        let shape;

        const lastShape = this.lastShape;
        const lastShapeData = lastShape && lastShape.data;
        const isEqual = lastShape && (lastShapeData.shapeType == data.shapeType && lastShapeData.message == data.message);

        if (lastShape && isEqual) {
            shape = lastShape.element;

            const shapeText = shape.querySelector('.text');
            let chip = shapeText.querySelector('vn-chip');

            if (chip) {
                const text = chip.querySelector('span');
                const number = parseInt(text.innerHTML);

                text.innerHTML = number + 1;
            } else {
                chip = document.createElement('vn-chip');
                chip.setAttribute('class', 'warning small');
                let parent = document.createElement('div');
                let span = document.createElement('span');
                let text = document.createTextNode(1);
                span.append(text);
                parent.append(span);
                chip.append(parent);

                shapeText.appendChild(chip);
            }

            lastShape.element.classList.add('shown');

            if (this.hideTimeout)
                clearTimeout(this.hideTimeout);
        } else {
            shape = this.createShape(data);

            setTimeout(() =>
                shape.classList.add('shown'), 30);
        }

        this.hideTimeout = setTimeout(() => {
            this.hide(shape);
            this.lastShape = null;
        }, data.timeout || 3000);

        this.lastShape = {
            data: data,
            element: shape
        };
    }

    /**
     * Shows an error.
     *
     * @param {Object} data The message data
     */
    showError(data) {
        data.shapeType = 'error';

        this.show(data);
    }

    /**
     * Shows a success.
     *
     * @param {Object} data The message data
     */
    showSuccess(data) {
        data.shapeType = 'success';

        this.show(data);
    }

    /**
     * Hides the snackbar.
     * @param {Object} shape Snackbar element
     */
    hide(shape) {
        setTimeout(() => shape.classList.remove('shown'), 30);
        setTimeout(() => shape.remove(), 250);
    }

    onSnackbarClick(event) {
        this.event = event;
    }

    onButtonClick(shape) {
        if (this.actionHandler)
            this.actionHandler();
        else
            this.hide(shape);
    }
}
Controller.$inject = ['$element', '$translate'];

ngModule.component('vnSnackbar', {
    template: require('./snackbar.html'),
    controller: Controller
});