From b22a25f208616af2cd3655212e2f2d16b3f8c490 Mon Sep 17 00:00:00 2001 From: Jun Pataleta <jun@moodle.com> Date: Tue, 11 Jul 2023 10:06:30 +0800 Subject: [PATCH] MDL-78549 qtype_multianswer: Configure feedback popover trigger via JS * For some reason, the `data-trigger="hover focus"` does not work when rendering the popover via HTML. It just defaults to click, so the feedback popover for qtype_multianswer questions does not show on hover. Configuring the feedback popover's trigger via JS seems to work. --- .../multianswer/amd/build/feedback.min.js | 10 ++++ .../multianswer/amd/build/feedback.min.js.map | 1 + question/type/multianswer/amd/src/feedback.js | 47 +++++++++++++++++++ question/type/multianswer/renderer.php | 7 ++- 4 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 question/type/multianswer/amd/build/feedback.min.js create mode 100644 question/type/multianswer/amd/build/feedback.min.js.map create mode 100644 question/type/multianswer/amd/src/feedback.js diff --git a/question/type/multianswer/amd/build/feedback.min.js b/question/type/multianswer/amd/build/feedback.min.js new file mode 100644 index 00000000000..998170cc3a9 --- /dev/null +++ b/question/type/multianswer/amd/build/feedback.min.js @@ -0,0 +1,10 @@ +define("qtype_multianswer/feedback",["exports","theme_boost/popover","jquery"],(function(_exports,_popover,_jquery){var obj; +/** + * Backward compatibility file for the old popover.js + * + * @module qtype_multianswer/feedback + * @copyright 2023 Jun Pataleta <jun@moodle.com> + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=(obj=_jquery)&&obj.__esModule?obj:{default:obj};const SELECTORS_FEEDBACK_TRIGGER='.feedbacktrigger[data-toggle="popover"]';let feedbackInitialised=!1;var _default={initPopovers:()=>{feedbackInitialised||((0,_jquery.default)(SELECTORS_FEEDBACK_TRIGGER).popover(),feedbackInitialised=!0)}};return _exports.default=_default,_exports.default})); + +//# sourceMappingURL=feedback.min.js.map \ No newline at end of file diff --git a/question/type/multianswer/amd/build/feedback.min.js.map b/question/type/multianswer/amd/build/feedback.min.js.map new file mode 100644 index 00000000000..6e42255b168 --- /dev/null +++ b/question/type/multianswer/amd/build/feedback.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"feedback.min.js","sources":["../src/feedback.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 * Backward compatibility file for the old popover.js\n *\n * @module qtype_multianswer/feedback\n * @copyright 2023 Jun Pataleta <jun@moodle.com>\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport 'theme_boost/popover';\nimport $ from 'jquery';\n\n/** @type {object} Contains the list of selectors for this module. */\nconst SELECTORS = {\n FEEDBACK_TRIGGER: '.feedbacktrigger[data-toggle=\"popover\"]',\n};\n\n/** @type {boolean} Flag to indicate whether the feedback popovers have been already initialised. */\nlet feedbackInitialised = false;\n\n/**\n * Function to initialise the feedback popovers.\n */\nconst initPopovers = () => {\n if (!feedbackInitialised) {\n $(SELECTORS.FEEDBACK_TRIGGER).popover();\n feedbackInitialised = true;\n }\n};\n\nexport default {\n initPopovers: initPopovers,\n};\n"],"names":["SELECTORS","feedbackInitialised","initPopovers","popover"],"mappings":";;;;;;;mJA2BMA,2BACgB,8CAIlBC,qBAAsB,eAYX,CACXC,aARiB,KACZD,0CACCD,4BAA4BG,UAC9BF,qBAAsB"} \ No newline at end of file diff --git a/question/type/multianswer/amd/src/feedback.js b/question/type/multianswer/amd/src/feedback.js new file mode 100644 index 00000000000..e70f0794f7d --- /dev/null +++ b/question/type/multianswer/amd/src/feedback.js @@ -0,0 +1,47 @@ +// This file is part of Moodle - http://moodle.org/ +// +// Moodle is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// Moodle is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with Moodle. If not, see <http://www.gnu.org/licenses/>. + +/** + * Backward compatibility file for the old popover.js + * + * @module qtype_multianswer/feedback + * @copyright 2023 Jun Pataleta <jun@moodle.com> + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ + +import 'theme_boost/popover'; +import $ from 'jquery'; + +/** @type {object} Contains the list of selectors for this module. */ +const SELECTORS = { + FEEDBACK_TRIGGER: '.feedbacktrigger[data-toggle="popover"]', +}; + +/** @type {boolean} Flag to indicate whether the feedback popovers have been already initialised. */ +let feedbackInitialised = false; + +/** + * Function to initialise the feedback popovers. + */ +const initPopovers = () => { + if (!feedbackInitialised) { + $(SELECTORS.FEEDBACK_TRIGGER).popover(); + feedbackInitialised = true; + } +}; + +export default { + initPopovers: initPopovers, +}; diff --git a/question/type/multianswer/renderer.php b/question/type/multianswer/renderer.php index 528e7aacda4..662ee3d45a6 100644 --- a/question/type/multianswer/renderer.php +++ b/question/type/multianswer/renderer.php @@ -208,19 +208,22 @@ abstract class qtype_multianswer_subq_renderer_base extends qtype_renderer { * @return string */ protected function get_feedback_image(string $icon, string $feedbackcontents): string { + global $PAGE; if ($icon === '') { return ''; } + $PAGE->requires->js_call_amd('qtype_multianswer/feedback', 'initPopovers'); + return html_writer::link('#', $icon, [ 'role' => 'button', 'tabindex' => 0, - 'class' => 'btn btn-link p-0', + 'class' => 'feedbacktrigger btn btn-link p-0', 'data-toggle' => 'popover', 'data-container' => 'body', 'data-content' => $feedbackcontents, 'data-placement' => 'right', - 'data-trigger' => 'focus', + 'data-trigger' => 'hover focus', 'data-html' => 'true', ]); }