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

    <title>PIXI ButtonGroup</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.js"></script>
    <script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
    <h1>ButtonGroup</h1>
    <p>
        Group a series of buttons together on a single line with the button group.
    </p>
    <p><a href="../../doc/out/ButtonGroup.html">JavaScript API</a></p>
    <p>Let's look at some button groups:</p><br />
    <canvas id="canvas" class="interactive"></canvas>
    <p>
        What you should see: Many button groups with very different styling and behaviour.
    </p>
    <script class="doctest">
const app = new PIXIApp({
    view: canvas,
    width: 1000,
    height: 1700
}).setup().run()

const buttonGroup1 = new ButtonGroup({
    x: 10,
    y: 10,
    buttons: [
        {icon: 'keyboard_arrow_left'},
        {icon: 'keyboard_arrow_up'},
        {icon: 'keyboard_arrow_down'},
        {icon: 'keyboard_arrow_right'}
    ]
})

const buttonGroup2 = new ButtonGroup({
    x: 260,
    y: 10,
    buttons: [
        {icon: 'directions_walk', tooltip: 'Gehen'},
        {icon: 'directions_run', tooltip: 'Laufen'},
        {icon: 'directions_bike', tooltip: 'Fahrrad'},
        {icon: 'directions_bus', tooltip: 'Bus'},
        {icon: 'directions_car', tooltip: 'Auto'},
        {icon: 'directions_boat', tooltip: 'Schiff'},
        {icon: 'directions_railway', tooltip: 'Bahn'}
    ],
    margin: 0,
    stroke: 0x0088ff,
    strokeWidth: 3
})

const buttonGroup3 = new ButtonGroup({
    x: 610,
    y: 10,
    buttons: [
        {icon: 'laptop'},
        {label: 'Linux'},
        {icon: 'laptop_windows', label: 'Windows', align: 'center'},
        {icon: 'laptop_mac', iconPosition: 'right', label: 'macOS'}
    ],
    margin: 0,
    stroke: 0xffffff,
    strokeWidth: 1
})

const buttonGroup4 = new ButtonGroup({
    x: 10,
    y: 90,
    buttons: [
        {label: 'Button 1', action: (event, button) => console.log(button.id)},
        {label: 'Button 2', action: (event, button) => console.log(button.id), radius: 0},
        {label: 'Button 3', textStyle: {fill: '#fd6b6a'}, stroke: 0xd7a3f9, strokeWidth: 8, strokeAlpha: .8},
        {label: 'Button 4', textStyle: {fill: '#40c3f2'}, radius: 20, icon: 'looks', iconPosition: 'right', iconColor: 0xd7ff30}
    ],
    margin: 40,
    minWidth: 180,
    minHeight: 60,
    textStyle: {
        fill: '#f8ce2d'
    },
    stroke: 0xffffff,
    strokeWidth: 1
})

const buttonGroup5 = new ButtonGroup({
    x: 10,
    y: 180,
    buttons: [
        {label: 'ButtonGroup'},
        {label: 'of', active: true},
        {label: 'type'},
        {minWidth: 30, style: 'link'},
        {label: 'checkbox', active: true}
    ],
    margin: 6,
    type: 'checkbox'
})

const buttonGroup6 = new ButtonGroup({
    x: 450,
    y: 180,
    buttons: [
        {label: 'ButtonGroup'},
        {label: 'of'},
        {label: 'type', active: true},
        {label: 'radio'}
    ],
    margin: 0,
    type: 'radio'
})

const buttonGroup7 = new ButtonGroup({
    x: 10,
    y: 250,
    theme: 'light',
    buttons: [
        {label: 'ButtonGroup'},
        {label: 'of'},
        {label: 'style'},
        {label: 'link'},
        {label: 'with'},
        {label: 'one exception', style: 'default'}
    ],
    style: 'link'
})

const buttonGroup8 = new ButtonGroup({
    x: 610,
    y: 250,
    buttons: [
        {icon: 'airline_seat_legroom_extra'},
        {icon: 'airline_seat_legroom_normal'},
        {icon: 'airline_seat_legroom_reduced'},
        {icon: 'wifi_tethering', type: 'checkbox'}
    ],
    type: 'radio',
    margin: 0
})

const buttonGroup9 = new ButtonGroup({
    x: 10,
    y: 320,
    buttons: [
        {icon: 'attachment'},
        {icon: 'autorenew'},
        {icon: 'backup'},
        {icon: 'apps'}
    ],
    orientation: 'vertical',
    minWidth: 70
})

const buttonGroup10 = new ButtonGroup({
    x: 100,
    y: 320,
    buttons: [
        {label: 'Vertical'},
        {label: 'ButtonGroup'},
        {label: 'align: left', active: true},
        {label: 'margin: 0'}
    ],
    orientation: 'vertical',
    stroke: 0xff0000,
    strokeWidth: 3,
    align: 'left',
    margin: 0
})

const buttonGroup11 = new ButtonGroup({
    x: 250,
    y: 320,
    buttons: [
        {label: 'Vertical', active: true, verticalAlign: 'top'},
        {label: 'ButtonGroup'},
        {label: 'centered', active: true, disabled: true, verticalAlign: 'middle'},
        {label: 'of', disabled: true, align: 'left'},
        {label: 'type'},
        {label: 'checkbox', align: 'right', verticalAlign: 'bottom'}
    ],
    orientation: 'vertical',
    margin: 0,
    align: 'center',
    verticalAlign: 'bottom',
    minHeight: 100,
    minWidth: 100,
    stroke: 0x22ee22,
    type: 'checkbox'
})

