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 @@ |
| 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
src/app/article/cms/cms.component.ts
| ... | ... | @@ -4,6 +4,7 @@ import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service" |
| 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 './basic-editor/basic-editor.component'; |
| 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> | ... | ... |