production ready

Zecat · Zecat · commit 74c135549330 · 2016-01-15T10:57:18.000+01:00
improve demo, update doc, bower.json, todo list &amp; noImageText attribute
diff --git a/README.md b/README.md
@@ -1,61 +1,22 @@
 # paper-input-image
 
-An element providing a starting point for your own reusable Polymer elements.
-
-
-## Dependencies
-
-Element dependencies are managed via [Bower](http://bower.io/). You can
-install that via:
-
-    npm install -g bower
-
-Then, go ahead and download the element's dependencies:
-
-    bower install
-
-
-## Playing With Your Element
-
-If you wish to work on your element in isolation, we recommend that you use
-[Polyserve](https://github.com/PolymerLabs/polyserve) to keep your element's
-bower dependencies in line. You can install it via:
-
-    npm install -g polyserve
-
-And you can run it via:
-
-    polyserve
-
-Once running, you can preview your element at
-`http://localhost:8080/components/paper-input-image/`, where `paper-input-image` is the name of the directory containing it.
-
-
-## Testing Your Element
-
-Simply navigate to the `/test` directory of your element to run its tests. If
-you are using Polyserve: `http://localhost:8080/components/paper-input-image/test/`
-
-### web-component-tester
-
-The tests are compatible with [web-component-tester](https://github.com/Polymer/web-component-tester).
-Install it via:
-
-    npm install -g web-component-tester
-
-Then, you can run your tests on _all_ of your local browsers via:
-
-    wct
-
-#### WCT Tips
-
-`wct -l chrome` will only run tests in chrome.
-
-`wct -p` will keep the browsers alive after test runs (refresh to re-run).
-
-`wct test/some-file.html` will test only the files you specify.
-
-
-## Yeoman support
-
-If you'd like to use Yeoman to scaffold your element that's possible. The official [`generator-polymer`](https://github.com/yeoman/generator-polymer) generator has a [`seed`](https://github.com/yeoman/generator-polymer#seed) subgenerator.
+A material input type image.
+
+## [Demo & Doc](http://zecat.github.io/paper-input-image)
+
+## Installation
+
+```
+	bower install --save Zecat/paper-input-image
+```
+
+TODO : 
+- paper-tile should provide placeholder image
+- paper-tile should provide loading spinner
+- remove dependency from paper-tile
+- add nameable attribute for rename feature using paper-input-rename
+- add event system
+- attr to convert the size unity on demande (iron-input-image's missing feature)
+- add tests
+- add responsive interaction (ripple)
+- add mixins & vars
diff --git a/bower.json b/bower.json
@@ -1,27 +1,27 @@
 {
   "name": "paper-input-image",
-  "version": "1.0.3",
+  "version": "1.0.0",
   "authors": [
-    "Anonymous <anonymous@example.com>"
+    "Zecat <jullienfelix@gmail.com>"
   ],
-  "description": "An element providing a solution to no problem in particular.",
+  "description": "A material input type image",
   "keywords": [
     "web-component",
     "polymer",
     "seed"
   ],
   "main": "paper-input-image.html",
   "license": "http://polymer.github.io/LICENSE.txt",
-  "homepage": "https://github.com/<USERNAME>/seed-element/",
+  "homepage": "https://github.com/zecat/paper-input-image/",
   "ignore": [
     "/.*",
     "/test/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.1.0",
-    "iron-input-image": "https://github.com/Zecat/iron-input-image.git#master",
-    "paper-tile": "https://github.com/Zecat/paper-tile.git#master",
-    "iron-icons": "PolymerElements/iron-icons#~1.0.5"
+    "polymer": "Polymer/polymer#^1.2.0",
+    "iron-input-image": "Zecat/iron-input-image#~1.0.0",
+    "paper-tile": "Zecat/paper-tile#~1.0.1",
+    "iron-icons": "PolymerElements/iron-icons#~1.1.1"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/demo/index.html b/demo/index.html
@@ -22,6 +22,9 @@
   <body unresolved>
 
     <style is="custom-style" include="demo-pages-shared-styles">
+      .vertical-section-container {
+        max-width: 500px;
+      }
     </style>
 
     <div class="vertical-section-container centered">
@@ -33,7 +36,8 @@
               height: 300px;
             }
           </style>
-          <paper-input-image></paper-input-image>
+          <paper-input-image no-image-text="Click to select an image">
+          </paper-input-image>
         </template>
       </demo-snippet>
     </div>
diff --git a/paper-input-image.html b/paper-input-image.html
@@ -11,7 +11,7 @@
 
     <paper-input-image></paper-input-image>
 
-@group Seed Elements
+@group Paper Elements
 @element paper-input-image
 @demo demo/index.html
 @hero hero.svg
@@ -56,27 +56,51 @@
     is: 'paper-input-image',
 
     properties: {
-      title: {
+      /**
+       * The text displayed when no image is selected.
+       */
+      noImageText: {
         type: String,
         value: 'No image selected'
       },
+      /**
+       * The image src.
+       */
       src: {
         type: String,
         value: ''
       },
+      /**
+       * The size of the selected image (ko).
+       */
       size: {
         type: Number,
         value: 0
+      },
+      /**
+       * The text displayed. Equales to noImageText if no image is selected and 
+       * updates from the image file's title when a new one is selected.
+       */
+      title: {
+        type: String
       }
     },
 
+    attached: function() {
+      this.title = this.noImageText;
+    },
+    /**
+     * Choose a new image from the user disk.
+     */
     choose: function() {
       this.$.inputImage.choose();
     },
-
+    /**
+     * Remove the selected image.
+     */
     clear: function() {
       this.$.inputImage.clear();
-      this.title = 'No image selected';
+      this.title = this.noImageText;
     },
 
     _computeIcon: function(src) {
