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 @@ @@ -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,5 +7,4 @@ import {Component, Input} from &#39;ng-forward&#39;;
7 export class BasicEditorComponent { 7 export class BasicEditorComponent {
8 8
9 @Input() article: noosfero.Article; 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,6 +4,7 @@ import {ProfileService} from &quot;../../../lib/ng-noosfero-api/http/profile.service&quot;
4 import {NotificationService} from "../../shared/services/notification.service.ts"; 4 import {NotificationService} from "../../shared/services/notification.service.ts";
5 import {BasicOptionsComponent} from './basic-options/basic-options.component'; 5 import {BasicOptionsComponent} from './basic-options/basic-options.component';
6 import {BasicEditorComponent} from './basic-editor/basic-editor.component'; 6 import {BasicEditorComponent} from './basic-editor/basic-editor.component';
  7 +import {ArticleEditorComponent} from './article-editor/article-editor.component';
7 8
8 @Component({ 9 @Component({
9 selector: 'article-cms', 10 selector: 'article-cms',
@@ -13,7 +14,7 @@ import {BasicEditorComponent} from &#39;./basic-editor/basic-editor.component&#39;; @@ -13,7 +14,7 @@ import {BasicEditorComponent} from &#39;./basic-editor/basic-editor.component&#39;;
13 provide('profileService', { useClass: ProfileService }), 14 provide('profileService', { useClass: ProfileService }),
14 provide('notification', { useClass: NotificationService }) 15 provide('notification', { useClass: NotificationService })
15 ], 16 ],
16 - directives: [BasicOptionsComponent, BasicEditorComponent] 17 + directives: [ArticleEditorComponent, BasicOptionsComponent, BasicEditorComponent]
17 }) 18 })
18 @Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window") 19 @Inject(ArticleService, ProfileService, "$state", NotificationService, "$stateParams", "$window")
19 export class CmsComponent { 20 export class CmsComponent {
src/app/article/cms/cms.html
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div class="row"> 2 <div class="row">
3 <div class="col-md-1"></div> 3 <div class="col-md-1"></div>
4 <div class="col-md-8"> 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 </div> 6 </div>
7 <div class="col-md-3"> 7 <div class="col-md-3">
8 <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options> 8 <article-basic-options ng-if="vm.article" [article]="vm.article"></article-basic-options>