dat.gui/examples/index.html

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

    <meta charset="utf-8">
    <title>dat-gui kitchen sink</title>
    
    
    <script src="../build/gui.js"></script>
    <!-- <link rel="import" href="../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.define( '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>`
controller-option 2014-09-07 20:18:36 +00:00

no message 2014-09-08 22:01:13 +00:00			`<script src="../build/gui.js"></script>`
			`<!-- <link rel="import" href="../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">`
cross browser woes 2014-09-02 16:00:08 +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>`

			`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			`};`

			`// How do we kill polymer-ready ...`
workflow and gulpfile 2014-09-03 00:00:52 +00:00			`Gui.ready( function() {`
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' );`
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.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 );`

controller-option 2014-09-07 20:18:36 +00:00			`gui.define( '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>`
			`</html>`