Skip to content

Commit 584ef0c

Browse files
davidenkedavidenke
committed
added readme, updated demo
1 parent 478006f commit 584ef0c

File tree

3 files changed

+92
-9
lines changed

3 files changed

+92
-9
lines changed

‎README.md

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# angular-material-keyboard
2+
Onscreen virtual keyboard for Angular (https://angularjs.org/) using Material (https://material.angularjs.org/) and the Angular Virtual Keyboard by the-darc (https://github.com/the-darc/angular-virtual-keyboard) based on GreyWyvern VKI (http://www.greywyvern.com/code/javascript/keyboard).
3+
4+
## demo
5+
Checkout the demo.html
6+
7+
## usage
8+
* download or clone the latest release, or use your preferred packet manager
9+
* add the javascript and css files to your project:
10+
```html
11+
<script src="angular-material-keyboard/dist/mdKeyboard.min.js"></script>
12+
<link rel="stylesheet" href="angular-material-keyboard/dist/mdKeyboard.css">
13+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Material+Icons">
14+
```
15+
* register module:
16+
```javascript
17+
'use strict';
18+
19+
angular
20+
.module('myApp', [
21+
'ngAria',
22+
'ngAnimate',
23+
'ngMaterial',
24+
'material.components.keyboard'
25+
]);
26+
```
27+
* use as directive
28+
```html
29+
<form name="myForm">
30+
<md-input-container>
31+
<input type="text"
32+
use-keyboard="Deutsch"
33+
ng-model="myModel">
34+
</md-input-container>
35+
</form>
36+
```
37+
38+
## configure
39+
Use the `mdKeyboardProvider` to set your default layout or to add custom layouts:
40+
```javascript
41+
'use strict';
42+
43+
angular
44+
.module('myApp')
45+
.config(function ($mdKeyboardProvider) {
46+
47+
// add layout for number fields
48+
$mdKeyboardProvider.addLayout('Numbers', {
49+
'name': 'Numbers', 'keys': [
50+
[['7', '7'], ['8', '8'], ['9', '9'], ['Bksp', 'Bksp']],
51+
[['4', '4'], ['5', '5'], ['6', '6'], ['-', '-']],
52+
[['1', '1'], ['2', '2'], ['3', '3'], ['+', '+']],
53+
[['0', '0'], ['Spacer'], [','], ['Enter', 'Enter']]
54+
], 'lang': ['de']
55+
});
56+
57+
// default layout is german
58+
$mdKeyboardProvider.defaultLayout('Deutsch');
59+
});
60+
```
61+
The first entry in each 'key' array is the default char. The second is used when pressing 'shift' or 'caps lock', the third when 'alt' is rpessed.
62+
You can use the `spacer` key to provide a gap in the layout.
63+
64+
The `$mdKeyboardProvider` has the following methods:
65+
66+
`getLayout(layout:string):object` will give you the corresponding layout
67+
68+
`getCurrentLayout():string` will give you the current used layout
69+
70+
`getLayouts():array` returns all registered layouts
71+
72+
`defaultLayout(layout:string):void` tells the directive which layout to use as default
73+
74+
`useLayout(layout:string):void` tells the directive which layout to use
75+
76+
`addLayout(layout:string, keys:array):void` expects the name of a new layout to register along an 'keys' array
77+
78+
`isVisible():boolean` returns wether the keyboard is currently visible or not
79+
80+
## build
81+
* install node.js (I recomend to use [nvm](https://github.com/creationix/nvm))
82+
* get dependencies: `$ npm install && bower install`
83+
* build with gulp task: `$ gulp build`

‎demo.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
77

88
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Material+Icons|Open+Sans:400,300,600,700|Open+Sans+Condensed:300,700">
9-
<link rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
9+
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.css">
1010
<link rel="stylesheet" href="dist/mdKeyboard.min.css">
1111
</head>
1212
<body ng-cloak data-ng-controller="keyboardDemoCtrl">
@@ -24,10 +24,10 @@ <h1 class="md-headline">Angular Material Keyboard Demo</h1>
2424
</section>
2525
</div>
2626

27-
<script src="node_modules/angular/angular.min.js"></script>
28-
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
29-
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
30-
<script src="node_modules/angular-material/angular-material.min.js"></script>
27+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
28+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
29+
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
30+
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
3131
<script src="dist/mdKeyboard.js"></script>
3232

3333
<script>

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
"name": "David Enke"
55
},
66
"dependencies": {
7-
"angular": "1.4.9",
8-
"angular-animate": "1.4.9",
9-
"angular-aria": "1.4.9",
10-
"angular-material": "1.0.5",
7+
"angular": "1.5.5",
8+
"angular-animate": "1.5.5",
9+
"angular-aria": "1.5.5",
10+
"angular-material": "1.0.8",
1111
"material-design-icons": "2.2.3"
1212
},
1313
"description": "Onscreen virtual keyboard for Angular (https://angularjs.org/) using Material (https://material.angularjs.org/)inspired by the Angular Virtual Keyboard by the-darc (https://github.com/the-darc/angular-virtual-keyboard).",

0 commit comments

Comments
 (0)