salix/client/core/src/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.shown = false;
        this.snackbar = $element[0].firstChild;
        this.$snackbar = angular.element(this.snackbar);
        this.button = $element[0].querySelector('button');
        this.textNode = this.snackbar.querySelector('.text');
    }

    /**
     * Shows a notification.
     *
     * @param {Object} data The message data
     */
    show(data) {
        if (this.shown) {
            this.hide();
            this.onTransitionEnd();
        }

        this.clearTimeouts();
        this.shown = true;
        this.textNode.textContent = data.message;
        this.actionHandler = data.actionHandler;

        this.button.textContent =
            data.actionText || this.$translate.instant('Hide');

        this.timeoutId = setTimeout(() =>
            this.hide(), data.timeout || 6000);

        this.transitionTimeout = setTimeout(() =>
            this.$snackbar.addClass('shown'), 30);
    }

    /**
     * Shows an error.
     *
     * @param {Object} data The message data
     */
    showError(data) {
        this.show(data);
        this.$snackbar.addClass('error');
    }

    /**
     * Hides the snackbar.
     */
    hide() {
        if (!this.shown) return;
        clearTimeout(this.timeoutId);
        this.shown = false;
        this.hideTimeout = setTimeout(() => this.onTransitionEnd(), 250);

        this.transitionTimeout =
            setTimeout(() => this.$snackbar.removeClass('shown'), 30);
    }

    onTransitionEnd() {
        this.$snackbar.removeClass('error');
        this.textNode.textContent = '';
        this.button.textContent = '';
        this.actionHandler = null;
    }

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

    onButtonClick() {
        if (this.actionHandler)
            this.actionHandler();
        else
            this.hide();
    }

    clearTimeouts() {
        clearTimeout(this.timeoutId);
        clearTimeout(this.hideTimeout);
        clearTimeout(this.transitionTimeout);
        this.timeoutId = null;
        this.hideTimeout = null;
        this.transitionTimeout = null;
    }

    $onDestroy() {
        this.clearTimeouts();
    }
}
Controller.$inject = ['$element', '$translate'];

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