mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-73609 theme_boost: footer popup accessible behaviour

Browse Source
This commit is contained in:
Bas Brands 2022-02-07 11:04:46 +01:00
parent d24a4ab56f
commit f06091bec5
3 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
theme/boost/amd/build/footer-popover.min.js vendored
View File

@ -1,2 +1,2 @@
define ("theme_boost/footer-popover",["exports","jquery","./popover"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});Object.defineProperty(a,"Popover",{enumerable:!0,get:function get(){return c.default}});a.init=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}var e=function(){var a=document.querySelector("[data-region=\"footer-container-popover\"]");(0,b.default)("[data-action=\"footer-popover\"]").popover({content:f,container:a,html:!0,placement:"top",customClass:"footer"})};a.init=e;var f=function(){return document.querySelector("[data-region=\"footer-content-popover\"]").innerHTML}});
define ("theme_boost/footer-popover",["exports","jquery","./popover"],function(a,b,c){"use strict";Object.defineProperty(a,"__esModule",{value:!0});Object.defineProperty(a,"Popover",{enumerable:!0,get:function get(){return c.default}});a.init=void 0;b=d(b);c=d(c);function d(a){return a&&a.__esModule?a:{default:a}}var f={FOOTERCONTAINER:"[data-region=\"footer-container-popover\"]",FOOTERCONTENT:"[data-region=\"footer-content-popover\"]",FOOTERBUTTON:"[data-action=\"footer-popover\"]"},g=!1,h=function(){var a=document.querySelector(f.FOOTERCONTAINER),c=document.querySelector(f.FOOTERBUTTON);(0,b.default)(c).popover({content:i,container:a,html:!0,placement:"top",customClass:"footer",trigger:"click"});document.addEventListener("click",function(a){if(g&&!a.target.closest(f.FOOTERCONTAINER)){(0,b.default)(c).popover("hide")}},!0);document.addEventListener("keydown",function(a){if(g&&"Escape"===a.key){(0,b.default)(c).popover("hide");c.focus()}});document.addEventListener("focus",function(a){if(g&&!a.target.closest(f.FOOTERCONTAINER)){(0,b.default)(c).popover("hide")}},!0);(0,b.default)(c).on("show.bs.popover",function(){g=!0});(0,b.default)(c).on("hide.bs.popover",function(){g=!1})};a.init=h;var i=function(){return document.querySelector(f.FOOTERCONTENT).innerHTML}});
//# sourceMappingURL=footer-popover.min.js.map

2
theme/boost/amd/build/footer-popover.min.js.map
View File

