Skip to content

Commit

Permalink
IVYPORTAL-17764: Check shoutcuts keys pressed (#1127) (#1162)
Browse files Browse the repository at this point in the history 
(cherry picked from commit d2e1327)
  • Loading branch information
@pvthai-axonivy
pvthai-axonivy authored Oct 24, 2024
1 parent 6e0e1e9 commit 5173788
Showing 1 changed file with 141 additions and 138 deletions.
279 changes: 141 additions & 138 deletions AxonIvyPortal/portal/webContent/resources/js/portal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -504,6 +504,10 @@ $(document).ready(function() {
let focusedResetTaskFormEl = 0;
let focusedTaskSideStepEl;

function onlyAltPressed(event) {
return event ? event.altKey && !event.ctrlKey && !event.shiftKey && !event.metaKey : false;
}

function removeFocusClass(element) {
if(element) {
element.removeClass('focused');
Expand Down Expand Up @@ -541,166 +545,165 @@ $(document).ready(function() {
});

$(document).on('keydown', function(event) {
if (event.key === 'Tab') {
removeFocusedElements();
}
var caseActionStepsPanel = $('[id*="action-steps-panel"]:visible');
var caseActionStepsPanelVisible = caseActionStepsPanel.length > 0;

var resetTaskConfirmForm = $('[id$="task-component:reset-task-confirmation-form"]:visible');
var resetTaskConfirmFormVisible = resetTaskConfirmForm.length > 0;

var taskActionStepsPanel = $('[id$=":side-steps-panel"]:visible');
var taskActionStepsPanelVisible = taskActionStepsPanel.length > 0;


if (event.altKey && !isNaN(event.key) && event.key >= '1' && event.key <= '9') {
var index = parseInt(event.key) - 1;
if (index >= 0 && index < focusableElements.length) {
event.preventDefault();
var focusedElement = $(focusableElements[index]);
removeFocusedElements();
taskIndex = 0;
taskSideStepIndex = 0;
processIndex = 0;
if(caseActionStepsPanelVisible) {
caseSideStepIndex = 0;
} else {
caseIndex = 0;
if (event.key === 'Escape') {
var collapseWidgetBtn = $('[id*="collapse-link"]:visible');
if (collapseWidgetBtn.length > 0) {
collapseWidgetBtn.click();
}

var caseSideActionCloseBtn = $('[id*="action-steps-panel"]:visible').find('.ui-overlaypanel-close');
if (caseSideActionCloseBtn.length > 0) {
caseSideActionCloseBtn.click();

if(focusedCaseEl) {
focusedCaseEl.addClass('focused');
focusedCaseEl.focus();
}
addFocusClass(focusedElement);
}

var taskSideActionCloseBtn = $('[id*="side-steps-panel"]:visible').find('.ui-overlaypanel-close');
if (taskSideActionCloseBtn.length > 0) {
taskSideActionCloseBtn.click();
}
return;
}
}

if (event.altKey) {
//Short cuts for Task widget
var key = event.key.toLowerCase();
if (key == 'w') {
if(resetTaskConfirmFormVisible) {
var cancelOk = [
resetTaskConfirmForm.find('a:first'),
resetTaskConfirmForm.find('button:first')
];

if(resetTaskFormIndex >= cancelOk.length) {
resetTaskFormIndex = 0;
}
if (event.key === 'Tab') {
removeFocusedElements();
return;
}

removeFocusedElements();

focusedResetTaskFormEl = $(cancelOk[resetTaskFormIndex]);
addFocusClass(focusedResetTaskFormEl);
resetTaskFormIndex++;
} else if(taskActionStepsPanelVisible) {
var caseActionStepsPanel = $('[id*="action-steps-panel"]:visible');
var caseActionStepsPanelVisible = caseActionStepsPanel.length > 0;

var resetTaskConfirmForm = $('[id$="task-component:reset-task-confirmation-form"]:visible');
var resetTaskConfirmFormVisible = resetTaskConfirmForm.length > 0;

var taskActionStepsPanel = $('[id$=":side-steps-panel"]:visible');
var taskActionStepsPanelVisible = taskActionStepsPanel.length > 0;


if (onlyAltPressed(event)) {
var key = event.key.toLowerCase();
if (!isNaN(key) && key >= '1' && key <= '9') {
//Short cuts main menu item
var index = parseInt(key) - 1;
if (index >= 0 && index < focusableElements.length) {
event.preventDefault();
var focusedElement = $(focusableElements[index]);
removeFocusedElements();
taskIndex = 0;
taskSideStepIndex = 0;
processIndex = 0;
if(caseActionStepsPanelVisible) {
caseSideStepIndex = 0;
} else {
caseIndex = 0;
}
addFocusClass(focusedElement);
}
} else if (key == 'w') {
//Short cuts for Task widget
if(resetTaskConfirmFormVisible) {
var cancelOk = [
resetTaskConfirmForm.find('a:first'),
resetTaskConfirmForm.find('button:first')
];

if(resetTaskFormIndex >= cancelOk.length) {
resetTaskFormIndex = 0;
}

var steps = taskActionStepsPanel.find('div.ui-overlaypanel-content a');
if(taskSideStepIndex >= steps.length) {
removeFocusedElements();

focusedResetTaskFormEl = $(cancelOk[resetTaskFormIndex]);
addFocusClass(focusedResetTaskFormEl);
resetTaskFormIndex++;
} else if(taskActionStepsPanelVisible) {

var steps = taskActionStepsPanel.find('div.ui-overlaypanel-content a');
if(taskSideStepIndex >= steps.length) {
taskSideStepIndex = 0;
}

removeFocusedElements();

focusedTaskSideStepEl = $(steps[taskSideStepIndex]);
addFocusClass(focusedTaskSideStepEl);
taskSideStepIndex++;
} else {
var taskList = $('[id$=":task-component:dashboard-tasks"] table tr td:visible [id$=":start-task"]');
if(taskIndex >= taskList.length) {
taskIndex = 0;
}

removeFocusedElements();
processIndex = 0;
taskSideStepIndex = 0;
if(caseActionStepsPanelVisible) {
caseSideStepIndex = 0;
} else {
caseIndex = 0;
}

focusedTaskEl = $(taskList[taskIndex]);
addFocusClass(focusedTaskEl);
taskIndex++;
}

removeFocusedElements();

focusedTaskSideStepEl = $(steps[taskSideStepIndex]);
addFocusClass(focusedTaskSideStepEl);
taskSideStepIndex++;
} else {
var taskList = $('[id$=":start-task"]');
if(taskIndex >= taskList.length) {
taskIndex = 0;
}

removeFocusedElements();
processIndex = 0;
taskSideStepIndex = 0;
} else if (key == 'q') {
//Short cuts for Case widget
if(caseActionStepsPanelVisible) {
caseSideStepIndex = 0;
var steps = caseActionStepsPanel.find('div.ui-overlaypanel-content a');

if(caseSideStepIndex >= steps.length) {
caseSideStepIndex = 0;
}

removeFocusedElements();

focusedCaseSideStepEl = $(steps[caseSideStepIndex]);
addFocusClass(focusedCaseSideStepEl);
caseSideStepIndex++;
} else {
caseIndex = 0;
}

focusedTaskEl = $(taskList[taskIndex]);
addFocusClass(focusedTaskEl);
taskIndex++;
}
}
var caseList = $('[id$="case-component:dashboard-cases"] table tr td:visible [id$=":dashboard-case-side-steps-menu"]');

if(caseIndex >= caseList.length) {
caseIndex = 0;
}

//Short cuts for Case widget
if (key == 'q') {
if(caseActionStepsPanelVisible) {
var steps = caseActionStepsPanel.find('div.ui-overlaypanel-content a');

if(caseSideStepIndex >= steps.length) {
removeFocusedElements();
taskIndex = 0;
taskSideStepIndex = 0;
processIndex = 0;
caseSideStepIndex = 0;

focusedCaseEl = $(caseList[caseIndex]);
addFocusClass(focusedCaseEl);
caseIndex++;
}

removeFocusedElements();

focusedCaseSideStepEl = $(steps[caseSideStepIndex]);
addFocusClass(focusedCaseSideStepEl);
caseSideStepIndex++;
} else {
var caseList = $('[id$="case-component:dashboard-cases"]').find('[id$=":dashboard-case-side-steps-menu"]');
} else if (key == 'a') {
//Short cuts for Process widget
var processList = $('[id$=":process-component:process-list"]').find('a');

if(caseIndex >= caseList.length) {
caseIndex = 0;
if(processIndex >= processList.length) {
processIndex = 0;
}

removeFocusedElements();
taskIndex = 0;
taskSideStepIndex = 0;
processIndex = 0;
caseSideStepIndex = 0;

focusedCaseEl = $(caseList[caseIndex]);
addFocusClass(focusedCaseEl);
caseIndex++;
}
}

//Short cuts for Process widget
if (key == 'a') {
var processList = $('[id$=":process-component:process-list"]').find('a');

if(processIndex >= processList.length) {
processIndex = 0;
}

removeFocusedElements();
taskIndex = 0;
taskSideStepIndex = 0;
if(caseActionStepsPanelVisible) {
caseSideStepIndex = 0;
} else {
caseIndex = 0;
}

focusedProcessEl = $(processList[processIndex]);
addFocusClass(focusedProcessEl);
processIndex++;
}
}

if (event.key === 'Escape') {
var collapseWidgetBtn = $('[id*="collapse-link"]:visible');
if (collapseWidgetBtn.length > 0) {
collapseWidgetBtn.click();
}

var caseSideActionCloseBtn = $('[id*="action-steps-panel"]:visible').find('.ui-overlaypanel-close');
if (caseSideActionCloseBtn.length > 0) {
caseSideActionCloseBtn.click();
if(caseActionStepsPanelVisible) {
caseSideStepIndex = 0;
} else {
caseIndex = 0;
}

if(focusedCaseEl) {
focusedCaseEl.addClass('focused');
focusedCaseEl.focus();
focusedProcessEl = $(processList[processIndex]);
addFocusClass(focusedProcessEl);
processIndex++;
}
}

var taskSideActionCloseBtn = $('[id*="side-steps-panel"]:visible').find('.ui-overlaypanel-close');
if (taskSideActionCloseBtn.length > 0) {
taskSideActionCloseBtn.click();
}
}
});
});
// End of accessibility for shortcuts navigation

0 comments on commit 5173788

Please sign in to comment.