iwmlib/lib/pixi/popupmenu.js

121 lines
3.6 KiB
JavaScript
Raw Normal View History

2019-03-21 09:57:27 +01:00
import Theme from './theme.js'
import Popup from './popup.js'
/**
* Class that represents a PixiJS PopupMenu.
2019-07-18 12:26:39 +02:00
*
2019-03-21 09:57:27 +01:00
* @example
* // Create the button and the modal when clicked
* const button = new Button({
* label: 'Show PopupMenu',
* action: e => {
* const popupmenu = new PopupMenu({
* items: [
* {label: 'Save', action: () => alert('Saved')},
* {label: 'Edit', action: () => alert('Edited')},
* {label: 'Delete', action: () => alert('Deleted')}
* ]
* })
* app.scene.addChild(popupmenu)
* }
* })
*
* // Add the button to a DisplayObject
* app.scene.addChild(button)
*
* @class
* @extends Popup
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest}
*/
export default class PopupMenu extends Popup {
/**
* Creates an instance of a PopupMenu.
2019-07-18 12:26:39 +02:00
*
2019-03-21 09:57:27 +01:00
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the modal.
* @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object.
* If an object has a label property, a PIXI.Text object is created (using the textStyle property).
* If an object hasn't a label property, it must contain a content property which has to be a
* PIXI.DisplayObject.
* @param {number} [opts.margin=Theme.margin / 2] - The app where the modal belongs to.
* @param {object} [opts.textStyle=Theme.textStyle] - The color of the background.
* @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
*/
constructor(opts = {}) {
const theme = Theme.fromString(opts.theme)
2019-07-18 12:26:39 +02:00
opts = Object.assign(
{},
{
items: [],
margin: theme.margin / 2,
textStyle: theme.textStyle,
2022-10-04 10:51:35 +02:00
closeOnPopup: true,
2019-07-18 12:26:39 +02:00
},
opts
)
2019-03-21 09:57:27 +01:00
super(opts)
}
2019-07-18 12:26:39 +02:00
2019-03-21 09:57:27 +01:00
/**
* Creates children and instantiates everything.
2019-07-18 12:26:39 +02:00
*
2019-03-21 09:57:27 +01:00
* @private
* @return {PopupMenu} A reference to the popupmenu for chaining.
*/
setup() {
// content
//-----------------
const content = new PIXI.Container()
2019-07-18 12:26:39 +02:00
2019-03-21 09:57:27 +01:00
let y = 0
for (let item of this.opts.items) {
let object = null
if (item.label) {
2019-07-30 16:56:29 +02:00
object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle)
2019-03-21 09:57:27 +01:00
} else {
object = item.content
}
object.y = y
if (item.action) {
if (item.disabled) {
2019-07-18 12:26:39 +02:00
object.alpha = 0.5
2019-03-21 09:57:27 +01:00
} else {
object.interactive = true
object.buttonMode = true
}
2022-10-04 10:51:35 +02:00
object.on('pointerover', (e) => {
2019-07-18 12:26:39 +02:00
TweenLite.to(object, this.theme.fast, {
alpha: 0.83,
2022-10-04 10:51:35 +02:00
overwrite: 'none',
2019-07-18 12:26:39 +02:00
})
2019-03-21 09:57:27 +01:00
})
2022-10-04 10:51:35 +02:00
object.on('pointerout', (e) => {
2019-07-18 12:26:39 +02:00
TweenLite.to(object, this.theme.fast, {
alpha: 1,
2022-10-04 10:51:35 +02:00
overwrite: 'none',
2019-07-18 12:26:39 +02:00
})
2019-03-21 09:57:27 +01:00
})
2022-10-04 10:51:35 +02:00
object.on('pointerup', (e) => {
2019-03-21 09:57:27 +01:00
item.action.call(object, e, object)
if (this.opts.closeOnAction) {
this.hide()
}
})
}
content.addChild(object)
y += object.height + this.opts.margin
}
this.opts.content = content
super.setup()
}
}