2014-09-03 23:33:28 +00:00
|
|
|
(function(scope) {
|
2014-09-08 01:27:32 +00:00
|
|
|
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
var Gui = function(params) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
if (!ready) {
|
|
|
|
Gui.error('Gui not ready. Put your code inside Gui.ready()');
|
|
|
|
}
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
params = params || {};
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
var panel = document.createElement('gui-panel');
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
panel.autoPlace = params.autoPlace !== false;
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
if (panel.autoPlace) {
|
|
|
|
document.body.appendChild(panel);
|
|
|
|
}
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
return panel;
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
};
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
// Register custom controllers
|
|
|
|
// -------------------------------
|
2014-09-01 03:54:59 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
var controllers = {};
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
Gui.register = function(elementName, test) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
controllers[elementName] = test;
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
};
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
// Returns a controller based on a value
|
|
|
|
// -------------------------------
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
Gui.getController = function(value) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
for (var type in controllers) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
var test = controllers[type];
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
if (test(value)) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
return document.createElement(type);
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
}
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
}
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
};
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
// Gui ready handler ... * shakes fist at polymer *
|
|
|
|
// -------------------------------
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
var ready = false;
|
|
|
|
var readyHandlers = [];
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
document.addEventListener('polymer-ready', function() {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
ready = true;
|
|
|
|
readyHandlers.forEach(function(fnc) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
fnc();
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
});
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
});
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
Gui.ready = function(fnc) {
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-04 04:14:36 +00:00
|
|
|
if (ready) {
|
|
|
|
fnc();
|
|
|
|
} else {
|
|
|
|
readyHandlers.push(fnc);
|
|
|
|
}
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// Error
|
|
|
|
// -------------------------------
|
|
|
|
|
|
|
|
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);
|
|
|
|
};
|
|
|
|
|
|
|
|
// 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('controller-base');
|
|
|
|
dat.controllers.NumberController = constructor('controller-number');
|
|
|
|
dat.controllers.FunctionController = constructor('controller-function');
|
|
|
|
dat.controllers.ColorController = constructor('controller-color');
|
|
|
|
dat.controllers.BooleanController = constructor('controller-boolean');
|
|
|
|
dat.controllers.OptionController = constructor('controller-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;
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
// Export
|
|
|
|
// -------------------------------
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
scope.dat = dat;
|
|
|
|
scope.Gui = Gui;
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 23:33:28 +00:00
|
|
|
})(this);
|