Initial commit

feat(.gitignore): Added exclusions
bytelovers · Dec 15, 2016 · aa444ff · aa444ff
1 parent 6ddba30
commit aa444ff
Show file tree

Hide file tree

Showing 9 changed files with 414 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# Created by https://www.gitignore.io/api/polymer
+
+### Polymer ###
+#Installed components via bower
+bower_components/
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+# \<key-pad\>
+
+A custom UI keypad
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
+
+## Viewing Your Application
+
+```
+$ polymer serve
+```
+
+## Building Your Application
+
+```
+$ polymer build
+```
+
+This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
+containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
+CSS, and JS optimizers.
+
+You can serve the built versions by giving `polymer serve` a folder to serve
+from:
+
+```
+$ polymer serve build/bundled
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,14 @@
+{
+  "name": "key-pad",
+  "description": "A custom UI keypad",
+  "main": "key-pad.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>key-pad demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../key-pad.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+    </style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic key-pad demo</h3>
+      <demo-snippet>
+        <template>
+          <key-pad></key-pad>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>key-pad</title>
+
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+  <body>
+    <iron-component-page src="key-pad.html"></iron-component-page>
+  </body>
+</html>
diff --git a/key-pad-styles.html b/key-pad-styles.html
@@ -0,0 +1,133 @@
+<dom-module id="key-pad-styles">
+    <template>
+        <style>
+            :host {
+
+                .button-wrapper {
+                    width: 75%;
+                    margin: 0 auto;
+                }
+
+                .button-wrapper button {
+                    margin: 7px auto;
+                    border-radius: 50%;
+                    background-image: linear-gradient(#ffffff, #ffffff);
+                    box-sizing: border-box;
+                    display: block;
+                    width: 53px;
+                    height: 53px;
+                    border: 1px #d5d5d5 solid;
+                    font-size: 20px;
+                }
+
+                    .button-wrapper button.ok {
+                            border: 1px #e5e5e5 solid;
+                            background-image: linear-gradient(#e5e5e5, #e5e5e5);
+                            color: white;
+                            padding: 0;
+                        }
+
+                    .button-wrapper button.ok.activated {
+                        border: 1px #e5e5e5 solid;
+                        background-image: linear-gradient(#e5e5e5, #e5e5e5);
+                        color: white;
+                    }
+
+                    .button-wrapper button.ok.filled {
+                        border: 1px #e5e5e5 solid;
+                        background-image: linear-gradient(#e5e5e5, #e5e5e5);
+                    }
+
+                    .button-wrapper button.ok span {
+                        font-size: 50px;
+                    }
+
+                    .button-wrapper button.activated {
+                        border: 1px #e5e5e5 solid;
+                        background-image: linear-gradient(#e5e5e5, #e5e5e5);
+                    }
+
+                .container-points {
+                    display: flex;
+                    justify-content: center;
+                    border-bottom: 1px #e5e5e5 solid;
+                    padding: 0 15px 20px 15px;
+                    margin: 10px 20px 5px;
+
+
+
+                    >div:last-child {
+                        position: absolute;
+                        left: 83%;
+                        width: 30px;
+                        height: 30px;
+                        text-align: center;
+                    }
+                }
+
+                    .container-points .blue-points {
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                        .container-points .blue-points .point {
+                            width: 13px;
+                            height: 13px;
+                            border-radius: 50%;
+                            margin: 0 12px;
+                        }
+
+                            .container-points .blue-points .point.point-border-gray {
+                                border: 1px #e5e5e5 solid;
+                            }
+
+                            .container-points .blue-points .point.point-border-blue {
+                                border: 1px #e5e5e5 solid;
+                            }
+
+                            .container-points .blue-points .point.point-fill-blue{
+                                background-color: #e5e5e5;
+                            }
+
+                .container-text {
+                    justify-content: center;
+                    text-align: center;
+                    margin: 10px 20px;
+                }
+
+                @-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>
diff --git a/key-pad.html b/key-pad.html
@@ -0,0 +1,51 @@
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="key-pad-styles.html">
+<!--
+`key-pad`
+A custom UI keypad
+
+@demo demo/index.html 
+-->
+<dom-module id="key-pad">
+    <style include="key-pad-styles"></style>
+    <template>
+        <div class="keypad-wrapper">
+            <div class="row">
+                <div class="col">
+                    <div class="container-text"></div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="container-points">
+                        <div class="blue-points">
+                            <div ng-repeat="i in vm.getInputLength() track by $index" class="point point-border-blue" ng-class="'point'+{{$index+1}}">
+                            </div>
+                        </div>
+                        <div ng-click="vm.resetInput()">
+                            <div class="icon-san san-close text color-cyan-light"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="button-wrapper">
+                <div ng-repeat-start="group in vm.keypadNums" ng-if="!$last" class="row">
+                    <div ng-repeat="n in group" class="col">
+                        <button on-tap="vm.onTapNumber(n)">{{::n}}</button>
+                    </div>
+                </div>
+                <div ng-repeat-end ng-if="$last" class="row">
+                    <div ng-repeat="n in group" class="col col-offset-33">
+                        <button on-tap="vm.onTapNumber(n)">{{::n}}</button>
+                    </div>
+                    <div class="col">
+                        <button class="ok animated" ng-click="vm.onTapOk()" ng-disabled="vm.disabledOk">
+                            <span class="icon-san san-ok text"></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+    <script src="key-pad.js"></script>
+</dom-module>
diff --git a/key-pad.js b/key-pad.js
@@ -0,0 +1,99 @@
+'use strict';
+
+Polymer({
+
+    is: 'key-pad',
+
+    properties: {
+        /**
+         * Number introduced
+         * @type {String}
+         */
+        model: {
+            type: String
+        },
+
+        keyLength: {
+            type: Number,
+            value: 0
+        },
+
+        _keypadNums: {
+            type: Array
+        }
+
+    },
+
+    attached: function() {
+        this.set('_keypadNums', this._getRandomNumbers());
+    },
+
+    reset: function() {
+
+    },
+
+    _fillPoints: function() {
+        //TODO
+        //Add class to points to fill
+
+    },
+
+    _shake: function() {
+        //TODO
+        //Add class shake to the points
+    },
+
+    _onTapOk: function() {
+
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * Generate keypad numbers
+     * @param  {Boolean} forceOrdering Determine if Numbers will be shuffled or not
+     * @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 arrTmp = [];
+        var row    = [];
+
+        for (var i = 0, len = arr.length; i < len; i++) {
+            if (i % 3 === 0) {
+                row = [];
+                arrTmp.push(row);
+            }
+            row.push(arr[i]);
+        }
+        return arrTmp;
+    }
+
+});