Skip to content

Commit 6dd601c

Browse files
davidenkedavidenke
committed
Merge branch 'develop'
* develop: fixes #2, remove focus from input when wiping keyboard down (blur active element on cancel) 0.0.7 fixes #3, added md-autocomplete decorator to recognize use-keyboard directive
2 parents 9595688 + a7588ca commit 6dd601c

File tree

9 files changed

+168
-12
lines changed

9 files changed

+168
-12
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ angular
2424
'material.components.keyboard'
2525
]);
2626
```
27-
* use as directive
27+
* use as attribute directive on `input`, `textarea` and `md-autocomplete`
2828
```html
2929
<form name="myForm">
3030
<md-input-container>

‎demo.html

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,27 @@ <h1 class="md-headline">Angular Material Keyboard Demo</h1>
1515
<section layout="row">
1616
<md-input-container flex>
1717
<label>Use default keyboard</label>
18-
<input type="text" class="md-input" ng-model="text" use-keyboard>
18+
<input type="text"
19+
class="md-input"
20+
ng-model="text"
21+
use-keyboard>
1922
</md-input-container>
2023
<md-input-container flex>
2124
<label>Use custom keyboard</label>
22-
<input type="number" class="md-input" ng-model="numbers" use-keyboard="Numbers">
25+
<input type="number"
26+
class="md-input"
27+
ng-model="numbers"
28+
use-keyboard="Numbers">
2329
</md-input-container>
30+
<md-autocomplete flex
31+
md-floating-label="Use md-autocomplete"
32+
md-selected-item="selectedItem"
33+
md-search-text="searchText"
34+
md-items="item in [8, 16, 32, 64, 128, 256, 512, 1024] | filter:searchText"
35+
md-item-text="item"
36+
use-keyboard>
37+
<span md-highlight-text="searchText">{{item}}</span>
38+
</md-autocomplete>
2439
</section>
2540
</div>
2641

@@ -62,4 +77,4 @@ <h1 class="md-headline">Angular Material Keyboard Demo</h1>
6277
});
6378
</script>
6479
</body>
65-
</html>
80+
</html>

‎dist/mdKeyboard.js

Lines changed: 73 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
*
5757
*/
5858

59+
MdAutocompleteDecorator.$inject = ["$provide"];
5960
MdKeyboardProvider.$inject = ["$$interimElementProvider", "keyboardLayouts", "keyboardDeadkey", "keyboardSymbols", "keyboardNumpad"];
6061
MdKeyboardDirective.$inject = ["$mdKeyboard"];
6162
useKeyboardDirective.$inject = ["$mdKeyboard", "$timeout", "$animate", "$rootScope"];
@@ -1166,13 +1167,82 @@ angular
11661167
'\u00a0': "NB\nSP", '\u200b': "ZW\nSP", '\u200c': "ZW\nNJ", '\u200d': "ZW\nJ"
11671168
});
11681169

1170+
angular
1171+
.module('material.components.keyboard')
1172+
.config(MdAutocompleteDecorator);
1173+
1174+
function MdAutocompleteDecorator($provide) {
1175+
// decorate md-autocomplete directive
1176+
// with use-keyboard behavior
1177+
$provide.decorator('mdAutocompleteDirective', ["$q", "$delegate", "$timeout", "$compile", "$mdUtil", function ($q, $delegate, $timeout, $compile, $mdUtil) {
1178+
var directive = $delegate[0];
1179+
var compile = directive.compile;
1180+
1181+
directive.compile = function () {
1182+
var link = compile.apply(this, arguments);
1183+
1184+
return function (scope, element, attrs, MdAutocompleteCtrl) {
1185+
// call original link
1186+
// function if existant
1187+
if (angular.isDefined(link)) {
1188+
link.apply(this, arguments);
1189+
}
1190+
1191+
if (angular.isDefined(attrs.useKeyboard)) {
1192+
$timeout(function () {
1193+
var input = angular.element(element[0].querySelector('input[type="search"]:not(use-keyboard)'));
1194+
var cloned = input
1195+
.clone(true, true)
1196+
.attr('use-keyboard', attrs.useKeyboard);
1197+
var compiled = $compile(cloned)(scope);
1198+
input.replaceWith(compiled);
1199+
1200+
MdAutocompleteCtrl.select = function (index) {
1201+
$mdUtil.nextTick(function () {
1202+
getDisplayValue(MdAutocompleteCtrl.matches[index]).then(function (val) {
1203+
var ngModel = compiled.controller('ngModel');
1204+
ngModel.$setViewValue(val);
1205+
ngModel.$render();
1206+
}).finally(function () {
1207+
scope.selectedItem = MdAutocompleteCtrl.matches[index];
1208+
MdAutocompleteCtrl.loading = false;
1209+
MdAutocompleteCtrl.hidden = true;
1210+
});
1211+
}, false);
1212+
1213+
function getDisplayValue(item) {
1214+
return $q.when(getItemText(item) || item);
1215+
}
1216+
1217+
function getItemText(item) {
1218+
return (item && scope.itemText) ? scope.itemText(getItemAsNameVal(item)) : null;
1219+
}
1220+
1221+
function getItemAsNameVal(item) {
1222+
if (!item) return undefined;
1223+
1224+
var locals = {};
1225+
if (MdAutocompleteCtrl.itemName) locals[MdAutocompleteCtrl.itemName] = item;
1226+
1227+
return locals;
1228+
}
1229+
};
1230+
});
1231+
}
1232+
};
1233+
};
1234+
1235+
return $delegate;
1236+
}]);
1237+
}
1238+
11691239
angular
11701240
.module('material.components.keyboard')
11711241
.provider('$mdKeyboard', MdKeyboardProvider);
11721242

