Commit 7352b22a3ec1ccc73f51420a239a6ff1b4dd6872

Authored by Victor Costa
1 parent f9a71d96

Dynamically load article editor component based on specific type

src/app/article/cms/article-editor/article-editor.component.ts 0 → 100644
... ... @@ -0,0 +1,28 @@
  1 +import {Component, Input, Inject} from 'ng-forward';
  2 +
  3 +@Component({
  4 + selector: 'article-editor',
  5 + template: "not-used"
  6 +})
  7 +@Inject("$element", "$scope", "$injector", "$compile")
  8 +export class ArticleEditorComponent {
  9 +
  10 + @Input() article: noosfero.Article;
  11 +
  12 + constructor(
  13 + private $element: any,
  14 + private $scope: ng.IScope,
  15 + private $injector: ng.auto.IInjectorService,
  16 + private $compile: ng.ICompileService) { }
  17 +
  18 + ngOnInit() {
  19 + let articleType = this.article.type;
  20 + articleType = articleType.replace(/::/, '');
  21 + let specificDirective = `${articleType.charAt(0).toLowerCase()}${articleType.substring(1)}Editor`;
  22 + let directiveName = "article-basic-editor";
  23 + if (this.$injector.has(specificDirective + 'Directive')) {
  24 + directiveName = specificDirective.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  25 + }
  26 + this.$element.replaceWith(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
  27 + }
  28 +}
... ...
src/app/article/cms/basic-editor/basic-editor.component.ts
... ... @@ -7,5 +7,4 @@ import {Component, Input} from &#39;ng-forward&#39;;
7 7 export class BasicEditorComponent {
8 8  
9 9 @Input() article: noosfero.Article;
10   -
11 10 }
... ...
src/app/article/cms/cms.component.ts
... ... @@ -4,6 +4,7 @@ import {ProfileService} from &quot;../../../lib/ng-noosfero-api/http/profile.service&quot;
4 4 import {NotificationService} from "../../shared/services/notification.service.ts";
5 5 import {BasicOptionsComponent} from './basic-options/basic-options.component';
6 6 import {BasicEditorComponent} from './basic-editor/basic-editor.component';
  7 +import {ArticleEditorComponent} from './article-editor/article-editor.component';
7 8  
8 9 @Component({
9 10 selector: 'article-cms',
... ... @@ -13,7 +14,7 @@ import {BasicEditorComponent} from &#39;./basic-editor/basic-editor.component&#39;;
13 14 provide('profileService', { useClass: ProfileService }),
14 15 provide('notification', { useClass: NotificationService })
15 16 ],
16   - directives: [BasicOptionsComponent, BasicEditorComponent]
  17 + directives: [ArticleEditorComponent, BasicOptionsComponent, BasicEditorComponent]
17 18 })
18 19 @Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
19 20 export class CmsComponent {
... ...
src/app/article/cms/cms.html
... ... @@ -2,7 +2,7 @@
2 2 <div class="row">
3 3 <div class="col-md-1"></div>
4 4 <div class="col-md-8">
5   - <article-basic-editor ng-if="vm.article" [article]="vm.article"></article-basic-editor>
  5 + <article-editor ng-if="vm.article" [article]="vm.article"></article-editor>
6 6 </div>
7 7 <div class="col-md-3">
8 8 <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options>
... ...