Skip to content

Commit 1ae8156

Browse files
davidenkedavidenke
committed
m>d
1 parent 708fc03 commit 1ae8156

10 files changed

+334
-179
lines changed

‎dist/mdKeyboard.js

Lines changed: 165 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
*/
99
(function (angular) {
1010

11-
angular.module('mdKeyboard', ['material.components.bottomSheet']);
11+
angular.module('mdKeyboard', ['material.core']);
1212

1313
/* See http://www.greywyvern.com/code/javascript/keyboard for examples
1414
* and usage instructions.
@@ -1089,49 +1089,168 @@ angular
10891089

10901090
angular
10911091
.module('mdKeyboard')
1092-
.provider('mdKeyboard', MdKeyboardProvider);
1093-
1094-
function MdKeyboardProvider(keyboardLayouts, keyboardDeadkey) {
1095-
var self = this;
1096-
1097-
this.layouts = keyboardLayouts;
1098-
this.deadkey = keyboardDeadkey;
1099-
this.themable = true;
1100-
this.layout = 'US International';
1101-
this.symbols = {
1102-
'\u00a0': "NB\nSP", '\u200b': "ZW\nSP", '\u200c': "ZW\nNJ", '\u200d': "ZW\nJ"
1103-
};
1104-
this.numpad = [
1092+
.constant('keyboardNumpad', [
11051093
[["$"], ["\u00a3"], ["\u20ac"], ["\u00a5"]],
11061094
[["7"], ["8"], ["9"], ["/"]],
11071095
[["4"], ["5"], ["6"], ["*"]],
11081096
[["1"], ["2"], ["3"], ["-"]],
11091097
[["0"], ["."], ["="], ["+"]]
1110-
];
1098+
]);
11111099

1112-
console.log(this.deadkey);
1100+
angular
1101+
.module('mdKeyboard')
1102+
.constant('keyboardSymbols', {
1103+
'\u00a0': "NB\nSP", '\u200b': "ZW\nSP", '\u200c': "ZW\nNJ", '\u200d': "ZW\nJ"
1104+
});
11131105

1114-
this.setThemable = function (value) {
1115-
this.themable = !!value;
1116-
};
1117-
this.setLayout = function (value) {
1118-
this.layout = value || 'US International';
1106+
angular
1107+
.module('mdKeyboard')
1108+
.provider('$mdKeyboardProvider', MdKeyboardProvider);
1109+
1110+
function MdKeyboardProvider(keyboardLayouts, keyboardDeadkey, keyboardSymbols, keyboardNumpad) {
1111+
// how fast we need to flick down to close the sheet, pixels/ms
1112+
var CLOSING_VELOCITY = 0.5;
1113+
var PADDING = 80; // same as css
1114+
1115+
return keyboardProvider = {
1116+
themable: true,
1117+
onShow: onShow,
1118+
onRemove: onRemove,
1119+
clickOutsideToClose: true,
1120+
disableParentScroll: true,
1121+
1122+
layouts: keyboardLayouts,
1123+
deadkey: keyboardDeadkey,
1124+
symbols: keyboardSymbols,
1125+
numpad: keyboardNumpad,
1126+
layout: 'US International',
1127+
1128+
setNonce: function(nonceValue) {
1129+
nonce = nonceValue;
1130+
},
1131+
setDefaultTheme: function(theme) {
1132+
defaultTheme = theme;
1133+
},
1134+
alwaysWatchTheme: function(alwaysWatch) {
1135+
alwaysWatchTheme = alwaysWatch;
1136+
},
1137+
generateThemesOnDemand: function(onDemand) {
1138+
generateOnDemand = onDemand;
1139+
},
1140+
$get: function () {}
11191141
};
11201142

1121-
this.$get = function () {
1143+
function onShow(scope, element, options, controller) {
1144+
1145+
element = $mdUtil.extractElementByName(element, 'md-keyboard');
1146+
1147+
if (options.clickOutsideToClose) {
1148+
backdrop.on('click', function () {
1149+
$mdUtil.nextTick($mdKeyboard.cancel, true);
1150+
});
1151+
}
1152+
1153+
$mdTheming.inherit(backdrop, options.parent);
1154+
1155+
var keyboard = new Keyboard(element, options.parent);
1156+
options.keyboard = keyboard;
1157+
1158+
$mdTheming.inherit(keyboard.element, options.parent);
1159+
1160+
if (options.disableParentScroll) {
1161+
options.restoreScroll = $mdUtil.disableScrollAround(keyboard.element, options.parent);
1162+
}
1163+
1164+
return $animate.enter(keyboard.element, options.parent)
1165+
.then(function () {
1166+
var focusable = $mdUtil.findFocusTarget(element) || angular.element(
1167+
element[0].querySelector('button') ||
1168+
element[0].querySelector('a') ||
1169+
element[0].querySelector('[ng-click]')
1170+
);
1171+
focusable.focus();
1172+
1173+
if (options.escapeToClose) {
1174+
options.rootElementKeyupCallback = function (e) {
1175+
if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
1176+
$mdUtil.nextTick($mdKeyboard.cancel, true);
1177+
}
1178+
};
1179+
$rootElement.on('keyup', options.rootElementKeyupCallback);
1180+
}
1181+
});
1182+
1183+
}
1184+
1185+
function onRemove(scope, element, options) {
1186+
1187+
var keyboard = options.keyboard;
1188+
1189+
$animate.leave(backdrop);
1190+
return $animate.leave(keyboard.element).then(function () {
1191+
if (options.disableParentScroll) {
1192+
options.restoreScroll();
1193+
delete options.restoreScroll;
1194+
}
1195+
1196+
keyboard.cleanup();
1197+
});
1198+
}
1199+
1200+
/**
1201+
* Keyboard class to apply bottom-sheet behavior to an element
1202+
*/
1203+
function Keyboard(element, parent) {
1204+
var deregister = $mdGesture.register(parent, 'drag', {horizontal: false});
1205+
parent
1206+
.on('$md.dragstart', onDragStart)
1207+
.on('$md.drag', onDrag)
1208+
.on('$md.dragend', onDragEnd);
1209+
11221210
return {
1123-
getLayout: function (value) {
1124-
return self.layouts[value || self.layout];
1211+
element: element,
1212+
cleanup: function cleanup() {
1213+
deregister();
1214+
parent.off('$md.dragstart', onDragStart);
1215+
parent.off('$md.drag', onDrag);
1216+
parent.off('$md.dragend', onDragEnd);
11251217
}
11261218
};
1127-
};
1219+
1220+
function onDragStart(ev) {
1221+
// Disable transitions on transform so that it feels fast
1222+
element.css($mdConstant.CSS.TRANSITION_DURATION, '0ms');
1223+
}
1224+
1225+
function onDrag(ev) {
1226+
var transform = ev.pointer.distanceY;
1227+
if (transform < 5) {
1228+
// Slow down drag when trying to drag up, and stop after PADDING
1229+
transform = Math.max(-PADDING, transform / 2);
1230+
}
1231+
element.css($mdConstant.CSS.TRANSFORM, 'translate3d(0,' + (PADDING + transform) + 'px,0)');
1232+
}
1233+
1234+
function onDragEnd(ev) {
1235+
if (ev.pointer.distanceY > 0 &&
1236+
(ev.pointer.distanceY > 20 || Math.abs(ev.pointer.velocityY) > CLOSING_VELOCITY)) {
1237+
var distanceRemaining = element.prop('offsetHeight') - ev.pointer.distanceY;
1238+
var transitionDuration = Math.min(distanceRemaining / ev.pointer.velocityY * 0.75, 500);
1239+
element.css($mdConstant.CSS.TRANSITION_DURATION, transitionDuration + 'ms');
1240+
$mdUtil.nextTick($mdKeyboard.cancel, true);
1241+
} else {
1242+
element.css($mdConstant.CSS.TRANSITION_DURATION, '');
1243+
element.css($mdConstant.CSS.TRANSFORM, '');
1244+
}
1245+
}
1246+
}
11281247
}
11291248

11301249
angular
11311250
.module('mdKeyboard')
11321251
.directive('mdKeyboard', MdKeyboardDirective);
11331252

1134-
function MdKeyboardDirective($injector, $animate, $mdConstant, $mdUtil, $mdTheming, $mdBottomSheet, $rootElement, $mdGesture) {
1253+
function MdKeyboardDirective($injector, $animate, $mdConstant, $mdUtil, $mdTheming, $mdKeyboardProvider, $rootElement, $mdGesture) {
11351254
return {
11361255
restrict: 'A',
11371256
require: '?ngModel',
@@ -1147,7 +1266,7 @@ function MdKeyboardDirective($injector, $animate, $mdConstant, $mdUtil, $mdThemi
11471266
return;
11481267
}
11491268

1150-
var bottomSheet;
1269+
var keyboard;
11511270

11521271
// Don't show virtual keyboard in mobile devices (default)
11531272
if ($injector.has('UAParser')) {
@@ -1172,76 +1291,28 @@ function MdKeyboardDirective($injector, $animate, $mdConstant, $mdUtil, $mdThemi
11721291
*/
11731292
element
11741293
.bind('focus', showKeyboard)
1175-
.bind('blur', hideKeyboard);
1294+
/*.bind('blur', hideKeyboard)*/;
11761295

11771296
function showKeyboard() {
1178-
bottomSheet = $mdBottomSheet
1179-
.show({
1180-
template:'<md-bottom-sheet class=md-grid layout=column ng-cloak><div ng-repeat="row in keyboard.keys" layout=row><div flex=shrink><md-button ng-repeat="key in row" class=md-raised ng-click=pressed($event) aria-label="Key {{key[0]}}">{{key[0]}}</md-button></div></div></md-bottom-sheet>',
1181-
controller: KeyboardController,
1182-
clickOutsideToClose: attrs.clickOutsideToClose || false,
1183-
escapeToClose: attrs.escapeToClose || false,
1184-
preserveScope: attrs.preserveScope || true,
1185-
useBackdrop: attrs.useBackdrop || false,
1186-
onShow: onShowKeyboard
1187-
});
1297+
keyboard = $mdKeyboardProvider.show({
1298+
template:'<md-bottom-sheet class=md-grid layout=column ng-cloak><div ng-repeat="row in keyboard.keys" layout=row><div flex=shrink><md-button ng-repeat="key in row" class=md-raised ng-click=pressed($event) aria-label="Key {{key[0]}}">{{key[0]}}</md-button></div></div></md-bottom-sheet>',
1299+
controller: KeyboardController,
1300+
clickOutsideToClose: attrs.clickOutsideToClose || false,
1301+
escapeToClose: attrs.escapeToClose || false,
1302+
preserveScope: attrs.preserveScope || true,
1303+
useBackdrop: attrs.useBackdrop || false
1304+
});
11881305
}
11891306

11901307
function hideKeyboard() {
1191-
if (bottomSheet) {
1192-
$mdBottomSheet.hide();
1193-
bottomSheet = undefined;
1308+
if (keyboard) {
1309+
$mdKeyboardProvider.hide();
1310+
keyboard = undefined;
11941311
}
11951312
}
11961313

1197-
function onShowKeyboard(scope, element, options, controller) {
1198-
$log.debug(element);
1199-
element = $mdUtil.extractElementByName(element, 'md-bottom-sheet');
1200-
1201-
// Add a backdrop that will close on click
1202-
backdrop = $mdUtil.createBackdrop(scope, "md-bottom-sheet-backdrop md-opaque");
1203-
1204-
if (options.clickOutsideToClose) {
1205-
backdrop.on('click', function () {
1206-
$mdUtil.nextTick($mdBottomSheet.cancel, true);
1207-
});
1208-
}
1209-
1210-
$mdTheming.inherit(backdrop, options.parent);
1211-
1212-
$animate.enter(backdrop, options.parent, null);
1213-
1214-
var bottomSheet = new BottomSheet(element, options.parent);
1215-
options.bottomSheet = bottomSheet;
1216-
1217-
$mdTheming.inherit(bottomSheet.element, options.parent);
1218-
1219-
if (options.disableParentScroll) {
1220-
options.restoreScroll = $mdUtil.disableScrollAround(bottomSheet.element, options.parent);
1221-
}
1222-
1223-
return $animate
1224-
.enter(bottomSheet.element, options.parent)
1225-
.then(function () {
1226-
var focusable = $mdUtil.findFocusTarget(element) || angular.element(
1227-
element[0].querySelector('button') ||
1228-
element[0].querySelector('a') ||
1229-
element[0].querySelector('[ng-click]')
1230-
);
1231-
focusable.focus();
1232-
1233-
if (options.escapeToClose) {
1234-
options.rootElementKeyupCallback = function (e) {
1235-
if (e.keyCode === $mdConstant.KEY_CODE.ESCAPE) {
1236-
$mdUtil.nextTick($mdBottomSheet.cancel, true);
1237-
}
1238-
};
1239-
$rootElement.on('keyup', options.rootElementKeyupCallback);
1240-
}
1241-
});
1242-
}
1243-
12441314
function KeyboardController($scope, $log, mdKeyboard) {
1315+
//$log.debug(mdKeyboard, element);
12451316
//element.blur();
12461317
//element.focus();
12471318

@@ -1256,6 +1327,12 @@ function MdKeyboardDirective($injector, $animate, $mdConstant, $mdUtil, $mdThemi
12561327
scope.$on('$destroy', function () {
12571328
hideKeyboard();
12581329
});
1330+
1331+
// When navigation force destroys an interimElement, then
1332+
// listen and $destroy() that interim instance...
1333+
scope.$on('$destroy', function () {
1334+
$mdKeyboardProvider.destroy();
1335+
});
12591336
}
12601337
}
12611338
}

‎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: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,10 @@ gulp.task('build', function () {
4545
gulp
4646
.src([
4747
'src/js/mdKeyboard.module.js',
48-
'src/js/mdKeyboard.layouts.js',
49-
'src/js/mdKeyboard.deadkey.js',
48+
'src/js/mdKeyboard.config.layouts.js',
49+
'src/js/mdKeyboard.config.deadkey.js',
50+
'src/js/mdKeyboard.config.numpad.js',
51+
'src/js/mdKeyboard.config.symbols.js',
5052
'src/js/mdKeyboard.provider.js',
5153
'src/js/mdKeyboard.directive.js'
5254
])

‎src/js/mdKeyboard.deadkey.js renamed to ‎src/js/mdKeyboard.config.deadkey.js

File renamed without changes.

‎src/js/mdKeyboard.layouts.js renamed to ‎src/js/mdKeyboard.config.layouts.js

File renamed without changes.

‎src/js/mdKeyboard.config.numpad.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
angular
2+
.module('mdKeyboard')
3+
.constant('keyboardNumpad', [
4+
[["$"], ["\u00a3"], ["\u20ac"], ["\u00a5"]],
5+
[["7"], ["8"], ["9"], ["/"]],
6+
[["4"], ["5"], ["6"], ["*"]],
7+
[["1"], ["2"], ["3"], ["-"]],
8+
[["0"], ["."], ["="], ["+"]]
9+
]);

‎src/js/mdKeyboard.config.symbols.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
angular
2+
.module('mdKeyboard')
3+
.constant('keyboardSymbols', {
4+
'\u00a0': "NB\nSP", '\u200b': "ZW\nSP", '\u200c': "ZW\nNJ", '\u200d': "ZW\nJ"
5+
});

0 commit comments

Comments
 (0)