Commit 56a44bd230b391ce452ab65797747ffa38272ec2

Authored by Victor Costa
Committed by Michel Felipe
1 parent 1f246d3f

Create infra for plugins hotspots

src/app/article/article-default-view.component.ts
... ... @@ -2,6 +2,7 @@ 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 4 import {MacroDirective} from "./macro/macro.directive";
  5 +import {ArticleToolbarHotspotComponent} from "../hotspot/article-toolbar-hotspot.component";
5 6  
6 7 /**
7 8 * @ngdoc controller
... ... @@ -31,7 +32,8 @@ export class ArticleDefaultViewComponent {
31 32 @Component({
32 33 selector: 'noosfero-article',
33 34 template: 'not-used',
34   - directives: [ArticleDefaultViewComponent, ArticleBlogComponent, CommentsComponent, MacroDirective]
  35 + directives: [ArticleDefaultViewComponent, ArticleBlogComponent,
  36 + CommentsComponent, MacroDirective, ArticleToolbarHotspotComponent]
35 37 })
36 38 @Inject("$element", "$scope", "$injector", "$compile")
37 39 export class ArticleViewComponent {
... ...
src/app/article/article.html
... ... @@ -4,9 +4,7 @@
4 4 </div>
5 5  
6 6 <div class="sub-header clearfix">
7   - <a href="#" class="btn btn-default btn-xs" ui-sref="main.cmsEdit({profile: ctrl.profile.identifier, id: ctrl.article.id})">
8   - <i class="fa fa-pencil-square-o fa-fw fa-lg"></i> {{"article.actions.edit" | translate}}
9   - </a>
  7 + <noosfero-hotspot-article-toolbar [article]="ctrl.article"></noosfero-hotspot-article-toolbar>
10 8 <div class="page-info pull-right small text-muted">
11 9 <span class="time">
12 10 <i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.article.created_at | dateFormat"></span>
... ...
src/app/article/comment/post-comment/post-comment.component.ts
1   -import { Inject, Input, Output, EventEmitter, Component } from 'ng-forward';
  1 +import { Inject, Input, Component } from 'ng-forward';
2 2 import { CommentService } from "../../../../lib/ng-noosfero-api/http/comment.service";
3 3 import { NotificationService } from "../../../shared/services/notification.service";
4 4 import { SessionService } from "../../../login";
  5 +import { PostCommentEventService } from "./post-comment-event.service";
  6 +import { CommentFormHotspotComponent } from "../../../hotspot/comment-form-hotspot.component";
5 7  
6 8 @Component({
7 9 selector: 'noosfero-post-comment',
8 10 templateUrl: 'app/article/comment/post-comment/post-comment.html',
9   - outputs: ['commentSaved']
  11 + directives: [CommentFormHotspotComponent]
10 12 })
11   -@Inject(CommentService, NotificationService, SessionService)
  13 +@Inject(CommentService, NotificationService, SessionService, PostCommentEventService)
12 14 export class PostCommentComponent {
13 15  
  16 + public static EVENT_COMMENT_RECEIVED = "comment.received";
  17 +
14 18 @Input() article: noosfero.Article;
15 19 @Input() parent: noosfero.Comment;
16   - @Output() commentSaved: EventEmitter<Comment> = new EventEmitter<Comment>();
17 20  
18 21 comment = <noosfero.Comment>{};
19 22 private currentUser: noosfero.User;
20 23  
21 24 constructor(private commentService: CommentService,
22 25 private notificationService: NotificationService,
23   - private session: SessionService) {
  26 + private session: SessionService,
  27 + private postCommentEventService: PostCommentEventService) {
24 28 this.currentUser = this.session.currentUser();
25 29 }
26 30  
... ... @@ -29,7 +33,7 @@ export class PostCommentComponent {
29 33 this.comment.reply_of_id = this.parent.id;
30 34 }
31 35 this.commentService.createInArticle(this.article, this.comment).then((result: noosfero.RestResult<noosfero.Comment>) => {
32   - this.commentSaved.next(result.data);
  36 + this.postCommentEventService.emit(result.data);
33 37 this.comment.body = "";
34 38 this.notificationService.success({ title: "comment.post.success.title", message: "comment.post.success.message" });
35 39 });
... ...
src/app/article/comment/post-comment/post-comment.html
... ... @@ -8,6 +8,7 @@
8 8 </div>
9 9 <div class="media-body">
10 10 <textarea class="form-control custom-control" rows="1" ng-model="ctrl.comment.body" placeholder="{{'comment.post.placeholder' | translate}}"></textarea>
  11 + <noosfero-hotspot-comment-form [comment]="ctrl.comment"></noosfero-hotspot-comment-form>
11 12 <button ng-show="ctrl.comment.body" type="submit" class="btn btn-default pull-right ng-hide" ng-click="ctrl.save()">{{"comment.post" | translate}}</button>
12 13 </div>
13 14 </div>
... ...
src/app/hotspot/article-toolbar-hotspot.component.ts 0 → 100644
... ... @@ -0,0 +1,25 @@
  1 +import {Component, Input, Inject} from "ng-forward";
  2 +import * as plugins from "../../plugins";
  3 +import {dasherize} from "ng-forward/cjs/util/helpers";
  4 +import {PluginHotspot} from "./plugin-hotspot";
  5 +
  6 +@Component({
  7 + selector: "noosfero-hotspot-article-toolbar",
  8 + template: "<span></span>"
  9 +})
  10 +@Inject("$element", "$scope", "$compile")
  11 +export class ArticleToolbarHotspotComponent extends PluginHotspot {
  12 +
  13 + @Input() article: noosfero.Article;
  14 +
  15 + constructor(
  16 + private $element: any,
  17 + private $scope: ng.IScope,
  18 + private $compile: ng.ICompileService) {
  19 + super("article_extra_toolbar_buttons");
  20 + }
  21 +
  22 + addHotspot(directiveName: string) {
  23 + this.$element.append(this.$compile('<' + directiveName + ' [article]="ctrl.article"></' + directiveName + '>')(this.$scope));
  24 + }
  25 +}
... ...
src/app/hotspot/comment-form-hotspot.component.ts 0 → 100644
... ... @@ -0,0 +1,25 @@
  1 +import {Component, Input, Inject} from "ng-forward";
  2 +import * as plugins from "../../plugins";
  3 +import {dasherize} from "ng-forward/cjs/util/helpers";
  4 +import {PluginHotspot} from "./plugin-hotspot";
  5 +
  6 +@Component({
  7 + selector: "noosfero-hotspot-comment-form",
  8 + template: "<span></span>"
  9 +})
  10 +@Inject("$element", "$scope", "$compile")
  11 +export class CommentFormHotspotComponent extends PluginHotspot {
  12 +
  13 + @Input() comment: noosfero.Comment;
  14 +
  15 + constructor(
  16 + private $element: any,
  17 + private $scope: ng.IScope,
  18 + private $compile: ng.ICompileService) {
  19 + super("comment_form_extra_contents");
  20 + }
  21 +
  22 + addHotspot(directiveName: string) {
  23 + this.$element.append(this.$compile('<' + directiveName + ' [comment]="ctrl.comment"></' + directiveName + '>')(this.$scope));
  24 + }
  25 +}
... ...
src/app/hotspot/hotspot.decorator.ts 0 → 100644
... ... @@ -0,0 +1,5 @@
  1 +export function Hotspot(hotspotName: string) {
  2 + return (target: any) => {
  3 + target['hotspot'] = hotspotName;
  4 + }
  5 +}
... ...
src/app/hotspot/plugin-hotspot.ts 0 → 100644
... ... @@ -0,0 +1,19 @@
  1 +import {Component, Input, Inject} from "ng-forward";
  2 +import * as plugins from "../../plugins";
  3 +import {dasherize} from "ng-forward/cjs/util/helpers";
  4 +
  5 +export abstract class PluginHotspot {
  6 +
  7 + constructor(protected hotspot: string) { }
  8 +
  9 + ngOnInit() {
  10 + for (let component of plugins.hotspots) {
  11 + if (component.hotspot === this.hotspot) {
  12 + let directiveName = dasherize(component.name.replace('Component', ''));
  13 + this.addHotspot(directiveName);
  14 + }
  15 + }
  16 + }
  17 +
  18 + abstract addHotspot(directiveName: string): any;
  19 +}
... ...
src/app/main/main.component.ts
  1 +import * as plugins from "../../plugins";
1 2 import {bundle, Component, StateConfig, Inject} from "ng-forward";
2 3 import {ArticleBlogComponent} from "./../article/types/blog/blog.component";
3 4  
... ... @@ -33,7 +34,6 @@ import {SidebarComponent} from &quot;../layout/sidebar/sidebar.component&quot;;
33 34 import {MainBlockComponent} from "../layout/blocks/main-block/main-block.component";
34 35 import {HtmlEditorComponent} from "../shared/components/html-editor/html-editor.component";
35 36  
36   -import * as plugins from "../../plugins";
37 37  
38 38 /**
39 39 * @ngdoc controller
... ... @@ -94,7 +94,7 @@ export class EnvironmentContent {
94 94 LinkListBlockComponent, CommunitiesBlockComponent, HtmlEditorComponent,
95 95 MainBlockComponent, RecentDocumentsBlockComponent, Navbar, SidebarComponent, ProfileImageBlockComponent,
96 96 MembersBlockComponent, NoosferoTemplate, DateFormat, RawHTMLBlockComponent
97   - ].concat(plugins.mainComponents),
  97 + ].concat(plugins.mainComponents).concat(plugins.hotspots),
98 98 providers: [AuthService, SessionService, NotificationService, BodyStateClassesService]
99 99 })
100 100 @StateConfig([
... ...
src/plugins/comment_paragraph/hotspot/article-button.html 0 → 100644
... ... @@ -0,0 +1,2 @@
  1 +<a href='#'>Enable</a>
  2 +<a href='#'>Disable</a>
... ...
src/plugins/comment_paragraph/hotspot/comment-paragraph-article-button.component.ts 0 → 100644
... ... @@ -0,0 +1,15 @@
  1 +import { Input, Inject, Component } from "ng-forward";
  2 +import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
  3 +
  4 +@Component({
  5 + selector: "comment-paragraph-article-button-hotspot",
  6 + templateUrl: "plugins/comment_paragraph/hotspot/article-button.html",
  7 +})
  8 +@Inject("$scope")
  9 +@Hotspot("article_extra_toolbar_buttons")
  10 +export class CommentParagraphArticleButtonHotspotComponent {
  11 +
  12 + @Input() article: noosfero.Article;
  13 +
  14 + constructor(private $scope: ng.IScope) { }
  15 +}
... ...
src/plugins/comment_paragraph/hotspot/comment-paragraph-uuid-hotspot.component.ts 0 → 100644
... ... @@ -0,0 +1,21 @@
  1 +import { Input, Inject, Component } from "ng-forward";
  2 +import {Hotspot} from "../../../app/hotspot/hotspot.decorator";
  3 +
  4 +@Component({
  5 + selector: "comment-paragraph-uuid-hotspot",
  6 + template: "<span></span>",
  7 +})
  8 +@Inject("$scope")
  9 +@Hotspot("comment_form_extra_contents")
  10 +export class CommentParagraphUuidHotspotComponent {
  11 +
  12 + @Input() comment: noosfero.Comment;
  13 +
  14 + constructor(private $scope: ng.IScope) { }
  15 +
  16 + ngOnInit() {
  17 + this.$scope.$watch("comment", () => {
  18 + this.comment['paragraph_uuid'] = "???";
  19 + });
  20 + }
  21 +}
... ...
src/plugins/comment_paragraph/index.ts
1 1 import {AllowCommentComponent} from "./allow-comment/allow-comment.component";
  2 +import {CommentParagraphUuidHotspotComponent} from "./hotspot/comment-paragraph-uuid-hotspot.component";
  3 +import {CommentParagraphArticleButtonHotspotComponent} from "./hotspot/comment-paragraph-article-button.component";
2 4  
3 5 export let mainComponents: any = [AllowCommentComponent];
  6 +export let hotspots: any = [CommentParagraphUuidHotspotComponent, CommentParagraphArticleButtonHotspotComponent];
... ...
src/plugins/comment_paragraph/side-comments/side-comments.component.ts
1   -import {Component, Inject, Input} from "ng-forward";
  1 +import {Component, Inject, Input, Output} from "ng-forward";
2 2 import {CommentsComponent} from "../../../app/article/comment/comments.component";
3 3 import {CommentService} from "../../../lib/ng-noosfero-api/http/comment.service";
4 4 import {CommentParagraphService} from "../http/comment-paragraph.service";
... ...
src/plugins/index.ts
... ... @@ -2,3 +2,6 @@ import * as commentParagraph from &quot;./comment_paragraph&quot;;
2 2  
3 3 export let mainComponents: any = [];
4 4 mainComponents = mainComponents.concat(commentParagraph.mainComponents);
  5 +
  6 +export let hotspots: any = [];
  7 +hotspots = hotspots.concat(commentParagraph.hotspots);
... ...