MOBILE-2428 siteplugins: Pass inputs to course format views

src/core/siteplugins/components/course-format/core-siteplugins-course-format.html

@@ -1 +1 @@
-<core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args" [initResult]="initResult"></core-site-plugins-plugin-content>
+<core-site-plugins-plugin-content *ngIf="component && method" [component]="component" [method]="method" [args]="args" [initResult]="initResult" [data]="data"></core-site-plugins-plugin-content>

src/core/siteplugins/components/course-format/course-format.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, Input, ViewChild } from '@angular/core';
+import { Component, OnChanges, Input, ViewChild } from '@angular/core';
 import { CoreSitePluginsProvider } from '../../providers/siteplugins';
 import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-content';
 
@@ -23,10 +23,12 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
     selector: 'core-site-plugins-course-format',
     templateUrl: 'core-siteplugins-course-format.html',
 })
-export class CoreSitePluginsCourseFormatComponent implements OnInit {
+export class CoreSitePluginsCourseFormatComponent implements OnChanges {
     @Input() course: any; // The course to render.
     @Input() sections: any[]; // List of course sections.
     @Input() downloadEnabled?: boolean; // Whether the download of sections and modules is enabled.
+    @Input() initialSectionId?: number; // The section to load first (by ID).
+    @Input() initialSectionNumber?: number; // The section to load first (by number).
 
     @ViewChild(CoreSitePluginsPluginContentComponent) content: CoreSitePluginsPluginContentComponent;
 
@@ -34,24 +36,37 @@ export class CoreSitePluginsCourseFormatComponent implements OnInit {
     method: string;
     args: any;
     initResult: any;
+    data: any;
 
     constructor(protected sitePluginsProvider: CoreSitePluginsProvider) { }
 
     /**
-     * Component being initialized.
+     * Detect changes on input properties.
      */
-    ngOnInit(): void {
+    ngOnChanges(): void {
         if (this.course && this.course.format) {
-            const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format);
+            if (!this.component) {
-            if (handler) {
+                // Initialize the data.
-                this.component = handler.plugin.component;
+                const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format);
-                this.method = handler.handlerSchema.method;
+                if (handler) {
-                this.args = {
+                    this.component = handler.plugin.component;
-                    courseid: this.course.id,
+                    this.method = handler.handlerSchema.method;
-                    downloadenabled: this.downloadEnabled
+                    this.args = {
-                };
+                        courseid: this.course.id,
-                this.initResult = handler.initResult;
+                        downloadenabled: this.downloadEnabled
+                    };
+                    this.initResult = handler.initResult;
+                }
             }
+
+            // Pass input data to the component.
+            this.data = {
+                course: this.course,
+                sections: this.sections,
+                downloadEnabled: this.downloadEnabled,
+                initialSectionId: this.initialSectionId,
+                initialSectionNumber: this.initialSectionNumber
+            };
         }
     }
 

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, Input, Output, EventEmitter, Optional } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, Optional, DoCheck, KeyValueDiffers } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreSitePluginsProvider } from '../../providers/siteplugins';
@@ -25,11 +25,12 @@ import { Subject } from 'rxjs';
     selector: 'core-site-plugins-plugin-content',
     templateUrl: 'core-siteplugins-plugin-content.html',
 })
-export class CoreSitePluginsPluginContentComponent implements OnInit {
+export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
     @Input() component: string;
     @Input() method: string;
     @Input() args: any;
     @Input() initResult: any; // Result of the init WS call of the handler.
+    @Input() data: any; // Data to pass to the component.
     @Output() onContentLoaded?: EventEmitter<boolean>; // Emits an event when the content is loaded.
     @Output() onLoadingContent?: EventEmitter<boolean>; // Emits an event when starts to load the content.
 
@@ -40,11 +41,14 @@ export class CoreSitePluginsPluginContentComponent implements OnInit {
     invalidateObservable: Subject<void>; // An observable to notify observers when to invalidate data.
     jsData: any; // Data to pass to the component.
 
+    protected differ: any; // To detect changes in the data input.
+
     constructor(protected domUtils: CoreDomUtilsProvider, protected sitePluginsProvider: CoreSitePluginsProvider,
-            @Optional() protected navCtrl: NavController) {
+            @Optional() protected navCtrl: NavController, differs: KeyValueDiffers) {
         this.onContentLoaded = new EventEmitter();
         this.onLoadingContent = new EventEmitter();
         this.invalidateObservable = new Subject<void>();
+        this.differ = differs.find([]).create();
     }
 
     /**
@@ -54,6 +58,21 @@ export class CoreSitePluginsPluginContentComponent implements OnInit {
         this.fetchContent();
     }
 
+    /**
+     * Detect and act upon changes that Angular can’t or won’t detect on its own (objects and arrays).
+     */
+    ngDoCheck(): void {
+        if (!this.data || !this.jsData) {
+            return;
+        }
+
+        // Check if there's any change in the data object.
+        const changes = this.differ.diff(this.data);
+        if (changes) {
+            this.jsData = Object.assign(this.jsData, this.data);
+        }
+    }
+
     /**
      * Fetches the content to render.
      *
@@ -67,7 +86,9 @@ export class CoreSitePluginsPluginContentComponent implements OnInit {
             this.content = result.templates.length ? result.templates[0].html : ''; // Load first template.
             this.javascript = result.javascript;
             this.otherData = result.otherdata;
-            this.jsData = this.sitePluginsProvider.createDataForJS(this.initResult, result);
+            this.data = this.data || {};
+
+            this.jsData = Object.assign(this.data, this.sitePluginsProvider.createDataForJS(this.initResult, result));
 
             // Pass some methods as jsData so they can be called from the template too.
             this.jsData.openContent = this.openContent.bind(this);