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 = this.createShape(data);

        setTimeout(() =>
            this.hide(shape), data.timeout || 3000);

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

    /**
     * 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
});