moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-06 17:36:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-72033 User tours: step placement issues if screen too narrow

Browse source
This commit is contained in:
Thach Le Huy 2021-06-29 21:09:39 +07:00
parent 5774e9e081
commit 7076db3492
3 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
admin/tool/usertours/amd/build/tour.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
admin/tool/usertours/amd/build/tour.min.js.map
View file

File diff suppressed because one or more lines are too long

28
admin/tool/usertours/amd/src/tour.js
View file

@ -1199,6 +1199,7 @@ export default class Tour {
return this;
}
stepConfig.placement = this.recalculatePlacement(stepConfig);
let flipBehavior;
switch (stepConfig.placement) {
case 'left':
@ -1293,6 +1294,33 @@ export default class Tour {
return this;
}
/**
* For left/right placement, checks that there is room for the step at current window size.
*
* If there is not enough room, changes placement to 'top'.
*
* @method recalculatePlacement
* @param {Object} stepConfig The step configuration of the step
* @return {String} The placement after recalculate
*/
recalculatePlacement(stepConfig) {
const buffer = 10;
const arrowWidth = 16;
let target = this.getStepTarget(stepConfig);
let widthContent = this.currentStepNode.width() + arrowWidth;
let targetOffsetLeft = target.offset().left - buffer;
let targetOffsetRight = target.offset().left + target.width() + buffer;
let placement = stepConfig.placement;
if (['left', 'right'].indexOf(placement) !== -1) {
if ((targetOffsetLeft < (widthContent + buffer)) &&
((targetOffsetRight + widthContent + buffer) > document.documentElement.clientWidth)) {
placement = 'top';
}
}
return placement;
}
/**
* Add the backdrop.
*