html5-qrcode - npm Package Compare versions

Comparing version 2.2.8 to 2.3.0

cjs/strings.d.ts

@@ -34,6 +34,8 @@ export declare class Html5QrcodeStrings {
     static anonymousCameraPrefix(): string;
+    static dragAndDropMessage(): string;
+    static dragAndDropMessageOnlyImages(): string;
 }
 export declare class LibraryInfoStrings {
-    static builtUsing(): string;
+    static poweredBy(): string;
     static reportIssues(): string;
 }

cjs/strings.js

@@ -106,2 +106,8 @@ "use strict";
     };
+    Html5QrcodeScannerStrings.dragAndDropMessage = function () {
+        return "Or drop an image to scan";
+    };
+    Html5QrcodeScannerStrings.dragAndDropMessageOnlyImages = function () {
+        return "Or drop an image to scan (other files not supported)";
+    };
     return Html5QrcodeScannerStrings;
@@ -113,4 +119,4 @@ }());
     }
-    LibraryInfoStrings.builtUsing = function () {
-        return "Built using ";
+    LibraryInfoStrings.poweredBy = function () {
+        return "Powered by ";
     };
@@ -117,0 +123,0 @@ LibraryInfoStrings.reportIssues = function () {

cjs/ui.js

@@ -17,10 +17,15 @@ "use strict";
         this.infoDiv.style.padding = "5pt";
-        this.infoDiv.style.border = "1px solid silver";
+        this.infoDiv.style.border = "1px solid #171717";
         this.infoDiv.style.fontSize = "10pt";
-        this.infoDiv.style.background = "rgb(248 248 248)";
-        this.infoDiv.innerText = strings_1.LibraryInfoStrings.builtUsing();
+        this.infoDiv.style.background = "rgb(0 0 0 / 69%)";
+        this.infoDiv.style.borderRadius = "5px";
+        this.infoDiv.style.textAlign = "center";
+        this.infoDiv.style.fontWeight = "400";
+        this.infoDiv.style.color = "white";
+        this.infoDiv.innerText = strings_1.LibraryInfoStrings.poweredBy();
         var projectLink = document.createElement("a");
-        projectLink.innerText = "html5-qrcode";
-        projectLink.href = "https://github.com/mebjas/html5-qrcode";
+        projectLink.innerText = "ScanApp";
+        projectLink.href = "https://scanapp.org";
         projectLink.target = "new";
+        projectLink.style.color = "white";
         this.infoDiv.appendChild(projectLink);
@@ -35,2 +40,3 @@ var breakElemFirst = document.createElement("br");
         reportIssueLink.target = "new";
+        reportIssueLink.style.color = "white";
         this.infoDiv.appendChild(reportIssueLink);
@@ -37,0 +43,0 @@ parent.appendChild(this.infoDiv);

cjs/ui/scanner/file-selection-ui.d.ts

@@ -11,2 +11,6 @@ export declare type OnFileSelected = (file: File) => void;
     resetValue(): void;
+    private createFileBasedScanRegion;
+    private fileBasedScanRegionDefaultBorder;
+    private fileBasedScanRegionActiveBorder;
+    private createDragAndDropMessage;
     private setImageNameToButton;
@@ -13,0 +17,0 @@ private setInitialValueToButton;

cjs/ui/scanner/file-selection-ui.js

@@ -8,4 +8,3 @@ "use strict";
     function FileSelectionUi(parentElement, showOnRender, onFileSelected) {
-        this.fileBasedScanRegion = document.createElement("div");
-        this.fileBasedScanRegion.style.textAlign = "center";
+        this.fileBasedScanRegion = this.createFileBasedScanRegion();
         this.fileBasedScanRegion.style.display
@@ -46,2 +45,58 @@ = showOnRender ? "block" : "none";
         });
+        var dragAndDropMessage = this.createDragAndDropMessage();
+        this.fileBasedScanRegion.appendChild(dragAndDropMessage);
+        this.fileBasedScanRegion.addEventListener("dragenter", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("dragleave", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("dragover", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("drop", function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+            var dataTransfer = event.dataTransfer;
+            if (dataTransfer) {
+                var files = dataTransfer.files;
+                if (!files || files.length === 0) {
+                    return;
+                }
+                var isAnyFileImage = false;
+                for (var i = 0; i < files.length; ++i) {
+                    var file = files.item(i);
+                    if (!file) {
+                        continue;
+                    }
+                    var imageType = /image.*/;
+                    if (!file.type.match(imageType)) {
+                        continue;
+                    }
+                    isAnyFileImage = true;
+                    var fileName = file.name;
+                    $this.setImageNameToButton(fileName);
+                    onFileSelected(file);
+                    dragAndDropMessage.innerText
+                        = strings_1.Html5QrcodeScannerStrings.dragAndDropMessage();
+                    break;
+                }
+                if (!isAnyFileImage) {
+                    dragAndDropMessage.innerText
+                        = strings_1.Html5QrcodeScannerStrings
+                            .dragAndDropMessageOnlyImages();
+                }
+            }
+        });
     }
@@ -63,2 +118,27 @@ FileSelectionUi.prototype.hide = function () {
     };
+    FileSelectionUi.prototype.createFileBasedScanRegion = function () {
+        var fileBasedScanRegion = document.createElement("div");
+        fileBasedScanRegion.style.textAlign = "center";
+        fileBasedScanRegion.style.margin = "auto";
+        fileBasedScanRegion.style.width = "80%";
+        fileBasedScanRegion.style.maxWidth = "600px";
+        fileBasedScanRegion.style.border
+            = this.fileBasedScanRegionDefaultBorder();
+        fileBasedScanRegion.style.padding = "10px";
+        fileBasedScanRegion.style.marginBottom = "10px";
+        return fileBasedScanRegion;
+    };
+    FileSelectionUi.prototype.fileBasedScanRegionDefaultBorder = function () {
+        return "6px dashed #ebebeb";
+    };
+    FileSelectionUi.prototype.fileBasedScanRegionActiveBorder = function () {
+        return "6px dashed rgb(153 151 151)";
+    };
+    FileSelectionUi.prototype.createDragAndDropMessage = function () {
+        var dragAndDropMessage = document.createElement("div");
+        dragAndDropMessage.innerText
+            = strings_1.Html5QrcodeScannerStrings.dragAndDropMessage();
+        dragAndDropMessage.style.fontWeight = "400";
+        return dragAndDropMessage;
+    };
     FileSelectionUi.prototype.setImageNameToButton = function (imageFileName) {
@@ -65,0 +145,0 @@ var MAX_CHARS = 20;

es2015/strings.d.ts

@@ -34,6 +34,8 @@ export declare class Html5QrcodeStrings {
     static anonymousCameraPrefix(): string;
+    static dragAndDropMessage(): string;
+    static dragAndDropMessageOnlyImages(): string;
 }
 export declare class LibraryInfoStrings {
-    static builtUsing(): string;
+    static poweredBy(): string;
     static reportIssues(): string;
 }

es2015/strings.js

@@ -97,6 +97,12 @@ export class Html5QrcodeStrings {
     }
+    static dragAndDropMessage() {
+        return "Or drop an image to scan";
+    }
+    static dragAndDropMessageOnlyImages() {
+        return "Or drop an image to scan (other files not supported)";
+    }
 }
 export class LibraryInfoStrings {
-    static builtUsing() {
-        return "Built using ";
+    static poweredBy() {
+        return "Powered by ";
     }
@@ -103,0 +109,0 @@ static reportIssues() {

es2015/ui.js

@@ -14,10 +14,15 @@ import { ASSET_CLOSE_ICON_16PX, ASSET_INFO_ICON_16PX } from "./image-assets";
         this.infoDiv.style.padding = "5pt";
-        this.infoDiv.style.border = "1px solid silver";
+        this.infoDiv.style.border = "1px solid #171717";
         this.infoDiv.style.fontSize = "10pt";
-        this.infoDiv.style.background = "rgb(248 248 248)";
-        this.infoDiv.innerText = LibraryInfoStrings.builtUsing();
+        this.infoDiv.style.background = "rgb(0 0 0 / 69%)";
+        this.infoDiv.style.borderRadius = "5px";
+        this.infoDiv.style.textAlign = "center";
+        this.infoDiv.style.fontWeight = "400";
+        this.infoDiv.style.color = "white";
+        this.infoDiv.innerText = LibraryInfoStrings.poweredBy();
         const projectLink = document.createElement("a");
-        projectLink.innerText = "html5-qrcode";
-        projectLink.href = "https://github.com/mebjas/html5-qrcode";
+        projectLink.innerText = "ScanApp";
+        projectLink.href = "https://scanapp.org";
         projectLink.target = "new";
+        projectLink.style.color = "white";
         this.infoDiv.appendChild(projectLink);
@@ -32,2 +37,3 @@ const breakElemFirst = document.createElement("br");
         reportIssueLink.target = "new";
+        reportIssueLink.style.color = "white";
         this.infoDiv.appendChild(reportIssueLink);
@@ -34,0 +40,0 @@ parent.appendChild(this.infoDiv);

es2015/ui/scanner/file-selection-ui.d.ts

@@ -11,2 +11,6 @@ export declare type OnFileSelected = (file: File) => void;
     resetValue(): void;
+    private createFileBasedScanRegion;
+    private fileBasedScanRegionDefaultBorder;
+    private fileBasedScanRegionActiveBorder;
+    private createDragAndDropMessage;
     private setImageNameToButton;
@@ -13,0 +17,0 @@ private setInitialValueToButton;

es2015/ui/scanner/file-selection-ui.js

@@ -5,4 +5,3 @@ import { Html5QrcodeScannerStrings } from "../../strings";
     constructor(parentElement, showOnRender, onFileSelected) {
-        this.fileBasedScanRegion = document.createElement("div");
-        this.fileBasedScanRegion.style.textAlign = "center";
+        this.fileBasedScanRegion = this.createFileBasedScanRegion();
         this.fileBasedScanRegion.style.display
@@ -43,2 +42,58 @@ = showOnRender ? "block" : "none";
         });
+        let dragAndDropMessage = this.createDragAndDropMessage();
+        this.fileBasedScanRegion.appendChild(dragAndDropMessage);
+        this.fileBasedScanRegion.addEventListener("dragenter", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("dragleave", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("dragover", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("drop", function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+            var dataTransfer = event.dataTransfer;
+            if (dataTransfer) {
+                let files = dataTransfer.files;
+                if (!files || files.length === 0) {
+                    return;
+                }
+                let isAnyFileImage = false;
+                for (let i = 0; i < files.length; ++i) {
+                    let file = files.item(i);
+                    if (!file) {
+                        continue;
+                    }
+                    let imageType = /image.*/;
+                    if (!file.type.match(imageType)) {
+                        continue;
+                    }
+                    isAnyFileImage = true;
+                    let fileName = file.name;
+                    $this.setImageNameToButton(fileName);
+                    onFileSelected(file);
+                    dragAndDropMessage.innerText
+                        = Html5QrcodeScannerStrings.dragAndDropMessage();
+                    break;
+                }
+                if (!isAnyFileImage) {
+                    dragAndDropMessage.innerText
+                        = Html5QrcodeScannerStrings
+                            .dragAndDropMessageOnlyImages();
+                }
+            }
+        });
     }
@@ -60,2 +115,27 @@ hide() {
     }
+    createFileBasedScanRegion() {
+        let fileBasedScanRegion = document.createElement("div");
+        fileBasedScanRegion.style.textAlign = "center";
+        fileBasedScanRegion.style.margin = "auto";
+        fileBasedScanRegion.style.width = "80%";
+        fileBasedScanRegion.style.maxWidth = "600px";
+        fileBasedScanRegion.style.border
+            = this.fileBasedScanRegionDefaultBorder();
+        fileBasedScanRegion.style.padding = "10px";
+        fileBasedScanRegion.style.marginBottom = "10px";
+        return fileBasedScanRegion;
+    }
+    fileBasedScanRegionDefaultBorder() {
+        return "6px dashed #ebebeb";
+    }
+    fileBasedScanRegionActiveBorder() {
+        return "6px dashed rgb(153 151 151)";
+    }
+    createDragAndDropMessage() {
+        let dragAndDropMessage = document.createElement("div");
+        dragAndDropMessage.innerText
+            = Html5QrcodeScannerStrings.dragAndDropMessage();
+        dragAndDropMessage.style.fontWeight = "400";
+        return dragAndDropMessage;
+    }
     setImageNameToButton(imageFileName) {
@@ -62,0 +142,0 @@ const MAX_CHARS = 20;

esm/strings.d.ts

@@ -34,6 +34,8 @@ export declare class Html5QrcodeStrings {
     static anonymousCameraPrefix(): string;
+    static dragAndDropMessage(): string;
+    static dragAndDropMessageOnlyImages(): string;
 }
 export declare class LibraryInfoStrings {
-    static builtUsing(): string;
+    static poweredBy(): string;
     static reportIssues(): string;
 }

esm/strings.js

@@ -103,2 +103,8 @@ var Html5QrcodeStrings = (function () {
     };
+    Html5QrcodeScannerStrings.dragAndDropMessage = function () {
+        return "Or drop an image to scan";
+    };
+    Html5QrcodeScannerStrings.dragAndDropMessageOnlyImages = function () {
+        return "Or drop an image to scan (other files not supported)";
+    };
     return Html5QrcodeScannerStrings;
@@ -110,4 +116,4 @@ }());
     }
-    LibraryInfoStrings.builtUsing = function () {
-        return "Built using ";
+    LibraryInfoStrings.poweredBy = function () {
+        return "Powered by ";
     };
@@ -114,0 +120,0 @@ LibraryInfoStrings.reportIssues = function () {

esm/ui.js

@@ -14,10 +14,15 @@ import { ASSET_CLOSE_ICON_16PX, ASSET_INFO_ICON_16PX } from "./image-assets";
         this.infoDiv.style.padding = "5pt";
-        this.infoDiv.style.border = "1px solid silver";
+        this.infoDiv.style.border = "1px solid #171717";
         this.infoDiv.style.fontSize = "10pt";
-        this.infoDiv.style.background = "rgb(248 248 248)";
-        this.infoDiv.innerText = LibraryInfoStrings.builtUsing();
+        this.infoDiv.style.background = "rgb(0 0 0 / 69%)";
+        this.infoDiv.style.borderRadius = "5px";
+        this.infoDiv.style.textAlign = "center";
+        this.infoDiv.style.fontWeight = "400";
+        this.infoDiv.style.color = "white";
+        this.infoDiv.innerText = LibraryInfoStrings.poweredBy();
         var projectLink = document.createElement("a");
-        projectLink.innerText = "html5-qrcode";
-        projectLink.href = "https://github.com/mebjas/html5-qrcode";
+        projectLink.innerText = "ScanApp";
+        projectLink.href = "https://scanapp.org";
         projectLink.target = "new";
+        projectLink.style.color = "white";
         this.infoDiv.appendChild(projectLink);
@@ -32,2 +37,3 @@ var breakElemFirst = document.createElement("br");
         reportIssueLink.target = "new";
+        reportIssueLink.style.color = "white";
         this.infoDiv.appendChild(reportIssueLink);
@@ -34,0 +40,0 @@ parent.appendChild(this.infoDiv);

esm/ui/scanner/file-selection-ui.d.ts

@@ -11,2 +11,6 @@ export declare type OnFileSelected = (file: File) => void;
     resetValue(): void;
+    private createFileBasedScanRegion;
+    private fileBasedScanRegionDefaultBorder;
+    private fileBasedScanRegionActiveBorder;
+    private createDragAndDropMessage;
     private setImageNameToButton;
@@ -13,0 +17,0 @@ private setInitialValueToButton;

esm/ui/scanner/file-selection-ui.js

@@ -5,4 +5,3 @@ import { Html5QrcodeScannerStrings } from "../../strings";
     function FileSelectionUi(parentElement, showOnRender, onFileSelected) {
-        this.fileBasedScanRegion = document.createElement("div");
-        this.fileBasedScanRegion.style.textAlign = "center";
+        this.fileBasedScanRegion = this.createFileBasedScanRegion();
         this.fileBasedScanRegion.style.display
@@ -43,2 +42,58 @@ = showOnRender ? "block" : "none";
         });
+        var dragAndDropMessage = this.createDragAndDropMessage();
+        this.fileBasedScanRegion.appendChild(dragAndDropMessage);
+        this.fileBasedScanRegion.addEventListener("dragenter", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("dragleave", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("dragover", function (event) {
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionActiveBorder();
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this.fileBasedScanRegion.addEventListener("drop", function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+            $this.fileBasedScanRegion.style.border
+                = $this.fileBasedScanRegionDefaultBorder();
+            var dataTransfer = event.dataTransfer;
+            if (dataTransfer) {
+                var files = dataTransfer.files;
+                if (!files || files.length === 0) {
+                    return;
+                }
+                var isAnyFileImage = false;
+                for (var i = 0; i < files.length; ++i) {
+                    var file = files.item(i);
+                    if (!file) {
+                        continue;
+                    }
+                    var imageType = /image.*/;
+                    if (!file.type.match(imageType)) {
+                        continue;
+                    }
+                    isAnyFileImage = true;
+                    var fileName = file.name;
+                    $this.setImageNameToButton(fileName);
+                    onFileSelected(file);
+                    dragAndDropMessage.innerText
+                        = Html5QrcodeScannerStrings.dragAndDropMessage();
+                    break;
+                }
+                if (!isAnyFileImage) {
+                    dragAndDropMessage.innerText
+                        = Html5QrcodeScannerStrings
+                            .dragAndDropMessageOnlyImages();
+                }
+            }
+        });
     }
@@ -60,2 +115,27 @@ FileSelectionUi.prototype.hide = function () {
     };
+    FileSelectionUi.prototype.createFileBasedScanRegion = function () {
+        var fileBasedScanRegion = document.createElement("div");
+        fileBasedScanRegion.style.textAlign = "center";
+        fileBasedScanRegion.style.margin = "auto";
+        fileBasedScanRegion.style.width = "80%";
+        fileBasedScanRegion.style.maxWidth = "600px";
+        fileBasedScanRegion.style.border
+            = this.fileBasedScanRegionDefaultBorder();
+        fileBasedScanRegion.style.padding = "10px";
+        fileBasedScanRegion.style.marginBottom = "10px";
+        return fileBasedScanRegion;
+    };
+    FileSelectionUi.prototype.fileBasedScanRegionDefaultBorder = function () {
+        return "6px dashed #ebebeb";
+    };
+    FileSelectionUi.prototype.fileBasedScanRegionActiveBorder = function () {
+        return "6px dashed rgb(153 151 151)";
+    };
+    FileSelectionUi.prototype.createDragAndDropMessage = function () {
+        var dragAndDropMessage = document.createElement("div");
+        dragAndDropMessage.innerText
+            = Html5QrcodeScannerStrings.dragAndDropMessage();
+        dragAndDropMessage.style.fontWeight = "400";
+        return dragAndDropMessage;
+    };
     FileSelectionUi.prototype.setImageNameToButton = function (imageFileName) {
@@ -62,0 +142,0 @@ var MAX_CHARS = 20;

package.json

 {
   "name": "html5-qrcode",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
@@ -5,0 +5,0 @@ "main": "./cjs/index.js",

strings.d.ts

@@ -34,6 +34,8 @@ export declare class Html5QrcodeStrings {
     static anonymousCameraPrefix(): string;
+    static dragAndDropMessage(): string;
+    static dragAndDropMessageOnlyImages(): string;
 }
 export declare class LibraryInfoStrings {
-    static builtUsing(): string;
+    static poweredBy(): string;
     static reportIssues(): string;
 }

ui/scanner/file-selection-ui.d.ts

@@ -11,2 +11,6 @@ export declare type OnFileSelected = (file: File) => void;
     resetValue(): void;
+    private createFileBasedScanRegion;
+    private fileBasedScanRegionDefaultBorder;
+    private fileBasedScanRegionActiveBorder;
+    private createDragAndDropMessage;
     private setImageNameToButton;
@@ -13,0 +17,0 @@ private setInitialValueToButton;

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

2578057

increased by0.94%

Lines of code

36211

increased by0.86%

No dependency changes