diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..5746b85 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,5 @@ +# 2 space indentation +[*.js] +indent_style = space +indent_size = 2 + diff --git a/.jscsrc b/.jscsrc new file mode 100644 index 0000000..620345b --- /dev/null +++ b/.jscsrc @@ -0,0 +1,20 @@ +{ + "preset": "google", + "fileExtensions": [ ".js" ], + + "requireParenthesesAroundIIFE": true, + "maximumLineLength": 120, + "validateLineBreaks": "LF", + "validateIndentation": 2, + + "disallowKeywords": ["with"], + "disallowSpacesInsideObjectBrackets": null, + "disallowImplicitTypeConversion": ["string"], + "disallowMultipleVarDecl": null, + + "safeContextKeyword": "_this", + + "excludeFiles": [ + "test/data/**" + ] +} diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..6246632 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,14 @@ +{ + "node": true, + "esnext": true, + "bitwise": true, + "camelcase": true, + "curly": true, + "immed": true, + "newcap": false, + "noarg": true, + "undef": true, + "unused": "vars", + "strict": true, + "browser": true +} diff --git a/TODO b/TODO.md similarity index 100% rename from TODO rename to TODO.md diff --git a/build/gui.html b/build/gui.html index 2315390..d22604f 100644 --- a/build/gui.html +++ b/build/gui.html @@ -5,17 +5,17 @@ var e,f,g,h=b.type;if("load"===h&&!b.bubbles){var i=c;i instanceof Q.Document&&( }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 - + +},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}(); - - - - + + + + \ No newline at end of file diff --git a/build/gui.js b/build/gui.js index f6e4e99..122e9b0 100644 --- a/build/gui.js +++ b/build/gui.js @@ -5,17 +5,17 @@ document.write(['', '', '', -'', +'', '', '', '', +'},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}();', '', '', '', -'', -'', -'', -'', +'', +'', +'', +'', '',].join("\n")) \ No newline at end of file diff --git a/demo.html b/demo.html deleted file mode 100644 index cc59f5a..0000000 --- a/demo.html +++ /dev/null @@ -1,45 +0,0 @@ - - - - - - -dat-gui - - - - - - - - - - \ No newline at end of file diff --git a/elements/Gui.js b/elements/Gui.js index d095bfe..a8bda49 100644 --- a/elements/Gui.js +++ b/elements/Gui.js @@ -1,141 +1,138 @@ -(function( scope ) { +(function(scope) { + 'use strict'; - var Gui = function( params ) { + var Gui = function(params) { - if ( !ready ) { - Gui.error( 'Gui not ready. Put your code inside Gui.ready()' ); - } - - params = params || {}; - - var panel = document.createElement( 'gui-panel' ); - - panel.autoPlace = params.autoPlace !== false; - - if ( panel.autoPlace ) { - document.body.appendChild( panel ); - } - - return panel; - - }; - - - // Register custom controllers - // ------------------------------- - - var controllers = {}; - - Gui.register = function( elementName, test ) { - - controllers[ elementName ] = test; - - }; - - - // Returns a controller based on a value - // ------------------------------- - - Gui.getController = function( value ) { - - for ( var type in controllers ) { - - var test = controllers[ type ]; - - if ( test( value ) ) { - - return document.createElement( type ); - - } - - } - - }; - - - // Gui ready handler ... * shakes fist at polymer * - // ------------------------------- - - var ready = false; - var readyHandlers = []; - - document.addEventListener( 'polymer-ready', function() { - - ready = true; - readyHandlers.forEach( function( fnc ) { - - fnc(); - - } ); - - } ); - - Gui.ready = function( fnc ) { - - ready ? fnc() : readyHandlers.push( fnc ); - - }; - - - // Error - // ------------------------------- - - Gui.error = function() { - var args = Array.prototype.slice.apply( arguments ); - args.unshift( 'dat-gui ::' ); - console.error.apply( console, args ); + if (!ready) { + Gui.error('Gui not ready. Put your code inside Gui.ready()'); } - Gui.warn = function() { - var args = Array.prototype.slice.apply( arguments ); - args.unshift( 'dat-gui ::' ); - console.warn.apply( console, args ); + params = params || {}; + + var panel = document.createElement('gui-panel'); + + panel.autoPlace = params.autoPlace !== false; + + if (panel.autoPlace) { + document.body.appendChild(panel); } - - // Old namespaces - // ------------------------------- + return panel; - var dat = {}; - - dat.gui = {}; - dat.gui.GUI = Gui; - dat.GUI = dat.gui.GUI; + }; - dat.color = {}; - dat.color.Color = function() {}; + // Register custom controllers + // ------------------------------- - dat.dom = {}; - dat.dom.dom = function() {}; + var controllers = {}; - dat.controllers = {}; - dat.controllers.Controller = constructor( 'controller-base' ); - dat.controllers.NumberController = constructor( 'controller-number' ); - dat.controllers.FunctionController = constructor( 'controller-function' ); - dat.controllers.ColorController = constructor( 'controller-color' ); - dat.controllers.BooleanController = constructor( 'controller-boolean' ); - dat.controllers.OptionController = constructor( 'controller-option' ); + Gui.register = function(elementName, test) { - 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; - }; + controllers[elementName] = test; + + }; + + // Returns a controller based on a value + // ------------------------------- + + Gui.getController = function(value) { + + for (var type in controllers) { + + var test = controllers[type]; + + if (test(value)) { + + return document.createElement(type); + + } } + }; - // Export - // ------------------------------- + // Gui ready handler ... * shakes fist at polymer * + // ------------------------------- - scope.dat = dat; - scope.Gui = Gui; + var ready = false; + var readyHandlers = []; + document.addEventListener('polymer-ready', function() { -})( this ); + ready = true; + readyHandlers.forEach(function(fnc) { + fnc(); + + }); + + }); + + Gui.ready = function(fnc) { + + if (ready) { + fnc(); + } else { + readyHandlers.push(fnc); + } + + }; + + // Error + // ------------------------------- + + Gui.error = function() { + var args = Array.prototype.slice.apply(arguments); + args.unshift('dat-gui ::'); + console.error.apply(console, args); + }; + + Gui.warn = function() { + var args = Array.prototype.slice.apply(arguments); + args.unshift('dat-gui ::'); + console.warn.apply(console, args); + }; + + // Old namespaces + // ------------------------------- + + var dat = {}; + + dat.gui = {}; + dat.gui.GUI = Gui; + dat.GUI = dat.gui.GUI; + + dat.color = {}; + dat.color.Color = function() {}; + + dat.dom = {}; + dat.dom.dom = function() {}; + + dat.controllers = {}; + dat.controllers.Controller = constructor('controller-base'); + dat.controllers.NumberController = constructor('controller-number'); + dat.controllers.FunctionController = constructor('controller-function'); + dat.controllers.ColorController = constructor('controller-color'); + dat.controllers.BooleanController = constructor('controller-boolean'); + dat.controllers.OptionController = constructor('controller-option'); + + dat.controllers.NumberControllerBox = dat.controllers.NumberController; + dat.controllers.NumberControllerSlider = dat.controllers.NumberController; + + function constructor(elementName) { + + return function(object, path) { + var el = document.createElement(elementName); + el.watch(object, path); + return el; + }; + + } + + // Export + // ------------------------------- + + scope.dat = dat; + scope.Gui = Gui; + +})(this); diff --git a/elements/controller-base/controller-base.js b/elements/controller-base/controller-base.js index ad46bb3..8846ec8 100644 --- a/elements/controller-base/controller-base.js +++ b/elements/controller-base/controller-base.js @@ -1,86 +1,86 @@ +/* globals Gui, Polymer, PathObserver */ +'use strict'; + /* -[ ] onChange( ) -[ ] onFinishChange( ) +[ ] onChange() +[ ] onFinishChange() */ Polymer('controller-base', { - ready: function() { + ready: function() { - this.update(); + this.update(); - }, + }, - update: function() {}, + update: function() {}, - init: function() {}, + init: function() {}, + // Observers + // ------------------------------- - // Observers - // ------------------------------- + watch: function(object, path) { - watch: function( object, path ) { + this.object = object; + this.path = path; - this.object = object; - this.path = path; + this.bind('value', new PathObserver(this.object, this.path)); - this.bind( 'value', new PathObserver( this.object, this.path ) ); + }, + + valueChanged: function() { + + this.update(); + this.fire( 'change', this.value ); - }, + }, - valueChanged: function() { + // Helpers + // ------------------------------- + + on: function( event, listener ) { + this.addEventListener( event, listener ); + return this; + }, + + map: function(x, a, b, c, d) { + return (x - a) / (b - a) * (d - c) + c; + }, + + // Legacy + // ------------------------------- + + listen: function() { + + Gui.warn('controller.listen() is deprecated. ' + + 'All controllers are listened for free.'); + return this; + + }, + + getValue: function() { + + return this.value; + + }, + + setValue: function(v) { + + this.value = v; + return this; + + }, + + onChange: function( v ) { + + this.addEventListener( 'change', function( e ) { + v( e.detail ); + } ); + return this; + + }, - this.update(); - this.fire( 'change', this.value ); - - }, - - - // Helpers - // ------------------------------- - - map: function( x, a, b, c, d ) { - return ( x - a ) / ( b - a ) * ( d - c ) + c; - }, - - on: function( event, listener ) { - this.addEventListener( event, listener ); - return this; - }, - - - // Legacy - // ------------------------------- - - listen: function() { - - Gui.warn( 'controller.listen() is deprecated. All controllers are listened for free.' ); - return this; - - }, - - getValue: function() { - - return this.value; - - }, - - setValue: function( v ) { - - this.value = v; - return this; - - }, - - onChange: function( v ) { - - this.addEventListener( 'change', function( e ) { - v( e.detail ); - } ); - return this; - - }, - - -}); \ No newline at end of file +}); diff --git a/elements/controller-boolean/controller-boolean.js b/elements/controller-boolean/controller-boolean.js index efa820e..ae1c1f9 100644 --- a/elements/controller-boolean/controller-boolean.js +++ b/elements/controller-boolean/controller-boolean.js @@ -1,20 +1,22 @@ -Gui.register( 'controller-boolean', function( value ) { - - return typeof value == 'boolean'; +/* globals Gui, Polymer */ +'use strict'; -} ); +Gui.register('controller-boolean', function(value) { -Polymer( 'controller-boolean', { + return typeof value == 'boolean'; + +}); + +Polymer('controller-boolean', { + + ready: function() { + + }, + + toggle: function() { + + this.value = !this.value; + + } - ready: function() { - - - }, - - toggle: function() { - - this.value = !this.value; - - } - }); diff --git a/elements/controller-function/controller-function.js b/elements/controller-function/controller-function.js index 511a1c9..c7fa1f6 100644 --- a/elements/controller-function/controller-function.js +++ b/elements/controller-function/controller-function.js @@ -1,9 +1,12 @@ -Gui.register( 'controller-function', function( value ) { - - return typeof value == 'function'; +/* globals Gui, Polymer */ +'use strict'; -} ); +Gui.register('controller-function', function(value) { -Polymer( 'controller-function', { + return typeof value == 'function'; -} ); +}); + +Polymer('controller-function', { + +}); diff --git a/elements/controller-number/controller-number.js b/elements/controller-number/controller-number.js index 72865a1..76bbfad 100644 --- a/elements/controller-number/controller-number.js +++ b/elements/controller-number/controller-number.js @@ -1,7 +1,10 @@ +/* globals Gui, Polymer */ +'use strict'; + /* [ ] arrow keys -[ ] min( ) max( ) step( ) commands of yore +[ ] min() max() step() commands of yore [x] only validate input box on blur, not on keydown [x] enter key blurs @@ -13,255 +16,255 @@ */ -Gui.register( 'controller-number', function( value ) { - - return typeof value == 'number'; +Gui.register('controller-number', function(value) { -} ); + return typeof value == 'number'; -Polymer( 'controller-number', { +}); - value: 0, - decimals: 3, - computed: { +Polymer('controller-number', { - slider: 'min !== undefined && max !== undefined' + value: 0, + decimals: 3, + computed: { - }, + slider: 'min !== undefined && max !== undefined' - ready: function() { - - var _this = this; + }, - window.addEventListener( 'keydown', function( e ) { - if ( e.keyCode == 18 ) _this._alt = true; - }, false ); + ready: function() { - window.addEventListener( 'keyup', function( e ) { - if ( e.keyCode == 18 ) _this._alt = false; - }, false ); + var _this = this; - this.super(); + window.addEventListener('keydown', function(e) { + if (e.keyCode == 18) { + _this._alt = true; + } + }, false); - }, + window.addEventListener('keyup', function(e) { + if (e.keyCode == 18) { + _this._alt = false; + } + }, false); - init: function( min, max, step ) { + // this.super(); - this.min = min; - this.max = max; - this.step = step; + }, - }, + init: function(min, max, step) { - // Observers - // ------------------------------- + this.min = min; + this.max = max; + this.step = step; - valueChanged: function( newValue ) { + }, - if ( this.step !== undefined ) { - this.value = Math.round( this.value / this.step ) * this.step; - } + // Observers + // ------------------------------- - if ( this.min !== undefined ) { - this.value = Math.max( this.value, this.min ); - } + valueChanged: function(newValue) { - if ( this.max !== undefined ) { - this.value = Math.min( this.value, this.max ); - } - - this.super(); - }, + if (this.step !== undefined) { + this.value = Math.round(this.value / this.step) * this.step; + } - minChanged: function() { + if (this.min !== undefined) { + this.value = Math.max(this.value, this.min); + } - this.value = Math.max( this.value, this.min ); - this.update(); + if (this.max !== undefined) { + this.value = Math.min(this.value, this.max); + } - }, + this.super(); + }, - maxChanged: function() { + minChanged: function() { - this.value = Math.min( this.value, this.max ); - this.update(); + this.value = Math.max(this.value, this.min); + this.update(); - }, + }, - update: function() { - - var ratio = this.map( this.value, this.min, this.max, 0, 1 ); + maxChanged: function() { - if ( this.min < 0 && this.max > 0 ) { + this.value = Math.min(this.value, this.max); + this.update(); - this.$.container.classList.add( 'straddle-zero' ); + }, - var zero = this.map( 0, this.min, this.max, 0, 1 ); + update: function() { - if ( this.value >= 0 ) { + var ratio = this.map(this.value, this.min, this.max, 0, 1); - this.$.fill.style.left = zero * 100 + '%'; - this.$.fill.style.width = (ratio - zero) * 100 + '%'; - this.$.fill.style.right = ''; + if (this.min < 0 && this.max > 0) { - } else { + this.$.container.classList.add('straddle-zero'); - this.$.fill.style.left = ''; - this.$.fill.style.width = (zero - ratio) * 100 + '%'; - this.$.fill.style.right = ( 1 - zero ) * 100 + '%'; + var zero = this.map(0, this.min, this.max, 0, 1); - } + if (this.value >= 0) { - } else { + this.$.fill.style.left = zero * 100 + '%'; + this.$.fill.style.width = (ratio - zero) * 100 + '%'; + this.$.fill.style.right = ''; - this.$.container.classList.remove( 'straddle-zero' ); + } else { - if ( this.max > 0 ) { + this.$.fill.style.left = ''; + this.$.fill.style.width = (zero - ratio) * 100 + '%'; + this.$.fill.style.right = (1 - zero) * 100 + '%'; - this.$.fill.style.left = 0; - this.$.fill.style.width = ratio * 100 + '%'; - this.$.fill.style.right = ''; + } - } else { + } else { - this.$.fill.style.left = ''; - this.$.fill.style.width = ( 1 - ratio ) * 100 + '%'; - this.$.fill.style.right = 0; + this.$.container.classList.remove('straddle-zero'); - } + if (this.max > 0) { - } + this.$.fill.style.left = 0; + this.$.fill.style.width = ratio * 100 + '%'; + this.$.fill.style.right = ''; - this.$.knob.style.left = ratio * 100 + '%'; + } else { - this.$.container.classList.toggle( 'positive', this.value >= 0 ); - this.$.container.classList.toggle( 'negative', this.value < 0 ); + this.$.fill.style.left = ''; + this.$.fill.style.width = (1 - ratio) * 100 + '%'; + this.$.fill.style.right = 0; - this.super(); - - }, - - - // Events - // ------------------------------- - - click: function( e ) { - - this.$.input.select(); - - }, - - keydown: function( e ) { - - if ( e.keyCode == 13 ) { - this.$.input.blur(); - } - - }, - - down: function( e ) { - - e.preventDefault(); - this._rect = this.$.track.getBoundingClientRect(); - if ( !this._alt ) this.value = this.valueFromX( e.x ); - - this.fire( 'sliderDown' ); - - }, - - up: function( e ) { - - // this.$.container.classList.add( 'transition' ); - - this.fire( 'sliderUp' ); - - }, - - trackstart: function( e ) { - - // this.$.container.classList.remove( 'transition' ); - this._dragFriction = 1; - - }, - - trackx: function( e ) { - - if ( this.step === undefined ) { - - var dv = this.valueFromDX( e.ddx ); - - if ( this._alt ) dv /= 10; - - this.value += dv * this._dragFriction; - - } else { - - this.value = this.valueFromX( e.pageX ); - - } - }, - - tracky: function( e ) { - - this._dragFriction = Math.max( 0.01, Math.min( 1, this.map( e.dy, 50, 300, 1, 0.1 ) ) ); - - }, - - blur: function( e ) { - - var v = parseFloat( this.$.input.value ); - - if ( v === v ) { - this.value = v; - } - - }, - - - - // Filters - // ------------------------------- - - truncate: function( v ) { - - if ( v % 1 !== 0 && this.decimals !== undefined ) { - return this.limitDecimals( v, this.decimals ); - } else { - return v; - } - - }, - - - // Helpers - // ------------------------------- - - limitDecimals: function( v, maxDecimals ) { - - var str = v.toString(); - var numDecimals = str.substring( str.indexOf( '.' ) + 1 ).length; - - str = v.toFixed( Math.min( numDecimals, this.decimals ) ); - - for ( var z, i = 0, l = str.length; i < l; i++ ) { - if ( str.charAt( i ) !== '0' ) { - z = i; - } - } - - return str.substring( 0, z+1 ); - - }, - - valueFromX: function( x ) { - - return this.map( x, this._rect.left, this._rect.right, this.min, this.max ); - - }, - - valueFromDX: function( dx ) { - - return this.map( dx, 0, this._rect.width, 0, this.max - this.min ); + } } + this.$.knob.style.left = ratio * 100 + '%'; + + this.$.container.classList.toggle('positive', this.value >= 0); + this.$.container.classList.toggle('negative', this.value < 0); + + this.super(); + + }, + + // Events + // ------------------------------- + + click: function(e) { + + this.$.input.select(); + + }, + + keydown: function(e) { + + if (e.keyCode == 13) { + this.$.input.blur(); + } + + }, + + down: function(e) { + + e.preventDefault(); + this._rect = this.$.track.getBoundingClientRect(); + if (!this._alt) { this.value = this.valueFromX(e.x); } + + this.fire( 'sliderDown' ); + + }, + + up: function(e) { + + // this.$.container.classList.add( 'transition'); + this.fire( 'sliderUp' ); + + }, + + trackstart: function(e) { + + // this.$.container.classList.remove( 'transition'); + this._dragFriction = 1; + + }, + + trackx: function(e) { + + if (this.step === undefined) { + + var dv = this.valueFromDX(e.ddx); + + if (this._alt) { dv /= 10; } + + this.value += dv * this._dragFriction; + + } else { + + this.value = this.valueFromX(e.pageX); + + } + }, + + tracky: function(e) { + + this._dragFriction = Math.max(0.01, + Math.min(1, this.map(e.dy, 50, 300, 1, 0.1))); + + }, + + blur: function(e) { + + var v = parseFloat(this.$.input.value); + + if (v === v) { + this.value = v; + } + + }, + + // Filters + // ------------------------------- + + truncate: function(v) { + + if (v % 1 !== 0 && this.decimals !== undefined) { + return this.limitDecimals(v, this.decimals); + } else { + return v; + } + + }, + + // Helpers + // ------------------------------- + + limitDecimals: function(v, maxDecimals) { + + var str = v.toString(); + var numDecimals = str.substring(str.indexOf('.') + 1).length; + + str = v.toFixed(Math.min(numDecimals, this.decimals)); + + for (var z, i = 0, l = str.length; i < l; i++) { + if (str.charAt(i) !== '0') { + z = i; + } + } + + return str.substring(0, z + 1); + + }, + + valueFromX: function(x) { + + return this.map(x, this._rect.left, this._rect.right, this.min, this.max); + + }, + + valueFromDX: function(dx) { + + return this.map(dx, 0, this._rect.width, 0, this.max - this.min); + + } + }); diff --git a/elements/controller-string/controller-string.js b/elements/controller-string/controller-string.js index b60b1eb..b85fdd0 100644 --- a/elements/controller-string/controller-string.js +++ b/elements/controller-string/controller-string.js @@ -1,23 +1,26 @@ -Gui.register( 'controller-string', function( value ) { - - return typeof value == 'string'; +/* globals Gui, Polymer */ +'use strict'; -} ); +Gui.register('controller-string', function(value) { -Polymer( 'controller-string', { + return typeof value == 'string'; - click: function( e ) { +}); - this.$.input.select(); +Polymer('controller-string', { - }, + click: function(e) { - keydown: function( e ) { + this.$.input.select(); - if ( e.keyCode == 13 ) { - this.$.input.blur(); - } + }, + keydown: function(e) { + + if (e.keyCode == 13) { + this.$.input.blur(); } - -}); \ No newline at end of file + + } + +}); diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js index 900f240..fad01d7 100644 --- a/elements/gui-panel/gui-panel.js +++ b/elements/gui-panel/gui-panel.js @@ -1,18 +1,21 @@ +/* globals Polymer, Path, Gui */ +'use strict'; + // [ ] scrolling when docked // [ ] scrolling when window short and not docked Polymer('gui-panel', { - docked: false, - open: true, - touch: 'ontouchstart' in window || !!window.DocumentTouch && document instanceof DocumentTouch, + docked: false, + open: true, + touch: ('ontouchstart' in window) || + (!!window.DocumentTouch && document instanceof window.DocumentTouch), - ready: function() { + ready: function() { - this.defined = {}; - // window.addEventListener( 'resize', this.checkHeight.bind( this ) ); + this.defined = {}; - }, + }, define: function() { @@ -29,93 +32,96 @@ Polymer('gui-panel', { this.defined[ name ] = initialValue; - return this.add.apply( this, args ); + return this.add.apply(this, args); - }, + }, - add: function( object, path ) { + add: function(object, path) { - // Make controller + // Make controller - var value = Path.get( path ).getValueFrom( object ); + var value = Path.get(path).getValueFrom(object); - if ( value == null || value == undefined ) { - return Gui.error( object + ' doesn\'t have a value for path "' + path + '".' ); - } + 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 controllers; + var args = Array.prototype.slice.call( arguments, 2 ); + var controller; - if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) { - controller = document.createElement( 'controller-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.appendChild( row ); - - return controller; - - }, - - - // Observers - // ------------------------------- - - openChanged: function() { - - if ( this.open || this.docked ) { - - // let the style sheet take care of things - - this.$.panel.style.transform = ''; - - } else { - - // todo: need the rest of the vendor prefixes ... - // wish i could pipe javascript variables into styl. - - var y = -this.$.controllers.offsetHeight + 'px'; - this.$.panel.style.transform = 'translate3d(0, ' + y + ', 0)'; - - } - - - }, - - dockedChanged: function() { - - this.openChanged(); - - }, + if ( args[ 0 ] instanceof Array || typeof args[ 0 ] == 'object' ) { + controller = document.createElement( 'controller-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.appendChild(row); + + return controller; + + }, + + // Observers + // ------------------------------- + + openChanged: function() { + + if (this.open || this.docked) { + + // let the style sheet take care of things + + this.$.container.style.transform = ''; + this.$.panel.style.transform = ''; + + } else { + + // todo: need the rest of the vendor prefixes ... + // wish i could pipe javascript variables into styl. + + var y = -this.$.controllers.offsetHeight + 'px'; + this.$.container.style.transform = 'translate3d(0, ' + y + ', 0)'; + + } + + }, + + dockedChanged: function() { + + this.openChanged(); + + }, + + // Events + // ------------------------------- + + tapClose: function() { + this.open = !this.open; + }, - // Events - // ------------------------------- - toggleOpen: function() { this.open = !this.open; }, @@ -127,19 +133,24 @@ Polymer('gui-panel', { // } else { // this.docked = false; // } + // if ( window.innerHeight < this.$.controllers.offsetHeight) { + // this.docked = true; + // } else { + // this.docked = false; + // } - // }, + // }, + // Legacy + // ------------------------------- - // Legacy - // ------------------------------- + listenAll: function() { - listenAll: function() { + Gui.warn('controller.listenAll() is deprecated. ' + + 'All controllers are listened for free.'); - Gui.warn( 'controller.listenAll() is deprecated. All controllers are listened for free.' ); + } - }, + // todo: domElement - // todo: domElement - -}); \ No newline at end of file +}); diff --git a/elements/gui-row/gui-row.js b/elements/gui-row/gui-row.js index 70e1ef2..5a1a8e3 100644 --- a/elements/gui-row/gui-row.js +++ b/elements/gui-row/gui-row.js @@ -1,18 +1,21 @@ +/* globals Polymer */ +'use strict'; + Polymer('gui-row', { - comment: null, - commentOpen: false, + comment: null, + commentOpen: false, - ready: function() { + ready: function() { - }, + }, - openComment: function() { - this.commentOpen = true; - }, + openComment: function() { + this.commentOpen = true; + }, - closeComment: function() { - this.commentOpen = false; - } + closeComment: function() { + this.commentOpen = false; + } -}); \ No newline at end of file +}); diff --git a/gulpfile.js b/gulpfile.js index 5b332c1..05b87ac 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,88 +1,101 @@ -var gulp = require( 'gulp' ), - stylus = require( 'gulp-stylus' ), - plates = require( 'gulp-plates' ), - rename = require( 'gulp-rename' ), - vulcan = require( 'gulp-vulcanize' ), - insert = require( 'gulp-insert' ), - replace = require( 'gulp-replace' ), - clean = require( 'gulp-clean' ), - nib = require( 'nib' ), - fs = require( 'fs' ), - marked = require( 'marked' ), - karma = require( 'karma' ); +var gulp = require('gulp'), + $ = require('gulp-load-plugins')(), + nib = require('nib'), + fs = require('fs'), + marked = require('marked'), + karma = require('karma'), + browserSync = require('browser-sync'), + reload = browserSync.reload; -gulp.task( 'default', [ 'docs', 'build' ] ); +gulp.task('default', ['docs', 'build']) -gulp.task( 'watch', [ 'default' ], function() { - - karma.server.start( { - frameworks: [ 'jasmine' ], - files: [ - 'build/gui.js', - 'tests/*.js' - ] - } ); +gulp.task('watch', ['default'], function() { - gulp.watch( [ 'elements/**/*.styl', 'elements/**/*.html', 'elements/**/*.js', 'gui.html' ], [ 'build' ] ); - gulp.watch( [ 'README.md', 'docs/*' ], [ 'docs' ] ); + karma.server.start({ + frameworks: ['jasmine'], + files: [ + 'build/gui.js', + 'tests/*.js' + ] + }); -} ); + gulp.watch(['elements/**/*.styl', 'elements/**/*.html', + 'elements/**/*.js', 'gui.html'], ['build']); -gulp.task( 'build', [ 'vulcanize' ], function() { + gulp.watch(['README.md', 'docs/*'], ['docs']); - return gulp.src( 'build/gui.html' ) - .pipe( replace( /\\/g, "\\\\" ) ) - .pipe( replace( /'/g, "\\'" ) ) - .pipe( replace( /^(.*)$/gm, "'$1'," ) ) - .pipe( insert.wrap( 'document.write([', '].join("\\n"))' ) ) - .pipe( rename( 'gui.js' ) ) - .pipe( gulp.dest( 'build' ) ); +}); -} ); +gulp.task('build', ['vulcanize'], function() { -gulp.task( 'vulcanize', [ 'css' ], function() { + return gulp.src('build/gui.html') + .pipe($.replace(/\\/g, '\\\\')) + .pipe($.replace(/'/g, '\\\'')) + .pipe($.replace(/^(.*)$/gm, '\'$1\',')) + .pipe($.insert.wrap('document.write([', '].join("\\n"))')) + .pipe($.rename('gui.js')) + .pipe(gulp.dest('build')); - return gulp.src( 'gui.html' ) - .pipe( vulcan( { - dest: 'build', - inline: true, - strip: true - } ) ); +}); -} ); +gulp.task('vulcanize', ['css'], function() { -gulp.task( 'css', function() { + return gulp.src('gui.html') + .pipe($.vulcanize({ + dest: 'build', + inline: true, + strip: true + })); - return css( 'elements/**/*.styl', 'elements' ); +}); -} ); +gulp.task('jscs', function() { + return gulp.src('elements/**/*.js') + .pipe($.jscs()); +}); -gulp.task( 'docs', function() { - - css( 'docs/*.styl', 'docs' ); +gulp.task('jshint', function() { + return gulp.src('elements/**/*.js') + .pipe(reload({stream: true, once: true})) + .pipe($.jshint('.jshintrc')) + .pipe($.jshint.reporter('jshint-stylish')) + .pipe($.if(!browserSync.active, $.jshint.reporter('fail'))); +}); - var content = { - readme: marked( fs.readFileSync( 'README.md', 'utf8' ) ) - }; +gulp.task('lint', ['jscs', 'jshint']); - return gulp.src( 'docs/template.html' ) - .pipe( plates( content ) ) - .pipe( rename( 'index.html' ) ) - .pipe( gulp.dest( './' ) ); +gulp.task('css', function() { -} ); + return css('elements/**/*.styl', 'elements'); -gulp.task( 'clean', function() { +}); - return gulp.src( [ 'build/*', '**/*.css' ] ) - .pipe( clean() ); +gulp.task('docs', function() { -} ); + css('docs/*.styl', 'docs'); -function css( src, dest ) { + var content = { + readme: marked(fs.readFileSync('README.md', 'utf8')) + }; - return gulp.src( src ) - .pipe( stylus( { use: [ nib() ] } ) ) - .pipe( gulp.dest( dest ) ); + return gulp.src('docs/template.html') + .pipe($.plates(content)) + .pipe($.rename('index.html')) + .pipe(gulp.dest('./')); -} \ No newline at end of file +}); + +gulp.task('clean', function() { + + return gulp.src(['build/*', '**/*.css']) + .pipe($.clean()); + +}); + +function css(src, dest) { + + return gulp.src(src) + .pipe($.stylus({ use: [nib()] })) + .pipe(gulp.dest(dest)); + +} diff --git a/package.json b/package.json index 75931dc..ec722de 100644 --- a/package.json +++ b/package.json @@ -2,15 +2,22 @@ "name": "dat.gui", "version": "0.0.0", "devDependencies": { + "browser-sync": "^1.3.6", "gulp": "^3.8.7", "gulp-clean": "^0.3.1", + "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-rename": "^1.2.0", "gulp-replace": "^0.4.0", "gulp-stylus": "^1.3.0", "gulp-vulcanize": "^1.0.0", "gulp-watch": "^0.6.9", + "jshint-stylish": "^0.4.0", "karma": "^0.12.23", "karma-chrome-launcher": "^0.1.4", "karma-jasmine": "^0.1.5",