Merge pull request moodlehq#4473 from crazyserver/MOBILE-3063

MOBILE-3063 reading: Fix reading mode disable on glossary swipe

Author: dpalou

src/core/directives/reading-mode.ts

@@ -67,7 +67,8 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
         await this.addTextViewerButton();
         this.element.classList.add('core-reading-mode-ready');
 
-        this.enabled = document.body.classList.contains('core-reading-mode-enable-on-enter');
+        this.enabled = CoreViewer.isReadingModeEnabledOnEnter();
+        CoreViewer.increaseReadingModeCounter();
         if (this.enabled) {
             await this.enterReadingMode();
         }
@@ -136,7 +137,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
         await this.header?.setEnabled(false);
 
         document.body.classList.add('core-reading-mode-enabled');
-        document.body.classList.add('core-reading-mode-enable-on-enter');
+        CoreViewer.setReadingModeEnabledOnEnter(true);
 
         const elements = document.body.querySelectorAll('[core-reading-mode].core-reading-mode-ready');
 
@@ -186,7 +187,7 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
 
         this.enabled = false;
         document.body.classList.remove('core-reading-mode-enabled');
-        document.body.classList.remove('core-reading-mode-enable-on-enter');
+        CoreViewer.setReadingModeEnabledOnEnter(false);
 
         // Enable all styles in element.
         this.disabledStyles.forEach((style) => {
@@ -238,7 +239,8 @@ export class CoreReadingModeDirective implements AfterViewInit, OnDestroy {
         this.viewportPromise?.cancel();
 
         // Disable reading mode should be done by the user.
-        document.body.classList.remove('core-reading-mode-enabled');
+        CoreViewer.decreaseReadingModeCounter();
+        document.body.classList.toggle('core-reading-mode-enabled', CoreViewer.isReadingModeEnabled());
     }
 
 }

src/core/features/viewer/services/viewer.ts

@@ -33,6 +33,9 @@ import {
 @Injectable({ providedIn: 'root' })
 export class CoreViewerService {
 
+    protected readingModeEnabledOnEnter = false;
+    protected readingModeInstancesCounter = 0;
+
     /**
      * View an image in a modal.
      *
@@ -148,6 +151,54 @@ export class CoreViewerService {
         this.applyReadingModeSettings(settings);
     }
 
+    /**
+     * Set whether reading mode was enabled on enter.
+     *
+     * @param enabled Whether reading mode was enabled on enter.
+     */
+    setReadingModeEnabledOnEnter(enabled: boolean): void {
+        this.readingModeEnabledOnEnter = enabled;
+    }
+
+    /**
+     * Increase the reading mode counter.
+     * This should be only called by the reading mode directive.
+     */
+    increaseReadingModeCounter(): void {
+        this.readingModeInstancesCounter++;
+    }
+
+    /**
+     * Decrease the reading mode counter.
+     * If the counter goes below 0, it will be set to 0.
+     * This should be only called by the reading mode directive.
+     */
+    decreaseReadingModeCounter(): void {
+        this.readingModeInstancesCounter--;
+
+        if (this.readingModeInstancesCounter < 0) {
+            this.readingModeInstancesCounter = 0;
+        }
+    }
+
+    /**
+     * Check if reading mode was enabled on enter.
+     *
+     * @returns Whether reading mode was enabled on enter.
+     */
+    isReadingModeEnabledOnEnter(): boolean {
+        return this.readingModeEnabledOnEnter;
+    }
+
+    /**
+     * Check if reading mode is enabled.
+     *
+     * @returns Whether reading mode is enabled.
+     */
+    isReadingModeEnabled(): boolean {
+        return this.readingModeEnabledOnEnter && this.readingModeInstancesCounter > 0;
+    }
+
 }
 export const CoreViewer = makeSingleton(CoreViewerService);
 

src/theme/components/collapsible-header.scss

@@ -118,3 +118,11 @@ body:not(.core-iframe-fullscreen):not(.core-reading-mode-enabled) .collapsible-h
     }
 
 }
+
+body.core-reading-mode-enabled .collapsible-header-page {
+    .collapsible-header-original-title {
+        pointer-events: none;
+        user-select: none;
+        visibility: hidden;
+    }
+}