iwmlib/lib/pixi/message.js

127 lines
4.0 KiB
JavaScript

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)
}
}
}