iwmlib/lib/pixi/message.js

import Theme from './theme.js'
import { InteractivePopup } from './popup.js'

/**
 * Class that represents a Message. A message pops up and disappears after a specific amount of time.
 *
 * @example
 * // Create the PixiJS App
 * const app = new PIXIApp({
 *     view: canvas,
 *     width: 900,
 *     height: 250
 * }).setup().run()
 *
 * // Create a button
 * let button = new Button({
 *     label: 'Click me',
 *     action: e => {
 *         const message = new Message({
 *             app: app,
 *             header: 'Header',
 *             content: 'Text.'
 *         })
 *         app.scene.addChild(message)
 *     }
 * })
 *
 * // Add the button to the scene
 * app.scene.addChild(button)
 *
 * @class
 * @extends InteractivePopup
 * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
 */
export default class Message extends InteractivePopup {
    /**
     * Creates an instance of a Message.
     *
     * @constructor
     * @param {object} [opts] - An options object to specify to style and behaviour of the message.
     * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
     * @param {boolean} [opts.closeButton=false] - Should a close button be displayed in the upper right corner?
     * @param {number} [opts.minWidth=280] - The minimum width of the message box. Automatically expands with the content.
     * @param {number} [opts.minHeight=100] - The minimum height of the message box. Automatically expands with the content.
     * @param {number} [opts.margin=Theme.margin] - The outer spacing of the message box.
     * @param {string} [opts.align=right] - The horizontal position of the message box relative to the app. Possible
     *     values are left, center, right.
     * @param {string} [opts.verticalAlign=top] - The vertical position of the message box relative to the app. Possible
     *     values are top, middle, bottom.
     * @param {number} [opts.duration=5] - The duration in seconds when the message box should disappear.
     * @param {boolean} [opts.autoClose=true] - Should the message box be closed automatically?
     * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
     */
    constructor(opts = {}) {
        const theme = Theme.fromString(opts.theme)

        opts = Object.assign(
            {},
            {
                app: window.app,
                closeButton: false,
                minWidth: 280,
                minHeight: 100,
                margin: theme.margin,
                align: 'right', // left, center, right
                verticalAlign: 'top', // top, middle, bottom
                duration: 5,
                autoClose: true,
                closeDuration: theme.fast
            },
            opts
        )

        super(opts)
    }

    /**
     * Relayouts the position of the message box.
     *
     * @return {Message} Returns the message box for chaining.
     */
    layout() {
        super.layout()

        // horizontal
        switch (this.opts.align) {
            case 'left':
                this.x = this.opts.margin
                break
            case 'center':
                this.x = this.opts.app.size.width / 2 - this.width / 2
                break
            case 'right':
                this.x = this.opts.app.size.width - this.opts.margin - this.width
                break
        }

        // vertical
        switch (this.opts.verticalAlign) {
            case 'top':
                this.y = this.opts.margin
                break
            case 'middle':
                this.y = this.opts.app.size.height / 2 - this.height / 2
                break
            case 'bottom':
                this.y = this.opts.app.size.height - this.opts.margin - this.height
                break
        }
    }

    /**
     * Shows the message box.
     *
     * @private
     */
    show() {
        super.show()

        if (this.opts.autoClose) {
            window.setTimeout(() => {
                this.hide()
            }, this.opts.duration * 1000)
        }
    }
}