Skip to content

Commit f396149

Browse files
davidenkedavidenke
committed
only one instance opened
1 parent f6ff5ec commit f396149

File tree

4 files changed

+156
-52
lines changed

4 files changed

+156
-52
lines changed

‎dist/mdKeyboard.js

Lines changed: 77 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1167,15 +1167,17 @@ angular
11671167
.module('material.components.keyboard')
11681168
.provider('$mdKeyboard', MdKeyboardProvider);
11691169

1170-
function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardDeadkey, keyboardSymbols, keyboardNumpad) {
1170+
function MdKeyboardProvider($$interimElementProvider, $injector, keyboardLayouts, keyboardDeadkey, keyboardSymbols, keyboardNumpad) {
11711171
// how fast we need to flick down to close the sheet, pixels/ms
1172+
var SCOPE;
11721173
var CLOSING_VELOCITY = 0.5;
11731174
var PADDING = 80; // same as css
11741175
var LAYOUT = 'US International';
11751176
var LAYOUTS = keyboardLayouts;
11761177
var DEADKEY = keyboardDeadkey;
11771178
var SYMBOLS = keyboardSymbols;
11781179
var NUMPAD = keyboardNumpad;
1180+
var VISIBLE = false;
11791181

11801182
var $mdKeyboard = $$interimElementProvider('$mdKeyboard')
11811183
.setDefaults({
@@ -1185,14 +1187,16 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
11851187
.addMethod('getLayout', getLayout)
11861188
.addMethod('getLayouts', getLayouts)
11871189
.addMethod('useLayout', useLayout)
1188-
.addMethod('addLayout', addLayout);
1190+
.addMethod('addLayout', addLayout)
1191+
.addMethod('isVisible', isVisible);
11891192

11901193
// should be available in provider (config phase) not only
11911194
// in service as defined in $$interimElementProvider
11921195
$mdKeyboard.getLayout = getLayout;
11931196
$mdKeyboard.getLayouts = getLayouts;
11941197
$mdKeyboard.useLayout = useLayout;
11951198
$mdKeyboard.addLayout = addLayout;
1199+
$mdKeyboard.isVisible = isVisible;
11961200

11971201
// get currently used layout object
11981202
function getLayout() {
@@ -1202,7 +1206,7 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
12021206
// get names of available layouts
12031207
function getLayouts() {
12041208
var layouts = [];
1205-
angular.forEach(LAYOUTS, function(obj, layout) {
1209+
angular.forEach(LAYOUTS, function (obj, layout) {
12061210
layouts.push(layout);
12071211
});
12081212
return layouts;
@@ -1212,6 +1216,12 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
12121216
function useLayout(layout) {
12131217
if (LAYOUTS[layout]) {
12141218
LAYOUT = layout;
1219+
if (SCOPE) {
1220+
SCOPE.$broadcast('$mdKeyboardLayoutChanged', layout);
1221+
}
1222+
//console.log($injector.get('$rootScope'), $injector.get('$scope'));
1223+
//$rootScope = $injector.get('$rootScope');
1224+
//$rootScope.$broadcast('$mdKeyboardLayoutChanged', layout);
12151225
} else {
12161226
var msg = "" +
12171227
"The keyboard layout '" + layout + "' does not exists. \n" +
@@ -1232,6 +1242,11 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
12321242
}
12331243
}
12341244

1245+
// return if keyboard is visible
1246+
function isVisible() {
1247+
return VISIBLE;
1248+
}
1249+
12351250
return $mdKeyboard;
12361251

12371252
/* @ngInject */
@@ -1263,6 +1278,9 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
12631278
options.keyboard = keyboard;
12641279
options.parent.prepend(keyboard.element);
12651280

1281+
SCOPE = scope;
1282+
VISIBLE = true;
1283+
12661284
$mdTheming.inherit(keyboard.element, options.parent);
12671285

12681286
if (options.disableParentScroll) {
@@ -1291,6 +1309,7 @@ function MdKeyboardProvider($$interimElementProvider, keyboardLayouts, keyboardD
12911309
if (options.disableParentScroll) {
12921310
options.restoreScroll();
12931311
delete options.restoreScroll;
1312+
VISIBLE = false;
12941313
}
12951314

12961315
keyboard.cleanup();
@@ -1374,7 +1393,7 @@ function MdKeyboardDirective($mdKeyboard, $mdTheming) {
13741393
};
13751394
}
13761395

1377-
function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
1396+
function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope) {
13781397
return {
13791398
restrict: 'A',
13801399
require: '?ngModel',
@@ -1407,25 +1426,37 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
14071426
.bind('blur', hideKeyboard);
14081427

14091428
function showKeyboard() {
1410-
if (!keyboard) {
1411-
keyboard = $mdKeyboard.show({
1412-
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()" ng-mouseup=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>',
1429+
if ($rootScope.keyboardTimeout) {
1430+
$timeout.cancel($rootScope.keyboardTimeout);
1431+
}
1432+
1433+
// no keyboard active, so add new
1434+
if (!$mdKeyboard.isVisible()) {
1435+
$mdKeyboard.currentModel = ngModelCtrl;
1436+
$mdKeyboard.show({
1437+
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>',
14131438
controller: mdKeyboardController,
14141439
bindToController: true
14151440
});
14161441
}
1442+
1443+
// use existing keyboard
1444+
else {
1445+
$mdKeyboard.currentModel = ngModelCtrl;
1446+
$mdKeyboard.useLayout(attrs.useKeyboard);
1447+
}
14171448
}
14181449

14191450
function mdKeyboardController($scope) {
14201451
if (attrs.useKeyboard) {
14211452
$mdKeyboard.useLayout(attrs.useKeyboard);
14221453
}
14231454

1424-
var toggleCaps = function() {
1455+
var toggleCaps = function () {
14251456
$scope.caps = !$scope.caps;
14261457
};
14271458

1428-
var toggleCapsLock = function() {
1459+
var toggleCapsLock = function () {
14291460
$scope.capsLocked = !$scope.capsLocked;
14301461
};
14311462

@@ -1458,11 +1489,28 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
14581489
$scope.toggleCaps = toggleCaps;
14591490
$scope.toggleCapsLock = toggleCapsLock;
14601491
$scope.pressed = triggerKey;
1492+
1493+
$scope.$on('$mdKeyboardLayoutChanged', function () {
1494+
$scope.keyboard = $mdKeyboard.getLayout();
1495+
$scope.pressed = triggerKey;
1496+
});
14611497
};
14621498

14631499
_init();
14641500
}
14651501

1502+
function _getCaretPosition() {
1503+
if ('selectionStart' in element) {
1504+
return element.selectionStart;
1505+
} else if (document.selection) {
1506+
element.focus();
1507+
var sel = document.selection.createRange();
1508+
var selLen = document.selection.createRange().text.length;
1509+
sel.moveStart('character', -element.value.length);
1510+
return sel.text.length - selLen;
1511+
}
1512+
};
1513+
14661514
function triggerKey($event, key) {
14671515
$event.preventDefault();
14681516
$log.debug('key pressed: ' + key);
@@ -1499,9 +1547,9 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
14991547
//} else self.VKI_insert("\t");
15001548
//return false;
15011549

1502-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '') + "\t");
1503-
ngModelCtrl.$validate();
1504-
ngModelCtrl.$render();
1550+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + "\t");
1551+
$mdKeyboard.currentModel.$validate();
1552+
$mdKeyboard.currentModel.$render();
15051553

15061554
break;
15071555

@@ -1528,9 +1576,9 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
15281576
//self.keyInputCallback();
15291577
//return true;
15301578

1531-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '').slice(0, -1));
1532-
ngModelCtrl.$validate();
1533-
ngModelCtrl.$render();
1579+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '').slice(0, -1));
1580+
$mdKeyboard.currentModel.$validate();
1581+
$mdKeyboard.currentModel.$render();
15341582

15351583
break;
15361584

@@ -1552,9 +1600,9 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
15521600
scope.$broadcast('$submit');
15531601
scope.$root.$broadcast('$submit');
15541602
} else {
1555-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '') + "\n");
1556-
ngModelCtrl.$validate();
1557-
ngModelCtrl.$render();
1603+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + "\n");
1604+
$mdKeyboard.currentModel.$validate();
1605+
$mdKeyboard.currentModel.$render();
15581606
}
15591607

15601608
break;
@@ -1568,17 +1616,22 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
15681616
//});
15691617
//element[0].dispatchEvent(event);
15701618

1571-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '') + key[0]);
1572-
ngModelCtrl.$validate();
1573-
ngModelCtrl.$render();
1619+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + key[0]);
1620+
$mdKeyboard.currentModel.$validate();
1621+
$mdKeyboard.currentModel.$render();
1622+
1623+
scope.caps = false;
15741624
}
15751625
}
15761626

