doc & demo love

David-Mulder · Dec 7, 2015 · 72b7c86 · 72b7c86
1 parent 7d383d6
commit 72b7c86
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 49 deletions.
diff --git a/demo/demo.html → demo/index.html b/demo/demo.html → demo/index.html
@@ -45,10 +45,18 @@
 <body unresolved>
 
   <section>
-    <a href="../index.html">Back</a>
-    <h1>Standalone</h1>
+    <h1><code>&lt;paper-color-input&gt;</code></h1>
+    <div style="width: 300px;">
+      <paper-color-input label="Pick a color..."></paper-color-input>
+      <paper-color-input value='{"red":255,"green":155,"blue":55}' label="My favourite color"></paper-color-input>
+      <paper-color-input value='{"red":255,"green":155,"blue":55}' shape="huebox" label="Color with hue picker"></paper-color-input>
+      <paper-color-input value='{"red":0,"green":255,"blue":0}' shape="huebox" label="Color with hue picker"></paper-color-input>
+      <paper-color-input value='{"red":12,"green":34,"blue":56}' shape="square" label="Color with square picker"></paper-color-input>
+    </div>
+  </section>
 
-    <br>
+  <section>
+    <h1><code>&lt;paper-color-circle&gt;</code></h1>
 
     <paper-color-circle style="margin:20px;"></paper-color-circle>
     <paper-color-circle style="margin:20px;" type="hsl"></paper-color-circle><br />
@@ -60,18 +68,7 @@ <h1>Standalone</h1>
   </section>
 
   <section>
-    <h1><code>&lt;paper-color-input&gt;</code></h1>
-    <div style="width: 300px;">
-      <paper-color-input></paper-color-input>
-      <paper-color-input value='{"red":255,"green":155,"blue":55}'></paper-color-input>
-      <paper-color-input value='{"red":255,"green":155,"blue":55}' shape="huebox" label="Color with hue picker"></paper-color-input>
-      <paper-color-input value='{"red":0,"green":255,"blue":0}' shape="huebox" label="Color with hue picker"></paper-color-input>
-      <paper-color-input value='{"red":12,"green":34,"blue":56}' shape="square" label="Color with square picker"></paper-color-input>
-    </div>
-  </section>
-
-  <section>
-    <h1>Dialog</h1>
+    <h1><code>&lt;paper-color-picker&gt;</code></h1>
 
     <br>
 

diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
 </head>
 <body>
 
-  <iron-component-page></iron-component-page>
+  <iron-component-page src="paper-color-input.html"></iron-component-page>
 
 </body>
 </html>
diff --git a/paper-color-circle.html b/paper-color-circle.html
@@ -127,7 +127,7 @@
            * @type boolean
            * @default false
            */
