feat(): Added link events

bytelovers · Dec 16, 2016 · e6e91db · e6e91db
1 parent 7c447d3
commit e6e91db
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 114 deletions.
diff --git a/bower.json b/bower.json
@@ -5,7 +5,8 @@
   "dependencies": {
     "polymer": "Polymer/polymer#^1.4.0",
     "iron-flex-layout": "^1.3.1",
-    "iron-icons": "^1.2.0"
+    "iron-icons": "^1.2.0",
+    "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.1.9"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

diff --git a/demo/index.html b/demo/index.html
@@ -22,7 +22,7 @@ <h3>Basic key-pad demo</h3>
       <demo-snippet>
         <template>
 
-          <key-pad shuffle>
+          <key-pad>
           </key-pad>
 
         </template>

diff --git a/key-pad-key-styles.html b/key-pad-key-styles.html
@@ -5,11 +5,6 @@
 
             }
 
-            .key-pad-key__keyNums {
-                @apply(--layout);
-                @apply(--layout-wrap);
-            }
-
             .key-pad-key__keyNum {
                 flex: 1 0 33.3%;
                 @apply(--layout);
@@ -25,14 +20,15 @@
                 border: 1px solid #CCC;
                 border-radius: 50%;
                 text-align: center;
-                margin: 10px 0;
-                padding: 30px 0;
+                height: 75px;
                 width: 75px;
+                @apply(--layout;
+                @apply(--layout-center-center);
             }
-                .key-pad-key__keyNum:nth-of-type(10) .key-pad-key__keyNum-content {
+/*                .key-pad-key__keyNum:nth-of-type(10) .key-pad-key__keyNum-content {
                     margin-right: 20px;
                 }
-
+*/
                 .key-pad-key__keyNum-content:hover {
                     cursor: pointer;
                     background-color: #CCC;

diff --git a/key-pad-key.html b/key-pad-key.html
@@ -15,34 +15,9 @@
         <div class$="key-pad-key__keyNum key-pad-key__[[ label ]]"
              on-tap="_onTapKey">
             <div class="key-pad-key__keyNum-content">
-                [[ label ]]
+                <span>[[ label ]]</span>
             </div>
         </div>
     </template>
-
-    <script>
-        'use strict';
-
-        Polymer({
-            is: 'key-pad-key',
-            properties: {
-                key: {
-                    type: String
-                },
-                label: {
-                    type: String
-                }
-            },
-            ready: function() {
-                if (!this.label) {
-                    this.set('label', this.key);
-                }
-            },
-
-            _onTapKey: function(evt) {
-                this.fire('key-pad-key.key', evt.model.key);
-                console.log('key-pad-key.key', evt.model.key);
-            }
-        })
-    </script>
+    <script src="key-pad-key.js"></script>
 </dom-module>
diff --git a/key-pad-key.js b/key-pad-key.js
@@ -0,0 +1,26 @@
+'use strict';
+
+Polymer({
+    is: 'key-pad-key',
+    properties: {
+        key: {
+            type: String
+        },
+        label: {
+            type: String
+        }
+    },
+
+    attached: function() {
+        if (!this.label) {
+            this.set('label', this.key);
+        }
+
+        this.updateStyles();
+    },
+
+    _onTapKey: function(evt) {
+        this.fire('key-pad-key:key', this.key);
+        console.log('key-pad-key:key', this.key);
+    }
+});
diff --git a/key-pad-styles.html b/key-pad-styles.html
@@ -35,34 +35,6 @@
                 @apply(--layout);
                 @apply(--layout-wrap);
             }
-
-            .key-pad__keyNum {
-                flex: 1 0 33.3%;
-                @apply(--layout);
-                @apply(--layout-center-justified);
-            }
-
-            .key-pad__keyNum:nth-of-type(10) {
-                flex-basis: 66.6%;
-                @apply(--layout-end-justified);
-            }
-
-            .key-pad__keyNum-content {
-                border: 1px solid #CCC;
-                border-radius: 50%;
-                text-align: center;
-                margin: 10px 0;
-                padding: 30px 0;
-                width: 75px;
-            }
-                .key-pad__keyNum:nth-of-type(10) .key-pad__keyNum-content {
-                    margin-right: 20px;
-                }
-
-                .key-pad__keyNum-content:hover {
-                    cursor: pointer;
-                    background-color: #CCC;
-                }
         </style>
     </template>
 </dom-module>

diff --git a/key-pad.html b/key-pad.html
@@ -26,7 +26,8 @@
 
                     <!-- <div class="key-pad__point key-pad__point--selected key-pad__point--1"></div> -->
                 </div>
-                <div class="key-pad__reset">
+                <div class="key-pad__reset"
+                     on-tap="_onTapReset">
                     <iron-icon icon="icons:close"></iron-icon>
                 </div>
             </header>
@@ -35,10 +36,7 @@
                 <template is="dom-repeat" items="[[ _keypadNums ]]" as="keyNum">
                     <key-pad-key key="[[ keyNum ]]"></key-pad-key>
                 </template>
-                <div class="key-pad__keyNum key-pad__ok"
-                     on-tap="">
-                    <div class="key-pad__keyNum-content">OK</div>
-                </div>
+                <key-pad-key key="Intro" label="OK"></key-pad-key>
             </div>
         </section>
     </template>

diff --git a/key-pad.js b/key-pad.js
@@ -1,8 +1,42 @@
 'use strict';
 
+/**
+ * Generate a random array
+ * @param  {Integer} inPutArray Number of elements in array
+ * @return {Array}              A shuffled array
+ */
+var _uniqueRandomNumber = function(inPutArray) {
+    var sArray    = [];
+    var storeList = [];
+    var k         = 1;
+
+    // Inserts Numbers in Array
+    for (var i = 1; i <= inPutArray; i++) {
+        sArray.push(i);
+    }
+    // Outputs numbers non-repeated
+    while (k <= inPutArray) {
+        // Search for value inside the Array in a random position
+        var randomPos = Math.floor(Math.random() * sArray.length);
+        // Selects value and removes it from Array
+        var valueFromArray = sArray.splice(randomPos, 1);
+        // Converts value in number
+        var numberRand = parseInt(valueFromArray);
+        //store and make array key for as like 0,1,2 for length :3
+        storeList.push(numberRand - 1);
+        k++;
+    }
+    return storeList;
+};
+
+var keys;
+
 Polymer({
 
     is: 'key-pad',
+    listeners: {
+        'key-pad-key:key': '_onKeypadKey'
+    },
 
     properties: {
         /**
@@ -15,11 +49,19 @@ Polymer({
             value: ''
         },
 
+        /**
+         * Max input length for keypad
+         * @type {Boolean}
+         */
         maxLength: {
             type: Number,
             value: 4
         },
 
+        /**
+         * Ordering keys
+         * @type {Boolean}
+         */
         shuffle: {
             type: Boolean
         },
@@ -40,9 +82,14 @@ Polymer({
     },
 
     attached: function() {
-        var shuffle = this.shuffle ? true : false;
-
+        var shuffle = !!this.shuffle ? false : true;
         this.set('_keypadNums', this._getRandomNumbers(shuffle));
+
+
+    },
+
+    destroy: function() {
+        this.unlisten(keys, 'key-pad-key:key');
     },
 
     reset: function() {
@@ -61,50 +108,19 @@ Polymer({
     },
 
     ////// EVENTS
-
-    _onTapKey: function(evt) {
-        if (this.model.length < this.maxLength) {
-            this._setModel(this.model + evt.model.keyNum);
-            this.fire('key-pad.num-clicked', evt.model.keyNum);
-            console.log(evt.model.keyNum);
+    _onKeypadKey: function(evt, detail) {
+        //TODO: Check characters
+        var keyValue = detail.toString();
+
+        if (this._keyLength < this.maxLength) {
+            this._setModel(this.model + keyValue);
+            this._keyLength++;
         }
     },
 
-    _onTapOk: function() {
-        this.fire('key-pad.ok-clicked');
-    },
-
     _onTapReset: function() {
-        this.fire('key-pad.reset-clicked');
-    },
-
-    /**
-     * Generate a random array
-     * @param  {Integer} inPutArray Number of elements in array
-     * @return {Array}              A shuffled array
-     */
-    _uniqueRandomNumber: function(inPutArray) {
-        var sArray    = [];
-        var storeList = [];
-        var k         = 1;
-
-        // Inserts Numbers in Array
-        for (var i = 1; i <= inPutArray; i++) {
-            sArray.push(i);
-        }
-        // Outputs numbers non-repeated
-        while (k <= inPutArray) {
-            // Search for value inside the Array in a random position
-            var randomPos = Math.floor(Math.random() * sArray.length);
-            // Selects value and removes it from Array
-            var valueFromArray = sArray.splice(randomPos, 1);
-            // Converts value in number
-            var numberRand = parseInt(valueFromArray);
-            //store and make array key for as like 0,1,2 for length :3
-            storeList.push(numberRand - 1);
-            k++;
-        }
-        return storeList;
+        this.reset();
+        this.fire('key-pad:reset-clicked');
     },
 
     /**
@@ -113,7 +129,7 @@ Polymer({
      * @return {Array}                 Array of numbers
      */
     _getRandomNumbers: function(forceOrdering) {
-        var arr    = forceOrdering ? [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] : this._uniqueRandomNumber(10);
+        var arr    = forceOrdering ? [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] : _uniqueRandomNumber(10);
         var arrTmp = [];
         var row    = [];