MOBILE-4616 chore: Move html mode classes to CoreHTMLClasses

moodlehq · Aug 14, 2024 · 9829784 · 9829784
1 parent 2f17f7f
commit 9829784
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 31 deletions.
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -69,7 +69,7 @@ jobs:
         cat circular-dependencies
         lines=$(cat circular-dependencies | wc -l)
         echo "Total circular dependencies: $lines"
-        test $lines -eq 131
+        test $lines -eq 130
     - name: JavaScript code compatibility
       run: |
         npx check-es-compat www/*.js --polyfills="\{Array,String,TypedArray\}.prototype.at,Object.hasOwn"

diff --git a/src/core/features/settings/services/settings-helper.ts b/src/core/features/settings/services/settings-helper.ts
@@ -31,6 +31,7 @@ import { CoreError } from '@classes/errors/error';
 import { Observable, Subject } from 'rxjs';
 import { CoreErrorHelper } from '@services/error-helper';
 import { CoreNavigator } from '@services/navigator';
+import { CoreHTMLClasses } from '@singletons/html-classes';
 
 /**
  * Object with space usage and cache entries that can be erased.
@@ -433,10 +434,10 @@ export class CoreSettingsHelperProvider {
      * @param enable True to enable dark mode, false to disable.
      */
     protected toggleDarkMode(enable: boolean = false): void {
-        const isDark = CoreDomUtils.hasModeClass('dark');
+        const isDark = CoreHTMLClasses.hasModeClass('dark');
 
         if (isDark !== enable) {
-            CoreDomUtils.toggleModeClass('dark', enable);
+            CoreHTMLClasses.toggleModeClass('dark', enable);
             this.darkModeObservable.next(enable);
 
             CoreApp.setSystemUIColors();

diff --git a/src/core/services/network.ts b/src/core/services/network.ts
@@ -17,7 +17,7 @@ import { CorePlatform } from '@services/platform';
 import { Network } from '@awesome-cordova-plugins/network/ngx';
 import { NgZone, makeSingleton } from '@singletons';
 import { Observable, Subject, merge } from 'rxjs';
-import { CoreDomUtils } from './utils/dom';
+import { CoreHTMLClasses } from '@singletons/html-classes';
 
 export enum CoreNetworkConnection {
     UNKNOWN = 'unknown',
@@ -109,24 +109,24 @@ export class CoreNetworkService extends Network {
             NgZone.run(() => {
                 const isOnline = this.isOnline();
 
-                const hadOfflineMessage = CoreDomUtils.hasModeClass('core-offline');
+                const hadOfflineMessage = CoreHTMLClasses.hasModeClass('core-offline');
 
-                CoreDomUtils.toggleModeClass('core-offline', !isOnline);
+                CoreHTMLClasses.toggleModeClass('core-offline', !isOnline);
 
                 if (isOnline && hadOfflineMessage) {
-                    CoreDomUtils.toggleModeClass('core-online', true);
+                    CoreHTMLClasses.toggleModeClass('core-online', true);
 
                     setTimeout(() => {
-                        CoreDomUtils.toggleModeClass('core-online', false);
+                        CoreHTMLClasses.toggleModeClass('core-online', false);
                     }, 3000);
                 } else if (!isOnline) {
-                    CoreDomUtils.toggleModeClass('core-online', false);
+                    CoreHTMLClasses.toggleModeClass('core-online', false);
                 }
             });
         });
 
         const isOnline = this.isOnline();
-        CoreDomUtils.toggleModeClass('core-offline', !isOnline);
+        CoreHTMLClasses.toggleModeClass('core-offline', !isOnline);
     }
 
     /**

diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
@@ -56,6 +56,7 @@ import { CoreViewer } from '@features/viewer/services/viewer';
 import { CoreLoadings } from '@services/loadings';
 import { CoreErrorHelper, CoreTextErrorObject } from '@services/error-helper';
 import { convertHTMLToHTMLElement, CoreTemplateElement } from '@/core/utils/create-html-element';
+import { CoreHTMLClasses } from '@singletons/html-classes';
 
 /*
  * "Utils" service with helper functions for UI, DOM elements and HTML code.
@@ -1610,31 +1611,37 @@ export class CoreDomUtilsProvider {
      *
      * @param className Class name.
      * @returns Whether the CSS class is set.
+     *
+     * @deprecated since 4.5. Use CoreHTMLClasses.hasModeClass instead.
      */
     hasModeClass(className: string): boolean {
-        return document.documentElement.classList.contains(className);
+        return CoreHTMLClasses.hasModeClass(className);
     }
 
     /**
      * Get active mode CSS classes.
      *
      * @returns Mode classes.
+     *
+     * @deprecated since 4.5. Use CoreHTMLClasses.getModeClasses instead.
      */
     getModeClasses(): string[] {
-        return Array.from(document.documentElement.classList);
+        return CoreHTMLClasses.getModeClasses();
     }
 
     /**
      * Toggle a CSS class in the root element used to indicate app modes.
      *
      * @param className Class name.
      * @param enable Whether to add or remove the class.
+     *
+     * @deprecated since 4.5. Use CoreHTMLClasses.toggleModeClass instead.
      */
     toggleModeClass(
         className: string,
         enable = false,
     ): void {
-        document.documentElement.classList.toggle(className, enable);
+        CoreHTMLClasses.toggleModeClass(className, enable);
     }
 
 }

diff --git a/src/core/singletons/html-classes.ts b/src/core/singletons/html-classes.ts
@@ -14,29 +14,31 @@
 
 import { CoreSiteInfo, CoreSiteInfoResponse } from '@classes/sites/unauthenticated-site';
 import { CoreSites } from '@services/sites';
