feat(): Login to fill points

bytelovers · Dec 16, 2016 · f463c2c · f463c2c
1 parent 2b43050
commit f463c2c
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/key-pad.js b/key-pad.js
@@ -46,7 +46,8 @@ Polymer({
         model: {
             type: String,
             readOnly: true,
-            value: ''
+            value: '',
+            observer: '_modelObserver'
         },
 
         /**
@@ -89,10 +90,9 @@ Polymer({
         return new Array(this.maxLength);
     },
 
-    _fillPoints: function() {
-        //TODO
-        //Add class to points to fill
-
+    // Observer
+    _modelObserver: function() {
+        this._computeClassFillPoints();
     },
 
     // Compute clases
@@ -101,6 +101,22 @@ Polymer({
         return 'key-pad__point key-pad__point--' + idx.toString();
     },
 
+    _computeClassFillPoints: function() {
+        var points = Polymer.dom(this.root).querySelectorAll('.key-pad__point');
+        var selectedClass = 'key-pad__point--selected';
+        var modelLen = this.model.length;
+
+        points.map(function(point, index) {
+            if (index < modelLen) {
+                point.classList.add(selectedClass);
+            } else {
+                point.classList.remove(selectedClass);
+            }
+        });
+
+        this.updateStyles();
+    },
+
     ////// EVENTS
     _onKeypadKey: function(evt, detail) {
         //TODO: Check characters