MOBILE-3730: Load styles from site plugins

moodlehq · Jul 3, 2024 · ae6eaae · ae6eaae
1 parent 42f75c6
commit ae6eaae
Show file tree

Hide file tree

Showing 39 changed files with 264 additions and 137 deletions.
diff --git a/src/core/features/compile/components/compile-html/compile-html.ts b/src/core/features/compile/components/compile-html/compile-html.ts
@@ -121,7 +121,8 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
     async ngOnChanges(changes: Record<string, SimpleChange>): Promise<void> {
         // Only compile if text/javascript has changed or the forceCompile flag has been set to true.
         if (this.text === undefined ||
-            !(changes.text || changes.javascript || (changes.forceCompile && CoreUtils.isTrueOrOne(this.forceCompile)))) {
+            !(changes.text || changes.javascript || changes.cssCode || changes.stylesPath ||
+                (changes.forceCompile && CoreUtils.isTrueOrOne(this.forceCompile)))) {
             return;
         }
 
@@ -182,17 +183,16 @@ export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {
             return;
         }
 
+        if (this.stylesPath && !this.cssCode) {
+            this.cssCode = await CoreUtils.ignoreErrors(CoreWS.getText(this.stylesPath));
+        }
+
         // Prepend all CSS rules with :host to avoid conflicts.
         if (this.cssCode) {
             if (!this.cssCode.includes(':host')) {
                 this.cssCode =  CoreDom.prefixCSS(this.cssCode, ':host ::ng-deep', ':host');
             }
 
-            return;
-        }
-
-        if (this.stylesPath && !this.cssCode) {
-            this.cssCode = await CoreUtils.ignoreErrors(CoreWS.getText(this.stylesPath));
         }
     }
 

diff --git a/src/core/features/siteplugins/classes/call-ws-directive.ts b/src/core/features/siteplugins/classes/call-ws-directive.ts
@@ -127,7 +127,7 @@ export class CoreSitePluginsCallWSBaseDirective implements OnInit, OnDestroy {
     }
 
     /**
-     * Directive destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         this.invalidateObserver?.unsubscribe();

diff --git a/src/core/features/siteplugins/classes/compile-init-component.ts b/src/core/features/siteplugins/classes/compile-init-component.ts
@@ -25,6 +25,8 @@ export class CoreSitePluginsCompileInitComponent {
     jsData: Record<string, unknown> = {}; // Data to pass to the component.
     protected handlerSchema?: CoreSitePluginsInitHandlerData; // The handler data.
 
+    stylesPath?: string; // Styles to apply to the component.
+
     /**
      * Function called when the component is created.
      *
@@ -40,18 +42,18 @@ export class CoreSitePluginsCompileInitComponent {
     /**
      * Get the handler data.
      *
-     * @param name The name of the handler.
+     * @param handlerName The name of the handler.
      */
