MOBILE-3730: Load styles from site plugins

Author: crazyserver

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);
     }
 
 }

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,
             },
         };
     }

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,
         };

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,
             },
         };
     }

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,
             },
         };
     }

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,
                         },
                     },
                 );

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));
         }
     }
 

src/core/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" />

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));
         }
     }
 

src/core/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" />