127 lines
4.0 KiB
JavaScript
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)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|