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
lib/pixi/scrollbox.js
+223 -201
View File
@@ -1,5 +1,3 @@
/**
* pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
*/
@@ -26,26 +24,29 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
* @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
*/
constructor(options)
{
constructor(options) {
super()
this.options = Object.assign({}, {
boxWidth: 100,
boxHeight: 100,
scrollbarSize: 10,
scrollbarBackground: 14540253,
scrollbarBackgroundAlpha: 1,
scrollbarForeground: 8947848,
scrollbarForegroundAlpha: 1,
dragScroll: true,
stopPropagation: true,
scrollbarOffsetHorizontal: 0,
scrollbarOffsetVertical: 0,
underflow: 'top-left',
fadeScrollbar: false,
fadeWait: 3000,
fadeEase: 'easeInOutSine'
}, options)
this.options = Object.assign(
{},
{
boxWidth: 100,
boxHeight: 100,
scrollbarSize: 10,
scrollbarBackground: 14540253,
scrollbarBackgroundAlpha: 1,
scrollbarForeground: 8947848,
scrollbarForegroundAlpha: 1,
dragScroll: true,
stopPropagation: true,
scrollbarOffsetHorizontal: 0,
scrollbarOffsetVertical: 0,
underflow: 'top-left',
fadeScrollbar: false,
fadeWait: 3000,
fadeEase: 'easeInOutSine'
},
options
)
this.ease = new PIXI.extras.Ease.list()
this.on('added', event => {
@@ -57,10 +58,15 @@ export default class Scrollbox extends PIXI.Container {
* you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
* @type {PIXI.extras.Viewport}
*/
this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
this.content
.decelerate()
.on('moved', () => this._drawScrollbars())
this.content = this.addChild(
new PIXI.extras.Viewport({
passiveWheel: this.options.stopPropagation,
stopPropagation: this.options.stopPropagation,
screenWidth: this.options.boxWidth,
screenHeight: this.options.boxHeight
})
)
this.content.decelerate().on('moved', () => this._drawScrollbars())
/**
* graphics element for drawing the scrollbars
@@ -82,12 +88,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of horizontal scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetHorizontal()
{
get scrollbarOffsetHorizontal() {
return this.options.scrollbarOffsetHorizontal
}
set scrollbarOffsetHorizontal(value)
{
set scrollbarOffsetHorizontal(value) {
this.options.scrollbarOffsetHorizontal = value
}
@@ -95,12 +99,10 @@ export default class Scrollbox extends PIXI.Container {
* offset of vertical scrollbar (in pixels)
* @type {number}
*/
get scrollbarOffsetVertical()
{
get scrollbarOffsetVertical() {
return this.options.scrollbarOffsetVertical
}
set scrollbarOffsetVertical(value)
{
set scrollbarOffsetVertical(value) {
this.options.scrollbarOffsetVertical = value
}
@@ -108,14 +110,11 @@ export default class Scrollbox extends PIXI.Container {
* disable the scrollbox (if set to true this will also remove the mask)
* @type {boolean}
*/
get disable()
{
get disable() {
return this._disabled
}
set disable(value)
{
if (this._disabled !== value)
{
set disable(value) {
if (this._disabled !== value) {
this._disabled = value
this.update()
}
@@ -125,12 +124,10 @@ export default class Scrollbox extends PIXI.Container {
* call stopPropagation on any events that impact scrollbox
* @type {boolean}
*/
get stopPropagation()
{
get stopPropagation() {
return this.options.stopPropagation
}
set stopPropagation(value)
{
set stopPropagation(value) {
this.options.stopPropagation = value
}
@@ -138,19 +135,14 @@ export default class Scrollbox extends PIXI.Container {
* user may drag the content area to scroll content
* @type {boolean}
*/
get dragScroll()
{
get dragScroll() {
return this.options.dragScroll
}
set dragScroll(value)
{
set dragScroll(value) {
this.options.dragScroll = value
if (value)
{
if (value) {
this.content.drag()
}
else
{
} else {
this.content.removePlugin('drag')
}
this.update()
@@ -160,12 +152,10 @@ export default class Scrollbox extends PIXI.Container {
* width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
* @type {number}
*/
get boxWidth()
{
get boxWidth() {
return this.options.boxWidth
}
set boxWidth(value)
{
set boxWidth(value) {
this.options.boxWidth = value
this.content.screenWidth = value
this.update()
@@ -178,12 +168,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflow()
{
get overflow() {
return this.options.overflow
}
set overflow(value)
{
set overflow(value) {
this.options.overflow = value
this.options.overflowX = value
this.options.overflowY = value
@@ -197,12 +185,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowX()
{
get overflowX() {
return this.options.overflowX
}
set overflowX(value)
{
set overflowX(value) {
this.options.overflowX = value
this.update()
}
@@ -214,12 +200,10 @@ export default class Scrollbox extends PIXI.Container {
* auto = if content is larger than box size, then show scrollbar
* @type {string}
*/
get overflowY()
{
get overflowY() {
return this.options.overflowY
}
set overflowY(value)
{
set overflowY(value) {
this.options.overflowY = value
this.update()
}
@@ -228,12 +212,10 @@ export default class Scrollbox extends PIXI.Container {
* height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
* @type {number}
*/
get boxHeight()
{
get boxHeight() {
return this.options.boxHeight
}
set boxHeight(value)
{
set boxHeight(value) {
this.options.boxHeight = value
this.content.screenHeight = value
this.update()
@@ -243,12 +225,10 @@ export default class Scrollbox extends PIXI.Container {
* scrollbar size in pixels
* @type {number}
*/
get scrollbarSize()
{
get scrollbarSize() {
return this.options.scrollbarSize
}
set scrollbarSize(value)
{
set scrollbarSize(value) {
this.options.scrollbarSize = value
}
@@ -257,9 +237,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number}
* @readonly
*/
get contentWidth()
{
return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
get contentWidth() {
return (
this.options.boxWidth -
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
)
}
/**
@@ -267,9 +249,11 @@ export default class Scrollbox extends PIXI.Container {
* @type {number}
* @readonly
*/
get contentHeight()
{
return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
get contentHeight() {
return (
this.options.boxHeight -
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
)
}
/**
@@ -277,8 +261,7 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean}
* @readonly
*/
get isScrollbarVertical()
{
get isScrollbarVertical() {
return this._isScrollbarVertical
}
@@ -287,24 +270,21 @@ export default class Scrollbox extends PIXI.Container {
* @type {boolean}
* @readonly
*/
get isScrollbarHorizontal()
{
get isScrollbarHorizontal() {
return this._isScrollbarHorizontal
}
/**
* top coordinate of scrollbar
*/
get scrollTop()
{
get scrollTop() {
return this.content.top
}
/**
* left coordinate of scrollbar
*/
get scrollLeft()
{
get scrollLeft() {
return this.content.left
}
@@ -312,12 +292,10 @@ export default class Scrollbox extends PIXI.Container {
* width of content area
* if not set then it uses content.width to calculate width
*/
get scrollWidth()
{
get scrollWidth() {
return this._scrollWidth || this.content.width
}
set scrollWidth(value)
{
set scrollWidth(value) {
this._scrollWidth = value
}
@@ -325,12 +303,10 @@ export default class Scrollbox extends PIXI.Container {
* height of content area
* if not set then it uses content.height to calculate height
*/
get scrollHeight()
{
get scrollHeight() {
return this._scrollHeight || this.content.height
}
set scrollHeight(value)
{
set scrollHeight(value) {
this._scrollHeight = value
}
@@ -338,52 +314,111 @@ export default class Scrollbox extends PIXI.Container {
* draws scrollbars
* @private
*/
_drawScrollbars()
{
this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight
_drawScrollbars() {
this._isScrollbarHorizontal =
this.overflowX === 'scroll'
? true
: ['hidden', 'none'].indexOf(this.overflowX) !== -1
? false
: this.scrollWidth > this.options.boxWidth
this._isScrollbarVertical =
this.overflowY === 'scroll'
? true
: ['hidden', 'none'].indexOf(this.overflowY) !== -1
? false
: this.scrollHeight > this.options.boxHeight
this.scrollbar.clear()
let options = {}
options.left = 0
options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.right =
this.scrollWidth +
(this._isScrollbarVertical ? this.options.scrollbarSize : 0)
options.top = 0
options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
options.bottom =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
const width =
this.scrollWidth +
(this.isScrollbarVertical ? this.options.scrollbarSize : 0)
const height =
this.scrollHeight +
(this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
this.scrollbarTop = (this.content.top / height) * this.boxHeight
this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop
this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight
this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight
this.scrollbarHeight =
this.scrollbarTop + this.scrollbarHeight > this.boxHeight
? this.boxHeight - this.scrollbarTop
: this.scrollbarHeight
this.scrollbarLeft = (this.content.left / width) * this.boxWidth
this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft
this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth
this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth
if (this.isScrollbarVertical)
{
this.scrollbarWidth =
this.scrollbarWidth + this.scrollbarLeft > this.boxWidth
? this.boxWidth - this.scrollbarLeft
: this.scrollbarWidth
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
0,
this.scrollbarSize,
this.boxHeight
)
.endFill()
}
if (this.isScrollbarHorizontal)
{
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
.drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
.beginFill(
this.options.scrollbarBackground,
this.options.scrollbarBackgroundAlpha
)
.drawRect(
0,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.boxWidth,
this.scrollbarSize
)
.endFill()
}
if (this.isScrollbarVertical)
{
if (this.isScrollbarVertical) {
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.boxWidth -
this.scrollbarSize +
this.options.scrollbarOffsetVertical,
this.scrollbarTop,
this.scrollbarSize,
this.scrollbarHeight
)
.endFill()
}
if (this.isScrollbarHorizontal)
{
if (this.isScrollbarHorizontal) {
this.scrollbar
.beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
.drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
.beginFill(
this.options.scrollbarForeground,
this.options.scrollbarForegroundAlpha
)
.drawRect(
this.scrollbarLeft,
this.boxHeight -
this.scrollbarSize +
this.options.scrollbarOffsetHorizontal,
this.scrollbarWidth,
this.scrollbarSize
)
.endFill()
}
// this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
@@ -394,8 +429,7 @@ export default class Scrollbox extends PIXI.Container {
* draws mask layer
* @private
*/
_drawMask()
{
_drawMask() {
this._maskContent
.beginFill(0)
.drawRect(0, 0, this.boxWidth, this.boxHeight)
@@ -406,19 +440,20 @@ export default class Scrollbox extends PIXI.Container {
/**
* call when scrollbox content changes
*/
update()
{
update() {
this.content.mask = null
this._maskContent.clear()
if (!this._disabled)
{
if (!this._disabled) {
this._drawScrollbars()
this._drawMask()
if (this.options.dragScroll)
{
const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y'
if (direction !== null)
{
if (this.options.dragScroll) {
const direction =
this.isScrollbarHorizontal && this.isScrollbarVertical
? 'all'
: this.isScrollbarHorizontal
? 'x'
: 'y'
if (direction !== null) {
this.content
.drag({ clampWheel: true, direction })
.clamp({ direction, underflow: this.options.underflow })
@@ -430,18 +465,18 @@ export default class Scrollbox extends PIXI.Container {
/**
* show the scrollbar and restart the timer for fade if options.fade is set
*/
activateFade()
{
if (this.options.fade)
{
if (this.fade)
{
activateFade() {
if (this.options.fade) {
if (this.fade) {
this.ease.remove(this.fade)
}
this.scrollbar.alpha = 1
const time = this.options.fade === true ? 1000 : this.options.fade
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase })
this.fade.on('each', () => this.content.dirty = true)
this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, {
wait: this.options.fadeWait,
ease: this.options.fadeEase
})
this.fade.on('each', () => (this.content.dirty = true))
}
}
@@ -450,60 +485,47 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarDown(e)
{
scrollbarDown(e) {
const local = this.toLocal(e.data.global)
if (this.isScrollbarHorizontal)
{
if (local.y > this.boxHeight - this.scrollbarSize)
{
if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
{
if (this.isScrollbarHorizontal) {
if (local.y > this.boxHeight - this.scrollbarSize) {
if (
local.x >= this.scrollbarLeft &&
local.x <= this.scrollbarLeft + this.scrollbarWidth
) {
this.pointerDown = { type: 'horizontal', last: local }
}
else
{
if (local.x > this.scrollbarLeft)
{
} else {
if (local.x > this.scrollbarLeft) {
this.content.left += this.content.worldScreenWidth
this.update()
}
else
{
} else {
this.content.left -= this.content.worldScreenWidth
this.update()
}
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
return
}
}
if (this.isScrollbarVertical)
{
if (local.x > this.boxWidth - this.scrollbarSize)
{
if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
{
if (this.isScrollbarVertical) {
if (local.x > this.boxWidth - this.scrollbarSize) {
if (
local.y >= this.scrollbarTop &&
local.y <= this.scrollbarTop + this.scrollbarWidth
) {
this.pointerDown = { type: 'vertical', last: local }
}
else
{
if (local.y > this.scrollbarTop)
{
} else {
if (local.y > this.scrollbarTop) {
this.content.top += this.content.worldScreenHeight
this.update()
}
else
{
} else {
this.content.top -= this.content.worldScreenHeight
this.update()
}
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
return
@@ -516,26 +538,20 @@ export default class Scrollbox extends PIXI.Container {
* @param {PIXI.interaction.InteractionEvent} e
* @private
*/
scrollbarMove(e)
{
if (this.pointerDown)
{
if (this.pointerDown.type === 'horizontal')
{
scrollbarMove(e) {
if (this.pointerDown) {
if (this.pointerDown.type === 'horizontal') {
const local = this.toLocal(e.data.global)
this.content.left += local.x - this.pointerDown.last.x
this.pointerDown.last = local
this.update()
}
else if (this.pointerDown.type === 'vertical')
{
} else if (this.pointerDown.type === 'vertical') {
const local = this.toLocal(e.data.global)
this.content.top += local.y - this.pointerDown.last.y
this.pointerDown.last = local
this.update()
}
if (this.options.stopPropagation)
{
if (this.options.stopPropagation) {
e.stopPropagation()
}
}
@@ -545,8 +561,7 @@ export default class Scrollbox extends PIXI.Container {
* handle pointer down on scrollbar
* @private
*/
scrollbarUp()
{
scrollbarUp() {
this.pointerDown = null
}
@@ -558,19 +573,27 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
* @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
*/
resize(options)
{
this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth
this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight
if (options.scrollWidth)
{
resize(options) {
this.options.boxWidth =
typeof options.boxWidth !== 'undefined'
? options.boxWidth
: this.options.boxWidth
this.options.boxHeight =
typeof options.boxHeight !== 'undefined'
? options.boxHeight
: this.options.boxHeight
if (options.scrollWidth) {
this.scrollWidth = options.scrollWidth
}
if (options.scrollHeight)
{
if (options.scrollHeight) {
this.scrollHeight = options.scrollHeight
}
this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight)
this.content.resize(
this.options.boxWidth,
this.options.boxHeight,
this.scrollWidth,
this.scrollHeight
)
this.update()
}
@@ -581,8 +604,7 @@ export default class Scrollbox extends PIXI.Container {
* @param {number} width
* @param {number} height
*/
ensureVisible(x, y, width, height)
{
ensureVisible(x, y, width, height) {
this.content.ensureVisible(x, y, width, height)
this._drawScrollbars()
}