@ -1 +1 @@
{"version":3,"sources":["../src/footer-popover.js"],"names":["init","container","document","querySelector","popover","content","getFooterContent","html","placement","customClass","innerHTML"],"mappings":"0PAuBA,OACA,O,mDAEO,GAAMA,CAAAA,CAAI,CAAG,UAAM,CACtB,GAAMC,CAAAA,CAAS,CAAGC,QAAQ,CAACC,aAAT,CAAuB,4CAAvB,CAAlB,CAEA,cAAE,kCAAF,EAAoCC,OAApC,CAA4C,CACxCC,OAAO,CAAEC,CAD+B,CAExCL,SAAS,CAAEA,CAF6B,CAGxCM,IAAI,GAHoC,CAIxCC,SAAS,CAAE,KAJ6B,CAKxCC,WAAW,CAAE,QAL2B,CAA5C,CAOH,CAVM,C,SAkBP,GAAMH,CAAAA,CAAgB,CAAG,UAAM,CAC3B,MAAOJ,CAAAA,QAAQ,CAACC,aAAT,CAAuB,0CAAvB,EAAiEO,SAC3E,C","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 * Shows the footer content in a popover.\n *\n * @module theme_boost/footer-popover\n * @copyright 2021 Bas Brands\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport Popover from './popover';\n\nexport const init = () => {\n const container = document.querySelector('[data-region=\"footer-container-popover\"]');\n\n $('[data-action=\"footer-popover\"]').popover({\n content: getFooterContent,\n container: container,\n html: true,\n placement: 'top',\n customClass: 'footer'\n });\n};\n\n/**\n * Get the footer content for popover.\n *\n * @returns {String} HTML string\n * @private\n */\nconst getFooterContent = () => {\n return document.querySelector('[data-region=\"footer-content-popover\"]').innerHTML;\n};\n\nexport {\n Popover\n};\n"],"file":"footer-popover.min.js"}
{"version":3,"sources":["../src/footer-popover.js"],"names":["SELECTORS","FOOTERCONTAINER","FOOTERCONTENT","FOOTERBUTTON","footerIsShown","init","container","document","querySelector","footerButton","popover","content","getFooterContent","html","placement","customClass","trigger","addEventListener","e","target","closest","key","focus","on","innerHTML"],"mappings":"0PAuBA,OACA,O,sDAEMA,CAAAA,CAAS,CAAG,CACdC,eAAe,CAAE,4CADH,CAEdC,aAAa,CAAE,0CAFD,CAGdC,YAAY,CAAE,kCAHA,C,CAMdC,CAAa,G,CAEJC,CAAI,CAAG,UAAM,IAChBC,CAAAA,CAAS,CAAGC,QAAQ,CAACC,aAAT,CAAuBR,CAAS,CAACC,eAAjC,CADI,CAEhBQ,CAAY,CAAGF,QAAQ,CAACC,aAAT,CAAuBR,CAAS,CAACG,YAAjC,CAFC,CAKtB,cAAEM,CAAF,EAAgBC,OAAhB,CAAwB,CACpBC,OAAO,CAAEC,CADW,CAEpBN,SAAS,CAAEA,CAFS,CAGpBO,IAAI,GAHgB,CAIpBC,SAAS,CAAE,KAJS,CAKpBC,WAAW,CAAE,QALO,CAMpBC,OAAO,CAAE,OANW,CAAxB,EASAT,QAAQ,CAACU,gBAAT,CAA0B,OAA1B,CAAmC,SAAAC,CAAC,CAAI,CACpC,GAAId,CAAa,EAAI,CAACc,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBpB,CAAS,CAACC,eAA3B,CAAtB,CAAmE,CAC/D,cAAEQ,CAAF,EAAgBC,OAAhB,CAAwB,MAAxB,CACH,CACJ,CAJD,KAOAH,QAAQ,CAACU,gBAAT,CAA0B,SAA1B,CAAqC,SAAAC,CAAC,CAAI,CACtC,GAAId,CAAa,EAAc,QAAV,GAAAc,CAAC,CAACG,GAAvB,CAAyC,CACrC,cAAEZ,CAAF,EAAgBC,OAAhB,CAAwB,MAAxB,EACAD,CAAY,CAACa,KAAb,EACH,CACJ,CALD,EAOAf,QAAQ,CAACU,gBAAT,CAA0B,OAA1B,CAAmC,SAAAC,CAAC,CAAI,CACpC,GAAId,CAAa,EAAI,CAACc,CAAC,CAACC,MAAF,CAASC,OAAT,CAAiBpB,CAAS,CAACC,eAA3B,CAAtB,CAAmE,CAC/D,cAAEQ,CAAF,EAAgBC,OAAhB,CAAwB,MAAxB,CACH,CACJ,CAJD,KAOA,cAAED,CAAF,EAAgBc,EAAhB,CAAmB,iBAAnB,CAAsC,UAAM,CACxCnB,CAAa,GAChB,CAFD,EAIA,cAAEK,CAAF,EAAgBc,EAAhB,CAAmB,iBAAnB,CAAsC,UAAM,CACxCnB,CAAa,GAChB,CAFD,CAGH,C,UAQD,GAAMQ,CAAAA,CAAgB,CAAG,UAAM,CAC3B,MAAOL,CAAAA,QAAQ,CAACC,aAAT,CAAuBR,CAAS,CAACE,aAAjC,EAAgDsB,SAC1D,C","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 * Shows the footer content in a popover.\n *\n * @module theme_boost/footer-popover\n * @copyright 2021 Bas Brands\n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport Popover from './popover';\n\nconst SELECTORS = {\n FOOTERCONTAINER: '[data-region=\"footer-container-popover\"]',\n FOOTERCONTENT: '[data-region=\"footer-content-popover\"]',\n FOOTERBUTTON: '[data-action=\"footer-popover\"]'\n};\n\nlet footerIsShown = false;\n\nexport const init = () => {\n const container = document.querySelector(SELECTORS.FOOTERCONTAINER);\n const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);\n\n // All jQuery in this code can be replaced when MDL-79179 is integrated.\n $(footerButton).popover({\n content: getFooterContent,\n container: container,\n html: true,\n placement: 'top',\n customClass: 'footer',\n trigger: 'click'\n });\n\n document.addEventListener('click', e => {\n if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {\n $(footerButton).popover('hide');\n }\n },\n true);\n\n document.addEventListener('keydown', e => {\n if (footerIsShown && e.key === 'Escape') {\n $(footerButton).popover('hide');\n footerButton.focus();\n }\n });\n\n document.addEventListener('focus', e => {\n if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {\n $(footerButton).popover('hide');\n }\n },\n true);\n\n $(footerButton).on('show.bs.popover', () => {\n footerIsShown = true;\n });\n\n $(footerButton).on('hide.bs.popover', () => {\n footerIsShown = false;\n });\n};\n\n/**\n * Get the footer content for popover.\n *\n * @returns {String} HTML string\n * @private\n */\nconst getFooterContent = () => {\n return document.querySelector(SELECTORS.FOOTERCONTENT).innerHTML;\n};\n\nexport {\n Popover\n};\n"],"file":"footer-popover.min.js"}

