feat(ng4): upgrade to angular 4

BREAKING CHANGE: angular 4.0 or higher is now required to use this library. The [upgrade](http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html) should be seamless for most users.
mattlewis92 · Mar 24, 2017 · 4c665d2 · 4c665d2
1 parent 997b2b6
commit 4c665d2
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 126 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ https://mattlewis92.github.io/angular-resizable-element/demo/
 
 ## About
 
-An angular 2.0+ directive that allows an element to be dragged and resized
+An angular 4.0+ directive that allows an element to be dragged and resized
 
 ## Installation
 

diff --git a/demo/index.html b/demo/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-    <title>angular 2.0+ resizable element</title>
+    <title>angular 4.0+ resizable element</title>
   </head>
   <body>
 
@@ -20,7 +20,7 @@
     <nav class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
-          <a class="navbar-brand" href="#">angular 2.0+ resizable element</a>
+          <a class="navbar-brand" href="#">angular 4.0+ resizable element</a>
         </div>
         <ul class="nav navbar-nav hidden-xs">
           <li><a href="#demo">Demo</a></li>

diff --git a/karma.conf.ts b/karma.conf.ts
@@ -23,10 +23,7 @@ export default function(config) {
 
     webpack: {
       resolve: {
-        extensions: ['.ts', '.js'],
-        alias: {
-          sinon: 'sinon/pkg/sinon'
-        }
+        extensions: ['.ts', '.js']
       },
       module: {
         rules: [{
@@ -42,9 +39,6 @@ export default function(config) {
           test: /\.ts$/,
           loader: 'ts-loader',
           exclude: /node_modules/
-        }, {
-          test: /sinon.js$/,
-          loader: 'imports-loader?define=>false,require=>false'
         }, {
           test: /src\/.+\.ts$/,
           exclude: /(node_modules|\.spec\.ts$)/,
@@ -58,7 +52,7 @@ export default function(config) {
           test: /\.(ts|js)($|\?)/i
         }),
         new webpack.ContextReplacementPlugin(
-          /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+          /angular(\\|\/)core(\\|\/)@angular/,
           __dirname + '/src'
         ),
         ...(config.singleRun ? [new webpack.NoEmitOnErrorsPlugin()] : [])
@@ -86,6 +80,11 @@ export default function(config) {
     phantomjsLauncher: {
       // Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
       exitOnResourceError: true
+    },
+
+    browserConsoleLogOptions: {
+      terminal: true,
+      level: 'log'
     }
 
   });

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-resizable-element",
   "version": "0.8.1",
-  "description": "An angular 2.0+ directive that allows an element to be dragged and resized",
+  "description": "An angular 4.0+ directive that allows an element to be dragged and resized",
   "main": "./dist/umd/angular-resizable-element.js",
   "module": "./dist/esm/src/index.js",
   "typings": "./dist/esm/src/index.d.ts",
@@ -30,6 +30,7 @@
   "keywords": [
     "angular",
     "angular2",
+    "angular4",
     "resizable"
   ],
   "author": "Matt Lewis",
@@ -39,14 +40,14 @@
   },
   "homepage": "https://github.com/mattlewis92/angular-resizable-element#readme",
   "devDependencies": {
-    "@angular/common": "^2.4.10",
-    "@angular/compiler": "^2.4.10",
-    "@angular/compiler-cli": "^2.4.10",
-    "@angular/core": "^2.4.10",
-    "@angular/platform-browser": "^2.4.10",
-    "@angular/platform-browser-dynamic": "^2.4.10",
+    "@angular/common": "^4.0.0",
+    "@angular/compiler": "^4.0.0",
+    "@angular/compiler-cli": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0",
+    "@angular/platform-browser-dynamic": "^4.0.0",
     "@types/chai": "^3.4.33",
-    "@types/jasmine": "2.5.36",
+    "@types/jasmine": "^2.5.46",
     "@types/sinon": "^1.16.36",
     "@types/sinon-chai": "^2.7.27",
     "@types/webpack": "^2.2.12",
@@ -58,7 +59,6 @@
     "core-js": "^2.4.1",
     "cz-conventional-changelog": "2.0.0",
     "husky": "^0.13.1",
-    "imports-loader": "^0.7.0",
     "istanbul-instrumenter-loader": "2.0.0",
     "jasmine-core": "^2.5.0",
     "karma": "^1.3.0",
@@ -76,7 +76,7 @@
     "ts-node": "^3.0.2",
     "tslint": "^4.2.0",
     "tslint-loader": "^3.3.0",
-    "typescript": "~2.0.3",
+    "typescript": "~2.2.1",
     "validate-commit-msg": "^2.8.0",
     "webpack": "^2.3.1",
     "webpack-angular-externals": "^1.0.2",
@@ -85,7 +85,7 @@
     "zone.js": "^0.8.5"
   },
   "peerDependencies": {
-    "@angular/core": ">=2.0.0 <5.0.0"
+    "@angular/core": "^4.0.0"
   },
   "files": [
     "dist"

diff --git a/src/pointerEventListeners.ts b/src/pointerEventListeners.ts
@@ -1,4 +1,4 @@
-import {Renderer, NgZone} from '@angular/core';
+import {Renderer2, NgZone} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {Observer} from 'rxjs/Observer';
 
@@ -18,24 +18,24 @@ export class PointerEventListeners {
 
   private static instance: PointerEventListeners; // tslint:disable-line
 
-  public static getInstance(renderer: Renderer, zone: NgZone): PointerEventListeners {
+  public static getInstance(renderer: Renderer2, zone: NgZone): PointerEventListeners {
     if (!PointerEventListeners.instance) {
       PointerEventListeners.instance = new PointerEventListeners(renderer, zone);
     }
     return PointerEventListeners.instance;
   }
 
-  constructor(renderer: Renderer, zone: NgZone) {
+  constructor(renderer: Renderer2, zone: NgZone) {
 
     zone.runOutsideAngular(() => {
 
       this.pointerDown = new Observable((observer: Observer<PointerEventCoordinate>) => {
 
-        const unsubscribeMouseDown: Function = renderer.listenGlobal('document', 'mousedown', (event: MouseEvent) => {
+        const unsubscribeMouseDown: Function = renderer.listen('document', 'mousedown', (event: MouseEvent) => {
           observer.next({clientX: event.clientX, clientY: event.clientY, event});
         });
 
-        const unsubscribeTouchStart: Function = renderer.listenGlobal('document', 'touchstart', (event: TouchEvent) => {
+        const unsubscribeTouchStart: Function = renderer.listen('document', 'touchstart', (event: TouchEvent) => {
           observer.next({clientX: event.touches[0].clientX, clientY: event.touches[0].clientY, event});
         });
 
@@ -48,11 +48,11 @@ export class PointerEventListeners {
 
       this.pointerMove = new Observable((observer: Observer<PointerEventCoordinate>) => {
 
-        const unsubscribeMouseMove: Function = renderer.listenGlobal('document', 'mousemove', (event: MouseEvent) => {
+        const unsubscribeMouseMove: Function = renderer.listen('document', 'mousemove', (event: MouseEvent) => {
           observer.next({clientX: event.clientX, clientY: event.clientY, event});
         });
 
-        const unsubscribeTouchMove: Function = renderer.listenGlobal('document', 'touchmove', (event: TouchEvent) => {
+        const unsubscribeTouchMove: Function = renderer.listen('document', 'touchmove', (event: TouchEvent) => {
           observer.next({clientX: event.targetTouches[0].clientX, clientY: event.targetTouches[0].clientY, event});
         });
 
@@ -65,15 +65,15 @@ export class PointerEventListeners {
 
       this.pointerUp = new Observable((observer: Observer<PointerEventCoordinate>) => {
 
-        const unsubscribeMouseUp: Function = renderer.listenGlobal('document', 'mouseup', (event: MouseEvent) => {
+        const unsubscribeMouseUp: Function = renderer.listen('document', 'mouseup', (event: MouseEvent) => {
           observer.next({clientX: event.clientX, clientY: event.clientY, event});
         });
 
-        const unsubscribeTouchEnd: Function = renderer.listenGlobal('document', 'touchend', (event: TouchEvent) => {
+        const unsubscribeTouchEnd: Function = renderer.listen('document', 'touchend', (event: TouchEvent) => {
           observer.next({clientX: event.changedTouches[0].clientX, clientY: event.changedTouches[0].clientY, event});
         });
 
-        const unsubscribeTouchCancel: Function = renderer.listenGlobal('document', 'touchcancel', (event: TouchEvent) => {
+        const unsubscribeTouchCancel: Function = renderer.listen('document', 'touchcancel', (event: TouchEvent) => {
           observer.next({clientX: event.changedTouches[0].clientX, clientY: event.changedTouches[0].clientY, event});
         });
 

diff --git a/src/resizable.directive.ts b/src/resizable.directive.ts
@@ -1,6 +1,6 @@
 import {
   Directive,
-  Renderer,
+  Renderer2,
   ElementRef,
   OnInit,
   AfterViewInit,
@@ -244,17 +244,17 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
   /**
    * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
    */
-  @Output() resizeStart: EventEmitter<Object> = new EventEmitter(false);
+  @Output() resizeStart: EventEmitter<Object> = new EventEmitter();
 
   /**
    * Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
    */
-  @Output() resizing: EventEmitter<Object> = new EventEmitter(false);
+  @Output() resizing: EventEmitter<Object> = new EventEmitter();
 
   /**
    * Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
    */
-  @Output() resizeEnd: EventEmitter<Object> = new EventEmitter(false);
+  @Output() resizeEnd: EventEmitter<Object> = new EventEmitter();
 
   /**
    * @private
@@ -284,7 +284,7 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
    * @private
    */
   constructor(
-    private renderer: Renderer,
+    private renderer: Renderer2,
     public elm: ElementRef,
     private zone: NgZone
   ) {
@@ -319,7 +319,7 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
     const removeGhostElement: Function = (): void => {
       if (currentResize.clonedNode) {
         this.elm.nativeElement.parentElement.removeChild(currentResize.clonedNode);
-        this.renderer.setElementStyle(this.elm.nativeElement, 'visibility', 'inherit');
+        this.renderer.setStyle(this.elm.nativeElement, 'visibility', 'inherit');
       }
     };
 
@@ -342,12 +342,12 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
       const resizeCursors: ResizeCursors = Object.assign({}, DEFAULT_RESIZE_CURSORS, this.resizeCursors);
       const cursor: string = currentResize ? null : getResizeCursor(resizeEdges, resizeCursors);
 
-      this.renderer.setElementStyle(this.elm.nativeElement, 'cursor', cursor);
-      this.renderer.setElementClass(this.elm.nativeElement, RESIZE_ACTIVE_CLASS, !!currentResize);
-      this.renderer.setElementClass(this.elm.nativeElement, RESIZE_LEFT_HOVER_CLASS, resizeEdges.left === true);
-      this.renderer.setElementClass(this.elm.nativeElement, RESIZE_RIGHT_HOVER_CLASS, resizeEdges.right === true);
-      this.renderer.setElementClass(this.elm.nativeElement, RESIZE_TOP_HOVER_CLASS, resizeEdges.top === true);
-      this.renderer.setElementClass(this.elm.nativeElement, RESIZE_BOTTOM_HOVER_CLASS, resizeEdges.bottom === true);
+      this.renderer.setStyle(this.elm.nativeElement, 'cursor', cursor);
+      this.setElementClass(this.elm, RESIZE_ACTIVE_CLASS, !!currentResize);
+      this.setElementClass(this.elm, RESIZE_LEFT_HOVER_CLASS, resizeEdges.left === true);
+      this.setElementClass(this.elm, RESIZE_RIGHT_HOVER_CLASS, resizeEdges.right === true);
+      this.setElementClass(this.elm, RESIZE_TOP_HOVER_CLASS, resizeEdges.top === true);
+      this.setElementClass(this.elm, RESIZE_BOTTOM_HOVER_CLASS, resizeEdges.bottom === true);
 
     });
 
@@ -430,10 +430,10 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
     }).subscribe((newBoundingRect: BoundingRectangle) => {
 
       if (currentResize.clonedNode) {
-        this.renderer.setElementStyle(currentResize.clonedNode, 'height', `${newBoundingRect.height}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'width', `${newBoundingRect.width}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'top', `${newBoundingRect.top}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'left', `${newBoundingRect.left}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'height', `${newBoundingRect.height}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'width', `${newBoundingRect.width}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'top', `${newBoundingRect.top}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'left', `${newBoundingRect.left}px`);
       }
 
       this.zone.run(() => {
@@ -474,13 +474,13 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
         currentResize.clonedNode = this.elm.nativeElement.cloneNode(true);
         const resizeCursors: ResizeCursors = Object.assign({}, DEFAULT_RESIZE_CURSORS, this.resizeCursors);
         this.elm.nativeElement.parentElement.appendChild(currentResize.clonedNode);
-        this.renderer.setElementStyle(this.elm.nativeElement, 'visibility', 'hidden');
-        this.renderer.setElementStyle(currentResize.clonedNode, 'position', this.ghostElementPositioning);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'left', `${currentResize.startingRect.left}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'top', `${currentResize.startingRect.top}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'height', `${currentResize.startingRect.height}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'width', `${currentResize.startingRect.width}px`);
-        this.renderer.setElementStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
+        this.renderer.setStyle(this.elm.nativeElement, 'visibility', 'hidden');
+        this.renderer.setStyle(currentResize.clonedNode, 'position', this.ghostElementPositioning);
+        this.renderer.setStyle(currentResize.clonedNode, 'left', `${currentResize.startingRect.left}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'top', `${currentResize.startingRect.top}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'height', `${currentResize.startingRect.height}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'width', `${currentResize.startingRect.width}px`);
+        this.renderer.setStyle(currentResize.clonedNode, 'cursor', getResizeCursor(currentResize.edges, resizeCursors));
       }
       this.zone.run(() => {
         this.resizeStart.emit({
@@ -492,7 +492,7 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
 
     this.mouseup.subscribe(() => {
       if (currentResize) {
-        this.renderer.setElementClass(this.elm.nativeElement, RESIZE_ACTIVE_CLASS, false);
+        this.renderer.removeClass(this.elm.nativeElement, RESIZE_ACTIVE_CLASS);
         this.zone.run(() => {
           this.resizeEnd.emit({
             edges: getEdgesDiff({
@@ -531,4 +531,12 @@ export class Resizable implements OnInit, OnDestroy, AfterViewInit {
     this.pointerEventListenerSubscriptions.pointerUp.unsubscribe();
   }
 
+  private setElementClass(elm: ElementRef, name: string, add: boolean): void {
+    if (add) {
+      this.renderer.addClass(elm.nativeElement, name);
+    } else {
+      this.renderer.removeClass(elm.nativeElement, name);
+    }
+  }
+
 }
diff --git a/src/resizeHandle.directive.ts b/src/resizeHandle.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Input, HostListener, Renderer, ElementRef, OnDestroy, NgZone } from '@angular/core';
+import { Directive, Input, HostListener, Renderer2, ElementRef, OnDestroy, NgZone } from '@angular/core';
 import { Resizable } from './resizable.directive';
 import { Edges } from './interfaces/edges.interface';
 
@@ -33,7 +33,7 @@ export class ResizeHandle implements OnDestroy {
     mousemove?: Function
   } = {};
 
-  constructor(private renderer: Renderer, private element: ElementRef, private zone: NgZone) {}
+  constructor(private renderer: Renderer2, private element: ElementRef, private zone: NgZone) {}
 
   ngOnDestroy(): void {
     this.unsubscribeEventListeners();

diff --git a/webpack.config.ts b/webpack.config.ts
@@ -36,7 +36,7 @@ export default {
       ENV: JSON.stringify(IS_PROD ? 'production' : 'development')
     }),
     new webpack.ContextReplacementPlugin(
-      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+      /angular(\\|\/)core(\\|\/)@angular/,
       __dirname + '/src'
     )
   ]