Skip to content

Commit 4c2e53d

Browse files
davidenkedavidenke
committed
trigger form submit on enter, optimize keyboard reuse when activating while closing (still buggy)
1 parent f396149 commit 4c2e53d

File tree

4 files changed

+64
-66
lines changed

4 files changed

+64
-66
lines changed

‎dist/mdKeyboard.js

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1287,7 +1287,8 @@ function MdKeyboardProvider($$interimElementProvider, $injector, keyboardLayouts
12871287
options.restoreScroll = $mdUtil.disableScrollAround(keyboard.element, options.parent);
12881288
}
12891289

1290-
return $animate.enter(keyboard.element, options.parent)
1290+
return $animate
1291+
.enter(keyboard.element, options.parent)
12911292
.then(function () {
12921293
if (options.escapeToClose) {
12931294
options.rootElementKeyupCallback = function (e) {
@@ -1302,18 +1303,20 @@ function MdKeyboardProvider($$interimElementProvider, $injector, keyboardLayouts
13021303
}
13031304

13041305
function onRemove(scope, element, options) {
1305-
13061306
var keyboard = options.keyboard;
13071307

1308-
return $animate.leave(keyboard.element).then(function () {
1309-
if (options.disableParentScroll) {
1310-
options.restoreScroll();
1311-
delete options.restoreScroll;
1308+
return $animate
1309+
.leave(keyboard.element)
1310+
.then(function () {
13121311
VISIBLE = false;
1313-
}
13141312

1315-
keyboard.cleanup();
1316-
});
1313+
if (options.disableParentScroll) {
1314+
options.restoreScroll();
1315+
delete options.restoreScroll;
1316+
}
1317+
1318+
keyboard.cleanup();
1319+
});
13171320
}
13181321

13191322
/**
@@ -1393,7 +1396,7 @@ function MdKeyboardDirective($mdKeyboard, $mdTheming) {
13931396
};
13941397
}
13951398

1396-
function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope) {
1399+
function useKeyboardDirective($mdKeyboard, $injector, $timeout, $animate, $log, $rootScope) {
13971400
return {
13981401
restrict: 'A',
13991402
require: '?ngModel',
@@ -1429,11 +1432,14 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
14291432
if ($rootScope.keyboardTimeout) {
14301433
$timeout.cancel($rootScope.keyboardTimeout);
14311434
}
1435+
if ($rootScope.keyboardAnimation) {
1436+
$animate.cancel($rootScope.keyboardAnimation);
1437+
}
14321438

14331439
// no keyboard active, so add new
14341440
if (!$mdKeyboard.isVisible()) {
14351441
$mdKeyboard.currentModel = ngModelCtrl;
1436-
$mdKeyboard.show({
1442+
$rootScope.keyboardAnimation = $mdKeyboard.show({
14371443
template:'<md-keyboard class=md-grid layout=column ng-cloak><div ng-repeat="row in keyboard.keys" layout=row><div flex ng-repeat="key in row" ng-switch=key[0] ng-class=getKeyClass(key)><span ng-switch-when=Bksp><md-button class="md-raised key-bksp" ng-mousedown="pressed($event, key[0])" aria-label={{key[0]}}><md-icon>keyboard_backspace</md-icon></md-button></span> <span ng-switch-when=Tab><md-button class="md-raised key-tab" ng-mousedown="pressed($event, key[0])" aria-label={{key[0]}}><md-icon>keyboard_tab</md-icon></md-button></span> <span ng-switch-when=Caps><md-button class="md-raised key-caps" ng-class="{\'locked\': capsLocked, \'md-focused\': capsLocked}" ng-mousedown="pressed($event, key[0])" ng-click=toggleCapsLock() aria-label={{key[0]}}><md-icon>keyboard_capslock</md-icon></md-button></span> <span ng-switch-when=Enter><md-button class="md-raised key-enter" ng-mousedown="pressed($event, key[0])" aria-label={{key[0]}}><md-icon>keyboard_return</md-icon></md-button></span> <span ng-switch-when=Shift><md-button class="md-raised key-shift" ng-mousedown="pressed($event, key[0]); toggleCaps()" aria-label={{key[0]}}>{{key[0]}}</md-button></span> <span ng-switch-when=Spacer></span> <span ng-switch-default><md-button class="md-raised key-char" ng-mousedown="pressed($event, key[!capsLocked && !caps ? 0 : 1])" aria-label="{{key[!capsLocked && !caps ? 0 : 1]}}">{{key[!capsLocked && !caps ? 0 : 1]}}</md-button></span></div></div></md-keyboard>',
14381444
controller: mdKeyboardController,
14391445
bindToController: true
@@ -1513,7 +1519,7 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
15131519

15141520
function triggerKey($event, key) {
15151521
$event.preventDefault();
1516-
$log.debug('key pressed: ' + key);
1522+
$log.info('key pressed: %s (%s)', key, key.charCodeAt(0));
15171523

15181524
switch (key) {
15191525
case "Caps":
@@ -1526,6 +1532,7 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
15261532
break;
15271533

15281534
case "Tab":
1535+
15291536
// cycle through elements
15301537
// or insert \t tab
15311538
//if (self.VKI_activeTab) {
@@ -1554,6 +1561,7 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
15541561
break;
15551562

15561563
case "Bksp":
1564+
15571565
// backspace
15581566
//self.VKI_target.focus();
15591567
//if (self.VKI_target.setSelectionRange && hasSelectionStartEnd(self.VKI_target) && !self.VKI_target.readOnly) {
@@ -1583,22 +1591,10 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
15831591
break;
15841592

15851593
case "Enter":
1586-
// submit form or insert \n new line
1587-
//if (self.VKI_target.nodeName != "TEXTAREA") {
1588-
// if (typeof self.VKI_enterSubmit === 'function') {
1589-
// self.VKI_enterSubmit.apply({}, [self.VKI_target.value]);
1590-
// } else if (self.VKI_enterSubmit && self.VKI_target.form) {
1591-
// for (var z = 0, subm = false; z < self.VKI_target.form.elements.length; z++)
1592-
// if (self.VKI_target.form.elements[z].type == "submit") subm = true;
1593-
// if (!subm) self.VKI_target.form.submit();
1594-
// }
1595-
// self.VKI_close(false);
1596-
//} else self.VKI_insert("\n");
1597-
//return true;
1598-
15991594
if (element[0].nodeName.toUpperCase() != 'TEXTAREA') {
1600-
scope.$broadcast('$submit');
1601-
scope.$root.$broadcast('$submit');
1595+
$timeout(function () {
1596+
angular.element(element[0].form).triggerHandler('submit');
1597+
});
16021598
} else {
16031599
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + "\n");
16041600
$mdKeyboard.currentModel.$validate();
@@ -1608,13 +1604,16 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
16081604
break;
16091605

16101606
default:
1611-
//var event = new window.KeyboardEvent('keydown', {
1607+
1608+
//$timeout(function () {
1609+
//var event = new window.KeyboardEvent('keypress', {
16121610
// bubbles: true,
16131611
// cancelable: true,
16141612
// shiftKey: true,
1615-
// keyCode: key[0].charCodeAt(0)
1613+
// keyCode: key.charCodeAt(0)
1614+
//});
1615+
// element[0].dispatchEvent(event);
16161616
//});
1617-
//element[0].dispatchEvent(event);
16181617

16191618
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + key[0]);
16201619
$mdKeyboard.currentModel.$validate();
@@ -1628,9 +1627,8 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
16281627
if ($rootScope.keyboardTimeout) {
16291628
$timeout.cancel($rootScope.keyboardTimeout);
16301629
}
1631-
//keyboard.hide();
16321630
$rootScope.keyboardTimeout = $timeout(function () {
1633-
$mdKeyboard.hide();
1631+
$rootScope.keyboardAnimation = $mdKeyboard.hide();
16341632
}, 500);
16351633
}
16361634
}

‎dist/mdKeyboard.min.js

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

‎src/js/mdKeyboard.directive.js

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function MdKeyboardDirective($mdKeyboard, $mdTheming) {
1717
};
1818
}
1919

20-
function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope) {
20+
function useKeyboardDirective($mdKeyboard, $injector, $timeout, $animate, $log, $rootScope) {
2121
return {
2222
restrict: 'A',
2323
require: '?ngModel',
@@ -55,11 +55,14 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
5555
if ($rootScope.keyboardTimeout) {
5656
$timeout.cancel($rootScope.keyboardTimeout);
5757
}
58+
if ($rootScope.keyboardAnimation) {
59+
$animate.cancel($rootScope.keyboardAnimation);
60+
}
5861

5962
// no keyboard active, so add new
6063
if (!$mdKeyboard.isVisible()) {
6164
$mdKeyboard.currentModel = ngModelCtrl;
62-
$mdKeyboard.show({
65+
$rootScope.keyboardAnimation = $mdKeyboard.show({
6366
templateUrl: '../view/mdKeyboard.view.html',
6467
controller: mdKeyboardController,
6568
bindToController: true
@@ -139,7 +142,7 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
139142

140143
function triggerKey($event, key) {
141144
$event.preventDefault();
142-
$log.debug('key pressed: ' + key);
145+
$log.info('key pressed: %s (%s)', key, key.charCodeAt(0));
143146

144147
switch (key) {
145148
case "Caps":
@@ -152,6 +155,8 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
152155
break;
153156

154157
case "Tab":
158+
// TODO: handle text selection
159+
155160
// cycle through elements
156161
// or insert \t tab
157162
//if (self.VKI_activeTab) {
@@ -180,6 +185,8 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
180185
break;
181186

182187
case "Bksp":
188+
// TODO: handle text selection
189+
183190
// backspace
184191
//self.VKI_target.focus();
185192
//if (self.VKI_target.setSelectionRange && hasSelectionStartEnd(self.VKI_target) && !self.VKI_target.readOnly) {
@@ -209,23 +216,10 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
209216
break;
210217

211218
case "Enter":
212-
// submit form or insert \n new line
213-
//if (self.VKI_target.nodeName != "TEXTAREA") {
214-
// if (typeof self.VKI_enterSubmit === 'function') {
215-
// self.VKI_enterSubmit.apply({}, [self.VKI_target.value]);
216-
// } else if (self.VKI_enterSubmit && self.VKI_target.form) {
217-
// for (var z = 0, subm = false; z < self.VKI_target.form.elements.length; z++)
218-
// if (self.VKI_target.form.elements[z].type == "submit") subm = true;
219-
// if (!subm) self.VKI_target.form.submit();
220-
// }
221-
// self.VKI_close(false);
222-
//} else self.VKI_insert("\n");
223-
//return true;
224-
225219
if (element[0].nodeName.toUpperCase() != 'TEXTAREA') {
226-
// TODO: Trigger form submit
227-
scope.$broadcast('$submit');
228-
scope.$root.$broadcast('$submit');
220+
$timeout(function () {
221+
angular.element(element[0].form).triggerHandler('submit');
222+
});
229223
} else {
230224
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + "\n");
231225
$mdKeyboard.currentModel.$validate();
@@ -235,13 +229,17 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
235229
break;
236230

237231
default:
238-
//var event = new window.KeyboardEvent('keydown', {
232+
// TODO: handle text selection
233+
234+
//$timeout(function () {
235+
//var event = new window.KeyboardEvent('keypress', {
239236
// bubbles: true,
240237
// cancelable: true,
241238
// shiftKey: true,
242-
// keyCode: key[0].charCodeAt(0)
239+
// keyCode: key.charCodeAt(0)
240+
//});
241+
// element[0].dispatchEvent(event);
243242
//});
244-
//element[0].dispatchEvent(event);
245243

246244
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + key[0]);
247245
$mdKeyboard.currentModel.$validate();
@@ -255,9 +253,8 @@ function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope
255253
if ($rootScope.keyboardTimeout) {
256254
$timeout.cancel($rootScope.keyboardTimeout);
257255
}
258-
//keyboard.hide();
259256
$rootScope.keyboardTimeout = $timeout(function () {
260-
$mdKeyboard.hide();
257+
$rootScope.keyboardAnimation = $mdKeyboard.hide();
261258
}, 500);
262259
}
263260
}

‎src/js/mdKeyboard.provider.js

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,8 @@ function MdKeyboardProvider($$interimElementProvider, $injector, keyboardLayouts
122122
options.restoreScroll = $mdUtil.disableScrollAround(keyboard.element, options.parent);
123123
}
124124

125-
return $animate.enter(keyboard.element, options.parent)
125+
return $animate
126+
.enter(keyboard.element, options.parent)
126127
.then(function () {
127128
if (options.escapeToClose) {
128129
options.rootElementKeyupCallback = function (e) {
@@ -137,18 +138,20 @@ function MdKeyboardProvider($$interimElementProvider, $injector, keyboardLayouts
137138
}
138139

139140
function onRemove(scope, element, options) {
140-
141141
var keyboard = options.keyboard;
142142

143-
return $animate.leave(keyboard.element).then(function () {
144-
if (options.disableParentScroll) {
145-
options.restoreScroll();
146-
delete options.restoreScroll;
143+
return $animate
144+
.leave(keyboard.element)
145+
.then(function () {
147146
VISIBLE = false;
148-
}
149147

150-
keyboard.cleanup();
151-
});
148+
if (options.disableParentScroll) {
149+
options.restoreScroll();
150+
delete options.restoreScroll;
151+
}
152+
153+
keyboard.cleanup();
154+
});
152155
}
153156

154157
/**

0 commit comments

Comments
 (0)