Commit 7352b22a3ec1ccc73f51420a239a6ff1b4dd6872
1 parent
f9a71d96
Exists in
master
and in
26 other branches
Dynamically load article editor component based on specific type
Showing
4 changed files
with
31 additions
and
3 deletions
Show diff stats
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 'ng-forward'; | @@ -7,5 +7,4 @@ import {Component, Input} from 'ng-forward'; | ||
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 "../../../lib/ng-noosfero-api/http/profile.service" | @@ -4,6 +4,7 @@ import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service" | ||
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 './basic-editor/basic-editor.component'; | @@ -13,7 +14,7 @@ import {BasicEditorComponent} from './basic-editor/basic-editor.component'; | ||
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> |