Prettified all files.
This commit is contained in:
+183
-121
@@ -47,7 +47,6 @@ import Events from '../events.js'
|
||||
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
|
||||
*/
|
||||
export default class Button extends PIXI.Container {
|
||||
|
||||
/**
|
||||
* Creates an instance of a Button.
|
||||
*
|
||||
@@ -106,62 +105,76 @@ export default class Button extends PIXI.Container {
|
||||
* @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
|
||||
*/
|
||||
constructor(opts = {}) {
|
||||
|
||||
super()
|
||||
|
||||
const theme = Theme.fromString(opts.theme)
|
||||
this.theme = theme
|
||||
|
||||
this.opts = Object.assign({}, {
|
||||
id: PIXI.utils.uid(),
|
||||
label: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
minWidth: 44,
|
||||
minHeight: 44,
|
||||
padding: theme.padding,
|
||||
icon: undefined,
|
||||
iconActive: undefined,
|
||||
iconPosition: 'left',
|
||||
iconColor: theme.iconColor,
|
||||
iconColorActive: theme.iconColorActive,
|
||||
fill: theme.fill,
|
||||
fillAlpha: theme.fillAlpha,
|
||||
fillActive: theme.fillActive,
|
||||
fillActiveAlpha: theme.fillActiveAlpha,
|
||||
stroke: theme.stroke,
|
||||
strokeWidth: theme.strokeWidth,
|
||||
strokeAlpha: theme.strokeAlpha,
|
||||
strokeActive: theme.strokeActive,
|
||||
strokeActiveWidth: theme.strokeActiveWidth,
|
||||
strokeActiveAlpha: theme.strokeActiveAlpha,
|
||||
textStyle: theme.textStyle,
|
||||
textStyleActive: theme.textStyleActive,
|
||||
style: 'default',
|
||||
radius: theme.radius,
|
||||
disabled: false,
|
||||
active: false,
|
||||
action: null,
|
||||
beforeAction: null,
|
||||
afterAction: null,
|
||||
type: 'default',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
tooltip: null,
|
||||
badge: null,
|
||||
visible: true
|
||||
}, opts)
|
||||
this.opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
id: PIXI.utils.uid(),
|
||||
label: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
minWidth: 44,
|
||||
minHeight: 44,
|
||||
padding: theme.padding,
|
||||
icon: undefined,
|
||||
iconActive: undefined,
|
||||
iconPosition: 'left',
|
||||
iconColor: theme.iconColor,
|
||||
iconColorActive: theme.iconColorActive,
|
||||
fill: theme.fill,
|
||||
fillAlpha: theme.fillAlpha,
|
||||
fillActive: theme.fillActive,
|
||||
fillActiveAlpha: theme.fillActiveAlpha,
|
||||
stroke: theme.stroke,
|
||||
strokeWidth: theme.strokeWidth,
|
||||
strokeAlpha: theme.strokeAlpha,
|
||||
strokeActive: theme.strokeActive,
|
||||
strokeActiveWidth: theme.strokeActiveWidth,
|
||||
strokeActiveAlpha: theme.strokeActiveAlpha,
|
||||
textStyle: theme.textStyle,
|
||||
textStyleActive: theme.textStyleActive,
|
||||
style: 'default',
|
||||
radius: theme.radius,
|
||||
disabled: false,
|
||||
active: false,
|
||||
action: null,
|
||||
beforeAction: null,
|
||||
afterAction: null,
|
||||
type: 'default',
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
tooltip: null,
|
||||
badge: null,
|
||||
visible: true
|
||||
},
|
||||
opts
|
||||
)
|
||||
|
||||
this.id = this.opts.id
|
||||
|
||||
if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
|
||||
if (
|
||||
typeof this.opts.icon === 'undefined' &&
|
||||
typeof this.opts.iconActive !== 'undefined'
|
||||
) {
|
||||
this.opts.icon = this.opts.iconActive
|
||||
} else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
|
||||
} else if (
|
||||
typeof this.opts.icon !== 'undefined' &&
|
||||
typeof this.opts.iconActive === 'undefined'
|
||||
) {
|
||||
this.opts.iconActive = this.opts.icon
|
||||
}
|
||||
|
||||
if (this.opts.style === 'link') {
|
||||
Object.assign(this.opts, { strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0 })
|
||||
Object.assign(this.opts, {
|
||||
strokeAlpha: 0,
|
||||
strokeActiveAlpha: 0,
|
||||
fillAlpha: 0,
|
||||
fillActiveAlpha: 0
|
||||
})
|
||||
}
|
||||
|
||||
this._active = null
|
||||
@@ -200,7 +213,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
setup() {
|
||||
|
||||
// Button
|
||||
//-----------------
|
||||
let button = new PIXI.Graphics()
|
||||
@@ -222,18 +234,27 @@ export default class Button extends PIXI.Container {
|
||||
// Icon
|
||||
//-----------------
|
||||
if (this.opts.icon) {
|
||||
this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor)
|
||||
this.iconInactive = this.loadIcon(
|
||||
this.opts.icon,
|
||||
this.opts.iconColor
|
||||
)
|
||||
}
|
||||
|
||||
if (this.opts.iconActive) {
|
||||
this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive)
|
||||
this.iconActive = this.loadIcon(
|
||||
this.opts.iconActive,
|
||||
this.opts.iconColorActive
|
||||
)
|
||||
}
|
||||
|
||||
// interaction
|
||||
//-----------------
|
||||
this.button.on('pointerover', e => {
|
||||
this.capture(e)
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 0.83,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
this.button.on('pointermove', e => {
|
||||
@@ -242,13 +263,19 @@ export default class Button extends PIXI.Container {
|
||||
|
||||
this.button.on('pointerout', e => {
|
||||
this.capture(e)
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: 1, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 1,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
this.button.on('pointerdown', e => {
|
||||
//this.capture(e)
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .7, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 0.7,
|
||||
overwrite: 'none'
|
||||
})
|
||||
})
|
||||
|
||||
this.button.on('pointerup', e => {
|
||||
@@ -261,7 +288,10 @@ export default class Button extends PIXI.Container {
|
||||
this.opts.action.call(this, e, this)
|
||||
}
|
||||
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, { alpha: .83, overwrite: 'none' })
|
||||
TweenLite.to([this.button, this.content], this.theme.fast, {
|
||||
alpha: 0.83,
|
||||
overwrite: 'none'
|
||||
})
|
||||
|
||||
if (this.opts.type === 'checkbox') {
|
||||
this.active = !this.active
|
||||
@@ -278,15 +308,22 @@ export default class Button extends PIXI.Container {
|
||||
|
||||
// active
|
||||
//-----------------
|
||||
this.active = this.opts.active // calls .layout()
|
||||
this.active = this.opts.active // calls .layout()
|
||||
|
||||
// tooltip
|
||||
//-----------------
|
||||
if (this.opts.tooltip) {
|
||||
if (typeof this.opts.tooltip === 'string') {
|
||||
this.tooltip = new Tooltip({ object: this, content: this.opts.tooltip })
|
||||
this.tooltip = new Tooltip({
|
||||
object: this,
|
||||
content: this.opts.tooltip
|
||||
})
|
||||
} else {
|
||||
this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
|
||||
this.opts.tooltip = Object.assign(
|
||||
{},
|
||||
{ object: this },
|
||||
this.opts.tooltip
|
||||
)
|
||||
this.tooltip = new Tooltip(this.opts.tooltip)
|
||||
}
|
||||
}
|
||||
@@ -294,12 +331,15 @@ export default class Button extends PIXI.Container {
|
||||
// badge
|
||||
//-----------------
|
||||
if (this.opts.badge) {
|
||||
let opts = Object.assign({}, {
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
offsetLeft: 0,
|
||||
offsetTop: 0
|
||||
})
|
||||
let opts = Object.assign(
|
||||
{},
|
||||
{
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
offsetLeft: 0,
|
||||
offsetTop: 0
|
||||
}
|
||||
)
|
||||
if (typeof this.opts.badge === 'string') {
|
||||
opts = Object.assign(opts, { content: this.opts.badge })
|
||||
} else {
|
||||
@@ -309,25 +349,35 @@ export default class Button extends PIXI.Container {
|
||||
const badge = new Badge(opts)
|
||||
|
||||
switch (opts.align) {
|
||||
case 'left':
|
||||
badge.x = this.x - badge.width / 2 + opts.offsetLeft
|
||||
break
|
||||
case 'center':
|
||||
badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
|
||||
break
|
||||
case 'right':
|
||||
badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
|
||||
case 'left':
|
||||
badge.x = this.x - badge.width / 2 + opts.offsetLeft
|
||||
break
|
||||
case 'center':
|
||||
badge.x =
|
||||
this.x +
|
||||
this.width / 2 -
|
||||
badge.width / 2 +
|
||||
opts.offsetLeft
|
||||
break
|
||||
case 'right':
|
||||
badge.x =
|
||||
this.x + this.width - badge.width / 2 + opts.offsetLeft
|
||||
}
|
||||
|
||||
switch (opts.verticalAlign) {
|
||||
case 'top':
|
||||
badge.y = this.y - badge.height / 2 + opts.offsetTop
|
||||
break
|
||||
case 'middle':
|
||||
badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
|
||||
break
|
||||
case 'bottom':
|
||||
badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
|
||||
case 'top':
|
||||
badge.y = this.y - badge.height / 2 + opts.offsetTop
|
||||
break
|
||||
case 'middle':
|
||||
badge.y =
|
||||
this.y +
|
||||
this.height / 2 -
|
||||
badge.height / 2 +
|
||||
opts.offsetTop
|
||||
break
|
||||
case 'bottom':
|
||||
badge.y =
|
||||
this.y + this.height - badge.height / 2 + opts.offsetTop
|
||||
}
|
||||
|
||||
this.addChild(badge)
|
||||
@@ -348,7 +398,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
layout() {
|
||||
|
||||
// Clear content
|
||||
//-----------------
|
||||
this.removeChild(this.content)
|
||||
@@ -434,18 +483,17 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
layoutInnerContent() {
|
||||
|
||||
for (let child of this.content.children) {
|
||||
switch (this.opts.verticalAlign) {
|
||||
case 'top':
|
||||
child.y = 0
|
||||
break
|
||||
case 'middle':
|
||||
child.y = this.content.height / 2 - child.height / 2
|
||||
break
|
||||
case 'bottom':
|
||||
child.y = this.content.height - child.height
|
||||
break
|
||||
case 'top':
|
||||
child.y = 0
|
||||
break
|
||||
case 'middle':
|
||||
child.y = this.content.height / 2 - child.height / 2
|
||||
break
|
||||
case 'bottom':
|
||||
child.y = this.content.height - child.height
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@@ -460,29 +508,30 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
layoutContent() {
|
||||
|
||||
switch (this.opts.align) {
|
||||
case 'left':
|
||||
this.content.x = this.opts.padding
|
||||
break
|
||||
case 'center':
|
||||
this.content.x = ((this._width - this.content.width) / 2)
|
||||
break
|
||||
case 'right':
|
||||
this.content.x = this._width - this.opts.padding - this.content.width
|
||||
break
|
||||
case 'left':
|
||||
this.content.x = this.opts.padding
|
||||
break
|
||||
case 'center':
|
||||
this.content.x = (this._width - this.content.width) / 2
|
||||
break
|
||||
case 'right':
|
||||
this.content.x =
|
||||
this._width - this.opts.padding - this.content.width
|
||||
break
|
||||
}
|
||||
|
||||
switch (this.opts.verticalAlign) {
|
||||
case 'top':
|
||||
this.content.y = this.opts.padding
|
||||
break
|
||||
case 'middle':
|
||||
this.content.y = (this._height - this.content.height) / 2
|
||||
break
|
||||
case 'bottom':
|
||||
this.content.y = this._height - this.opts.padding - this.content.height
|
||||
break
|
||||
case 'top':
|
||||
this.content.y = this.opts.padding
|
||||
break
|
||||
case 'middle':
|
||||
this.content.y = (this._height - this.content.height) / 2
|
||||
break
|
||||
case 'bottom':
|
||||
this.content.y =
|
||||
this._height - this.opts.padding - this.content.height
|
||||
break
|
||||
}
|
||||
|
||||
return this
|
||||
@@ -495,16 +544,32 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
draw() {
|
||||
|
||||
this.button.clear()
|
||||
if (this.active) {
|
||||
this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
|
||||
this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
|
||||
this.button.lineStyle(
|
||||
this.opts.strokeActiveWidth,
|
||||
this.opts.strokeActive,
|
||||
this.opts.strokeActiveAlpha
|
||||
)
|
||||
this.button.beginFill(
|
||||
this.opts.fillActive,
|
||||
this.opts.fillActiveAlpha
|
||||
)
|
||||
} else {
|
||||
this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
|
||||
this.button.lineStyle(
|
||||
this.opts.strokeWidth,
|
||||
this.opts.stroke,
|
||||
this.opts.strokeAlpha
|
||||
)
|
||||
this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
|
||||
}
|
||||
this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius)
|
||||
this.button.drawRoundedRect(
|
||||
0,
|
||||
0,
|
||||
this._width,
|
||||
this._height,
|
||||
this.opts.radius
|
||||
)
|
||||
this.button.endFill()
|
||||
|
||||
return this
|
||||
@@ -519,7 +584,6 @@ export default class Button extends PIXI.Container {
|
||||
return this._active
|
||||
}
|
||||
set active(value) {
|
||||
|
||||
this._active = value
|
||||
|
||||
if (this._active) {
|
||||
@@ -544,18 +608,17 @@ export default class Button extends PIXI.Container {
|
||||
return this._disabled
|
||||
}
|
||||
set disabled(value) {
|
||||
|
||||
this._disabled = value
|
||||
|
||||
if (this._disabled) {
|
||||
this.button.interactive = false
|
||||
this.button.buttonMode = false
|
||||
this.button.alpha = .5
|
||||
this.button.alpha = 0.5
|
||||
if (this.icon) {
|
||||
this.icon.alpha = .5
|
||||
this.icon.alpha = 0.5
|
||||
}
|
||||
if (this.text) {
|
||||
this.text.alpha = .5
|
||||
this.text.alpha = 0.5
|
||||
}
|
||||
} else {
|
||||
this.button.interactive = true
|
||||
@@ -576,7 +639,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
show() {
|
||||
|
||||
this.opts.strokeAlpha = 1
|
||||
this.opts.strokeActiveAlpha = 1
|
||||
this.opts.fillAlpha = 1
|
||||
@@ -593,7 +655,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {Button} A reference to the button for chaining.
|
||||
*/
|
||||
hide() {
|
||||
|
||||
this.opts.strokeAlpha = 0
|
||||
this.opts.strokeActiveAlpha = 0
|
||||
this.opts.fillAlpha = 0
|
||||
@@ -613,7 +674,6 @@ export default class Button extends PIXI.Container {
|
||||
* @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
|
||||
*/
|
||||
loadIcon(icon, color) {
|
||||
|
||||
let displayObject = null
|
||||
|
||||
if (icon instanceof PIXI.DisplayObject) {
|
||||
@@ -623,10 +683,12 @@ export default class Button extends PIXI.Container {
|
||||
if (this.text) {
|
||||
size = this.text.height
|
||||
} else if (this.opts.minHeight) {
|
||||
size = this.opts.minHeight - (2 * this.opts.padding)
|
||||
size = this.opts.minHeight - 2 * this.opts.padding
|
||||
}
|
||||
|
||||
const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
|
||||
const url = Button.iconIsUrl(icon)
|
||||
? icon
|
||||
: `../../assets/icons/${icon}.png`
|
||||
const iconTexture = PIXI.Texture.fromImage(url, true)
|
||||
|
||||
const sprite = new PIXI.Sprite(iconTexture)
|
||||
|
||||
Reference in New Issue
Block a user