├── .babelrc
├── .gitignore
├── LICENSE
├── Makefile
├── README.md
├── dev
    ├── App.vue
    ├── index.js
    └── main.js
├── dist
    ├── static
    │   └── icons.svg
    └── vue-focus-keyboard.js
├── index.html
├── package.json
├── src
    ├── FocusKeyboard.vue
    └── layout.js
├── static
    └── icons.svg
├── utils.js
├── webpack.build.conf.js
├── webpack.demo.js
└── webpack.dev.conf.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": ["es2015", "stage-0"],
3 | 	"plugins": ["transform-runtime"],
4 | 	"comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | demo/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | package-lock.json*


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Sinan Mutlu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | BUILD_DEMO = npm run demo
 2 | DELETEFILES = rm -rf /tmp/demo
 3 | COPYBUILD = cp -a demo /tmp/demo
 4 | CHECKOUT = git checkout gh-pages
 5 | PASTEBUILD = cp -a /tmp/demo/ .
 6 | 
 7 | .PHONY: demo
 8 | demo:
 9 | 	$(BUILD_DEMO); $(DELETEFILES); $(COPYBUILD); $(CHECKOUT); $(PASTEBUILD);
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Focus Keyboard
 2 | 
 3 | [![npm version](https://badge.fury.io/js/vue-focus-keyboard.svg)](https://www.npmjs.com/package/vue-focus-keyboard)
 4 | [![npm](https://img.shields.io/npm/dt/vue-focus-keyboard.svg)](https://www.npmjs.com/package/vue-focus-keyboard)
 5 | 
 6 | > A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!- [Demo](https://sinanmtl.github.io/vue-focus-keyboard/)
 7 | 
 8 | ## Installation and usage
 9 | 
10 | Install the Vue Focus Keyboard component for your project
11 | 
12 | ```bash
13 | npm install vue-focus-keyboard --save
14 | ```
15 | 
16 | Then, add component into your app
17 | 
18 | ```javascript
19 | import FocusKeyboard from 'vue-focus-keyboard';
20 | 
21 | Vue.use(FocusKeyboard)
22 | ```
23 | 
24 | Use HTML template
25 | 
26 | ```html
27 | <FocusKeyboard></FocusKeyboard>
28 | ```
29 | 
30 | ## Props
31 | ### `theme`
32 | 
33 | There are 2 theme in Vue Focus Keyboard. They are `dark` and `light` (default: `dark`). You can use one of them with `theme` prop.
34 | 
35 | ```html
36 | <FocusKeyboard :theme="light"></FocusKeyboard>
37 | ```
38 | 
39 | ### `keyboardWidth`
40 | 
41 | Also, you can set keyboard's width.
42 | 
43 | ```html
44 | <FocusKeyboard :keyboardWidth="50%"></FocusKeyboard>
45 | ```
46 | 
47 | ### `keyboard`
48 | 
49 | You don't like current keyboards? Well, set your custom keyboard layout. You can view default layouts in `src/layout.js` file
50 | 
51 | ```javascript
52 | export default {
53 |   data () {
54 |     return {
55 |       customLayout: {
56 |         default: [
57 |           // Normal layout
58 |         ],
59 |         shifted: [
60 |           // Layout when press shift button
61 |         ],
62 |         capsed: [
63 |           // Layout when press capslock button
64 |         ],
65 |         alted: [
66 |           // Layout when press alt button
67 |         ],
68 |         shifted_capsed: [
69 |           // Layout when press shift + capslock button
70 |         ],
71 |         shifted_alted: [
72 |           // Layout when press shift + alt button
73 |         ]
74 |       },
75 |     }
76 |   }
77 | }
78 | ```
79 | 
80 | Then, set your keyboard.
81 | ```html
82 | <FocusKeyboard :keyboard="customLayout"></FocusKeyboard>
83 | ```
84 | 
85 | ## License
86 | 
87 | MIT.
88 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="App">
  3 |     <div class="container">
  4 |         <h1>Vue Focus Keyboard Component</h1>
  5 |         <div class="row">
  6 |           <div class="col col-6">
  7 |               <div class="form-group">
  8 |                 <div class="row">
  9 |                   <div class="col col-6">
 10 |                     <label>Keyboard Type</label>
 11 |                     <select class="form-control" v-model="selected_keyboard">
 12 |                       <option v-for="(keyboardType, index) in list" :key="index" :value="keyboardType">{{ keyboardType }}</option>
 13 |                     </select>
 14 |                   </div>
 15 | 
 16 |                   <div class="col col-6">
 17 |                     <label>Theme</label>
 18 |                     <select class="form-control" v-model="theme">
 19 |                       <option value="dark">Dark</option>
 20 |                       <option value="light">Light</option>
 21 |                     </select>
 22 |                   </div>
 23 | 
 24 |                 </div>
 25 |               </div>
 26 |               <div class="form-group">
 27 |                 <label>Standard Input</label>
 28 |                 <input class="form-control" type="text">
 29 |               </div>
 30 |               <div class="form-group">
 31 |                 <label>Textarea</label>
 32 |                 <textarea class="form-control"></textarea>
 33 |               </div>
 34 |           </div>
 35 |         </div>
 36 |       <FocusKeyboard :keyboard="selected_keyboard" :theme="theme"></FocusKeyboard>
 37 |     </div>
 38 |   </div>
 39 | </template>
 40 | 
 41 | <script>
 42 | import FocusKeyboard from '../src/FocusKeyboard'
 43 | 
 44 | export default {
 45 |   name: 'App',
 46 |   data () {
 47 |     return {
 48 |       selected_keyboard: 'us_international',
 49 |       theme: 'dark',
 50 |       list: [
 51 |         'us_international',
 52 |         'turkish_qwerty_pc',
 53 |         'numeric',
 54 |       ]
 55 |     }
 56 |   },
 57 |   components: {
 58 |     FocusKeyboard
 59 |   }
 60 | }
 61 | </script>
 62 | 
 63 | <style>
 64 |   * {
 65 |     box-sizing: border-box
 66 |   }
 67 | 
 68 |   body{
 69 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 70 |     font-size: 1rem;
 71 |     text-align: center;
 72 |   }
 73 | 
 74 |   .small, small {
 75 |     font-size: 80%;
 76 |     font-weight: 400;
 77 |   }
 78 | 
 79 |   label {
 80 |     display: inline-block;
 81 |     margin-bottom: .5rem;
 82 |   }
 83 |   
 84 |   .form-group {
 85 |     margin-bottom: 1em;
 86 |     text-align: left;
 87 |   }
 88 | 
 89 |   .form-control {
 90 |     display: block;
 91 |     width: 100%;
 92 |     padding: .375rem .75rem;
 93 |     font-size: 1rem;
 94 |     line-height: 1.5;
 95 |     color: #495057;
 96 |     background-color: #fff;
 97 |     background-clip: padding-box;
 98 |     border: 1px solid #ced4da;
 99 |     border-radius: .25rem;
100 |     transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
101 |   }
102 |   
103 |   select.form-control{
104 |     height: 38px;
105 |   }
106 | 
107 |   .form-control:focus {
108 |     color: #495057;
109 |     background-color: #fff;
110 |     border-color: #80bdff;
111 |     outline: 0;
112 |     box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
113 |   }
114 | 
115 |   .form-text {
116 |     display: block;
117 |     margin-top: .25rem;
118 |   }
119 | 
120 |   .btn {
121 |     display: inline-block;
122 |     font-weight: 400;
123 |     text-align: center;
124 |     white-space: nowrap;
125 |     vertical-align: middle;
126 |     -webkit-user-select: none;
127 |     -moz-user-select: none;
128 |     -ms-user-select: none;
129 |     user-select: none;
130 |     border: 1px solid transparent;
131 |     padding: .375rem .75rem;
132 |     font-size: 1rem;
133 |     line-height: 1.5;
134 |     border-radius: .25rem;
135 |     transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
136 |   }
137 | 
138 |   .btn-primary {
139 |     color: #fff;
140 |     background-color: #007bff;
141 |     border-color: #007bff;
142 |   }
143 | 
144 |   .btn:not(:disabled):not(.disabled) {
145 |     cursor: pointer;
146 |   }
147 | 
148 |   .text-muted {color: #6c757d!important;}
149 | 
150 |   .container{
151 |     max-width: 1170px;
152 |     padding: 0 15px;
153 |     margin: 0 auto;
154 |   }
155 | 
156 |   .row{
157 |     display: flex;
158 |     align-items: center;
159 |     justify-content: center;
160 |     margin: 0 -15px;
161 |   }
162 | 
163 |   .col{
164 |     padding: 0 15px;
165 |   }
166 | 
167 |   .col-1{width: 8.333333333333334%;}
168 |   .col-2{width: 16.666666666666668%;}
169 |   .col-3{width: 25%;}
170 |   .col-4{width: 33.333333333333336%;}
171 |   .col-5{width: 41.66666666666667%;}
172 |   .col-6{width: 50%;}
173 |   .col-7{width: 58.333333333333336%;}
174 |   .col-8{width: 66.66666666666667%;}
175 |   .col-9{width: 75%;}
176 |   .col-10{width: 83.33333333333334%;}
177 |   .col-11{width: 91.66666666666667%;}
178 |   .col-12{width: 100%;}
179 | </style>
180 | 
181 | 


--------------------------------------------------------------------------------
/dev/index.js:
--------------------------------------------------------------------------------
 1 | let FocusKeyboard = require('../src/FocusKeyboard.vue')
 2 | 
 3 | module.exports = {
 4 | 	component: FocusKeyboard,
 5 | 	layouts: require('../src/layout'),
 6 | 	install(Vue) {
 7 | 		Vue.component(FocusKeyboard.default.name, FocusKeyboard.default)
 8 | 	}
 9 | }
10 | 


--------------------------------------------------------------------------------
/dev/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from '@/App'
3 | 
4 | export default new Vue({
5 | 	el: '#app',
6 | 	template: '<App/>',
7 | 	components: { App }
8 | })
9 | 


--------------------------------------------------------------------------------
/dist/static/icons.svg:
--------------------------------------------------------------------------------
 1 | <svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |   <defs>
 3 |     <symbol id="icon-backspace" viewBox="0 0 24 24">
 4 |       <path d="M19.5 5h-10c-1.266 0-2.834 0.807-3.57 1.837l-2.61 3.653c-0.642 0.898-1.182 1.654-1.199 1.679-0.121 0.175-0.122 0.492 0.003 0.664 0.023 0.033 0.555 0.777 1.188 1.664l2.619 3.667c0.735 1.029 2.302 1.836 3.569 1.836h10c1.379 0 2.5-1.122 2.5-2.5v-10c0-1.378-1.121-2.5-2.5-2.5zM17.207 14.793c0.391 0.391 0.391 1.023 0 1.414-0.195 0.195-0.451 0.293-0.707 0.293s-0.512-0.098-0.707-0.293l-2.293-2.293-2.293 2.293c-0.195 0.195-0.451 0.293-0.707 0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023 0-1.414l2.293-2.293-2.293-2.293c-0.391-0.391-0.391-1.023 0-1.414s1.023-0.391 1.414 0l2.293 2.293 2.293-2.293c0.391-0.391 1.023-0.391 1.414 0s0.391 1.023 0 1.414l-2.293 2.293 2.293 2.293z"></path>
 5 |     </symbol>
 6 | 
 7 |     <symbol id="icon-backspace-outline" viewBox="0 0 24 24">
 8 |       <path d="M19 21h-10c-1.436 0-3.145-0.88-3.977-2.046l-2.619-3.667c-0.629-0.881-1.157-1.621-1.188-1.661-0.246-0.344-0.249-0.894-0.008-1.241 0.018-0.025 0.561-0.783 1.204-1.686l2.608-3.653c0.835-1.167 2.546-2.046 3.98-2.046h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3zM3.229 12.999c0.215 0.299 0.498 0.696 0.806 1.125l2.618 3.667c0.451 0.633 1.57 1.209 2.348 1.209h10c0.552 0 1-0.45 1-1.001v-9.999c0-0.551-0.448-1-1-1h-10c-0.776 0-1.897 0.576-2.351 1.209l-2.608 3.652c-0.312 0.436-0.599 0.838-0.813 1.138z"></path>
 9 |       <path d="M13.707 13l2.646-2.646c0.194-0.194 0.194-0.512 0-0.707-0.195-0.194-0.513-0.194-0.707 0l-2.646 2.646-2.646-2.646c-0.195-0.194-0.513-0.194-0.707 0-0.195 0.195-0.195 0.513 0 0.707l2.646 2.646-2.646 2.646c-0.195 0.195-0.195 0.513 0 0.707 0.097 0.098 0.225 0.147 0.353 0.147s0.256-0.049 0.354-0.146l2.646-2.647 2.646 2.646c0.098 0.098 0.226 0.147 0.354 0.147s0.256-0.049 0.354-0.146c0.194-0.194 0.194-0.512 0-0.707l-2.647-2.647z"></path>
10 |     </symbol>
11 |     
12 |     <symbol id="icon-tab" viewBox="0 0 24 24">
13 |       <path d="M20.016 6h1.969v12h-1.969v-12zM11.578 7.406l1.406-1.406 6 6-6 6-1.406-1.406 3.609-3.609h-14.203v-1.969h14.203z"></path>
14 |     </symbol>
15 |     
16 |     <symbol id="icon-capslock" viewBox="0 0 16 24">
17 |       <path fill="none" stroke="currentColor" stroke-width="1.3714" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M1.056 8.229c0.053 0.128 0.177 0.212 0.315 0.213h3.086v6.514c0 0.189 0.153 0.343 0.343 0.343h6.857c0.189 0 0.343-0.153 0.343-0.343v-6.514h3.086c0.137-0.002 0.26-0.085 0.312-0.212s0.024-0.273-0.072-0.371l-6.857-6.857c-0.064-0.065-0.152-0.101-0.243-0.101s-0.179 0.037-0.243 0.101l-6.857 6.857c-0.095 0.099-0.122 0.244-0.069 0.37z"></path>
18 |       <path fill="none" stroke="currentColor" stroke-width="1.3714" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M11.657 18.062h-6.857c-0.189 0-0.343 0.153-0.343 0.343v4.114c0 0.189 0.153 0.343 0.343 0.343h6.857c0.189 0 0.343-0.153 0.343-0.343v-4.114c0-0.189-0.153-0.343-0.343-0.343z"></path>
19 |     </symbol>
20 |     
21 |     <symbol id="icon-shift" viewBox="0 0 27 24">
22 |       <path fill="none" stroke="currentColor" stroke-width="2.2857" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M1.76 13.714c0.088 0.213 0.295 0.353 0.526 0.354h5.143v7.429c0 0.316 0.256 0.571 0.571 0.571h11.429c0.316 0 0.571-0.256 0.571-0.571v-7.429h5.143c0.229-0.003 0.433-0.142 0.52-0.354s0.040-0.454-0.12-0.618l-11.429-11.429c-0.107-0.108-0.253-0.169-0.406-0.169s-0.298 0.061-0.406 0.169l-11.429 11.429c-0.158 0.165-0.203 0.407-0.114 0.617z"></path>
23 |     </symbol>
24 |     
25 |     <symbol id="icon-enter" viewBox="0 0 45 24">
26 |       <path d="M7.259 14.284l5.407 5.86c0.531 0.56 0.745 1.385 0.563 2.163s-0.734 1.392-1.447 1.609c-0.713 0.218-1.479 0.007-2.009-0.553l-9.138-9.821c-0.405-0.42-0.634-1.002-0.634-1.609s0.229-1.189 0.634-1.609l8.909-9.656c0.82-0.889 2.15-0.889 2.97 0s0.82 2.33 0 3.219l-5.407 5.86h33.581v-7.428c0-1.231 0.921-2.228 2.056-2.228s2.056 0.998 2.056 2.228v9.739c0 1.231-0.921 2.228-2.056 2.228h-35.485z"></path>
27 |     </symbol>
28 |   </defs>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/dist/vue-focus-keyboard.js:
--------------------------------------------------------------------------------
1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("VueFocusKeyboard",[],e):"object"==typeof exports?exports.VueFocusKeyboard=e():t.VueFocusKeyboard=e()}(window,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/dist/",n(n.s=80)}([function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(23)("wks"),o=n(10),i=n(0).Symbol,a="function"==typeof i;(t.exports=function(t){return r[t]||(r[t]=a&&i[t]||(a?i:o)("Symbol."+t))}).store=r},function(t,e,n){var r=n(37),o=n(26);t.exports=function(t){return r(o(t))}},function(t,e,n){t.exports=!n(7)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(13),o=n(40),i=n(27),a=Object.defineProperty;e.f=n(4)?Object.defineProperty:function(t,e,n){if(r(t),e=i(e,!0),r(n),o)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){var r=n(5),o=n(12);t.exports=n(4)?function(t,e,n){return r.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e,n){var r=n(38),o=n(22);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var r=n(8);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e){var n=t.exports={version:"2.5.4"};"number"==typeof __e&&(__e=n)},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=a(n(75)),o=a(n(66)),i=a(n(30));function a(t){return t&&t.__esModule?t:{default:t}}var s,u,c,f,l=new Event("keydown"),p=new Event("keyup"),d=new Event("keypress"),h=new Event("input"),v=!1;e.default={name:"FocusKeyboard",props:{keyboardWidth:{type:[String,Number],default:"100%"},theme:{type:String,default:""},keyboard:{type:[Object,String],default:function(){return"us_international"}}},data:function(){return{show:!1,shift:!1,capslock:!1,ctrl:!1,alt:!1,input:null}},computed:{layout:function(){return"object"===(0,o.default)(this.keyboard)&&this.keyboard.hasOwnProperty("default")?this.keyboard:"string"==typeof this.keyboard&&i.default.hasOwnProperty(this.keyboard)?i.default[this.keyboard]:i.default[i.default.default]},buttons:function(){var t=this,e={},n=function(n){var r=t.layout[n];"_metaKeys"!==n&&(e[n]=[],r.forEach(function(t,r){e[n].push(t.split(" "))}))};for(var r in this.layout)n(r);return e},currentButtons:function(){var t="default";return this.shift?(t="shifted",this.capslock?t="shifted_capsed":this.alt&&(t="shifted_alted")):this.capslock?t="capsed":this.alt&&(t="alted"),this.buttons[t]}},methods:{getIconByMetaKey:function(t){if(["{backspace}","{shiftl}","{shiftr}","{enter}","{capslock}","{tab}"].indexOf(t)>-1){var e=t.replace(/({|})/g,"");return/(shift(l|r))/.test(e)?"shift":e}return null},getClass:function(t){return this.capslock&&"{capslock}"===t||this.ctrl&&/ctrl(l|r)/g.test(t)||this.alt&&/alt(gr)?/g.test(t)||this.shift&&/shift(l|r)?/g.test(t)?"active":""},getStyle:function(t){var e=t.replace(/({|})/g,""),n=i.default._metaKeys;return this.layout.hasOwnProperty("_metaKeys")&&(n=(0,r.default)({},n,this.layout._metaKeys)),n.hasOwnProperty(e)?{flex:n[e].width}:{}},open:function(){this.show=!0},close:function(){this.show=!1,this.input=null,clearInterval(v),v=!1},moveCursor:function(t,e){this.input&&(this.input.selectionStart=t||0,this.input.selectionEnd=e||t||0)},isInput:function(t){var e=t.getAttribute("contenteditable");return["INPUT","TEXTAREA"].indexOf(t.nodeName)>-1||!!e},isSupportedType:function(t){var e=t.getAttribute("contenteditable"),n="TEXTAREA"===t.nodeName;return["text","password","search","tel","url","email","number"].indexOf(t.type)>-1||!!e||n},backspace:function(t){var e=(this.input.value||this.input.innerHTML).split("");return e.splice(t.start,t.end-t.start),e.join("")},setMetaKey:function(t){switch(t){case"{capslock}":this.capslock=!this.capslock;break;case"{shiftl}":case"{shiftr}":this.shift=!this.shift;break;case"{ctrll}":case"{ctrlr}":this.ctrl=!this.ctrl;break;case"{alt}":case"{altgr}":this.alt=!this.alt}},setKey:function(t,e){var n=(this.input.value||this.input.innerHTML).split("");return n.splice(t.start,0,e),n.join("")},ctrlCombination:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";if("string"!=typeof t)return!1;switch(t.toLowerCase()){case"a":this.input.select();break;case"z":document.execCommand("undo",!1,null);break;case"y":document.execCommand("redo",!1,null);break;case"c":document.execCommand("copy",!1,null);break;case"x":document.execCommand("cut",!1,null)}this.ctrl=!1},setValue:function(t,e){var n="";switch(t){case"{backspace}":e.start===e.end&&(e.start-=1),n=this.backspace(e);break;case"{space}":n=this.setKey(e," ");break;case"{tab}":n=this.setKey(e,"\t");break;case"{enter}":"TEXTAREA"===this.input.nodeName?n=this.setKey(e,"\n"):this.input.form&&this.input.form.submit();break;default:n=this.setKey(e,t)}if("{enter}"===t&&"TEXTAREA"!==this.input.nodeName)return!1;!!this.input.getAttribute("contenteditable")?this.input.innerHTML=n:this.input.value=n},buttonPress:function(t){if(this.input){var e=this.getCursor();["{shiftl}","{shiftr}","{capslock}","{ctrll}","{ctrlr}","{alt}","{altgr}"].indexOf(t)>-1?this.setMetaKey(t):this.ctrl?this.ctrlCombination(t):(this.shift=!1,this.ctrl=!1,this.alt=!1,this.setValue(t,e),this.triggerEvents(),this.input.focus(),"{backspace}"===t?this.moveCursor(e.start):this.moveCursor(e.start+1,e.end+1))}},triggerEvents:function(){this.input.dispatchEvent(h),this.input.dispatchEvent(l),this.input.dispatchEvent(d),this.input.dispatchEvent(p)},pressAndHold:(s=function(t,e){var n=this;"{backspace}"===e&&("mouseup"===t.type||"touchend"===t.type?(clearInterval(v),v=!1):v||(v=setInterval(function(){n.buttonPress(e)},30)))},u=150,f=void 0,function(){var t=this,e=arguments,n=c&&!f;clearTimeout(f),f=setTimeout(function(){f=null,c||s.apply(t,e)},u),n&&s.apply(t,e)}),getCursor:function(){if(this.isSupportedType(this.input)){var t={start:this.input.selectionStart||0,end:this.input.selectionEnd||0};return t.end<t.start&&(t.end=t.start),t}var e=this.input.value||this.input.innerHTML;return{start:e.length,end:e.length}},getParents:function(t,e){void 0===e&&(e=document);for(var n=[],r=t.parentNode;r!==e;){var o=r;n.push(o),r=o.parentNode}return n.push(e),n},onFocusInput:function(t){this.isInput(t.target)&&this.isSupportedType(t.target)&&(this.input=t.target,this.input.addEventListener("keydown",function(){}),this.open())},onDocumentClick:function(t){var e=this;return!this.getParents(t.target).find(function(t){return t===e.$el})&&t.target!==this.$el&&t.target!==this.input&&(this.isInput(t.target)&&this.isSupportedType(t.target)?(this.input=t.target,!1):(this.input&&this.input.blur(),void this.close()))},initEvents:function(){document.addEventListener("focus",this.onFocusInput,!0),document.addEventListener("click",this.onDocumentClick)}},mounted:function(){this.initEvents()}}},function(t,e,n){var r=n(0),o=n(14),i=n(20),a=n(17),s=n(5).f;t.exports=function(t){var e=o.Symbol||(o.Symbol=i?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||s(e,t,{value:a.f(t)})}},function(t,e,n){e.f=n(2)},function(t,e,n){var r=n(5).f,o=n(1),i=n(2)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e){t.exports={}},function(t,e){t.exports=!0},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(0),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});t.exports=function(t){return o[t]||(o[t]={})}},function(t,e,n){var r=n(23)("keys"),o=n(10);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on  "+t);return t}},function(t,e,n){var r=n(8);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(0),o=n(14),i=n(72),a=n(6),s=n(1),u=function(t,e,n){var c,f,l,p=t&u.F,d=t&u.G,h=t&u.S,v=t&u.P,y=t&u.B,b=t&u.W,m=d?o:o[e]||(o[e]={}),g=m.prototype,x=d?r:h?r[e]:(r[e]||{}).prototype;for(c in d&&(n=e),n)(f=!p&&x&&void 0!==x[c])&&s(m,c)||(l=f?x[c]:n[c],m[c]=d&&"function"!=typeof x[c]?n[c]:y&&f?i(l,r):b&&x[c]==l?function(t){var e=function(e,n,r){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,r)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(l):v&&"function"==typeof l?i(Function.call,l):l,v&&((m.virtual||(m.virtual={}))[c]=l,t&u.R&&g&&!g[c]&&a(g,c,l)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},function(t,e,n){"use strict";n.d(e,"a",function(){return r}),n.d(e,"b",function(){return o});var r=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:"slideUp"}},[t.show?n("div",{staticClass:"KeyboardComponent",class:t.theme,on:{click:function(e){t.input.focus()},contextmenu:function(t){t.preventDefault()}}},[n("div",{staticClass:"buttons",style:{width:t.keyboardWidth}},t._l(t.currentButtons,function(e,r){return n("div",{key:r,staticClass:"key-row"},t._l(e,function(e,r){return n("button",{key:r,class:t.getClass(e),style:t.getStyle(e),attrs:{type:"button"},on:{mousedown:function(n){t.pressAndHold(n,e)},mouseup:function(n){t.pressAndHold(n,e)},click:function(n){n.preventDefault(),t.buttonPress(e)},touchstart:function(n){t.pressAndHold(n,e)},touchend:function(n){t.pressAndHold(n,e)}}},[n("div",{staticClass:"text"},[t.getIconByMetaKey(e)?n("svg",{staticClass:"icon"},[n("use",{attrs:{"xlink:href":"static/icons.svg#icon-"+t.getIconByMetaKey(e)}})]):/(ctrl(l|r))/g.test(e)?[t._v("Ctrl")]:"{alt}"===e?[t._v("Alt")]:"{altgr}"===e?[t._v("Alt Gr")]:/(space|empty)/g.test(e)?[t._v(" ")]:[t._v(t._s(e))]],2)])}))}))]):t._e()])},o=[];r._withStripped=!0},function(t,e){t.exports={default:"us_international",_metaKeys:{backspace:{width:110},tab:{width:80},enter:{width:80},caps:{width:110},shiftl:{width:80},shiftr:{width:135},ctrll:{width:105},ctrlr:{width:105},alt:{width:80},altgr:{width:80},space:{width:435}},us_international:{default:["§ 1 2 3 4 5 6 7 8 9 0 - = {backspace}","{tab} q w e r t y u i o p [ ] {enter}","{capslock} a s d f g h j k l ; ' \\","{shiftl} ` z x c v b n m , . / {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],shifted:["± ! @ # $ % ˆ & * ( ) _ + {backspace}","{tab} Q W E R T Y U I O P { } {enter}",'{capslock} A S D F G H J K L : " |',"{shiftl} ˜ Z X C V B N M < > ? {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],capsed:["§ 1 2 3 4 5 6 7 8 9 0 - = {backspace}","{tab} Q W E R T Y U I O P [ ] {enter}","{capslock} A S D F G H J K L ; ' \\","{shiftl} ` Z X C V B N M , . / {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],alted:["§ ¡ ™ £ ¢ ∞ § ¶ • ª º – ≠ {backspace}","{tab} œ ∑ ´ ® † ¥ ¨ ˆ ø π “ ‘ {enter}","{capslock} å ß ∂ ƒ © ˙ ∆ ˚ ¬ … æ «","{shiftl} ` Ω ≈ ç √ ∫ ˜ µ ≤ ≥ ÷ {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],shifted_capsed:["± ! @ # $ % ˆ & * ( ) _ + {backspace}","{tab} q w e r t y u i o p { } {enter}",'{capslock} a s d f g h j k l : " |',"{shiftl} ˜ z x c v b n m < > ? {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],shifted_alted:["± ⁄ € ‹ › fi fl ‡ ° · ‚ — ± {backspace}","{tab} Œ „ ´ ‰ ˇ Á ¨ i Ø ∏ ” ’ {enter}","{capslock} Å Í Î Ï ˝ Ó Ô  Ò Ú Æ »","{shiftl} ` ¸ ˛ Ç ◊ ı ˜  ¯ ˘ ¿ {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"]},turkish_qwerty_pc:{_metaKeys:{backspace:{width:110},tab:{width:80},enter:{width:80},caps:{width:110},shiftl:{width:80},shiftr:{width:135},ctrll:{width:105},ctrlr:{width:105},alt:{width:80},altgr:{width:80},space:{width:435}},default:['" 1 2 3 4 5 6 7 8 9 0 * - {backspace}',"{tab} q w e r t y u ı o p ğ ü {enter}","{capslock} a s d f g h j k l ş i ,","{shiftl} < z x c v b n m ö ç . {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],shifted:["é ! ' ^ + % & / ( ) = ? _ {backspace}","{tab} Q W E R T Y U I O P Ğ Ü {enter}","{capslock} A S D F G H J K L Ş İ ;","{shiftl} > Z X C V B N M Ö Ç : {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],capsed:['" 1 2 3 4 5 6 7 8 9 0 * - {backspace}',"{tab} Q W E R T Y U I O P Ğ Ü {enter}","{capslock} A S D F G H J K L Ş İ ,","{shiftl} < Z X C V B N M Ö Ç . {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],alted:["< > £ # $ ½ § { [ ] } \\ | {backspace}","{tab} @ ∑ € ® ₺ ¥ ü i ö π ¨ ~ {enter}","{capslock} æ ß ∂ ƒ ğ ^ ∆ ¨ ¬ ´ æ `","{shiftl} |  ≈ ç √ ∫ ~ µ ≤ ≥ . {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],shifted_capsed:["é ! ' ^ + % & / ( ) = ? _ {backspace}","{tab} q w e r t y u ı o p ğ ü {enter}","{capslock} a s d f g h j k l ş i ;","{shiftl} > z x c v b n m ö ç : {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"],shifted_alted:['" · € © ‚ ˚ ˙ ‡ ° Ø ø — ± {backspace}',"{tab} Œ „ ‰ Â Ê Á Ü ı Ö ∏ ” ’ {enter}","{capslock} Æ Ş Î Ï Ğ Ó Ô  Ò Ú Æ »","{shiftl} Ÿ Û Ù Ç ◊ ß ˆ ˜ ¯ ˘ ¿ {shiftr}","{ctrll} {alt} {space} {altgr} {ctrlr}"]},numeric:{_metaKeys:{enter:{width:50}},default:["{backspace}","7 8 9","6 5 4","3 2 1","0 . {enter}"]}}},function(t,e,n){var r=n(38),o=n(22).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(13),o=n(60),i=n(22),a=n(24)("IE_PROTO"),s=function(){},u=function(){var t,e=n(39)("iframe"),r=i.length;for(e.style.display="none",n(59).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),u=t.F;r--;)delete u.prototype[i[r]];return u()};t.exports=Object.create||function(t,e){var n;return null!==t?(s.prototype=r(t),n=new s,s.prototype=null,n[a]=t):n=u(),void 0===e?n:o(n,e)}},function(t,e,n){t.exports=n(6)},function(t,e,n){"use strict";var r=n(20),o=n(28),i=n(33),a=n(6),s=n(19),u=n(61),c=n(18),f=n(58),l=n(2)("iterator"),p=!([].keys&&"next"in[].keys()),d=function(){return this};t.exports=function(t,e,n,h,v,y,b){u(n,e,h);var m,g,x,k=function(t){if(!p&&t in C)return C[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},w=e+" Iterator",_="values"==v,S=!1,C=t.prototype,O=C[l]||C["@@iterator"]||v&&C[v],E=O||k(v),j=v?_?k("entries"):E:void 0,T="Array"==e&&C.entries||O;if(T&&(x=f(T.call(new t)))!==Object.prototype&&x.next&&(c(x,w,!0),r||"function"==typeof x[l]||a(x,l,d)),_&&O&&"values"!==O.name&&(S=!0,E=function(){return O.call(this)}),r&&!b||!p&&!S&&C[l]||a(C,l,E),s[e]=E,s[w]=d,v)if(m={values:_?E:k("values"),keys:y?E:k("keys"),entries:j},b)for(g in m)g in C||i(C,g,m[g]);else o(o.P+o.F*(p||S),e,m);return m}},function(t,e,n){var r=n(26);t.exports=function(t){return Object(r(t))}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(36);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(1),o=n(3),i=n(69)(!1),a=n(24)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),u=0,c=[];for(n in s)n!=a&&r(s,n)&&c.push(n);for(;e.length>u;)r(s,n=e[u++])&&(~i(c,n)||c.push(n));return c}},function(t,e,n){var r=n(8),o=n(0).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e,n){t.exports=!n(4)&&!n(7)(function(){return 7!=Object.defineProperty(n(39)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,s){var u=typeof(t=t||{}).default;"object"!==u&&"function"!==u||(t=t.default);var c,f="function"==typeof t?t.options:t;if(e&&(f.render=e,f.staticRenderFns=n,f._compiled=!0),r&&(f.functional=!0),i&&(f._scopeId=i),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},f._ssrRegister=c):o&&(c=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(f.functional){f._injectStyles=c;var l=f.render;f.render=function(t,e){return c.call(e),l(t,e)}}else{var p=f.beforeCreate;f.beforeCreate=p?[].concat(p,c):[c]}return{exports:t,options:f}}n.d(e,"a",function(){return r})},function(t,e,n){"use strict";function r(t,e){for(var n=[],r={},o=0;o<e.length;o++){var i=e[o],a=i[0],s={id:t+":"+o,css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):n.push(r[a]={id:a,parts:[s]})}return n}n.r(e),n.d(e,"default",function(){return h});var o="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},a=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,u=0,c=!1,f=function(){},l=null,p="data-vue-ssr-id",d="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(t,e,n,o){c=n,l=o||{};var a=r(t,e);return v(a),function(e){for(var n=[],o=0;o<a.length;o++){var s=a[o];(u=i[s.id]).refs--,n.push(u)}e?v(a=r(t,e)):a=[];for(o=0;o<n.length;o++){var u;if(0===(u=n[o]).refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete i[u.id]}}}}function v(t){for(var e=0;e<t.length;e++){var n=t[e],r=i[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(b(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var a=[];for(o=0;o<n.parts.length;o++)a.push(b(n.parts[o]));i[n.id]={id:n.id,refs:1,parts:a}}}}function y(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function b(t){var e,n,r=document.querySelector("style["+p+'~="'+t.id+'"]');if(r){if(c)return f;r.parentNode.removeChild(r)}if(d){var o=u++;r=s||(s=y()),e=x.bind(null,r,o,!1),n=x.bind(null,r,o,!0)}else r=y(),e=function(t,e){var n=e.css,r=e.media,o=e.sourceMap;r&&t.setAttribute("media",r);l.ssrId&&t.setAttribute(p,e.id);o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}var m,g=(m=[],function(t,e){return m[t]=e,m.filter(Boolean).join("\n")});function x(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=g(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}},function(t,e,n){n(16)("observable")},function(t,e,n){n(16)("asyncIterator")},function(t,e){},function(t,e,n){var r=n(9),o=n(12),i=n(3),a=n(27),s=n(1),u=n(40),c=Object.getOwnPropertyDescriptor;e.f=n(4)?c:function(t,e){if(t=i(t),e=a(e,!0),u)try{return c(t,e)}catch(t){}if(s(t,e))return o(!r.f.call(t,e),t[e])}},function(t,e,n){var r=n(3),o=n(31).f,i={}.toString,a="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return a&&"[object Window]"==i.call(t)?function(t){try{return o(t)}catch(t){return a.slice()}}(t):o(r(t))}},function(t,e,n){var r=n(36);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){var r=n(11),o=n(21),i=n(9);t.exports=function(t){var e=r(t),n=o.f;if(n)for(var a,s=n(t),u=i.f,c=0;s.length>c;)u.call(t,a=s[c++])&&e.push(a);return e}},function(t,e,n){var r=n(10)("meta"),o=n(8),i=n(1),a=n(5).f,s=0,u=Object.isExtensible||function(){return!0},c=!n(7)(function(){return u(Object.preventExtensions({}))}),f=function(t){a(t,r,{value:{i:"O"+ ++s,w:{}}})},l=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!u(t))return"F";if(!e)return"E";f(t)}return t[r].i},getWeak:function(t,e){if(!i(t,r)){if(!u(t))return!0;if(!e)return!1;f(t)}return t[r].w},onFreeze:function(t){return c&&l.NEED&&u(t)&&!i(t,r)&&f(t),t}}},function(t,e,n){"use strict";var r=n(0),o=n(1),i=n(4),a=n(28),s=n(33),u=n(50).KEY,c=n(7),f=n(23),l=n(18),p=n(10),d=n(2),h=n(17),v=n(16),y=n(49),b=n(48),m=n(13),g=n(8),x=n(3),k=n(27),w=n(12),_=n(32),S=n(47),C=n(46),O=n(5),E=n(11),j=C.f,T=O.f,K=S.f,M=r.Symbol,P=r.JSON,L=P&&P.stringify,A=d("_hidden"),F=d("toPrimitive"),N={}.propertyIsEnumerable,I=f("symbol-registry"),R=f("symbols"),U=f("op-symbols"),D=Object.prototype,B="function"==typeof M,H=r.QObject,V=!H||!H.prototype||!H.prototype.findChild,G=i&&c(function(){return 7!=_(T({},"a",{get:function(){return T(this,"a",{value:7}).a}})).a})?function(t,e,n){var r=j(D,e);r&&delete D[e],T(t,e,n),r&&t!==D&&T(D,e,r)}:T,W=function(t){var e=R[t]=_(M.prototype);return e._k=t,e},z=B&&"symbol"==typeof M.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof M},$=function(t,e,n){return t===D&&$(U,e,n),m(t),e=k(e,!0),m(n),o(R,e)?(n.enumerable?(o(t,A)&&t[A][e]&&(t[A][e]=!1),n=_(n,{enumerable:w(0,!1)})):(o(t,A)||T(t,A,w(1,{})),t[A][e]=!0),G(t,e,n)):T(t,e,n)},J=function(t,e){m(t);for(var n,r=y(e=x(e)),o=0,i=r.length;i>o;)$(t,n=r[o++],e[n]);return t},X=function(t){var e=N.call(this,t=k(t,!0));return!(this===D&&o(R,t)&&!o(U,t))&&(!(e||!o(this,t)||!o(R,t)||o(this,A)&&this[A][t])||e)},q=function(t,e){if(t=x(t),e=k(e,!0),t!==D||!o(R,e)||o(U,e)){var n=j(t,e);return!n||!o(R,e)||o(t,A)&&t[A][e]||(n.enumerable=!0),n}},Y=function(t){for(var e,n=K(x(t)),r=[],i=0;n.length>i;)o(R,e=n[i++])||e==A||e==u||r.push(e);return r},Q=function(t){for(var e,n=t===D,r=K(n?U:x(t)),i=[],a=0;r.length>a;)!o(R,e=r[a++])||n&&!o(D,e)||i.push(R[e]);return i};B||(s((M=function(){if(this instanceof M)throw TypeError("Symbol is not a constructor!");var t=p(arguments.length>0?arguments[0]:void 0),e=function(n){this===D&&e.call(U,n),o(this,A)&&o(this[A],t)&&(this[A][t]=!1),G(this,t,w(1,n))};return i&&V&&G(D,t,{configurable:!0,set:e}),W(t)}).prototype,"toString",function(){return this._k}),C.f=q,O.f=$,n(31).f=S.f=Y,n(9).f=X,n(21).f=Q,i&&!n(20)&&s(D,"propertyIsEnumerable",X,!0),h.f=function(t){return W(d(t))}),a(a.G+a.W+a.F*!B,{Symbol:M});for(var Z="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),tt=0;Z.length>tt;)d(Z[tt++]);for(var et=E(d.store),nt=0;et.length>nt;)v(et[nt++]);a(a.S+a.F*!B,"Symbol",{for:function(t){return o(I,t+="")?I[t]:I[t]=M(t)},keyFor:function(t){if(!z(t))throw TypeError(t+" is not a symbol!");for(var e in I)if(I[e]===t)return e},useSetter:function(){V=!0},useSimple:function(){V=!1}}),a(a.S+a.F*!B,"Object",{create:function(t,e){return void 0===e?_(t):J(_(t),e)},defineProperty:$,defineProperties:J,getOwnPropertyDescriptor:q,getOwnPropertyNames:Y,getOwnPropertySymbols:Q}),P&&a(a.S+a.F*(!B||c(function(){var t=M();return"[null]"!=L([t])||"{}"!=L({a:t})||"{}"!=L(Object(t))})),"JSON",{stringify:function(t){for(var e,n,r=[t],o=1;arguments.length>o;)r.push(arguments[o++]);if(n=e=r[1],(g(e)||void 0!==t)&&!z(t))return b(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!z(e))return e}),r[1]=e,L.apply(P,r)}}),M.prototype[F]||n(6)(M.prototype,F,M.prototype.valueOf),l(M,"Symbol"),l(Math,"Math",!0),l(r.JSON,"JSON",!0)},function(t,e,n){n(51),n(45),n(44),n(43),t.exports=n(14).Symbol},function(t,e,n){t.exports={default:n(52),__esModule:!0}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e){t.exports=function(){}},function(t,e,n){"use strict";var r=n(55),o=n(54),i=n(19),a=n(3);t.exports=n(34)(Array,"Array",function(t,e){this._t=a(t),this._i=0,this._k=e},function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e,n){n(56);for(var r=n(0),o=n(6),i=n(19),a=n(2)("toStringTag"),s="CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,TextTrackList,TouchList".split(","),u=0;u<s.length;u++){var c=s[u],f=r[c],l=f&&f.prototype;l&&!l[a]&&o(l,a,c),i[c]=i.Array}},function(t,e,n){var r=n(1),o=n(35),i=n(24)("IE_PROTO"),a=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,i)?t[i]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?a:null}},function(t,e,n){var r=n(0).document;t.exports=r&&r.documentElement},function(t,e,n){var r=n(5),o=n(13),i=n(11);t.exports=n(4)?Object.defineProperties:function(t,e){o(t);for(var n,a=i(e),s=a.length,u=0;s>u;)r.f(t,n=a[u++],e[n]);return t}},function(t,e,n){"use strict";var r=n(32),o=n(12),i=n(18),a={};n(6)(a,n(2)("iterator"),function(){return this}),t.exports=function(t,e,n){t.prototype=r(a,{next:o(1,n)}),i(t,e+" Iterator")}},function(t,e,n){var r=n(25),o=n(26);t.exports=function(t){return function(e,n){var i,a,s=String(o(e)),u=r(n),c=s.length;return u<0||u>=c?t?"":void 0:(i=s.charCodeAt(u))<55296||i>56319||u+1===c||(a=s.charCodeAt(u+1))<56320||a>57343?t?s.charAt(u):i:t?s.slice(u,u+2):a-56320+(i-55296<<10)+65536}}},function(t,e,n){"use strict";var r=n(62)(!0);n(34)(String,"String",function(t){this._t=String(t),this._i=0},function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})})},function(t,e,n){n(63),n(57),t.exports=n(17).f("iterator")},function(t,e,n){t.exports={default:n(64),__esModule:!0}},function(t,e,n){"use strict";e.__esModule=!0;var r=a(n(65)),o=a(n(53)),i="function"==typeof o.default&&"symbol"==typeof r.default?function(t){return typeof t}:function(t){return t&&"function"==typeof o.default&&t.constructor===o.default&&t!==o.default.prototype?"symbol":typeof t};function a(t){return t&&t.__esModule?t:{default:t}}e.default="function"==typeof o.default&&"symbol"===i(r.default)?function(t){return void 0===t?"undefined":i(t)}:function(t){return t&&"function"==typeof o.default&&t.constructor===o.default&&t!==o.default.prototype?"symbol":void 0===t?"undefined":i(t)}},function(t,e,n){var r=n(25),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):i(t,e)}},function(t,e,n){var r=n(25),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(3),o=n(68),i=n(67);t.exports=function(t){return function(e,n,a){var s,u=r(e),c=o(u.length),f=i(a,c);if(t&&n!=n){for(;c>f;)if((s=u[f++])!=s)return!0}else for(;c>f;f++)if((t||f in u)&&u[f]===n)return t||f||0;return!t&&-1}}},function(t,e,n){"use strict";var r=n(11),o=n(21),i=n(9),a=n(35),s=n(37),u=Object.assign;t.exports=!u||n(7)(function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach(function(t){e[t]=t}),7!=u({},t)[n]||Object.keys(u({},e)).join("")!=r})?function(t,e){for(var n=a(t),u=arguments.length,c=1,f=o.f,l=i.f;u>c;)for(var p,d=s(arguments[c++]),h=f?r(d).concat(f(d)):r(d),v=h.length,y=0;v>y;)l.call(d,p=h[y++])&&(n[p]=d[p]);return n}:u},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var r=n(71);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var r=n(28);r(r.S+r.F,"Object",{assign:n(70)})},function(t,e,n){n(73),t.exports=n(14).Object.assign},function(t,e,n){t.exports={default:n(74),__esModule:!0}},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(a=r,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),i=r.sources.map(function(t){return"/*# sourceURL="+r.sourceRoot+t+" */"});return[n].concat(i).concat([o]).join("\n")}var a;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e,n){(t.exports=n(76)(!1)).push([t.i,'\n.KeyboardComponent\n.KeyboardComponent *[data-v-ed520b94]{\n  box-sizing: border-box;\n}\n.KeyboardComponent[data-v-ed520b94]{\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  z-index: 300;\n  width: 100%;\n  padding: 2.5px;\n  font-size: 22px;\n  background-color: #FFF;\n  border: 1px solid #f1f1ff;\n}\n.KeyboardComponent .icon[data-v-ed520b94] {\n  width: 1em;\n  height: 1em;\n  stroke-width: 0;\n  fill: currentColor;\n  stroke: currentColor;\n  display: inline-block;\n}\n.KeyboardComponent .key-row[data-v-ed520b94]{display: flex;\n}\n.KeyboardComponent .buttons[data-v-ed520b94]{width: 100%;\n}\n.KeyboardComponent button[data-v-ed520b94],\n.KeyboardComponent button.enter[data-v-ed520b94]:after{\n  vertical-align: middle;\n  display: inline-flex;\n  align-items: center;\n  flex-direction: column;\n  justify-content: space-around;\n  flex: 50;\n  position: relative;\n  height: 50px;\n  margin: 2.5px;\n  padding: 0;\n  border-radius: 3px;\n  color: #FFF;\n  font-size: 18px;\n  font-weight: normal;\n  border: 1px solid #000;\n  background-color: #333;\n  cursor: pointer;\n}\n.KeyboardComponent button[data-v-ed520b94]:focus{\n  outline: none;\n}\n.KeyboardComponent button .text[data-v-ed520b94]:first-child{padding-top: 2px;\n}\n.KeyboardComponent button .text.right-bottom[data-v-ed520b94]{\n  right: 5px;\n  bottom: 1px;\n  font-size: 0.6em;\n  position: absolute;\n}\n.KeyboardComponent button.enter[data-v-ed520b94]{border-radius: 3px 3px 0 3px;\n}\n.KeyboardComponent button.enter .text[data-v-ed520b94]{\n  top: 5px;\n  right: -8px;\n  position: relative;\n}\n.KeyboardComponent button.enter[data-v-ed520b94]:after{\n  content: "";\n  margin: 0;\n  top: 100%;\n  right: -1px;\n  height: 57px;\n  border-top: 0;\n  position: absolute;\n  border-radius: 0 0 3px 3px;\n}\n.KeyboardComponent button.active[data-v-ed520b94],\n.KeyboardComponent button[data-v-ed520b94]:active,\n.KeyboardComponent button.enter[data-v-ed520b94]:active:after{\n  color: #333;\n  background-color: #FFF;\n}\n.KeyboardComponent.light button[data-v-ed520b94]{\n  color: #333;\n  border: 1px solid #e8e8e8;\n  background-color: #f3f3f3;\n}\n.KeyboardComponent.light button.active[data-v-ed520b94],\n.KeyboardComponent.light button[data-v-ed520b94]:active,\n.KeyboardComponent.light button.enter[data-v-ed520b94]:active:after{\n  color: #FFF;\n  border-color: #000;\n  background-color: #333;\n}\n.slideUp-enter-active[data-v-ed520b94],\n.slideUp-leave-active[data-v-ed520b94]{\n  transition: transform 0.1s ease, opacity 0.1s linear;\n}\n.slideUp-enter[data-v-ed520b94],\n.slideUp-leave-to[data-v-ed520b94]{\n  opacity: 0;\n  transform: translateY(20px);\n}\n.slideUp-enter-to[data-v-ed520b94],\n.slideUp-leave[data-v-ed520b94]{\n  opacity: 1;\n  transform: translateY(0);\n}\n',""])},function(t,e,n){var r=n(77);"string"==typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);(0,n(42).default)("3a093e0c",r,!1,{})},function(t,e,n){"use strict";n.r(e);var r=n(15),o=n.n(r);for(var i in r)"default"!==i&&function(t){n.d(e,t,function(){return r[t]})}(i);var a=n(29),s=n(41),u=!1;var c=function(t){u||n(78)},f=Object(s.a)(o.a,a.a,a.b,!1,c,"data-v-ed520b94",null);f.options.__file="src/FocusKeyboard.vue",e.default=f.exports},function(t,e,n){"use strict";var r=n(79);t.exports={component:r,layouts:n(30),install:function(t){t.component(r.default.name,r.default)}}}])});


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Focus Keyboard</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 | </body>
12 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vue-focus-keyboard",
 3 | 	"version": "1.0.1",
 4 | 	"description": "A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!",
 5 | 	"main": "dist/vue-focus-keyboard.js",
 6 | 	"scripts": {
 7 | 		"build": "node webpack.build.conf.js",
 8 | 		"dev": "webpack-dev-server --config webpack.dev.conf.js",
 9 | 		"demo": "node webpack.demo.js"
10 | 	},
11 | 	"repository": {
12 | 		"type": "git",
13 | 		"url": "git+https://github.com/SinanMtl/vue-focus-keyboard.git"
14 | 	},
15 | 	"keywords": [
16 | 		"component",
17 | 		"keyboard",
18 | 		"vue",
19 | 		"quick",
20 | 		"plug",
21 | 		"and",
22 | 		"play",
23 | 		"focus"
24 | 	],
25 | 	"author": "Sinan Mutlu <sinanm17@gmail.com>",
26 | 	"license": "MIT",
27 | 	"bugs": {
28 | 		"url": "https://github.com/SinanMtl/vue-focus-keyboard/issues"
29 | 	},
30 | 	"homepage": "https://github.com/SinanMtl/vue-focus-keyboard#readme",
31 | 	"dependencies": {
32 | 		"babel-runtime": "^6.26.0",
33 | 		"vue": "^2.4.2"
34 | 	},
35 | 	"devDependencies": {
36 | 		"babel-core": "^6.26.0",
37 | 		"babel-loader": "^7.1.4",
38 | 		"babel-plugin-transform-runtime": "^6.23.0",
39 | 		"babel-preset-es2015": "^6.24.1",
40 | 		"babel-preset-stage-0": "^6.24.1",
41 | 		"chalk": "^2.3.2",
42 | 		"copy-webpack-plugin": "^4.5.1",
43 | 		"css-loader": "^0.28.10",
44 | 		"extract-text-webpack-plugin": "^3.0.2",
45 | 		"friendly-errors-webpack-plugin": "^1.6.1",
46 | 		"html-webpack-plugin": "^3.1.0",
47 | 		"ora": "^2.0.0",
48 | 		"stats-webpack-plugin": "^0.6.2",
49 | 		"url-loader": "^1.0.1",
50 | 		"vue-html-loader": "^1.2.4",
51 | 		"vue-loader": "^14.2.1",
52 | 		"vue-style-loader": "^4.0.2",
53 | 		"vue-template-compiler": "^2.4.2",
54 | 		"webpack": "^4.1.1",
55 | 		"webpack-cli": "^2.0.12",
56 | 		"webpack-dev-server": "^3.1.1"
57 | 	},
58 | 	"browser": {
59 | 		"vue": "vue/dist/vue.common.js"
60 | 	},
61 | 	"files": [
62 | 		"dist/vue-focus-keyboard.js",
63 | 		"dist/static/icons.svg"
64 | 	]
65 | }
66 | 


