dat.gui/elements/dat-gui/static.js

( function( scope ) {

var Gui = function( params ) {

    if ( !ready ) {
        Gui.error( 'Gui not ready. Use Gui.ready( callback )' );
    }

    var panel = document.createElement( 'dat-gui' );
    Gui.constructor.call( panel, params );
    return panel;

};

Gui.constructor = function( params ) {

    var _this = this;

    params = params || {};

    // Saving

    this.localStorage = scope.localStorage && ( params.localStorage || false );

    this.loadPath = params.loadPath || params.savePath || Gui.DEFAULT_LOAD_PATH;
    this.savePath = params.savePath || Gui.DEFAULT_SAVE_PATH;


    // Bind save listener

    if ( params.save ) {

        this._debouncedSave = Gui.debounce( this.save, this, 50 );
        this.addEventListener( 'change', this._debouncedSave, false );

    }

    // Load initial data

    if ( params.load && !this.localStorage ) {

        Gui.getJSON( this.loadPath, function( data ) {

            Gui.log( 'Loaded data from ' + this.loadPath );
            this.unserialize( data );

        }, function( error ) {

                Gui.warn( 'Failed to load save data from ' + this.loadPath + ': "' + error + '"' );

            }, this );

    }

    // Get local storage, if that's your thing.

    if ( this.localStorage ) {

        setTimeout( function() {

            var data = localStorage.getItem( Gui.LOCAL_STORAGE_KEY );
            _this.unserialize( JSON.parse( data ) );

        }, 0 );

    }

    // Autoplace

    this.autoPlace = params.autoPlace !== false;

    if ( this.autoPlace ) {

        document.body.appendChild( this );

    }

    // Docked

    this.docked = params.docked || false;


};


// Saving
// ------------------------------- 

Gui.DEFAULT_SAVE_PATH = 'http://localhost:7999/';
Gui.DEFAULT_LOAD_PATH = './dat-gui.json';

Gui.getJSON = function( path, success, error, scope ) {

    var xhr = new XMLHttpRequest();
    xhr.open( 'GET', path, true );

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {

            if ( xhr.status == 200 ) {

                try {
                    success.call( scope, JSON.parse( xhr.responseText ) );
                } catch (e) {
                    error.call( scope, e );
                }

            } else {
                error.call( scope, xhr.statusText );
            }

        }

    };

    xhr.send( null );

};

Gui.postJSON = function( path, data, success, error, scope ) {

    var xhr = new XMLHttpRequest();
    xhr.open( 'POST', path, true );

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {

            if ( xhr.status == 200 ) {
                success.call( scope, xhr.responseText );
            } else {
                error.call( scope, xhr.statusText );
            }

        }

    };

    xhr.send( JSON.stringify( data, null, 4 ) );

};

Gui.debounce = function( func, scope, wait ) {

    var timeout;

    return function() {

        var args = arguments;

        clearTimeout( timeout );

        timeout = setTimeout( function() {
            timeout = null;
            func.apply( scope, args );
        }, wait );

    };

};


// Register custom controllers
// -------------------------------

var controllers = {};

Gui.register = function( elementName, test ) {

    controllers[ elementName ] = test;

};


// Returns a controller based on a value
// -------------------------------

Gui.getController = function( value ) {

    for ( var type in controllers ) {

        var test = controllers[ type ];

        if ( test( value ) ) {

            return document.createElement( type );

        }

    }

};


// Gui ready handler ... * shakes fist at polymer *
// -------------------------------

var ready = false;
var readyHandlers = [];
var readyPromise;

document.addEventListener( 'polymer-ready', function() {

    ready = true;
    if ( !readyPromise ) {
        readyResolve();
    }

} );

Gui.ready = function( fnc ) {

    if ( window.Promise && arguments.length === 0 ) {
        readyPromise = new Promise( readyResolve );
        return readyPromise;
    }

    if ( ready ) {
        fnc();
    } else {
        readyHandlers.push( fnc );
    }


};

function readyResolve( resolve ) {

    readyHandlers.forEach( function( fnc ) {
        fnc();
    } );

    if ( resolve !== undefined ) {
        resolve();
    }

}

// Console
// -------------------------------

Gui.error = function() {
    var args = Array.prototype.slice.apply( arguments );
    args.unshift( 'dat-gui ::' );
    console.error.apply( console, args );
};

Gui.warn = function() {
    var args = Array.prototype.slice.apply( arguments );
    args.unshift( 'dat-gui ::' );
    console.warn.apply( console, args );
};

Gui.log = function() {
    var args = Array.prototype.slice.apply( arguments );
    args.unshift( 'dat-gui ::' );
    console.log.apply( console, args );
};


// Old namespaces
// -------------------------------

var dat = {};

dat.gui = {};
dat.gui.GUI = Gui;
dat.GUI = dat.gui.GUI;

dat.color = {};
dat.color.Color = function() {};

dat.dom = {};
dat.dom.dom = function() {};

dat.controllers = {};
dat.controllers.Controller = constructor( 'dat-gui-base' );
dat.controllers.NumberController = constructor( 'dat-gui-number' );
dat.controllers.FunctionController = constructor( 'dat-gui-function' );
dat.controllers.ColorController = constructor( 'dat-gui-color' );
dat.controllers.BooleanController = constructor( 'dat-gui-boolean' );
dat.controllers.OptionController = constructor( 'dat-gui-option' );

dat.controllers.NumberControllerBox = dat.controllers.NumberController;
dat.controllers.NumberControllerSlider = dat.controllers.NumberController;

function constructor( elementName ) {

    return function( object, path ) {
        var el = document.createElement( elementName );
        el.watch( object, path );
        return el;
    };

}


// Export
// -------------------------------

scope.dat = dat;
scope.Gui = Gui;


})( this );