diff --git a/.editorconfig b/.editorconfig index 449e280..2bfa26b 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,4 +1,21 @@ -[*.js] +# 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 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/.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 16283ee..a189a2e 100644 --- a/TODO.md +++ b/TODO.md @@ -18,15 +18,16 @@ NEW FEATURES BUILD - [x] single import -- [ ] browsersync +- [x] browsersync +- [x] remove platform, dependent on fix of bug in gulp-vulcanize REFACTOR -- [ ] gui.define* => gui.var* +- [x] gui.define* => gui.var* - [ ] Gui.js => gui-panel => dat-gui -- [ ] bake gui-row into each controller - [x] controller-* => dat-gui-* - [x] kill strict +- [x] Reorg gulpfile and add standardized formatting DOCS @@ -34,7 +35,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/bower.json b/bower.json index 0dbc36c..07a7c6a 100644 --- a/bower.json +++ b/bower.json @@ -1,22 +1,29 @@ { - "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, - "ignore": [ - "**/.*", - "node_modules", - "tests", - "docs" - ], - "dependencies": { - "polymer": "Polymer/polymer#~0.3.5" - } + "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" + }, + "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/gui.html b/build/dat-gui.html similarity index 98% rename from build/gui.html rename to build/dat-gui.html index b5a9ece..3973275 100755 --- a/build/gui.html +++ b/build/dat-gui.html @@ -3,7 +3,8 @@ var e,f,g,h=b.type;if("load"===h&&!b.bubbles){var i=c;i instanceof Q.Document&&( },createTBody:function(){return g(f(this).createTBody())},get rows(){return h(f(this).rows)},insertRow:function(a){return g(f(this).insertRow(a))}}),e(i,b,document.createElement("table")),a.wrappers.HTMLTableElement=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){c.call(this,a)}var c=a.wrappers.HTMLElement,d=a.mixin,e=a.registerWrapper,f=a.wrapHTMLCollection,g=a.unwrap,h=a.wrap,i=window.HTMLTableSectionElement;b.prototype=Object.create(c.prototype),d(b.prototype,{get rows(){return f(g(this).rows)},insertRow:function(a){return h(g(this).insertRow(a))}}),e(i,b,document.createElement("thead")),a.wrappers.HTMLTableSectionElement=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){c.call(this,a)}var c=a.wrappers.HTMLElement,d=a.mixin,e=a.registerWrapper,f=a.wrapHTMLCollection,g=a.unwrap,h=a.wrap,i=window.HTMLTableRowElement;b.prototype=Object.create(c.prototype),d(b.prototype,{get cells(){return f(g(this).cells)},insertCell:function(a){return h(g(this).insertCell(a))}}),e(i,b,document.createElement("tr")),a.wrappers.HTMLTableRowElement=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){switch(a.localName){case"content":return new c(a);case"shadow":return new e(a);case"template":return new f(a)}d.call(this,a)}var c=a.wrappers.HTMLContentElement,d=a.wrappers.HTMLElement,e=a.wrappers.HTMLShadowElement,f=a.wrappers.HTMLTemplateElement,g=(a.mixin,a.registerWrapper),h=window.HTMLUnknownElement;b.prototype=Object.create(d.prototype),g(h,b),a.wrappers.HTMLUnknownElement=b}(window.ShadowDOMPolyfill),function(a){"use strict";var b=a.wrappers.Element,c=a.wrappers.HTMLElement,d=a.registerObject,e="http://www.w3.org/2000/svg",f=document.createElementNS(e,"title"),g=d(f),h=Object.getPrototypeOf(g.prototype).constructor;if(!("classList"in f)){var i=Object.getOwnPropertyDescriptor(b.prototype,"classList");Object.defineProperty(c.prototype,"classList",i),delete b.prototype.classList}a.wrappers.SVGElement=h}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){m.call(this,a)}var c=a.mixin,d=a.registerWrapper,e=a.unwrap,f=a.wrap,g=window.SVGUseElement,h="http://www.w3.org/2000/svg",i=f(document.createElementNS(h,"g")),j=document.createElementNS(h,"use"),k=i.constructor,l=Object.getPrototypeOf(k.prototype),m=l.constructor;b.prototype=Object.create(l),"instanceRoot"in j&&c(b.prototype,{get instanceRoot(){return f(e(this).instanceRoot)},get animatedInstanceRoot(){return f(e(this).animatedInstanceRoot)}}),d(g,b,j),a.wrappers.SVGUseElement=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){c.call(this,a)}var c=a.wrappers.EventTarget,d=a.mixin,e=a.registerWrapper,f=a.wrap,g=window.SVGElementInstance;g&&(b.prototype=Object.create(c.prototype),d(b.prototype,{get correspondingElement(){return f(this.impl.correspondingElement)},get correspondingUseElement(){return f(this.impl.correspondingUseElement)},get parentNode(){return f(this.impl.parentNode)},get childNodes(){throw new Error("Not implemented")},get firstChild(){return f(this.impl.firstChild)},get lastChild(){return f(this.impl.lastChild)},get previousSibling(){return f(this.impl.previousSibling)},get nextSibling(){return f(this.impl.nextSibling)}}),e(g,b),a.wrappers.SVGElementInstance=b)}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){this.impl=a}var c=a.mixin,d=a.registerWrapper,e=a.unwrap,f=a.unwrapIfNeeded,g=a.wrap,h=window.CanvasRenderingContext2D;c(b.prototype,{get canvas(){return g(this.impl.canvas)},drawImage:function(){arguments[0]=f(arguments[0]),this.impl.drawImage.apply(this.impl,arguments)},createPattern:function(){return arguments[0]=e(arguments[0]),this.impl.createPattern.apply(this.impl,arguments)}}),d(h,b,document.createElement("canvas").getContext("2d")),a.wrappers.CanvasRenderingContext2D=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){this.impl=a}var c=a.mixin,d=a.registerWrapper,e=a.unwrapIfNeeded,f=a.wrap,g=window.WebGLRenderingContext;if(g){c(b.prototype,{get canvas(){return f(this.impl.canvas)},texImage2D:function(){arguments[5]=e(arguments[5]),this.impl.texImage2D.apply(this.impl,arguments)},texSubImage2D:function(){arguments[6]=e(arguments[6]),this.impl.texSubImage2D.apply(this.impl,arguments)}});var h=/WebKit/.test(navigator.userAgent)?{drawingBufferHeight:null,drawingBufferWidth:null}:{};d(g,b,h),a.wrappers.WebGLRenderingContext=b}}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){this.impl=a}var c=a.registerWrapper,d=a.unwrap,e=a.unwrapIfNeeded,f=a.wrap,g=window.Range;b.prototype={get startContainer(){return f(this.impl.startContainer)},get endContainer(){return f(this.impl.endContainer)},get commonAncestorContainer(){return f(this.impl.commonAncestorContainer)},setStart:function(a,b){this.impl.setStart(e(a),b)},setEnd:function(a,b){this.impl.setEnd(e(a),b)},setStartBefore:function(a){this.impl.setStartBefore(e(a))},setStartAfter:function(a){this.impl.setStartAfter(e(a))},setEndBefore:function(a){this.impl.setEndBefore(e(a))},setEndAfter:function(a){this.impl.setEndAfter(e(a))},selectNode:function(a){this.impl.selectNode(e(a))},selectNodeContents:function(a){this.impl.selectNodeContents(e(a))},compareBoundaryPoints:function(a,b){return this.impl.compareBoundaryPoints(a,d(b))},extractContents:function(){return f(this.impl.extractContents())},cloneContents:function(){return f(this.impl.cloneContents())},insertNode:function(a){this.impl.insertNode(e(a))},surroundContents:function(a){this.impl.surroundContents(e(a))},cloneRange:function(){return f(this.impl.cloneRange())},isPointInRange:function(a,b){return this.impl.isPointInRange(e(a),b)},comparePoint:function(a,b){return this.impl.comparePoint(e(a),b)},intersectsNode:function(a){return this.impl.intersectsNode(e(a))},toString:function(){return this.impl.toString()}},g.prototype.createContextualFragment&&(b.prototype.createContextualFragment=function(a){return f(this.impl.createContextualFragment(a))}),c(window.Range,b,document.createRange()),a.wrappers.Range=b}(window.ShadowDOMPolyfill),function(a){"use strict";var b=a.GetElementsByInterface,c=a.ParentNodeInterface,d=a.SelectorsInterface,e=a.mixin,f=a.registerObject,g=f(document.createDocumentFragment());e(g.prototype,c),e(g.prototype,d),e(g.prototype,b);var h=f(document.createComment(""));a.wrappers.Comment=h,a.wrappers.DocumentFragment=g}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){var b=k(a.impl.ownerDocument.createDocumentFragment());c.call(this,b),i(b,this);var e=a.shadowRoot;m.set(this,e),this.treeScope_=new d(this,g(e||a)),l.set(this,a)}var c=a.wrappers.DocumentFragment,d=a.TreeScope,e=a.elementFromPoint,f=a.getInnerHTML,g=a.getTreeScope,h=a.mixin,i=a.rewrap,j=a.setInnerHTML,k=a.unwrap,l=new WeakMap,m=new WeakMap,n=/[ \t\n\r\f]/;b.prototype=Object.create(c.prototype),h(b.prototype,{get innerHTML(){return f(this)},set innerHTML(a){j(this,a),this.invalidateShadowRenderer()},get olderShadowRoot(){return m.get(this)||null},get host(){return l.get(this)||null},invalidateShadowRenderer:function(){return l.get(this).invalidateShadowRenderer()},elementFromPoint:function(a,b){return e(this,this.ownerDocument,a,b)},getElementById:function(a){return n.test(a)?null:this.querySelector('[id="'+a+'"]')}}),a.wrappers.ShadowRoot=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){a.previousSibling_=a.previousSibling,a.nextSibling_=a.nextSibling,a.parentNode_=a.parentNode}function c(a,c,e){var f=G(a),g=G(c),h=e?G(e):null;if(d(c),b(c),e)a.firstChild===e&&(a.firstChild_=e),e.previousSibling_=e.previousSibling;else{a.lastChild_=a.lastChild,a.lastChild===a.firstChild&&(a.firstChild_=a.firstChild);var i=H(f.lastChild);i&&(i.nextSibling_=i.nextSibling)}f.insertBefore(g,h)}function d(a){var c=G(a),d=c.parentNode;if(d){var e=H(d);b(a),a.previousSibling&&(a.previousSibling.nextSibling_=a),a.nextSibling&&(a.nextSibling.previousSibling_=a),e.lastChild===a&&(e.lastChild_=a),e.firstChild===a&&(e.firstChild_=a),d.removeChild(c)}}function e(a){I.set(a,[])}function f(a){var b=I.get(a);return b||I.set(a,b=[]),b}function g(a){for(var b=[],c=0,d=a.firstChild;d;d=d.nextSibling)b[c++]=d;return b}function h(){for(var a=0;ap;p++){var q=H(f[k++]);h.get(q)||d(q)}for(var r=n.addedCount,s=f[k]&&H(f[k]),p=0;r>p;p++){var t=e[j++],u=t.node;c(b,u,s),h.set(u,!0),t.sync(h)}l+=r}for(var m=l;m=0;e--){var f=d[e],g=p(f);if(g){var h=f.olderShadowRoot;h&&(c=o(h));for(var i=0;i=0;k--)j=Object.create(j);["createdCallback","attachedCallback","detachedCallback","attributeChangedCallback"].forEach(function(a){var b=e[a];b&&(j[a]=function(){A(this)instanceof d||y(this),b.apply(A(this),arguments)})});var l={prototype:j};f&&(l.extends=f),d.prototype=e,d.prototype.constructor=d,a.constructorTable.set(j,d),a.nativePrototypeTable.set(e,j);F.call(z(this),b,l);return d},t([window.HTMLDocument||window.Document],["registerElement"])}t([window.HTMLBodyElement,window.HTMLDocument||window.Document,window.HTMLHeadElement,window.HTMLHtmlElement],["appendChild","compareDocumentPosition","contains","getElementsByClassName","getElementsByTagName","getElementsByTagNameNS","insertBefore","querySelector","querySelectorAll","removeChild","replaceChild"].concat(u)),t([window.HTMLDocument||window.Document],["adoptNode","importNode","contains","createComment","createDocumentFragment","createElement","createElementNS","createEvent","createEventNS","createRange","createTextNode","elementFromPoint","getElementById","getElementsByName","getSelection"]),v(b.prototype,j),v(b.prototype,l),v(b.prototype,n),v(b.prototype,{get implementation(){var a=C.get(this);return a?a:(a=new g(z(this).implementation),C.set(this,a),a)},get defaultView(){return A(z(this).defaultView)}}),w(window.Document,b,document.implementation.createHTMLDocument("")),window.HTMLDocument&&w(window.HTMLDocument,b),B([window.HTMLBodyElement,window.HTMLDocument||window.Document,window.HTMLHeadElement]),h(g,"createDocumentType"),h(g,"createDocument"),h(g,"createHTMLDocument"),i(g,"hasFeature"),w(window.DOMImplementation,g),t([window.DOMImplementation],["createDocumentType","createDocument","createHTMLDocument","hasFeature"]),a.adoptNodeNoRemove=d,a.wrappers.DOMImplementation=g,a.wrappers.Document=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){c.call(this,a)}var c=a.wrappers.EventTarget,d=a.wrappers.Selection,e=a.mixin,f=a.registerWrapper,g=a.renderAllPending,h=a.unwrap,i=a.unwrapIfNeeded,j=a.wrap,k=window.Window,l=window.getComputedStyle,m=window.getDefaultComputedStyle,n=window.getSelection;b.prototype=Object.create(c.prototype),k.prototype.getComputedStyle=function(a,b){return j(this||window).getComputedStyle(i(a),b)},m&&(k.prototype.getDefaultComputedStyle=function(a,b){return j(this||window).getDefaultComputedStyle(i(a),b)}),k.prototype.getSelection=function(){return j(this||window).getSelection()},delete window.getComputedStyle,delete window.getSelection,["addEventListener","removeEventListener","dispatchEvent"].forEach(function(a){k.prototype[a]=function(){var b=j(this||window);return b[a].apply(b,arguments)},delete window[a]}),e(b.prototype,{getComputedStyle:function(a,b){return g(),l.call(h(this),i(a),b)},getSelection:function(){return g(),new d(n.call(h(this)))},get document(){return j(h(this).document)}}),m&&(b.prototype.getDefaultComputedStyle=function(a,b){return g(),m.call(h(this),i(a),b)}),f(k,b,window),a.wrappers.Window=b}(window.ShadowDOMPolyfill),function(a){"use strict";var b=a.unwrap,c=window.DataTransfer||window.Clipboard,d=c.prototype.setDragImage;d&&(c.prototype.setDragImage=function(a,c,e){d.call(this,b(a),c,e)})}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){this.impl=a instanceof e?a:new e(a&&d(a))}var c=a.registerWrapper,d=a.unwrap,e=window.FormData;c(e,b,new e),a.wrappers.FormData=b}(window.ShadowDOMPolyfill),function(a){"use strict";function b(a){var b=c[a],d=window[b];if(d){var e=document.createElement(a),f=e.constructor;window[b]=f}}var c=(a.isWrapperFor,{a:"HTMLAnchorElement",area:"HTMLAreaElement",audio:"HTMLAudioElement",base:"HTMLBaseElement",body:"HTMLBodyElement",br:"HTMLBRElement",button:"HTMLButtonElement",canvas:"HTMLCanvasElement",caption:"HTMLTableCaptionElement",col:"HTMLTableColElement",content:"HTMLContentElement",data:"HTMLDataElement",datalist:"HTMLDataListElement",del:"HTMLModElement",dir:"HTMLDirectoryElement",div:"HTMLDivElement",dl:"HTMLDListElement",embed:"HTMLEmbedElement",fieldset:"HTMLFieldSetElement",font:"HTMLFontElement",form:"HTMLFormElement",frame:"HTMLFrameElement",frameset:"HTMLFrameSetElement",h1:"HTMLHeadingElement",head:"HTMLHeadElement",hr:"HTMLHRElement",html:"HTMLHtmlElement",iframe:"HTMLIFrameElement",img:"HTMLImageElement",input:"HTMLInputElement",keygen:"HTMLKeygenElement",label:"HTMLLabelElement",legend:"HTMLLegendElement",li:"HTMLLIElement",link:"HTMLLinkElement",map:"HTMLMapElement",marquee:"HTMLMarqueeElement",menu:"HTMLMenuElement",menuitem:"HTMLMenuItemElement",meta:"HTMLMetaElement",meter:"HTMLMeterElement",object:"HTMLObjectElement",ol:"HTMLOListElement",optgroup:"HTMLOptGroupElement",option:"HTMLOptionElement",output:"HTMLOutputElement",p:"HTMLParagraphElement",param:"HTMLParamElement",pre:"HTMLPreElement",progress:"HTMLProgressElement",q:"HTMLQuoteElement",script:"HTMLScriptElement",select:"HTMLSelectElement",shadow:"HTMLShadowElement",source:"HTMLSourceElement",span:"HTMLSpanElement",style:"HTMLStyleElement",table:"HTMLTableElement",tbody:"HTMLTableSectionElement",template:"HTMLTemplateElement",textarea:"HTMLTextAreaElement",thead:"HTMLTableSectionElement",time:"HTMLTimeElement",title:"HTMLTitleElement",tr:"HTMLTableRowElement",track:"HTMLTrackElement",ul:"HTMLUListElement",video:"HTMLVideoElement"});Object.keys(c).forEach(b),Object.getOwnPropertyNames(a.wrappers).forEach(function(b){window[b]=a.wrappers[b]})}(window.ShadowDOMPolyfill),function(a){function b(a,c){var d,e,f,g,h=a.firstElementChild;for(e=[],f=a.shadowRoot;f;)e.push(f),f=f.olderShadowRoot;for(g=e.length-1;g>=0;g--)if(d=e[g].querySelector(c))return d;for(;h;){if(d=b(h,c))return d;h=h.nextElementSibling}return null}function c(a,b,d){var e,f,g,h,i,j=a.firstElementChild;for(g=[],f=a.shadowRoot;f;)g.push(f),f=f.olderShadowRoot;for(h=g.length-1;h>=0;h--)for(e=g[h].querySelectorAll(b),i=0;id&&(c=b[d]);d++)c.parentNode.removeChild(c)},registerRoot:function(a,b,c){var d=this.registry[b]={root:a,name:b,extendsName:c},e=this.findStyles(a);d.rootStyles=e,d.scopeStyles=d.rootStyles;var f=this.registry[d.extendsName];return f&&(d.scopeStyles=f.scopeStyles.concat(d.scopeStyles)),d},findStyles:function(a){if(!a)return[];var b=a.querySelectorAll("style");return Array.prototype.filter.call(b,function(a){return!a.hasAttribute(A)})},applyScopeToContent:function(a,b){a&&(Array.prototype.forEach.call(a.querySelectorAll("*"),function(a){a.setAttribute(b,"")}),Array.prototype.forEach.call(a.querySelectorAll("template"),function(a){this.applyScopeToContent(a.content,b)},this))},insertDirectives:function(a){return a=this.insertPolyfillDirectivesInCssText(a),this.insertPolyfillRulesInCssText(a)},insertPolyfillDirectivesInCssText:function(a){return a=a.replace(m,function(a,b){return b.slice(0,-2)+"{"}),a.replace(n,function(a,b){return b+" {"})},insertPolyfillRulesInCssText:function(a){return a=a.replace(o,function(a,b){return b.slice(0,-1)}),a.replace(p,function(a,b,c,d){var e=a.replace(b,"").replace(c,"");return d+e})},scopeCssText:function(a,b){var c=this.extractUnscopedRulesFromCssText(a);if(a=this.insertPolyfillHostInCssText(a),a=this.convertColonHost(a),a=this.convertColonHostContext(a),a=this.convertShadowDOMSelectors(a),b){var a,d=this;g(a,function(c){a=d.scopeRules(c,b)})}return a=a+"\n"+c,a.trim()},extractUnscopedRulesFromCssText:function(a){for(var b,c="";b=q.exec(a);)c+=b[1].slice(0,-1)+"\n\n";for(;b=r.exec(a);)c+=b[0].replace(b[2],"").replace(b[1],b[3])+"\n\n";return c},convertColonHost:function(a){return this.convertColonRule(a,cssColonHostRe,this.colonHostPartReplacer)},convertColonHostContext:function(a){return this.convertColonRule(a,cssColonHostContextRe,this.colonHostContextPartReplacer)},convertColonRule:function(a,b,c){return a.replace(b,function(a,b,d,e){if(b=polyfillHostNoCombinator,d){for(var f,g=d.split(","),h=[],i=0,j=g.length;j>i&&(f=g[i]);i++)f=f.trim(),h.push(c(b,f,e));return h.join(",")}return b+e})},colonHostContextPartReplacer:function(a,b,c){return b.match(s)?this.colonHostPartReplacer(a,b,c):a+b+c+", "+b+" "+a+c},colonHostPartReplacer:function(a,b,c){return a+b.replace(s,"")+c},convertShadowDOMSelectors:function(a){for(var b=0;b","+","~"],d=a,e="["+b+"]";return c.forEach(function(a){var b=d.split(a);d=b.map(function(a){var b=a.trim().replace(polyfillHostRe,"");return b&&c.indexOf(b)<0&&b.indexOf(e)<0&&(a=b.replace(/([^:]*)(:*)(.*)/,"$1"+e+"$2$3")),a}).join(a)}),d},insertPolyfillHostInCssText:function(a){return a.replace(colonHostContextRe,t).replace(colonHostRe,s)},propertiesFromRule:function(a){var b=a.style.cssText;a.style.content&&!a.style.content.match(/['"]+|attr/)&&(b=b.replace(/content:[^;]*;/g,"content: '"+a.style.content+"';"));var c=a.style;for(var d in c)"initial"===c[d]&&(b+=d+": initial; ");return b},replaceTextInStyles:function(a,b){a&&b&&(a instanceof Array||(a=[a]),Array.prototype.forEach.call(a,function(a){a.textContent=b.call(this,a.textContent)},this))},addCssToDocument:function(a,b){a.match("@import")?i(a,b):h(a)}},l=/\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,m=/\/\*\s*@polyfill ([^*]*\*+([^/*][^*]*\*+)*\/)([^{]*?){/gim,n=/polyfill-next-selector[^}]*content\:[\s]*?['"](.*?)['"][;\s]*}([^{]*?){/gim,o=/\/\*\s@polyfill-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,p=/(polyfill-rule)[^}]*(content\:[\s]*['"](.*?)['"])[;\s]*[^}]*}/gim,q=/\/\*\s@polyfill-unscoped-rule([^*]*\*+([^/*][^*]*\*+)*)\//gim,r=/(polyfill-unscoped-rule)[^}]*(content\:[\s]*['"](.*?)['"])[;\s]*[^}]*}/gim,s="-shadowcsshost",t="-shadowcsscontext",u=")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";cssColonHostRe=new RegExp("("+s+u,"gim"),cssColonHostContextRe=new RegExp("("+t+u,"gim"),selectorReSuffix="([>\\s~+[.,{:][\\s\\S]*)?$",colonHostRe=/\:host/gim,colonHostContextRe=/\:host-context/gim,polyfillHostNoCombinator=s+"-no-combinator",polyfillHostRe=new RegExp(s,"gim"),polyfillHostContextRe=new RegExp(t,"gim"),shadowDOMSelectorsRe=[/\^\^/g,/\^/g,/\/shadow\//g,/\/shadow-deep\//g,/::shadow/g,/\/deep\//g,/::content/g];var v=document.createElement("iframe");v.style.display="none";var w,x=navigator.userAgent.match("Chrome"),y="shim-shadowdom",z="shim-shadowdom-css",A="no-shim";if(window.ShadowDOMPolyfill){h("style { display: none !important; }\n");var B=wrap(document),C=B.querySelector("head");C.insertBefore(j(),C.childNodes[0]),document.addEventListener("DOMContentLoaded",function(){var b=a.urlResolver;if(window.HTMLImports&&!HTMLImports.useNative){var c="link[rel=stylesheet]["+y+"]",d="style["+y+"]";HTMLImports.importer.documentPreloadSelectors+=","+c,HTMLImports.importer.importsPreloadSelectors+=","+c,HTMLImports.parser.documentSelectors=[HTMLImports.parser.documentSelectors,c,d].join(",");var e=HTMLImports.parser.parseGeneric;HTMLImports.parser.parseGeneric=function(a){if(!a[z]){var c=a.__importElement||a;if(!c.hasAttribute(y))return void e.call(this,a);a.__resource?(c=a.ownerDocument.createElement("style"),c.textContent=b.resolveCssText(a.__resource,a.href)):b.resolveStyle(c),c.textContent=k.shimStyle(c),c.removeAttribute(y,""),c.setAttribute(z,""),c[z]=!0,c.parentNode!==C&&(a.parentNode===C?C.replaceChild(c,a):this.addElementToDocument(c)),c.__importParsed=!0,this.markParsingComplete(a),this.parseNext()}};var f=HTMLImports.parser.hasResource;HTMLImports.parser.hasResource=function(a){return"link"===a.localName&&"stylesheet"===a.rel&&a.hasAttribute(y)?a.__resource:f.call(this,a)}}})}a.ShadowCSS=k}(window.Platform)):!function(){window.wrap=window.unwrap=function(a){return a },addEventListener("DOMContentLoaded",function(){if(CustomElements.useNative===!1){var a=Element.prototype.createShadowRoot;Element.prototype.createShadowRoot=function(){var b=a.call(this);return CustomElements.watchShadow(this),b}}}),Platform.templateContent=function(a){if(window.HTMLTemplateElement&&HTMLTemplateElement.bootstrap&&HTMLTemplateElement.bootstrap(a),!a.content&&!a._content){for(var b=document.createDocumentFragment();a.firstChild;)b.appendChild(a.firstChild);a._content=b}return a.content||a._content}}(window.Platform),function(a){"use strict";function b(a){return void 0!==m[a]}function c(){h.call(this),this._isInvalid=!0}function d(a){return""==a&&c.call(this),a.toLowerCase()}function e(a){var b=a.charCodeAt(0);return b>32&&127>b&&-1==[34,35,60,62,63,96].indexOf(b)?a:encodeURIComponent(a)}function f(a){var b=a.charCodeAt(0);return b>32&&127>b&&-1==[34,35,60,62,96].indexOf(b)?a:encodeURIComponent(a)}function g(a,g,h){function i(a){t.push(a)}var j=g||"scheme start",k=0,l="",r=!1,s=!1,t=[];a:for(;(a[k-1]!=o||0==k)&&!this._isInvalid;){var u=a[k];switch(j){case"scheme start":if(!u||!p.test(u)){if(g){i("Invalid scheme.");break a}l="",j="no scheme";continue}l+=u.toLowerCase(),j="scheme";break;case"scheme":if(u&&q.test(u))l+=u.toLowerCase();else{if(":"!=u){if(g){if(o==u)break a;i("Code point not allowed in scheme: "+u);break a}l="",k=0,j="no scheme";continue}if(this._scheme=l,l="",g)break a;b(this._scheme)&&(this._isRelative=!0),j="file"==this._scheme?"relative":this._isRelative&&h&&h._scheme==this._scheme?"relative or authority":this._isRelative?"authority first slash":"scheme data"}break;case"scheme data":"?"==u?(query="?",j="query"):"#"==u?(this._fragment="#",j="fragment"):o!=u&&" "!=u&&"\n"!=u&&"\r"!=u&&(this._schemeData+=e(u));break;case"no scheme":if(h&&b(h._scheme)){j="relative";continue}i("Missing scheme."),c.call(this);break;case"relative or authority":if("/"!=u||"/"!=a[k+1]){i("Expected /, got: "+u),j="relative";continue}j="authority ignore slashes";break;case"relative":if(this._isRelative=!0,"file"!=this._scheme&&(this._scheme=h._scheme),o==u){this._host=h._host,this._port=h._port,this._path=h._path.slice(),this._query=h._query;break a}if("/"==u||"\\"==u)"\\"==u&&i("\\ is an invalid code point."),j="relative slash";else if("?"==u)this._host=h._host,this._port=h._port,this._path=h._path.slice(),this._query="?",j="query";else{if("#"!=u){var v=a[k+1],w=a[k+2];("file"!=this._scheme||!p.test(u)||":"!=v&&"|"!=v||o!=w&&"/"!=w&&"\\"!=w&&"?"!=w&&"#"!=w)&&(this._host=h._host,this._port=h._port,this._path=h._path.slice(),this._path.pop()),j="relative path";continue}this._host=h._host,this._port=h._port,this._path=h._path.slice(),this._query=h._query,this._fragment="#",j="fragment"}break;case"relative slash":if("/"!=u&&"\\"!=u){"file"!=this._scheme&&(this._host=h._host,this._port=h._port),j="relative path";continue}"\\"==u&&i("\\ is an invalid code point."),j="file"==this._scheme?"file host":"authority ignore slashes";break;case"authority first slash":if("/"!=u){i("Expected '/', got: "+u),j="authority ignore slashes";continue}j="authority second slash";break;case"authority second slash":if(j="authority ignore slashes","/"!=u){i("Expected '/', got: "+u);continue}break;case"authority ignore slashes":if("/"!=u&&"\\"!=u){j="authority";continue}i("Expected authority, got: "+u);break;case"authority":if("@"==u){r&&(i("@ already seen."),l+="%40"),r=!0;for(var x=0;x')})}),a.createDOM=b}(window.Platform),function(a){a.templateContent=a.templateContent||function(a){return a.content}}(window.Platform),function(a){a=a||(window.Inspector={});var b;window.sinspect=function(a,d){b||(b=window.open("","ShadowDOM Inspector",null,!0),b.document.write(c),b.api={shadowize:shadowize}),f(a||wrap(document.body),d)};var c=["",""," "," ShadowDOM Inspector"," "," "," ",'
    ',"