11731243
function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardDeadkey, keyboardSymbols, keyboardNumpad) {
11741244
// how fast we need to flick down to close the sheet, pixels/ms
1175-
keyboardDefaults.$inject = ["$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdKeyboard", "$rootElement", "$mdGesture"];
1245+
keyboardDefaults.$inject = ["$window", "$animate", "$mdConstant", "$mdUtil", "$mdTheming", "$mdKeyboard", "$rootElement", "$mdGesture"];
11761246
var SCOPE;
11771247
var CLOSING_VELOCITY = 0.5;
11781248
var PADDING = 80; // same as css
@@ -1285,7 +1355,7 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
12851355
return $mdKeyboard;
12861356

12871357
/* @ngInject */
1288-
function keyboardDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdKeyboard, $rootElement, $mdGesture) {
1358+
function keyboardDefaults($window, $animate, $mdConstant, $mdUtil, $mdTheming, $mdKeyboard, $rootElement, $mdGesture) {
12891359

12901360
return {
12911361
onShow: onShow,
@@ -1403,6 +1473,7 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
14031473
var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
14041474
element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
14051475
$mdUtil.nextTick($mdKeyboard.cancel, true);
1476+
$window.document.activeElement.blur();
14061477
} else {
14071478
element.css($mdConstant.CSS.TRANSITION_DURATION, '');
14081479
element.css($mdConstant.CSS.TRANSFORM, '');

‎dist/mdKeyboard.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/mdKeyboard.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ gulp.task('build', function () {
5050
'src/js/mdKeyboard.config.deadkey.js',
5151
'src/js/mdKeyboard.config.numpad.js',
5252
'src/js/mdKeyboard.config.symbols.js',
53+
'src/js/mdKeyboard.decorator.js',
5354
'src/js/mdKeyboard.provider.js',
5455
'src/js/mdKeyboard.directive.js'
5556
])

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,5 +58,5 @@
5858
"test": "echo \"Error: no test specified\" && exit 1",
5959
"build": "gulp build"
6060
},
61-
"version": "0.0.6"
61+
"version": "0.0.7"
6262
}

‎src/js/mdKeyboard.decorator.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
angular
2+
.module('material.components.keyboard')
3+
.config(MdAutocompleteDecorator);
4+
5+
function MdAutocompleteDecorator($provide) {
6+
// decorate md-autocomplete directive
7+
// with use-keyboard behavior
8+
$provide.decorator('mdAutocompleteDirective', function ($q, $delegate, $timeout, $compile, $mdUtil) {
9+
var directive = $delegate[0];
10+
var compile = directive.compile;
11+
12+
directive.compile = function () {
13+
var link = compile.apply(this, arguments);
14+
15+
return function (scope, element, attrs, MdAutocompleteCtrl) {
16+
// call original link
17+
// function if existant
18+
if (angular.isDefined(link)) {
19+
link.apply(this, arguments);
20+
}
21+
22+
if (angular.isDefined(attrs.useKeyboard)) {
23+
$timeout(function () {
24+
var input = angular.element(element[0].querySelector('input[type="search"]:not(use-keyboard)'));
25+
var cloned = input
26+
.clone(true, true)
27+
.attr('use-keyboard', attrs.useKeyboard);
28+
var compiled = $compile(cloned)(scope);
29+
input.replaceWith(compiled);
30+
31+
MdAutocompleteCtrl.select = function (index) {
32+
$mdUtil.nextTick(function () {
33+
getDisplayValue(MdAutocompleteCtrl.matches[index]).then(function (val) {
34+
var ngModel = compiled.controller('ngModel');
35+
ngModel.$setViewValue(val);
36+
ngModel.$render();
37+
}).finally(function () {
38+
scope.selectedItem = MdAutocompleteCtrl.matches[index];
39+
MdAutocompleteCtrl.loading = false;
40+
MdAutocompleteCtrl.hidden = true;
41+
});
42+
}, false);
43+
44+
function getDisplayValue(item) {
45+
return $q.when(getItemText(item) || item);
46+
}
47+
48+
function getItemText(item) {
49+
return (item && scope.itemText) ? scope.itemText(getItemAsNameVal(item)) : null;
50+
}
51+
52+
function getItemAsNameVal(item) {
53+
if (!item) return undefined;
54+
55+
var locals = {};
56+
if (MdAutocompleteCtrl.itemName) locals[MdAutocompleteCtrl.itemName] = item;
57+
58+
return locals;
59+
}
60+
};
61+
});
62+
}
63+
};
64+
};
65+
66+
return $delegate;
67+
});
68+
}

‎src/js/mdKeyboard.provider.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
116116
return $mdKeyboard;
117117

118118
/* @ngInject */
119-
function keyboardDefaults($animate, $mdConstant, $mdUtil, $mdTheming, $mdKeyboard, $rootElement, $mdGesture) {
119+
function keyboardDefaults($window, $animate, $mdConstant, $mdUtil, $mdTheming, $mdKeyboard, $rootElement, $mdGesture) {
120120

121121
return {
122122
onShow: onShow,
@@ -234,6 +234,7 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
234234
var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
235235
element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
236236
$mdUtil.nextTick($mdKeyboard.cancel, true);
237+
$window.document.activeElement.blur();
237238
} else {
238239
element.css($mdConstant.CSS.TRANSITION_DURATION, '');
239240
element.css($mdConstant.CSS.TRANSFORM, '');

0 commit comments

Comments
 (0)