Download as
Browse Code »

Commit 2cafe5da14f3a5a03049a5b5d70adcaf6f1e2e6a

Authored by Victor Costa
Committed by Michel Felipe
1 parent c0fd7cf6
Exists in master and in 26 other branches activities_block, btn-new-post, cosmetic_changes_people_and_communities_block, edit-blocks, edit-header-footer, env-tags-block, forgot_password, layout_support, list_articles_on_blog, loading-indicator-component, login_modal, login_modal_improve, person_info_block, profile-article-resolvers, profile-blocks-sass, profile_description_block_component, profile_page_improvements, recent-activities, remove-article-confirmation, skin-small-change, staging, tags-block, theme-skin-yellow, translations, updated_signup_page, users_profile_page

Add macro directive for articles

Showing 6 changed files with 64 additions and 4 deletions   Show diff stats
bower.json
  Diff comments   View file @2cafe5d
... ... @@ -35,6 +35,7 @@
35 35 "angular-i18n": "^1.5.0",
36 36 "angular-load": "^0.4.1",
37 37 "angular-translate-interpolation-messageformat": "^2.10.0",
  38 + "angular-bind-html-compile": "^1.2.1",
38 39 "ng-ckeditor": "^0.2.1",
39 40 "ckeditor": "^4.5.8"
40 41 },
... ...
src/app/article/article-default-view.component.ts
  Diff comments   View file @2cafe5d
1 1 import { bundle, Input, Inject, Component, Directive } from 'ng-forward';
2 2 import {ArticleBlogComponent} from "./types/blog/blog.component";
3 3 import {CommentsComponent} from "./comment/comments.component";
  4 +import {MacroDirective} from "./macro/macro.directive";
4 5  
5 6 /**
6 7 * @ngdoc controller
... ... @@ -30,7 +31,7 @@ export class ArticleDefaultViewComponent {
30 31 @Component({
31 32 selector: 'noosfero-article',
32 33 template: 'not-used',
33   - directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent]
  34 + directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent, MacroDirective]
34 35 })
35 36 @Inject("$element", "$scope", "$injector", "$compile")
36 37 export class ArticleViewComponent {
... ... @@ -53,6 +54,5 @@ export class ArticleViewComponent {
53 54 private $scope: ng.IScope,
54 55 private $injector: ng.auto.IInjectorService,
55 56 private $compile: ng.ICompileService) {
56   -
57 57 }
58 58 }
... ...
src/app/article/article.html
  Diff comments   View file @2cafe5d
... ... @@ -21,7 +21,7 @@
21 21 </div>
22 22  
23 23 <div class="page-body">
24   - <div ng-bind-html="ctrl.article.body"></div>
  24 + <div bind-html-compile="ctrl.article.body"></div>
25 25 </div>
26 26  
27 27 <noosfero-comments [article]="ctrl.article"></noosfero-comments>
... ...
src/app/article/macro/macro.directive.spec.ts 0 → 100644
  Diff comments   View file @2cafe5d
... ... @@ -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 +});
... ...
src/app/article/macro/macro.directive.ts 0 → 100644
  Diff comments   View file @2cafe5d
... ... @@ -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, '&quot;');
  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
  Diff comments   View file @2cafe5d
... ... @@ -15,7 +15,7 @@ declare var moment: any;
15 15 let noosferoApp: any = bundle("noosferoApp", MainComponent, ["ngAnimate", "ngCookies", "ngStorage", "ngTouch",
16 16 "ngSanitize", "ngMessages", "ngAria", "restangular",
17 17 "ui.router", "ui.bootstrap", "toastr", "ngCkeditor",
18   - "angularMoment", "angular.filter", "akoenig.deckgrid",
  18 + "angular-bind-html-compile","angularMoment", "angular.filter", "akoenig.deckgrid",
19 19 "angular-timeline", "duScroll", "oitozero.ngSweetAlert",
20 20 "pascalprecht.translate", "tmh.dynamicLocale", "angularLoad"]).publish();
21 21  
... ...