Skip to content

Commit

Permalink
feat(): Added iron-icons & key-pad-key
Browse files Browse the repository at this point in the history
  • Loading branch information
Alfredo De la calle authored and Alfredo De la calle committed Dec 16, 2016
1 parent c1621a0 commit 7c447d3
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 24 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"main": "key-pad.html",
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"iron-flex-layout": "^1.3.1"
"iron-flex-layout": "^1.3.1",
"iron-icons": "^1.2.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
Expand Down
26 changes: 25 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,33 @@
<body>
<div class="vertical-section-container centered">
<h3>Basic key-pad demo</h3>

<demo-snippet>
<template>
<key-pad></key-pad>

<key-pad shuffle>
</key-pad>

</template>
</demo-snippet>

<h3>Max length</h3>
<demo-snippet>
<template>

<key-pad max-length="6">
</key-pad>

</template>
</demo-snippet>

<h3>Unordering keys</h3>
<demo-snippet>
<template>

<key-pad shuffle>
</key-pad>

</template>
</demo-snippet>
</div>
Expand Down
48 changes: 48 additions & 0 deletions key-pad-key-styles.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<dom-module id="key-pad-key-styles">
<template>
<style>
:host {

}

.key-pad-key__keyNums {
@apply(--layout);
@apply(--layout-wrap);
}

.key-pad-key__keyNum {
flex: 1 0 33.3%;
@apply(--layout);
@apply(--layout-center-justified);
}

.key-pad-key__keyNum:nth-of-type(10) {
flex-basis: 66.6%;
@apply(--layout-end-justified);
}

.key-pad-key__keyNum-content {
border: 1px solid #CCC;
border-radius: 50%;
text-align: center;
margin: 10px 0;
padding: 30px 0;
width: 75px;
}
.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;
}
</style>
</template>
</dom-module>

<dom-module id="key-pad-key-animations">
<template>
<style></style>
</template>
</dom-module>
48 changes: 48 additions & 0 deletions key-pad-key.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-icons/maps-icons.html">

<link rel="import" href="key-pad-key-styles.html">
<!--
`key-pad-key`
A custom UI keypad
@demo demo/index.html
-->
<dom-module id="key-pad-key">
<style include="key-pad-key-styles key-pad-key-animations"></style>
<template>
<div class$="key-pad-key__keyNum key-pad-key__[[ label ]]"
on-tap="_onTapKey">
<div class="key-pad-key__keyNum-content">
[[ label ]]
</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>
</dom-module>
41 changes: 40 additions & 1 deletion key-pad-styles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,43 @@
}
</style>
</template>
</dom-module>
</dom-module>

<dom-module id="key-pad-animations">
<template>
<style>

@-webkit-keyframes shake {
0% { -webkit-transform: translateX( 2px); }
20% { -webkit-transform: translateX(-4px); }
40% { -webkit-transform: translateX( 2px); }
60% { -webkit-transform: translateX(-2px); }
80% { -webkit-transform: translateX( 4px); }
100% { -webkit-transform: translateX(-2px); }
}

@keyframes shake {
0% { transform: translateX( 2px);}
20% { transform: translateX( -4px);}
40% { transform: translateX( 2px);}
60% { transform: translateX( -2px);}
80% { transform: translateX( 4px);}
100% { transform: translateX( -2px);}
}

.shake {
animation-name: shake;
animation-duration: 0.6s;
transform-origin: 50% 50%;
animation-iteration-count: 1;
animation-timing-function: linear;
-webkit-animation-name: shake;
-webkit-animation-duration: 0.6s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;

}
</style>
</template>
</dom-module>
27 changes: 14 additions & 13 deletions key-pad.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-icons/maps-icons.html">

<link rel="import" href="key-pad-key.html">

<link rel="import" href="key-pad-styles.html">
<!--
Expand All @@ -9,33 +12,31 @@
@demo demo/index.html
-->
<dom-module id="key-pad">
<style include="key-pad-styles"></style>
<style include="key-pad-styles key-pad-animations"></style>
<template>
<section class="key-pad__wrapper">

<div class="key-pad__headerTitle"></div>

<header class="key-pad__containerPoints">
<div class="key-pad__points">
<div class="key-pad__point key-pad__point--selected key-pad__point--1"></div>
<div class="key-pad__point key-pad__point--2"></div>
<div class="key-pad__point key-pad__point--3"></div>
<div class="key-pad__point key-pad__point--4"></div>
<template is="dom-repeat" items="{{ _getInputLength(maxLength) }}">
<div class="key-pad__point key-pad__point--[[index + 1]]"></div>
</template>

<!-- <div class="key-pad__point key-pad__point--selected key-pad__point--1"></div> -->
</div>
<div class="key-pad__reset">a
<!-- Icon (iron-icons) -->
<div class="key-pad__reset">
<iron-icon icon="icons:close"></iron-icon>
</div>
</header>

<div class="key-pad__keyNums">
<template is="dom-repeat" items="[[ _keypadNums ]]" as="keyNum">
<div class$="key-pad__keyNum key-pad__[[ index ]]">
<div class="key-pad__keyNum-content">
[[ keyNum ]]
</div>
</div>
<key-pad-key key="[[ keyNum ]]"></key-pad-key>
</template>
<div class="key-pad__keyNum key-pad__ok">
<div class="key-pad__keyNum key-pad__ok"
on-tap="">
<div class="key-pad__keyNum-content">OK</div>
</div>
</div>
Expand Down
48 changes: 40 additions & 8 deletions key-pad.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,21 @@ Polymer({
* @type {String}
*/
model: {
type: String
type: String,
readOnly: true,
value: ''
},

keyLength: {
maxLength: {
type: Number,
value: 4
},

shuffle: {
type: Boolean
},

_keyLength: {
type: Number,
value: 0
},
Expand All @@ -24,12 +35,23 @@ Polymer({

},

ready: function() {

},

attached: function() {
this.set('_keypadNums', this._getRandomNumbers());
var shuffle = this.shuffle ? true : false;

this.set('_keypadNums', this._getRandomNumbers(shuffle));
},

reset: function() {
this._setModel('');
this.set('_keyLength', 0);
},

_getInputLength: function() {
return new Array(this.maxLength);
},

_fillPoints: function() {
Expand All @@ -38,13 +60,22 @@ Polymer({

},

_shake: function() {
//TODO
//Add class shake to the points
////// 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);
}
},

_onTapOk: function() {
this.fire('key-pad.ok-clicked');
},

_onTapReset: function() {
this.fire('key-pad.reset-clicked');
},

/**
Expand Down Expand Up @@ -86,14 +117,15 @@ Polymer({
var arrTmp = [];
var row = [];

for (var i = 0, len = arr.length; i < len; i++) {
/*for (var i = 0, len = arr.length; i < len; i++) {
if (i % 3 === 0) {
row = [];
arrTmp.push(row);
}
row.push(arr[i]);
}
return [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
*/
return arr;
// return arrTmp;
}

Expand Down

0 comments on commit 7c447d3

Please sign in to comment.