@blinkk/editor/dist/src/editor/ui/toast.js

Structured content editor with live previews.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toast = void 0;
const notifications_1 = require("../parts/notifications");
const selective_edit_1 = require("@blinkk/selective-edit");
const _1 = require(".");
const listeners_1 = require("../../mixin/listeners");
const uuid_1 = require("@blinkk/selective-edit/dist/src/mixins/uuid");
class Toast extends listeners_1.ListenersMixin(uuid_1.UuidMixin(_1.BaseUI)) {
    constructor(config) {
        super();
        this.config = config;
        this.isClosed = false;
        this.isPaused = false;
        this.isVisible = false;
        if (!this.config.noPauseOnFocusLoss) {
            document.addEventListener('visibilitychange', () => {
                if (document.visibilityState === 'visible') {
                    this.isPaused = false;
                }
                else {
                    this.isPaused = true;
                    // The render does not always work when the tab is not in focus.
                    // Need to manually add the class to make sure that it is correctly
                    // paused when the tab is not in focus.
                    if (this.element) {
                        this.element.classList.add('le__toast--paused');
                    }
                }
                this.render();
            });
        }
    }
    classesForToast() {
        const classes = {
            le__clickable: true,
            le__toast: true,
            'le__toast--no-hover-pause': this.config.noPauseOnHover || false,
            'le__toast--paused': this.isPaused,
            'le__toast--removed': this.isClosed,
        };
        if (this.config.classes) {
            for (const classname of this.config.classes) {
                classes[classname] = true;
            }
        }
        return classes;
    }
    handleToastClick(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        notifications_1.showNotification(this.config.notification);
        this.hide();
    }
    handleAnimationStart(evt) {
        this.element =
            selective_edit_1.findParentByClassname(evt.target, 'le__toast') ||
                undefined;
    }
    hide() {
        this.isClosed = true;
        this.triggerListener('hide');
        // Give time for the animations to complete before completely removing.
        window.setTimeout(() => {
            this.isVisible = false;
        }, 5000);
        this.render();
    }
    show() {
        this.isClosed = false;
        this.isVisible = true;
        this.triggerListener('show');
        this.render();
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    template(editor) {
        if (!this.isVisible) {
            return selective_edit_1.html ``;
        }
        return selective_edit_1.html `<div
      class=${selective_edit_1.classMap(this.classesForToast())}
      @click=${this.handleToastClick.bind(this)}
    >
      <div class="le__toast__structure">
        <div class="le__toast__message">
          ${this.config.notification.message}
        </div>
        <div class="le__toast__actions">
          ${selective_edit_1.repeat(this.config.notification.actions || [], action => action.label, action => {
            const handleClick = (evt) => {
                evt.preventDefault();
                evt.stopPropagation();
                document.dispatchEvent(new CustomEvent(action.customEvent, {
                    detail: action.details,
                }));
                this.hide();
                notifications_1.readNotification(this.config.notification);
            };
            return selective_edit_1.html `<div
                class="le__toast__action le__clickable"
                @click=${handleClick}
              >
                ${action.label}
              </div>`;
        })}
        </div>
        <div
          class="le__toast__close le__clickable"
          @click=${(evt) => {
            evt.preventDefault();
            evt.stopPropagation();
            this.hide();
            notifications_1.readNotification(this.config.notification);
        }}
        >
          <span class="material-icons">close</span>
        </div>
      </div>
      ${this.config.noAutoClose
            ? selective_edit_1.html ``
            : selective_edit_1.html `<div
            class="le__toast__timer"
            @animationend=${() => {
                this.hide();
            }}
            @animationstart=${this.handleAnimationStart.bind(this)}
          ></div>`}
    </div>`;
    }
    toggle() {
        if (this.isVisible) {
            this.hide();
        }
        else {
            this.show();
        }
    }
}
exports.Toast = Toast;
//# sourceMappingURL=toast.js.map