From e6e91db573e29e9d89a55d1fd415e7e77e775a00 Mon Sep 17 00:00:00 2001 From: Alfredo De la calle Date: Fri, 16 Dec 2016 15:17:18 +0100 Subject: [PATCH] feat(): Added link events --- bower.json | 3 +- demo/index.html | 2 +- key-pad-key-styles.html | 14 ++---- key-pad-key.html | 29 +----------- key-pad-key.js | 26 ++++++++++ key-pad-styles.html | 28 ----------- key-pad.html | 8 ++-- key-pad.js | 102 +++++++++++++++++++++++----------------- 8 files changed, 98 insertions(+), 114 deletions(-) create mode 100644 key-pad-key.js diff --git a/bower.json b/bower.json index c752ade..f2e48c0 100644 --- 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 index b9377b7..98c85ca 100644 --- a/demo/index.html +++ b/demo/index.html @@ -22,7 +22,7 @@

Basic key-pad demo

diff --git a/key-pad-key-styles.html b/key-pad-key-styles.html index 843aedd..d8fea39 100644 --- 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 index 218e185..a05c088 100644 --- a/key-pad-key.html +++ b/key-pad-key.html @@ -15,34 +15,9 @@
- [[ label ]] + [[ label ]]
- - + diff --git a/key-pad-key.js b/key-pad-key.js new file mode 100644 index 0000000..beeab4d --- /dev/null +++ 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); + } +}); \ No newline at end of file diff --git a/key-pad-styles.html b/key-pad-styles.html index 1e47989..9584f07 100644 --- 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; - } diff --git a/key-pad.html b/key-pad.html index 015849d..e881279 100644 --- a/key-pad.html +++ b/key-pad.html @@ -26,7 +26,8 @@ -
+
@@ -35,10 +36,7 @@ -
-
OK
-
+
diff --git a/key-pad.js b/key-pad.js index 832d869..a45e159 100644 --- 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 = [];