diff --git a/README.md b/README.md index 28fad05..4d30a63 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,13 @@ dat-gui creates an interface that you can use to modify variables with very little code. +[ Basic Usage ]( #basic-usage ) • +[ Limits ]( #limits ) • +[ Colors ]( #colors ) • +[ Events ]( #events ) • +[ Folders ]( #folders ) • +[ Saving ]( #saving ) + ### Basic Usage Download the [minified library]( todo ) and include it in your html. @@ -20,7 +27,7 @@ gui.add( object, 'booleanProperty' ); // Check box gui.add( object, 'functionProperty' ); // Button ``` -### Limiting Input +### Limits You can specify limits on numbers. A number with a min and max value becomes a slider. @@ -40,7 +47,7 @@ gui.add( text, 'message', [ 'pizza', 'chrome', 'hooray' ] ); gui.add( text, 'speed', { Stopped: 0, Slow: 0.1, Fast: 5 } ); ``` -### Color Controllers +### 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. @@ -77,7 +84,7 @@ controller.onFinishChange(function(value) { }); ``` -### Folders & Comments +### Folders You can nest as many dat-gui as you want. Nested dat-gui act as collapsible folders. @@ -101,7 +108,7 @@ The comment method adds a tooltip to a controller. f2.add(text, 'message').comment( 'This is the comment.' ); ``` -### Saving Values +### Saving Add a save menu to the interface by calling `gui.remember` on all the objects you've added to the Gui. diff --git a/TODO b/TODO index fb44361..5fb1956 100644 --- a/TODO +++ b/TODO @@ -1,10 +1,37 @@ +BUILD + +- [x] single import + +DOCS + +- [ ] table of contents ( is going to be really long ) + +STYLE + +- [ ] sharing more styles +- [ ] css linter? + +- [ ] touch styles: bigger please! +- [ ] kill hover behavior if touch + +CLEANLINESS + - [ ] can gui-row be baked into base-controller somehow? +- [ ] strip component-slider from number-controller +- [ ] strip component-input from number-controller, unify with string-controller + +PARITY - [ ] folders - - [ ] function controller - [ ] color controller - - [x] string controller - [x] boolean controller + +- [ ] remember + - [ ] presets + +NEW FEATURES + +- [ ] save server \ No newline at end of file diff --git a/build/gui.html b/build/gui.html index f4dd94c..81c2844 100644 --- a/build/gui.html +++ b/build/gui.html @@ -10,11 +10,11 @@ var e,f,g,h=b.type;if("load"===h&&!b.bubbles){var i=c;i instanceof Q.Document&&( +},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}(); - - + + \ No newline at end of file diff --git a/build/gui.js b/build/gui.js index 18aa86b..35f1233 100644 --- a/build/gui.js +++ b/build/gui.js @@ -10,11 +10,11 @@ document.write(['', +'},_register:function(){c(this.extends)&&!b(this.extends)&&console.warn("%s is attempting to extend %s, an unregistered element or one that was not registered with Polymer.",this.name,this.extends),this.register(this.name,this.extends),this.registered=!0},waitingForPrototype:function(a){return h(a)?void 0:(i(a,this),this.handleNoScript(a),!0)},handleNoScript:function(a){this.hasAttribute("noscript")&&!this.noscript&&(this.noscript=!0,Polymer(a))},waitingForResources:function(){return this._needsResources},waitingForQueue:function(){return f.enqueue(this,this.registerWhenReady,this._register)},loadResources:function(){this._needsResources=!0,this.loadStyles(function(){this._needsResources=!1,this.registerWhenReady()}.bind(this))}});e.publish(e.declaration,j),g(function(){document.body.removeAttribute("unresolved"),document.dispatchEvent(new CustomEvent("polymer-ready",{bubbles:!0}))}),document.registerElement("polymer-element",{prototype:j})}(Polymer),function(){var a=document.createElement("polymer-element");a.setAttribute("name","auto-binding"),a.setAttribute("extends","template"),a.init(),Polymer("auto-binding",{createdCallback:function(){this.syntax=this.bindingDelegate=this.makeSyntax(),Polymer.whenPolymerReady(function(){this.model=this,this.setAttribute("bind",""),this.async(function(){this.marshalNodeReferences(this.parentNode),this.fire("template-bound")})}.bind(this))},makeSyntax:function(){var a=Object.create(Polymer.api.declaration.events),b=this;a.findController=function(){return b.model};var c=new PolymerExpressions,d=c.prepareBinding;return c.prepareBinding=function(b,e,f){return a.prepareEventBinding(b,e,f)||d.call(c,b,e,f)},c}})}();', '', '', '', -'', -'', +'', +'', '', '',].join("\n")) \ No newline at end of file diff --git a/elements/controller-function/controller-function.html b/elements/controller-function/controller-function.html index 8d40c71..21886fa 100644 --- a/elements/controller-function/controller-function.html +++ b/elements/controller-function/controller-function.html @@ -12,8 +12,7 @@ -
-
+
diff --git a/elements/controller-number/controller-number.html b/elements/controller-number/controller-number.html index a327746..614dcf8 100644 --- a/elements/controller-number/controller-number.html +++ b/elements/controller-number/controller-number.html @@ -40,9 +40,9 @@ on-keydown="{{ keydown }}" on-blur="{{ blur }}" id="input"> - - - + + + \ No newline at end of file diff --git a/elements/controller-number/controller-number.styl b/elements/controller-number/controller-number.styl index 3ae9652..7f75c43 100644 --- a/elements/controller-number/controller-number.styl +++ b/elements/controller-number/controller-number.styl @@ -74,13 +74,13 @@ input { .slider-true & { text-align: center; - width: 25%; + width: 33%; transition: width 0.2s ease; padding: 0; &:hover { - width: 33%; + width: 40%; } &:focus { diff --git a/elements/gui-panel/gui-panel.js b/elements/gui-panel/gui-panel.js index afde1c4..f1d8ca3 100644 --- a/elements/gui-panel/gui-panel.js +++ b/elements/gui-panel/gui-panel.js @@ -1,8 +1,5 @@ -/* - -[ ] kill horizontal scroll when docked - -*/ +// [ ] scrolling when docked +// [ ] scrolling when window short and not docked Polymer('gui-panel', { diff --git a/elements/gui-row/gui-row.styl b/elements/gui-row/gui-row.styl index 3838cc0..d3c02d9 100644 --- a/elements/gui-row/gui-row.styl +++ b/elements/gui-row/gui-row.styl @@ -1,6 +1,5 @@ @import '../shared'; - :host { panel-font() @@ -11,7 +10,7 @@ debug( blue ) - height: min-row-height; + height: row-height; transition: background-color 0.2s linear; border-bottom: 1px solid lighter; @@ -41,12 +40,9 @@ debug( red ); - overflow: hidden; text-overflow: ellipsis; // word-wrap: break-word; - - } diff --git a/elements/shared.styl b/elements/shared.styl index 36c8e23..b101093 100644 --- a/elements/shared.styl +++ b/elements/shared.styl @@ -12,10 +12,12 @@ debug( color ) // constants panel-width = 245px -min-row-height = 30px + +row-height = 29px +// row-height-touch = 44px font-color = #ECEBE0 -panel-color = #1E1E1E +panel-color = rgba( 30, 30, 30, 0.95 ); number-color = #25A0D8 boolean-color = #864694 @@ -31,7 +33,7 @@ ease = cubic-bezier( .25, .25, 0, 1 ) // common panel-font( color = font-color ) - font: 11px 'Lucida Grande', sans-serif; + font: 10px 'Lucida Grande', sans-serif; color: color; if ( color == font-color ) -webkit-font-smoothing: antialiased; diff --git a/examples/index.html b/examples/index.html index 4350897..c66fac5 100644 --- a/examples/index.html +++ b/examples/index.html @@ -5,15 +5,9 @@ dat-gui kitchen sink - - - - - - - +