15771627
function hideKeyboard() {
1578-
if (keyboard) {
1579-
$mdKeyboard.hide();
1580-
keyboard = undefined;
1628+
if ($rootScope.keyboardTimeout) {
1629+
$timeout.cancel($rootScope.keyboardTimeout);
15811630
}
1631+
//keyboard.hide();
1632+
$rootScope.keyboardTimeout = $timeout(function () {
1633+
$mdKeyboard.hide();
1634+
}, 500);
15821635
}
15831636
}
15841637
}

‎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.

‎src/js/mdKeyboard.directive.js

Lines changed: 54 additions & 22 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, $log, $rootScope) {
20+
function useKeyboardDirective($mdKeyboard, $injector, $timeout, $log, $rootScope) {
2121
return {
2222
restrict: 'A',
2323
require: '?ngModel',
@@ -52,25 +52,37 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
5252
.bind('blur', hideKeyboard);
5353

5454
function showKeyboard() {
55-
if (!keyboard) {
56-
keyboard = $mdKeyboard.show({
55+
if ($rootScope.keyboardTimeout) {
56+
$timeout.cancel($rootScope.keyboardTimeout);
57+
}
58+
59+
// no keyboard active, so add new
60+
if (!$mdKeyboard.isVisible()) {
61+
$mdKeyboard.currentModel = ngModelCtrl;
62+
$mdKeyboard.show({
5763
templateUrl: '../view/mdKeyboard.view.html',
5864
controller: mdKeyboardController,
5965
bindToController: true
6066
});
6167
}
68+
69+
// use existing keyboard
70+
else {
71+
$mdKeyboard.currentModel = ngModelCtrl;
72+
$mdKeyboard.useLayout(attrs.useKeyboard);
73+
}
6274
}
6375

6476
function mdKeyboardController($scope) {
6577
if (attrs.useKeyboard) {
6678
$mdKeyboard.useLayout(attrs.useKeyboard);
6779
}
6880

69-
var toggleCaps = function() {
81+
var toggleCaps = function () {
7082
$scope.caps = !$scope.caps;
7183
};
7284

73-
var toggleCapsLock = function() {
85+
var toggleCapsLock = function () {
7486
$scope.capsLocked = !$scope.capsLocked;
7587
};
7688

@@ -103,11 +115,28 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
103115
$scope.toggleCaps = toggleCaps;
104116
$scope.toggleCapsLock = toggleCapsLock;
105117
$scope.pressed = triggerKey;
118+
119+
$scope.$on('$mdKeyboardLayoutChanged', function () {
120+
$scope.keyboard = $mdKeyboard.getLayout();
121+
$scope.pressed = triggerKey;
122+
});
106123
};
107124

108125
_init();
109126
}
110127

128+
function _getCaretPosition() {
129+
if ('selectionStart' in element) {
130+
return element.selectionStart;
131+
} else if (document.selection) {
132+
element.focus();
133+
var sel = document.selection.createRange();
134+
var selLen = document.selection.createRange().text.length;
135+
sel.moveStart('character', -element.value.length);
136+
return sel.text.length - selLen;
137+
}
138+
};
139+
111140
function triggerKey($event, key) {
112141
$event.preventDefault();
113142
$log.debug('key pressed: ' + key);
@@ -144,9 +173,9 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
144173
//} else self.VKI_insert("\t");
145174
//return false;
146175

147-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '') + "\t");
148-
ngModelCtrl.$validate();
149-
ngModelCtrl.$render();
176+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + "\t");
177+
$mdKeyboard.currentModel.$validate();
178+
$mdKeyboard.currentModel.$render();
150179

151180
break;
152181

@@ -173,9 +202,9 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
173202
//self.keyInputCallback();
174203
//return true;
175204

176-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '').slice(0, -1));
177-
ngModelCtrl.$validate();
178-
ngModelCtrl.$render();
205+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '').slice(0, -1));
206+
$mdKeyboard.currentModel.$validate();
207+
$mdKeyboard.currentModel.$render();
179208

180209
break;
181210

@@ -198,9 +227,9 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
198227
scope.$broadcast('$submit');
199228
scope.$root.$broadcast('$submit');
200229
} else {
201-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '') + "\n");
202-
ngModelCtrl.$validate();
203-
ngModelCtrl.$render();
230+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + "\n");
231+
$mdKeyboard.currentModel.$validate();
232+
$mdKeyboard.currentModel.$render();
204233
}
205234

206235
break;
@@ -214,19 +243,22 @@ function useKeyboardDirective($mdKeyboard, $injector, $log, $rootScope) {
214243
//});
215244
//element[0].dispatchEvent(event);
216245

217-
ngModelCtrl.$setViewValue((ngModelCtrl.$viewValue || '') + key[0]);
218-
ngModelCtrl.$validate();
219-
ngModelCtrl.$render();
220-
221-
$scope.caps = false;
246+
$mdKeyboard.currentModel.$setViewValue(($mdKeyboard.currentModel.$viewValue || '') + key[0]);
247+
$mdKeyboard.currentModel.$validate();
248+
$mdKeyboard.currentModel.$render();
249+
250+
scope.caps = false;
222251
}
223252
}
224253

225254
function hideKeyboard() {
226-
if (keyboard) {
227-
$mdKeyboard.hide();
228-
keyboard = undefined;
255+
if ($rootScope.keyboardTimeout) {
256+
$timeout.cancel($rootScope.keyboardTimeout);
229257
}
258+
//keyboard.hide();
259+
$rootScope.keyboardTimeout = $timeout(function () {
260+
$mdKeyboard.hide();
261+
}, 500);
230262
}
231263
}
232264
}

0 commit comments

Comments
 (0)