MOBILE-4616 chore: Create CorePopoversService to add popovers functions

src/addons/blog/pages/index/index.ts

@@ -31,6 +31,7 @@ import { CoreUtils } from '@services/utils/utils';
 import { CoreArray } from '@singletons/array';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreTime } from '@singletons/time';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Page that displays the list of blog entries.
@@ -327,7 +328,7 @@ export class AddonBlogIndexPage implements OnInit, OnDestroy {
         event.preventDefault();
         event.stopPropagation();
 
-        const popoverData = await CoreDomUtils.openPopover<string>({
+        const popoverData = await CorePopovers.open<string>({
             component: AddonBlogEntryOptionsMenuComponent,
             event,
         });

src/addons/calendar/pages/edit-event/edit-event.ts

@@ -47,6 +47,7 @@ import { CoreRemindersSetReminderMenuComponent } from '@features/reminders/compo
 import moment from 'moment-timezone';
 import { ADDON_CALENDAR_COMPONENT } from '@addons/calendar/constants';
 import { ContextLevel } from '@/core/constants';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Page that displays a form to create/edit an event.
@@ -637,7 +638,7 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
         const formData = this.form.value;
         const eventTime = moment(formData.timestart).unix();
 
-        const reminderTime = await CoreDomUtils.openPopover<{timeBefore: number}>({
+        const reminderTime = await CorePopovers.open<{timeBefore: number}>({
             component: CoreRemindersSetReminderMenuComponent,
             componentProps: {
                 eventTime,

src/addons/calendar/pages/event/event.ts

@@ -44,6 +44,7 @@ import { CoreLocalNotifications } from '@services/local-notifications';
 import { CorePlatform } from '@services/platform';
 import { CoreConfig } from '@services/config';
 import { CoreToasts, ToastDuration } from '@services/toasts';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Page that displays a single calendar event.
@@ -384,7 +385,7 @@ export class AddonCalendarEventPage implements OnInit, OnDestroy {
             return;
         }
 
-        const reminderTime = await CoreDomUtils.openPopover<{timeBefore: number}>({
+        const reminderTime = await CorePopovers.open<{timeBefore: number}>({
             component: CoreRemindersSetReminderMenuComponent,
             componentProps: {
                 eventTime: this.event.timestart,

src/addons/calendar/pages/settings/settings.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Component, OnInit } from '@angular/core';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 import {
     CoreReminders,
     CoreRemindersService,
@@ -51,7 +51,7 @@ export class AddonCalendarSettingsPage implements OnInit {
         e.stopImmediatePropagation();
         e.preventDefault();
 
-        const reminderTime = await CoreDomUtils.openPopover<{timeBefore: number}>({
+        const reminderTime = await CorePopovers.open<{timeBefore: number}>({
             component: CoreRemindersSetReminderMenuComponent,
             componentProps: {
                 initialValue: this.defaultTime,

src/addons/mod/data/components/action/action.ts

@@ -26,7 +26,7 @@ import {
 } from '../../services/data';
 import { AddonModDataHelper } from '../../services/data-helper';
 import { AddonModDataOffline } from '../../services/data-offline';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 import { AddonModDataActionsMenuComponent, AddonModDataActionsMenuItem } from '../actionsmenu/actionsmenu';
 import {
     ADDON_MOD_DATA_ENTRY_CHANGED,
@@ -202,7 +202,7 @@ export class AddonModDataActionComponent implements OnInit {
             });
         }
 
-        await CoreDomUtils.openPopoverWithoutResult({
+        await CorePopovers.openWithoutResult({
             component: AddonModDataActionsMenuComponent,
             componentProps: { items },
             id: 'actionsmenu-popover',

src/addons/mod/forum/components/index/index.ts

@@ -66,6 +66,7 @@ import {
 } from '@addons/mod/forum/constants';
 import { CoreSearchGlobalSearch } from '@features/search/services/global-search';
 import { CoreToasts } from '@services/toasts';
+import { CorePopovers } from '@services/popovers';
 /**
  * Component that displays a forum entry page.
  */
@@ -635,7 +636,7 @@ export class AddonModForumIndexComponent extends CoreCourseModuleMainActivityCom
         event.preventDefault();
         event.stopPropagation();
 
-        const popoverData = await CoreDomUtils.openPopover<{ action?: string; value: boolean }>({
+        const popoverData = await CorePopovers.open<{ action?: string; value: boolean }>({
             component: AddonModForumDiscussionOptionsMenuComponent,
             componentProps: {
                 discussion,

src/addons/mod/forum/components/post/post.ts

@@ -55,6 +55,7 @@ import { CoreAnalytics, CoreAnalyticsEventType } from '@services/analytics';
 import { ADDON_MOD_FORUM_CHANGE_DISCUSSION_EVENT, ADDON_MOD_FORUM_COMPONENT } from '../../constants';
 import { CoreToasts } from '@services/toasts';
 import { toBoolean } from '@/core/transforms/boolean';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Components that shows a discussion post, its attachments and the action buttons allowed (reply, etc.).
@@ -233,7 +234,7 @@ export class AddonModForumPostComponent implements OnInit, OnDestroy, OnChanges
      * @param event Click Event.
      */
     async showOptionsMenu(event: Event): Promise<void> {
-        const popoverData = await CoreDomUtils.openPopover<{ action?: string }>({
+        const popoverData = await CorePopovers.open<{ action?: string }>({
             component: AddonModForumPostOptionsMenuComponent,
             componentProps: {
                 post: this.post,

src/addons/mod/glossary/components/index/index.ts

@@ -59,6 +59,7 @@ import {
     ADDON_MOD_GLOSSARY_ENTRY_UPDATED,
     ADDON_MOD_GLOSSARY_PAGE_NAME,
 } from '../../constants';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Component that displays a glossary entry page.
@@ -357,7 +358,7 @@ export class AddonModGlossaryIndexComponent extends CoreCourseModuleMainActivity
 
         const entries = await this.promisedEntries;
         const previousMode = entries.getSource().fetchMode;
-        const newMode = await CoreDomUtils.openPopover<AddonModGlossaryFetchMode>({
+        const newMode = await CorePopovers.open<AddonModGlossaryFetchMode>({
             component: AddonModGlossaryModePickerPopoverComponent,
             componentProps: {
                 browseModes: this.glossary.browsemodes,

src/addons/mod/quiz/classes/auto-save.ts

@@ -19,7 +19,7 @@ import { CoreQuestionsAnswers } from '@features/question/services/question';
 import { CoreLogger } from '@singletons/logger';
 import { AddonModQuizConnectionErrorComponent } from '../components/connection-error/connection-error';
 import { AddonModQuiz, AddonModQuizAttemptWSData, AddonModQuizQuizWSData } from '../services/quiz';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Class to support auto-save in quiz. Every certain seconds, it will check if there are changes in the current page answers
@@ -197,7 +197,7 @@ export class AddonModQuizAutoSave {
         };
         this.popoverShown = true;
 
-        this.popover = await CoreDomUtils.openPopoverWithoutResult({
+        this.popover = await CorePopovers.openWithoutResult({
             component: AddonModQuizConnectionErrorComponent,
             event: <Event> event,
         });

src/addons/mod/wiki/components/index/index.ts

@@ -59,6 +59,7 @@ import {
     ADDON_MOD_WIKI_PAGE_NAME,
 } from '../../constants';
 import { CoreModals } from '@services/modals';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * Component that displays a wiki entry page.
@@ -887,7 +888,7 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
     async showSubwikiPicker(event: MouseEvent): Promise<void> {
         const { AddonModWikiSubwikiPickerComponent } = await import('../subwiki-picker/subwiki-picker');
 
-        const subwiki = await CoreDomUtils.openPopover<AddonModWikiSubwiki>({
+        const subwiki = await CorePopovers.open<AddonModWikiSubwiki>({
             component: AddonModWikiSubwikiPickerComponent,
             componentProps: {
                 courseId: this.courseId,

src/core/components/context-menu/context-menu.ts

@@ -15,7 +15,7 @@
 import { Component, Input, OnInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 import { CoreUtils } from '@services/utils/utils';
 import { Translate } from '@singletons';
 import { CoreContextMenuItemComponent } from './context-menu-item';
@@ -183,7 +183,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
         if (!this.expanded) {
             this.expanded = true;
 
-            const popoverData = await CoreDomUtils.openPopover<CoreContextMenuItemComponent>({
+            const popoverData = await CorePopovers.open<CoreContextMenuItemComponent>({
                 event,
                 component: CoreContextMenuPopoverComponent,
                 componentProps: {

src/core/core.module.ts

@@ -47,6 +47,7 @@ export async function getCoreServices(): Promise<Type<unknown>[]> {
     const { CoreMimetypeUtilsProvider } = await import('@services/utils/mimetype');
     const { CoreNavigatorService } = await import('@services/navigator');
     const { CorePluginFileDelegateService } = await import('@services/plugin-file-delegate');
+    const { CorePopoversService } = await import('@services/popovers');
     const { CoreScreenService } = await import('@services/screen');
     const { CoreSitesProvider } = await import('@services/sites');
     const { CoreSyncProvider } = await import('@services/sync');
@@ -77,6 +78,7 @@ export async function getCoreServices(): Promise<Type<unknown>[]> {
         CoreMimetypeUtilsProvider,
         CoreNavigatorService,
         CorePluginFileDelegateService,
+        CorePopoversService,
         CorePlatformService,
         CoreScreenService,
         CoreSitesProvider,

src/core/features/course/components/module-completion/module-completion.ts

@@ -18,7 +18,7 @@ import { CoreCourseModuleCompletionBaseComponent } from '@features/course/classe
 import {
     CoreCourseModuleCompletionStatus,
 } from '@features/course/services/course';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 import { CoreCourseModuleCompletionDetailsComponent } from '../module-completion-details/module-completion-details';
 import { CoreCourseHelper } from '@features/course/services/course-helper';
 import { CoreUser } from '@features/user/services/user';
@@ -132,7 +132,7 @@ export class CoreCourseModuleCompletionComponent
                 target = target.parentElement;
             }
 
-            CoreDomUtils.openPopoverWithoutResult({
+            CorePopovers.openWithoutResult({
                 component: CoreCourseModuleCompletionDetailsComponent,
                 componentProps: {
                     completion: this.completion,

src/core/features/courses/components/course-list-item/course-list-item.ts

@@ -29,6 +29,7 @@ import { CoreCoursesCourseOptionsMenuComponent } from '../course-options-menu/co
 import { CoreEnrolHelper } from '@features/enrol/services/enrol-helper';
 import { CoreDownloadStatusTranslatable } from '@components/download-refresh/download-refresh';
 import { toBoolean } from '@/core/transforms/boolean';
+import { CorePopovers } from '@services/popovers';
 
 /**
  * This directive is meant to display an item for a list of courses.
@@ -297,7 +298,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On
 
         this.initPrefetchCourse(true);
 
-        const popoverData = await CoreDomUtils.openPopover<string>({
+        const popoverData = await CorePopovers.open<string>({
             component: CoreCoursesCourseOptionsMenuComponent,
             componentProps: {
                 course: this.course,

src/core/features/reminders/components/set-button/set-button.ts

@@ -14,7 +14,7 @@
 
 import { CoreReminderData, CoreReminders, CoreRemindersService } from '@features/reminders/services/reminders';
 import { Component, Input, OnInit } from '@angular/core';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 import { CoreRemindersSetReminderMenuComponent } from '../set-reminder-menu/set-reminder-menu';
 import { Translate } from '@singletons';
 import { CoreTimeUtils } from '@services/utils/time';
@@ -72,7 +72,7 @@ export class CoreRemindersSetButtonComponent implements OnInit {
         }
 
         // Open popover.
-        const reminderTime = await CoreDomUtils.openPopover<{timeBefore: number}>({
+        const reminderTime = await CorePopovers.open<{timeBefore: number}>({
             component: CoreRemindersSetReminderMenuComponent,
             componentProps: {
                 initialValue: this.timebefore,

src/core/features/reminders/components/set-reminder-menu/set-reminder-menu.ts

@@ -19,7 +19,7 @@ import {
     CoreRemindersUnits,
     CoreReminderValueAndUnit,
 } from '@features/reminders/services/reminders';
-import { CoreDomUtils } from '@services/utils/dom';
+import { CorePopovers } from '@services/popovers';
 import { CoreWait } from '@singletons/wait';
 import { PopoverController } from '@singletons';
 import { CoreRemindersSetReminderCustomComponent } from '../set-reminder-custom/set-reminder-custom';
@@ -155,7 +155,7 @@ export class CoreRemindersSetReminderMenuComponent implements OnInit {
         ev.stopPropagation();
         ev.preventDefault();
 
-        const reminderTime = await CoreDomUtils.openPopover<CoreReminderValueAndUnit>({
+        const reminderTime = await CorePopovers.open<CoreReminderValueAndUnit>({
             component: CoreRemindersSetReminderCustomComponent,
             componentProps: {
                 customValue: this.customValue,

src/core/services/popovers.ts

@@ -0,0 +1,66 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable } from '@angular/core';
+import { makeSingleton, PopoverController } from '@singletons';
+import { fixOverlayAriaHidden } from '@/core/utils/fix-aria-hidden';
+import { PopoverOptions } from '@ionic/angular';
+
+/**
+ * Handles application popovers.
+ */
+@Injectable({ providedIn: 'root' })
+export class CorePopoversService {
+
+   /**
+    * Opens a popover and waits for it to be dismissed to return the result.
+    *
+    * @param options Options.
+    * @returns Promise resolved when the popover is dismissed or will be dismissed.
+    */
+   async open<T = void>(options: OpenPopoverOptions): Promise<T | undefined> {
+        const { waitForDismissCompleted, ...popoverOptions } = options;
+        const popover = await this.openWithoutResult(popoverOptions);
+
+        const result = waitForDismissCompleted ? await popover.onDidDismiss<T>() : await popover.onWillDismiss<T>();
+        if (result?.data) {
+            return result?.data;
+        }
+    }
+
+    /**
+     * Opens a popover.
+     *
+     * @param options Options.
+     * @returns Promise resolved when the popover is displayed.
+     */
+    async openWithoutResult(options: Omit<PopoverOptions, 'showBackdrop'>): Promise<HTMLIonPopoverElement> {
+        const popover = await PopoverController.create(options);
+
+        await popover.present();
+
+        fixOverlayAriaHidden(popover);
+
+        return popover;
+    }
+
+}
+export const CorePopovers = makeSingleton(CorePopoversService);
+
+/**
+ * Options for the openPopover function.
+ */
+export type OpenPopoverOptions = Omit<PopoverOptions, 'showBackdrop'> & {
+    waitForDismissCompleted?: boolean;
+};

src/core/services/utils/dom.ts

@@ -32,7 +32,6 @@ import {
     makeSingleton,
     Translate,
     AlertController,
-    PopoverController,
 } from '@singletons';
 import { CoreLogger } from '@singletons/logger';
 import { CoreFileSizeSum } from '@services/plugin-file-delegate';
@@ -53,6 +52,7 @@ import { CoreWait } from '@singletons/wait';
 import { CoreToasts, ToastDuration, ShowToastOptions } from '../toasts';
 import { fixOverlayAriaHidden } from '@/core/utils/fix-aria-hidden';
 import { CoreModals, OpenModalOptions } from '@services/modals';
+import { CorePopovers, OpenPopoverOptions } from '@services/popovers';
 
 /*
  * "Utils" service with helper functions for UI, DOM elements and HTML code.
@@ -540,7 +540,7 @@ export class CoreDomUtilsProvider {
             el.addEventListener('click', async (ev: Event) => {
                 const html = el.getAttribute('data-html');
 
-                await CoreDomUtils.openPopoverWithoutResult({
+                await CorePopovers.openWithoutResult({
                     component: CoreBSTooltipComponent,
                     componentProps: {
                         content,
@@ -1486,16 +1486,11 @@ export class CoreDomUtilsProvider {
      *
      * @param options Options.
      * @returns Promise resolved when the popover is dismissed or will be dismissed.
+     *
+     * @deprecated since 4.5. Use CorePopovers.open instead.
      */
     async openPopover<T = void>(options: OpenPopoverOptions): Promise<T | undefined> {
-
+        return CorePopovers.open(options);
-        const { waitForDismissCompleted, ...popoverOptions } = options;
-        const popover = await this.openPopoverWithoutResult(popoverOptions);
-
-        const result = waitForDismissCompleted ? await popover.onDidDismiss<T>() : await popover.onWillDismiss<T>();
-        if (result?.data) {
-            return result?.data;
-        }
     }
 
     /**
@@ -1503,15 +1498,11 @@ export class CoreDomUtilsProvider {
      *
      * @param options Options.
      * @returns Promise resolved when the popover is displayed.
+     *
+     * @deprecated since 4.5. Use CorePopovers.openWithoutResult instead.
      */
     async openPopoverWithoutResult(options: Omit<PopoverOptions, 'showBackdrop'>): Promise<HTMLIonPopoverElement> {
-        const popover = await PopoverController.create(options);
+        return CorePopovers.openWithoutResult(options);
-
-        await popover.present();
-
-        fixOverlayAriaHidden(popover);
-
-        return popover;
     }
 
     /**
@@ -1686,13 +1677,6 @@ export class CoreDomUtilsProvider {
 
 export const CoreDomUtils = makeSingleton(CoreDomUtilsProvider);
 
-/**
- * Options for the openPopover function.
- */
-export type OpenPopoverOptions = Omit<PopoverOptions, 'showBackdrop'> & {
-    waitForDismissCompleted?: boolean;
-};
-
 /**
  * Buttons for prompt alert.
  */