-    getHandlerData(name: string): void {
+    async getHandlerData(handlerName: string): Promise<void> {
         // Retrieve the handler data.
-        const handler = CoreSitePlugins.getSitePluginHandler(name);
-
-        this.handlerSchema = handler?.handlerSchema;
+        const handler = CoreSitePlugins.getSitePluginHandler(handlerName);
 
-        if (!this.handlerSchema) {
+        if (!handler?.handlerSchema) {
             return;
         }
 
+        this.handlerSchema = handler.handlerSchema;
+
         // Load first template.
         if (this.handlerSchema.methodTemplates?.length) {
             this.content = this.handlerSchema.methodTemplates[0].html;
@@ -70,6 +72,8 @@ export class CoreSitePluginsCompileInitComponent {
         if (this.handlerSchema.methodJSResult) {
             this.jsData.CONTENT_JS_RESULT = this.handlerSchema.methodJSResult;
         }
+
+        this.stylesPath = await CoreSitePlugins.getHandlerDownloadedStyles(handlerName);
     }
 
 }
diff --git a/src/core/features/siteplugins/classes/handlers/course-option-handler.ts b/src/core/features/siteplugins/classes/handlers/course-option-handler.ts
@@ -71,23 +71,28 @@ export class CoreSitePluginsCourseOptionHandler extends CoreSitePluginsBaseHandl
     /**
      * @inheritdoc
      */
-    getDisplayData(): CoreCourseOptionsHandlerData {
+    async getDisplayData(): Promise<CoreCourseOptionsHandlerData> {
+        const stylesPath = await this.handlerSchema.styles?.downloadedStyles;
+
         return {
             title: this.title,
             class: this.handlerSchema.displaydata?.class,
             page: `siteplugins/${this.name}`,
-            pageParams: {},
+            pageParams: {
+                stylesPath,
+            },
         };
     }
 
     /**
      * @inheritdoc
      */
-    getMenuDisplayData(course: CoreCourseAnyCourseDataWithOptions): CoreCourseOptionsMenuHandlerData {
+    async getMenuDisplayData(course: CoreCourseAnyCourseDataWithOptions): Promise<CoreCourseOptionsMenuHandlerData> {
         const args = {
             courseid: course.id,
         };
         const hash = Md5.hashAsciiStr(JSON.stringify(args));
+        const stylesPath = await this.handlerSchema.styles?.downloadedStyles;
 
         return {
             title: this.title,
@@ -99,6 +104,7 @@ export class CoreSitePluginsCourseOptionHandler extends CoreSitePluginsBaseHandl
                 args,
                 initResult: this.initResult,
                 ptrEnabled: this.handlerSchema.ptrenabled,
+                stylesPath,
             },
         };
     }

diff --git a/src/core/features/siteplugins/classes/handlers/main-menu-handler.ts b/src/core/features/siteplugins/classes/handlers/main-menu-handler.ts
@@ -14,6 +14,7 @@
 
 import { CoreMainMenuHandler, CoreMainMenuHandlerData } from '@features/mainmenu/services/mainmenu-delegate';
 import {
+    CoreSitePlugins,
     CoreSitePluginsContent,
     CoreSitePluginsMainMenuHandlerData,
     CoreSitePluginsPlugin,
@@ -43,6 +44,8 @@ export class CoreSitePluginsMainMenuHandler extends CoreSitePluginsBaseHandler i
      * @inheritdoc
      */
     getDisplayData(): CoreMainMenuHandlerData {
+        const handlerName = CoreSitePlugins.getHandlerNameFromUniqueName(this.name, this.plugin.addon);
+
         return {
             title: this.title,
             icon: this.handlerSchema.displaydata?.icon || 'fas-question',
@@ -52,6 +55,7 @@ export class CoreSitePluginsMainMenuHandler extends CoreSitePluginsBaseHandler i
                 title: this.title,
                 initResult: this.initResult,
                 ptrEnabled: this.handlerSchema.ptrenabled,
+                handlerName,
             },
             onlyInMore: true,
         };

diff --git a/src/core/features/siteplugins/classes/handlers/message-output-handler.ts b/src/core/features/siteplugins/classes/handlers/message-output-handler.ts
@@ -14,6 +14,7 @@
 
 import { AddonMessageOutputHandler, AddonMessageOutputHandlerData } from '@addons/messageoutput/services/messageoutput-delegate';
 import {
+    CoreSitePlugins,
     CoreSitePluginsContent,
     CoreSitePluginsMessageOutputHandlerData,
     CoreSitePluginsPlugin,
@@ -40,6 +41,8 @@ export class CoreSitePluginsMessageOutputHandler extends CoreSitePluginsBaseHand
      * @inheritdoc
      */
     getDisplayData(): AddonMessageOutputHandlerData {
+        const handlerName = CoreSitePlugins.getHandlerNameFromUniqueName(this.name, this.plugin.addon);
+
         return {
             priority: this.handlerSchema.priority || 0,
             label: this.title,
@@ -49,6 +52,7 @@ export class CoreSitePluginsMessageOutputHandler extends CoreSitePluginsBaseHand
                 title: this.title,
                 initResult: this.initResult,
                 ptrEnabled: this.handlerSchema.ptrenabled,
+                handlerName,
             },
         };
     }

diff --git a/src/core/features/siteplugins/classes/handlers/settings-handler.ts b/src/core/features/siteplugins/classes/handlers/settings-handler.ts
@@ -14,6 +14,7 @@
 
 import { CoreSettingsHandler, CoreSettingsHandlerData } from '@features/settings/services/settings-delegate';
 import {
+    CoreSitePlugins,
     CoreSitePluginsContent,
     CoreSitePluginsPlugin,
     CoreSitePluginsSettingsHandlerData,
@@ -45,6 +46,8 @@ export class CoreSitePluginsSettingsHandler extends CoreSitePluginsBaseHandler i
      * @returns Data.
      */
     getDisplayData(): CoreSettingsHandlerData {
+        const handlerName = CoreSitePlugins.getHandlerNameFromUniqueName(this.name, this.plugin.addon);
+
         return {
             title: this.title,
             icon: this.handlerSchema.displaydata?.icon,
@@ -54,6 +57,7 @@ export class CoreSitePluginsSettingsHandler extends CoreSitePluginsBaseHandler i
                 title: this.title,
                 initResult: this.initResult,
                 ptrEnabled: this.handlerSchema.ptrenabled,
+                handlerName,
             },
         };
     }

diff --git a/src/core/features/siteplugins/classes/handlers/user-handler.ts b/src/core/features/siteplugins/classes/handlers/user-handler.ts
@@ -86,6 +86,7 @@ export class CoreSitePluginsUserProfileHandler extends CoreSitePluginsBaseHandle
      * @inheritdoc
      */
     getDisplayData(): CoreUserProfileHandlerData {
+
         return {
             title: this.title,
             icon: this.handlerSchema.displaydata?.icon,
@@ -94,6 +95,8 @@ export class CoreSitePluginsUserProfileHandler extends CoreSitePluginsBaseHandle
                 event.preventDefault();
                 event.stopPropagation();
 
+                const handlerName = CoreSitePlugins.getHandlerNameFromUniqueName(this.name, this.plugin.addon);
+
                 const args = {
                     courseid: contextId,
                     userid: user.id,
@@ -108,6 +111,7 @@ export class CoreSitePluginsUserProfileHandler extends CoreSitePluginsBaseHandle
                             args,
                             initResult: this.initResult,
                             ptrEnabled: this.handlerSchema.ptrenabled,
+                            handlerName,
                         },
                     },
                 );

diff --git a/src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts b/src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts
@@ -39,7 +39,7 @@ export class CoreSitePluginsAssignFeedbackComponent extends CoreSitePluginsCompi
     /**
      * @inheritdoc
      */
-    ngOnInit(): void {
+    async ngOnInit(): Promise<void> {
         // Pass the input and output data to the component.
         this.jsData.assign = this.assign;
         this.jsData.submission = this.submission;
@@ -50,7 +50,7 @@ export class CoreSitePluginsAssignFeedbackComponent extends CoreSitePluginsCompi
         this.jsData.canEdit = this.canEdit;
 
         if (this.plugin) {
-            this.getHandlerData(AddonModAssignFeedbackDelegate.getHandlerName(this.plugin.type));
+            await this.getHandlerData(AddonModAssignFeedbackDelegate.getHandlerName(this.plugin.type));
         }
     }
 

diff --git a/...ore/features/siteplugins/components/assign-feedback/core-siteplugins-assign-feedback.html b/...ore/features/siteplugins/components/assign-feedback/core-siteplugins-assign-feedback.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" [stylesPath]="stylesPath" />
diff --git a/src/core/features/siteplugins/components/assign-submission/assign-submission.ts b/src/core/features/siteplugins/components/assign-submission/assign-submission.ts
@@ -38,7 +38,7 @@ export class CoreSitePluginsAssignSubmissionComponent extends CoreSitePluginsCom
     /**
      * @inheritdoc
      */
-    ngOnInit(): void {
+    async ngOnInit(): Promise<void> {
         // Pass the input and output data to the component.
         this.jsData.assign = this.assign;
         this.jsData.submission = this.submission;
@@ -48,7 +48,7 @@ export class CoreSitePluginsAssignSubmissionComponent extends CoreSitePluginsCom
         this.jsData.allowOffline = this.allowOffline;
 
         if (this.plugin) {
-            this.getHandlerData(AddonModAssignSubmissionDelegate.getHandlerName(this.plugin.type));
+            await this.getHandlerData(AddonModAssignSubmissionDelegate.getHandlerName(this.plugin.type));
         }
     }
 

diff --git a/...features/siteplugins/components/assign-submission/core-siteplugins-assign-submission.html b/...features/siteplugins/components/assign-submission/core-siteplugins-assign-submission.html
@@ -1 +1 @@
-<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" />
+<core-compile-html [text]="content" [jsData]="jsData" (created)="componentCreated($event)" [stylesPath]="stylesPath" />
diff --git a/src/core/features/siteplugins/components/block/block.ts b/src/core/features/siteplugins/components/block/block.ts
@@ -36,15 +36,16 @@ export class CoreSitePluginsBlockComponent extends CoreBlockBaseComponent implem
     args?: Record<string, unknown>;
     jsData?: Record<string, unknown>; // Data to pass to the component.
     initResult?: CoreSitePluginsContent | null;
+    stylesPath?: string; // Styles to apply to the component.
 
     constructor() {
         super('CoreSitePluginsBlockComponent');
     }
 
     /**
-     * Detect changes on input properties.
+     * @inheritdoc
      */
-    ngOnChanges(): void {
+    async ngOnChanges(): Promise<void> {
         if (this.component) {
             return;
         }
@@ -67,12 +68,12 @@ export class CoreSitePluginsBlockComponent extends CoreBlockBaseComponent implem
             block: this.block,
         };
         this.initResult = handler.initResult;
+
+        this.stylesPath = await CoreSitePlugins.getHandlerDownloadedStyles(handlerName);
     }
 
     /**
-     * Invalidate block data.
-     *
-     * @returns Promise resolved when done.
+     * @inheritdoc
      */
     async invalidateContent(): Promise<void> {
         if (!this.component || !this.method) {

diff --git a/src/core/features/siteplugins/components/block/core-siteplugins-block.html b/src/core/features/siteplugins/components/block/core-siteplugins-block.html
@@ -1,2 +1,2 @@
 <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
-    [initResult]="initResult" [data]="jsData" />
+    [initResult]="initResult" [data]="jsData" [stylesPath]="stylesPath" />
diff --git a/src/core/features/siteplugins/components/course-format/core-siteplugins-course-format.html b/src/core/features/siteplugins/components/course-format/core-siteplugins-course-format.html
@@ -1,2 +1,2 @@
 <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
-    [initResult]="initResult" [data]="data" />
+    [initResult]="initResult" [data]="data" [stylesPath]="stylesPath" />
diff --git a/src/core/features/siteplugins/components/course-format/course-format.ts b/src/core/features/siteplugins/components/course-format/course-format.ts
@@ -49,11 +49,12 @@ export class CoreSitePluginsCourseFormatComponent implements OnChanges {
     args?: Record<string, unknown>;
     initResult?: CoreSitePluginsContent | null;
     data?: Record<string, unknown>;
+    stylesPath?: string; // Styles to apply to the component.
 
     /**
      * @inheritdoc
      */
-    ngOnChanges(): void {
+    async ngOnChanges(): Promise<void> {
         if (!this.course || !this.course.format) {
             return;
         }
@@ -70,6 +71,8 @@ export class CoreSitePluginsCourseFormatComponent implements OnChanges {
                     courseid: this.course.id,
                 };
                 this.initResult = handler.initResult;
+
+                this.stylesPath = await CoreSitePlugins.getHandlerDownloadedStyles(handlerName);
             }
         }
 

diff --git a/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html b/src/core/features/siteplugins/components/module-index/core-siteplugins-module-index.html
@@ -11,7 +11,7 @@
 
 <core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args"
     [initResult]="initResult" [data]="jsData" [pageTitle]="pageTitle" [preSets]="preSets" (onContentLoaded)="contentLoaded($event)"
-    (onLoadingContent)="contentLoading()" />
+    (onLoadingContent)="contentLoading()" [stylesPath]="stylesPath" />
 
 <core-course-module-navigation collapsible-footer [appearOnBottom]="collapsibleFooterAppearOnBottom" *ngIf="module" [courseId]="courseId"
     [currentModuleId]="module.id" />
diff --git a/src/core/features/siteplugins/components/module-index/module-index.ts b/src/core/features/siteplugins/components/module-index/module-index.ts
@@ -73,11 +73,12 @@ export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, C
     isDestroyed = false;
 
     jsData?: Record<string, unknown>; // Data to pass to the component.
+    stylesPath?: string; // Styles to apply to the component.
 
     /**
      * @inheritdoc
      */
-    ngOnInit(): void {
+    async ngOnInit(): Promise<void> {
         if (!this.module) {
             return;
         }
@@ -110,6 +111,8 @@ export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, C
             this.ptrEnabled = !CoreUtils.isFalseOrZero(handlerSchema.ptrenabled);
 
             this.collapsibleFooterAppearOnBottom = !CoreUtils.isFalseOrZero(handlerSchema.isresource);
+
+            this.stylesPath = await CoreSitePlugins.getHandlerDownloadedStyles(handlerName);
         }
 
         // Get the data for the context menu.
@@ -132,6 +135,8 @@ export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, C
 
     /**
      * Function called when the data of the site plugin content is loaded.
+     *
+     * @param data Data received.
      */
     contentLoaded(data: CoreSitePluginsPluginContentLoadedData): void {
         this.addDefaultModuleInfo = !data.content.includes('<core-course-module-info');

diff --git a/src/core/features/siteplugins/components/only-title-block/only-title-block.ts b/src/core/features/siteplugins/components/only-title-block/only-title-block.ts
@@ -68,6 +68,7 @@ export class CoreSitePluginsOnlyTitleBlockComponent extends CoreBlockBaseCompone
                     args,
                     initResult: handler.initResult,
                     ptrEnabled: (<CoreSitePluginsUserHandlerData> handler.handlerSchema).ptrenabled,
+                    handlerName,
                 },
             },
         );

diff --git a/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html b/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
@@ -1,3 +1,4 @@
 <core-loading [hideUntil]="dataLoaded" [fullscreen]="false">
-    <core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" #compile />
+    <core-compile-html [text]="content" [javascript]="javascript" [jsData]="jsData" [forceCompile]="forceCompile" [stylesPath]="stylesPath"
+        #compile />
 </core-loading>