--------------------------------------------------------------------------------
/src/FocusKeyboard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="slideUp">
  3 |     <div class="KeyboardComponent" v-if="show" :class="theme" @click="input.focus()" @contextmenu.prevent>
  4 |       <div class="buttons" :style="{width: keyboardWidth}">
  5 |         <div class="key-row" v-for="(row, index) in currentButtons" :key="index">
  6 |           <button type="button" v-for="(key, i) in row" :key="i" :class="getClass(key)" :style="getStyle(key)" @mousedown="pressAndHold($event, key)" @mouseup="pressAndHold($event, key)" @click.prevent="buttonPress(key)" @touchstart="pressAndHold($event, key)" @touchend="pressAndHold($event, key)">
  7 |             <div class="text">
  8 |               <svg class="icon" v-if="getIconByMetaKey(key)">
  9 |                 <use :xlink:href="`static/icons.svg#icon-${getIconByMetaKey(key)}`"></use>
 10 |               </svg>
 11 |               <template v-else-if="/(ctrl(l|r))/g.test(key)">Ctrl</template>
 12 |               <template v-else-if="key === '{alt}'">Alt</template>
 13 |               <template v-else-if="key === '{altgr}'">Alt Gr</template>
 14 |               <template v-else-if="/(space|empty)/g.test(key)">&nbsp;</template>
 15 |               <template v-else>{{ key }}</template>
 16 |             </div>
 17 |           </button>
 18 |         </div>
 19 |       </div>
 20 |     </div>
 21 |   </transition>
 22 | </template>
 23 | 
 24 | <script>
 25 |   import layout from './layout'
 26 | 
 27 |   let eventKeyDown = new Event('keydown')
 28 |   let eventKeyUp = new Event('keyup')
 29 |   let eventKeyPress = new Event('keypress')
 30 |   let eventInput = new Event('input')
 31 |   let isHoldDown = false
 32 | 
 33 |   const debounce = (func, wait, immediate) => {
 34 |     let timeout
 35 |     return function () {
 36 |       let context = this
 37 |       let args = arguments
 38 |       let later = function () {
 39 |         timeout = null
 40 |         if (!immediate) func.apply(context, args)
 41 |       }
 42 |       let callNow = immediate && !timeout
 43 |       clearTimeout(timeout)
 44 |       timeout = setTimeout(later, wait)
 45 |       if (callNow) func.apply(context, args)
 46 |     }
 47 |   }
 48 | 
 49 |   export default {
 50 |     name: 'FocusKeyboard',
 51 |     props: {
 52 |       keyboardWidth: {
 53 |         type: [String, Number],
 54 |         default: '100%'
 55 |       },
 56 |       theme: {type: String, default: ''},
 57 |       keyboard: {
 58 |         type: [Object, String],
 59 |         default () { return 'us_international' }
 60 |       }
 61 |     },
 62 |     data () {
 63 |       return {
 64 |         show: false,
 65 |         shift: false,
 66 |         capslock: false,
 67 |         ctrl: false,
 68 |         alt: false,
 69 |         input: null
 70 |       }
 71 |     },
 72 |     computed: {
 73 |       layout () {
 74 |         if (
 75 |           typeof this.keyboard === 'object' &&
 76 |           this.keyboard.hasOwnProperty('default')
 77 |         ) {
 78 |           return this.keyboard
 79 |         } else {
 80 |           if (
 81 |             typeof this.keyboard === 'string' &&
 82 |             layout.hasOwnProperty(this.keyboard)
 83 |           ) {
 84 |             return layout[this.keyboard]
 85 |           } else {
 86 |             return layout[layout.default]
 87 |           }
 88 |         }
 89 |       },
 90 |       buttons () {
 91 |         let list = {}
 92 |         for (let stateName in this.layout) {
 93 |           let state = this.layout[stateName]
 94 |           if (stateName !== '_metaKeys') {
 95 |             list[stateName] = []
 96 |             state.forEach((row, key) => {
 97 |               list[stateName].push(row.split(' '))
 98 |             })
 99 |           }
100 |         }
101 |         return list
102 |       },
103 |       currentButtons () {
104 |         let state = 'default'
105 |         if (this.shift) {
106 |           state = 'shifted'
107 |           if (this.capslock) {
108 |             state = 'shifted_capsed'
109 |           } else if (this.alt) {
110 |             state = 'shifted_alted'
111 |           }
112 |         } else if (this.capslock) {
113 |           state = 'capsed'
114 |         } else if (this.alt) {
115 |           state = 'alted'
116 |         }
117 |         return this.buttons[state]
118 |       }
119 |     },
120 |     methods: {
121 |       getIconByMetaKey (key) {
122 |         let metaIconKeys = [
123 |           '{backspace}', '{shiftl}',
124 |           '{shiftr}', '{enter}',
125 |           '{capslock}', '{tab}'
126 |         ]
127 |         if (metaIconKeys.indexOf(key) > -1) {
128 |           let keyName = key.replace(/({|})/g, '')
129 |           if (/(shift(l|r))/.test(keyName)) {
130 |             return 'shift'
131 |           }
132 |           return keyName
133 |         } else {
134 |           return null
135 |         }
136 |       },
137 |       getClass (key) {
138 |         if (
139 |           (this.capslock && key === '{capslock}') ||
140 |           (this.ctrl && /ctrl(l|r)/g.test(key)) ||
141 |           (this.alt && /alt(gr)?/g.test(key)) ||
142 |           (this.shift && /shift(l|r)?/g.test(key))
143 |         ) return 'active'
144 |         return ''
145 |       },
146 |       getStyle (key) {
147 |         let keyName = key.replace(/({|})/g, '')
148 |         let metaKeys = layout._metaKeys
149 | 
150 |         if (this.layout.hasOwnProperty('_metaKeys')) {
151 |           metaKeys = Object.assign({},
152 |             metaKeys,
153 |             this.layout._metaKeys
154 |           )
155 |         }
156 | 
157 |         if (metaKeys.hasOwnProperty(keyName)) {
158 |           let metaKey = metaKeys[keyName]
159 |           return {flex: metaKey.width}
160 |         } else {
161 |           return {}
162 |         }
163 |       },
164 |       open () {
165 |         this.show = true
166 |       },
167 |       close () {
168 |         this.show = false
169 |         this.input = null
170 |         clearInterval(isHoldDown)
171 |         isHoldDown = false
172 |       },
173 |       moveCursor (start, end) {
174 |         if (this.input) {
175 |           this.input.selectionStart = start || 0
176 |           this.input.selectionEnd = end || start || 0
177 |         }
178 |       },
179 |       isInput (input) {
180 |         let expectedElements = ['INPUT', 'TEXTAREA']
181 |         let isContentEditable = input.getAttribute('contenteditable')
182 |         return expectedElements.indexOf(input.nodeName) > -1 || !!isContentEditable
183 |       },
184 |       isSupportedType (input) {
185 |         let expectedTypes = [
186 |           'text', 'password',
187 |           'search', 'tel', 'url',
188 |           'email', 'number'
189 |         ]
190 |         let isContentEditable = input.getAttribute('contenteditable')
191 |         let isTextarea = input.nodeName === 'TEXTAREA'
192 |         return expectedTypes.indexOf(input.type) > -1 || !!isContentEditable || isTextarea
193 |       },
194 |       backspace (cursor) {
195 |         let val = this.input.value || this.input.innerHTML
196 |         let splitted = val.split('')
197 |         splitted.splice(cursor.start, cursor.end - cursor.start)
198 |         return splitted.join('')
199 |       },
200 |       setMetaKey (key) {
201 |         switch (key) {
202 |           case '{capslock}':
203 |             this.capslock = !this.capslock
204 |             break
205 | 
206 |           case '{shiftl}':
207 |           case '{shiftr}':
208 |             this.shift = !this.shift
209 |             break
210 | 
211 |           case '{ctrll}':
212 |           case '{ctrlr}':
213 |             this.ctrl = !this.ctrl
214 |             break
215 | 
216 |           case '{alt}':
217 |           case '{altgr}':
218 |             this.alt = !this.alt
219 |             break
220 |         }
221 |       },
222 |       setKey (cursor, key) {
223 |         let val = this.input.value || this.input.innerHTML
224 |         let splitted = val.split('')
225 |         splitted.splice(cursor.start, 0, key)
226 |         return splitted.join('')
227 |       },
228 |       ctrlCombination (key = '') {
229 |         if (typeof key !== 'string') return false
230 |         switch (key.toLowerCase()) {
231 |           case 'a':
232 |             this.input.select()
233 |             break
234 | 
235 |           case 'z':
236 |             document.execCommand('undo', false, null)
237 |             break
238 | 
239 |           case 'y':
240 |             document.execCommand('redo', false, null)
241 |             break
242 | 
243 |           case 'c':
244 |             document.execCommand('copy', false, null)
245 |             break
246 | 
247 |           case 'x':
248 |             document.execCommand('cut', false, null)
249 |             break
250 |         }
251 |         this.ctrl = false
252 |       },
253 |       setValue (key, cursor) {
254 |         let val = ''
255 |         switch (key) {
256 |           case '{backspace}':
257 |             if (cursor.start === cursor.end) cursor.start -= 1
258 |             val = this.backspace(cursor)
259 |             break
260 |   
261 |           case '{space}':
262 |             val = this.setKey(cursor, ' ')
263 |             break
264 |   
265 |           case '{tab}':
266 |             val = this.setKey(cursor, '\t')
267 |             break
268 |   
269 |           case '{enter}':
270 |             if (this.input.nodeName === 'TEXTAREA') {
271 |               val = this.setKey(cursor, "\n")
272 |             } else {
273 |               if (this.input.form) {
274 |                 this.input.form.submit()
275 |               }
276 |             }
277 |             break
278 |   
279 |           default:
280 |             val = this.setKey(cursor, key)
281 |             break
282 |         }
283 | 
284 |         if (key === '{enter}' && this.input.nodeName !== 'TEXTAREA') {
285 |           return false
286 |         }
287 | 
288 |         let isContentEditable = !!this.input.getAttribute('contenteditable')
289 |         if (isContentEditable) {
290 |           this.input.innerHTML = val
291 |         } else {
292 |           this.input.value = val
293 |         }
294 |       },
295 |       buttonPress (key) {
296 |         if (!this.input) return
297 |         let cursor = this.getCursor()
298 |         let notWrite = [
299 |           '{shiftl}', '{shiftr}',
300 |           '{capslock}', '{ctrll}',
301 |           '{ctrlr}', '{alt}', '{altgr}'
302 |         ]
303 | 
304 |         if (notWrite.indexOf(key) > -1) {
305 |           this.setMetaKey(key)
306 |           return
307 |         }
308 | 
309 |         if (this.ctrl) {
310 |           this.ctrlCombination(key)
311 |           return
312 |         }
313 | 
314 |         this.shift = false
315 |         this.ctrl = false
316 |         this.alt = false
317 | 
318 |         this.setValue(key, cursor)
319 |         this.triggerEvents()
320 |         this.input.focus()
321 | 
322 |         if (key === '{backspace}') {
323 |           this.moveCursor(cursor.start)
324 |         } else {
325 |           this.moveCursor(cursor.start + 1, cursor.end + 1)
326 |         }
327 |       },
328 |       triggerEvents () {
329 |         this.input.dispatchEvent(eventInput)
330 |         this.input.dispatchEvent(eventKeyDown)
331 |         this.input.dispatchEvent(eventKeyPress)
332 |         this.input.dispatchEvent(eventKeyUp)
333 |       },
334 |       pressAndHold: debounce(function (e, key) {
335 |         if (key === '{backspace}') {
336 |           if (e.type === 'mouseup' || e.type === 'touchend') {
337 |             clearInterval(isHoldDown)
338 |             isHoldDown = false
339 |           } else {
340 |             if (!isHoldDown) {
341 |               isHoldDown = setInterval(() => {
342 |                 this.buttonPress(key)
343 |               }, 30)
344 |             }
345 |           }
346 |         }
347 |       }, 150),
348 |       getCursor () {
349 |         if (this.isSupportedType(this.input)) {
350 |           let pos = {
351 |             start: this.input.selectionStart || 0,
352 |             end: this.input.selectionEnd || 0
353 |           }
354 |           if (pos.end < pos.start) {
355 |             pos.end = pos.start
356 |           }
357 |           return pos
358 |         } else {
359 |           let val = this.input.value || this.input.innerHTML
360 |           return {
361 |             start: val.length,
362 |             end: val.length
363 |           }
364 |         }
365 |       },
366 |       getParents (el, parentSelector) {
367 |         // If no parentSelector defined will bubble up all the way to *document*
368 |         if (parentSelector === undefined) {
369 |           parentSelector = document
370 |         }
371 | 
372 |         let parents = []
373 |         let p = el.parentNode
374 | 
375 |         while (p !== parentSelector) {
376 |           let o = p
377 |           parents.push(o)
378 |           p = o.parentNode
379 |         }
380 |         parents.push(parentSelector) // Push that parentSelector you wanted to stop at
381 |         return parents
382 |       },
383 |       onFocusInput (e) {
384 |         if (this.isInput(e.target) && this.isSupportedType(e.target)) {
385 |           this.input = e.target
386 |           this.input.addEventListener('keydown', () => {})
387 |           this.open()
388 |         }
389 |       },
390 |       onDocumentClick (e) {
391 |         // console.log(this.getParents(e.target))
392 |         if (
393 |           this.getParents(e.target).find(x => x === this.$el) ||
394 |           e.target === this.$el ||
395 |           e.target === this.input
396 |         ) {
397 |           return false
398 |         }
399 |         if (this.isInput(e.target) && this.isSupportedType(e.target)) {
400 |           this.input = e.target
401 |           return false
402 |         }
403 |         if (this.input) this.input.blur()
404 |         this.close()
405 |       },
406 |       initEvents () {
407 |         // Watching focues input
408 |         document.addEventListener('focus', this.onFocusInput, true)
409 |         document.addEventListener('click', this.onDocumentClick)
410 |       }
411 |     },
412 |     mounted () {
413 |       this.initEvents()
414 |     }
415 |   }
416 | </script>
417 | 
418 | <style scoped>
419 |   .KeyboardComponent
420 |   .KeyboardComponent *{
421 |     box-sizing: border-box;
422 |   }
423 |   .KeyboardComponent{
424 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
425 |     display: flex;
426 |     align-items: center;
427 |     justify-content: center;
428 |     position: fixed;
429 |     left: 0;
430 |     bottom: 0;
431 |     z-index: 300;
432 |     width: 100%;
433 |     padding: 2.5px;
434 |     font-size: 22px;
435 |     background-color: #FFF;
436 |     border: 1px solid #f1f1ff;
437 |   }
438 | 
439 |   .KeyboardComponent .icon {
440 |     width: 1em;
441 |     height: 1em;
442 |     stroke-width: 0;
443 |     fill: currentColor;
444 |     stroke: currentColor;
445 |     display: inline-block;
446 |   }
447 | 
448 |   .KeyboardComponent .key-row{display: flex;}
449 |   .KeyboardComponent .buttons{width: 100%;}
450 | 
451 |   .KeyboardComponent button,
452 |   .KeyboardComponent button.enter:after{
453 |     vertical-align: middle;
454 |     display: inline-flex;
455 |     align-items: center;
456 |     flex-direction: column;
457 |     justify-content: space-around;
458 |     flex: 50;
459 |     position: relative;
460 |     height: 50px;
461 |     margin: 2.5px;
462 |     padding: 0;
463 |     border-radius: 3px;
464 |     color: #FFF;
465 |     font-size: 18px;
466 |     font-weight: normal;
467 |     border: 1px solid #000;
468 |     background-color: #333;
469 |     cursor: pointer;
470 |   }
471 | 
472 |   .KeyboardComponent button:focus{
473 |     outline: none;
474 |   }
475 | 
476 |   .KeyboardComponent button .text:first-child{padding-top: 2px;}
477 | 
478 |   .KeyboardComponent button .text.right-bottom{
479 |     right: 5px;
480 |     bottom: 1px;
481 |     font-size: 0.6em;
482 |     position: absolute;
483 |   }
484 | 
485 |   .KeyboardComponent button.enter{border-radius: 3px 3px 0 3px;}
486 | 
487 |   .KeyboardComponent button.enter .text{
488 |     top: 5px;
489 |     right: -8px;
490 |     position: relative;
491 |   }
492 | 
493 |   .KeyboardComponent button.enter:after{
494 |     content: "";
495 |     margin: 0;
496 |     top: 100%;
497 |     right: -1px;
498 |     height: 57px;
499 |     border-top: 0;
500 |     position: absolute;
501 |     border-radius: 0 0 3px 3px;
502 |   }
503 | 
504 |   .KeyboardComponent button.active,
505 |   .KeyboardComponent button:active,
506 |   .KeyboardComponent button.enter:active:after{
507 |     color: #333;
508 |     background-color: #FFF;
509 |   }
510 | 
511 |   .KeyboardComponent.light button{
512 |     color: #333;
513 |     border: 1px solid #e8e8e8;
514 |     background-color: #f3f3f3;
515 |   }
516 | 
517 |   .KeyboardComponent.light button.active,
518 |   .KeyboardComponent.light button:active,
519 |   .KeyboardComponent.light button.enter:active:after{
520 |     color: #FFF;
521 |     border-color: #000;
522 |     background-color: #333;
523 |   }
524 | 
525 |   .slideUp-enter-active,
526 |   .slideUp-leave-active{
527 |     transition: transform 0.1s ease, opacity 0.1s linear;
528 |   }
529 | 
530 |   .slideUp-enter,
531 |   .slideUp-leave-to{
532 |     opacity: 0;
533 |     transform: translateY(20px);
534 |   }
535 | 
536 |   .slideUp-enter-to,
537 |   .slideUp-leave{
538 |     opacity: 1;
539 |     transform: translateY(0);
540 |   }
541 | </style>
542 | 


