Skip to content

Commit

Permalink
MDL-81841 mod_data: Fix action menu preset display
Browse files Browse the repository at this point in the history
* The action menu for the last preset if often displayed
under the sticky footer. We need to let the Popper library
flip the orientation of the popup to avoid this.
  • Loading branch information
laurentdavid committed Nov 4, 2024
1 parent d015c4c commit 3836687
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 1 deletion.
10 changes: 10 additions & 0 deletions mod/data/amd/build/dropdown_flip.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions mod/data/amd/build/dropdown_flip.min.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 54 additions & 0 deletions mod/data/amd/src/dropdown_flip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// 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/>.

/**
* Javascript module to enable dropdowns with flip modifier.
*
* @module mod_data/dropdown_flip
* @copyright 2024 Laurent David <[email protected]>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
import Dropdown from 'theme_boost/bootstrap/dropdown';
import $ from 'jquery';
const DATA_KEY = 'bs.dropdown';
const SELECTORS = {
DATA_TOGGLE: '[data-toggle="dropdown"]',
};
/**
* Init dropdowns with flip modifier.
*
* We need to use the flip modifier to avoid dropdowns to be cut off by the viewport.
* Normally the default popperConfig is {modifiers: {flip: {enabled: true}}} but in
* MDL-75957 and MDL-64887 we set it to false to avoid conflicts with the Boost theme
* navigation bar going under (https://github.com/twbs/bootstrap/issues/25962).
* Here we re-enable it for dropdowns in specific pages for the mod_data.
*
* Ideally this should be done in the Boost theme but this is not possible now because
* it would mean resolving global conflicts with the Boost theme navigation bar, which
* is a big task (MDL-64887) involving a substantial set of possible regression.
* This is a temporary solution (z-index is wrong also with any navigation bar in our case)
* and it is likely that we will migrate to a new Popper.js version in the future and look at it again.
*/
const init = () => {
const dropdowns = document.querySelectorAll(SELECTORS.DATA_TOGGLE);
dropdowns.forEach((dd) => {
let dropdown = $(dd);
let data = dropdown.data(DATA_KEY);
data = new Dropdown(dd, {popperConfig: {modifiers: {flip: {enabled: true}}}});
dropdown.data(DATA_KEY, data);
});
};

export default init;
6 changes: 5 additions & 1 deletion mod/data/templates/presets.mustache
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
}}
{{#str}}presetshelp, mod_data{{/str}}

<form method="post" action="{{formactionurl}}" class="mt-4">
<form method="post" action="{{formactionurl}}" class="mt-4 mod-data-presets">
<input type="hidden" name="id" value="{{id}}">
<input type="hidden" name="mode" value="usepreset">
<input type="hidden" name="action" value="select">
Expand Down Expand Up @@ -122,4 +122,8 @@
require(['mod_data/importmappingdialogue'], function(importPreset) {
importPreset.init();
});

require(['mod_data/dropdown_flip'], function(flip) {
flip();
});
{{/js}}

0 comments on commit 3836687

Please sign in to comment.