Skip to content

Commit 42631bc

Browse files
author
Matt Lewis
committed
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
1 parent 5897dc9 commit 42631bc

8 files changed

+67
-66
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# angular 2.0+ drag and drop
1+
# angular 4.0+ drag and drop
22
[![Build Status](https://travis-ci.org/mattlewis92/angular-draggable-droppable.svg?branch=master)](https://travis-ci.org/mattlewis92/angular-draggable-droppable)
33
[![codecov](https://codecov.io/gh/mattlewis92/angular-draggable-droppable/branch/master/graph/badge.svg)](https://codecov.io/gh/mattlewis92/angular-draggable-droppable)
44
[![npm version](https://badge.fury.io/js/angular-draggable-droppable.svg)](http://badge.fury.io/js/angular-draggable-droppable)
@@ -20,7 +20,7 @@ https://mattlewis92.github.io/angular-draggable-droppable/demo/
2020

2121
## About
2222

23-
Observable powered drag and drop for angular 2.0+
23+
Observable powered drag and drop for angular 4.0+
2424

2525
## Installation
2626

‎demo/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<meta http-equiv="x-ua-compatible" content="ie=edge">
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
8-
<title>angular 2.0+ drag and drop</title>
8+
<title>angular 4.0+ drag and drop</title>
99
</head>
1010
<body>
1111

@@ -20,7 +20,7 @@
2020
<nav class="navbar navbar-default" role="navigation">
2121
<div class="container-fluid">
2222
<div class="navbar-header">
23-
<a class="navbar-brand" href="#">angular 2.0+ drag and drop</a>
23+
<a class="navbar-brand" href="#">angular 4.0+ drag and drop</a>
2424
</div>
2525
<ul class="nav navbar-nav hidden-xs">
2626
<li><a href="#demo">Demo</a></li>

‎karma.conf.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function(config) {
5252
test: /\.(ts|js)($|\?)/i
5353
}),
5454
new webpack.ContextReplacementPlugin(
55-
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
55+
/angular(\\|\/)core(\\|\/)@angular/,
5656
__dirname + '/src'
5757
),
5858
...(config.singleRun ? [new webpack.NoEmitOnErrorsPlugin()] : [])

‎package.json

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "angular-draggable-droppable",
33
"version": "0.6.0",
4-
"description": "Drag and drop for angular 2.0+",
4+
"description": "Drag and drop for angular 4.0+",
55
"main": "./dist/umd/angular-draggable-droppable.js",
66
"module": "./dist/esm/src/index.js",
77
"typings": "./dist/esm/src/index.d.ts",
@@ -29,6 +29,7 @@
2929
},
3030
"keywords": [
3131
"angular2",
32+
"angular4",
3233
"angular",
3334
"draggable",
3435
"droppable",
@@ -42,14 +43,14 @@
4243
},
4344
"homepage": "https://github.com/mattlewis92/angular-draggable-droppable#readme",
4445
"devDependencies": {
45-
"@angular/common": "^2.2.0",
46-
"@angular/compiler": "^2.2.0",
47-
"@angular/compiler-cli": "^2.2.0",
48-
"@angular/core": "^2.2.0",
49-
"@angular/platform-browser": "^2.2.0",
50-
"@angular/platform-browser-dynamic": "^2.2.0",
46+
"@angular/common": "^4.0.0",
47+
"@angular/compiler": "^4.0.0",
48+
"@angular/compiler-cli": "^4.0.0",
49+
"@angular/core": "^4.0.0",
50+
"@angular/platform-browser": "^4.0.0",
51+
"@angular/platform-browser-dynamic": "^4.0.0",
5152
"@types/chai": "^3.4.30",
52-
"@types/jasmine": "2.2.33",
53+
"@types/jasmine": "^2.5.46",
5354
"@types/node": "^7.0.10",
5455
"@types/sinon": "^1.16.27",
5556
"@types/sinon-chai": "^2.7.26",
@@ -79,7 +80,7 @@
7980
"ts-node": "^3.0.2",
8081
"tslint": "^4.0.2",
8182
"tslint-loader": "^3.2.0",
82-
"typescript": "~2.0.3",
83+
"typescript": "~2.2.1",
8384
"validate-commit-msg": "^2.8.0",
8485
"webpack": "^2.3.1",
8586
"webpack-angular-externals": "^1.0.2",
@@ -88,7 +89,7 @@
8889
"zone.js": "^0.8.5"
8990
},
9091
"peerDependencies": {
91-
"@angular/core": ">=2.0.0 <5.0.0"
92+
"@angular/core": "^4.0.0"
9293
},
9394
"files": [
9495
"dist"

‎src/draggable.directive.ts

+15-15
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
Directive,
33
OnInit,
44
ElementRef,
5-
Renderer,
5+
Renderer2,
66
Output,
77
EventEmitter,
88
Input,
@@ -92,7 +92,7 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
9292
*/
9393
constructor(
9494
public element: ElementRef,
95-
private renderer: Renderer,
95+
private renderer: Renderer2,
9696
private draggableHelper: DraggableHelper,
9797
private zone: NgZone
9898
) {}
@@ -163,7 +163,7 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
163163
currentDrag.complete();
164164
this.setCssTransform(null);
165165
if (this.ghostDragEnabled) {
166-
this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', null);
166+
this.renderer.setStyle(this.element.nativeElement, 'pointerEvents', null);
167167
}
168168
});
169169

@@ -189,7 +189,7 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
189189
this.dragging.next({x, y});
190190
});
191191
if (this.ghostDragEnabled) {
192-
this.renderer.setElementStyle(this.element.nativeElement, 'pointerEvents', 'none');
192+
this.renderer.setStyle(this.element.nativeElement, 'pointerEvents', 'none');
193193
}
194194
this.setCssTransform(`translate(${x}px, ${y}px)`);
195195
currentDrag.next({
@@ -227,19 +227,19 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
227227
this.onMouseDown(event);
228228
});
229229

230-
this.eventListenerSubscriptions.mouseup = this.renderer.listenGlobal('document', 'mouseup', (event: MouseEvent) => {
230+
this.eventListenerSubscriptions.mouseup = this.renderer.listen('document', 'mouseup', (event: MouseEvent) => {
231231
this.onMouseUp(event);
232232
});
233233

234234
this.eventListenerSubscriptions.touchstart = this.renderer.listen(this.element.nativeElement, 'touchstart', (event: TouchEvent) => {
235235
this.onTouchStart(event);
236236
});
237237

238-
this.eventListenerSubscriptions.touchend = this.renderer.listenGlobal('document', 'touchend', (event: TouchEvent) => {
238+
this.eventListenerSubscriptions.touchend = this.renderer.listen('document', 'touchend', (event: TouchEvent) => {
239239
this.onTouchEnd(event);
240240
});
241241

242-
this.eventListenerSubscriptions.touchcancel = this.renderer.listenGlobal('document', 'touchcancel', (event: TouchEvent) => {
242+
this.eventListenerSubscriptions.touchcancel = this.renderer.listen('document', 'touchcancel', (event: TouchEvent) => {
243243
this.onTouchEnd(event);
244244
});
245245

@@ -261,7 +261,7 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
261261

262262
private onMouseDown(event: MouseEvent): void {
263263
if (!this.eventListenerSubscriptions.mousemove) {
264-
this.eventListenerSubscriptions.mousemove = this.renderer.listenGlobal('document', 'mousemove', (event: MouseEvent) => {
264+
this.eventListenerSubscriptions.mousemove = this.renderer.listen('document', 'mousemove', (event: MouseEvent) => {
265265
this.pointerMove.next({event, clientX: event.clientX, clientY: event.clientY});
266266
});
267267
}
@@ -278,7 +278,7 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
278278

279279
private onTouchStart(event: TouchEvent): void {
280280
if (!this.eventListenerSubscriptions.touchmove) {
281-
this.eventListenerSubscriptions.touchmove = this.renderer.listenGlobal('document', 'touchmove', (event: TouchEvent) => {
281+
this.eventListenerSubscriptions.touchmove = this.renderer.listen('document', 'touchmove', (event: TouchEvent) => {
282282
this.pointerMove.next({event, clientX: event.targetTouches[0].clientX, clientY: event.targetTouches[0].clientY});
283283
});
284284
}
@@ -303,11 +303,11 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
303303

304304
private setCssTransform(value: string): void {
305305
if (this.ghostDragEnabled) {
306-
this.renderer.setElementStyle(this.element.nativeElement, 'transform', value);
307-
this.renderer.setElementStyle(this.element.nativeElement, '-webkit-transform', value);
308-
this.renderer.setElementStyle(this.element.nativeElement, '-ms-transform', value);
309-
this.renderer.setElementStyle(this.element.nativeElement, '-moz-transform', value);
310-
this.renderer.setElementStyle(this.element.nativeElement, '-o-transform', value);
306+
this.renderer.setStyle(this.element.nativeElement, 'transform', value);
307+
this.renderer.setStyle(this.element.nativeElement, '-webkit-transform', value);
308+
this.renderer.setStyle(this.element.nativeElement, '-ms-transform', value);
309+
this.renderer.setStyle(this.element.nativeElement, '-moz-transform', value);
310+
this.renderer.setStyle(this.element.nativeElement, '-o-transform', value);
311311
}
312312
}
313313

@@ -316,7 +316,7 @@ export class Draggable implements OnInit, OnChanges, OnDestroy {
316316
}
317317

318318
private setCursor(value: string): void {
319-
this.renderer.setElementStyle(this.element.nativeElement, 'cursor', value);
319+
this.renderer.setStyle(this.element.nativeElement, 'cursor', value);
320320
}
321321

322322
private unsubscribeEventListeners(): void {

‎test/draggable.directive.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ describe('draggable directive', () => {
6464
expect(draggableElement.style.transform).to.equal('translate(2px, -2px)');
6565
triggerDomEvent('mouseup', draggableElement, {clientX: 7, clientY: 8});
6666
expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 2, y: -2});
67-
expect(draggableElement.style.transform).to.equal('');
67+
expect(draggableElement.style.transform).not.to.be.ok;
6868
});
6969

7070
it('should end the pointerUp observable when the component is destroyed', () => {
@@ -271,7 +271,7 @@ describe('draggable directive', () => {
271271
expect(draggableElement.style.transform).to.equal('translate(2px, -2px)');
272272
triggerDomEvent('touchend', draggableElement, {changedTouches: [{clientX: 7, clientY: 8}]});
273273
expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 2, y: -2});
274-
expect(draggableElement.style.transform).to.equal('');
274+
expect(draggableElement.style.transform).not.to.be.ok;
275275
});
276276

277277
it('should work use the touch cancel event to end the drag', () => {
@@ -286,7 +286,7 @@ describe('draggable directive', () => {
286286
expect(draggableElement.style.transform).to.equal('translate(2px, -2px)');
287287
triggerDomEvent('touchcancel', draggableElement, {changedTouches: [{clientX: 7, clientY: 8}]});
288288
expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({x: 2, y: -2});
289-
expect(draggableElement.style.transform).to.equal('');
289+
expect(draggableElement.style.transform).not.to.be.ok;
290290
});
291291

292292
it('should only unregister the touch move listener if it exists', () => {

‎webpack.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default {
3737
ENV: JSON.stringify(IS_PROD ? 'production' : 'development')
3838
}),
3939
new webpack.ContextReplacementPlugin(
40-
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
40+
/angular(\\|\/)core(\\|\/)@angular/,
4141
__dirname + '/src'
4242
)
4343
]

‎yarn.lock

+32-32
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,39 @@
22
# yarn lockfile v1
33

44

5-
"@angular/common@^2.2.0":
6-
version "2.4.10"
7-
resolved "https://registry.yarnpkg.com/@angular/common/-/common-2.4.10.tgz#a3a682d2228fa30ec23dd0eb57c8e887fba26997"
5+
"@angular/common@^4.0.0":
6+
version "4.0.0"
7+
resolved "https://registry.yarnpkg.com/@angular/common/-/common-4.0.0.tgz#ca18983222fdab4ecaa7a8b99eda6ff661e6dc92"
88

9-
"@angular/compiler-cli@^2.2.0":
10-
version "2.4.10"
11-
resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-2.4.10.tgz#c21143bfaab45231c8d2eaa82456bed3d39f91a3"
9+
"@angular/compiler-cli@^4.0.0":
10+
version "4.0.0"
11+
resolved "https://registry.yarnpkg.com/@angular/compiler-cli/-/compiler-cli-4.0.0.tgz#35b2d40cd35135aecec4be659532148f5ac67da6"
1212
dependencies:
13-
"@angular/tsc-wrapped" "0.5.2"
13+
"@angular/tsc-wrapped" "4.0.0"
1414
minimist "^1.2.0"
1515
reflect-metadata "^0.1.2"
1616

17-
"@angular/compiler@^2.2.0":
18-
version "2.4.10"
19-
resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-2.4.10.tgz#f51fd34820b2a02c7cb61fbcf49873c58056fb0c"
17+
"@angular/compiler@^4.0.0":
18+
version "4.0.0"
19+
resolved "https://registry.yarnpkg.com/@angular/compiler/-/compiler-4.0.0.tgz#e1aa061a6f8ef269f9748af1a7bc290f9d37ed6c"
2020

21-
"@angular/core@^2.2.0":
22-
version "2.4.10"
23-
resolved "https://registry.yarnpkg.com/@angular/core/-/core-2.4.10.tgz#0b8320a65065965d998645b1f5cd3cf769b441ea"
21+
"@angular/core@^4.0.0":
22+
version "4.0.0"
23+
resolved "https://registry.yarnpkg.com/@angular/core/-/core-4.0.0.tgz#fd877e074b29dfa9c63b96a21995fc7556d423a3"
2424

25-
"@angular/platform-browser-dynamic@^2.2.0":
26-
version "2.4.10"
27-
resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.4.10.tgz#8df25dec2b06adc690cc9bc26448deccaebcd8ec"
25+
"@angular/platform-browser-dynamic@^4.0.0":
26+
version "4.0.0"
27+
resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.0.0.tgz#d1d9de80fe1e02735be89f512e0faf5a80d57fa5"
2828

29-
"@angular/platform-browser@^2.2.0":
30-
version "2.4.10"
31-
resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-2.4.10.tgz#cbf25608148fb4ffef96cc5005ba5d7b3e093906"
29+
"@angular/platform-browser@^4.0.0":
30+
version "4.0.0"
31+
resolved "https://registry.yarnpkg.com/@angular/platform-browser/-/platform-browser-4.0.0.tgz#512ae9ab19ccc25fa79027f44e291bcee236cd2b"
3232

33-
"@angular/tsc-wrapped@0.5.2":
34-
version "0.5.2"
35-
resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-0.5.2.tgz#2eddf472c467fcb334ea94deddaaa71990c5a482"
33+
"@angular/tsc-wrapped@4.0.0":
34+
version "4.0.0"
35+
resolved "https://registry.yarnpkg.com/@angular/tsc-wrapped/-/tsc-wrapped-4.0.0.tgz#ea91eeda98029cdb0a4ac37d5e25d9d12a4333c1"
3636
dependencies:
37-
tsickle "^0.2"
37+
tsickle "^0.21.0"
3838

3939
"@compodoc/[email protected]", "@compodoc/ngd-core@^2.0.0-alpha.1":
4040
version "2.0.0-alpha.1"
@@ -56,9 +56,9 @@
5656
version "3.4.35"
5757
resolved "https://registry.yarnpkg.com/@types/chai/-/chai-3.4.35.tgz#e8d65f83492d2944f816fc620741821c28a8c900"
5858

59-
"@types/jasmine@2.2.33":
60-
version "2.2.33"
61-
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.2.33.tgz#4715cfd2ca7fbd632fc7f1784f13e637bed028c5"
59+
"@types/jasmine@^2.5.46":
60+
version "2.5.46"
61+
resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.5.46.tgz#bb3047a3f40f60dee03f52c3e2d955cd3d5066c8"
6262

6363
"@types/node@*", "@types/node@^7.0.10":
6464
version "7.0.10"
@@ -4639,9 +4639,9 @@ tsconfig@^6.0.0:
46394639
strip-bom "^3.0.0"
46404640
strip-json-comments "^2.0.0"
46414641

4642-
tsickle@^0.2:
4643-
version "0.2.6"
4644-
resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.2.6.tgz#ad4abf92e74ebdf3fb5aa187ca85b02066fe1a1b"
4642+
tsickle@^0.21.0:
4643+
version "0.21.6"
4644+
resolved "https://registry.yarnpkg.com/tsickle/-/tsickle-0.21.6.tgz#53b01b979c5c13fdb13afb3fb958177e5991588d"
46454645
dependencies:
46464646
minimist "^1.2.0"
46474647
mkdirp "^0.5.1"
@@ -4721,9 +4721,9 @@ [email protected]:
47214721
version "2.2.0"
47224722
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.0.tgz#626f2fc70087d2480f21ebb12c1888288c8614e3"
47234723

4724-
typescript@~2.0.3:
4725-
version "2.0.10"
4726-
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.0.10.tgz#ccdd4ed86fd5550a407101a0814012e1b3fac3dd"
4724+
typescript@~2.2.1:
4725+
version "2.2.1"
4726+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.2.1.tgz#4862b662b988a4c8ff691cc7969622d24db76ae9"
47274727

47284728
uglify-js@^2.6, uglify-js@^2.8.5:
47294729
version "2.8.15"

0 commit comments

Comments
 (0)