diff --git a/public/lib/amd/build/page_global.min.js b/public/lib/amd/build/page_global.min.js index f85cb239723..f452d0fe159 100644 --- a/public/lib/amd/build/page_global.min.js +++ b/public/lib/amd/build/page_global.min.js @@ -5,6 +5,6 @@ * @copyright 2018 Ryan Wyllie * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -define("core/page_global",["jquery","core/custom_interaction_events","core/str","core/network"],(function($,CustomEvents,Str,Network){return{init:function(){var body;body=$("body"),CustomEvents.define(body,[CustomEvents.events.activate]),body.on(CustomEvents.events.activate,"[data-show-active-item]",(function(e){var option=$(e.target).closest(".dropdown-item"),menuContainer=option.closest("[data-show-active-item]");if(option.hasClass("dropdown-item")&&!option.hasClass("active")){var dropdownItems=menuContainer.find(".dropdown-item");dropdownItems.removeClass("active"),dropdownItems.removeAttr("aria-current"),menuContainer.attr("data-skip-active-class")||option.addClass("active"),option.attr("aria-current",!0);var activeOptionText=option.text(),dropdownToggle=menuContainer.parent().find('[data-bs-toggle="dropdown"]'),dropdownToggleText=dropdownToggle.find("[data-active-item-text]");dropdownToggleText.length?dropdownToggleText.html(activeOptionText):dropdownToggle.html(activeOptionText);var activeItemAriaLabelComponent=menuContainer.attr("data-active-item-button-aria-label-components");if(activeItemAriaLabelComponent){var strParams=activeItemAriaLabelComponent.split(",");strParams.push(activeOptionText),Str.get_string(strParams[0].trim(),strParams[1].trim(),strParams[2].trim()).then((function(string){return dropdownToggle.attr("aria-label",string),string})).catch((function(){return!1}))}}})),Network.init()}}})); +define("core/page_global",["jquery","core/custom_interaction_events","core/str","core/network"],(function($,CustomEvents,Str,Network){return{init:function(){var body;(body=$("body")).find(".dropdown-menu").each((function(){$(this).find('[aria-current="true"]').addClass("dropdown-item-active")})),CustomEvents.define(body,[CustomEvents.events.activate]),body.on(CustomEvents.events.activate,"[data-show-active-item]",(function(e){var option=$(e.target).closest(".dropdown-item"),menuContainer=option.closest("[data-show-active-item]");if(option.hasClass("dropdown-item")&&!option.hasClass("active")){var dropdownItems=menuContainer.find(".dropdown-item");dropdownItems.removeClass(["active","dropdown-item-active"]),dropdownItems.removeAttr("aria-current"),menuContainer.attr("data-skip-active-class")||option.addClass("active"),option.addClass("dropdown-item-active"),option.attr("aria-current",!0);var activeOptionText=option.text(),dropdownToggle=menuContainer.parent().find('[data-bs-toggle="dropdown"]'),dropdownToggleText=dropdownToggle.find("[data-active-item-text]");dropdownToggleText.length?dropdownToggleText.html(activeOptionText):dropdownToggle.html(activeOptionText);var activeItemAriaLabelComponent=menuContainer.attr("data-active-item-button-aria-label-components");if(activeItemAriaLabelComponent){var strParams=activeItemAriaLabelComponent.split(",");strParams.push(activeOptionText),Str.get_string(strParams[0].trim(),strParams[1].trim(),strParams[2].trim()).then((function(string){return dropdownToggle.attr("aria-label",string),string})).catch((function(){return!1}))}}})),Network.init()}}})); //# sourceMappingURL=page_global.min.js.map \ No newline at end of file diff --git a/public/lib/amd/build/page_global.min.js.map b/public/lib/amd/build/page_global.min.js.map index 24bc63263d8..d754f1cbb5e 100644 --- a/public/lib/amd/build/page_global.min.js.map +++ b/public/lib/amd/build/page_global.min.js.map @@ -1 +1 @@ -{"version":3,"file":"page_global.min.js","sources":["../src/page_global.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 .\n\n/**\n * Provide global helper code to enhance page elements.\n *\n * @module core/page_global\n * @copyright 2018 Ryan Wyllie \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine(\n[\n 'jquery',\n 'core/custom_interaction_events',\n 'core/str',\n 'core/network'\n],\nfunction(\n $,\n CustomEvents,\n Str,\n Network\n) {\n\n /**\n * Add an event handler for dropdown menus that wish to show their active item\n * in the dropdown toggle element.\n *\n * By default the handler will add the \"active\" class to the selected dropdown\n * item and set it's text as the HTML for the dropdown toggle.\n *\n * The behaviour of this handler is controlled by adding data attributes to\n * the HTML and requires the typically Bootstrap dropdown markup.\n *\n * data-show-active-item - Add to the .dropdown-menu element to enable default\n * functionality.\n * data-skip-active-class - Add to the .dropdown-menu to prevent this code from\n * adding the active class to the dropdown items\n * data-active-item-text - Add to an element within the data-bs-toggle=\"dropdown\" element\n * to use it as the active option text placeholder otherwise the\n * data-bs-toggle=\"dropdown\" element itself will be used.\n * data-active-item-button-aria-label-components - String components to set the aria\n * lable on the dropdown button. The string will be given the\n * active item text.\n */\n var initActionOptionDropdownHandler = function() {\n var body = $('body');\n\n CustomEvents.define(body, [CustomEvents.events.activate]);\n body.on(CustomEvents.events.activate, '[data-show-active-item]', function(e) {\n // The dropdown item that the user clicked on.\n var option = $(e.target).closest('.dropdown-item');\n // The dropdown menu element.\n var menuContainer = option.closest('[data-show-active-item]');\n\n if (!option.hasClass('dropdown-item')) {\n // Ignore non Bootstrap dropdowns.\n return;\n }\n\n if (option.hasClass('active')) {\n // If it's already active then we don't need to do anything.\n return;\n }\n\n // Clear the active class from all other options.\n var dropdownItems = menuContainer.find('.dropdown-item');\n dropdownItems.removeClass('active');\n dropdownItems.removeAttr('aria-current');\n\n if (!menuContainer.attr('data-skip-active-class')) {\n // Make this option active unless configured to ignore it.\n // Some code, for example the Bootstrap tabs, may want to handle\n // adding the active class itself.\n option.addClass('active');\n }\n\n // Update aria attribute for active item.\n option.attr('aria-current', true);\n\n var activeOptionText = option.text();\n var dropdownToggle = menuContainer.parent().find('[data-bs-toggle=\"dropdown\"]');\n var dropdownToggleText = dropdownToggle.find('[data-active-item-text]');\n\n if (dropdownToggleText.length) {\n // We have a specific placeholder for the active item text so\n // use that.\n dropdownToggleText.html(activeOptionText);\n } else {\n // Otherwise just replace all of the toggle text with the active item.\n dropdownToggle.html(activeOptionText);\n }\n\n var activeItemAriaLabelComponent = menuContainer.attr('data-active-item-button-aria-label-components');\n if (activeItemAriaLabelComponent) {\n // If we have string components for the aria label then load the string\n // and set the label on the dropdown toggle.\n var strParams = activeItemAriaLabelComponent.split(',');\n strParams.push(activeOptionText);\n\n Str.get_string(strParams[0].trim(), strParams[1].trim(), strParams[2].trim())\n .then(function(string) {\n dropdownToggle.attr('aria-label', string);\n return string;\n })\n .catch(function() {\n // Silently ignore that we couldn't load the string.\n return false;\n });\n }\n });\n };\n\n /**\n * Initialise the global helper functions.\n */\n var init = function() {\n initActionOptionDropdownHandler();\n Network.init();\n };\n\n return {\n init: init\n };\n});\n"],"names":["define","$","CustomEvents","Str","Network","init","body","events","activate","on","e","option","target","closest","menuContainer","hasClass","dropdownItems","find","removeClass","removeAttr","attr","addClass","activeOptionText","text","dropdownToggle","parent","dropdownToggleText","length","html","activeItemAriaLabelComponent","strParams","split","push","get_string","trim","then","string","catch"],"mappings":";;;;;;;AAsBAA,0BACA,CACI,SACA,iCACA,WACA,iBAEJ,SACIC,EACAC,aACAC,IACAC,eAoGO,CACHC,KANO,WAvE2B,IAC9BC,KAAAA,KAAOL,EAAE,QAEbC,aAAaF,OAAOM,KAAM,CAACJ,aAAaK,OAAOC,WAC/CF,KAAKG,GAAGP,aAAaK,OAAOC,SAAU,2BAA2B,SAASE,OAElEC,OAASV,EAAES,EAAEE,QAAQC,QAAQ,kBAE7BC,cAAgBH,OAAOE,QAAQ,8BAE9BF,OAAOI,SAAS,mBAKjBJ,OAAOI,SAAS,eAMhBC,cAAgBF,cAAcG,KAAK,kBACvCD,cAAcE,YAAY,UAC1BF,cAAcG,WAAW,gBAEpBL,cAAcM,KAAK,2BAIpBT,OAAOU,SAAS,UAIpBV,OAAOS,KAAK,gBAAgB,OAExBE,iBAAmBX,OAAOY,OAC1BC,eAAiBV,cAAcW,SAASR,KAAK,+BAC7CS,mBAAqBF,eAAeP,KAAK,2BAEzCS,mBAAmBC,OAGnBD,mBAAmBE,KAAKN,kBAGxBE,eAAeI,KAAKN,sBAGpBO,6BAA+Bf,cAAcM,KAAK,oDAClDS,6BAA8B,KAG1BC,UAAYD,6BAA6BE,MAAM,KACnDD,UAAUE,KAAKV,kBAEfnB,IAAI8B,WAAWH,UAAU,GAAGI,OAAQJ,UAAU,GAAGI,OAAQJ,UAAU,GAAGI,QACjEC,MAAK,SAASC,eACXZ,eAAeJ,KAAK,aAAcgB,QAC3BA,UAEVC,OAAM,kBAEI,UAWvBjC,QAAQC"} \ No newline at end of file +{"version":3,"file":"page_global.min.js","sources":["../src/page_global.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 .\n\n/**\n * Provide global helper code to enhance page elements.\n *\n * @module core/page_global\n * @copyright 2018 Ryan Wyllie \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\ndefine(\n[\n 'jquery',\n 'core/custom_interaction_events',\n 'core/str',\n 'core/network'\n],\nfunction(\n $,\n CustomEvents,\n Str,\n Network\n) {\n\n /**\n * Add an event handler for dropdown menus that wish to show their active item\n * in the dropdown toggle element.\n *\n * By default the handler will add the \"active\" class to the selected dropdown\n * item and set it's text as the HTML for the dropdown toggle.\n *\n * The behaviour of this handler is controlled by adding data attributes to\n * the HTML and requires the typically Bootstrap dropdown markup.\n *\n * data-show-active-item - Add to the .dropdown-menu element to enable default\n * functionality.\n * data-skip-active-class - Add to the .dropdown-menu to prevent this code from\n * adding the active class to the dropdown items\n * data-active-item-text - Add to an element within the data-bs-toggle=\"dropdown\" element\n * to use it as the active option text placeholder otherwise the\n * data-bs-toggle=\"dropdown\" element itself will be used.\n * data-active-item-button-aria-label-components - String components to set the aria\n * lable on the dropdown button. The string will be given the\n * active item text.\n */\n var initActionOptionDropdownHandler = function() {\n var body = $('body');\n\n // Ensure on load that the \"current\" item is always marked to ensure we make space for active item indicator.\n body.find('.dropdown-menu').each(function() {\n $(this).find('[aria-current=\"true\"]').addClass('dropdown-item-active');\n });\n\n CustomEvents.define(body, [CustomEvents.events.activate]);\n body.on(CustomEvents.events.activate, '[data-show-active-item]', function(e) {\n // The dropdown item that the user clicked on.\n var option = $(e.target).closest('.dropdown-item');\n // The dropdown menu element.\n var menuContainer = option.closest('[data-show-active-item]');\n\n if (!option.hasClass('dropdown-item')) {\n // Ignore non Bootstrap dropdowns.\n return;\n }\n\n if (option.hasClass('active')) {\n // If it's already active then we don't need to do anything.\n return;\n }\n\n // Clear the active class from all other options.\n var dropdownItems = menuContainer.find('.dropdown-item');\n dropdownItems.removeClass(['active', 'dropdown-item-active']);\n dropdownItems.removeAttr('aria-current');\n\n if (!menuContainer.attr('data-skip-active-class')) {\n // Make this option active unless configured to ignore it.\n // Some code, for example the Bootstrap tabs, may want to handle\n // adding the active class itself.\n option.addClass('active');\n }\n option.addClass('dropdown-item-active');\n\n // Update aria attribute for active item.\n option.attr('aria-current', true);\n\n var activeOptionText = option.text();\n var dropdownToggle = menuContainer.parent().find('[data-bs-toggle=\"dropdown\"]');\n var dropdownToggleText = dropdownToggle.find('[data-active-item-text]');\n\n if (dropdownToggleText.length) {\n // We have a specific placeholder for the active item text so\n // use that.\n dropdownToggleText.html(activeOptionText);\n } else {\n // Otherwise just replace all of the toggle text with the active item.\n dropdownToggle.html(activeOptionText);\n }\n\n var activeItemAriaLabelComponent = menuContainer.attr('data-active-item-button-aria-label-components');\n if (activeItemAriaLabelComponent) {\n // If we have string components for the aria label then load the string\n // and set the label on the dropdown toggle.\n var strParams = activeItemAriaLabelComponent.split(',');\n strParams.push(activeOptionText);\n\n Str.get_string(strParams[0].trim(), strParams[1].trim(), strParams[2].trim())\n .then(function(string) {\n dropdownToggle.attr('aria-label', string);\n return string;\n })\n .catch(function() {\n // Silently ignore that we couldn't load the string.\n return false;\n });\n }\n });\n };\n\n /**\n * Initialise the global helper functions.\n */\n var init = function() {\n initActionOptionDropdownHandler();\n Network.init();\n };\n\n return {\n init: init\n };\n});\n"],"names":["define","$","CustomEvents","Str","Network","init","body","find","each","this","addClass","events","activate","on","e","option","target","closest","menuContainer","hasClass","dropdownItems","removeClass","removeAttr","attr","activeOptionText","text","dropdownToggle","parent","dropdownToggleText","length","html","activeItemAriaLabelComponent","strParams","split","push","get_string","trim","then","string","catch"],"mappings":";;;;;;;AAsBAA,0BACA,CACI,SACA,iCACA,WACA,iBAEJ,SACIC,EACAC,aACAC,IACAC,eA0GO,CACHC,KANO,WA7E2B,IAC9BC,MAAAA,KAAOL,EAAE,SAGRM,KAAK,kBAAkBC,MAAK,WAC7BP,EAAEQ,MAAMF,KAAK,yBAAyBG,SAAS,2BAGnDR,aAAaF,OAAOM,KAAM,CAACJ,aAAaS,OAAOC,WAC/CN,KAAKO,GAAGX,aAAaS,OAAOC,SAAU,2BAA2B,SAASE,OAElEC,OAASd,EAAEa,EAAEE,QAAQC,QAAQ,kBAE7BC,cAAgBH,OAAOE,QAAQ,8BAE9BF,OAAOI,SAAS,mBAKjBJ,OAAOI,SAAS,eAMhBC,cAAgBF,cAAcX,KAAK,kBACvCa,cAAcC,YAAY,CAAC,SAAU,yBACrCD,cAAcE,WAAW,gBAEpBJ,cAAcK,KAAK,2BAIpBR,OAAOL,SAAS,UAEpBK,OAAOL,SAAS,wBAGhBK,OAAOQ,KAAK,gBAAgB,OAExBC,iBAAmBT,OAAOU,OAC1BC,eAAiBR,cAAcS,SAASpB,KAAK,+BAC7CqB,mBAAqBF,eAAenB,KAAK,2BAEzCqB,mBAAmBC,OAGnBD,mBAAmBE,KAAKN,kBAGxBE,eAAeI,KAAKN,sBAGpBO,6BAA+Bb,cAAcK,KAAK,oDAClDQ,6BAA8B,KAG1BC,UAAYD,6BAA6BE,MAAM,KACnDD,UAAUE,KAAKV,kBAEfrB,IAAIgC,WAAWH,UAAU,GAAGI,OAAQJ,UAAU,GAAGI,OAAQJ,UAAU,GAAGI,QACjEC,MAAK,SAASC,eACXZ,eAAeH,KAAK,aAAce,QAC3BA,UAEVC,OAAM,kBAEI,UAWvBnC,QAAQC"} \ No newline at end of file diff --git a/public/lib/amd/src/page_global.js b/public/lib/amd/src/page_global.js index 6edcc61627e..de77a82f147 100644 --- a/public/lib/amd/src/page_global.js +++ b/public/lib/amd/src/page_global.js @@ -58,6 +58,11 @@ function( var initActionOptionDropdownHandler = function() { var body = $('body'); + // Ensure on load that the "current" item is always marked to ensure we make space for active item indicator. + body.find('.dropdown-menu').each(function() { + $(this).find('[aria-current="true"]').addClass('dropdown-item-active'); + }); + CustomEvents.define(body, [CustomEvents.events.activate]); body.on(CustomEvents.events.activate, '[data-show-active-item]', function(e) { // The dropdown item that the user clicked on. @@ -77,7 +82,7 @@ function( // Clear the active class from all other options. var dropdownItems = menuContainer.find('.dropdown-item'); - dropdownItems.removeClass('active'); + dropdownItems.removeClass(['active', 'dropdown-item-active']); dropdownItems.removeAttr('aria-current'); if (!menuContainer.attr('data-skip-active-class')) { @@ -86,6 +91,7 @@ function( // adding the active class itself. option.addClass('active'); } + option.addClass('dropdown-item-active'); // Update aria attribute for active item. option.attr('aria-current', true); diff --git a/public/theme/boost/scss/moodle/blocks.scss b/public/theme/boost/scss/moodle/blocks.scss index f6e097293f7..3697d576a61 100644 --- a/public/theme/boost/scss/moodle/blocks.scss +++ b/public/theme/boost/scss/moodle/blocks.scss @@ -265,10 +265,6 @@ $blocks-plus-gutter: calc(#{$blocks-column-width} + (#{$grid-gutter-width} * 0.5 width: 100%; } } - // Make space for active item indicator. - .dropdown-item { - padding-left: map-get($spacers, 4); - } } // @@ -285,14 +281,6 @@ $blocks-plus-gutter: calc(#{$blocks-column-width} + (#{$grid-gutter-width} * 0.5 padding-left: 5.55em; } } -.block_timeline { - .dropdown-menu { - // Make space for active item indicator. - .dropdown-item { - padding-left: map-get($spacers, 4); - } - } -} // // Blocks block_settings and block_navigation diff --git a/public/theme/boost/scss/moodle/dropdown.scss b/public/theme/boost/scss/moodle/dropdown.scss index 8e7e946ba5b..f5cdd70719f 100644 --- a/public/theme/boost/scss/moodle/dropdown.scss +++ b/public/theme/boost/scss/moodle/dropdown.scss @@ -35,6 +35,12 @@ .dropdown-menu { width: fit-content; + &:has(.dropdown-item-active) { + .dropdown-item { + // Make space for active item indicator. + padding-left: map-get($spacers, 4); + } + } } // Add dropdown menu items styles for each theme color mantainning default hover colour for contrast. diff --git a/public/theme/boost/scss/moodle/moremenu.scss b/public/theme/boost/scss/moodle/moremenu.scss index 24491cc791e..ae9863a4015 100644 --- a/public/theme/boost/scss/moodle/moremenu.scss +++ b/public/theme/boost/scss/moodle/moremenu.scss @@ -89,11 +89,6 @@ } } - // Make space for active item indicator. - .dropdown-item { - padding-left: map-get($spacers, 4); - } - .dropdown-item[aria-current="true"], .dropdown-item.active { background-color: transparent; diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css index 58524052c06..1604d9afc8f 100644 --- a/public/theme/boost/style/moodle.css +++ b/public/theme/boost/style/moodle.css @@ -29650,9 +29650,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 width: 100%; } } -.block_myoverview .dropdown-item { - padding-left: 1.5rem; -} .block_timeline .paged-content-page-container { background-color: var(--bs-body-bg); @@ -29662,10 +29659,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 padding-left: 5.55em; } -.block_timeline .dropdown-menu .dropdown-item { - padding-left: 1.5rem; -} - .block_settings .block_tree [aria-expanded=true], .block_settings .block_tree [aria-expanded=true].emptybranch, .block_settings .block_tree [aria-expanded=false], @@ -40744,9 +40737,6 @@ div.editor_atto_toolbar button .icon { .moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider { display: none; } -.moremenu .dropdown-item { - padding-left: 1.5rem; -} .moremenu .dropdown-item[aria-current=true], .moremenu .dropdown-item.active { background-color: transparent; @@ -41033,6 +41023,9 @@ div.editor_atto_toolbar button .icon { .dropdown-menu { width: fit-content; } +.dropdown-menu:has(.dropdown-item-active) .dropdown-item { + padding-left: 1.5rem; +} .dropdown-item:hover.text-primary, .dropdown-item:hover a.text-primary, .dropdown-item:focus.text-primary, diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css index 1816af3f3cc..bb970ff9c85 100644 --- a/public/theme/classic/style/moodle.css +++ b/public/theme/classic/style/moodle.css @@ -29650,9 +29650,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 width: 100%; } } -.block_myoverview .dropdown-item { - padding-left: 1.5rem; -} .block_timeline .paged-content-page-container { background-color: var(--bs-body-bg); @@ -29662,10 +29659,6 @@ aside[id^=block-region-side-] .block_recentlyaccesseditems .card:nth-of-type(n+4 padding-left: 5.55em; } -.block_timeline .dropdown-menu .dropdown-item { - padding-left: 1.5rem; -} - .block_settings .block_tree [aria-expanded=true], .block_settings .block_tree [aria-expanded=true].emptybranch, .block_settings .block_tree [aria-expanded=false], @@ -40678,9 +40671,6 @@ div.editor_atto_toolbar button .icon { .moremenu .dropdownmoremenu > .dropdown-menu .dropdown-menu .dropdown-divider { display: none; } -.moremenu .dropdown-item { - padding-left: 1.5rem; -} .moremenu .dropdown-item[aria-current=true], .moremenu .dropdown-item.active { background-color: transparent; @@ -40967,6 +40957,9 @@ div.editor_atto_toolbar button .icon { .dropdown-menu { width: fit-content; } +.dropdown-menu:has(.dropdown-item-active) .dropdown-item { + padding-left: 1.5rem; +} .dropdown-item:hover.text-primary, .dropdown-item:hover a.text-primary, .dropdown-item:focus.text-primary,