import Theme from './theme.js' import Popup from './popup.js' /** * Class that represents a PixiJS PopupMenu. * * @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. * * @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) opts = Object.assign( {}, { items: [], margin: theme.margin / 2, textStyle: theme.textStyle, closeOnPopup: true }, opts ) super(opts) } /** * Creates children and instantiates everything. * * @private * @return {PopupMenu} A reference to the popupmenu for chaining. */ setup() { // content //----------------- const content = new PIXI.Container() let y = 0 for (let item of this.opts.items) { let object = null if (item.label) { object = new PIXI.Text( item.label, item.textStyle || this.opts.textStyle ) } else { object = item.content } object.y = y if (item.action) { if (item.disabled) { object.alpha = 0.5 } else { object.interactive = true object.buttonMode = true } object.on('pointerover', e => { TweenLite.to(object, this.theme.fast, { alpha: 0.83, overwrite: 'none' }) }) object.on('pointerout', e => { TweenLite.to(object, this.theme.fast, { alpha: 1, overwrite: 'none' }) }) object.on('pointerup', e => { 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() } }