--------------------------------------------------------------------------------
/src/layout.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 | 	default: 'us_international',
  3 | 	_metaKeys: {
  4 | 		backspace: { width: 110 },
  5 | 		tab: { width: 80 },
  6 | 		enter: { width: 80 },
  7 | 		caps: { width: 110 },
  8 | 		shiftl: { width: 80 },
  9 | 		shiftr: { width: 135 },
 10 | 		ctrll: { width: 105 },
 11 | 		ctrlr: { width: 105 },
 12 | 		alt: { width: 80 },
 13 | 		altgr: { width: 80 },
 14 | 		space: { width: 435 }
 15 | 	},
 16 | 	us_international: {
 17 | 		default: [
 18 | 			'§ 1 2 3 4 5 6 7 8 9 0 - = {backspace}',
 19 | 			'{tab} q w e r t y u i o p [ ] {enter}',
 20 | 			`{capslock} a s d f g h j k l ; ' \\`,
 21 | 			'{shiftl} ` z x c v b n m , . / {shiftr}',
 22 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 23 | 		],
 24 | 		shifted: [
 25 | 			'± ! @ # $ % ˆ & * ( ) _ + {backspace}',
 26 | 			'{tab} Q W E R T Y U I O P { } {enter}',
 27 | 			'{capslock} A S D F G H J K L : " |',
 28 | 			'{shiftl} ˜ Z X C V B N M < > ? {shiftr}',
 29 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 30 | 		],
 31 | 		capsed: [
 32 | 			'§ 1 2 3 4 5 6 7 8 9 0 - = {backspace}',
 33 | 			'{tab} Q W E R T Y U I O P [ ] {enter}',
 34 | 			`{capslock} A S D F G H J K L ; ' \\`,
 35 | 			'{shiftl} ` Z X C V B N M , . / {shiftr}',
 36 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 37 | 		],
 38 | 		alted: [
 39 | 			'§ ¡ ™ £ ¢ ∞ § ¶ • ª º – ≠ {backspace}',
 40 | 			'{tab} œ ∑ ´ ® † ¥ ¨ ˆ ø π “ ‘ {enter}',
 41 | 			`{capslock} å ß ∂ ƒ © ˙ ∆ ˚ ¬ … æ «`,
 42 | 			'{shiftl} ` Ω ≈ ç √ ∫ ˜ µ ≤ ≥ ÷ {shiftr}',
 43 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 44 | 		],
 45 | 		shifted_capsed: [
 46 | 			'± ! @ # $ % ˆ & * ( ) _ + {backspace}',
 47 | 			'{tab} q w e r t y u i o p { } {enter}',
 48 | 			'{capslock} a s d f g h j k l : " |',
 49 | 			'{shiftl} ˜ z x c v b n m < > ? {shiftr}',
 50 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 51 | 		],
 52 | 		shifted_alted: [
 53 | 			'± ⁄ € ‹ › fi fl ‡ ° · ‚ — ± {backspace}',
 54 | 			'{tab} Œ „ ´ ‰ ˇ Á ¨ i Ø ∏ ” ’ {enter}',
 55 | 			`{capslock} Å Í Î Ï ˝ Ó Ô  Ò Ú Æ »`,
 56 | 			'{shiftl} ` ¸ ˛ Ç ◊ ı ˜ Â ¯ ˘ ¿ {shiftr}',
 57 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 58 | 		]
 59 | 	},
 60 | 	turkish_qwerty_pc: {
 61 | 		_metaKeys: {
 62 | 			backspace: { width: 110 },
 63 | 			tab: { width: 80 },
 64 | 			enter: { width: 80 },
 65 | 			caps: { width: 110 },
 66 | 			shiftl: { width: 80 },
 67 | 			shiftr: { width: 135 },
 68 | 			ctrll: { width: 105 },
 69 | 			ctrlr: { width: 105 },
 70 | 			alt: { width: 80 },
 71 | 			altgr: { width: 80 },
 72 | 			space: { width: 435 }
 73 | 		},
 74 | 		default: [
 75 | 			'" 1 2 3 4 5 6 7 8 9 0 * - {backspace}',
 76 | 			'{tab} q w e r t y u ı o p ğ ü {enter}',
 77 | 			'{capslock} a s d f g h j k l ş i ,',
 78 | 			'{shiftl} < z x c v b n m ö ç . {shiftr}',
 79 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 80 | 		],
 81 | 		shifted: [
 82 | 			"é ! ' ^ + % & / ( ) = ? _ {backspace}",
 83 | 			'{tab} Q W E R T Y U I O P Ğ Ü {enter}',
 84 | 			'{capslock} A S D F G H J K L Ş İ ;',
 85 | 			'{shiftl} > Z X C V B N M Ö Ç : {shiftr}',
 86 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 87 | 		],
 88 | 		capsed: [
 89 | 			'" 1 2 3 4 5 6 7 8 9 0 * - {backspace}',
 90 | 			'{tab} Q W E R T Y U I O P Ğ Ü {enter}',
 91 | 			'{capslock} A S D F G H J K L Ş İ ,',
 92 | 			'{shiftl} < Z X C V B N M Ö Ç . {shiftr}',
 93 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
 94 | 		],
 95 | 		alted: [
 96 | 			`< > £ # $ ½ § { [ ] } \\ | {backspace}`,
 97 | 			'{tab} @ ∑ € ® ₺ ¥ ü i ö π ¨ ~ {enter}',
 98 | 			'{capslock} æ ß ∂ ƒ ğ ^ ∆ ¨ ¬ ´ æ `',
 99 | 			'{shiftl} |  ≈ ç √ ∫ ~ µ ≤ ≥ . {shiftr}',
100 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
101 | 		],
102 | 		shifted_capsed: [
103 | 			"é ! ' ^ + % & / ( ) = ? _ {backspace}",
104 | 			'{tab} q w e r t y u ı o p ğ ü {enter}',
105 | 			'{capslock} a s d f g h j k l ş i ;',
106 | 			'{shiftl} > z x c v b n m ö ç : {shiftr}',
107 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
108 | 		],
109 | 		shifted_alted: [
110 | 			'" · € © ‚ ˚ ˙ ‡ ° Ø ø — ± {backspace}',
111 | 			'{tab} Œ „ ‰ Â Ê Á Ü ı Ö ∏ ” ’ {enter}',
112 | 			'{capslock} Æ Ş Î Ï Ğ Ó Ô  Ò Ú Æ »',
113 | 			'{shiftl} Ÿ Û Ù Ç ◊ ß ˆ ˜ ¯ ˘ ¿ {shiftr}',
114 | 			'{ctrll} {alt} {space} {altgr} {ctrlr}'
115 | 		]
116 | 	},
117 | 	numeric: {
118 | 		_metaKeys: {
119 | 			enter: { width: 50 }
120 | 		},
121 | 		default: [
122 |       '{backspace}',
123 |       '7 8 9',
124 |       '6 5 4',
125 |       '3 2 1',
126 |       '0 . {enter}'
127 |     ]
128 | 	}
129 | }
130 | 