-import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUrl } from './url';
 import { CoreConstants } from '../constants';
 import { ScrollDetail } from '@ionic/angular';
 import { CoreDom } from './dom';
 
-const MOODLE_SITE_URL_PREFIX = 'url-';
-const MOODLE_VERSION_PREFIX = 'version-';
-const MOODLEAPP_VERSION_PREFIX = 'moodleapp-';
-const MOODLE_SITE_THEME_PREFIX = 'theme-site-';
-
 /**
  * Singleton with helper functions to manage HTML classes.
  */
 export class CoreHTMLClasses {
 
+    protected static readonly MOODLE_SITE_URL_PREFIX = 'url-';
+    protected static readonly MOODLE_VERSION_PREFIX = 'version-';
+    protected static readonly MOODLEAPP_VERSION_PREFIX = 'moodleapp-';
+    protected static readonly MOODLE_SITE_THEME_PREFIX = 'theme-site-';
+
     /**
      * Initialize HTML classes.
      */
     static initialize(): void {
-        CoreDomUtils.toggleModeClass('ionic8', true);
-        CoreDomUtils.toggleModeClass('development', CoreConstants.BUILD.isDevelopment);
-        CoreHTMLClasses.addVersionClass(MOODLEAPP_VERSION_PREFIX, CoreConstants.CONFIG.versionname.replace('-dev', ''));
+        CoreHTMLClasses.toggleModeClass('ionic8', true);
+        CoreHTMLClasses.toggleModeClass('development', CoreConstants.BUILD.isDevelopment);
+        CoreHTMLClasses.addVersionClass(
+            CoreHTMLClasses.MOODLEAPP_VERSION_PREFIX,
+            CoreConstants.CONFIG.versionname.replace('-dev', ''),
+        );
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const win = <any> window;
@@ -72,9 +74,9 @@ export class CoreHTMLClasses {
         parts[1] = parts[1] || '0';
         parts[2] = parts[2] || '0';
 
-        CoreDomUtils.toggleModeClass(prefix + parts[0], true);
-        CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1], true);
-        CoreDomUtils.toggleModeClass(prefix + parts[0] + '-' + parts[1] + '-' + parts[2], true);
+        CoreHTMLClasses.toggleModeClass(prefix + parts[0], true);
+        CoreHTMLClasses.toggleModeClass(prefix + parts[0] + '-' + parts[1], true);
+        CoreHTMLClasses.toggleModeClass(prefix + parts[0] + '-' + parts[1] + '-' + parts[2], true);
     }
 
     /**
@@ -83,12 +85,12 @@ export class CoreHTMLClasses {
      * @param prefixes Prefixes of the class mode to be removed.
      */
     protected static removeModeClasses(prefixes: string[]): void {
-        for (const modeClass of CoreDomUtils.getModeClasses()) {
+        for (const modeClass of CoreHTMLClasses.getModeClasses()) {
             if (!prefixes.some((prefix) => modeClass.startsWith(prefix))) {
                 continue;
             }
 
-            CoreDomUtils.toggleModeClass(modeClass, false);
+            CoreHTMLClasses.toggleModeClass(modeClass, false);
         }
     }
 
@@ -101,11 +103,11 @@ export class CoreHTMLClasses {
         // Add version classes to html tag.
         this.removeSiteClasses();
 
-        this.addVersionClass(MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(siteInfo.release || ''));
+        this.addVersionClass(CoreHTMLClasses.MOODLE_VERSION_PREFIX, CoreSites.getReleaseNumber(siteInfo.release || ''));
         this.addSiteUrlClass(siteInfo.siteurl);
 
         if (siteInfo.theme) {
-            CoreDomUtils.toggleModeClass(MOODLE_SITE_THEME_PREFIX + siteInfo.theme, true);
+            CoreHTMLClasses.toggleModeClass(CoreHTMLClasses.MOODLE_SITE_THEME_PREFIX + siteInfo.theme, true);
         }
     }
 
@@ -115,7 +117,11 @@ export class CoreHTMLClasses {
     static removeSiteClasses(): void {
         // Remove version classes from html tag.
         this.removeModeClasses(
-            [MOODLE_VERSION_PREFIX, MOODLE_SITE_URL_PREFIX, MOODLE_SITE_THEME_PREFIX],
+            [
+                CoreHTMLClasses.MOODLE_VERSION_PREFIX,
+                CoreHTMLClasses.MOODLE_SITE_URL_PREFIX,
+                CoreHTMLClasses.MOODLE_SITE_THEME_PREFIX,
+            ],
         );
     }
 
@@ -157,7 +163,39 @@ export class CoreHTMLClasses {
     static addSiteUrlClass(siteUrl: string): void {
         const className = this.urlToClassName(siteUrl);
 
-        CoreDomUtils.toggleModeClass(MOODLE_SITE_URL_PREFIX + className, true);
+        CoreHTMLClasses.toggleModeClass(CoreHTMLClasses.MOODLE_SITE_URL_PREFIX + className, true);
+    }
+
+    /**
+     * Check whether a CSS class indicating an app mode is set.
+     *
+     * @param className Class name.
+     * @returns Whether the CSS class is set.
+     */
+    static hasModeClass(className: string): boolean {
+        return document.documentElement.classList.contains(className);
+    }
+
+    /**
+     * Get active mode CSS classes.
+     *
+     * @returns Mode classes.
+     */
+    static getModeClasses(): string[] {
+        return Array.from(document.documentElement.classList);
+    }
+
+    /**
+     * Toggle a CSS class in the root element used to indicate app modes.
+     *
+     * @param className Class name.
+     * @param enable Whether to add or remove the class.
+     */
+    static toggleModeClass(
+        className: string,
+        enable = false,
+    ): void {
+        document.documentElement.classList.toggle(className, enable);
     }
 
 }