Migrate block component to ngforward

Victor Costa
1 parent 2e424f97
Showing 5 changed files with 23 additions and 27 deletions Show diff stats
src/app/components/noosfero-blocks/block.component.ts
src/app/components/noosfero-blocks/block.directive.js
src/app/components/noosfero-boxes/box.html
src/app/index.ts
src/app/main/main.component.ts
@@ -0,0 +1,20 @@
+import { Input, Inject, Component } from 'ng-forward';
+
+@Component({
+    selector: 'noosfero-block',
+    template: '<div></div>'
+})
+@Inject("$element", "$scope", "$injector", "$compile")
+export class Block {
+
+    @Input() block: any;
+    @Input() owner: any;
+
+    ngOnInit() {
+        let blockName = this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' block="ctrl.block" owner="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
+    }
+
+    constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
+    }
+}
@@ -1,24 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .directive('noosferoBlock', noosferoBlock);
-
-  /** @ngInject */
-  function noosferoBlock($compile) {
-    var directive = {
-      restrict: 'E',
-      scope: {
-          block: '<',
-          owner: '<'
-      },
-      link: function(scope, element) {
-        var blockName = scope.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        element.replaceWith($compile('<noosfero-'+blockName+' block="block" owner="owner"></noosfero-'+blockName+'>')(scope));
-      }
-    };
-    return directive;
-  }
-
-})();
@@ -4,7 +4,7 @@
       <h3 class="panel-title">{{block.title}}</h3>
     </div>
     <div class="panel-body">
-      <noosfero-block block="block" owner="ctrl.owner"></noosfero-block>
+      <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
     </div>
   </div>
 </div>
@@ -43,7 +43,6 @@ require(&quot;./components/auth/auth.service.js&quot;);
 require("./components/navbar/navbar.directive.js");
 require("./components/noosfero-activities/activities.component.js");
 require("./components/noosfero-activities/activity/activity.component.js");
-require("./components/noosfero-blocks/block.directive.js");
 require("./components/noosfero-blocks/link-list/link-list.component.js");
 require("./components/noosfero-blocks/main-block/main-block.component.js");
 require("./components/noosfero-blocks/members-block/members-block.component.js");
@@ -3,6 +3,7 @@ import {NoosferoArticleBlog} from &quot;./../components/noosfero-articles/blog/blog.c
 import {ArticleDirective} from "../components/noosfero-articles/article/article.directive.ts";
 import {Profile} from "../profile/profile.component";
 import {Boxes} from "../components/noosfero-boxes/boxes.component";
+import {Block} from "../components/noosfero-blocks/block.component";
 @Component({
     selector: 'main-content',
@@ -15,7 +16,7 @@ export class MainContent {
 @Component({
     selector: 'main',
     template: '<div ng-view></div>',
-    directives: [NoosferoArticleBlog, ArticleDirective, Boxes]
+    directives: [NoosferoArticleBlog, ArticleDirective, Boxes, Block]
 })
 @StateConfig([
     {
@@ -0,0 +1,20 @@		@@ -0,0 +1,20 @@
	1	+import { Input, Inject, Component } from 'ng-forward';
	2	+
	3	+@Component({
	4	+ selector: 'noosfero-block',
	5	+ template: '<div></div>'
	6	+})
	7	+@Inject("$element", "$scope", "$injector", "$compile")
	8	+export class Block {
	9	+
	10	+ @Input() block: any;
	11	+ @Input() owner: any;
	12	+
	13	+ ngOnInit() {
	14	+ let blockName = this.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
	15	+ this.$element.replaceWith(this.$compile('<noosfero-' + blockName + ' block="ctrl.block" owner="ctrl.owner"></noosfero-' + blockName + '>')(this.$scope));
	16	+ }
	17	+
	18	+ constructor(private $element: any, private $scope: ng.IScope, private $injector: ng.auto.IInjectorService, private $compile: ng.ICompileService) {
	19	+ }
	20	+}
	@@ -1,24 +0,0 @@	@@ -1,24 +0,0 @@
1	-(function() {
2	- 'use strict';
3	-
4	- angular
5	- .module('noosferoApp')
6	- .directive('noosferoBlock', noosferoBlock);
7	-
8	- /** @ngInject */
9	- function noosferoBlock($compile) {
10	- var directive = {
11	- restrict: 'E',
12	- scope: {
13	- block: '<',
14	- owner: '<'
15	- },
16	- link: function(scope, element) {
17	- var blockName = scope.block.type.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
18	- element.replaceWith($compile('<noosfero-'+blockName+' block="block" owner="owner"></noosfero-'+blockName+'>')(scope));
19	- }
20	- };
21	- return directive;
22	- }
23	-
24	-})();
	@@ -4,7 +4,7 @@		@@ -4,7 +4,7 @@
4	<h3 class="panel-title">{{block.title}}</h3>	4	<h3 class="panel-title">{{block.title}}</h3>
5	</div>	5	</div>
6	<div class="panel-body">	6	<div class="panel-body">
7	- <noosfero-block block="block" owner="ctrl.owner"></noosfero-block>	7	+ <noosfero-block [block]="block" [owner]="ctrl.owner"></noosfero-block>
8	</div>	8	</div>
9	</div>	9	</div>
10	</div>	10	</div>