const buttonGroup12 = new ButtonGroup({
    x: 400,
    y: 320,
    buttons: [
        {label: 'Controls', disabled: true},
        {icon: 'play_arrow'},
        {icon: 'pause', active: true, align: 'left'},
        {icon: 'stop', verticalAlign: 'bottom'}
    ],
    orientation: 'vertical',
    margin: 0,
    align: 'right',
    type: 'radio'
})

const buttonGroup13 = new ButtonGroup({
    x: 520,
    y: 320,
    buttons: [
        {label: 'Volume', align: 'center', disabled: true},
        {icon: 'volume_off', label: 'Aus', align: 'left', iconColor: 0x99ffff, verticalAlign: 'top'},
        {icon: 'volume_mute', label: 'Lautlos', active: true, iconColorActive: 0xd7a3f9},
        {icon: 'volume_down', label: 'Leiser', align: 'right', iconPosition: 'right'},
        {icon: 'volume_up', label: 'Lauter', align: 'right', iconPosition: 'right', verticalAlign: 'bottom'}
    ],
    orientation: 'vertical',
    margin: 0,
    type: 'radio',
    stroke: 0x7b4073,
    strokeWidth: 4,
    minWidth: 200,
    minHeight: 100
})

const buttonGroup14 = new ButtonGroup({
    x: 10,
    y: 960,
    buttons: [
        {label: 'Stacked button 1', action: event => console.log('clicked 1')},
        {label: 'Stacked button 2', action: event => console.log('clicked 2')},
        {label: 'Stacked button 3', action: event => console.log('clicked 3')},
        {label: 'Stacked button 4', action: event => console.log('clicked 4')},
        {label: 'Stacked button 5', action: event => console.log('clicked 5')},
        {label: 'Stacked button 6', action: event => console.log('clicked 6')},
        {label: 'Stacked button 7', action: event => console.log('clicked 7')},
        {label: 'Stacked button 8', action: event => console.log('clicked 8')}
    ],
    stackPadding: 6,
    maxWidth: 620,
    app
})

const buttonGroup15 = new ButtonGroup({
    x: 10,
    y: 1040,
    buttons: [
        {icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
        {icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
        {icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
        {icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
        {icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
        {icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
        {icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
    ],
    orientation: 'vertical',
    margin: 1,
    maxHeight: 200,
    app
})

const buttons16 = []
for (let i = 1; i < 101; i++) {
    buttons16.push({label: `Button ${i}`, stroke: Math.floor(Math.random() * 16777215), strokeWidth: 3, radius: 16})
}

buttons16.splice(6, 0, {minWidth: 50, style: 'link'})
const buttonGroup16 = new ButtonGroup({
    x: 90,
    y: 1040,
    buttons: buttons16,
    stackPadding: 3,
    maxWidth: 900,
    app
})

const buttonGroup17 = new ButtonGroup({
    x: 10,
    y: 1270,
    buttons: [
        {icon: 'local_airport', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Airport'},
        {icon: 'local_bar', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Bar'},
        {icon: 'local_cafe', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Cafe'},
        {icon: 'local_car_wash', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Car wash'},
        {icon: 'local_dining', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Dining'},
        {icon: 'local_florist', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Florist'},
        {icon: 'local_gas_station', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Gas station'},
        {icon: 'local_grocery_store', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Grocery store'},
        {icon: 'local_mall', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Mall'},
        {icon: 'local_pizza', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pizza'},
        {icon: 'local_printshop', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Printshop'},
        {icon: 'local_pharmacy', type: 'checkbox', iconColorActive: 0xefc201, badge: 'Pharmacy'}
    ],
    margin: 50,
    maxWidth: 400,
    app
})

const buttonGroup18 = new ButtonGroup({
    x: 10,
    y: 1340,
    buttons: [
        {label: 'move'},
        {label: 'explanation dried'},
        {label: 'out catch'},
        {label: 'late either'},
        {label: 'tell pour'},
        {label: 'willing apart airplane'},
        {label: 'high war'},
        {label: 'future struck'},
        {label: 'sense image'},
        {label: 'never'},
        {label: 'mark cloth'},
        {label: 'everywhere due large'}
    ],
    maxWidth: 500,
    app
})

const buttonGroup19 = new ButtonGroup({
    x: 10,
    y: 1420,
    buttons: [
        {label: 'move'},
        {label: 'explanation dried'},
        {label: 'out catch'}
    ],
    maxWidth: 500,
    app
})

const buttonGroup20 = new ButtonGroup({
    x: 10,
    y: 1520,
    type: 'checkbox',
    buttons: [
        {label: 'one'},
        {label: 'two'},
        {label: 'three'}
    ],
    textAlpha: .7,
    textActiveAlpha: .2
})

const buttonGroup21 = new ButtonGroup({
    x: 300,
    y: 1520,
    type: 'checkbox',
    buttons: [
        {label: 'eins', textAlpha: 1, textActiveAlpha: .2},
        {label: 'zwei', textAlpha: .2, textActiveAlpha: 1},
        {label: 'drei'}
    ]
})

app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
app.scene.addChild(buttonGroup20, buttonGroup21)
    </script>
</body>
</html>