L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-85437 AI: Move focus to the AI drawer

Browse Source
This commit is contained in:
meirzamoodle
2025-05-28 11:31:30 +07:00
parent 7f5234ab13
commit 8e77499d4f
8 changed files with 29 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ai/placement/courseassist/amd/build/placement.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
ai/placement/courseassist/amd/build/placement.min.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
ai/placement/courseassist/amd/build/selectors.min.js
Vendored
+1 -1
View File
@@ -1,3 +1,3 @@
define("aiplacement_courseassist/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={ELEMENTS:{AIDRAWER:"#ai-drawer",AIDRAWER_BODY:"#ai-drawer .ai-drawer-body",PAGE:"#page",MAIN_REGION:'[role="main"]'},ACTIONS:{SUMMARY:'[data-action="course-summarise"]',RETRY:'[data-action="course-summarise-retry"]',DECLINE:'.ai-policy-block [data-action="decline"]',ACCEPT:'.ai-policy-block [data-action="accept"]',REGENERATE:'[data-action="course-summarise-regenerate"]',CANCEL:'[data-action="course-summarise-cancel"]'}},_exports.default}));
define("aiplacement_courseassist/selectors",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0;return _exports.default={ELEMENTS:{AIDRAWER:"#ai-drawer",AIDRAWER_BODY:"#ai-drawer .ai-drawer-body",PAGE:"#page",MAIN_REGION:'[role="main"]',JUMPTO:'.ai-course-summarise-controls [data-region="jumpto"]',AIDRAWER_CLOSE:"#ai-drawer-close"},ACTIONS:{SUMMARY:'[data-action="course-summarise"]',RETRY:'[data-action="course-summarise-retry"]',DECLINE:'.ai-policy-block [data-action="decline"]',ACCEPT:'.ai-policy-block [data-action="accept"]',REGENERATE:'[data-action="course-summarise-regenerate"]',CANCEL:'[data-action="course-summarise-cancel"]'}},_exports.default}));
//# sourceMappingURL=selectors.min.js.map
ai/placement/courseassist/amd/build/selectors.min.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"selectors.min.js","sources":["../src/selectors.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the AI Course assistant.\n *\n * @module aiplacement_courseassist/selectors\n * @copyright 2024 Huong Nguyen <[email protected]>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nexport default {\n ELEMENTS: {\n AIDRAWER: '#ai-drawer',\n AIDRAWER_BODY: '#ai-drawer .ai-drawer-body',\n PAGE: '#page',\n MAIN_REGION: '[role=\"main\"]',\n },\n ACTIONS: {\n SUMMARY: '[data-action=\"course-summarise\"]',\n RETRY: '[data-action=\"course-summarise-retry\"]',\n DECLINE: '.ai-policy-block [data-action=\"decline\"]',\n ACCEPT: '.ai-policy-block [data-action=\"accept\"]',\n REGENERATE: '[data-action=\"course-summarise-regenerate\"]',\n CANCEL: '[data-action=\"course-summarise-cancel\"]',\n }\n};\n"],"names":["ELEMENTS","AIDRAWER","AIDRAWER_BODY","PAGE","MAIN_REGION","ACTIONS","SUMMARY","RETRY","DECLINE","ACCEPT","REGENERATE","CANCEL"],"mappings":"oLAsBe,CACXA,SAAU,CACNC,SAAU,aACVC,cAAe,6BACfC,KAAM,QACNC,YAAa,iBAEjBC,QAAS,CACLC,QAAS,mCACTC,MAAO,yCACPC,QAAS,2CACTC,OAAQ,0CACRC,WAAY,8CACZC,OAAQ"}
{"version":3,"file":"selectors.min.js","sources":["../src/selectors.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Define all of the selectors we will be using on the AI Course assistant.\n *\n * @module aiplacement_courseassist/selectors\n * @copyright 2024 Huong Nguyen <[email protected]>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\nexport default {\n ELEMENTS: {\n AIDRAWER: '#ai-drawer',\n AIDRAWER_BODY: '#ai-drawer .ai-drawer-body',\n PAGE: '#page',\n MAIN_REGION: '[role=\"main\"]',\n JUMPTO: '.ai-course-summarise-controls [data-region=\"jumpto\"]',\n AIDRAWER_CLOSE: '#ai-drawer-close',\n },\n ACTIONS: {\n SUMMARY: '[data-action=\"course-summarise\"]',\n RETRY: '[data-action=\"course-summarise-retry\"]',\n DECLINE: '.ai-policy-block [data-action=\"decline\"]',\n ACCEPT: '.ai-policy-block [data-action=\"accept\"]',\n REGENERATE: '[data-action=\"course-summarise-regenerate\"]',\n CANCEL: '[data-action=\"course-summarise-cancel\"]',\n }\n};\n"],"names":["ELEMENTS","AIDRAWER","AIDRAWER_BODY","PAGE","MAIN_REGION","JUMPTO","AIDRAWER_CLOSE","ACTIONS","SUMMARY","RETRY","DECLINE","ACCEPT","REGENERATE","CANCEL"],"mappings":"oLAsBe,CACXA,SAAU,CACNC,SAAU,aACVC,cAAe,6BACfC,KAAM,QACNC,YAAa,gBACbC,OAAQ,uDACRC,eAAgB,oBAEpBC,QAAS,CACLC,QAAS,mCACTC,MAAO,yCACPC,QAAS,2CACTC,OAAQ,0CACRC,WAAY,8CACZC,OAAQ"}
ai/placement/courseassist/amd/src/placement.js
+20 -25
View File
@@ -57,6 +57,9 @@ const AICourseAssist = class {
this.aiDrawerElement = document.querySelector(Selectors.ELEMENTS.AIDRAWER);
this.aiDrawerBodyElement = document.querySelector(Selectors.ELEMENTS.AIDRAWER_BODY);
this.pageElement = document.querySelector(Selectors.ELEMENTS.PAGE);
this.jumpToElement = document.querySelector(Selectors.ELEMENTS.JUMPTO);
this.summaryActionElement = document.querySelector(Selectors.ACTIONS.SUMMARY);
this.aiDrawerCloseElement = this.aiDrawerElement.querySelector(Selectors.ELEMENTS.AIDRAWER_CLOSE);
this.registerEventListeners();
}
@@ -70,6 +73,7 @@ const AICourseAssist = class {
if (summariseAction) {
e.preventDefault();
this.toggleAIDrawer();
this.summaryActionElement.focus();
const isPolicyAccepted = await this.isPolicyAccepted();
if (!isPolicyAccepted) {
// Display policy.
@@ -87,6 +91,16 @@ const AICourseAssist = class {
this.closeAIDrawer();
}
});
// Focus on the AI drawer's close button when the jump-to element is focused.
this.jumpToElement.addEventListener('focus', () => {
this.aiDrawerCloseElement.focus();
});
// Focus on the summary action element when the AI drawer is focused.
this.aiDrawerElement.addEventListener('focus', () => {
this.summaryActionElement.focus();
});
}
/**
@@ -177,12 +191,13 @@ const AICourseAssist = class {
// Close message drawer if it is shown.
MessageDrawerHelper.hide();
this.aiDrawerElement.classList.add('show');
this.aiDrawerElement.setAttribute('tabindex', '0');
this.aiDrawerBodyElement.setAttribute('aria-live', 'polite');
if (!this.pageElement.classList.contains('show-drawer-right')) {
this.addPadding();
}
// Disable the summary button.
this.disableSummaryButton();
this.jumpToElement.setAttribute('tabindex', 0);
this.jumpToElement.focus();
}
/**
@@ -190,12 +205,13 @@ const AICourseAssist = class {
*/
closeAIDrawer() {
this.aiDrawerElement.classList.remove('show');
this.aiDrawerElement.setAttribute('tabindex', '-1');
this.aiDrawerBodyElement.removeAttribute('aria-live');
if (this.pageElement.classList.contains('show-drawer-right') && this.aiDrawerBodyElement.dataset.removepadding === '1') {
this.removePadding();
}
// Enable the summary button.
this.enableSummaryButton();
this.jumpToElement.setAttribute('tabindex', -1);
this.summaryActionElement.focus();
}
/**
@@ -225,27 +241,6 @@ const AICourseAssist = class {
this.aiDrawerBodyElement.dataset.removepadding = '0';
}
/**
* Disable the summary button.
*/
disableSummaryButton() {
const summaryButton = document.querySelector(Selectors.ACTIONS.SUMMARY);
if (summaryButton) {
summaryButton.setAttribute('disabled', 1);
}
}
/**
* Enable the summary button and focus on it.
*/
enableSummaryButton() {
const summaryButton = document.querySelector(Selectors.ACTIONS.SUMMARY);
if (summaryButton) {
summaryButton.removeAttribute('disabled');
summaryButton.focus();
}
}
/**
* Check if the policy is accepted.
* @return {bool} True if the policy is accepted, false otherwise.
ai/placement/courseassist/amd/src/selectors.js
+2
View File
@@ -26,6 +26,8 @@ export default {
AIDRAWER_BODY: '#ai-drawer .ai-drawer-body',
PAGE: '#page',
MAIN_REGION: '[role="main"]',
JUMPTO: '.ai-course-summarise-controls [data-region="jumpto"]',
AIDRAWER_CLOSE: '#ai-drawer-close',
},
ACTIONS: {
SUMMARY: '[data-action="course-summarise"]',
ai/placement/courseassist/templates/drawer.mustache
+1 -1
View File
@@ -31,7 +31,7 @@
"content": "<p>Content to display</p>"
}
}}
<div class="ai-drawer" id="ai-drawer">
<div class="ai-drawer" id="ai-drawer" tabindex="-1">
<div class="ai-drawer-header">
<button id="ai-drawer-close" class="btn ai-drawer-button" type="button" data-action="course-summarise">
{{#pix}} e/cancel, core {{/pix}}
ai/placement/courseassist/templates/summarise_button.mustache
+2
View File
@@ -33,6 +33,7 @@
data-action="course-summarise"
data-toggle="tooltip"
data-html="true"
data-delay="200"
title="{{#str}} summarise_tooltips, aiplacement_courseassist {{/str}}"
>
<span class="ai-course-summarise-sparkles-icon">
@@ -43,4 +44,5 @@
</span>
{{#str}} summarise, aiplacement_courseassist {{/str}}
</button>
{{> core_message/message_jumpto }}
</div>