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/list.js
+75 -59
View File
@@ -9,10 +9,10 @@ import Events from '../events.js'
* @example
* const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
* const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
*
*
* // Create the list
* const list = new List([elephant1, elephant2])
*
*
* app.scene.addChild(list)
*
* @class
@@ -21,7 +21,6 @@ import Events from '../events.js'
* @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
*/
export default class List extends PIXI.Container {
/**
* Creates an instance of a Flippable.
*
@@ -43,19 +42,22 @@ export default class List extends PIXI.Container {
* scroll your list.
*/
constructor(items = [], opts = {}) {
super()
this.opts = Object.assign({}, {
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
}, opts)
this.opts = Object.assign(
{},
{
padding: 10,
margin: 10,
orientation: 'vertical',
align: 'left',
verticalAlign: 'middle',
width: null,
height: null,
app: null
},
opts
)
this.__items = items
this.__dragging = false
@@ -72,7 +74,6 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
setup() {
// inner container
//--------------------
const container = new PIXI.Container()
@@ -87,7 +88,7 @@ export default class List extends PIXI.Container {
// add items
//--------------------
for(let item of this.__items) {
for (let item of this.__items) {
container.addChild(item)
}
@@ -107,7 +108,9 @@ export default class List extends PIXI.Container {
if (this.opts.app) {
const app = this.opts.app
app.view.addEventListener('mousewheel', event => {
const bounds = this.mask ? this.mask.getBounds() : this.getBounds()
const bounds = this.mask
? this.mask.getBounds()
: this.getBounds()
const x = event.clientX - app.view.getBoundingClientRect().left
const y = event.clientY - app.view.getBoundingClientRect().top
if (bounds.contains(x, y)) {
@@ -131,7 +134,7 @@ export default class List extends PIXI.Container {
setItems(items) {
this.container.removeChildren()
this.__items = items
for(let item of this.__items) {
for (let item of this.__items) {
this.container.addChild(item)
}
this.layout()
@@ -143,14 +146,12 @@ export default class List extends PIXI.Container {
* @return {List} A reference to the list for chaining.
*/
layout() {
const margin = this.opts.margin
let x = margin
let y = margin
for (let item of this.__items) {
item.x = x
item.y = y
@@ -166,13 +167,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'vertical') {
switch (this.opts.align) {
case 'center':
this.__items.forEach(it => it.x = margin + this.width / 2 - it.width / 2)
this.__items.forEach(
it => (it.x = margin + this.width / 2 - it.width / 2)
)
break
case 'right':
this.__items.forEach(it => it.x = margin + this.width - it.width)
this.__items.forEach(
it => (it.x = margin + this.width - it.width)
)
break
default:
this.__items.forEach(it => it.x = margin)
this.__items.forEach(it => (it.x = margin))
break
}
@@ -192,13 +197,17 @@ export default class List extends PIXI.Container {
if (this.opts.orientation === 'horizontal') {
switch (this.opts.verticalAlign) {
case 'top':
this.__items.forEach(it => it.y = margin)
this.__items.forEach(it => (it.y = margin))
break
case 'bottom':
this.__items.forEach(it => it.y = margin + this.height - it.height)
this.__items.forEach(
it => (it.y = margin + this.height - it.height)
)
break
default:
this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2)
this.__items.forEach(
it => (it.y = margin + this.height / 2 - it.height / 2)
)
break
}
@@ -217,13 +226,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerWidth() {
let size = 0
this.__items.forEach(it => size += it.width)
this.__items.forEach(it => (size += it.width))
size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin
@@ -231,13 +239,12 @@ export default class List extends PIXI.Container {
}
/**
*
*
*/
get innerHeight() {
let size = 0
this.__items.forEach(it => size += it.height)
this.__items.forEach(it => (size += it.height))
size += this.opts.padding * (this.__items.length - 1)
size += 2 * this.opts.margin
@@ -246,11 +253,10 @@ export default class List extends PIXI.Container {
/**
* Resizes the list.
*
*
* @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
*/
resize(widthOrHeight) {
if (this.opts.orientation === 'horizontal') {
this.opts.width = widthOrHeight
} else {
@@ -261,12 +267,11 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onStart(event) {
this.__dragging = true
this.capture(event)
@@ -276,21 +281,19 @@ export default class List extends PIXI.Container {
y: this.container.position.y - event.data.global.y
}
TweenLite.killTweensOf(this.container.position, {x: true, y: true})
if (typeof ThrowPropsPlugin != "undefined") {
TweenLite.killTweensOf(this.container.position, { x: true, y: true })
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this.container.position, 'x,y')
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onMove(event) {
if (this.__dragging) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
@@ -302,19 +305,18 @@ export default class List extends PIXI.Container {
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onEnd(event) {
if (this.__dragging) {
this.__dragging = false
this.capture(event)
const throwProps = {}
if (this.opts.orientation === 'horizontal') {
let min = this.opts.width - this.innerWidth
min = min > 0 ? 0 : min
@@ -333,37 +335,48 @@ export default class List extends PIXI.Container {
}
}
if (typeof ThrowPropsPlugin != "undefined") {
ThrowPropsPlugin.to(this.container.position, {
throwProps,
ease: Strong.easeOut,
onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
}, .8, .4)
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.to(
this.container.position,
{
throwProps,
ease: Strong.easeOut,
onComplete: () =>
ThrowPropsPlugin.untrack(this.container.position)
},
0.8,
0.4
)
}
}
}
/**
*
*
* @private
* @param {*} event
* @param {*} event
*/
onScroll(event) {
this.capture(event)
if (this.opts.orientation === 'horizontal') {
this.container.position.x -= event.deltaX
if (this.container.position.x > 0) {
this.container.position.x = 0
} else if (this.container.position.x + this.innerWidth < this.opts.width) {
} else if (
this.container.position.x + this.innerWidth <
this.opts.width
) {
this.container.position.x = this.opts.width - this.innerWidth
}
} else {
this.container.position.y -= event.deltaY
if (this.container.position.y > 0) {
this.container.position.y = 0
} else if (this.container.position.y + this.innerHeight < this.opts.height) {
} else if (
this.container.position.y + this.innerHeight <
this.opts.height
) {
this.container.position.y = this.opts.height - this.innerHeight
}
}
@@ -375,7 +388,10 @@ export default class List extends PIXI.Container {
* @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
*/
capture(event) {
const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event
const originalEvent =
event.data && event.data.originalEvent
? event.data.originalEvent
: event
Events.capturedBy(originalEvent, this)
}
}