From f98ac9b462caa81b9ec88e83241400ccab163b40 Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Tue, 9 Sep 2014 13:18:15 -0700 Subject: [PATCH 01/17] gui.define* => gui.var* --- TODO.md | 3 +-- elements/Gui.js | 10 +++++----- elements/shim.js | 12 ++++++------ examples/index.html | 20 ++++++++++---------- tests/test.gui.js | 10 +++++----- 5 files changed, 27 insertions(+), 28 deletions(-) diff --git a/TODO.md b/TODO.md index a1031f0..0bc22bc 100644 --- a/TODO.md +++ b/TODO.md @@ -6,7 +6,7 @@ BUILD REFACTOR - [ ] controller-* => gui-* -- [ ] gui.define* => gui.var* +- [x] gui.define* => gui.var* - [ ] Gui.js => gui-panel => dat-gui PARITY @@ -30,7 +30,6 @@ DOCS - [ ] Auto generatated polymer docs STYLE - - [x] touch styles: bigger please! - [x] kill hover behavior if touch - [x] sharing more styles diff --git a/elements/Gui.js b/elements/Gui.js index 03f4461..7580f07 100644 --- a/elements/Gui.js +++ b/elements/Gui.js @@ -13,7 +13,7 @@ // Properties - this.defined = {}; + this.vars = {}; this.localStorage = params.localStorage || false; // Make domElement @@ -84,22 +84,22 @@ }; - Gui.prototype.define = function() { + Gui.prototype.var = function() { var name, initialValue, args; if ( arguments.length == 1 ) { name = arguments[ 0 ]; - return this.defined[ name ]; + return this.vars[ name ]; } initialValue = arguments[ 1 ]; name = arguments[ 0 ]; - args = [ this.defined, name ]; + args = [ this.vars, name ]; args = args.concat( Array.prototype.slice.call( arguments, 2 ) ); - this.defined[ name ] = initialValue; + this.vars[ name ] = initialValue; return this.add.apply( this, args ); diff --git a/elements/shim.js b/elements/shim.js index d03f2bd..b55c748 100644 --- a/elements/shim.js +++ b/elements/shim.js @@ -2,10 +2,10 @@ ( function( scope ) { 'use strict'; - + var Gui = function() { - this.defined = {}; + this.vars = {}; }; @@ -15,15 +15,15 @@ }; - Gui.prototype.define = function( name, value ) { + Gui.prototype.var = function( name, value ) { - this.defined[ name ] = value; + this.vars[ name ] = value; return controllerShim; }; Gui.prototype.add = function( object, path ) { - + return controllerShim; }; @@ -36,4 +36,4 @@ scope.Gui = Gui; -} )( this ); \ No newline at end of file +} )( this ); diff --git a/examples/index.html b/examples/index.html index bf634d3..2b9c45c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,13 +4,13 @@ dat-gui kitchen sink - - + + - + "," "," ",' ",'
'," ",""].join("\n"),d=[],e=function(){var a=b.document,c=a.querySelector("#crumbs");c.textContent="";for(var e,g=0;e=d[g];g++){var h=a.createElement("a");h.href="#",h.textContent=e.localName,h.idx=g,h.onclick=function(a){for(var b;d.length>this.idx;)b=d.pop();f(b.shadow||b,b),a.preventDefault()},c.appendChild(a.createElement("li")).appendChild(h)}},f=function(a,c){var f=b.document;k=[];var g=c||a;d.push(g),e(),f.body.querySelector("#tree").innerHTML="
"+j(a,a.childNodes)+"
"},g=Array.prototype.forEach.call.bind(Array.prototype.forEach),h={STYLE:1,SCRIPT:1,"#comment":1,TEMPLATE:1},i=function(a){return h[a.nodeName]},j=function(a,b,c){if(i(a))return"";var d=c||"";if(a.localName||11==a.nodeType){var e=a.localName||"shadow-root",f=d+l(a);"content"==e&&(b=a.getDistributedNodes()),f+="
";var h=d+"  ";g(b,function(a){f+=j(a,a.childNodes,h)}),f+=d,{br:1}[e]||(f+="</"+e+">",f+="
")}else{var k=a.textContent.trim();f=k?d+'"'+k+'"
':""}return f},k=[],l=function(a){var b="<",c=a.localName||"shadow-root";return a.webkitShadowRoot||a.shadowRoot?(b+=' ",k.push(a)):b+=c||"shadow-root",a.attributes&&g(a.attributes,function(a){b+=" "+a.name+(a.value?'="'+a.value+'"':"")}),b+=">"};shadowize=function(){var a=Number(this.attributes.idx.value),b=k[a];b?f(b.webkitShadowRoot||b.shadowRoot,b):(console.log("bad shadowize node"),console.dir(this))},a.output=j}(window.Inspector),function(){var a=document.createElement("style");a.textContent="body {transition: opacity ease-in 0.2s; } \nbody[unresolved] {opacity: 0; display: block; overflow: hidden; } \n";var b=document.querySelector("head");b.insertBefore(a,b.firstChild)}(Platform),function(a){function b(a,b){return b=b||[],b.map||(b=[b]),a.apply(this,b.map(d))}function c(a,c,d){var e;switch(arguments.length){case 0:return;case 1:e=null;break;case 2:e=c.apply(this);break;default:e=b(d,c)}f[a]=e}function d(a){return f[a]}function e(a,c){HTMLImports.whenImportsReady(function(){b(c,a)})}var f={};a.marshal=d,a.modularize=c,a.using=e}(window),function(a){function b(a){f.textContent=d++,e.push(a)}function c(){for(;e.length;)e.shift()()}var d=0,e=[],f=document.createTextNode("");new(window.MutationObserver||JsMutationObserver)(c).observe(f,{characterData:!0}),a.endOfMicrotask=b}(Platform),function(a){function b(a,b,d,e){return a.replace(e,function(a,e,f,g){var h=f.replace(/["']/g,"");return h=c(b,h,d),e+"'"+h+"'"+g})}function c(a,b,c){if(b&&"/"===b[0])return b;var e=new URL(b,a);return c?e.href:d(e.href)}function d(a){var b=new URL(document.baseURI),c=new URL(a,b);return c.host===b.host&&c.port===b.port&&c.protocol===b.protocol?e(b,c):a}function e(a,b){for(var c=a.pathname,d=b.pathname,e=c.split("/"),f=d.split("/");e.length&&e[0]===f[0];)e.shift(),f.shift();for(var g=0,h=e.length-1;h>g;g++)f.unshift("..");return f.join("/")+b.search+b.hash}var f={resolveDom:function(a,b){b=b||a.ownerDocument.baseURI,this.resolveAttributes(a,b),this.resolveStyles(a,b);var c=a.querySelectorAll("template");if(c)for(var d,e=0,f=c.length;f>e&&(d=c[e]);e++)d.content&&this.resolveDom(d.content,b)},resolveTemplate:function(a){this.resolveDom(a.content,a.ownerDocument.baseURI)},resolveStyles:function(a,b){var c=a.querySelectorAll("style");if(c)for(var d,e=0,f=c.length;f>e&&(d=c[e]);e++)this.resolveStyle(d,b)},resolveStyle:function(a,b){b=b||a.ownerDocument.baseURI,a.textContent=this.resolveCssText(a.textContent,b)},resolveCssText:function(a,c,d){return a=b(a,c,d,g),b(a,c,d,h)},resolveAttributes:function(a,b){a.hasAttributes&&a.hasAttributes()&&this.resolveElementAttributes(a,b);var c=a&&a.querySelectorAll(j);if(c)for(var d,e=0,f=c.length;f>e&&(d=c[e]);e++)this.resolveElementAttributes(d,b)},resolveElementAttributes:function(a,d){d=d||a.ownerDocument.baseURI,i.forEach(function(e){var f,h=a.attributes[e],i=h&&h.value;i&&i.search(k)<0&&(f="style"===e?b(i,d,!1,g):c(d,i),h.value=f)})}},g=/(url\()([^)]*)(\))/g,h=/(@import[\s]+(?!url\())([^;]*)(;)/g,i=["href","src","action","style","url"],j="["+i.join("],[")+"]",k="{{.*}}";a.urlResolver=f}(Platform),function(a){function b(a){u.push(a),t||(t=!0,q(d))}function c(a){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(a)||a}function d(){t=!1;var a=u;u=[],a.sort(function(a,b){return a.uid_-b.uid_});var b=!1;a.forEach(function(a){var c=a.takeRecords();e(a),c.length&&(a.callback_(c,a),b=!0)}),b&&d()}function e(a){a.nodes_.forEach(function(b){var c=p.get(b);c&&c.forEach(function(b){b.observer===a&&b.removeTransientObservers()})})}function f(a,b){for(var c=a;c;c=c.parentNode){var d=p.get(c);if(d)for(var e=0;e0){var e=c[d-1],f=n(e,a);if(f)return void(c[d-1]=f)}else b(this.observer);c[d]=a},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(a){var b=this.options;b.attributes&&a.addEventListener("DOMAttrModified",this,!0),b.characterData&&a.addEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.addEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(a){var b=this.options;b.attributes&&a.removeEventListener("DOMAttrModified",this,!0),b.characterData&&a.removeEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.removeEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(a){if(a!==this.target){this.addListeners_(a),this.transientObservedNodes.push(a);var b=p.get(a);b||p.set(a,b=[]),b.push(this)}},removeTransientObservers:function(){var a=this.transientObservedNodes;this.transientObservedNodes=[],a.forEach(function(a){this.removeListeners_(a);for(var b=p.get(a),c=0;cc&&(b=a[c]);c++)this.require(b);this.checkDone()},addNode:function(a){this.inflight++,this.require(a),this.checkDone()},require:function(a){var b=a.src||a.href;a.__nodeUrl=b,this.dedupe(b,a)||this.fetch(b,a)},dedupe:function(a,b){if(this.pending[a])return this.pending[a].push(b),!0;return this.cache[a]?(this.onload(a,b,this.cache[a]),this.tail(),!0):(this.pending[a]=[b],!1)},fetch:function(a,d){if(c.load&&console.log("fetch",a,d),a.match(/^data:/)){var e=a.split(","),f=e[0],g=e[1];g=f.indexOf(";base64")>-1?atob(g):decodeURIComponent(g),setTimeout(function(){this.receive(a,d,null,g)}.bind(this),0)}else{var h=function(b,c,e){this.receive(a,d,b,c,e)}.bind(this);b.load(a,h)}},receive:function(a,b,c,d,e){this.cache[a]=d;var f=this.pending[a];e&&e!==a&&(this.cache[e]=d,f=f.concat(this.pending[e]));for(var g,h=0,i=f.length;i>h&&(g=f[h]);h++)this.onload(e||a,g,d),this.tail();this.pending[a]=null,e&&e!==a&&(this.pending[e]=null)},tail:function(){--this.inflight,this.checkDone()},checkDone:function(){this.inflight||this.oncomplete()}},b=b||{async:!0,ok:function(a){return a.status>=200&&a.status<300||304===a.status||0===a.status},load:function(c,d,e){var f=new XMLHttpRequest;return(a.flags.debug||a.flags.bust)&&(c+="?"+Math.random()),f.open("GET",c,b.async),f.addEventListener("readystatechange",function(){if(4===f.readyState){var a=f.getResponseHeader("Location"),c=null;if(a)var c="/"===a.substr(0,1)?location.origin+a:c;d.call(e,!b.ok(f)&&f,f.response||f.responseText,c)}}),f.send(),f},loadDocument:function(a,b,c){this.load(a,b,c).responseType="document"}},a.xhr=b,a.Loader=d}(window.HTMLImports),function(a){function b(a){return"link"===a.localName&&a.rel===g}function c(a){var b=d(a),c="data:text/javascript";try{c+=";base64,"+btoa(b)}catch(e){c+=";charset=utf-8,"+encodeURIComponent(b)}return c}function d(a){return a.textContent+e(a)}function e(a){var b=a.__nodeUrl;if(!b){b=a.ownerDocument.baseURI;var c="["+Math.floor(1e3*(Math.random()+1))+"]",d=a.textContent.match(/Polymer\(['"]([^'"]*)/);c=d&&d[1]||c,b+="/"+c+".js"}return"\n//# sourceURL="+b+"\n"}function f(a){var b=a.ownerDocument.createElement("style");return b.textContent=a.textContent,n.resolveUrlsInStyle(b),b}var g="import",h=a.flags,i=/Trident/.test(navigator.userAgent),j=window.ShadowDOMPolyfill?window.ShadowDOMPolyfill.wrapIfNeeded(document):document,k={documentSelectors:"link[rel="+g+"]",importsSelectors:["link[rel="+g+"]","link[rel=stylesheet]","style","script:not([type])",'script[type="text/javascript"]'].join(","),map:{link:"parseLink",script:"parseScript",style:"parseStyle"},parseNext:function(){var a=this.nextToParse();a&&this.parse(a)},parse:function(a){if(this.isParsed(a))return void(h.parse&&console.log("[%s] is already parsed",a.localName));var b=this[this.map[a.localName]];b&&(this.markParsing(a),b.call(this,a))},markParsing:function(a){h.parse&&console.log("parsing",a),this.parsingElement=a},markParsingComplete:function(a){a.__importParsed=!0,a.__importElement&&(a.__importElement.__importParsed=!0),this.parsingElement=null,h.parse&&console.log("completed",a)},invalidateParse:function(a){a&&a.__importLink&&(a.__importParsed=a.__importLink.__importParsed=!1,this.parseSoon())},parseSoon:function(){this._parseSoon&&cancelAnimationFrame(this._parseDelay);var a=this;this._parseSoon=requestAnimationFrame(function(){a.parseNext()})},parseImport:function(a){if(HTMLImports.__importsParsingHook&&HTMLImports.__importsParsingHook(a),a.import.__importParsed=!0,this.markParsingComplete(a),a.dispatchEvent(a.__resource?new CustomEvent("load",{bubbles:!1}):new CustomEvent("error",{bubbles:!1})),a.__pending)for(var b;a.__pending.length;)b=a.__pending.shift(),b&&b({target:a});this.parseNext()},parseLink:function(a){b(a)?this.parseImport(a):(a.href=a.href,this.parseGeneric(a))},parseStyle:function(a){var b=a;a=f(a),a.__importElement=b,this.parseGeneric(a)},parseGeneric:function(a){this.trackElement(a),this.addElementToDocument(a)},rootImportForElement:function(a){for(var b=a;b.ownerDocument.__importLink;)b=b.ownerDocument.__importLink;return b},addElementToDocument:function(a){for(var b=this.rootImportForElement(a.__importElement||a),c=b.__insertedElements=b.__insertedElements||0,d=b.nextElementSibling,e=0;c>e;e++)d=d&&d.nextElementSibling;b.parentNode.insertBefore(a,d)},trackElement:function(a,b){var c=this,d=function(d){b&&b(d),c.markParsingComplete(a),c.parseNext()};if(a.addEventListener("load",d),a.addEventListener("error",d),i&&"style"===a.localName){var e=!1;if(-1==a.textContent.indexOf("@import"))e=!0;else if(a.sheet){e=!0;for(var f,g=a.sheet.cssRules,h=g?g.length:0,j=0;h>j&&(f=g[j]);j++)f.type===CSSRule.IMPORT_RULE&&(e=e&&Boolean(f.styleSheet))}e&&a.dispatchEvent(new CustomEvent("load",{bubbles:!1}))}},parseScript:function(b){var d=document.createElement("script");d.__importElement=b,d.src=b.src?b.src:c(b),a.currentScript=b,this.trackElement(d,function(){d.parentNode.removeChild(d),a.currentScript=null}),this.addElementToDocument(d)},nextToParse:function(){return!this.parsingElement&&this.nextToParseInDoc(j)},nextToParseInDoc:function(a,c){for(var d,e=a.querySelectorAll(this.parseSelectorsForNode(a)),f=0,g=e.length;g>f&&(d=e[f]);f++)if(!this.isParsed(d))return this.hasResource(d)?b(d)?this.nextToParseInDoc(d.import,d):d:void 0;return c},parseSelectorsForNode:function(a){var b=a.ownerDocument||a;return b===j?this.documentSelectors:this.importsSelectors},isParsed:function(a){return a.__importParsed},hasResource:function(a){return b(a)&&!a.import?!1:!0}},l=/(url\()([^)]*)(\))/g,m=/(@import[\s]+(?!url\())([^;]*)(;)/g,n={resolveUrlsInStyle:function(a){var b=a.ownerDocument,c=b.createElement("a");return a.textContent=this.resolveUrlsInCssText(a.textContent,c),a},resolveUrlsInCssText:function(a,b){var c=this.replaceUrls(a,b,l);return c=this.replaceUrls(c,b,m)},replaceUrls:function(a,b,c){return a.replace(c,function(a,c,d,e){var f=d.replace(/["']/g,"");return b.href=f,f=b.href,c+"'"+f+"'"+e})}};a.parser=k,a.path=n,a.isIE=i}(HTMLImports),function(a){function b(a){return c(a,q)}function c(a,b){return"link"===a.localName&&a.getAttribute("rel")===b}function d(a,b){var c=a;c instanceof Document||(c=document.implementation.createHTMLDocument(q)),c._URL=b;var d=c.createElement("base");d.setAttribute("href",b),c.baseURI||(c.baseURI=b);var e=c.createElement("meta");return e.setAttribute("charset","utf-8"),c.head.appendChild(e),c.head.appendChild(d),a instanceof Document||(c.body.innerHTML=a),window.HTMLTemplateElement&&HTMLTemplateElement.bootstrap&&HTMLTemplateElement.bootstrap(c),c}function e(a,b){b=b||r,g(function(){h(a,b)},b)}function f(a){return"complete"===a.readyState||a.readyState===y}function g(a,b){if(f(b))a&&a();else{var c=function(){("complete"===b.readyState||b.readyState===y)&&(b.removeEventListener(z,c),g(a,b))};b.addEventListener(z,c)}}function h(a,b){function c(){f==g&&a&&a()}function d(){f++,c()}var e=b.querySelectorAll("link[rel=import]"),f=0,g=e.length;if(g)for(var h,j=0;g>j&&(h=e[j]);j++)i(h)?d.call(h):(h.addEventListener("load",d),h.addEventListener("error",d));else c()}function i(a){return o?a.import&&"loading"!==a.import.readyState||a.__loaded:a.__importParsed}function j(a){for(var b,c=0,d=a.length;d>c&&(b=a[c]);c++)k(b)&&l(b)}function k(a){return"link"===a.localName&&"import"===a.rel}function l(a){var b=a.import;b?m({target:a}):(a.addEventListener("load",m),a.addEventListener("error",m))}function m(a){a.target.__loaded=!0}var n="import"in document.createElement("link"),o=n,p=a.flags,q="import",r=window.ShadowDOMPolyfill?ShadowDOMPolyfill.wrapIfNeeded(document):document;if(o)var s={};else var t=(a.xhr,a.Loader),u=a.parser,s={documents:{},documentPreloadSelectors:"link[rel="+q+"]",importsPreloadSelectors:["link[rel="+q+"]"].join(","),loadNode:function(a){v.addNode(a)},loadSubtree:function(a){var b=this.marshalNodes(a);v.addNodes(b)},marshalNodes:function(a){return a.querySelectorAll(this.loadSelectorsForNode(a))},loadSelectorsForNode:function(a){var b=a.ownerDocument||a;return b===r?this.documentPreloadSelectors:this.importsPreloadSelectors},loaded:function(a,c,e){if(p.load&&console.log("loaded",a,c),c.__resource=e,b(c)){var f=this.documents[a];f||(f=d(e,a),f.__importLink=c,this.bootDocument(f),this.documents[a]=f),c.import=f}u.parseNext()},bootDocument:function(a){this.loadSubtree(a),this.observe(a),u.parseNext()},loadedAll:function(){u.parseNext()}},v=new t(s.loaded.bind(s),s.loadedAll.bind(s));var w={get:function(){return HTMLImports.currentScript||document.currentScript},configurable:!0};if(Object.defineProperty(document,"_currentScript",w),Object.defineProperty(r,"_currentScript",w),!document.baseURI){var x={get:function(){return window.location.href},configurable:!0};Object.defineProperty(document,"baseURI",x),Object.defineProperty(r,"baseURI",x)}var y=HTMLImports.isIE?"complete":"interactive",z="readystatechange";o&&new MutationObserver(function(a){for(var b,c=0,d=a.length;d>c&&(b=a[c]);c++)b.addedNodes&&j(b.addedNodes)}).observe(document.head,{childList:!0}),a.hasNative=n,a.useNative=o,a.importer=s,a.IMPORT_LINK_TYPE=q,a.isImportLoaded=i,a.importLoader=v,a.whenReady=e,a.whenImportsReady=e}(window.HTMLImports),function(a){function b(a){for(var b,d=0,e=a.length;e>d&&(b=a[d]);d++)"childList"===b.type&&b.addedNodes.length&&c(b.addedNodes)}function c(a){for(var b,e,g=0,h=a.length;h>g&&(e=a[g]);g++)b=b||e.ownerDocument,d(e)&&f.loadNode(e),e.children&&e.children.length&&c(e.children)}function d(a){return 1===a.nodeType&&g.call(a,f.loadSelectorsForNode(a))}function e(a){h.observe(a,{childList:!0,subtree:!0})}var f=(a.IMPORT_LINK_TYPE,a.importer),g=(a.parser,HTMLElement.prototype.matches||HTMLElement.prototype.matchesSelector||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector),h=new MutationObserver(b);a.observe=e,f.observe=e}(HTMLImports),function(){function a(){HTMLImports.importer.bootDocument(b)}"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(a,b){var c=document.createEvent("HTMLEvents");return c.initEvent(a,b.bubbles===!1?!1:!0,b.cancelable===!1?!1:!0,b.detail),c});var b=window.ShadowDOMPolyfill?window.ShadowDOMPolyfill.wrapIfNeeded(document):document;HTMLImports.whenImportsReady(function(){HTMLImports.ready=!0,HTMLImports.readyTime=(new Date).getTime(),b.dispatchEvent(new CustomEvent("HTMLImportsLoaded",{bubbles:!0}))}),HTMLImports.useNative||("complete"===document.readyState||"interactive"===document.readyState&&!window.attachEvent?a():document.addEventListener("DOMContentLoaded",a))}(),window.CustomElements=window.CustomElements||{flags:{}},function(a){function b(a,c,d){var e=a.firstElementChild;if(!e)for(e=a.firstChild;e&&e.nodeType!==Node.ELEMENT_NODE;)e=e.nextSibling;for(;e;)c(e,d)!==!0&&b(e,c,d),e=e.nextElementSibling;return null}function c(a,b){for(var c=a.shadowRoot;c;)d(c,b),c=c.olderShadowRoot}function d(a,d){b(a,function(a){return d(a)?!0:void c(a,d)}),c(a,d)}function e(a){return h(a)?(i(a),!0):void l(a)}function f(a){d(a,function(a){return e(a)?!0:void 0})}function g(a){return e(a)||f(a)}function h(b){if(!b.__upgraded__&&b.nodeType===Node.ELEMENT_NODE){var c=b.getAttribute("is")||b.localName,d=a.registry[c];if(d)return A.dom&&console.group("upgrade:",b.localName),a.upgrade(b),A.dom&&console.groupEnd(),!0}}function i(a){l(a),r(a)&&d(a,function(a){l(a)})}function j(a){if(E.push(a),!D){D=!0;var b=window.Platform&&window.Platform.endOfMicrotask||setTimeout;b(k)}}function k(){D=!1;for(var a,b=E,c=0,d=b.length;d>c&&(a=b[c]);c++)a();E=[]}function l(a){C?j(function(){m(a)}):m(a)}function m(a){(a.attachedCallback||a.detachedCallback||a.__upgraded__&&A.dom)&&(A.dom&&console.group("inserted:",a.localName),r(a)&&(a.__inserted=(a.__inserted||0)+1,a.__inserted<1&&(a.__inserted=1),a.__inserted>1?A.dom&&console.warn("inserted:",a.localName,"insert/remove count:",a.__inserted):a.attachedCallback&&(A.dom&&console.log("inserted:",a.localName),a.attachedCallback())),A.dom&&console.groupEnd()) }function n(a){o(a),d(a,function(a){o(a)})}function o(a){C?j(function(){p(a)}):p(a)}function p(a){(a.attachedCallback||a.detachedCallback||a.__upgraded__&&A.dom)&&(A.dom&&console.group("removed:",a.localName),r(a)||(a.__inserted=(a.__inserted||0)-1,a.__inserted>0&&(a.__inserted=0),a.__inserted<0?A.dom&&console.warn("removed:",a.localName,"insert/remove count:",a.__inserted):a.detachedCallback&&a.detachedCallback()),A.dom&&console.groupEnd())}function q(a){return window.ShadowDOMPolyfill?ShadowDOMPolyfill.wrapIfNeeded(a):a}function r(a){for(var b=a,c=q(document);b;){if(b==c)return!0;b=b.parentNode||b.host}}function s(a){if(a.shadowRoot&&!a.shadowRoot.__watched){A.dom&&console.log("watching shadow-root for: ",a.localName);for(var b=a.shadowRoot;b;)t(b),b=b.olderShadowRoot}}function t(a){a.__watched||(w(a),a.__watched=!0)}function u(a){if(A.dom){var b=a[0];if(b&&"childList"===b.type&&b.addedNodes&&b.addedNodes){for(var c=b.addedNodes[0];c&&c!==document&&!c.host;)c=c.parentNode;var d=c&&(c.URL||c._URL||c.host&&c.host.localName)||"";d=d.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",a.length,d||"")}a.forEach(function(a){"childList"===a.type&&(G(a.addedNodes,function(a){a.localName&&g(a)}),G(a.removedNodes,function(a){a.localName&&n(a)}))}),A.dom&&console.groupEnd()}function v(){u(F.takeRecords()),k()}function w(a){F.observe(a,{childList:!0,subtree:!0})}function x(a){w(a)}function y(a){A.dom&&console.group("upgradeDocument: ",a.baseURI.split("/").pop()),g(a),A.dom&&console.groupEnd()}function z(a){a=q(a);for(var b,c=a.querySelectorAll("link[rel="+B+"]"),d=0,e=c.length;e>d&&(b=c[d]);d++)b.import&&b.import.__parsed&&z(b.import);y(a)}var A=window.logFlags||{},B=window.HTMLImports?HTMLImports.IMPORT_LINK_TYPE:"none",C=!window.MutationObserver||window.MutationObserver===window.JsMutationObserver;a.hasPolyfillMutations=C;var D=!1,E=[],F=new MutationObserver(u),G=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.IMPORT_LINK_TYPE=B,a.watchShadow=s,a.upgradeDocumentTree=z,a.upgradeAll=g,a.upgradeSubtree=f,a.insertedNode=i,a.observeDocument=x,a.upgradeDocument=y,a.takeRecords=v}(window.CustomElements),function(a){function b(b,g){var h=g||{};if(!b)throw new Error("document.registerElement: first argument `name` must not be empty");if(b.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(b)+"'.");if(c(b))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(b)+"'. The type name is invalid.");if(n(b))throw new Error("DuplicateDefinitionError: a type with name '"+String(b)+"' is already registered");if(!h.prototype)throw new Error("Options missing required prototype property");return h.__name=b.toLowerCase(),h.lifecycle=h.lifecycle||{},h.ancestry=d(h.extends),e(h),f(h),l(h.prototype),o(h.__name,h),h.ctor=p(h),h.ctor.prototype=h.prototype,h.prototype.constructor=h.ctor,a.ready&&a.upgradeDocumentTree(document),h.ctor}function c(a){for(var b=0;b=0&&i(d,HTMLElement),d}function s(a){if(!a.__upgraded__&&a.nodeType===Node.ELEMENT_NODE){var b=a.getAttribute("is"),c=n(b||a.localName);if(c){if(b&&c.tag==a.localName)return h(a,c);if(!b&&!c.extends)return h(a,c)}}}function t(b){var c=D.call(this,b);return a.upgradeAll(c),c}a||(a=window.CustomElements={flags:{}});var u=a.flags,v=Boolean(document.registerElement),w=!u.register&&v&&!window.ShadowDOMPolyfill&&(!window.HTMLImports||HTMLImports.useNative);if(w){var x=function(){};a.registry={},a.upgradeElement=x,a.watchShadow=x,a.upgrade=x,a.upgradeAll=x,a.upgradeSubtree=x,a.observeDocument=x,a.upgradeDocument=x,a.upgradeDocumentTree=x,a.takeRecords=x,a.reservedTagList=[]}else{var y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],z={},A="http://www.w3.org/1999/xhtml",B=document.createElement.bind(document),C=document.createElementNS.bind(document),D=Node.prototype.cloneNode;document.registerElement=b,document.createElement=r,document.createElementNS=q,Node.prototype.cloneNode=t,a.registry=z,a.upgrade=s}var E;E=Object.__proto__||w?function(a,b){return a instanceof b}:function(a,b){for(var c=a;c;){if(c===b.prototype)return!0;c=c.__proto__}return!1},a.instanceof=E,a.reservedTagList=y,document.register=document.registerElement,a.hasNative=v,a.useNative=w}(window.CustomElements),function(a){function b(a){return"link"===a.localName&&a.getAttribute("rel")===c}var c=a.IMPORT_LINK_TYPE,d={selectors:["link[rel="+c+"]"],map:{link:"parseLink"},parse:function(a){if(!a.__parsed){a.__parsed=!0;var b=a.querySelectorAll(d.selectors);e(b,function(a){d[d.map[a.localName]](a)}),CustomElements.upgradeDocument(a),CustomElements.observeDocument(a)}},parseLink:function(a){b(a)&&this.parseImport(a)},parseImport:function(a){a.import&&d.parse(a.import)}},e=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.parser=d,a.IMPORT_LINK_TYPE=c}(window.CustomElements),function(a){function b(){CustomElements.parser.parse(document),CustomElements.upgradeDocument(document);var a=window.Platform&&Platform.endOfMicrotask?Platform.endOfMicrotask:setTimeout;a(function(){CustomElements.ready=!0,CustomElements.readyTime=Date.now(),window.HTMLImports&&(CustomElements.elapsed=CustomElements.readyTime-HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0})),window.HTMLImports&&(HTMLImports.__importsParsingHook=function(a){CustomElements.parser.parse(a.import)})})}if("function"!=typeof window.CustomEvent&&(window.CustomEvent=function(a,b){b=b||{};var c=document.createEvent("CustomEvent");return c.initCustomEvent(a,Boolean(b.bubbles),Boolean(b.cancelable),b.detail),c},window.CustomEvent.prototype=window.Event.prototype),"complete"===document.readyState||a.flags.eager)b();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var c=window.HTMLImports&&!HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(c,b)}else b()}(window.CustomElements),function(){if(window.ShadowDOMPolyfill){var a=["upgradeAll","upgradeSubtree","observeDocument","upgradeDocument"],b={};a.forEach(function(a){b[a]=CustomElements[a]}),a.forEach(function(a){CustomElements[a]=function(c){return b[a](wrap(c))}})}}(),function(a){function b(a){this.cache=Object.create(null),this.map=Object.create(null),this.requests=0,this.regex=a}var c=a.endOfMicrotask;b.prototype={extractUrls:function(a,b){for(var c,d,e=[];c=this.regex.exec(a);)d=new URL(c[1],b),e.push({matched:c[0],url:d.href});return e},process:function(a,b,c){var d=this.extractUrls(a,b),e=c.bind(null,this.map);this.fetch(d,e)},fetch:function(a,b){var c=a.length;if(!c)return b();for(var d,e,f,g=function(){0===--c&&b()},h=0;c>h;h++)d=a[h],f=d.url,e=this.cache[f],e||(e=this.xhr(f),e.match=d,this.cache[f]=e),e.wait(g)},handleXhr:function(a){var b=a.match,c=b.url,d=a.response||a.responseText||"";this.map[c]=d,this.fetch(this.extractUrls(d,c),a.resolve)},xhr:function(a){this.requests++;var b=new XMLHttpRequest;return b.open("GET",a,!0),b.send(),b.onerror=b.onload=this.handleXhr.bind(this,b),b.pending=[],b.resolve=function(){for(var a=b.pending,c=0;ch&&(e=a[h]);h++)this.resolveNode(e,b,d)}};var e=new b;a.styleResolver=e}(window.Platform),function(){"use strict";function a(a){for(;a.parentNode;)a=a.parentNode;return"function"==typeof a.getElementById?a:null}function b(a,b,c){var d=a.bindings_;return d||(d=a.bindings_={}),d[b]&&c[b].close(),d[b]=c}function c(a,b,c){return c}function d(a){return null==a?"":a}function e(a,b){a.data=d(b)}function f(a){return function(b){return e(a,b)}}function g(a,b,c,e){return c?void(e?a.setAttribute(b,""):a.removeAttribute(b)):void a.setAttribute(b,d(e))}function h(a,b,c){return function(d){g(a,b,c,d)}}function i(a){switch(a.type){case"checkbox":return u;case"radio":case"select-multiple":case"select-one":return"change";case"range":if(/Trident|MSIE/.test(navigator.userAgent))return"change";default:return"input"}}function j(a,b,c,e){a[b]=(e||d)(c)}function k(a,b,c){return function(d){return j(a,b,d,c)}}function l(){}function m(a,b,c,d){function e(){c.setValue(a[b]),c.discardChanges(),(d||l)(a),Platform.performMicrotaskCheckpoint()}var f=i(a);return a.addEventListener(f,e),{close:function(){a.removeEventListener(f,e),c.close()},observable_:c}}function n(a){return Boolean(a)}function o(b){if(b.form)return s(b.form.elements,function(a){return a!=b&&"INPUT"==a.tagName&&"radio"==a.type&&a.name==b.name});var c=a(b);if(!c)return[];var d=c.querySelectorAll('input[type="radio"][name="'+b.name+'"]');return s(d,function(a){return a!=b&&!a.form})}function p(a){"INPUT"===a.tagName&&"radio"===a.type&&o(a).forEach(function(a){var b=a.bindings_.checked;b&&b.observable_.setValue(!1)})}function q(a,b){var c,e,f,g=a.parentNode;g instanceof HTMLSelectElement&&g.bindings_&&g.bindings_.value&&(c=g,e=c.bindings_.value,f=c.value),a.value=d(b),c&&c.value!=f&&(e.observable_.setValue(c.value),e.observable_.discardChanges(),Platform.performMicrotaskCheckpoint())}function r(a){return function(b){q(a,b)}}var s=Array.prototype.filter.call.bind(Array.prototype.filter);Node.prototype.bind=function(a,b){console.error("Unhandled binding to Node: ",this,a,b)},Node.prototype.bindFinished=function(){};var t=c;Object.defineProperty(Platform,"enableBindingsReflection",{get:function(){return t===b},set:function(a){return t=a?b:c,a},configurable:!0}),Text.prototype.bind=function(a,b,c){if("textContent"!==a)return Node.prototype.bind.call(this,a,b,c);if(c)return e(this,b);var d=b;return e(this,d.open(f(this))),t(this,a,d)},Element.prototype.bind=function(a,b,c){var d="?"==a[a.length-1];if(d&&(this.removeAttribute(a),a=a.slice(0,-1)),c)return g(this,a,d,b);var e=b;return g(this,a,d,e.open(h(this,a,d))),t(this,a,e)};var u;!function(){var a=document.createElement("div"),b=a.appendChild(document.createElement("input"));b.setAttribute("type","checkbox");var c,d=0;b.addEventListener("click",function(){d++,c=c||"click"}),b.addEventListener("change",function(){d++,c=c||"change"});var e=document.createEvent("MouseEvent");e.initMouseEvent("click",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),b.dispatchEvent(e),u=1==d?"change":c}(),HTMLInputElement.prototype.bind=function(a,c,e){if("value"!==a&&"checked"!==a)return HTMLElement.prototype.bind.call(this,a,c,e);this.removeAttribute(a);var f="checked"==a?n:d,g="checked"==a?p:l;if(e)return j(this,a,c,f);var h=c,i=m(this,a,h,g);return j(this,a,h.open(k(this,a,f)),f),b(this,a,i)},HTMLTextAreaElement.prototype.bind=function(a,b,c){if("value"!==a)return HTMLElement.prototype.bind.call(this,a,b,c);if(this.removeAttribute("value"),c)return j(this,"value",b);var e=b,f=m(this,"value",e);return j(this,"value",e.open(k(this,"value",d))),t(this,a,f)},HTMLOptionElement.prototype.bind=function(a,b,c){if("value"!==a)return HTMLElement.prototype.bind.call(this,a,b,c);if(this.removeAttribute("value"),c)return q(this,b);var d=b,e=m(this,"value",d);return q(this,d.open(r(this))),t(this,a,e)},HTMLSelectElement.prototype.bind=function(a,c,d){if("selectedindex"===a&&(a="selectedIndex"),"selectedIndex"!==a&&"value"!==a)return HTMLElement.prototype.bind.call(this,a,c,d);if(this.removeAttribute(a),d)return j(this,a,c);var e=c,f=m(this,a,e);return j(this,a,e.open(k(this,a))),b(this,a,f)}}(this),function(a){"use strict";function b(a){if(!a)throw new Error("Assertion failed")}function c(a){for(var b;b=a.parentNode;)a=b;return a}function d(a,b){if(b){for(var d,e="#"+b;!d&&(a=c(a),a.protoContent_?d=a.protoContent_.querySelector(e):a.getElementById&&(d=a.getElementById(b)),!d&&a.templateCreator_);)a=a.templateCreator_;return d}}function e(a){return"template"==a.tagName&&"http://www.w3.org/2000/svg"==a.namespaceURI}function f(a){return"TEMPLATE"==a.tagName&&"http://www.w3.org/1999/xhtml"==a.namespaceURI}function g(a){return Boolean(L[a.tagName]&&a.hasAttribute("template"))}function h(a){return void 0===a.isTemplate_&&(a.isTemplate_="TEMPLATE"==a.tagName||g(a)),a.isTemplate_}function i(a,b){var c=a.querySelectorAll(N);h(a)&&b(a),G(c,b)}function j(a){function b(a){HTMLTemplateElement.decorate(a)||j(a.content)}i(a,b)}function k(a,b){Object.getOwnPropertyNames(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))})}function l(a){var b=a.ownerDocument;if(!b.defaultView)return b;var c=b.templateContentsOwner_;if(!c){for(c=b.implementation.createHTMLDocument("");c.lastChild;)c.removeChild(c.lastChild);b.templateContentsOwner_=c}return c}function m(a){if(!a.stagingDocument_){var b=a.ownerDocument;if(!b.stagingDocument_){b.stagingDocument_=b.implementation.createHTMLDocument(""),b.stagingDocument_.isStagingDocument=!0;var c=b.stagingDocument_.createElement("base");c.href=document.baseURI,b.stagingDocument_.head.appendChild(c),b.stagingDocument_.stagingDocument_=b.stagingDocument_}a.stagingDocument_=b.stagingDocument_}return a.stagingDocument_}function n(a){var b=a.ownerDocument.createElement("template");a.parentNode.insertBefore(b,a);for(var c=a.attributes,d=c.length;d-->0;){var e=c[d];K[e.name]&&("template"!==e.name&&b.setAttribute(e.name,e.value),a.removeAttribute(e.name))}return b}function o(a){var b=a.ownerDocument.createElement("template");a.parentNode.insertBefore(b,a);for(var c=a.attributes,d=c.length;d-->0;){var e=c[d];b.setAttribute(e.name,e.value),a.removeAttribute(e.name)}return a.parentNode.removeChild(a),b}function p(a,b,c){var d=a.content;if(c)return void d.appendChild(b);for(var e;e=b.firstChild;)d.appendChild(e)}function q(a){P?a.__proto__=HTMLTemplateElement.prototype:k(a,HTMLTemplateElement.prototype)}function r(a){a.setModelFn_||(a.setModelFn_=function(){a.setModelFnScheduled_=!1;var b=z(a,a.delegate_&&a.delegate_.prepareBinding);w(a,b,a.model_)}),a.setModelFnScheduled_||(a.setModelFnScheduled_=!0,Observer.runEOM_(a.setModelFn_))}function s(a,b,c,d){if(a&&a.length){for(var e,f=a.length,g=0,h=0,i=0,j=!0;f>h;){var g=a.indexOf("{{",h),k=a.indexOf("[[",h),l=!1,m="}}";if(k>=0&&(0>g||g>k)&&(g=k,l=!0,m="]]"),i=0>g?-1:a.indexOf(m,g+2),0>i){if(!e)return;e.push(a.slice(h));break}e=e||[],e.push(a.slice(h,g));var n=a.slice(g+2,i).trim();e.push(l),j=j&&l;var o=d&&d(n,b,c);e.push(null==o?Path.get(n):null),e.push(o),h=i+2}return h===f&&e.push(""),e.hasOnePath=5===e.length,e.isSimplePath=e.hasOnePath&&""==e[0]&&""==e[4],e.onlyOneTime=j,e.combinator=function(a){for(var b=e[0],c=1;cc?(this.keys.push(a),this.values.push(b)):this.values[c]=b},get:function(a){var b=this.keys.indexOf(a);if(!(0>b))return this.values[b]},"delete":function(a){var b=this.keys.indexOf(a);return 0>b?!1:(this.keys.splice(b,1),this.values.splice(b,1),!0)},forEach:function(a,b){for(var c=0;cb;)this.reportInstanceMoved(b),b++},closeInstanceBindings:function(a){for(var b=a.bindings_,c=0;c - + diff --git a/build/gui.js b/build/gui.js index 5e2758e..c7ab2ed 100755 --- a/build/gui.js +++ b/build/gui.js @@ -3,7 +3,7 @@ document.write(['', -'', +'', '', diff --git a/build/gui.shim.js b/build/gui.shim.js index ecf25f3..123c7d6 100644 --- a/build/gui.shim.js +++ b/build/gui.shim.js @@ -1 +1 @@ -!function(n){var t=function(){this.defined={}};t.ready=function(n){n()},t.prototype.define=function(n,t){return this.defined[n]=t,e},t.prototype.add=function(){return e};var i=function(){return this},e={on:i};n.Gui=t}(this); \ No newline at end of file +!function(t){"use strict";var n=function(){this.vars={}};n.ready=function(t){t()},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.add=function(){return i};var r=function(){return this},i={on:r};t.Gui=n}(this); \ No newline at end of file From 8897b3b8c8cb7c241bc204b1f6408ea5ebd10b7f Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Tue, 9 Sep 2014 13:59:32 -0700 Subject: [PATCH 09/17] update todo added browsersync can use with gulp dev or gulp browser --- TODO.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/TODO.md b/TODO.md index 04650be..20b042d 100644 --- a/TODO.md +++ b/TODO.md @@ -1,7 +1,7 @@ BUILD - [x] single import -- [ ] browsersync +- [x] browsersync REFACTOR From eec5161655b202a260d450f506cc65e39c9fc199 Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Tue, 9 Sep 2014 14:41:17 -0700 Subject: [PATCH 10/17] make the bower dep >= --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 0dbc36c..b16964f 100644 --- a/bower.json +++ b/bower.json @@ -17,6 +17,6 @@ "docs" ], "dependencies": { - "polymer": "Polymer/polymer#~0.3.5" + "polymer": "Polymer/polymer#>=0.3.5" } } From dc076cf211ba97f31cf3d766a52e3b08865babd1 Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Wed, 10 Sep 2014 13:12:54 -0700 Subject: [PATCH 11/17] update bower min version of polymer --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index b16964f..ba18a8b 100644 --- a/bower.json +++ b/bower.json @@ -17,6 +17,6 @@ "docs" ], "dependencies": { - "polymer": "Polymer/polymer#>=0.3.5" + "polymer": "Polymer/polymer#>=0.4.0" } } From 29e2f5b99e486726c3616f2ec83aaa9f5749bb40 Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Wed, 10 Sep 2014 15:40:55 -0700 Subject: [PATCH 12/17] add build css files --- .gitignore | 1 - build/gui.html | 17 +-- build/gui.js | 17 +-- docs/style.css | 79 ++++++++++++ elements/dat-gui-boolean/dat-gui-boolean.css | 57 +++++++++ .../dat-gui-function/dat-gui-function.css | 0 elements/dat-gui-number/dat-gui-number.css | 81 +++++++++++++ elements/dat-gui-option/dat-gui-option.css | 8 ++ elements/dat-gui-string/dat-gui-string.css | 4 + elements/dat-gui/dat-gui.css | 112 ++++++++++++++++++ elements/gui-button/gui-button.css | 95 +++++++++++++++ elements/gui-row/gui-row.css | 102 ++++++++++++++++ elements/shared.css | 0 elements/shared/input.css | 31 +++++ elements/shared/shared.css | 4 + 15 files changed, 591 insertions(+), 17 deletions(-) create mode 100644 docs/style.css create mode 100644 elements/dat-gui-boolean/dat-gui-boolean.css create mode 100644 elements/dat-gui-function/dat-gui-function.css create mode 100644 elements/dat-gui-number/dat-gui-number.css create mode 100644 elements/dat-gui-option/dat-gui-option.css create mode 100644 elements/dat-gui-string/dat-gui-string.css create mode 100644 elements/dat-gui/dat-gui.css create mode 100644 elements/gui-button/gui-button.css create mode 100644 elements/gui-row/gui-row.css create mode 100644 elements/shared.css create mode 100644 elements/shared/input.css create mode 100644 elements/shared/shared.css diff --git a/.gitignore b/.gitignore index 2ad2b67..3c3629e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ node_modules -*.css \ No newline at end of file diff --git a/build/gui.html b/build/gui.html index e000965..eaffc09 100755 --- a/build/gui.html +++ b/build/gui.html @@ -1,12 +1,13 @@ - + - + diff --git a/build/gui.js b/build/gui.js index c7ab2ed..86a807f 100755 --- a/build/gui.js +++ b/build/gui.js @@ -1,12 +1,13 @@ -document.write(['', +document.write(['', '', -'', +'', '', '', '', diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 0000000..0657c5a --- /dev/null +++ b/docs/style.css @@ -0,0 +1,79 @@ +* { + margin: 0; +} +body { + margin: 36px; + line-height: 24px; +} +.disable-hover, +.disable-hover * { + pointer-events: none !important; +} +h1, +h2, +h3, +h4, +p, +pre { + margin-bottom: 18px; +} +pre { + width: 100%; + margin-bottom: 36px; + line-height: 20px; +} +h1 { + margin-bottom: 54px; +} +h3 { + padding: 18px 0; + margin-bottom: 36px; + border-bottom: 1px solid rgba(0,0,0,0.2); + -webkit-transition: border-color 0.2s linear, color 0.2s linear; + -moz-transition: border-color 0.2s linear, color 0.2s linear; + -o-transition: border-color 0.2s linear, color 0.2s linear; + -ms-transition: border-color 0.2s linear, color 0.2s linear; + transition: border-color 0.2s linear, color 0.2s linear; +} +h3.sticky { + left: 36px; + right: 317px; + top: 0; + background: #fff; +} +h3.sticky.sticky-prev { + color: #eee; + border-bottom: 1px solid rgba(0,0,0,0); +} +#readme { + margin-right: 281px; +} +dat-gui { + position: fixed; + width: 245px; + top: 0px; + right: 18px; + z-index: 9999; + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -moz-transition: -moz-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -o-transition: -o-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -ms-transition: -ms-transform 0.4s cubic-bezier(0.5, 1, 0, 1); + transition: transform 0.4s cubic-bezier(0.5, 1, 0, 1); + -webkit-transform: translate3d(0, -200px, 0); + -moz-transform: translate3d(0, -200px, 0); + -o-transform: translate3d(0, -200px, 0); + -ms-transform: translate3d(0, -200px, 0); + transform: translate3d(0, -200px, 0); +} +dat-gui.sticky { + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-transition-delay: 400ms; + -moz-transition-delay: 400ms; + -o-transition-delay: 400ms; + -ms-transition-delay: 400ms; + transition-delay: 400ms; +} diff --git a/elements/dat-gui-boolean/dat-gui-boolean.css b/elements/dat-gui-boolean/dat-gui-boolean.css new file mode 100644 index 0000000..5abaf07 --- /dev/null +++ b/elements/dat-gui-boolean/dat-gui-boolean.css @@ -0,0 +1,57 @@ +#container { + height: 100%; + cursor: pointer; + padding-left: 8px; +} +#switch-track { + width: 2em; + height: 0.8em; + background: rgba(255,255,255,0.25); + border-radius: 999px; + -webkit-transition: background 0.1s linear; + -moz-transition: background 0.1s linear; + -o-transition: background 0.1s linear; + -ms-transition: background 0.1s linear; + transition: background 0.1s linear; +} +#switch-knob { + height: 0.8em; + width: 0.8em; + border-radius: 100%; + background: #ecebe0; + -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: -moz-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: -o-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: -ms-transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); + transition: transform 0.15s cubic-bezier(0.25, 0.25, 0, 1); +} +.value-true #switch-track { + background: #864694; +} +.value-true #switch-knob { + -webkit-transform: translate3d(1.2em, 0, 0); + -moz-transform: translate3d(1.2em, 0, 0); + -o-transform: translate3d(1.2em, 0, 0); + -ms-transform: translate3d(1.2em, 0, 0); + transform: translate3d(1.2em, 0, 0); +} +:host-context(.touch-false) .value-false:hover #switch-knob { + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -o-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); +} +:host-context(.touch-false) .value-true:hover #switch-knob { + -webkit-transform: translate3d(1.2em, 0, 0) scale(1.5); + -moz-transform: translate3d(1.2em, 0, 0) scale(1.5); + -o-transform: translate3d(1.2em, 0, 0) scale(1.5); + -ms-transform: translate3d(1.2em, 0, 0) scale(1.5); + transform: translate3d(1.2em, 0, 0) scale(1.5); +} +#text { + margin-left: 8px; +} +.value-false #text { + color: rgba(255,255,255,0.25); +} diff --git a/elements/dat-gui-function/dat-gui-function.css b/elements/dat-gui-function/dat-gui-function.css new file mode 100644 index 0000000..e69de29 diff --git a/elements/dat-gui-number/dat-gui-number.css b/elements/dat-gui-number/dat-gui-number.css new file mode 100644 index 0000000..c323ff3 --- /dev/null +++ b/elements/dat-gui-number/dat-gui-number.css @@ -0,0 +1,81 @@ +#container { + height: 100%; +} +#track-container { + height: 100%; + padding: 0 8px; +} +#track { + width: 100%; + height: 1px; + -webkit-border-radius: 1px; + border-radius: 1px; + display: inline-block; + position: relative; + background: rgba(255,255,255,0.25); +} +#fill { + height: 1px; + margin-top: 0px; + margin-left: 1px; + -webkit-border-radius: 100%; + border-radius: 100%; + position: absolute; + background: #25a0d8; + pointer-events: none; +} +#knob { + width: 0.6em; + height: 0.6em; + margin-left: -0.3em; + margin-top: -0.3em; + -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: -moz-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: -o-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: -ms-transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + transition: transform 0.1s cubic-bezier(0.25, 0.25, 0, 1); + pointer-events: none; + position: absolute; + background-color: #25a0d8; + -webkit-border-radius: 100%; + border-radius: 100%; +} +:host-context(.touch-false) #track-container:hover #knob { + -webkit-transform: scale(2); + -moz-transform: scale(2); + -o-transform: scale(2); + -ms-transform: scale(2); + transform: scale(2); +} +#track-container:active #knob { + -webkit-transform: scale(1.5); + -moz-transform: scale(1.5); + -o-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); +} +input { + color: #25a0d8; +} +input::selection { + background-color: rgba(255,255,255,0.25); +} +.slider-true input { + text-align: center; + width: 26%; + -webkit-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + transition: width 0.2s cubic-bezier(0.25, 0.25, 0, 1); + padding: 0; +} +:host-context(.touch-false) .slider-true input:hover { + width: 35%; +} +.slider-true input:focus { + width: 50%; +} +.slider-false input { + padding-left: 8px; +} diff --git a/elements/dat-gui-option/dat-gui-option.css b/elements/dat-gui-option/dat-gui-option.css new file mode 100644 index 0000000..3cc1d9a --- /dev/null +++ b/elements/dat-gui-option/dat-gui-option.css @@ -0,0 +1,8 @@ +#container { + height: 100%; + cursor: pointer; + padding-left: 8px; +} +select { + outline: none; +} diff --git a/elements/dat-gui-string/dat-gui-string.css b/elements/dat-gui-string/dat-gui-string.css new file mode 100644 index 0000000..0bdc77b --- /dev/null +++ b/elements/dat-gui-string/dat-gui-string.css @@ -0,0 +1,4 @@ +input { + color: #1ebd6e; + padding-left: 8px; +} diff --git a/elements/dat-gui/dat-gui.css b/elements/dat-gui/dat-gui.css new file mode 100644 index 0000000..6cf2342 --- /dev/null +++ b/elements/dat-gui/dat-gui.css @@ -0,0 +1,112 @@ +#panel { + -webkit-transition: -webkit-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + -moz-transition: -moz-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + -o-transition: -o-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + -ms-transition: -ms-transform 0.4s cubic-bezier(0, 0.8, 0, 1); + transition: transform 0.4s cubic-bezier(0, 0.8, 0, 1); + background: #282828; +} +.autoplace-true #panel { + width: 245px; + position: fixed; + top: 0; +} +.autoplace-true.touch-true #panel { + width: 320px; +} +.docked-false #panel { + right: 20px; +} +.docked-true #panel { + right: 0; + bottom: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; +} +.docked-true.open-false #panel { + -webkit-transform: translate3d(245px, 0, 0); + -moz-transform: translate3d(245px, 0, 0); + -o-transform: translate3d(245px, 0, 0); + -ms-transform: translate3d(245px, 0, 0); + transform: translate3d(245px, 0, 0); + overflow: visible; +} +.docked-true.open-false.touch-true #panel { + -webkit-transform: translate3d(320px, 0, 0); + -moz-transform: translate3d(320px, 0, 0); + -o-transform: translate3d(320px, 0, 0); + -ms-transform: translate3d(320px, 0, 0); + transform: translate3d(320px, 0, 0); +} +#controllers { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; +} +.touch-true #controllers { + font-size: 13.5px; +} +.docked-true #controllers { + position: absolute; + width: 100%; + top: 4.35em; +} +#closeButton { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + text-align: center; + padding: 6px 8px; +} +.touch-true #closeButton { + font-size: 13.5px; +} +gui-button { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + background: #282828; + height: 2.9em; + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + -moz-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + -o-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + -ms-transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); + transition: all 0.4s cubic-bezier(0, 0.8, 0, 1); +} +.touch-true gui-button { + font-size: 13.5px; +} +.docked-true gui-button { + top: 0; + right: 0; + width: 4.35em; + height: 4.35em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + background: #282828; +} +.docked-true.open-false gui-button { + -webkit-transform: translate3d(-245px, 0, 0); + -moz-transform: translate3d(-245px, 0, 0); + -o-transform: translate3d(-245px, 0, 0); + -ms-transform: translate3d(-245px, 0, 0); + transform: translate3d(-245px, 0, 0); +} +.docked-true.open-false.touch-true gui-button { + -webkit-transform: translate3d(-320px, 0, 0); + -moz-transform: translate3d(-320px, 0, 0); + -o-transform: translate3d(-320px, 0, 0); + -ms-transform: translate3d(-320px, 0, 0); + transform: translate3d(-320px, 0, 0); +} +.docked-false gui-button { + right: 0; + left: 0; +} diff --git a/elements/gui-button/gui-button.css b/elements/gui-button/gui-button.css new file mode 100644 index 0000000..50a681a --- /dev/null +++ b/elements/gui-button/gui-button.css @@ -0,0 +1,95 @@ +#container { + height: 100%; + cursor: pointer; +} +#button { + width: 21px; + height: 21px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 0; + padding: 4px 0px; + position: relative; + background: transparent; + margin: 0 auto; +} +#button.open-true .one { + -webkit-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + -moz-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + -o-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + -ms-transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + transform: translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0); + width: 11px; +} +#button.open-true .three { + -webkit-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + -moz-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + -o-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + -ms-transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + transform: translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0); + width: 11px; +} +#button.open-true .two { + width: 0; +} +#button.open-true .slider:before { + width: 0; + height: 0; +} +.slider { + width: 21px; + border-radius: 2px; + height: 1px; + background: #ecebe0; + position: absolute; + -webkit-transform-origin: 0.5px 0.5px; + -moz-transform-origin: 0.5px 0.5px; + -o-transform-origin: 0.5px 0.5px; + -ms-transform-origin: 0.5px 0.5px; + transform-origin: 0.5px 0.5px; + -webkit-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + -moz-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + -o-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + -ms-transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); + transition: all 200ms 200ms cubic-bezier(0, 0.5, 0, 1); +} +.slider:before { + width: 5px; + height: 5px; + margin-top: -2px; + margin-left: -2.5px; + border-radius: 5px; + background: #ecebe0; + display: inline-block; + content: ' '; + position: absolute; + left: 70%; + -webkit-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + -moz-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + -o-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + -ms-transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; + transition: left 200ms cubic-bezier(0, 0.5, 0, 1), width 0.001s 200ms, height 0.001s 200ms; +} +.slider.two { + margin-top: 6px; +} +.slider.two:before { + left: 30%; + -webkit-transition-delay: 0ms, 200ms, 200ms; + -moz-transition-delay: 0ms, 200ms, 200ms; + -o-transition-delay: 0ms, 200ms, 200ms; + -ms-transition-delay: 0ms, 200ms, 200ms; + transition-delay: 0ms, 200ms, 200ms; +} +.slider.three { + margin-top: 12px; +} +.slider.three:before { + left: 70%; + -webkit-transition-delay: 0ms, 200ms, 200ms; + -moz-transition-delay: 0ms, 200ms, 200ms; + -o-transition-delay: 0ms, 200ms, 200ms; + -ms-transition-delay: 0ms, 200ms, 200ms; + transition-delay: 0ms, 200ms, 200ms; +} diff --git a/elements/gui-row/gui-row.css b/elements/gui-row/gui-row.css new file mode 100644 index 0000000..44f4e4e --- /dev/null +++ b/elements/gui-row/gui-row.css @@ -0,0 +1,102 @@ +#row { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + height: 2.9em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: background-color 0.2s linear; + -moz-transition: background-color 0.2s linear; + -o-transition: background-color 0.2s linear; + -ms-transition: background-color 0.2s linear; + transition: background-color 0.2s linear; + border-bottom: 1px solid rgba(255,255,255,0.05); +} +:host-context(.touch-true) #row { + font-size: 13.5px; +} +#controller { + height: 100%; +} +#name { + padding: 0 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 38%; + cursor: default; +} +.comment-true #name { + cursor: pointer; +} +:host-context(.touch-true) #name { + font-size: 11px; + width: 30%; +} +#nameInner { + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} +#comment { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + line-height: 1.6em; + background: #e0cf99; + color: #333; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + overflow: hidden; + -webkit-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + transition: height 0.15s cubic-bezier(0.25, 0.25, 0, 1); + position: absolute; + z-index: 999; + pointer-events: none; + -webkit-transform: translate3d(0, 20px, 0); + -moz-transform: translate3d(0, 20px, 0); + -o-transform: translate3d(0, 20px, 0); + -ms-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -moz-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -o-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + -ms-transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); + transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1); +} +:host-context(.touch-true) #comment { + font-size: 13.5px; +} +#comment.open-true { + opacity: 1; + -ms-filter: none; + filter: none; + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} +:host-context(.touch-false) #comment.open-true { + -webkit-transition-delay: 200ms; + -moz-transition-delay: 200ms; + -o-transition-delay: 200ms; + -ms-transition-delay: 200ms; + transition-delay: 200ms; +} +#commentInner { + padding: 8px; +} +.comment-true #nameInner { + display: inline-block; + border-bottom: 1px dotted rgba(255,255,255,0.25); +} diff --git a/elements/shared.css b/elements/shared.css new file mode 100644 index 0000000..e69de29 diff --git a/elements/shared/input.css b/elements/shared/input.css new file mode 100644 index 0000000..16b056a --- /dev/null +++ b/elements/shared/input.css @@ -0,0 +1,31 @@ +input { + font: 10px 'Lucida Grande', sans-serif; + color: #ecebe0; + -webkit-font-smoothing: antialiased; + height: 100%; + width: 100%; + display: inline-block; + background-color: transparent; + border: 0; + -webkit-border-radius: 0; + border-radius: 0; + padding: 0; + outline: none; + -webkit-transition: background-color 0.15s linear; + -moz-transition: background-color 0.15s linear; + -o-transition: background-color 0.15s linear; + -ms-transition: background-color 0.15s linear; + transition: background-color 0.15s linear; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +:host-context(.touch-true) input { + font-size: 13.5px; +} +input:focus { + background: rgba(255,255,255,0.05); +} +:host-context(.touch-false) input:hover { + background: rgba(255,255,255,0.05); +} diff --git a/elements/shared/shared.css b/elements/shared/shared.css new file mode 100644 index 0000000..e3db1a2 --- /dev/null +++ b/elements/shared/shared.css @@ -0,0 +1,4 @@ +/* sizes */ +/* colors */ +/* other */ +/* mixins */ From e2bf2c4578435382d82039498b1a81475272acf5 Mon Sep 17 00:00:00 2001 From: Doug Fritz Date: Wed, 10 Sep 2014 15:51:48 -0700 Subject: [PATCH 13/17] rename gui.html and gui.js to dat-gui.html and dat-gui.js --- bower.json | 1 + build/{gui.html => dat-gui.html} | 0 build/{gui.js => dat-gui.js} | 0 build/gui.shim.js | 1 - gui.html => dat-gui.html | 0 docs/template.html | 4 ++-- examples/index.html | 17 ++--------------- gulpfile.js | 10 +++++----- index.html | 8 ++++---- 9 files changed, 14 insertions(+), 27 deletions(-) rename build/{gui.html => dat-gui.html} (100%) mode change 100755 => 100644 rename build/{gui.js => dat-gui.js} (100%) mode change 100755 => 100644 delete mode 100644 build/gui.shim.js rename gui.html => dat-gui.html (100%) diff --git a/bower.json b/bower.json index ba18a8b..8442892 100644 --- a/bower.json +++ b/bower.json @@ -10,6 +10,7 @@ ], "license": "MIT", "private": true, + "main": "gui.html", "ignore": [ "**/.*", "node_modules", diff --git a/build/gui.html b/build/dat-gui.html old mode 100755 new mode 100644 similarity index 100% rename from build/gui.html rename to build/dat-gui.html diff --git a/build/gui.js b/build/dat-gui.js old mode 100755 new mode 100644 similarity index 100% rename from build/gui.js rename to build/dat-gui.js diff --git a/build/gui.shim.js b/build/gui.shim.js deleted file mode 100644 index 123c7d6..0000000 --- a/build/gui.shim.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){"use strict";var n=function(){this.vars={}};n.ready=function(t){t()},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.add=function(){return i};var r=function(){return this},i={on:r};t.Gui=n}(this); \ No newline at end of file diff --git a/gui.html b/dat-gui.html similarity index 100% rename from gui.html rename to dat-gui.html diff --git a/docs/template.html b/docs/template.html index 586d39b..c081189 100644 --- a/docs/template.html +++ b/docs/template.html @@ -6,7 +6,7 @@ dat-gui - + @@ -21,4 +21,4 @@ - \ No newline at end of file + diff --git a/examples/index.html b/examples/index.html index e8db819..d12db1f 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,22 +4,9 @@ dat-gui kitchen sink -<<<<<<< HEAD - - - -||||||| merged common ancestors - - - - -======= - - - - ->>>>>>> 8d86460ebde6d3dda4dec6e7783f0223fca59d00 + + diff --git a/gulpfile.js b/gulpfile.js index 66dce90..09b008b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,9 +7,9 @@ var gulp = require( 'gulp' ), $ = require( 'gulp-load-plugins' )(); var paths = { - build: [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js' , 'gui.html' ], + build: [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js' , 'dat-gui.html' ], lint: [ 'gulpfile.js', 'elements/**/*.js' ], - test: [ 'build/gui.js', 'tests/*.js' ], + test: [ 'build/dat-gui.js', 'tests/*.js' ], clean: [ 'build/*', '**/*.css' ], docs: [ 'README.md', 'docs/*' ], shim: [ 'elements/shim.js' ] @@ -61,19 +61,19 @@ gulp.task( 'browser', [], function() { gulp.task( 'build', [ 'vulcanize' ], function() { - return gulp.src( 'build/gui.html' ) + return gulp.src( 'build/dat-gui.html' ) .pipe( $.replace( /\\/g, '\\\\' ) ) .pipe( $.replace( /'/g, '\\\'' ) ) .pipe( $.replace( /^(.*)$/gm, '\'$1\',' ) ) .pipe( $.insert.wrap( 'document.write([', '].join("\\n"))' ) ) - .pipe( $.rename( 'gui.js' ) ) + .pipe( $.rename( 'dat-gui.js' ) ) .pipe( gulp.dest( 'build' ) ); } ); gulp.task( 'vulcanize', [ 'css' ], function() { - return gulp.src( 'gui.html' ) + return gulp.src( 'dat-gui.html' ) .pipe( $.vulcanize( { dest: 'build', inline: true, diff --git a/index.html b/index.html index c742579..d9bc894 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ dat-gui - + @@ -25,7 +25,7 @@ Saving

Basic Usage

Download the minified library and include it in your html.

-
<script src="gui.js"></script>
+
<script src="dat-gui.js"></script>
 

 
Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable's initial value.

 
var gui = new Gui();
@@ -186,7 +186,7 @@ Gui.register( 'dat-gui-number', function( value ) {
 
$ bower install gui-three
 

 
Include the source for the third-party controllers after dat-gui.

-
<script src="gui.js"></script>
+
<script src="dat-gui.js"></script>
 <script src="gui-three.js"></script>
 

 
@@ -195,4 +195,4 @@ Gui.register( 'dat-gui-number', function( value ) {
 
 
 
-
\ No newline at end of file
+

From 1f05d74eb266013674c223b187cbf4bdfa73f81e Mon Sep 17 00:00:00 2001
From: Doug Fritz 
Date: Wed, 10 Sep 2014 16:03:24 -0700
Subject: [PATCH 14/17] rename gui.html and gui.js to dat-gui.html and
 dat-gui.js

---
 bower.json          | 43 ++++++++++++++++++++++---------------------
 build/dat-gui.html  |  8 ++------
 build/dat-gui.js    |  9 +++------
 build/gui.shim.js   |  1 +
 dat-gui.html        |  6 ++----
 examples/index.html |  5 ++++-
 gulpfile.js         |  1 +
 index.html          |  4 ++--
 8 files changed, 37 insertions(+), 40 deletions(-)
 create mode 100644 build/gui.shim.js

diff --git a/bower.json b/bower.json
index 8442892..47997b5 100644
--- a/bower.json
+++ b/bower.json
@@ -1,23 +1,24 @@
 {
-    "name": "dat.gui",
-    "version": "0.0.0",
-    "description": "Attempt at revamping dat.gui with Polymer.",
-    "keywords": [
-        "gui"
-    ],
-    "authors": [
-       "George Michael Brower"
-    ],
-    "license": "MIT",
-    "private": true,
-    "main": "gui.html",
-    "ignore": [
-        "**/.*",
-        "node_modules",
-        "tests",
-        "docs"
-    ],
-    "dependencies": {
-        "polymer": "Polymer/polymer#>=0.4.0"
-    }
+  "name": "dat.gui",
+  "version": "0.0.0",
+  "description": "Attempt at revamping dat.gui with Polymer.",
+  "keywords": [
+    "gui"
+  ],
+  "authors": [
+    "George Michael Brower"
+  ],
+  "license": "MIT",
+  "private": true,
+  "main": "dat-gui.html",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "tests",
+    "docs"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0",
+    "platform": "Polymer/platform#>=0.4.0"
+  }
 }
diff --git a/build/dat-gui.html b/build/dat-gui.html
index eaffc09..cd99885 100644
--- a/build/dat-gui.html
+++ b/build/dat-gui.html
@@ -1,8 +1,4 @@
-
+
 
 
 
 
-
\ No newline at end of file
+
diff --git a/build/dat-gui.js b/build/dat-gui.js
index 86a807f..447ac2b 100644
--- a/build/dat-gui.js
+++ b/build/dat-gui.js
@@ -1,8 +1,4 @@
-document.write(['',
+document.write(['',
 '',
 '',
 '',
 '',
-'',].join("\n"))
\ No newline at end of file
+'',
+'',].join("\n"))
\ No newline at end of file
diff --git a/build/gui.shim.js b/build/gui.shim.js
new file mode 100644
index 0000000..123c7d6
--- /dev/null
+++ b/build/gui.shim.js
@@ -0,0 +1 @@
+!function(t){"use strict";var n=function(){this.vars={}};n.ready=function(t){t()},n.prototype.var=function(t,n){return this.vars[t]=n,i},n.prototype.add=function(){return i};var r=function(){return this},i={on:r};t.Gui=n}(this);
\ No newline at end of file
diff --git a/dat-gui.html b/dat-gui.html
index b3789b4..17f4b7e 100644
--- a/dat-gui.html
+++ b/dat-gui.html
@@ -1,6 +1,4 @@
-
-
-
+
 
 
 
@@ -12,4 +10,4 @@
 
 
 
-
\ No newline at end of file
+
diff --git a/examples/index.html b/examples/index.html
index d12db1f..8a22c48 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -5,8 +5,11 @@
     
     dat-gui kitchen sink
 
-    
+    
+    
 
     
 
diff --git a/gulpfile.js b/gulpfile.js
index 09b008b..aa02834 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -74,6 +74,7 @@ gulp.task( 'build', [ 'vulcanize' ], function() {
 gulp.task( 'vulcanize', [ 'css' ], function() {
 
     return gulp.src( 'dat-gui.html' )
+        .pipe( $.insert.prepend( '"\n' ) )
         .pipe( $.vulcanize( {
             dest: 'build',
             inline: true,
diff --git a/index.html b/index.html
index d9bc894..4eef2d1 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
  Saving 

 
Basic Usage

 
Download the minified library and include it in your html.

-
<script src="dat-gui.js"></script>
+
<script src="gui.js"></script>
 

 
Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable's initial value.

 
var gui = new Gui();
@@ -186,7 +186,7 @@ Gui.register( 'dat-gui-number', function( value ) {
 
$ bower install gui-three
 

 
Include the source for the third-party controllers after dat-gui.

-
<script src="dat-gui.js"></script>
+
<script src="gui.js"></script>
 <script src="gui-three.js"></script>
 

 

From 4f0222f8123d6768220543aeb04e56c15e0d005a Mon Sep 17 00:00:00 2001
From: Doug Fritz 
Date: Sun, 14 Sep 2014 19:48:00 -0700
Subject: [PATCH 15/17] automated style formatting on save of all js files and
 updated gulp build

---
 .editorconfig                               |   2 +-
 .jscsrc                                     |  44 ---
 TODO.md                                     |   2 +
 bower.json                                  |   5 +
 build/dat-gui.html                          |  12 +-
 build/dat-gui.js                            |  14 +-
 build/{gui.shim.js => dat-gui.shim.js}      |   0
 docs/style.styl                             |   1 -
 docs/template.html                          |   4 +-
 elements/Gui.js                             | 367 ++++++++++----------
 elements/dat-gui-base/dat-gui-base.js       |   6 +-
 elements/dat-gui-boolean/dat-gui-boolean.js |   4 +-
 elements/dat-gui-number/dat-gui-number.js   |   8 +-
 elements/dat-gui-option/dat-gui-option.js   |  14 +-
 elements/dat-gui-string/dat-gui-string.js   |   2 +-
 elements/dat-gui/dat-gui.js                 |   2 +-
 elements/gui-row/gui-row.js                 |   4 +-
 elements/shared.css                         |   0
 elements/shim.js                            |  42 +--
 examples/index.html                         |   5 +-
 gulpfile.js                                 | 296 ++++++++++------
 index.html                                  | 161 ++++-----
 package.json                                |  19 +-
 23 files changed, 524 insertions(+), 490 deletions(-)
 delete mode 100644 .jscsrc
 mode change 100644 => 100755 build/dat-gui.html
 mode change 100644 => 100755 build/dat-gui.js
 rename build/{gui.shim.js => dat-gui.shim.js} (100%)
 delete mode 100644 elements/shared.css

diff --git a/.editorconfig b/.editorconfig
index 449e280..46940b2 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,4 @@
-[*.js]
+[*]
 indent_style = space
 indent_size = 4
 
diff --git a/.jscsrc b/.jscsrc
deleted file mode 100644
index 9d3e3ca..0000000
--- a/.jscsrc
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-
-    "fileExtensions": [".js", ".json"],
-    "excludeFiles": ["node_modules/**", "build/**"],
-
-    "maximumLineLength": 120,
-    "validateLineBreaks": "LF",
-    "validateIndentation": 4,
-
-    "requireSpaceAfterKeywords": [
-        "if",
-        "else",
-        "for",
-        "while",
-        "do",
-        "switch",
-        "return",
-        "try",
-        "catch"
-    ],
-
-    "requireSpaceBeforeBlockStatements": true,
-    
-    "requireSpacesInConditionalExpression": {
-        "afterTest": true,
-        "beforeConsequent": true,
-        "afterConsequent": true,
-        "beforeAlternate": true
-    },
-
-    "requireSpacesInsideParentheses": "all",
-    "requireSpacesInsideObjectBrackets": "all",
-    "requireSpacesInsideArrayBrackets": "all",
-
-    "requireParenthesesAroundIIFE": true,
-
-    "disallowSpacesInFunctionExpression": {
-        "beforeOpeningRoundBrace": true
-    },
-
-    "disallowKeywords": ["with"],
-    "disallowImplicitTypeConversion": ["string"]
-
-}
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
index 20b042d..f74c592 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,6 +2,7 @@ BUILD
 
 - [x] single import
 - [x] browsersync
+- [ ] remove platform, dependent on fix of bug in gulp-vulcanize
 
 REFACTOR
 
@@ -9,6 +10,7 @@ REFACTOR
 - [ ] Gui.js => gui-panel => dat-gui
 - [x] controller-* => dat-gui-*
 - [x] kill strict
+- [x] Reorg gulpfile and add standardized formatting
 
 PARITY
 
diff --git a/bower.json b/bower.json
index 47997b5..07a7c6a 100644
--- a/bower.json
+++ b/bower.json
@@ -20,5 +20,10 @@
   "dependencies": {
     "polymer": "Polymer/polymer#>=0.4.0",
     "platform": "Polymer/platform#>=0.4.0"
+  },
+  "resolutions": {
+    "core-action-icons": "0.2.4",
+    "platform": ">=0.4.0 <1.0.0",
+    "core-component-page": ">=0.4.0 <1.0.0"
   }
 }
diff --git a/build/dat-gui.html b/build/dat-gui.html
old mode 100644
new mode 100755
index cd99885..c606ccf
--- a/build/dat-gui.html
+++ b/build/dat-gui.html
@@ -1,9 +1,13 @@
+
 
 
-
+
 
 
 
diff --git a/build/dat-gui.js b/build/dat-gui.js
old mode 100644
new mode 100755
index 447ac2b..ded74ce
--- a/build/dat-gui.js
+++ b/build/dat-gui.js
@@ -1,9 +1,13 @@
-document.write(['',
+document.write(['',
+'',
 '',
-'',
+'',
 '',
 '',
 '',
diff --git a/build/gui.shim.js b/build/dat-gui.shim.js
similarity index 100%
rename from build/gui.shim.js
rename to build/dat-gui.shim.js
diff --git a/docs/style.styl b/docs/style.styl
index 1a362b6..f268f22 100644
--- a/docs/style.styl
+++ b/docs/style.styl
@@ -28,7 +28,6 @@ h1
     margin-bottom unit * 3
 
 h3 
-
     padding unit 0
     margin-bottom unit * 2
 
diff --git a/docs/template.html b/docs/template.html
index c081189..6723db3 100644
--- a/docs/template.html
+++ b/docs/template.html
@@ -15,7 +15,9 @@
 
 
 
-

+

+	<%= contents %>
+

 
 
 
diff --git a/elements/Gui.js b/elements/Gui.js
index 9a8c7e1..2710c99 100644
--- a/elements/Gui.js
+++ b/elements/Gui.js
@@ -1,234 +1,231 @@
 ( function( scope ) {
 
-    /* globals Path */
+/* globals Path */
 
-    var Gui = function( params ) {
+var Gui = function( params ) {
 
-        if ( !ready ) {
-            Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
-        }
+    if ( !ready ) {
+        Gui.error( 'Gui not ready. Put your code inside Gui.ready()' );
+    }
 
-        params = params || {};
+    params = params || {};
 
-        // Properties
+    // Properties
 
-        this.vars = {};
-        this.localStorage = params.localStorage || false;
+    this.vars = {};
+    this.localStorage = params.localStorage || false;
 
-        // Make domElement
+    // Make domElement
 
-        this.panel = document.createElement( 'dat-gui' );
-        this.panel.autoPlace = params.autoPlace !== false;
+    this.panel = document.createElement( 'dat-gui' );
+    this.panel.autoPlace = params.autoPlace !== false;
 
-        if ( this.panel.autoPlace ) {
-            document.body.appendChild( this.panel );
-        }
+    if ( this.panel.autoPlace ) {
+        document.body.appendChild( this.panel );
+    }
 
+};
+
+
+// Instance methods
+// -------------------------------
+
+Gui.prototype.add = function( object, path ) {
+
+    // Make controller
+
+    var value = Path.get( path ).getValueFrom( object );
+
+    if ( value === null || value === undefined ) {
+        return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
+    }
+
+    var args = Array.prototype.slice.call( arguments, 2 );
+    var controller;
+
+    if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
+        controller = document.createElement( 'dat-gui-option' );
+    } else {
+        controller = Gui.getController( value );
+    }
+
+    if ( !controller ) {
+        return Gui.error( 'Unrecognized type:', value );
+    }
+
+    controller.watch( object, path );
+    controller.init.apply( controller, args );
+
+    // Make row
+
+    var row = document.createElement( 'gui-row' );
+    row.name = path;
+
+    controller.row = row;
+
+    controller.name = function( name ) {
+        row.name = name;
     };
 
-
-    // Instance methods
-    // -------------------------------
-
-    Gui.prototype.add = function( object, path ) {
-
-        // Make controller
-
-        var value = Path.get( path ).getValueFrom( object );
-
-        if ( value === null || value === undefined ) {
-            return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' );
-        }
-
-        var args = Array.prototype.slice.call( arguments, 2 );
-        var controller;
-
-        if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) {
-            controller = document.createElement( 'dat-gui-option' );
-        } else {
-            controller = Gui.getController( value );
-        }
-
-        if ( !controller ) {
-            return Gui.error( 'Unrecognized type:', value );
-        }
-
-        controller.watch( object, path );
-        controller.init.apply( controller, args );
-
-        // Make row
-
-        var row = document.createElement( 'gui-row' );
-        row.name = path;
-
-        controller.row = row;
-
-        controller.name = function( name ) {
-            row.name = name;
-        };
-
-        controller.comment = function( comment ) {
-            row.comment = comment;
-        };
-
-        row.appendChild( controller );
-        this.panel.appendChild( row );
-
-        return controller;
-
+    controller.comment = function( comment ) {
+        row.comment = comment;
     };
 
-    Gui.prototype.remember = function( object ) {
+    row.appendChild( controller );
+    this.panel.appendChild( row );
 
+    return controller;
 
-    };
+};
 
-    Gui.prototype.var = function() {
+Gui.prototype.remember = function( object ) {};
 
-        var name, initialValue, args;
+Gui.prototype.var = function() {
 
-        if ( arguments.length == 1 ) {
-            name = arguments[ 0 ];
-            return this.vars[ name ];
-        }
+    var name, initialValue, args;
 
-        initialValue = arguments[ 1 ];
+    if ( arguments.length == 1 ) {
         name = arguments[ 0 ];
+        return this.vars[ name ];
+    }
 
-        args = [ this.vars, name ];
-        args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
+    initialValue = arguments[ 1 ];
+    name = arguments[ 0 ];
 
-        this.vars[ name ] = initialValue;
+    args = [ this.vars, name ];
+    args = args.concat( Array.prototype.slice.call( arguments, 2 ) );
 
-        return this.add.apply( this, args );
+    this.vars[ name ] = initialValue;
 
-    };
+    return this.add.apply( this, args );
 
-    Gui.prototype.listenAll = function() {
+};
 
-        Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
+Gui.prototype.listenAll = function() {
 
-    };
+    Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' );
+
+};
 
 
-    // Register custom controllers
-    // -------------------------------
+// Register custom controllers
+// -------------------------------
 
-    var controllers = {};
+var controllers = {};
 
-    Gui.register = function( elementName, test ) {
+Gui.register = function( elementName, test ) {
 
-        controllers[ elementName ] = test;
+    controllers[ elementName ] = test;
 
-    };
+};
 
 
-    // Returns a controller based on a value
-    // -------------------------------
+// Returns a controller based on a value
+// -------------------------------
 
-    Gui.getController = function( value ) {
+Gui.getController = function( value ) {
 
-        for ( var type in controllers ) {
+    for ( var type in controllers ) {
 
-            var test = controllers[ type ];
+        var test = controllers[ type ];
 
-            if ( test( value ) ) {
+        if ( test( value ) ) {
 
-                return document.createElement( type );
-
-            }
+            return document.createElement( type );
 
         }
 
-    };
-
-
-    // Gui ready handler ... * shakes fist at polymer *
-    // -------------------------------
-
-    var ready = false;
-    var readyHandlers = [];
-
-    document.addEventListener( 'polymer-ready', function() {
-
-        ready = true;
-        readyHandlers.forEach( function( fnc ) {
-
-            fnc();
-
-        } );
-
-    } );
-
-    Gui.ready = function( fnc ) {
-
-        if ( ready ) {
-            fnc();
-        } else {
-            readyHandlers.push( fnc );
-        }
-
-    };
-
-
-    // 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 );
-    };
-
-
-    // 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 );
+// Gui ready handler ... * shakes fist at polymer *
+// -------------------------------
+
+var ready = false;
+var readyHandlers = [];
+
+document.addEventListener( 'polymer-ready', function() {
+
+    ready = true;
+    readyHandlers.forEach( function( fnc ) {
+
+        fnc();
+
+    } );
+
+} );
+
+Gui.ready = function( fnc ) {
+
+    if ( ready ) {
+        fnc();
+    } else {
+        readyHandlers.push( fnc );
+    }
+
+};
+
+
+// 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 );
+};
+
+
+// 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 );
diff --git a/elements/dat-gui-base/dat-gui-base.js b/elements/dat-gui-base/dat-gui-base.js
index 1022fdd..2cf489c 100644
--- a/elements/dat-gui-base/dat-gui-base.js
+++ b/elements/dat-gui-base/dat-gui-base.js
@@ -47,7 +47,7 @@ Polymer( 'dat-gui-base', {
     map: function( x, a, b, c, d ) {
         return ( x - a ) / ( b - a ) * ( d - c ) + c;
     },
-    
+
 
     // Legacy
     // -------------------------------
@@ -55,7 +55,7 @@ Polymer( 'dat-gui-base', {
     listen: function() {
 
         Gui.warn( 'controller.listen() is deprecated. All controllers are listened for free.' );
-        
+
         return this;
 
     },
@@ -76,7 +76,7 @@ Polymer( 'dat-gui-base', {
     onChange: function( v ) {
 
         this.addEventListener( 'change', function( e ) {
-            
+
             v( e.detail );
 
         } );
diff --git a/elements/dat-gui-boolean/dat-gui-boolean.js b/elements/dat-gui-boolean/dat-gui-boolean.js
index f587614..6da720f 100644
--- a/elements/dat-gui-boolean/dat-gui-boolean.js
+++ b/elements/dat-gui-boolean/dat-gui-boolean.js
@@ -9,9 +9,7 @@ Gui.register( 'dat-gui-boolean', function( value ) {
 
 Polymer( 'dat-gui-boolean', {
 
-    ready: function() {
-
-    },
+    ready: function() {},
 
     toggle: function() {
 
diff --git a/elements/dat-gui-number/dat-gui-number.js b/elements/dat-gui-number/dat-gui-number.js
index 27f4d1d..0f3e7aa 100644
--- a/elements/dat-gui-number/dat-gui-number.js
+++ b/elements/dat-gui-number/dat-gui-number.js
@@ -158,7 +158,9 @@ Polymer( 'dat-gui-number', {
 
         e.preventDefault();
         this._rect = this.$.track.getBoundingClientRect();
-        if ( !this._alt ) { this.value = this.valueFromX( e.x ); }
+        if ( !this._alt ) {
+            this.value = this.valueFromX( e.x );
+        }
 
         this.fire( 'sliderDown' );
 
@@ -184,7 +186,9 @@ Polymer( 'dat-gui-number', {
 
             var dv = this.valueFromDX( e.ddx );
 
-            if ( this._alt ) { dv /= 10; }
+            if ( this._alt ) {
+                dv /= 10;
+            }
 
             this.value += dv * this._dragFriction;
 
diff --git a/elements/dat-gui-option/dat-gui-option.js b/elements/dat-gui-option/dat-gui-option.js
index dde1ea2..66e12e7 100644
--- a/elements/dat-gui-option/dat-gui-option.js
+++ b/elements/dat-gui-option/dat-gui-option.js
@@ -6,7 +6,7 @@ Polymer( 'dat-gui-option', {
     key: null,
 
     ready: function() {
-      
+
         this.options = {};
 
     },
@@ -22,7 +22,7 @@ Polymer( 'dat-gui-option', {
             }, this );
 
         } else {
-            
+
             this.options = options;
 
         }
@@ -30,7 +30,7 @@ Polymer( 'dat-gui-option', {
     },
 
     valueChanged: function() {
-        
+
         for ( var i in this.options ) {
             if ( this.options[ i ] === this.value ) {
                 this.key = i;
@@ -39,7 +39,7 @@ Polymer( 'dat-gui-option', {
         }
 
         this.super();
-        
+
     },
 
     keyChanged: function() {
@@ -51,12 +51,12 @@ Polymer( 'dat-gui-option', {
     keys: function( object ) {
 
         if ( object ) {
-         
+
             return Object.keys( object );
-            
+
         }
 
     }
-    
+
 
 } );
diff --git a/elements/dat-gui-string/dat-gui-string.js b/elements/dat-gui-string/dat-gui-string.js
index 7e1d671..f371a36 100644
--- a/elements/dat-gui-string/dat-gui-string.js
+++ b/elements/dat-gui-string/dat-gui-string.js
@@ -20,7 +20,7 @@ Polymer( 'dat-gui-string', {
         if ( e.keyCode == 13 ) {
 
             this.$.input.blur();
-            
+
         }
 
     }
diff --git a/elements/dat-gui/dat-gui.js b/elements/dat-gui/dat-gui.js
index 8fafd3d..44847a5 100644
--- a/elements/dat-gui/dat-gui.js
+++ b/elements/dat-gui/dat-gui.js
@@ -9,7 +9,7 @@ Polymer( 'dat-gui', {
     open: true,
     touch: ( 'ontouchstart' in window ) || ( !!window.DocumentTouch && document instanceof window.DocumentTouch ),
 
-    
+
     // Observers
     // -------------------------------
 
diff --git a/elements/gui-row/gui-row.js b/elements/gui-row/gui-row.js
index 6cb7159..e2433f9 100644
--- a/elements/gui-row/gui-row.js
+++ b/elements/gui-row/gui-row.js
@@ -5,9 +5,7 @@ Polymer( 'gui-row', {
     comment: null,
     commentOpen: false,
 
-    ready: function() {
-
-    },
+    ready: function() {},
 
     openComment: function() {
         this.commentOpen = true;
diff --git a/elements/shared.css b/elements/shared.css
deleted file mode 100644
index e69de29..0000000
diff --git a/elements/shim.js b/elements/shim.js
index 0fdcb44..928d3e0 100644
--- a/elements/shim.js
+++ b/elements/shim.js
@@ -1,38 +1,40 @@
 // Use gui.shim.js in production when you want to use dat.gui to recall values without any of the interface.
 ( function( scope ) {
-    'use strict';
+'use strict';
 
-    var Gui = function() {
+var Gui = function() {
 
-        this.vars = {};
+    this.vars = {};
 
-    };
+};
 
-    Gui.ready = function( fnc ) {
+Gui.ready = function( fnc ) {
 
-        fnc();
+    fnc();
 
-    };
+};
 
-    Gui.prototype.var = function( name, value ) {
+Gui.prototype.var = function( name, value ) {
 
-        this.vars[ name ] = value;
-        return controllerShim;
+    this.vars[ name ] = value;
+    return controllerShim;
 
-    };
+};
 
-    Gui.prototype.add = function( object, path ) {
+Gui.prototype.add = function( object, path ) {
 
-        return controllerShim;
+    return controllerShim;
 
-    };
+};
 
-    var identity = function() { return this; };
+var identity = function() {
+    return this;
+};
 
-    var controllerShim = {
-        on: identity
-    };
+var controllerShim = {
+    on: identity
+};
 
-    scope.Gui = Gui;
+scope.Gui = Gui;
 
-} )( this );
+})( this );
diff --git a/examples/index.html b/examples/index.html
index 8a22c48..b58a1b6 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -7,7 +7,7 @@
 
     
     
 
@@ -25,6 +25,7 @@
     body content.
 
     "\n' ) )
+        // must use the latest version of gulp-vulcanize otherwise it grabs the file from disk
+        .pipe( $.insert.prepend( '\n' ) )
         .pipe( $.vulcanize( {
             dest: 'build',
             inline: true,
             strip: true
         } ) )
-       // clean up some vulcanize ...
-       .pipe( $.replace( /\n\n/gm, '' ) )
-       .pipe( $.replace( //gm, '' ) )
-       .pipe( $.replace( /^

 
Click the gear icon to change your save settings. You can either save your dat-gui values to localStorage, or by copying and pasting a JSON object into your source code as follows:

 
var fizzyText = new FizzyText();
 var gui = new Gui( { load: JSON } );
 
 gui.remember( fizzyText );
 
-// Add controllers ...
-

+// Add controllers ...

 
Presets

 
The save menu also allows you to save all of your settings as presets. Click Save to modify the current preset, or New to create a new preset from existing settings. Clicking Revert will clear all unsaved changes to the current preset.

 
Switch between presets using the dropdown in the save menu. You can specify the default like this:

-
var gui = new Gui({
-  load: JSON,
-  preset: 'Flow'
-});
-

+
var gui = new Gui({
+  load: JSON,
+  preset: 'Flow'
+});

 
A word of caution about localStorage:

 
Paste the JSON save object into your source frequently. Using localStorage to save presets can make you faster, but its easy to lose your settings by clearing browsing data, changing browsers, or even by changing the URL of the page you're working on.

 
Save to Disk

 
dat-gui comes with a node server that saves your settings to disk. This way you don't have to worry about losing your values to local storage or copying and pasting a JSON string.

 
First, run the node script:

-
$ node gui-server
-

+
$ node gui-server

 
Next, instantiate your Gui with a path to a JSON file to store settings. dat-gui will read from this file on load and write to this file on change.

-
var gui = new Gui( { load: 'path/to/file.json' } );
-

+
var gui = new Gui( { load: 'path/to/file.json' } );

 
Custom Placement

 
By default, Gui panels are created with fixed position, and are automatically appended to the body. You can change this behavior by setting the autoPlace parameter to false.

-
var gui = new Gui( { autoPlace: false } );
+
var gui = new Gui( { autoPlace: false } );
 
-var customContainer = document.getElementById('my-gui-container');
-customContainer.appendChild(gui.domElement);
-

+var customContainer = document.getElementById('my-gui-container');
+customContainer.appendChild(gui.domElement);

 
Since dat-gui is built using Web Components, you can also use HTML syntax to add controllers to the page.

-
<body>
+
<body>
 
-<dat-gui-number min="-2" max="2" step="1" value="0"></dat-gui-number>
+<dat-gui-number min="-2" max="2" step="1" value="0"></dat-gui-number>
 
-<script>
+<script>
 
-var controller = document.querySelector( 'dat-gui-number' );
-controller.onChange( function() {
+var controller = document.querySelector( 'dat-gui-number' );
+controller.onChange( function() {
 
-    // react to UI changes ...
+    // react to UI changes ...
 
 } );
 
-</script>
+</script>
 
-</body>
-

+</body>

 
Defining Custom Controllers

 
dat-gui uses Polymer under the hood to define custom elements. A dat-gui controller is just a Polymer element with two important requirements:

 
    
@@ -158,37 +144,34 @@ controller.onChange( function() {
 
  • Controllers must be associated with a data type.
    • 
 

 
Take for example this (simplified) source for dat-gui's <dat-gui-number>:

-
Polymer( 'dat-gui-number', {
+
Polymer( 'dat-gui-number', {
 
-  // Define element ...
+  // Define element ...
 
 } );
 
-Gui.register( 'dat-gui-number', function( value ) {
+Gui.register( 'dat-gui-number', function( value ) {
 
-    return typeof value == 'number';
+    return typeof value == 'number';
 
-} );
-

+} );

 
Gui.register takes an element name and a test function. The test function tells dat-gui to add a <dat-gui-number> to the panel when the user adds a variable whose type is 'number'.

 
A test function determines if a controller is appropriate for a given value. This example registers <vector-controller> for values that have properties x, y and z.

-
Gui.register( 'vector-controller', function( value ) {
+
Gui.register( 'vector-controller', function( value ) {
 
-    return value.hasOwnProperty( 'x' ) &&
-           value.hasOwnProperty( 'y' ) &&
-           value.hasOwnProperty( 'z' );
+    return value.hasOwnProperty( 'x' ) &&
+           value.hasOwnProperty( 'y' ) &&
+           value.hasOwnProperty( 'z' );
 
-} );
-

+} );

 
Publishing Custom Controllers

 
You should use Bower and format your plugin all nice and it should have a certain prefix yada yada.

 
Installing third-party controllers ... 

-
$ bower install gui-three
-

+
$ bower install gui-three

 
Include the source for the third-party controllers after dat-gui.

-
<script src="gui.js"></script>
-<script src="gui-three.js"></script>
-

+
<script src="gui.js"></script>
+<script src="gui-three.js"></script>

+
 
 
 
diff --git a/package.json b/package.json
index 2898a14..a489ca2 100644
--- a/package.json
+++ b/package.json
@@ -3,26 +3,31 @@
   "version": "0.0.0",
   "devDependencies": {
     "browser-sync": "^1.3.6",
+    "esformatter-braces": "^0.1.7",
+    "esformatter-quotes": "^1.0.0",
+    "esformatter-semicolons": "^1.0.3",
     "gulp": "^3.8.7",
+    "gulp-esformatter": "^1.0.0",
+    "gulp-filter": "^1.0.2",
     "gulp-if": "^1.2.4",
     "gulp-insert": "^0.4.0",
-    "gulp-jscs": "^1.1.2",
     "gulp-jshint": "^1.8.4",
     "gulp-load-plugins": "^0.6.0",
-    "gulp-plates": "0.0.5",
-    "gulp-reload": "0.0.4",
+    "gulp-marked": "^0.2.0",
     "gulp-rename": "^1.2.0",
     "gulp-replace": "^0.4.0",
     "gulp-rimraf": "^0.1.0",
     "gulp-stylus": "^1.3.0",
     "gulp-uglify": "^1.0.1",
-    "gulp-vulcanize": "^1.0.0",
-    "gulp-watch": "^0.6.9",
+    "gulp-vulcanize": "^1.1.0",
+    "gulp-watch": "^1.0.3",
+    "gulp-wrap": "^0.3.0",
+    "highlight.js": "^8.2.0",
     "jshint-stylish": "^0.4.0",
     "karma": "^0.12.23",
     "karma-chrome-launcher": "^0.1.4",
     "karma-jasmine": "^0.1.5",
-    "marked": "^0.3.2",
-    "nib": "^1.0.3"
+    "nib": "^1.0.3",
+    "through2": "^0.6.1"
   }
 }

From 4d0a9aab99b2893d2beb8e7e494dfe1babccc444 Mon Sep 17 00:00:00 2001
From: Doug Fritz 
Date: Sun, 14 Sep 2014 19:50:49 -0700
Subject: [PATCH 16/17] upstream patch was accepted to gulp-vulcanze need to
 run "npm update"

---
 TODO.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TODO.md b/TODO.md
index f74c592..1e71698 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,7 +2,7 @@ BUILD
 
 - [x] single import
 - [x] browsersync
-- [ ] remove platform, dependent on fix of bug in gulp-vulcanize
+- [x] remove platform, dependent on fix of bug in gulp-vulcanize
 
 REFACTOR
 

From f9f019b12609523db98e430e7683569553bf8a45 Mon Sep 17 00:00:00 2001
From: Doug Fritz 
Date: Sun, 14 Sep 2014 20:04:18 -0700
Subject: [PATCH 17/17] update editor config

---
 .editorconfig | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/.editorconfig b/.editorconfig
index 46940b2..2bfa26b 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,4 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
 [*]
+
+# Change these settings to your own preference
 indent_style = space
 indent_size = 4
 
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file