frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add keyboard handling to tourGuide - escape/enter

Browse Source
This commit is contained in:
Nick O'Leary 2021-09-27 17:35:24 +01:00
parent ad542b91fa
commit 5329e803e2
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/node_modules/@node-red/editor-client/locales/en-US/editor.json vendored
View File

@ -1133,6 +1133,10 @@
"preview": "UI Preview", "preview": "UI Preview",
"defaultValue": "Default value" "defaultValue": "Default value"
}, },
"tourGuide": {
"start": "Start",
"next": "Next"
},
"languages" : { "languages" : {
"de": "German", "de": "German",
"en-US": "English", "en-US": "English",

26
packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js vendored
View File

@ -95,6 +95,7 @@ RED.tourGuide = (function() {
function endTour(err) { function endTour(err) {
$(window).off("resize.red-ui-tourGuide"); $(window).off("resize.red-ui-tourGuide");
$(document).off('keydown.red-ui-tourGuide');
if (popover) { if (popover) {
popover.close(); popover.close();
} }
@ -269,17 +270,19 @@ RED.tourGuide = (function() {
// } // }
$('<small>').text((state.index+1)+"/"+state.count).appendTo(stepToolbar) $('<small>').text((state.index+1)+"/"+state.count).appendTo(stepToolbar)
var nextButton;
if (fullscreen || !step.wait) { if (fullscreen || !step.wait) {
var nextButton = $('<button type="button" class="red-ui-button" style="position: absolute; right:0;bottom:0;"></button>').appendTo(stepToolbar).click(function(evt) { nextButton = $('<button type="button" class="red-ui-button" style="position: absolute; right:0;bottom:0;"></button>').appendTo(stepToolbar).one('click',function(evt) {
evt.preventDefault(); evt.preventDefault();
stepEventListener(); stepEventListener();
}); });
if (state.index === state.count - 1) { if (state.index === state.count - 1) {
$('<span>close</span>').appendTo(nextButton); $('<span></span>').text(RED._("common.label.close")).appendTo(nextButton);
} else if (state.index === 0) { } else if (state.index === 0) {
$('<span>start</span>').appendTo(nextButton); $('<span>start</span>').text(RED._("tourGuide.start")).appendTo(nextButton);
} else if (state.index < state.count-1) { } else if (state.index < state.count-1) {
$('<span>next <i class="fa fa-chevron-right"></i></span>').appendTo(nextButton); $('<span></span>').text(RED._("tourGuide.next")).appendTo(nextButton);
$('<span style="margin-left: 4px"><i class="fa fa-chevron-right"></i></span>').appendTo(nextButton);
} }
} }
@ -299,6 +302,16 @@ RED.tourGuide = (function() {
content: stepContent content: stepContent
}).open(); }).open();
} }
$(document).off('keydown.red-ui-tourGuide');
$(document).on('keydown.red-ui-tourGuide', function(evt) {
if (evt.key === "Escape" || evt.key === "Esc") {
evt.preventDefault();
evt.stopPropagation();
completeStep(step, state, function() {
done(false);
});
}
})
popover.element.toggleClass("red-ui-tourGuide-popover-full",!!fullscreen); popover.element.toggleClass("red-ui-tourGuide-popover-full",!!fullscreen);
popover.move({ popover.move({
target: targetElement, target: targetElement,
@ -307,6 +320,11 @@ RED.tourGuide = (function() {
direction: direction, direction: direction,
}) })
if (nextButton) {
setTimeout(function() {
nextButton.focus();
},50);
}
var isSVG = targetElement[0] instanceof SVGElement; var isSVG = targetElement[0] instanceof SVGElement;
if (step.fallback) { if (step.fallback) {