@wildebeest/drag - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

dist/DragableComponent.js

@@ -22,2 +22,7 @@ "use strict";
             window.removeEventListener('mousemove', _this.onMove.bind(_this));
+            _this.emitter.emit('wbDragended', {
+                vertical: 0,
+                horizontal: 0,
+                mouseEvent: event
+            });
         });
@@ -32,3 +37,4 @@ }
             vertical: event.clientY - this.mousePosition.clientY,
-            horizontal: event.clientX - this.mousePosition.clientX
+            horizontal: event.clientX - this.mousePosition.clientX,
+            mouseEvent: event
         };
@@ -35,0 +41,0 @@ this.mousePosition = event;

package.json

 {
   "name": "@wildebeest/drag",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Draging event module",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,1 +0,66 @@
-# js-modules
+# Drag Module
+
+Add drag event to DOM elements. Drag event is triggered when user moves the mouse, while holding down left mouse button.
+
+## Installation
+
+```sh
+npm install --save @wildebeest/drag
+```
+
+## Requirements
+
+It's usefull to know these libraries:
+
+* inversify
+* @wildebeest/js-modules
+
+## Bind Element To Dragable Component
+
+Making element to emit `wbDrag` and `wbDragended` events, requires creating new instance of class `DragableComponent`.
+
+```ts
+foo(emitterService: EmitterService): void
+{
+    let element: any = document.querySelector('.dragable');
+    let dragable: DragableComponent = new DragableComponent(element, emitterService.createEmitter());
+}
+```
+
+In our example we used `.dragable` selector to select DOM element and then create `DragableComponent`, that will listen to specific changes on this element. If it finds a drag, it will emit drag event.
+
+## Listen To Drag Event
+
+Drag event is called `wbDrag` and the event contains three values `horizontal` and `vertical` movement difference after last movement. `mouseEvent`, which is the original `MouseEvent`.
+
+```ts
+foo(emitterService: EmitterService): void
+{
+    let element: any = document.querySelector('.dragable');
+    let dragable: DragableComponent = new DragableComponent(element, emitterService.createEmitter());
+
+    dragable.getEmitter().on('wbDrag' (data: any) => {
+        let verticalMovement: number = data.vertical;
+        let horizontalMovement: number = data.horizontal;
+        let originalEvent: MouseEvent = data.mouseEvent;
+    });
+}
+```
+
+## Listen To Dragended Event
+
+Dragended event is called `wbDrag` and the event contains three values `horizontal` and `vertical` movement difference after last movement. In this case, those values will be `0`. And `mouseEvent`, which is the original `MouseEvent`.
+
+```ts
+foo(emitterService: EmitterService): void
+{
+    let element: any = document.querySelector('.dragable');
+    let dragable: DragableComponent = new DragableComponent(element, emitterService.createEmitter());
+
+    dragable.getEmitter().on('wbDragended' (data: any) => {
+        let verticalMovement: number = data.vertical;
+        let horizontalMovement: number = data.horizontal;
+        let originalEvent: MouseEvent = data.mouseEvent;
+    });
+}
+```

src/DragableComponent.ts

@@ -30,2 +30,7 @@ import { Emitter } from "@wildebeest/common";
             window.removeEventListener('mousemove', this.onMove.bind(this));
+            this.emitter.emit('wbDragended', {
+                vertical: 0,
+                horizontal: 0,
+                mouseEvent: event
+            });
         });
@@ -42,3 +47,4 @@ }
             vertical: event.clientY - this.mousePosition.clientY,
-            horizontal: event.clientX - this.mousePosition.clientX
+            horizontal: event.clientX - this.mousePosition.clientX,
+            mouseEvent: event
         };
@@ -45,0 +51,0 @@ this.mousePosition = event;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19783

increased by29.67%

Lines of code

346

increased by21.83%

Number of lines in readme file

66

increased by6500%

No dependency changes