MOBILE-3833 dom: Move onWindowResize to CoreDom

src/addons/qtype/ddimageortext/classes/ddimageortext.ts

@@ -12,7 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreDom } from '@singletons/dom';
 import { CoreEventObserver } from '@singletons/events';
@@ -365,7 +364,7 @@ export class AddonQtypeDdImageOrTextQuestion {
             this.pollForImageLoad();
         });
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.repositionDragsForQuestion();
         });
     }

src/addons/qtype/ddmarker/classes/ddmarker.ts

@@ -619,7 +619,7 @@ export class AddonQtypeDdMarkerQuestion {
             this.pollForImageLoad();
         });
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.redrawDragsAndDrops();
         });
     }

src/addons/qtype/ddwtos/classes/ddwtos.ts

@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import { CoreFormatTextDirective } from '@directives/format-text';
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreTextUtils } from '@services/utils/text';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreComponentsRegistry } from '@singletons/components-registry';
@@ -208,7 +207,7 @@ export class AddonQtypeDdwtosQuestion {
 
         this.positionDragItems();
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.positionDragItems();
         });
     }

src/core/classes/tabs.ts

@@ -33,7 +33,7 @@ import { Platform, Translate } from '@singletons';
 import { CoreSettingsHelper } from '@features/settings/services/settings-helper';
 import { CoreAriaRoleTab, CoreAriaRoleTabFindable } from './aria-role-tab';
 import { CoreEventObserver } from '@singletons/events';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CoreDom } from '@singletons/dom';
 
 /**
  * Class to abstract some common code for tabs.
@@ -135,7 +135,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
             await this.initializeTabs();
         }
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.windowResized();
         });
     }

src/core/directives/collapsible-footer.ts

@@ -21,7 +21,6 @@ import { CoreComponentsRegistry } from '@singletons/components-registry';
 import { CoreFormatTextDirective } from './format-text';
 import { CoreEventObserver } from '@singletons/events';
 import { CoreLoadingComponent } from '@components/loading/loading';
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreDom } from '@singletons/dom';
 
@@ -154,7 +153,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
             }
         });
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.calculateHeight();
         }, 50);
     }

src/core/directives/collapsible-header.ts

@@ -18,9 +18,9 @@ import { CoreLoadingComponent } from '@components/loading/loading';
 import { CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet';
 import { CoreSettingsHelper } from '@features/settings/services/settings-helper';
 import { ScrollDetail } from '@ionic/core';
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreComponentsRegistry } from '@singletons/components-registry';
+import { CoreDom } from '@singletons/dom';
 import { CoreEventObserver } from '@singletons/events';
 import { CoreMath } from '@singletons/math';
 import { Subscription } from 'rxjs';
@@ -156,7 +156,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
             this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached'));
         }, 5000);
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.initializeFloatingTitle();
         }, 50);
 

src/core/directives/collapsible-item.ts

@@ -15,7 +15,6 @@
 import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreLoadingComponent } from '@components/loading/loading';
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
 import { Translate } from '@singletons';
 import { CoreComponentsRegistry } from '@singletons/components-registry';
@@ -90,7 +89,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
 
         await this.calculateHeight();
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.calculateHeight();
         }, 50);
     }

src/core/features/editor/components/rich-text-editor/rich-text-editor.ts

@@ -254,7 +254,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
             );
         });
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.windowResized();
         }, 50);
 

src/core/features/mainmenu/pages/menu/menu.ts

@@ -29,7 +29,7 @@ import { filter } from 'rxjs/operators';
 import { NavigationEnd } from '@angular/router';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { CoreSites } from '@services/sites';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CoreDom } from '@singletons/dom';
 
 /**
  * Page that displays the main menu of the app.
@@ -122,7 +122,7 @@ export class CoreMainMenuPage implements OnInit, OnDestroy {
             }
         });
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.initHandlers();
         });
         document.addEventListener('ionBackButton', this.backButtonFunction);

src/core/features/mainmenu/pages/more/more.ts

@@ -26,7 +26,7 @@ import { CoreContentLinksHelper } from '@features/contentlinks/services/contentl
 import { CoreTextUtils } from '@services/utils/text';
 import { Translate } from '@singletons';
 import { CoreMainMenuDeepLinkManager } from '@features/mainmenu/classes/deep-link-manager';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CoreDom } from '@singletons/dom';
 
 /**
  * Page that displays the more page of the app.
@@ -73,7 +73,7 @@ export class CoreMainMenuMorePage implements OnInit, OnDestroy {
             this.initHandlers();
         });
 
-        this.resizeListener = CoreDomUtils.onWindowResize(() => {
+        this.resizeListener = CoreDom.onWindowResize(() => {
             this.initHandlers();
         });
 

src/core/services/utils/dom.ts

@@ -53,7 +53,6 @@ import { NavigationStart } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { CoreComponentsRegistry } from '@singletons/components-registry';
-import { CoreEventObserver } from '@singletons/events';
 import { CoreDom } from '@singletons/dom';
 
 /*
@@ -93,30 +92,6 @@ export class CoreDomUtilsProvider {
         this.debugDisplay = debugDisplay != 0;
     }
 
-    /**
-     * Window resize is widely checked and may have many performance issues, debouce usage is needed to avoid calling it too much.
-     * This function helps setting up the debounce feature and remove listener easily.
-     *
-     * @param resizeFunction Function to execute on resize.
-     * @param debounceDelay Debounce time in ms.
-     * @return Event observer to call off when finished.
-     */
-    onWindowResize(resizeFunction: (ev?: Event) => void, debounceDelay = 20): CoreEventObserver {
-        const resizeListener = CoreUtils.debounce(async (ev?: Event) => {
-            await this.waitForResizeDone();
-
-            resizeFunction(ev);
-        }, debounceDelay);
-
-        window.addEventListener('resize', resizeListener);
-
-        return {
-            off: (): void => {
-                window.removeEventListener('resize', resizeListener);
-            },
-        };
-    }
-
     /**
      * Equivalent to element.closest(). If the browser doesn't support element.closest, it will
      * traverse the parents to achieve the same functionality.
@@ -1902,7 +1877,7 @@ export class CoreDomUtilsProvider {
     /**
      * Trigger form cancelled event.
      *
-     * @param form Form element.
+     * @param formRef Form element.
      * @param siteId The site affected. If not provided, no site affected.
      * @deprecated since 3.9.5. Function has been moved to CoreForms.
      */
