Commit 2cafe5da14f3a5a03049a5b5d70adcaf6f1e2e6a
Committed by
Michel Felipe
Michel Felipe
1 parent
c0fd7cf6
Exists in
master
and in
26 other branches
Add macro directive for articles
Showing
6 changed files
with
64 additions
and
4 deletions
Show diff stats
bower.json
| @@ -35,6 +35,7 @@ | @@ -35,6 +35,7 @@ | ||
| 35 | "angular-i18n": "^1.5.0", | 35 | "angular-i18n": "^1.5.0", |
| 36 | "angular-load": "^0.4.1", | 36 | "angular-load": "^0.4.1", |
| 37 | "angular-translate-interpolation-messageformat": "^2.10.0", | 37 | "angular-translate-interpolation-messageformat": "^2.10.0", |
| 38 | + "angular-bind-html-compile": "^1.2.1", | ||
| 38 | "ng-ckeditor": "^0.2.1", | 39 | "ng-ckeditor": "^0.2.1", |
| 39 | "ckeditor": "^4.5.8" | 40 | "ckeditor": "^4.5.8" |
| 40 | }, | 41 | }, |
src/app/article/article-default-view.component.ts
| 1 | import { bundle, Input, Inject, Component, Directive } from 'ng-forward'; | 1 | import { bundle, Input, Inject, Component, Directive } from 'ng-forward'; |
| 2 | import {ArticleBlogComponent} from "./types/blog/blog.component"; | 2 | import {ArticleBlogComponent} from "./types/blog/blog.component"; |
| 3 | import {CommentsComponent} from "./comment/comments.component"; | 3 | import {CommentsComponent} from "./comment/comments.component"; |
| 4 | +import {MacroDirective} from "./macro/macro.directive"; | ||
| 4 | 5 | ||
| 5 | /** | 6 | /** |
| 6 | * @ngdoc controller | 7 | * @ngdoc controller |
| @@ -30,7 +31,7 @@ export class ArticleDefaultViewComponent { | @@ -30,7 +31,7 @@ export class ArticleDefaultViewComponent { | ||
| 30 | @Component({ | 31 | @Component({ |
| 31 | selector: 'noosfero-article', | 32 | selector: 'noosfero-article', |
| 32 | template: 'not-used', | 33 | template: 'not-used', |
| 33 | - directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent] | 34 | + directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent, MacroDirective] |
| 34 | }) | 35 | }) |
| 35 | @Inject("$element", "$scope", "$injector", "$compile") | 36 | @Inject("$element", "$scope", "$injector", "$compile") |
| 36 | export class ArticleViewComponent { | 37 | export class ArticleViewComponent { |
| @@ -53,6 +54,5 @@ export class ArticleViewComponent { | @@ -53,6 +54,5 @@ export class ArticleViewComponent { | ||
| 53 | private $scope: ng.IScope, | 54 | private $scope: ng.IScope, |
| 54 | private $injector: ng.auto.IInjectorService, | 55 | private $injector: ng.auto.IInjectorService, |
| 55 | private $compile: ng.ICompileService) { | 56 | private $compile: ng.ICompileService) { |
| 56 | - | ||
| 57 | } | 57 | } |
| 58 | } | 58 | } |
src/app/article/article.html
| @@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
| 21 | </div> | 21 | </div> |
| 22 | 22 | ||
| 23 | <div class="page-body"> | 23 | <div class="page-body"> |
| 24 | - <div ng-bind-html="ctrl.article.body"></div> | 24 | + <div bind-html-compile="ctrl.article.body"></div> |
| 25 | </div> | 25 | </div> |
| 26 | 26 | ||
| 27 | <noosfero-comments [article]="ctrl.article"></noosfero-comments> | 27 | <noosfero-comments [article]="ctrl.article"></noosfero-comments> |
| @@ -0,0 +1,25 @@ | @@ -0,0 +1,25 @@ | ||
| 1 | +import {Input, provide, Component} from 'ng-forward'; | ||
| 2 | +import {MacroDirective} from "./macro.directive"; | ||
| 3 | + | ||
| 4 | +import * as helpers from "../../../spec/helpers"; | ||
| 5 | + | ||
| 6 | +const htmlTemplate: string = '<div data-macro="macro_component" data-macro-custom="custom"></div>'; | ||
| 7 | + | ||
| 8 | +describe("Directives", () => { | ||
| 9 | + | ||
| 10 | + describe("Macro directive", () => { | ||
| 11 | + it("renders a macro component using the name passed in data-macro", (done: Function) => { | ||
| 12 | + helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => { | ||
| 13 | + expect(fixture.debugElement.queryAll('macro-component').length).toEqual(1); | ||
| 14 | + done(); | ||
| 15 | + }); | ||
| 16 | + }); | ||
| 17 | + | ||
| 18 | + it("extract custom attributes from macro", (done: Function) => { | ||
| 19 | + helpers.quickCreateComponent({ template: htmlTemplate, directives: [MacroDirective] }).then((fixture) => { | ||
| 20 | + expect(fixture.debugElement.query('macro-component').attr("custom")).toEqual("custom"); | ||
| 21 | + done(); | ||
| 22 | + }); | ||
| 23 | + }); | ||
| 24 | + }); | ||
| 25 | +}); |
| @@ -0,0 +1,34 @@ | @@ -0,0 +1,34 @@ | ||
| 1 | +import {Directive, Inject} from "ng-forward"; | ||
| 2 | + | ||
| 3 | +@Directive({ | ||
| 4 | + selector: '[macro]', | ||
| 5 | + providers: [] | ||
| 6 | +}) | ||
| 7 | +@Inject('$element', '$scope', '$compile') | ||
| 8 | +export class MacroDirective { | ||
| 9 | + | ||
| 10 | + private macroPrefix = "data-macro"; | ||
| 11 | + | ||
| 12 | + constructor(private $element: any, private $scope: ng.IScope, private $compile: ng.ICompileService) { | ||
| 13 | + let macro = $element[0].attributes[this.macroPrefix].value; | ||
| 14 | + let componentName = this.normalizeName(macro); | ||
| 15 | + let content = $element.html().replace(/"/g, '"'); | ||
| 16 | + let customAttributes = this.extractCustomAttributes($element[0].attributes); | ||
| 17 | + $element.replaceWith($compile(`<${componentName} [article]="ctrl.article" content="${content}" ${customAttributes}></${componentName}>`)($scope)); | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + extractCustomAttributes(attributes: any) { | ||
| 21 | + let customAttributes = ""; | ||
| 22 | + for (let attr of attributes) { | ||
| 23 | + if (attr.name.startsWith(this.macroPrefix + '-')) { | ||
| 24 | + let name = this.normalizeName(attr.name.replace(this.macroPrefix + '-', '')); | ||
| 25 | + customAttributes += ` ${name}='${attr.value}'`; | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + return customAttributes; | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + normalizeName(name: string) { | ||
| 32 | + return name.replace(/[_\/]/g, '-').toLowerCase(); | ||
| 33 | + } | ||
| 34 | +} |
src/app/index.ts
| @@ -15,7 +15,7 @@ declare var moment: any; | @@ -15,7 +15,7 @@ declare var moment: any; | ||
| 15 | let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch", | 15 | let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch", |
| 16 | "ngSanitize", "ngMessages", "ngAria", "restangular", | 16 | "ngSanitize", "ngMessages", "ngAria", "restangular", |
| 17 | "ui.router", "ui.bootstrap", "toastr", "ngCkeditor", | 17 | "ui.router", "ui.bootstrap", "toastr", "ngCkeditor", |
| 18 | - "angularMoment", "angular.filter", "akoenig.deckgrid", | 18 | + "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid", |
| 19 | "angular-timeline", "duScroll", "oitozero.ngSweetAlert", | 19 | "angular-timeline", "duScroll", "oitozero.ngSweetAlert", |
| 20 | "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish(); | 20 | "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish(); |
| 21 | 21 |