--------------------------------------------------------------------------------
/static/icons.svg:
--------------------------------------------------------------------------------
 1 | <svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 |   <defs>
 3 |     <symbol id="icon-backspace" viewBox="0 0 24 24">
 4 |       <path d="M19.5 5h-10c-1.266 0-2.834 0.807-3.57 1.837l-2.61 3.653c-0.642 0.898-1.182 1.654-1.199 1.679-0.121 0.175-0.122 0.492 0.003 0.664 0.023 0.033 0.555 0.777 1.188 1.664l2.619 3.667c0.735 1.029 2.302 1.836 3.569 1.836h10c1.379 0 2.5-1.122 2.5-2.5v-10c0-1.378-1.121-2.5-2.5-2.5zM17.207 14.793c0.391 0.391 0.391 1.023 0 1.414-0.195 0.195-0.451 0.293-0.707 0.293s-0.512-0.098-0.707-0.293l-2.293-2.293-2.293 2.293c-0.195 0.195-0.451 0.293-0.707 0.293s-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023 0-1.414l2.293-2.293-2.293-2.293c-0.391-0.391-0.391-1.023 0-1.414s1.023-0.391 1.414 0l2.293 2.293 2.293-2.293c0.391-0.391 1.023-0.391 1.414 0s0.391 1.023 0 1.414l-2.293 2.293 2.293 2.293z"></path>
 5 |     </symbol>
 6 | 
 7 |     <symbol id="icon-backspace-outline" viewBox="0 0 24 24">
 8 |       <path d="M19 21h-10c-1.436 0-3.145-0.88-3.977-2.046l-2.619-3.667c-0.629-0.881-1.157-1.621-1.188-1.661-0.246-0.344-0.249-0.894-0.008-1.241 0.018-0.025 0.561-0.783 1.204-1.686l2.608-3.653c0.835-1.167 2.546-2.046 3.98-2.046h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3zM3.229 12.999c0.215 0.299 0.498 0.696 0.806 1.125l2.618 3.667c0.451 0.633 1.57 1.209 2.348 1.209h10c0.552 0 1-0.45 1-1.001v-9.999c0-0.551-0.448-1-1-1h-10c-0.776 0-1.897 0.576-2.351 1.209l-2.608 3.652c-0.312 0.436-0.599 0.838-0.813 1.138z"></path>
 9 |       <path d="M13.707 13l2.646-2.646c0.194-0.194 0.194-0.512 0-0.707-0.195-0.194-0.513-0.194-0.707 0l-2.646 2.646-2.646-2.646c-0.195-0.194-0.513-0.194-0.707 0-0.195 0.195-0.195 0.513 0 0.707l2.646 2.646-2.646 2.646c-0.195 0.195-0.195 0.513 0 0.707 0.097 0.098 0.225 0.147 0.353 0.147s0.256-0.049 0.354-0.146l2.646-2.647 2.646 2.646c0.098 0.098 0.226 0.147 0.354 0.147s0.256-0.049 0.354-0.146c0.194-0.194 0.194-0.512 0-0.707l-2.647-2.647z"></path>
