pure-upload - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

CHANGELOG.md

 CHANGELOG
 ===
+4.2.0
+--
+Added highlighting on dnd.
+
 4.1.0
@@ -4,0 +8,0 @@ --

index.js

@@ -144,4 +144,8 @@ "use strict";
             this.unregisterOnDragOver();
-        this.targetElement.removeEventListener('dragover', this.onDrag);
-        this.targetElement.removeEventListener('drop', this.onDrop);
+        if (this.unregisterOnDragLeave)
+            this.unregisterOnDragLeave();
+        if (this.unregisterOnDragOverGlobal)
+            this.unregisterOnDragOverGlobal();
+        if (this.unregisterOnDragLeaveGlobal)
+            this.unregisterOnDragLeaveGlobal();
         document.body.removeChild(this.fileInput);
@@ -222,2 +226,8 @@ };
         }
+        this.registerEvents();
+        // attach to body
+        document.body.appendChild(this.fileInput);
+    };
+    UploadArea.prototype.registerEvents = function () {
+        var _this = this;
         var onClick = function () { return _this.onClick(); };
@@ -229,7 +239,14 @@ addEventHandler(this.targetElement, 'click', onClick);
         this.unregisterOnDragOver = function () { return removeEventHandler(_this.targetElement, 'dragover', onDrag); };
+        var onDragLeave = function () { return _this.onDragLeave(); };
+        addEventHandler(this.targetElement, 'dragleave', onDragLeave);
+        this.unregisterOnDragOver = function () { return removeEventHandler(_this.targetElement, 'dragleave', onDragLeave); };
+        var onDragGlobal = function () { return _this.onDragGlobal(); };
+        addEventHandler(document.body, 'dragover', onDragGlobal);
+        this.unregisterOnDragOverGlobal = function () { return removeEventHandler(document.body, 'dragover', onDragGlobal); };
+        var onDragLeaveGlobal = function () { return _this.onDragLeaveGlobal(); };
+        addEventHandler(document.body, 'dragleave', onDragLeaveGlobal);
+        this.unregisterOnDragOverGlobal = function () { return removeEventHandler(document.body, 'dragleave', onDragLeaveGlobal); };
         var onDrop = function (e) { return _this.onDrop(e); };
         addEventHandler(this.targetElement, 'drop', onDrop);
         this.unregisterOnDrop = function () { return removeEventHandler(_this.targetElement, 'drop', onDrop); };
-        // attach to body
-        document.body.appendChild(this.fileInput);
     };
