import Theme from './theme.js'
/**
* Class that represents a PixiJS AbstractPopup.
* The class is used for various other Popup-like classes
* like Popup, Message, Tooltip...
*
* @class
* @abstract
* @extends PIXI.Graphics
* @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
*/
export default class AbstractPopup extends PIXI.Graphics {
/**
* Creates an instance of an AbstractPopup (only for internal use).
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the popup.
* @param {number} [opts.id=auto generated] - The id of the popup.
* @param {number} [opts.x=0] - The x position of the popup. Can be also set after creation with popup.x = 0.
* @param {number} [opts.y=0] - The y position of the popup. Can be also set after creation with popup.y = 0.
* @param {string|Theme} [opts.theme=dark] - The theme to use for this popup. Possible values are dark, light, red
* or a Theme object.
* @param {string|number|PIXI.Text} [opts.header] - The heading inside the popup as a string, a number (will be
* converted to a text) or as a PIXI.Text object.
* @param {string|number|PIXI.DisplayObject} [opts.content] - A text, a number (will be converted to a text) or
* an PIXI.DisplayObject as the content of the popup.
* @param {number} [opts.minWidth=320] - The minimum width of the popup.
* @param {number} [opts.minHeight=130] - The minimum height of the popup.
* @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from header and content) the the border.
* @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value.
* @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
* @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
* @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
* @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
* @param {object} [opts.headerStyle=Theme.textStyleLarge] - A textstyle object for the styling of the header. See PIXI.TextStyle
* for possible options.
* @param {object} [opts.textStyle=Theme.textStyleSmall] - A textstyle object for the styling of the text. See PIXI.TextStyle
* for possible options.
* @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the popup (which is a rounded rectangle).
* @param {hiddenCallback} [opts.onHidden] - Executed when the popup gets hidden.
* @param {boolean} [opts.visible=true] - Is the popup initially visible (property visible)?
* @param {string} [opts.orientation] - When set to portrait, the popup cannot be displayed in landscape mode. When set
* to landscape, the popup cannot be displayed in portrait mode.
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
header: null, // null or null
content: null, // null or String or PIXI.DisplayObject
minWidth: 320,
minHeight: 130,
maxWidth: null,
padding: theme.padding,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
headerStyle: theme.textStyleLarge,
textStyle: theme.textStyleSmall,
radius: theme.radius,
onHidden: null,
visible: true,
orientation: null
},
opts
)
this.id = this.opts.id
this.headerStyle = new PIXI.TextStyle(this.opts.headerStyle)
this.textStyle = new PIXI.TextStyle(this.opts.textStyle)
if (this.opts.maxWidth) {
this.headerStyle.wordWrap = true
this.headerStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
this.textStyle.wordWrap = true
this.textStyle.wordWrapWidth =
this.opts.maxWidth - 2 * this.opts.padding
}
this.alpha = 0
this.visible = this.opts.visible
this._header = null
this._content = null
// position
this.x = this.opts.x
this.y = this.opts.y
// padding
this.innerPadding = this.opts.padding * 1.5
// interaction
//-----------------
this.interactive = true
this.on('added', e => {
this.show()
})
}
/**
* Creates the framework and instantiates everything.
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
setup() {
// position
//-----------------
this.sy = this.opts.padding
// header
//-----------------
if (this.opts.header != null) {
let header = null
if (this.opts.header instanceof PIXI.Text) {
header = this.opts.header
} else if (typeof this.opts.header === 'number') {
header = new PIXI.Text(
this.opts.header.toString(),
this.headerStyle
)
} else {
header = new PIXI.Text(this.opts.header, this.headerStyle)
}
header.x = this.opts.padding
header.y = this.sy
this.addChild(header)
this.sy += header.height
this._header = header
}
if (this.opts.header && this.opts.content) {
this.sy += this.innerPadding
}
// content
//-----------------
if (this.opts.content != null) {
let content = null
if (typeof this.opts.content === 'string') {
content = new PIXI.Text(this.opts.content, this.textStyle)
} else if (typeof this.opts.content === 'number') {
content = new PIXI.Text(
this.opts.content.toString(),
this.textStyle
)
} else {
content = this.opts.content
}
content.x = this.opts.padding
content.y = this.sy
this.sy += content.height
this.addChild(content)
this._content = content
}
return this
}
/**
* Should be called to refresh the layout of the popup. Can be used after resizing.
*
* @return {AbstractPopup} A reference to the popup for chaining.
*/
layout() {
// wanted width & wanted height
//-----------------
const padding = this.opts.padding
const size = this.getInnerSize()
const width = size.width + 2 * padding
const height = size.height + 2 * padding
this.wantedWidth = Math.max(width, this.opts.minWidth)
this.wantedHeight = Math.max(height, this.opts.minHeight)
if (this.opts.maxWidth) {
this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth)
}
if (this.opts.radius * 2 > this.wantedWidth) {
this.wantedWidth = this.opts.radius * 2
}
if (this.opts.radius * 2 > this.wantedHeight) {
this.wantedHeight = this.opts.radius * 2
}
switch (this.opts.orientation) {
case 'portrait':
if (this.wantedWidth > this.wantedHeight) {
this.wantedHeight = this.wantedWidth
}
break
case 'landscape':
if (this.wantedHeight > this.wantedWidth) {
this.wantedWidth = this.wantedHeight
}
break
}
this.draw()
return this
}
/**
* Draws the canvas.
*
* @private
* @return {AbstractPopup} A reference to the popup for chaining.
*/
draw() {
const square =
Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
const diameter = Math.round(this.opts.radius * 2)
this.clear()
this.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.beginFill(this.opts.fill, this.opts.fillAlpha)
if (square && diameter === this.wantedWidth) {
this.drawCircle(
this.wantedWidth / 2,
this.wantedHeight / 2,
this.opts.radius
)
} else {
this.drawRoundedRect(
0,
0,
this.wantedWidth,
this.wantedHeight,
this.opts.radius
)
}
this.endFill()
return this
}
/**
* Calculates the size of the children of the AbstractPopup.
* Cannot use getBounds() because it is not updated when children
* are removed.
*
* @private
* @returns {object} An JavaScript object width the keys width and height.
*/
getInnerSize() {
let width = 0
let height = 0
if (this._header) {
width = this._header.width
height = this._header.height
}
if (this._header && this._content) {
height += this.innerPadding
}
if (this._content) {
width = Math.max(width, this._content.width)
height += this._content.height
}
return { width, height }
}
/**
* Shows the popup (sets his alpha values to 1).
*
* @param {callback} [cb] - Executed when show animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
show(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 1,
onComplete: () => {
if (cb) {
cb.call(this)
}
}
})
return this
}
/**
* Hides the popup (sets his alpha values to 0).
*
* @param {callback} [cb] - Executed when hide animation was completed.
* @return {AbstractPopup} A reference to the popup for chaining.
*/
hide(cb) {
TweenLite.to(this, this.theme.fast, {
alpha: 0,
onComplete: () => {
this.visible = false
if (cb) {
cb.call(this)
}
}
})
if (this.opts.onHidden) {
this.opts.onHidden.call(this, this)
}
return this
}
/**
* Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
* a string, a number or a PIXI.Text object.
*
* @member {string|number|PIXI.Text}
*/
get header() {
return this._header
}
set header(value) {
if (this._header) {
this._header.destroy()
}
this.opts.header = value
this.setup().layout()
}
/**
* Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
* a string, a number or a PIXI.DisplayObject.
*
* @member {string|number|PIXI.DisplayObject}
*/
get content() {
return this._content
}
set content(value) {
if (this._content) {
this._content.destroy()
}
this.opts.content = value
this.setup().layout()
}
}