-          AAborder: {
+          AaBorder: {
             type: Boolean,
             value: true,
             notify: true
@@ -154,7 +154,7 @@
             type: Number,
             value: 0
           },
-          _setAAborder: {
+          _setAaBorder: {
             value: function(){
               return undefined;
             }
@@ -283,14 +283,14 @@
           }
         },
         onDown: function(e){
-          this._setAAborder = this.AAborder;
+          this._setAaBorder = this.AaBorder;
           this.pickColor(e, true);
           this._down = true;
         },
         onMove: function(e){
           if(!this._moveStart){
-            if(this._setAAborder && this._down){
-              this.AAborder = false;
+            if(this._setAaBorder && this._down){
+              this.AaBorder = false;
               this.pickColor(e, true);
             } else {
               this.pickColor(e, false);
@@ -303,8 +303,8 @@
         onUp: function(e){
           this._down = false;
           if(this._moveStart){
-            if(this._setAAborder){
-              this.AAborder = this._setAAborder;
+            if(this._setAaBorder){
+              this.AaBorder = this._setAaBorder;
               this.redraw();
             }
             this._moveStart = false;
@@ -397,7 +397,7 @@
             };
           };
           this._ctx.putImageData(bitmap, 0, 0);
-          if(this.AAborder && this.shape === 'circle'){
+          if(this.AaBorder && this.shape === 'circle'){
             //Getting a nice anti aliased edge using canvas is hard, so instead a white circle is draw over the border
             this.drawAACircle();
           }

diff --git a/paper-color-input.html b/paper-color-input.html
@@ -4,9 +4,22 @@
 <link rel="import" href="./paper-color-picker.html">
 
 <!--
+This component contains 3 elements:
+
+ - `<paper-color-circle>` : An element drawing a color space onto a canvas
+ - `<paper-color-picker>` : An element containing a material design picker dialog for colors
+ - `<paper-color-input>` : An element that displays an input that allows changing of the color through a color picker dialog.
+
+Shape and colour spaces
+---
+There are three different main configurations all 3 elements allow: `circle`, `square`
+ or `huebox`. This is called the `[shape]` of the color circle. Additionally in the case of `circle` and `square` it can
+  be specified whether the colours should be generated from the `hsv` or `hsl` colour space.
+
+    <paper-color-input shape="square" type="hsl"></paper-color-input>
+
 
 @demo demo/index.html
-@hero hero.svg
 -->
 
 <dom-module id="paper-color-input">
@@ -28,6 +41,9 @@
 				transform-origin: 0px 0px;
 				transform: translateY(15.5px) rotate(-45deg);
 			}
+			#input{
+				cursor: pointer;
+			}
 		</style>
 		<paper-input-container id="input" always-float-label="{{_isValueDefined(value.*)}}">
 			<label>{{label}}</label>
@@ -45,14 +61,35 @@
 		Polymer({
 			is: 'paper-color-input',
 			properties: {
+				/**
+				 * The currently picked color. This is an object with a `red`, `green` and `blue` property.
+				 *
+				 * @attribute label
+				 * @type String
+				 * @default ''
+				 */
 				value: {
 					type: Object,
 					notify: true
 				},
+				/**
+				 * The label for this input.
+				 *
+				 * @attribute label
+				 * @type String
+				 * @default ''
+				 */
 				label: {
 					type: String,
-					value: 'Color'
+					value: ''
 				},
+				/**
+				 * The name of the colour as shown in the input field
+				 *
+				 * @attribute color-name
+				 * @type String
+				 * @default ''
+				 */
 				colorName: String,
 
 				/**

diff --git a/paper-color-picker.html b/paper-color-picker.html
@@ -1,6 +1,4 @@
 <!--
-Copyright (c) 2014 David Mulder
---><!--
 
 Material Design: Color picker inspired by <a href="http://www.google.com/design/spec/components/pickers.html">Material Design Pickers</a>
 
@@ -14,21 +12,7 @@
 
     this.$.picker.open();
 
-Demo
----
-For a complete demo click here: <a href="demo/demo.html">Demo</a>
-
-Shape and colours
----
-There are three different main configurations the dialog allows, `circle`, `square`
- or `huebox`. Additionally in the case of `circle` and `square` it can be specified
- whether the colours should be generated from the `hsv` or `hsl` colour space.
- 
-    <paper-color-picker shape="square" type="hsl"></paper-color-picker>
-
-@group Paper Elements
-@element paper-color-picker
-@homepage github.io
+@demo demo/index.html
 -->
 <html>
 <head>
@@ -196,29 +180,29 @@
       <div id="details">
         <template is="dom-if" if="{{_showValueSlider(shape, type)}}">
           <paper-input-container attr-for-value="immediate-value">
-            <label>Value (Brightness):</label>
+            <label>Value (Brightness)</label>
             <paper-slider id="valueSlider" class="paper-input-input" min="0" max="100" pin="true" value="100" immediate-value="{{sliderValue}}"></paper-slider>
           </paper-input-container>
         </template>
         <template is="dom-if" if="{{_showLightnessSlider(shape, type)}}">
           <paper-input-container attr-for-value="immediate-value">
-            <label>Lightness:</label>
+            <label>Lightness</label>
             <paper-slider id="lightnessSlider" class="paper-input-input" min="0" max="100" pin="true" value="50" immediate-value="{{sliderLightness}}"></paper-slider>
           </paper-input-container>
         </template>
         <template is="dom-if" if="{{_showHuePicker(shape)}}">
           <paper-input-container attr-for-value="id">
-            <label>Hue:</label>
+            <label>Hue</label>
             <canvas id="huePicker" class="paper-input-input" on-tap="huePickerPickColor" width="360" height="1"></canvas>
           </paper-input-container>
           <!--<paper-slider id="hueSlider" min="0" max="100" value="50" immediate-value="{{sliderHue}}"></paper-slider>-->
         </template>
 
         <div hidden$="{{!advanced}}">
           <!--<div class="landscapeOnly">-->
-            <paper-input id="redField" value="{{immediateColor.red}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Red:"></paper-input>
-            <paper-input id="greenField" value="{{immediateColor.green}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Green:"></paper-input>
-            <paper-input id="blueField" value="{{immediateColor.blue}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Blue:"></paper-input>
+            <paper-input id="redField" value="{{immediateColor.red}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Red"></paper-input>
+            <paper-input id="greenField" value="{{immediateColor.green}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Green"></paper-input>
+            <paper-input id="blueField" value="{{immediateColor.blue}}" on-input="changeColorMixture" type="number" min="0" max="255" label="Blue"></paper-input>
           <!--</div>-->
         </div>
       </div>