From 199c5a960665da00ca66d8753a56c463572c7015 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 2 Mar 2017 16:05:31 +0100 Subject: [PATCH] add keyboard shortcuts to partial view editor --- .../common/services/templatehelper.service.js | 27 ++++++- .../src/views/partialviews/edit.controller.js | 76 +++++++++++++++++++ .../src/views/partialviews/edit.html | 27 ++++--- .../src/views/templates/edit.controller.js | 3 +- 4 files changed, 119 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/templatehelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/templatehelper.service.js index 5d00e2d56d..aefbc5625b 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/templatehelper.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/templatehelper.service.js @@ -130,6 +130,30 @@ }; } + function getPartialViewEditorShortcuts(){ + return { + "name": "Umbraco", //No need to localise Umbraco is the same in all languages :) + "shortcuts": [ + { + "description": localizationService.format(["template_insert", "template_insertPageField"], "%0% %1%"), + "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "v" }] + }, + { + "description": localizationService.format(["template_insert", "template_insertDictionaryItem"], "%0% %1%"), + "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "d" }] + }, + { + "description": localizationService.format(["template_insert", "template_insertMacro"], "%0% %1%"), + "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "m" }] + }, + { + "description": localizationService.localize("template_queryBuilder"), + "keys": [{ "key": "alt" }, { "key": "shift" }, { "key": "q" }] + } + ] + }; + } + //////////// var service = { @@ -141,7 +165,8 @@ getAddSectionSnippet: getAddSectionSnippet, getGeneralShortcuts: getGeneralShortcuts, getEditorShortcuts: getEditorShortcuts, - getTemplateEditorShortcuts: getTemplateEditorShortcuts + getTemplateEditorShortcuts: getTemplateEditorShortcuts, + getPartialViewEditorShortcuts: getPartialViewEditorShortcuts }; return service; diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js index a493ed30c1..adcb3dea07 100644 --- a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js @@ -15,6 +15,16 @@ vm.page.menu.currentSection = appState.getSectionState("currentSection"); vm.page.menu.currentNode = null; + //Used to toggle the keyboard shortcut modal + //From a custom keybinding in ace editor - that conflicts with our own to show the dialog + vm.showKeyboardShortcut = false; + + //Keyboard shortcuts for help dialog + vm.page.keyboardShortcutsOverview = []; + vm.page.keyboardShortcutsOverview.push(templateHelper.getGeneralShortcuts()); + vm.page.keyboardShortcutsOverview.push(templateHelper.getEditorShortcuts()); + vm.page.keyboardShortcutsOverview.push(templateHelper.getPartialViewEditorShortcuts()); + // bind functions to view model vm.save = save; vm.openPageFieldOverlay = openPageFieldOverlay; @@ -270,6 +280,72 @@ }, onLoad: function(_editor) { vm.editor = _editor; + + //Update the auto-complete method to use ctrl+alt+space + _editor.commands.bindKey("ctrl-alt-space", "startAutocomplete"); + + //Unassigns the keybinding (That was previously auto-complete) + //As conflicts with our own tree search shortcut + _editor.commands.bindKey("ctrl-space", null); + + //TODO: Move all these keybinding config out into some helper/service + // Assign new keybinding + _editor.commands.addCommands([ + //Disable (alt+shift+K) + //Conflicts with our own show shortcuts dialog - this overrides it + { + name: 'unSelectOrFindPrevious', + bindKey: 'Alt-Shift-K', + exec: function () { + //Toggle the show keyboard shortcuts overlay + $scope.$apply(function () { + vm.showKeyboardShortcut = !vm.showKeyboardShortcut; + }); + }, + readOnly: true + }, + { + name: 'insertUmbracoValue', + bindKey: 'Alt-Shift-V', + exec: function () { + $scope.$apply(function () { + openPageFieldOverlay(); + }); + }, + readOnly: true + }, + { + name: 'insertDictionary', + bindKey: 'Alt-Shift-D', + exec: function () { + $scope.$apply(function () { + openDictionaryItemOverlay(); + }); + }, + readOnly: true + }, + { + name: 'insertUmbracoMacro', + bindKey: 'Alt-Shift-M', + exec: function () { + $scope.$apply(function () { + openMacroOverlay(); + }); + }, + readOnly: true + }, + { + name: 'insertQuery', + bindKey: 'Alt-Shift-Q', + exec: function () { + $scope.$apply(function () { + openQueryBuilderOverlay(); + }); + }, + readOnly: true + }, + + ]); // initial cursor placement // Keep cursor in name field if we are create a new template diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html index 2c974fcfaa..45ef1d38a4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html @@ -67,18 +67,23 @@ - + + + + - - - - + + + + diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js index d68cf83a36..4305238932 100644 --- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js @@ -161,9 +161,8 @@ //As conflicts with our own tree search shortcut _editor.commands.bindKey("ctrl-space", null); - - //TODO: Move all these keybinding config out into some helper/service + // Assign new keybinding _editor.commands.addCommands([ //Disable (alt+shift+K) //Conflicts with our own show shortcuts dialog - this overrides it