IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
doc/out/pixi_switch.js.html
+161 -104
View File
@@ -1475,7 +1475,7 @@ import Tooltip from './tooltip.js'
/**
* Class that represents a PixiJS Switch.
*
*
* @example
* // Create the app
* const app = new PIXIApp({
@@ -1483,7 +1483,7 @@ import Tooltip from './tooltip.js'
* width: 900,
* height: 250
* }).setup().run()
*
*
* // Create the switch
* const switch1 = new Switch({
* x: 10,
@@ -1499,10 +1499,9 @@ import Tooltip from './tooltip.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
*/
export default class Switch extends PIXI.Container {
/**
* Creates an instance of a Switch.
*
*
* @constructor
* @param {object} [opts] - An options object to specify to style and behaviour of the switch.
* @param {number} [opts.id=auto generated] - The id of the switch.
@@ -1542,56 +1541,61 @@ export default class Switch extends PIXI.Container {
* @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered.
* @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered.
* @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
* to display.
* to display.
* @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
*/
constructor(opts = {}) {
super()
const theme = Theme.fromString(opts.theme)
this.theme = theme
this.opts = Object.assign({}, {
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * .8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
}, opts)
this.opts = Object.assign(
{},
{
id: PIXI.utils.uid(),
x: 0,
y: 0,
width: 44,
height: 28,
fill: theme.fill,
fillAlpha: theme.fillAlpha,
fillActive: theme.primaryColor,
fillActiveAlpha: theme.fillActiveAlpha,
stroke: theme.stroke,
strokeWidth: theme.strokeWidth,
strokeAlpha: theme.strokeAlpha,
strokeActive: theme.primaryColor,
strokeActiveWidth: theme.strokeActiveWidth,
strokeActiveAlpha: theme.strokeActiveAlpha,
controlFill: theme.stroke,
controlFillAlpha: theme.strokeAlpha,
controlFillActive: theme.stroke,
controlFillActiveAlpha: theme.strokeAlpha,
controlStroke: theme.stroke,
controlStrokeWidth: theme.strokeWidth * 0.8,
controlStrokeAlpha: theme.strokeAlpha,
controlStrokeActive: theme.stroke,
controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
controlStrokeActiveAlpha: theme.strokeActiveAlpha,
duration: theme.fast,
durationActive: theme.fast,
disabled: false,
active: false,
action: null,
actionActive: null,
beforeAction: null,
afterAction: null,
tooltip: null,
visible: true
},
opts
)
this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
this.opts.controlRadius =
this.opts.controlRadius || this.opts.height / 2
this.opts.controlRadiusActive =
this.opts.controlRadiusActive || this.opts.controlRadius
// Validation
//-----------------
@@ -1610,7 +1614,7 @@ export default class Switch extends PIXI.Container {
this.switchObj = null
this.control = null
this.tooltip = null
this.visible = this.opts.visible
// animated
@@ -1637,15 +1641,14 @@ export default class Switch extends PIXI.Container {
//-----------------
this.layout()
}
/**
* Creates children and instantiates everything.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
setup() {
// Switch
//-----------------
let switchObj = new PIXI.Graphics()
@@ -1656,7 +1659,7 @@ export default class Switch extends PIXI.Container {
//-----------------
this.xInactive = this.opts.controlRadius
this.xActive = this.opts.width - this.opts.controlRadiusActive
let control = new PIXI.Graphics()
control.x = this.opts.active ? this.xActive : this.xInactive
control.y = this.opts.height / 2
@@ -1664,23 +1667,22 @@ export default class Switch extends PIXI.Container {
this.control = control
this.addChild(this.control)
// interaction
//-----------------
this.switchObj.on('pointerover', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
})
this.switchObj.on('pointerout', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: 1})
TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
})
this.switchObj.on('pointerdown', e => {
TweenLite.to(this.control, this.theme.fast, {alpha: .7})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
})
this.switchObj.on('pointerup', e => {
if (this.opts.beforeAction) {
this.opts.beforeAction.call(this, e, this)
}
@@ -1697,7 +1699,7 @@ export default class Switch extends PIXI.Container {
}
}
TweenLite.to(this.control, this.theme.fast, {alpha: .83})
TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
if (this.opts.afterAction) {
this.opts.afterAction.call(this, e, this)
@@ -1711,7 +1713,7 @@ export default class Switch extends PIXI.Container {
// active
//-----------------
this.active = this.opts.active
// tooltip
//-----------------
if (this.opts.tooltip) {
@@ -1728,14 +1730,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Should be called to refresh the layout of the switch. Can be used after resizing.
*
*
* @return {Switch} A reference to the switch for chaining.
*/
layout() {
// set position
//-----------------
this.position.set(this.opts.x, this.opts.y)
@@ -1746,28 +1747,50 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Draws the switch to the canvas.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
draw() {
this.switchObj.clear()
if (this.active) {
this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
this.switchObj.lineStyle(
this.opts.strokeActiveWidth,
this.opts.strokeActive,
this.opts.strokeActiveAlpha
)
this.switchObj.beginFill(
this.opts.fillActive,
this.opts.fillActiveAlpha
)
} else {
this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
this.switchObj.lineStyle(
this.opts.strokeWidth,
this.opts.stroke,
this.opts.strokeAlpha
)
this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha)
}
this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
@@ -1776,52 +1799,91 @@ export default class Switch extends PIXI.Container {
// Draw control
this.control.clear()
if (this.active) {
this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha)
this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
this.control.lineStyle(
this.opts.controlStrokeActiveWidth,
this.opts.controlStrokeActive,
this.opts.controlStrokeActiveAlpha
)
this.control.beginFill(
this.opts.controlFillActive,
this.opts.controlFillActiveAlpha
)
this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
} else {
this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha)
this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha)
this.control.lineStyle(
this.opts.controlStrokeWidth,
this.opts.controlStroke,
this.opts.controlStrokeAlpha
)
this.control.beginFill(
this.opts.controlFill,
this.opts.controlFillAlpha
)
this.control.drawCircle(0, 0, this.opts.controlRadius - 1)
}
this.control.endFill()
return this
}
/**
* Draws the animation.
*
*
* @private
* @return {Switch} A reference to the switch for chaining.
*/
drawAnimated() {
this.switchObj.clear()
this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
this.switchObj.lineStyle(
this.tempAnimated.strokeWidth,
this.tempAnimated.stroke,
this.tempAnimated.strokeAlpha
)
this.switchObj.beginFill(
this.tempAnimated.fill,
this.tempAnimated.fillAlpha
)
this.switchObj.moveTo(this.radius, 0)
this.switchObj.lineTo(this.opts.width - this.radius, 0)
this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
this.switchObj.arcTo(
this.opts.width,
0,
this.opts.width,
this.radius,
this.radius
)
this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
this.switchObj.arcTo(
this.opts.width,
this.opts.height,
this.opts.width - this.radius,
this.opts.height,
this.radius
)
this.switchObj.lineTo(this.radius, this.opts.height)
this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
this.switchObj.endFill()
this.control.clear()
this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha)
this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
this.control.lineStyle(
this.tempAnimated.controlStrokeWidth,
this.tempAnimated.controlStroke,
this.tempAnimated.controlStrokeAlpha
)
this.control.beginFill(
this.tempAnimated.controlFill,
this.tempAnimated.controlFillAlpha
)
this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
this.control.endFill()
return this
}
/**
* Gets or sets the active state.
*
*
* @member {boolean}
*/
get active() {
@@ -1829,12 +1891,10 @@ export default class Switch extends PIXI.Container {
}
set active(value) {
this._active = value
if (this._active) {
TweenLite.to(this.control, this.opts.duration, {x: this.xActive})
TweenLite.to(this.control, this.opts.duration, { x: this.xActive })
TweenLite.to(this.tempAnimated, this.opts.duration, {
colorProps: {
fill: this.opts.fillActive,
@@ -1853,10 +1913,10 @@ export default class Switch extends PIXI.Container {
onUpdate: () => this.drawAnimated(),
onComplete: () => this.draw()
})
} else {
TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive})
TweenLite.to(this.control, this.opts.durationActive, {
x: this.xInactive
})
TweenLite.to(this.tempAnimated, this.opts.durationActive, {
colorProps: {
fill: this.opts.fill,
@@ -1877,10 +1937,10 @@ export default class Switch extends PIXI.Container {
})
}
}
/**
* Gets or sets the disabled state. When disabled, the switch cannot be clicked.
*
*
* @member {boolean}
*/
get disabled() {
@@ -1888,14 +1948,13 @@ export default class Switch extends PIXI.Container {
}
set disabled(value) {
this._disabled = value
if (this._disabled) {
this.switchObj.interactive = false
this.switchObj.buttonMode = false
this.switchObj.alpha = .5
this.control.alpha = .5
this.switchObj.alpha = 0.5
this.control.alpha = 0.5
} else {
this.switchObj.interactive = true
this.switchObj.buttonMode = true
@@ -1906,11 +1965,10 @@ export default class Switch extends PIXI.Container {
/**
* Shows the switch (sets his alpha values to 1).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
show() {
this.opts.strokeAlpha = 1
this.opts.strokeActiveAlpha = 1
this.opts.fillAlpha = 1
@@ -1924,14 +1982,13 @@ export default class Switch extends PIXI.Container {
return this
}
/**
* Hides the switch (sets his alpha values to 1).
*
*
* @return {Switch} A reference to the switch for chaining.
*/
hide() {
this.opts.strokeAlpha = 0
this.opts.strokeActiveAlpha = 0
this.opts.fillAlpha = 0
@@ -1959,7 +2016,7 @@ export default class Switch extends PIXI.Container {
<footer class="content-size">
<div class="footer">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Wed Jul 10 2019 11:54:25 GMT+0200 (Mitteleuropäische Sommerzeit)
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Thu Jul 18 2019 12:16:18 GMT+0200 (Mitteleuropäische Sommerzeit)
</div>
</footer>
</div>