Merge pull request #4544 from dpalou/MOBILE-4417

MOBILE-4417 format-text: Support alternative content using data attrs

Author: alfonso-salces

src/core/directives/format-text.ts

@@ -495,6 +495,9 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
      * @returns Promise resolved when done.
      */
     protected treatHTMLElements(div: HTMLElement, site?: CoreSite): ElementController[] {
+        // Treat alternative content elements first, that way the search of elements won't treat the elements that are removed.
+        this.treatAlternativeContentElements(div);
+
         const images = Array.from(div.querySelectorAll('img'));
         const anchors = Array.from(div.querySelectorAll('a'));
         const audios = Array.from(div.querySelectorAll('audio'));
@@ -650,6 +653,40 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
         ];
     }
 
+    /**
+     * Treat elements with data attributes to display an alternative content in the app.
+     *
+     * @param div Container where to search the elements.
+     */
+    protected treatAlternativeContentElements(div: HTMLElement): void {
+        const appAltElements = Array.from(div.querySelectorAll<HTMLElement>(
+            '*[data-app-alt-url],*[data-app-alt-msg]',
+        ));
+
+        appAltElements.forEach((element) => {
+            const url = element.dataset.appAltUrl;
+            const message = element.dataset.appAltMsg;
+            if (!message && !url) {
+                return;
+            }
+
+            let newContent = message ? `<p>${message}</p>` : '';
+            if (url) {
+                // Create a link using the appUrl format to reuse all the logic of appUrl data attributes.
+                let dataAttributes = `data-app-url="${url}"`;
+                for (const attr in element.dataset) {
+                    if (!['appUrl', 'appAltUrl', 'appAltMsg'].includes(attr)) {
+                        dataAttributes += ` data-${CoreText.camelCaseToKebabCase(attr)}="${element.dataset[attr]}"`;
+                    }
+                }
+
+                newContent += `<p><a href="${url}" ${dataAttributes}>${url}</a></p>`;
+            }
+
+            element.innerHTML = newContent;
+        });
+    }
+
     /**
      * Treat elements with an app-url data attribute.
      *

src/core/directives/tests/behat/format_text.feature

@@ -0,0 +1,37 @@
+@app @core @javascript
+Feature: Test functionality added by the format-text directive
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname  | lastname  | email                |
+      | student1 | Student1   | student1  | student1@example.com |
+    And the following "courses" exist:
+      | fullname | shortname |
+      | Course 1 | C1        |
+    And the following "course enrolments" exist:
+      | user     | course | role    |
+      | student1 | C1     | student |
+
+  Scenario: Displays alternative content in the app
+    Given the following "activities" exist:
+      | activity   | course | name          | intro                                                                                                                                                                 |
+      | label      | C1     | Label title   | <div data-app-alt-url="#wwwroot#/my/courses.php">Content for browser</div>                                                                                            |
+      | label      | C1     | Label 2 title | <div data-app-alt-url="#wwwroot#/?redirect=0" data-app-alt-msg="Open this link" data-open-in="inapp" data-app-url-confirm="Custom confirm.">Content for browser</div> |
+    Given I entered the course "Course 1" as "student1" in the app
+    Then I should find "Open this link" in the app
+    And I should find "$WWWROOT/my/courses.php" in the app
+    And I should find "$WWWROOT/?redirect=0" in the app
+    But I should not find "Content for browser" in the app
+
+    When I press "$WWWROOT/my/courses.php" in the app
+    Then I should not find "Custom confirm" in the app
+
+    When I press "OK" in the app
+    Then the app should have opened a browser tab with url "$WWWROOTPATTERN"
+
+    When I close the browser tab opened by the app
+    And I press "$WWWROOT/?redirect=0" in the app
+    Then I should find "Custom confirm" in the app
+
+    When I press "OK" in the app
+    Then the app should have opened a browser tab with url "$WWWROOTPATTERN"

src/core/singletons/tests/text.test.ts

@@ -117,4 +117,13 @@ describe('CoreText singleton', () => {
         expect(CoreText.countWords('<span>a</span><span>b</span>')).toEqual(1);
     });
 
+    it('converts camelCase to kebab-case', () => {
+        expect(CoreText.camelCaseToKebabCase('camelCase')).toEqual('camel-case');
+        expect(CoreText.camelCaseToKebabCase('camelCaseWithNumbers123')).toEqual('camel-case-with-numbers123');
+        expect(CoreText.camelCaseToKebabCase('')).toEqual('');
+        expect(CoreText.camelCaseToKebabCase('snake_case')).toEqual('snake_case');
+        expect(CoreText.camelCaseToKebabCase('already-kebab-case')).toEqual('already-kebab-case');
+        expect(CoreText.camelCaseToKebabCase('mix_of-differentTextCases')).toEqual('mix_of-different-text-cases');
+    });
+
 });

src/core/singletons/text.ts

@@ -110,6 +110,17 @@ export class CoreText {
         return Translate.instant('core.humanreadablesize', { size: bytes, unit: units[keys[pos]] });
     }
 
+    /**
+     * Convert a camel case text to kebab case.
+     * Example: "myVariableName" -> "my-variable-name".
+     *
+     * @param text The text to convert.
+     * @returns The converted text.
+     */
+    static camelCaseToKebabCase(text: string): string {
+        return text.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase());
+    }
+
     /**
      * Copies a text to clipboard and shows a toast message.
      *