EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2428 siteplugins: Pass inputs to course format views

main
Dani Palou 2018-06-15 08:22:13 +02:00
parent f6d30fb7cb
commit 6979f18343
3 changed files with 54 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/siteplugins/components/course-format/core-siteplugins-course-format.html
View File

@ -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>

41
src/core/siteplugins/components/course-format/course-format.ts
View File

@ -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 (handler) {
this.component = handler.plugin.component;
this.method = handler.handlerSchema.method;
this.args = {
courseid: this.course.id,
downloadenabled: this.downloadEnabled
};
this.initResult = handler.initResult;
if (!this.component) {
// Initialize the data.
const handler = this.sitePluginsProvider.getSitePluginHandler(this.course.format);
if (handler) {
this.component = handler.plugin.component;
this.method = handler.handlerSchema.method;
this.args = {
courseid: this.course.id,
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
};
}
}

29
src/core/siteplugins/components/plugin-content/plugin-content.ts
View File

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