10 |     </symbol>
11 |     
12 |     <symbol id="icon-tab" viewBox="0 0 24 24">
13 |       <path d="M20.016 6h1.969v12h-1.969v-12zM11.578 7.406l1.406-1.406 6 6-6 6-1.406-1.406 3.609-3.609h-14.203v-1.969h14.203z"></path>
14 |     </symbol>
15 |     
16 |     <symbol id="icon-capslock" viewBox="0 0 16 24">
17 |       <path fill="none" stroke="currentColor" stroke-width="1.3714" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M1.056 8.229c0.053 0.128 0.177 0.212 0.315 0.213h3.086v6.514c0 0.189 0.153 0.343 0.343 0.343h6.857c0.189 0 0.343-0.153 0.343-0.343v-6.514h3.086c0.137-0.002 0.26-0.085 0.312-0.212s0.024-0.273-0.072-0.371l-6.857-6.857c-0.064-0.065-0.152-0.101-0.243-0.101s-0.179 0.037-0.243 0.101l-6.857 6.857c-0.095 0.099-0.122 0.244-0.069 0.37z"></path>
18 |       <path fill="none" stroke="currentColor" stroke-width="1.3714" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M11.657 18.062h-6.857c-0.189 0-0.343 0.153-0.343 0.343v4.114c0 0.189 0.153 0.343 0.343 0.343h6.857c0.189 0 0.343-0.153 0.343-0.343v-4.114c0-0.189-0.153-0.343-0.343-0.343z"></path>
19 |     </symbol>
20 |     
21 |     <symbol id="icon-shift" viewBox="0 0 27 24">
22 |       <path fill="none" stroke="currentColor" stroke-width="2.2857" stroke-miterlimit="4" stroke-linecap="butt" stroke-linejoin="miter" d="M1.76 13.714c0.088 0.213 0.295 0.353 0.526 0.354h5.143v7.429c0 0.316 0.256 0.571 0.571 0.571h11.429c0.316 0 0.571-0.256 0.571-0.571v-7.429h5.143c0.229-0.003 0.433-0.142 0.52-0.354s0.040-0.454-0.12-0.618l-11.429-11.429c-0.107-0.108-0.253-0.169-0.406-0.169s-0.298 0.061-0.406 0.169l-11.429 11.429c-0.158 0.165-0.203 0.407-0.114 0.617z"></path>
23 |     </symbol>
24 |     
25 |     <symbol id="icon-enter" viewBox="0 0 45 24">
26 |       <path d="M7.259 14.284l5.407 5.86c0.531 0.56 0.745 1.385 0.563 2.163s-0.734 1.392-1.447 1.609c-0.713 0.218-1.479 0.007-2.009-0.553l-9.138-9.821c-0.405-0.42-0.634-1.002-0.634-1.609s0.229-1.189 0.634-1.609l8.909-9.656c0.82-0.889 2.15-0.889 2.97 0s0.82 2.33 0 3.219l-5.407 5.86h33.581v-7.428c0-1.231 0.921-2.228 2.056-2.228s2.056 0.998 2.056 2.228v9.739c0 1.231-0.921 2.228-2.056 2.228h-35.485z"></path>
27 |     </symbol>
28 |   </defs>
29 | </svg>
30 | 


