diff --git a/src/addons/qtype/ddimageortext/classes/ddimageortext.ts b/src/addons/qtype/ddimageortext/classes/ddimageortext.ts index 3adb8a067..c13ce8ddc 100644 --- a/src/addons/qtype/ddimageortext/classes/ddimageortext.ts +++ b/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(); }); } diff --git a/src/addons/qtype/ddmarker/classes/ddmarker.ts b/src/addons/qtype/ddmarker/classes/ddmarker.ts index a1c79281f..667a744d7 100644 --- a/src/addons/qtype/ddmarker/classes/ddmarker.ts +++ b/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(); }); } diff --git a/src/addons/qtype/ddwtos/classes/ddwtos.ts b/src/addons/qtype/ddwtos/classes/ddwtos.ts index 7366d4d84..8c04a3505 100644 --- a/src/addons/qtype/ddwtos/classes/ddwtos.ts +++ b/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(); }); } diff --git a/src/core/classes/tabs.ts b/src/core/classes/tabs.ts index a535e831b..fbb1d0f52 100644 --- a/src/core/classes/tabs.ts +++ b/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 implements OnInit, Aft await this.initializeTabs(); } - this.resizeListener = CoreDomUtils.onWindowResize(() => { + this.resizeListener = CoreDom.onWindowResize(() => { this.windowResized(); }); } diff --git a/src/core/directives/collapsible-footer.ts b/src/core/directives/collapsible-footer.ts index 73e9dbd5a..f345a9b70 100644 --- a/src/core/directives/collapsible-footer.ts +++ b/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); } diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 0bf4d0738..fb15f6445 100644 --- a/src/core/directives/collapsible-header.ts +++ b/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); diff --git a/src/core/directives/collapsible-item.ts b/src/core/directives/collapsible-item.ts index f0839d8eb..5084f128a 100644 --- a/src/core/directives/collapsible-item.ts +++ b/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); } diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts index 479933d77..ab00db484 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts +++ b/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); diff --git a/src/core/features/mainmenu/pages/menu/menu.ts b/src/core/features/mainmenu/pages/menu/menu.ts index 47275c179..0ff66fa97 100644 --- a/src/core/features/mainmenu/pages/menu/menu.ts +++ b/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); diff --git a/src/core/features/mainmenu/pages/more/more.ts b/src/core/features/mainmenu/pages/more/more.ts index d3e91ebfa..275686ba2 100644 --- a/src/core/features/mainmenu/pages/more/more.ts +++ b/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(); }); diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts index 9d2bc991a..c0268ba1f 100644 --- a/src/core/services/utils/dom.ts +++ b/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. diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts index fdd0dd9d0..d26b1834e 100644 --- a/src/core/singletons/dom.ts +++ b/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. *