",'
'," ",""].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 - + + @@ -11,4 +12,4 @@ if(d?f=f.toModel:"function"==typeof f.toDOM&&(f=f.toDOM),"function"!=typeof f)re - \ No newline at end of file + diff --git a/build/gui.js b/build/dat-gui.js similarity index 98% rename from build/gui.js rename to build/dat-gui.js index 5e2758e..87478c4 100755 --- a/build/gui.js +++ b/build/dat-gui.js @@ -3,7 +3,8 @@ document.write(['', -'', +'', +'', '', @@ -11,4 +12,5 @@ document.write(['', '', '', -'',].join("\n")) \ No newline at end of file +'', +'',].join("\n")) \ No newline at end of file diff --git a/build/dat-gui.shim.js b/build/dat-gui.shim.js new file mode 100644 index 0000000..123c7d6 --- /dev/null +++ b/build/dat-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/build/gui.shim.js b/build/gui.shim.js deleted file mode 100644 index ecf25f3..0000000 --- a/build/gui.shim.js +++ /dev/null @@ -1 +0,0 @@ -!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 diff --git a/gui.html b/dat-gui.html similarity index 89% rename from gui.html rename to dat-gui.html index b3789b4..17f4b7e 100644 --- a/gui.html +++ b/dat-gui.html @@ -1,6 +1,4 @@ - - - + @@ -12,4 +10,4 @@ - \ No newline at end of file + diff --git a/docs/main.js b/docs/main.js index d5aad58..198c1d1 100644 --- a/docs/main.js +++ b/docs/main.js @@ -17,9 +17,9 @@ function init() { } - + // Sticky headers -// ------------------------------- +// ------------------------------- function sticky( elements ) { @@ -54,7 +54,7 @@ function sticky( elements ) { function resize() { for ( var i = 0, l = elements.length; i < l; i++ ) { - + measure( elements[ i ] ); } @@ -64,13 +64,13 @@ function sticky( elements ) { function onScroll() { for ( var el, i = 0, l = elements.length; i < l; i++ ) { - + el = elements[ i ]; var sticky = window.scrollY > el.top && window.scrollY <= el.next.top; el.sticky.style.visibility = sticky ? 'visible' : 'hidden'; - el.example.classList.toggle( 'sticky', sticky || el.bumped ); + el.example.panel.classList.toggle( 'sticky', sticky || el.bumped ); if ( el.next ) el.next.bumped = false; @@ -86,8 +86,8 @@ function sticky( elements ) { if ( bumped ) { - el.example.classList.remove( 'sticky' ); - el.next.example.classList.add( 'sticky' ); + el.example.panel.classList.remove( 'sticky' ); + el.next.example.panel.classList.add( 'sticky' ); el.next.bumped = true; } @@ -102,7 +102,7 @@ function sticky( elements ) { // should debounce window.addEventListener( 'resize', function() { - + resize(); onScroll(); @@ -114,22 +114,22 @@ function sticky( elements ) { // Smooth scroll -(function() { +( function() { var body = document.body, timer; - window.addEventListener('scroll', function() { - + window.addEventListener( 'scroll', function() { + clearTimeout( timer ); - if ( !body.classList.contains('disable-hover') ) { - body.classList.add('disable-hover') + if ( !body.classList.contains( 'disable-hover' ) ) { + body.classList.add( 'disable-hover' ) } - timer = setTimeout(function() { - body.classList.remove('disable-hover') - }, 150); + timer = setTimeout( function() { + body.classList.remove( 'disable-hover' ) + }, 150 ); - }, false); + }, false ); -})(); +} )(); 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/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 586d39b..6723db3 100644 --- a/docs/template.html +++ b/docs/template.html @@ -6,7 +6,7 @@ dat-gui - + @@ -15,10 +15,12 @@ -
+
+ <%= contents %> +
- \ No newline at end of file + diff --git a/elements/Gui.js b/elements/Gui.js index 90f6992..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.defined = {}; - 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.define = function() { +Gui.prototype.remember = function( object ) {}; - var name, initialValue, args; +Gui.prototype.var = function() { - if ( arguments.length == 1 ) { - name = arguments[ 0 ]; - return this.defined[ name ]; - } + var name, initialValue, args; - initialValue = arguments[ 1 ]; + if ( arguments.length == 1 ) { name = arguments[ 0 ]; + return this.vars[ name ]; + } - args = [ this.defined, name ]; - args = args.concat( Array.prototype.slice.call( arguments, 2 ) ); + initialValue = arguments[ 1 ]; + name = arguments[ 0 ]; - this.defined[ 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.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-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-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-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.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-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.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-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.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/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-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/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/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 */ diff --git a/elements/shim.js b/elements/shim.js index d54cdcc..928d3e0 100644 --- a/elements/shim.js +++ b/elements/shim.js @@ -1,37 +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'; - var Gui = function() { +var Gui = function() { - this.defined = {}; + this.vars = {}; - }; +}; - Gui.ready = function( fnc ) { +Gui.ready = function( fnc ) { - fnc(); + fnc(); - }; +}; - Gui.prototype.define = function( name, value ) { +Gui.prototype.var = function( name, value ) { - this.defined[ name ] = value; - return controllerShim; + this.vars[ name ] = value; + return controllerShim; - }; +}; - Gui.prototype.add = function( object, path ) { - - return controllerShim; +Gui.prototype.add = function( object, path ) { - }; + return controllerShim; - var identity = function() { return this; }; +}; - var controllerShim = { - on: identity - }; +var identity = function() { + return this; +}; - scope.Gui = Gui; +var controllerShim = { + on: identity +}; -} )( this ); \ No newline at end of file +scope.Gui = Gui; + +})( this ); diff --git a/examples/index.html b/examples/index.html index d69c956..b58a1b6 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,13 +4,15 @@ dat-gui kitchen sink - - - - + + + - + @@ -15,7 +15,8 @@ -

dat-gui

+
+

dat-gui

dat-gui creates an interface that you can use to modify variables with very little code.

Basic Usage • Limits • @@ -25,72 +26,64 @@ Saving

Basic Usage

Download the minified library and include it in your html.

-
<script src="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();
-gui.add( object, 'numberProperty', 0, 1 ); // Slider
-gui.add( object, 'stringProperty' ); // Text box
-gui.add( object, 'booleanProperty' ); // Check box
-gui.add( object, 'functionProperty' ); // Button
-
+
var gui = new Gui();
+gui.add( object, 'numberProperty', 0, 1 ); // Slider
+gui.add( object, 'stringProperty' ); // Text box
+gui.add( object, 'booleanProperty' ); // Check box
+gui.add( object, 'functionProperty' ); // Button

Limits

You can specify limits on numbers. A number with a min and max value becomes a slider.

-
gui.add( text, 'growthSpeed', -5, 5 ); // Min and max
-gui.add( text, 'noiseStrength' ).step( 5 ); // Increment amount
-gui.add( text, 'maxSize' ).min( 0 ).step( 0.25 ); // Mix and match
-
+
gui.add( text, 'growthSpeed', -5, 5 ); // Min and max
+gui.add( text, 'noiseStrength' ).step( 5 ); // Increment amount
+gui.add( text, 'maxSize' ).min( 0 ).step( 0.25 ); // Mix and match

You can also provide a list of accepted values for a dropdown.

-
// Choose from accepted values
-gui.add( text, 'message', [ 'pizza', 'chrome', 'hooray' ] );
+
// Choose from accepted values
+gui.add( text, 'message', [ 'pizza', 'chrome', 'hooray' ] );
 
-// Choose from named values
-gui.add( text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );
-

+// Choose from named values
+gui.add( text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } );

Colors

dat-gui has a color selector and understands many different representations of color. The following creates color controllers for color variables of different formats.

-
text.color0 = "#ffae23"; // CSS string
-text.color1 = [ 0, 128, 255 ]; // RGB array
-text.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
-text.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
+
text.color0 = "#ffae23"; // CSS string
+text.color1 = [ 0, 128, 255 ]; // RGB array
+text.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
+text.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value
 
 var gui = new Gui();
 
-gui.addColor(text, 'color0');
-gui.addColor(text, 'color1');
-gui.addColor(text, 'color2');
-gui.addColor(text, 'color3');
-

+gui.addColor(text, 'color0');
+gui.addColor(text, 'color1');
+gui.addColor(text, 'color2');
+gui.addColor(text, 'color3');

Events

You can listen for events on individual controllers using an event listener syntax.

-
var controller = gui.add(fizzyText, 'maxSize', 0, 10);
+
var controller = gui.add(fizzyText, 'maxSize', 0, 10);
 
-controller.onChange(function(value) {
-  // Fires on every change, drag, keypress, etc.
+controller.onChange(function(value) {
+  // Fires on every change, drag, keypress, etc.
 });
 
-controller.onFinishChange(function(value) {
-  // Fires when a controller loses focus.
-  alert("The new value is " + value);
-});
-

+controller.onFinishChange(function(value) {
+  // Fires when a controller loses focus.
+  alert("The new value is " + value);
+});

Folders

You can nest as many dat-gui as you want. Nested dat-gui act as collapsible folders.

-
var gui = new Gui();
+
var gui = new Gui();
 
-var f1 = gui.addFolder('Flow Field');
-f1.add(text, 'speed');
-f1.add(text, 'noiseStrength');
+var f1 = gui.addFolder('Flow Field');
+f1.add(text, 'speed');
+f1.add(text, 'noiseStrength');
 
-var f2 = gui.addFolder('Letters');
-f2.add(text, 'growthSpeed');
-f2.add(text, 'maxSize');
+var f2 = gui.addFolder('Letters');
+f2.add(text, 'growthSpeed');
+f2.add(text, 'maxSize');
 
-f2.open();
-

+f2.open();

The comment method adds a tooltip to a controller.

-
f2.add(text, 'message').comment( 'This is the comment.' );
-
+
f2.add(text, 'message').comment( 'This is the comment.' );

Saving

Add a save menu to the interface by calling gui.remember on all the objects you've added to the Gui.

var fizzyText = new FizzyText();
@@ -98,59 +91,52 @@ var gui = new Gui();
 
 gui.remember(fizzyText);
 
-// Add controllers ...
-
+// Add controllers ...

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,41 +144,38 @@ 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>
+
- \ No newline at end of file + diff --git a/package.json b/package.json index 2898a14..e0ec08f 100644 --- a/package.json +++ b/package.json @@ -3,26 +3,30 @@ "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" } } diff --git a/tests/test.gui.js b/tests/test.gui.js index c320f64..2e1c6c5 100644 --- a/tests/test.gui.js +++ b/tests/test.gui.js @@ -32,7 +32,7 @@ describe( 'Gui', function() { expectController( 'dat-gui-number', 1234 ); expectController( 'dat-gui-string', 'string value' ); - expectController( 'dat-gui-function', function(){} ); + expectController( 'dat-gui-function', function() {} ); expectController( 'dat-gui-boolean', true ); expectController( 'dat-gui-option', 'hey', [ 'hey', 'hi', 'ho' ] ); @@ -51,7 +51,7 @@ describe( 'Gui', function() { function expectController( controllerType, value ) { - + var gui = new Gui(); // test using gui.add @@ -66,7 +66,7 @@ describe( 'Gui', function() { var controller = gui.add.apply( gui, args ); expect( controller.nodeName.toLowerCase() ).toBe( controllerType ); - + // test using gui.anon var gui = new Gui(); @@ -75,9 +75,9 @@ describe( 'Gui', function() { args.unshift( value ); args.unshift( 'name' ); - controller = gui.define.apply( gui, args ); + controller = gui.var.apply( gui, args ); expect( controller.nodeName.toLowerCase() ).toBe( controllerType ); } -} ); \ No newline at end of file +} );