--------------------------------------------------------------------------------
/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | 
 3 | exports.assetsPath = function(_path) {
 4 | 	var assetsSubDirectory =
 5 | 		process.env.NODE_ENV === 'production'
 6 | 			? config.build.assetsSubDirectory
 7 | 			: config.dev.assetsSubDirectory
 8 | 	return path.posix.join(assetsSubDirectory, _path)
 9 | }
10 | 


--------------------------------------------------------------------------------
/webpack.build.conf.js:
--------------------------------------------------------------------------------
  1 | var ora = require('ora')
  2 | var path = require('path')
  3 | var chalk = require('chalk')
  4 | var webpack = require('webpack')
  5 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  6 | var package = require('./package.json')
  7 | 
  8 | var banner = `
  9 | /**
 10 |  * vue-focus-keyboard v${package.version}
 11 | * @description ${package.description}
 12 | * https://github.com/SinanMtl/vue-rate
 13 | * Released under the MIT License.
 14 | */
 15 | `
 16 | 
 17 | var config = {
 18 | 	entry: './dev/index.js',
 19 | 	output: {
 20 | 		path: path.resolve(__dirname, './dist'),
 21 | 		publicPath: '/dist/',
 22 | 		filename: 'vue-focus-keyboard.js',
 23 | 		library: 'VueFocusKeyboard',
 24 | 		libraryTarget: 'umd',
 25 | 		umdNamedDefine: true
 26 | 	},
 27 | 	optimization: {
 28 | 		minimize: true
 29 | 	},
 30 | 	mode: 'production',
 31 | 	devtool: false,
 32 | 	plugins: [
 33 | 		new webpack.DefinePlugin({
 34 | 			'process.env': {
 35 | 				NODE_ENV: JSON.stringify('production')
 36 | 			}
 37 | 		}),
 38 | 		new webpack.BannerPlugin({ banner, raw: true, entryOnly: true }),
 39 | 		// copy custom static assets
 40 | 		new CopyWebpackPlugin([
 41 | 			{
 42 | 				from: path.resolve(__dirname, 'static'),
 43 | 				to: path.resolve(__dirname, 'dist/static'),
 44 | 				ignore: ['.*']
 45 | 			}
 46 | 		])
 47 | 	],
 48 | 	module: {
 49 | 		rules: [
 50 | 			{
 51 | 				test: /\.js$/,
 52 | 				loader: 'babel-loader',
 53 | 				include: [path.resolve(__dirname, './dev')]
 54 | 			},
 55 | 			{
 56 | 				test: /\.vue$/,
 57 | 				loader: 'vue-loader'
 58 | 			},
 59 | 			{
 60 | 				test: /\.svg$/,
 61 | 				loader: 'url-loader',
 62 | 				options: {
 63 | 					limit: 10000,
 64 | 					name: path.posix.join('static/', '[name].[hash:7].[ext]')
 65 | 				}
 66 | 			}
 67 | 		]
 68 | 	},
 69 | 	resolve: {
 70 | 		alias: {
 71 | 			vue$: 'vue/dist/vue.common.js'
 72 | 		}
 73 | 	}
 74 | }
 75 | 
 76 | var spinner = ora('building for production...')
 77 | spinner.start()
 78 | 
 79 | webpack(config, function(err, stats) {
 80 | 	spinner.stop()
 81 | 	if (err) throw err
 82 | 	process.stdout.write(
 83 | 		stats.toString({
 84 | 			colors: true,
 85 | 			modules: false,
 86 | 			children: false,
 87 | 			chunks: false,
 88 | 			chunkModules: false
 89 | 		}) + '\n\n'
 90 | 	)
 91 | 
 92 | 	console.log(chalk.cyan('  Build complete.\n'))
 93 | 	console.log(
 94 | 		chalk.yellow(
 95 | 			'  Tip: built files are meant to be served over an HTTP server.\n' +
 96 | 				"  Opening index.html over file:// won't work.\n"
 97 | 		)
 98 | 	)
 99 | })