50
theme/boost/amd/src/footer-popover.js
View File

@ -24,15 +24,55 @@
import $ from 'jquery';
import Popover from './popover';
export const init = () => {
const container = document.querySelector('[data-region="footer-container-popover"]');
const SELECTORS = {
FOOTERCONTAINER: '[data-region="footer-container-popover"]',
FOOTERCONTENT: '[data-region="footer-content-popover"]',
FOOTERBUTTON: '[data-action="footer-popover"]'
};
$('[data-action="footer-popover"]').popover({
let footerIsShown = false;
export const init = () => {
const container = document.querySelector(SELECTORS.FOOTERCONTAINER);
const footerButton = document.querySelector(SELECTORS.FOOTERBUTTON);
// All jQuery in this code can be replaced when MDL-79179 is integrated.
$(footerButton).popover({
content: getFooterContent,
container: container,
html: true,
placement: 'top',
customClass: 'footer'
customClass: 'footer',
trigger: 'click'
});
document.addEventListener('click', e => {
if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
$(footerButton).popover('hide');
}
},
true);
document.addEventListener('keydown', e => {
if (footerIsShown && e.key === 'Escape') {
$(footerButton).popover('hide');
footerButton.focus();
}
});
document.addEventListener('focus', e => {
if (footerIsShown && !e.target.closest(SELECTORS.FOOTERCONTAINER)) {
$(footerButton).popover('hide');
}
},
true);
$(footerButton).on('show.bs.popover', () => {
footerIsShown = true;
});
$(footerButton).on('hide.bs.popover', () => {
footerIsShown = false;
});
};
@ -43,7 +83,7 @@ export const init = () => {
* @private
*/
const getFooterContent = () => {
return document.querySelector('[data-region="footer-content-popover"]').innerHTML;
return document.querySelector(SELECTORS.FOOTERCONTENT).innerHTML;
};
export {