Restructured library.

2019-03-22 12:54:57 +01:00
parent 1bc2deb4d3
commit d1efeeffa6
1912 changed files with 21424 additions and 21383 deletions
@@ -0,0 +1,100 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Slider</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="../3rdparty/all.js"></script>
+
+    <script src="../all.js"></script>
+    <script src="./all.js"></script>
+</head>
+<body onload="Doctest.run()">
+    <h1>Slider</h1>
+    <p>A slider is used whenever a numeric value within a certain range is to be obtained.</p>
+    <p>The <strong>advantage</strong> of a slider over text input is that it becomes impossible
+        for the user to enter a bad value. Any value that they can pick with the slider is valid.</p>
+    <p>Let's look at some slider examples:</p><br />
+    <canvas id="canvas" class="interactive"></canvas>
+    <p>
+        What you should see: Many sliders with very different styling and behaviour.
+    </p>
+    <script class="doctest">
+const app = new PIXIApp({
+    view: canvas,
+    width: 900,
+    height: 450,
+    transparent: false
+}).setup().run()
+
+let slider1 = new Slider({
+    x: 10,
+    y: 20
+})
+
+let slider2 = new Slider({
+    x: 10,
+    y: 70,
+    value: 85,
+    tooltip: 'Start value 85',
+    container: app.view
+})
+
+let slider3 = new Slider({
+    x: 10,
+    y: 120,
+    min: -1000,
+    max: 2000,
+    value: 300,
+    disabled: true
+})
+
+let slider4 = new Slider({
+    x: 10,
+    y: 170,
+    value: -20,
+    width: 600,
+    height: 8,
+    fill: 0xda3031,
+    stroke: 0xf9bc2e,
+    strokeWidth: 2,
+    controlStrokeWidth: 4,
+    controlRadius: 24,
+    theme: 'red',
+    tooltip: 'Range: 0 - 100',
+    onStart: (event, slider) => {
+        console.log('Started', event)
+    },
+    onUpdate: (event, slider) => {
+        slider.tooltip.content = slider.value
+    },
+    onComplete: function(event) {
+        console.log('Completed', this)
+    }
+})
+
+let button1 = new Button({
+    x: 10,
+    y: 240,
+    label: 'Toggle-slider-button',
+    type: 'checkbox',
+    active: true,
+    action: e => {
+        slider5.visible = !slider5.visible
+    }
+})
+
+let slider5 = new Slider({
+    x: 230,
+    y: 250
+})
+
+app.scene.addChild(slider1, slider2, slider3, slider4)
+app.scene.addChild(button1, slider5)
+    </script>
+</body>