100 | 


--------------------------------------------------------------------------------
/webpack.demo.js:
--------------------------------------------------------------------------------
  1 | var ora = require('ora')
  2 | var path = require('path')
  3 | var chalk = require('chalk')
  4 | var webpack = require('webpack')
  5 | var HtmlWebpackPlugin = require('html-webpack-plugin')
  6 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  7 | var version = require('./package.json').version
  8 | 
  9 | function resolve(dir) {
 10 | 	return path.join(__dirname, '..', dir)
 11 | }
 12 | 
 13 | var config = {
 14 | 	entry: {
 15 | 		app: './dev/main.js'
 16 | 	},
 17 | 	output: {
 18 | 		path: path.resolve(__dirname, './demo'),
 19 | 		filename: '[name].js',
 20 | 		publicPath: './'
 21 | 	},
 22 | 	optimization: {
 23 | 		minimize: true
 24 | 	},
 25 | 	mode: 'production',
 26 | 	devtool: false,
 27 | 	plugins: [
 28 | 		new webpack.DefinePlugin({
 29 | 			'process.env': {
 30 | 				NODE_ENV: JSON.stringify('production')
 31 | 			}
 32 | 		}),
 33 | 		// copy custom static assets
 34 | 		new CopyWebpackPlugin([
 35 | 			{
 36 | 				from: path.resolve(__dirname, 'static'),
 37 | 				to: path.resolve(__dirname, 'demo/static'),
 38 | 				ignore: ['.*']
 39 | 			}
 40 | 		]),
 41 | 		new HtmlWebpackPlugin({
 42 | 			filename: './index.html',
 43 | 			template: 'index.html',
 44 | 			inject: true,
 45 | 			minify: {
 46 | 				removeComments: true,
 47 | 				collapseWhitespace: true,
 48 | 				removeAttributeQuotes: true
 49 | 				// more options:
 50 | 				// https://github.com/kangax/html-minifier#options-quick-reference
 51 | 			},
 52 | 			// necessary to consistently work with multiple chunks via CommonsChunkPlugin
 53 | 			chunksSortMode: 'dependency'
 54 | 		})
 55 | 	],
 56 | 	module: {
 57 | 		rules: [
 58 | 			{
 59 | 				test: /\.js$/,
 60 | 				loader: 'babel-loader',
 61 | 				include: [path.resolve(__dirname, './dev')]
 62 | 			},
 63 | 			{
 64 | 				test: /\.vue$/,
 65 | 				loader: 'vue-loader'
 66 | 			},
 67 | 			{
 68 | 				test: /\.svg$/,
 69 | 				loader: 'url-loader',
 70 | 				options: {
 71 | 					limit: 10000,
 72 | 					name: path.posix.join('static/', '[name].[hash:7].[ext]')
 73 | 				}
 74 | 			}
 75 | 		]
 76 | 	},
 77 | 	resolve: {
 78 | 		extensions: ['.js', '.vue', '.json'],
 79 | 		alias: {
 80 | 			vue$: 'vue/dist/vue.common.js',
 81 | 			'@': path.resolve(__dirname, './dev')
 82 | 		}
 83 | 	}
 84 | }
 85 | 
 86 | var spinner = ora('building for production...')
 87 | spinner.start()
 88 | 
 89 | webpack(config, function(err, stats) {
 90 | 	spinner.stop()
 91 | 	if (err) throw err
 92 | 	process.stdout.write(
 93 | 		stats.toString({
 94 | 			colors: true,
 95 | 			modules: false,
 96 | 			children: false,
 97 | 			chunks: false,
 98 | 			chunkModules: false
 99 | 		}) + '\n\n'
100 | 	)
101 | 
102 | 	console.log(chalk.cyan('  Build complete.\n'))
103 | 	console.log(
104 | 		chalk.yellow(
105 | 			'  Tip: built files are meant to be served over an HTTP server.\n' +
106 | 				"  Opening index.html over file:// won't work.\n"
107 | 		)
108 | 	)
109 | })
110 | 


