dat.gui/examples/index.html

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <title>dat-gui kitchen sink</title>

    <!--<script src="../build/dat-gui.js"></script>-->
    <link rel="import" href="../dat-gui.html">

    <meta name="viewport" content="width=device-width, user-scalable=no">

    <style type="text/css">
    body {
        background: #aaa;
    }
    </style>

</head>
<body>

    body content.

    <script>

    var object = {
        "boolean": false,
        "listen4Free": 332,
        "zeroTo1": 0,
        "step": 10,
        "straddleZero": 0,
        "maxIsNegative": -2,
        "hasComment": 0,
        "optionController": 'a'
    };

    // How do we kill polymer-ready ...
    Gui.ready( function() {

        gui = new Gui();

        gui.panel.docked = true;

        gui.add( gui, 'panel.docked' );

        var r = gui.add( gui, 'panel.open' );
        gui.add( r.row, 'name' );

        gui.add( object, 'boolean' );

        gui.add( object, 'listen4Free' );
        gui.add( object, 'listen4Free' );
        gui.add( object, 'listen4Free', 0, 1000 );

        gui.add( object, 'zeroTo1', 0, 1 );

        gui.add( object, 'hasComment' ).comment( 'Hi there.' );

        gui.add( object, 'listen4Free' ).name( 'customName' )

        gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut.' );

        gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec.' );

        gui.add( object, 'maxIsNegative', -5, -2 );

        gui.var( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');

        gui.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );
        gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )
           .onChange( function( val ) {
                // console.log( val );
           });

    } );

    </script>

</body>
</html>
initial polymer import 2014-08-27 00:01:15 +00:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`

			`<meta charset="utf-8">`
			`<title>dat-gui kitchen sink</title>`
rename gui.html and gui.js to dat-gui.html and dat-gui.js 2014-09-10 22:51:48 +00:00
			`<!--<script src="../build/dat-gui.js"></script>-->`
			`<link rel="import" href="../dat-gui.html">`
initial polymer import 2014-08-27 00:01:15 +00:00
tood 2014-09-03 16:16:11 +00:00			`<meta name="viewport" content="width=device-width, user-scalable=no">`
gui.define* => gui.var* 2014-09-09 20:18:15 +00:00
initial polymer import 2014-08-27 00:01:15 +00:00			`<style type="text/css">`
			`body {`
			`background: #aaa;`
			`}`
			`</style>`

			`</head>`
			`<body>`

			`body content.`

			`<script>`

gui.define* => gui.var* 2014-09-09 20:18:15 +00:00			`var object = {`
cross-browser frustration 2014-09-02 17:13:35 +00:00			`"boolean": false,`
initial polymer import 2014-08-27 00:01:15 +00:00			`"listen4Free": 332,`
			`"zeroTo1": 0,`
			`"step": 10,`
			`"straddleZero": 0,`
			`"maxIsNegative": -2,`
controller-option 2014-09-07 20:18:36 +00:00			`"hasComment": 0,`
			`"optionController": 'a'`
initial polymer import 2014-08-27 00:01:15 +00:00			`};`

gui.define* => gui.var* 2014-09-09 20:18:15 +00:00			`// How do we kill polymer-ready ...`
workflow and gulpfile 2014-09-03 00:00:52 +00:00			`Gui.ready( function() {`
gui.define* => gui.var* 2014-09-09 20:18:15 +00:00
cross browser woes 2014-09-02 16:00:08 +00:00			`gui = new Gui();`
initial polymer import 2014-08-27 00:01:15 +00:00
gulpfile 2014-09-08 03:36:20 +00:00			`gui.panel.docked = true;`
initial polymer import 2014-08-27 00:01:15 +00:00
gulpfile 2014-09-08 03:36:20 +00:00			`gui.add( gui, 'panel.docked' );`
initial polymer import 2014-08-27 00:01:15 +00:00
gulpfile 2014-09-08 03:36:20 +00:00			`var r = gui.add( gui, 'panel.open' );`
initial polymer import 2014-08-27 00:01:15 +00:00			`gui.add( r.row, 'name' );`

cross-browser frustration 2014-09-02 17:13:35 +00:00			`gui.add( object, 'boolean' );`
gui.define* => gui.var* 2014-09-09 20:18:15 +00:00
initial polymer import 2014-08-27 00:01:15 +00:00			`gui.add( object, 'listen4Free' );`
			`gui.add( object, 'listen4Free' );`
			`gui.add( object, 'listen4Free', 0, 1000 );`

			`gui.add( object, 'zeroTo1', 0, 1 );`
gui.define* => gui.var* 2014-09-09 20:18:15 +00:00
initial polymer import 2014-08-27 00:01:15 +00:00			`gui.add( object, 'hasComment' ).comment( 'Hi there.' );`

			`gui.add( object, 'listen4Free' ).name( 'customName' )`

controller-option 2014-09-07 20:18:36 +00:00			`gui.add( object, 'step', 0, 50, 5 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec. Sed massa felis, congue nec libero ut.' );`
initial polymer import 2014-08-27 00:01:15 +00:00
			`gui.add( object, 'straddleZero', -1, 1, 0.01 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus, sed aliquet nulla fermentum nec.' );`

			`gui.add( object, 'maxIsNegative', -5, -2 );`

gui.define* => gui.var* 2014-09-09 20:18:15 +00:00			`gui.var( 'anonymousSlider', 0, -1, 1 ).comment( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper dui metus');`
initial polymer import 2014-08-27 00:01:15 +00:00
controller-option 2014-09-07 20:18:36 +00:00			`gui.add( object, 'optionController', { A: 'a', B: 'b', C: 'c'} );`
			`gui.add( object, 'optionController', [ 'a', 'b', 'c' ] )`
			`.onChange( function( val ) {`
option controller 2014-09-07 23:55:40 +00:00			`// console.log( val );`
controller-option 2014-09-07 20:18:36 +00:00			`});`
initial polymer import 2014-08-27 00:01:15 +00:00
cross browser woes 2014-09-02 16:00:08 +00:00			`} );`
initial polymer import 2014-08-27 00:01:15 +00:00
			`</script>`

			`</body>`
gui.define* => gui.var* 2014-09-09 20:18:15 +00:00			`</html>`