@@ -242,2 +259,3 @@ UploadArea.prototype.onChange = function (e) {
             return;
+        this.addDragOverStyle(this.options.dragOverStyle);
         var efct = undefined;
@@ -253,2 +271,27 @@ try {
     };
+    UploadArea.prototype.onDragLeave = function () {
+        if (!getValueOrResult(this.options.allowDragDrop))
+            return;
+        this.removeDragOverStyle(this.options.dragOverStyle);
+    };
+    UploadArea.prototype.onDragGlobal = function () {
+        if (!getValueOrResult(this.options.allowDragDrop))
+            return;
+        this.addDragOverStyle(this.options.dragOverGlobalStyle);
+    };
+    UploadArea.prototype.onDragLeaveGlobal = function () {
+        if (!getValueOrResult(this.options.allowDragDrop))
+            return;
+        this.removeDragOverStyle(this.options.dragOverGlobalStyle);
+    };
+    UploadArea.prototype.removeDragOverStyle = function (style) {
+        if (!style)
+            return;
+        this.targetElement.classList.remove(style);
+    };
+    UploadArea.prototype.addDragOverStyle = function (style) {
+        if (!style)
+            return;
+        this.targetElement.classList.add(style);
+    };
     UploadArea.prototype.onDrop = function (e) {
@@ -261,2 +304,3 @@ if (!getValueOrResult(this.options.allowDragDrop))
         }
+        this.removeDragOverStyle(this.options.dragOverStyle);
         var files = e.dataTransfer.files;
@@ -263,0 +307,0 @@ if (files.length) {

index.ts

@@ -147,2 +147,4 @@ export function addEventHandler(el: Element | HTMLElement, event: string, handler: (ev: UIEvent) => void) {
     allowEmptyFile?: boolean;
+    dragOverStyle?: string;
+    dragOverGlobalStyle?: string;
 
@@ -237,2 +239,5 @@ onFileAdded?: (file: IUploadFile) => void;
     private unregisterOnDragOver: () => void;
+    private unregisterOnDragLeave: () => void;
+    private unregisterOnDragOverGlobal: () => void;
+    private unregisterOnDragLeaveGlobal: () => void;
     private unregisterOnChange: () => void;
@@ -277,5 +282,11 @@
 
-        this.targetElement.removeEventListener('dragover', this.onDrag);
-        this.targetElement.removeEventListener('drop', this.onDrop);
+        if (this.unregisterOnDragLeave)
+            this.unregisterOnDragLeave();
 
+        if (this.unregisterOnDragOverGlobal)
+            this.unregisterOnDragOverGlobal();
+
+        if (this.unregisterOnDragLeaveGlobal)
+            this.unregisterOnDragLeaveGlobal();
+
         document.body.removeChild(this.fileInput);
@@ -364,2 +375,9 @@ }
 
+        this.registerEvents();
+
+        // attach to body
+        document.body.appendChild(this.fileInput);
+    }
+
+    private registerEvents() {
         const onClick = () => this.onClick();
@@ -373,8 +391,17 @@ addEventHandler(this.targetElement, 'click', onClick);
 
+        const onDragLeave = () => this.onDragLeave();
+        addEventHandler(this.targetElement, 'dragleave', onDragLeave);
+        this.unregisterOnDragOver = () => removeEventHandler(this.targetElement, 'dragleave', onDragLeave);
+
+        const onDragGlobal = () => this.onDragGlobal();
+        addEventHandler(document.body, 'dragover', onDragGlobal);
+        this.unregisterOnDragOverGlobal = () => removeEventHandler(document.body, 'dragover', onDragGlobal);
+
+        const onDragLeaveGlobal = () => this.onDragLeaveGlobal();
+        addEventHandler(document.body, 'dragleave', onDragLeaveGlobal);
+        this.unregisterOnDragOverGlobal = () => removeEventHandler(document.body, 'dragleave', onDragLeaveGlobal);
+
         const onDrop = (e: DragEvent) => this.onDrop(e);
         addEventHandler(this.targetElement, 'drop', onDrop);
         this.unregisterOnDrop = () => removeEventHandler(this.targetElement, 'drop', onDrop);
-
-        // attach to body
-        document.body.appendChild(this.fileInput);
     }
@@ -390,2 +417,3 @@
 
+        this.addDragOverStyle(this.options.dragOverStyle);
         let efct: string | undefined = undefined;
@@ -399,2 +427,37 @@ try {
 
+    private onDragLeave(): void {
+        if (!getValueOrResult(this.options.allowDragDrop))
+            return;
+
+        this.removeDragOverStyle(this.options.dragOverStyle);
+    }
+
+    private onDragGlobal(): void {
+        if (!getValueOrResult(this.options.allowDragDrop))
+            return;
+
+        this.addDragOverStyle(this.options.dragOverGlobalStyle);
+    }
+
+    private onDragLeaveGlobal(): void {
+        if (!getValueOrResult(this.options.allowDragDrop))
+            return;
+
+        this.removeDragOverStyle(this.options.dragOverGlobalStyle);
+    }
+
+    private removeDragOverStyle(style?: string) {
+        if (!style)
+            return;
+
+        this.targetElement.classList.remove(style);
+    }
+
+    private addDragOverStyle(style?: string) {
+        if (!style)
+            return;
+
+        this.targetElement.classList.add(style);
+    }
+
     private onDrop(e: DragEvent): void {
@@ -408,2 +471,5 @@ if (!getValueOrResult(this.options.allowDragDrop))
         }
+
+        this.removeDragOverStyle(this.options.dragOverStyle);
+
         let files: FileList | File[] = e.dataTransfer.files;
@@ -410,0 +476,0 @@ if (files.length) {

package.json

 {
   "name": "pure-upload",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "The pure upload library without dependencies",
   "author": {
-    "name": "t.rut, m.horyna"
+    "name": "t.rut"
   },
@@ -8,0 +8,0 @@ "license": "MIT",

pureupload.d.ts

@@ -57,2 +57,4 @@ declare module "pure-upload" {
     allowEmptyFile?: boolean;
+    dragOverStyle?: string;
+    dragOverGlobalStyle?: string;
     onFileAdded?: (file: IUploadFile) => void;
@@ -125,2 +127,5 @@ onFileSelected?: (file: IUploadFile) => void;
     private unregisterOnDragOver;
+    private unregisterOnDragLeave;
+    private unregisterOnDragOverGlobal;
+    private unregisterOnDragLeaveGlobal;
     private unregisterOnChange;
@@ -136,4 +141,10 @@ constructor(targetElement: HTMLElement, options: IUploadAreaOptions, uploader: Uploader);
     private setupFileApiElements();
+    private registerEvents();
     private onChange(e);
     private onDrag(e);
+    private onDragLeave();
+    private onDragGlobal();
+    private onDragLeaveGlobal();
+    private removeDragOverStyle(style?);
+    private addDragOverStyle(style?);
     private onDrop(e);
@@ -140,0 +151,0 @@ private isIeVersion(v);

README.md

@@ -80,2 +80,4 @@ # Pure-upload
 allowEmptyFile?: boolean;
+dragOverStyle?: string;
+dragOverGlobalStyle?: string;
 onFileAdded?: (file: IUploadFile) => void;
@@ -82,0 +84,0 @@ onFileSelected?: (file: IUploadFile) => void;

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

80276

increased by6.32%

Lines of code

1797

increased by6.08%

Number of lines in readme file

120

increased by1.69%

No dependency changes