<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>PIXI List</title>

    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
    <link rel="stylesheet" href="../../css/doctest.css">

    <script src="../3rdparty/highlight/highlight.pack.js"></script>
    <script src="../../dist/iwmlib.3rdparty.js"></script>
    <script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>

    <script src="../../dist/iwmlib.pixi.js"></script>
    <script src="../../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()">
    <h1>List</h1>
    <p>
        Using the List class, any PIXI elements (PIXI.DisplayObject) can be included
        in a scrollable list.
    </p>
    <p><a href="../../doc/out/List.html">JavaScript API</a></p>
    <p>Let's look at some list examples:</p><br />
    <canvas id="canvas" class="interactive"></canvas>
    <p>
        What you should see: Three lists, one horizontal and two vertical.
    </p>
    <script class="doctest">
const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 420,
    transparent: false
}).setup().run()

app.loadTextures([
    './assets/elephant-1.jpg',
    './assets/elephant-2.jpg',
    './assets/elephant-3.jpg',
    './assets/elephant-4.jpg',
    './assets/elephant-5.jpg',
    './assets/bamboo-1.jpg',
    './assets/bamboo-2.jpg',
    './assets/bamboo-3.jpg',
    './assets/bamboo-4.jpg',
    './assets/bamboo-5.jpg'
], textures => {

    // Example 1
    //--------------------
    const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
    const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg'))
    const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg'))
    const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg'))
    const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))

    const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
    elephants.forEach(it => it.scale.set(.1, .1))

    const elephantList = new List(elephants)
    elephantList.x = 10
    elephantList.y = 10

    // Example 2
    //--------------------
    const bamboo1 = new PIXI.Sprite(textures.get('./assets/bamboo-1.jpg'))
    const bamboo2 = new PIXI.Sprite(textures.get('./assets/bamboo-2.jpg'))
    const bamboo3 = new PIXI.Sprite(textures.get('./assets/bamboo-3.jpg'))
    const bamboo4 = new PIXI.Sprite(textures.get('./assets/bamboo-4.jpg'))
    const bamboo5 = new PIXI.Sprite(textures.get('./assets/bamboo-5.jpg'))

    const bamboos = [bamboo1, bamboo2, bamboo3, bamboo4, bamboo5]
    bamboos.forEach(it => it.scale.set(.15, .15))

    const bambooList = new List(bamboos, {
        orientation: 'horizontal',
        width: 300,
        app
    })
    bambooList.x = 200
    bambooList.y = 10

    window.bambooList = bambooList

    // Example 3
    //--------------------
    const style = {fontSize: 14, fill : 0xe7bc51}

    const texts = []
    for (let i = 0; i < 1000; i++) {
        const text = new PIXI.Text(`Example Text ${i}`, style)
        text.interactive = true
        text.on('tap', event => console.log(`tap text ${i}`))
        text.on('click', event => console.log(`click text ${i}`))
        texts.push(text)
    }

    const textList = new List(texts, {
        orientation: 'vertical',
        height: 200,
        padding: 2,
        app
    })
    textList.x = 200
    textList.y = 200

    // Add to scene
    //--------------------
    app.scene.addChild(elephantList, bambooList, textList)

}, {resolutionDependent: false})
    </script>

    <h1>List in a Scatter</h1>
    <p>
        A PixiJS UI List is displayed inside a ScatterObject.
    </p>
    <canvas id="canvas2" class="interactive"></canvas>
    <p>
        What you should see: A ScatterObject with a list in it.
    </p>
    <script class="doctest">

    const app2 = new PIXIApp({
        view: canvas2,
        width: 900,
        height: 420,
        transparent: false
    }).setup().run()

    app2.loadTextures([
        './assets/jungle.jpg',
        './assets/elephant-1.jpg',
        './assets/elephant-2.jpg',
        './assets/elephant-3.jpg',
        './assets/elephant-4.jpg',
        './assets/elephant-5.jpg'
    ], textures => {

        // ScatterContainer
        //--------------------
        const scatterContainer = new ScatterContainer(app2.renderer, {
            showBounds: true,
            showPolygon: true,
            app: app2,
            stopEvents: true,
            claimEvents: true
        })

        app2.scene.addChild(scatterContainer)

        // ScatterObject
        //--------------------
        const jungle = new PIXI.Sprite(textures.get('./assets/jungle.jpg'))
        jungle.interactive = true
        const scatter = new DisplayObjectScatter(jungle, app2.renderer, {
            x: 200,
            y: 20,
            startScale: 1,
            minScale: 0.25,
            maxScale: 1
        })

        scatterContainer.addChild(jungle)

        // Example 1
        //--------------------
        const elephant1 = new PIXI.Sprite(textures.get('./assets/elephant-1.jpg'))
        const elephant2 = new PIXI.Sprite(textures.get('./assets/elephant-2.jpg'))
        const elephant3 = new PIXI.Sprite(textures.get('./assets/elephant-3.jpg'))
        const elephant4 = new PIXI.Sprite(textures.get('./assets/elephant-4.jpg'))
        const elephant5 = new PIXI.Sprite(textures.get('./assets/elephant-5.jpg'))

        const elephants = [elephant1, elephant2, elephant3, elephant4, elephant5]
        elephants.forEach(it => it.scale.set(.15, .15))

        const elephantList = new List(elephants, {
            height: 200
        })
        elephantList.x = 10
        elephantList.y = 10

        // Add to scene
        //--------------------
        jungle.addChild(elephantList)

    }, {resolutionDependent: false})
    </script>
</body>