diff --git a/src/addons/qtype/ddimageortext/classes/ddimageortext.ts b/src/addons/qtype/ddimageortext/classes/ddimageortext.ts index 506d44b3b..8a9f75b64 100644 --- a/src/addons/qtype/ddimageortext/classes/ddimageortext.ts +++ b/src/addons/qtype/ddimageortext/classes/ddimageortext.ts @@ -360,7 +360,7 @@ export class AddonQtypeDdImageOrTextQuestion { this.pollForImageLoad(); }); - this.resizeFunction = this.repositionDragsForQuestion.bind(this); + this.resizeFunction = this.windowResized.bind(this); window.addEventListener('resize', this.resizeFunction!); } @@ -679,6 +679,15 @@ export class AddonQtypeDdImageOrTextQuestion { } } + /** + * Window resized. + */ + async windowResized(): Promise { + await CoreDomUtils.waitForResizeDone(); + + this.repositionDragsForQuestion(); + } + } /** diff --git a/src/addons/qtype/ddmarker/classes/ddmarker.ts b/src/addons/qtype/ddmarker/classes/ddmarker.ts index 60a414db0..a8fca0b21 100644 --- a/src/addons/qtype/ddmarker/classes/ddmarker.ts +++ b/src/addons/qtype/ddmarker/classes/ddmarker.ts @@ -601,7 +601,7 @@ export class AddonQtypeDdMarkerQuestion { this.pollForImageLoad(); }); - this.resizeFunction = this.redrawDragsAndDrops.bind(this); + this.resizeFunction = this.windowResized.bind(this); window.addEventListener('resize', this.resizeFunction!); } @@ -869,6 +869,15 @@ export class AddonQtypeDdMarkerQuestion { } } + /** + * Window resized. + */ + async windowResized(): Promise { + await CoreDomUtils.waitForResizeDone(); + + this.redrawDragsAndDrops(); + } + } /** diff --git a/src/addons/qtype/ddwtos/classes/ddwtos.ts b/src/addons/qtype/ddwtos/classes/ddwtos.ts index ccc06cff2..7808cf602 100644 --- a/src/addons/qtype/ddwtos/classes/ddwtos.ts +++ b/src/addons/qtype/ddwtos/classes/ddwtos.ts @@ -214,7 +214,7 @@ export class AddonQtypeDdwtosQuestion { this.positionDragItems(); - this.resizeFunction = this.positionDragItems.bind(this); + this.resizeFunction = this.windowResized.bind(this); window.addEventListener('resize', this.resizeFunction!); } @@ -515,6 +515,15 @@ export class AddonQtypeDdwtosQuestion { }); } + /** + * Window resized. + */ + async windowResized(): Promise { + await CoreDomUtils.waitForResizeDone(); + + this.positionDragItems(); + } + } /** diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts index 789922816..91360c3b3 100644 --- a/src/core/services/utils/dom.ts +++ b/src/core/services/utils/dom.ts @@ -1847,6 +1847,32 @@ export class CoreDomUtilsProvider { CoreForms.triggerFormSubmittedEvent(formRef, online, siteId); } + /** + * In iOS the resize event is triggered before the window size changes. Wait for the size to change. + * + * @param windowWidth Initial window width. + * @param windowHeight Initial window height. + * @param retries Number of retries done. + */ + async waitForResizeDone(windowWidth?: number, windowHeight?: number, retries = 0): Promise { + if (!CoreApp.isIOS()) { + return; // Only wait in iOS. + } + + windowWidth = windowWidth || window.innerWidth; + windowHeight = windowHeight || window.innerHeight; + + if (windowWidth != window.innerWidth || windowHeight != window.innerHeight || retries >= 10) { + // Window size changed or max number of retries reached, stop. + return; + } + + // Wait a bit and try again. + await CoreUtils.wait(50); + + return this.waitForResizeDone(windowWidth, windowHeight, retries+1); + } + } export const CoreDomUtils = makeSingleton(CoreDomUtilsProvider);