Merge branch 'feature/issue-16' into develop

Author: budnix

README.md

@@ -23,7 +23,7 @@ Or [download as ZIP](https://github.com/handsontable/hot-table/archive/gh-pages.
 1. Import Web Components' polyfill:
 
     ```html
-    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
+    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
     ```
 
 2. Import Custom Element:

bower.json

@@ -3,7 +3,7 @@
   "version": "0.1.8",
   "description": "Polymer Element wrapper for Handsontable data grid editor",
   "license": "MIT",
-  "main": "src/hot-table.html",
+  "main": "hot-table.html",
   "keywords": [
     "polymer",
     "web-components",
@@ -21,10 +21,10 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.6",
-    "handsontable": "~0.15.0-beta6"
+    "polymer": "Polymer/polymer#^1.0.0",
+    "handsontable": "~0.16.1"
   },
   "devDependencies": {
-    "google-map": "GoogleWebComponents/google-map#~0.4.1"
+    "google-map": "GoogleWebComponents/google-map#^1.0.0"
   }
 }

examples/components/age-renderer.html

@@ -1,9 +1,6 @@
 
 <template id="template">
   <style>
-    :host {
-      white-space: normal;
-    }
     #message {
       color: green;
     }

examples/components/age-renderer.js

@@ -1,5 +1,9 @@
 (function() {
 
+  if (!Handsontable.helper.isWebComponentSupportedNatively()) {
+    return;
+  }
+
   var
     owner = (document._currentScript || document.currentScript).ownerDocument;
 
@@ -15,7 +19,7 @@
   });
 
   /**
-   * On create custom element
+   * On create custom element.
    */
   AgeRenderer.prototype.createdCallback = function() {
     this.shadow = this.createShadowRoot();
@@ -24,7 +28,14 @@
   };
 
   /**
-   * Render element
+   * On attached to the DOM custom element.
+   */
+  AgeRenderer.prototype.attachedCallback = function() {
+    this.updateAge(this.age);
+  };
+
+  /**
+   * Render element.
    */
   AgeRenderer.prototype.updateAge = function(age) {
     var desc = this.holder.querySelector('#message');

examples/components/bold-renderer.html

@@ -2,17 +2,17 @@
 <!-- Import Polymer -->
 <link rel="import" href="../../../polymer/polymer.html">
 
-<polymer-element name="bold-renderer" constructor="BoldRenderer">
+<dom-module id="bold-renderer">
+  <style>
+    :host {
+      white-space: normal;
+    }
+    .bold-value {
+      font-weight: bold;
+    }
+  </style>
   <template>
-    <style>
-      :host {
-       white-space: normal;
-      }
-      span {
-        font-weight: bold;
-      }
-    </style>
     <span class="bold-value">{{ value }}</span>
   </template>
   <script src="bold-renderer.js"></script>
-</polymer-element>
+</dom-module>

examples/components/bold-renderer.js

@@ -1,9 +1,11 @@
 (function () {
 
-  Polymer('bold-renderer', {
-    attributeChanged: function(attrName, oldVal, newVal) {
-      if (attrName === 'value') {
-        this.value = newVal;
+  Polymer({
+    is: 'bold-renderer',
+
+    properties: {
+      value: {
+        type: String
       }
     }
   });

examples/components/colored-renderer.html

@@ -2,14 +2,14 @@
 <!-- Import Polymer -->
 <link rel="import" href="../../../polymer/polymer.html">
 
-<polymer-element name="colored-renderer" constructor="ColoredRenderer">
+<dom-module id="colored-renderer">
+  <style>
+    :host {
+      white-space: normal;
+    }
+  </style>
   <template>
-    <style>
-      :host {
-        white-space: normal;
-      }
-    </style>
-    <template repeat="{{ v, i in splitedValue }}"><span style="color: {{ i % 2 ? 'red' : 'green' }}">{{ v }}</span></template>
+    <template is="dom-repeat" items="{{ splitedValue }}" as="v" index-as="i"><span style$="{{computeStyle(i)}}">{{ v }}</span></template>
   </template>
   <script src="colored-renderer.js"></script>
-</polymer-element>
+</dom-module>

examples/components/colored-renderer.js

@@ -1,19 +1,28 @@
 (function () {
 
-  Polymer('colored-renderer', {
-    attributeChanged: function(attrName, oldVal, newVal) {
-      if (attrName === 'value') {
-        this.splitValue(newVal);
+  Polymer({
+    is: 'colored-renderer',
+
+    properties: {
+      value: {
+        type: String,
+        observer: '_onChanged'
       }
     },
 
     /**
      * Split string into array
      */
-    splitValue: function(value) {
-      if (value) {
-        this.splitedValue = value.split('');
-      }
+    splitValue: function (value) {
+      this.splitedValue = typeof value === 'string' ? value.split('') : [];
+    },
+
+    computeStyle: function(i) {
+      return 'color: ' + (i % 2 ? 'red' : 'green');
+    },
+
+    _onChanged: function(value) {
+      this.splitValue(value);
     }
   });