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

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) {

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

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

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

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

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

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

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>

src/core/features/siteplugins/components/plugin-content/plugin-content.ts

@@ -54,6 +54,7 @@ export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
     @Input() args?: Record<string, unknown>;
     @Input() initResult?: CoreSitePluginsContent | null; // Result of the init WS call of the handler.
     @Input() data: Record<string, unknown> = {}; // Data to pass to the component.
+    @Input() stylesPath = ''; // Styles.
     @Input() preSets?: CoreSiteWSPreSets; // The preSets for the WS call.
     @Input() pageTitle?: string; // Current page title. It can be used by the "new-content" directives.
     @Output() onContentLoaded = new EventEmitter<CoreSitePluginsPluginContentLoadedData>(); // Emits event when content is loaded.
@@ -134,7 +135,8 @@ export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
                 jsData?: Record<string, unknown> | boolean,
                 preSets?: CoreSiteWSPreSets,
                 ptrEnabled?: boolean,
-            ) => this.openContent(title, args, component, method, jsData, preSets, ptrEnabled);
+                stylesPath?: string,
+            ) => this.openContent(title, args, component, method, jsData, preSets, ptrEnabled, stylesPath);
             this.jsData.refreshContent = (showSpinner?: boolean) => this.refreshContent(showSpinner);
             this.jsData.updateContent = (
                 args?: Record<string, unknown>,
@@ -170,6 +172,7 @@ export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
      *               If true is supplied instead of an object, all initial variables from current page will be copied.
      * @param preSets The preSets for the WS call of the new content.
      * @param ptrEnabled Whether PTR should be enabled in the new page. Defaults to true.
+     * @param stylesPath Styles to apply to the component.
      */
     openContent(
         title: string,
@@ -179,6 +182,7 @@ export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
         jsData?: Record<string, unknown> | boolean,
         preSets?: CoreSiteWSPreSets,
         ptrEnabled?: boolean,
+        stylesPath?: string,
     ): void {
         if (jsData === true) {
             jsData = this.data;
@@ -196,6 +200,7 @@ export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
                 jsData,
                 preSets,
                 ptrEnabled,
+                stylesPath,
             },
         });
     }

src/core/features/siteplugins/components/question-behaviour/core-siteplugins-question-behaviour.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" />