mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-23 09:00:30 +01:00
Code Issues Projects Releases Wiki Activity

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 8453fe0ddb
commit dc3aa743e4
3 changed files with 30 additions and 2 deletions
Show Stats 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

@ -1237,6 +1237,7 @@ const Tour = class {
return this;
}
stepConfig.placement = this.recalculatePlacement(stepConfig);
let flipBehavior;
switch (stepConfig.placement) {
case 'left':
@ -1331,6 +1332,33 @@ const Tour = class {
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.
*