non-concatenated dat.gui source with require.js. Customising, or templating dat.gui

Question

Please excuse the SEO friendly title, but I would like to make the problem I am currently solving as accessible as possible. For those of you who are looking to customise the look and feel of dat.gui, you need to download the source and include it using require.js using the instructions here: https://code.google.com/p/dat-gui/.

And now my question. I am working on a project that requires building a UI with heavy live integration with Javascript (I'm using three.js) and I have decided to modify dat.gui to create this ui; with a view to soon integrate it with backbone.js as a collection of views.

I wish to switch to use the dat.gui source files to edit the styling

To start, I switched over from the concatenated dat.gui.min.js, to the source using the instructions in the link above. I put the whole source in its own folder within my libraries folder, and placed the main.js file the require.js err... requires within the "src" folder. I did this due to linking dependencies within dat.gui's "GUI.js".

Everything seems to link up properly, and I am using essentially the same code as I did before to create my dat.guis, but I keep getting undefined errors, depending on how I change the gui variable either in my original code or in main.js. My understanding of require.js is VERY limited and I feel it is something integral to how it works (and that it's defiantly one of those oh so simple problems for someone with the know how)

Here's my main.js file located at /libraries/dat-gui/src (this dir also includes text.js)

//This is main.js for using require.js
require([
  'dat/gui/GUI'
], function(GUI) {

  // No namespace necessary 
  var gui = new GUI();

});

and here's the bones of my original dat.gui definition code:

    ////////////////////////////////////////////////DatGui/////////////////////////////////////////////////////
        var stageConfigData = function() {
            this.scaleX = params.stageWidth;
            this.scaleZ = params.stageDepth;
            this.spinTheCamera = false;

            this.lightIntensity = 1;
            this.lightDistance = 0;
            this.lightFrontColour = "#ffb752";
            this.lightRearColour = "#3535fa";

            this.lockCameraToScene = true;

            this.tooltype = 3;
            this.objectSelect = 'Man';

            this.saveJSON = function(){
                saveJSON();
            };

        };

        var stageConfig = new stageConfigData( );

        var moveConfig = new moveConfigData( );

///I think the problem is linked to defining this variable:
        //var gui = new dat.GUI();//works for the minified version 
        var gui = new dat.GUI();//for non-concatenated

        var fstage = gui.addFolder('Stage');
        var fcamera = gui.addFolder('Camera');
        var ffhouselts = gui.addFolder('Front of House Lights');
        var fRearlts = gui.addFolder('Rear Lights');
        var sandl = gui.addFolder('Saving and Loading');

        fstage.add( stageConfig, 'scaleX', 1, 100, 5).name('Width of stage').onChange( function(){
            stage.scale.x = ( stageConfig.scaleX );
        });

        fstage.add( stageConfig, 'scaleZ', 1, 100, 5).name('Depth of stage').onChange( function(){
            stage.scale.z = ( stageConfig.scaleZ );
        });
... //there's more but i think it's irrelevant

and the errors i am getting are either:

Uncaught ReferenceError: dat is not defined 

or

Uncaught ReferenceError: GUI is not defined 

depending on how I mess with those variables and the bit in main.js under //No namespace necessary. I don't understand how namespaces work as I am quite new to javascript as a whole.

Has anyone any ideas? Again, I'd say this is probably one of those real dunce moments, but I would really appreciate the help nonetheless.

Thanks a lot!

Answer 1

When you use require.js method there will be no global object. But you can create it yourself

require([
  'dat/gui/GUI'
], function(GUI) {
  window.dat = {
    GUI: GUI
  };
});