iwmlib/lib/pixi/scrollview.html

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

    <title>PIXI Scrollview</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="../../dist/iwmlib.js"></script>
    <script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
    <h1>Scrollview</h1>
    <p>A configurable scrollbox designed for pixi.js.</p>
    <p><strong>Features:</strong></p>
    <p>
        <ul>
            <li>Scrollview uses a mask to clip to desired boxWidth/boxHeight size</li>
            <li>Scrollview scrolls with scrollbars (options.overflow=scroll)</li>
            <li>Scrollview's scrollbars may be hidden when not needed (options.overflow=auto or hidden)</li>
            <li>Scrollview may also be scrolled by dragging on the content window (options.dragScroll=true)</li>
        </ul>
    </p>
    <p>See <a href="https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html">https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html</a> and <a href="https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html">https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html</a></p>
    <p>Let's look at some switch examples:</p><br />
    <canvas id="canvas" class="interactive"></canvas>
    <p>
        What you should see: Many switches with very different styling and behaviour.
    </p>
    <script class="doctest">
const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 400,
    transparent: false
}).setup().run()

app.loader
    .add('elephant1', './assets/elephant-1.jpg')
    .add('elephant2', './assets/elephant-2.jpg')
    .add('elephant3', './assets/elephant-3.jpg')
    .load((loader, resources) => {
        const sprite1 = new PIXI.Sprite(resources.elephant1.texture)
        const sprite2 = new PIXI.Sprite(resources.elephant2.texture)
        const sprite3 = new PIXI.Sprite(resources.elephant3.texture)

        const scrollview1 = new Scrollview({boxWidth: 300, boxHeight: 180})
        scrollview1.content.addChild(sprite1)
        app.scene.addChild(scrollview1)

        const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300})
        scrollview2.x = 500
        scrollview2.y = 30
        sprite2.x = 40
        sprite2.y = 40
        sprite2.scale.set(.3, .3)
        sprite3.x = 60
        sprite3.y = 100
        sprite3.alpha = .6
        sprite3.scale.set(.5, .5)
        scrollview2.content.addChild(sprite2, sprite3)
        app.scene.addChild(scrollview2)
    })
    </script>
</body>
Merged versions for PixiJS 4 and 5. 2019-05-14 11:54:25 +02:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`

			`<title>PIXI Scrollview</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="../../dist/iwmlib.js"></script>`
			`<script src="../../dist/iwmlib.pixi.js"></script>`
			`</head>`
			`<body onload="Doctest.run()">`
			`<h1>Scrollview</h1>`
			`<p>A configurable scrollbox designed for pixi.js.</p>`
			`<p><strong>Features:</strong></p>`
			`<p>`
			`<ul>`
			`<li>Scrollview uses a mask to clip to desired boxWidth/boxHeight size</li>`
			`<li>Scrollview scrolls with scrollbars (options.overflow=scroll)</li>`
			`<li>Scrollview's scrollbars may be hidden when not needed (options.overflow=auto or hidden)</li>`
			`<li>Scrollview may also be scrolled by dragging on the content window (options.dragScroll=true)</li>`
			`</ul>`
			`</p>`
			`<p>See <a href="https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html">https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html</a> and <a href="https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html">https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html</a></p>`
			`<p>Let's look at some switch examples:</p><br />`
			`<canvas id="canvas" class="interactive"></canvas>`
			`<p>`
			`What you should see: Many switches with very different styling and behaviour.`
			`</p>`
			`<script class="doctest">`
			`const app = new PIXIApp({`
			`view: canvas,`
			`width: 900,`
Added Scrollview. 2019-05-14 13:56:05 +02:00			`height: 400,`
Merged versions for PixiJS 4 and 5. 2019-05-14 11:54:25 +02:00			`transparent: false`
			`}).setup().run()`

Added Scrollview. 2019-05-14 13:56:05 +02:00			`app.loader`
			`.add('elephant1', './assets/elephant-1.jpg')`
			`.add('elephant2', './assets/elephant-2.jpg')`
			`.add('elephant3', './assets/elephant-3.jpg')`
			`.load((loader, resources) => {`
			`const sprite1 = new PIXI.Sprite(resources.elephant1.texture)`
			`const sprite2 = new PIXI.Sprite(resources.elephant2.texture)`
			`const sprite3 = new PIXI.Sprite(resources.elephant3.texture)`
Merged versions for PixiJS 4 and 5. 2019-05-14 11:54:25 +02:00
Added Scrollview. 2019-05-14 13:56:05 +02:00			`const scrollview1 = new Scrollview({boxWidth: 300, boxHeight: 180})`
			`scrollview1.content.addChild(sprite1)`
			`app.scene.addChild(scrollview1)`
Merged versions for PixiJS 4 and 5. 2019-05-14 11:54:25 +02:00
Added Scrollview. 2019-05-14 13:56:05 +02:00			`const scrollview2 = new Scrollview({boxWidth: 300, boxHeight: 300})`
			`scrollview2.x = 500`
			`scrollview2.y = 30`
			`sprite2.x = 40`
			`sprite2.y = 40`
			`sprite2.scale.set(.3, .3)`
			`sprite3.x = 60`
			`sprite3.y = 100`
			`sprite3.alpha = .6`
			`sprite3.scale.set(.5, .5)`
			`scrollview2.content.addChild(sprite2, sprite3)`
			`app.scene.addChild(scrollview2)`
			`})`
Merged versions for PixiJS 4 and 5. 2019-05-14 11:54:25 +02:00			`</script>`
			`</body>`