@@ -1913,7 +1888,7 @@ export class CoreDomUtilsProvider {
     /**
      * Trigger form submitted event.
      *
-     * @param form Form element.
+     * @param formRef Form element.
      * @param online Whether the action was done in offline or not.
      * @param siteId The site affected. If not provided, no site affected.
      * @deprecated since 3.9.5. Function has been moved to CoreForms.
@@ -1924,7 +1899,7 @@ export class CoreDomUtilsProvider {
 
     /**
      * In iOS the resize event is triggered before the window size changes. Wait for the size to change.
-     * Use of this function is discouraged. Please use onWindowResize to check window resize event.
+     * Use of this function is discouraged. Please use CoreDom.onWindowResize to check window resize event.
      *
      * @param windowWidth Initial window width.
      * @param windowHeight Initial window height.

src/core/singletons/dom.ts

@@ -13,6 +13,9 @@
 // limitations under the License.
 
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
+import { CoreDomUtils } from '@services/utils/dom';
+import { CoreUtils } from '@services/utils/utils';
+import { CoreEventObserver } from '@singletons/events';
 
 /**
  * Singleton with helper functions for dom.
@@ -147,6 +150,30 @@ export class CoreDom {
         slot.addEventListener('slotchange', slotListener);;
     }
 
+    /**
+     * Window resize is widely checked and may have many performance issues, debouce usage is needed to avoid calling it too much.
+     * This function helps setting up the debounce feature and remove listener easily.
+     *
+     * @param resizeFunction Function to execute on resize.
+     * @param debounceDelay Debounce time in ms.
+     * @return Event observer to call off when finished.
+     */
+    static onWindowResize(resizeFunction: (ev?: Event) => void, debounceDelay = 20): CoreEventObserver {
+        const resizeListener = CoreUtils.debounce(async (ev?: Event) => {
+            await CoreDomUtils.waitForResizeDone();
+
+            resizeFunction(ev);
+        }, debounceDelay);
+
+        window.addEventListener('resize', resizeListener);
+
+        return {
+            off: (): void => {
+                window.removeEventListener('resize', resizeListener);
+            },
+        };
+    }
+
     /**
      * Scroll to a certain element.
      *