Merge pull request #11 from CoderAjay/development

Development

Author: ajaysinghj8

.gitignore

@@ -16,4 +16,5 @@ typings/*
 
 dist/*
 **/*.js
+**/*.js.map
 **/*.d.ts

.npmignore

@@ -0,0 +1,38 @@
+make.js
+# compiled output
+/.tmp
+/src
+
+/Architecture.md
+# dependencies
+/node_modules
+/bower_components
+
+# IDEs and editors
+/.idea
+/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+tslint.json
+.editorconfig
+
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db

package.json

@@ -1,18 +1,14 @@
 {
   "name": "ng2-draggable",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "Angular2 directive draggable.",
-  "main": "dist/ng-draggable.js",
-  "typings": "ng2-draggable.d.ts",
+  "main": "dist/draggable.module.js",
+  "typings": "dist/draggable.module.d.ts",
   "scripts": {
-    "task.compile:system": "./.config/bundle.js",
-    "task.compile:common": "./node_modules/.bin/tsc -p tsconfig.publish.json",
-    "task.compile": "npm run task.compile:common && npm run task.compile:system",
-    "task.clean": "./node_modules/.bin/del dist \"ng2-draggable.+(js|d.ts|js.map)\"",
-    "prepublish": "npm run task.clean && npm run task.compile",
-    "lite": "lite-server",
-    "start": "concurrently \"npm run ;tsc:w\" \"npm run lite\" ",
-    "tsc:w": "tsc -w"
+    "compile": "node ./node_modules/@angular/compiler-cli/src/main.js -p src/",
+    "prepublish": "npm run clean &&  npm run compile && rm -rf dist/node_modules && npm run build",
+    "clean": "rm -rf dist && rm -rf bundles",
+    "build": "node make.js"
   },
   "repository": {
     "type": "git",
@@ -33,28 +29,19 @@
   "homepage": "https://github.com/CoderAjay/ng2Draggable#readme",
   "dependencies": {},
   "peerDependencies": {
-    "@angular/common": "~2.2.0",
-    "@angular/compiler": "~2.2.0",
-    "@angular/core": "~2.2.0"
+    "@angular/core": "^2.4.10",
+    "rxjs": "^5.0.0-beta.12",
+    "zone.js": "^0.6.23"
   },
   "devDependencies": {
-    "@angular/common": "~2.2.0",
-    "@angular/compiler": "~2.2.0",
-    "@angular/core": "~2.2.0",
-    "@angular/platform-browser": "~2.2.0",
-    "@angular/platform-browser-dynamic": "~2.2.0",
-    "core-js": "^2.4.1",
-    "reflect-metadata": "^0.1.8",
-    "rxjs": "5.0.0-beta.12",
-    "systemjs": "0.19.39",
-    "zone.js": "^0.6.25",
-    "@types/core-js": "^0.9.34",
-    "@types/node": "^6.0.45",
-    "concurrently": "^3.0.0",
-    "del": "^2.2.2",
-    "del-cli": "^0.2.0",
-    "lite-server": "^2.2.2",
-    "systemjs-builder": "^0.15.34",
-    "typescript": "^2.0.3"
+    "@angular/common": "^2.4.10",
+    "@angular/compiler": "^2.4.10",
+    "@angular/compiler-cli": "^2.4.10",
+    "@angular/core": "^2.4.10",
+    "rxjs": "^5.0.0-beta.12",
+    "systemjs-builder": "^0.16.4",
+    "tslint": "3.13.0",
+    "typescript": "~2.0.3",
+    "zone.js": "^0.6.23"
   }
 }

ng2-draggable.ts src/draggable.directive.tsng2-draggable.ts renamed to src/draggable.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, Renderer, OnDestroy, OnInit } from '@angular/core';
+import { Directive, ElementRef, Renderer, OnDestroy, OnInit, AfterViewInit, Input } from '@angular/core';
 
 
 @Directive({
@@ -9,55 +9,60 @@ import { Directive, ElementRef, Renderer, OnDestroy, OnInit } from '@angular/cor
     '(drag)': 'onDrag($event)'
   }
 })
-export class Draggable implements OnDestroy, OnInit {
+export class DraggableDirecrtive implements OnDestroy, OnInit, AfterViewInit {
   private Δx: number = 0;
   private Δy: number = 0;
+  
+  private canDrag:boolean = true;
+  
+  @Input('draggable')
+  set draggable(val:any){
+    if(val === undefined || val === null || val === '' ) return;
+    this.canDrag = !!val;
+  }
   private mustBePosition: Array<string> = ['absolute', 'fixed', 'relative'];
   constructor(
     private el: ElementRef, private renderer: Renderer
   ) {
+    
+  }
+  
+  ngOnInit(): void {
+    this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'true');
+  }
+  ngAfterViewInit(){
     try {
-      if (this.mustBePosition.indexOf(this.el.nativeElement.style.position) === -1) {
-        console.warn(this.el.nativeElement, 'Must be having position attribute set to ' + this.mustBePosition.join('|'));
+      let position = window.getComputedStyle(this.el.nativeElement).position;
+      if (this.mustBePosition.indexOf(position) === -1) {
+        console.warn( this.el.nativeElement, 'Must be having position attribute set to ' + this.mustBePosition.join('|'));
       }
     } catch (ex) {
       console.error(ex);
     }
   }
-  public ngOnInit(): void {
-    this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'true');
+  ngOnDestroy(): void {
+    this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'false');
   }
+  
   onDragStart(event: MouseEvent) {
     this.Δx = event.x - this.el.nativeElement.offsetLeft;
     this.Δy = event.y - this.el.nativeElement.offsetTop;
   }
+
   onDrag(event: MouseEvent) {
     this.doTranslation(event.x, event.y);
   }
+
   onDragEnd(event: MouseEvent) {
     this.Δx = 0;
     this.Δy = 0;
   }
+
   doTranslation(x: number, y: number) {
     if (!x || !y) return;
     this.renderer.setElementStyle(this.el.nativeElement, 'top', (y - this.Δy) + 'px');
     this.renderer.setElementStyle(this.el.nativeElement, 'left', (x - this.Δx) + 'px');
   }
-  public ngOnDestroy(): void {
-    this.renderer.setElementAttribute(this.el.nativeElement, 'draggable', 'false');
-  }
-
-}
+  
 
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-
-const DRAGGABLE_DIRECTIVES: any[] = [Draggable];
-
-@NgModule({
-  imports: [CommonModule],
-  exports: DRAGGABLE_DIRECTIVES,
-  declarations: DRAGGABLE_DIRECTIVES
-})
-export class DraggableModule { }
+}

src/draggable.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { DraggableDirecrtive } from './draggable.directive'; 
+@NgModule({
+  imports: [],
+  declarations: [ DraggableDirecrtive ],
+  exports: [ DraggableDirecrtive ],
+  providers: []
+})
+export class Ng2DraggableModule { }

src/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "module": "commonjs",
+    "target": "es5",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "declaration": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "removeComments": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "outDir": "../dist",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  },
+  "exclude": [
+    "../node_modules",
+    "../dist"
+  ],
+  "awesomeTypescriptLoaderOptions": {
+    "forkChecker": true,
+    "useWebpackText": true
+  },
+  "angularCompilerOptions": {
+    "genDir": "../dist",
+    "debug": false
+  }
+}