add mac/win versions of keyboard shortcuts

This commit is contained in:
Mads Rasmussen
2017-03-02 13:04:55 +01:00
parent 13cf9f46e7
commit 6c3f1c0e32
4 changed files with 96 additions and 27 deletions

View File

@@ -107,36 +107,76 @@ When this combination is hit an overview is opened with shortcuts based on the m
@param {object} model keyboard shortcut model. See description and example above.
**/
(function() {
'use strict';
(function () {
'use strict';
function KeyboardShortcutsOverviewDirective() {
function KeyboardShortcutsOverviewDirective(platformService) {
function link(scope, el, attr, ctrl) {
function link(scope, el, attr, ctrl) {
scope.toggleShortcutsOverlay = function() {
scope.showOverlay = !scope.showOverlay;
scope.onToggle();
};
var eventBindings = [];
var isMac = platformService.isMac();
scope.toggleShortcutsOverlay = function () {
scope.showOverlay = !scope.showOverlay;
scope.onToggle();
};
function onInit() {
angular.forEach(scope.model, function (shortcutGroup) {
angular.forEach(shortcutGroup.shortcuts, function (shortcut) {
shortcut.platformKeys = [];
// get shortcut keys for mac
if (isMac && shortcut.keys && shortcut.keys.mac) {
shortcut.platformKeys = shortcut.keys.mac;
// get shortcut keys for windows
} else if (!isMac && shortcut.keys && shortcut.keys.win) {
shortcut.platformKeys = shortcut.keys.win;
// get default shortcut keys
} else if (shortcut.keys && shortcut && shortcut.keys.length > 0) {
shortcut.platformKeys = shortcut.keys;
}
});
});
}
onInit();
eventBindings.push(scope.$watch('model', function(newValue, oldValue){
if (newValue !== oldValue) {
onInit();
}
}));
// clean up
scope.$on('$destroy', function () {
// unbind watchers
for (var e in eventBindings) {
eventBindings[e]();
}
});
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-keyboard-shortcuts-overview.html',
link: link,
scope: {
model: "=",
onToggle: "&",
showOverlay: "="
}
};
return directive;
}
var directive = {
restrict: 'E',
replace: true,
templateUrl: 'views/components/umb-keyboard-shortcuts-overview.html',
link: link,
scope: {
model: "=",
onToggle: "&",
showOverlay: "="
}
};
return directive;
}
angular.module('umbraco.directives').directive('umbKeyboardShortcutsOverview', KeyboardShortcutsOverviewDirective);
angular.module('umbraco.directives').directive('umbKeyboardShortcutsOverview', KeyboardShortcutsOverviewDirective);
})();

View File

@@ -0,0 +1,23 @@
(function() {
'use strict';
function platformService() {
function isMac() {
return navigator.platform.toUpperCase().indexOf('MAC')>=0;
}
////////////
var service = {
isMac: isMac
};
return service;
}
angular.module('umbraco.services').factory('platformService', platformService);
})();

View File

@@ -70,11 +70,17 @@
},
{
"description": localizationService.localize("shortcuts_copyLineUp"),
"keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "up" }]
"keys": {
"win": [{ "key": "alt" }, { "key": "shift" }, { "key": "up" }],
"mac": [{ "key": "cmd" }, { "key": "alt" }, { "key": "up" }]
}
},
{
"description": localizationService.localize("shortcuts_copyLineDown"),
"keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "down" }]
"keys": {
"win": [{ "key": "alt" }, { "key": "shift" }, { "key": "down" }],
"mac": [{ "key": "cmd" }, { "key": "alt" }, { "key": "down" }]
}
},
{
"description": localizationService.localize("shortcuts_moveLineUp"),

View File

@@ -35,7 +35,7 @@
<div class="umb-keyboard-shortcuts-overview__description">{{ keyboardShortcut.description }}</div>
<div class="umb-keyboard-keys">
<div ng-repeat="key in keyboardShortcut.keys">
<div ng-repeat="key in keyboardShortcut.platformKeys">
<div class="umb-keyboard-key-wrapper">
<div class="umb-keyboard-key">{{ key.key }}</div>