Create infra for plugins hotspots

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