--------------------------------------------------------------------------------
/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 5 | 
 6 | function resolve(dir) {
 7 | 	return path.join(__dirname, './', dir)
 8 | }
 9 | const HOST = process.env.HOST
10 | const PORT = process.env.PORT && Number(process.env.PORT)
11 | 
12 | module.exports = {
13 | 	devtool: '#cheap-module-eval-source-map',
14 | 	entry: {
15 | 		app: path.resolve(__dirname, './dev/main.js')
16 | 	},
17 | 	output: {
18 | 		path: path.resolve(__dirname, './dist'),
19 | 		filename: '[name].js',
20 | 		publicPath: '/'
21 | 	},
22 | 	resolve: {
23 | 		extensions: ['.js', '.vue', '.json'],
24 | 		alias: {
25 | 			vue$: 'vue/dist/vue.esm.js',
26 | 			'@': path.resolve(__dirname, './dev')
27 | 		}
28 | 	},
29 | 	module: {
30 | 		rules: [
31 | 			{
32 | 				test: /\.js$/,
33 | 				loader: 'babel-loader',
34 | 				include: [
35 | 					path.resolve(__dirname, './dev'),
36 | 					path.resolve(__dirname, './test')
37 | 				]
38 | 			},
39 | 			{
40 | 				test: /\.vue$/,
41 | 				loader: 'vue-loader'
42 | 			},
43 | 			{
44 | 				test: /\.svg$/,
45 | 				loader: 'url-loader',
46 | 				options: {
47 | 					limit: 10000
48 | 				}
49 | 			}
50 | 		]
51 | 	},
52 | 	devServer: {
53 | 		clientLogLevel: 'warning',
54 | 		historyApiFallback: true,
55 | 		hot: true,
56 | 		compress: true,
57 | 		host: HOST || '0.0.0.0',
58 | 		port: PORT || 9000,
59 | 		open: true,
60 | 		overlay: { warnings: false, errors: true },
61 | 		publicPath: '/',
62 | 		proxy: {},
63 | 		quiet: true, // necessary for FriendlyErrorsPlugin
64 | 		watchContentBase: true,
65 | 		watchOptions: {
66 | 			poll: false,
67 | 			ignored: /node_modules/
68 | 		}
69 | 	},
70 | 	mode: 'development',
71 | 	plugins: [
72 | 		new webpack.DefinePlugin({
73 | 			'process.env': {
74 | 				NODE_ENV: JSON.stringify('development')
75 | 			}
76 | 		}),
77 | 		new webpack.ProvidePlugin({
78 | 			Vue: 'vue/dist/vue'
79 | 		}),
80 | 		new webpack.HotModuleReplacementPlugin(),
81 | 		new webpack.NamedModulesPlugin(),
82 | 		new HtmlWebpackPlugin({
83 | 			filename: 'index.html',
84 | 			template: 'index.html',
85 | 			inject: true
86 | 		}),
87 | 		new FriendlyErrorsPlugin()
88 | 	]
89 | }
90 | 


--------------------------------------------------------------------------------