Initial commit.

2019-03-21 09:57:27 +01:00
parent 9893d5de24
commit 80317c5026
1907 changed files with 502783 additions and 0 deletions
@@ -0,0 +1,271 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+    <title>PIXI Button</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>Button</h1>
+    <p>
+        The Button class defines a clickable/touchable button. Use custom button styles for actions in forms, dialogs,
+        and more with support for multiple sizes, states, and more. Buttons will appear pressed when active. Make 
+        buttons look inactive by setting the disabled state to true. To allow changing the state between active/inactive, set 
+        the button type to "checkbox".
+    </p>
+    <p><a href="../../doc/out/Button.html">JavaScript API</a></p>
+    <p>Let's look at some button examples:</p><br />
+    <canvas id="canvas" class="interactive"></canvas>
+    <p>
+        What you should see: Many buttons with very different styling and behaviour.
+    </p>
+    <script class="doctest">
+const app = new PIXIApp({
+    view: canvas,
+    width: 900,
+    height: 420,
+    transparent: false
+}).setup().run()
+
+let button1 = new Button({x: 10, y: 10})
+
+let button2 = new Button({
+    theme: 'red',
+    x: 60,
+    y: 10,
+    label: 'Button',
+    type: 'checkbox',
+    action: e => {
+        console.info('Button clicked')
+    }
+})
+
+let button3 = new Button({
+    x: 150,
+    y: 10,
+    label: 'Checkbox button',
+    type: 'checkbox',
+    action: e => {
+        console.info('Button clicked', e)
+    }
+})
+
+let button4 = new Button({
+    x: 330,
+    y: 10,
+    label: 'Disabled button',
+    disabled: true,
+    action: e => {
+        console.info('Disabled button clicked')
+    }
+})
+
+let button5 = new Button({
+    x: 500,
+    y: 10,
+    label: 'Active button',
+    active: true
+})
+
+let button6 = new Button({
+    x: 650,
+    y: 10,
+    label: 'Active disabled button',
+    type: 'checkbox',
+    active: true,
+    disabled: true
+})
+
+let button7 = new Button({
+    x: 10,
+    y: 70,
+    label: 'Icon button',
+    type: 'checkbox',
+    active: true,
+    icon: 'arrow_back'
+})
+
+let button8 = new Button({
+    x: 180,
+    y: 70,
+    theme: 'light',
+    label: 'Icon button',
+    icon: 'arrow_forward',
+    type: 'checkbox',
+    iconPosition: 'right'
+})
+
+let button9 = new Button({
+    x: 10,
+    y: 130,
+    type: 'checkbox',
+    icon: 'play_arrow',
+    iconActive: 'pause'
+})
+
+let button10 = new Button({
+    x: 60,
+    y: 130,
+    icon: 'stop',
+    action: function() {
+        this.iconColor = Math.round(Math.random() * 16777215)
+    }
+})
+
+let button11 = new Button({
+    x: 110,
+    y: 130,
+    icon: 'star_border',
+    tooltip: 'Bookmark'
+})
+
+let button12 = new Button({
+    x: 10,
+    y: 190,
+    icon: 'airplay',
+    fillAlpha: 0,
+    strokeAlpha: 0,
+    iconColor: 0xdd0000,
+    iconColorActive: 0x00dd00,
+    fillActiveAlpha: 0,
+    strokeActiveAlpha: 0,
+    type: 'checkbox'
+})
+
+let button13 = new Button({
+    x: 50,
+    y: 190,
+    label: 'Button',
+    fillAlpha: 0,
+    strokeAlpha: 0,
+    fillActiveAlpha: 0,
+    strokeActiveAlpha: 0,
+    textStyle: {
+        fontSize: 20,
+        stroke: 'brown',
+        fill: 'orange',
+        strokeThickness: 4,
+        miterLimit: 1,
+        letterSpacing: 6
+    },
+    textStyleActive: {
+        fontSize: 20,
+        stroke: 'orange',
+        fill: 'brown',
+        strokeThickness: 4,
+        fontWeight: 'bold',
+        miterLimit: 1,
+        letterSpacing: 5
+    },
+    type: 'checkbox'
+})
+
+let button14 = new Button({
+    x: 10,
+    y: 250,
+    label: 'Button',
+    type: 'checkbox',
+    icon: null,
+    iconActive: 'add_circle'
+})
+
+let button15 = new Button({
+    x: 200,
+    y: 250,
+    label: 'Button',
+    type: 'checkbox',
+    icon: 'add_circle',
+    iconActive: null
+})
+
+let button16 = new Button({
+    x: 400,
+    y: 250,
+    label: 'Button',
+    type: 'checkbox',
+    icon: null,
+    iconActive: 'add_circle',
+    active: true
+})
+
+let button17 = new Button({
+    x: 600,
+    y: 250,
+    label: 'Button',
+    type: 'checkbox',
+    icon: 'add_circle',
+    iconActive: null,
+    active: true
+})
+
+let graphic1 = new PIXI.Graphics()
+graphic1.beginFill(0xd7a3f9)
+graphic1.drawCircle(10, 10, 10)
+
+let graphic2 = new PIXI.Graphics()
+graphic2.beginFill(0x40c3f2)
+graphic2.drawCircle(30, 30, 30)
+
+let button18 = new Button({
+    x: 10,
+    y: 310,
+    label: 'Button',
+    type: 'checkbox',
+    icon: graphic1,
+    iconActive: graphic2
+})
+
+let graphic3 = new PIXI.Graphics()
+graphic3.beginFill(0xfd6b6a)
+graphic3.drawCircle(2, 2, 2)
+
+let graphic4 = new PIXI.Graphics()
+graphic4.beginFill(0xf8ce2d)
+graphic4.drawCircle(40, 40, 40)
+
+let button19 = new Button({
+    x: 200,
+    y: 310,
+    label: 'Button',
+    type: 'checkbox',
+    icon: graphic3,
+    iconActive: graphic4,
+    active: true,
+    iconPosition: 'right'
+})
+
+let button20 = new Button({
+    x: 400,
+    y: 310,
+    label: 'Link Button',
+    type: 'checkbox',
+    style: 'link'
+})
+
+let button21 = new Button({
+    x: 600,
+    y: 310,
+    minWidth: 70,
+    minHeight: 70,
+    icon: 'loop',
+    type: 'checkbox',
+    style: 'link'
+})
+
+app.scene.addChild(button1, button2, button3, button4, button5, button6)
+app.scene.addChild(button7, button8)
+app.scene.addChild(button9, button10, button11)
+app.scene.addChild(button12, button13)
+app.scene.addChild(button14, button15, button16, button17)
+app.scene.addChild(button18, button19, button20, button21)
+    </script>
+</body>