Skip to content

Commit

Permalink
Add features for v2.3.0 (#587)
Browse files Browse the repository at this point in the history
* Add features for v2.3.0

Drag and drop support in file based scanning & info ui update.

* misc fixes + codacy fixes
  • Loading branch information
mebjas authored Nov 12, 2022
1 parent e7461d0 commit b526b0c
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 11 deletions.
5 changes: 5 additions & 0 deletions changelog.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
### Version 2.3.0

- Added support for drag and drop of image in file based scanner.
- Info UI updated.

### Version 2.2.8

#### Custom camera labels when not available.
Expand Down
2 changes: 1 addition & 1 deletion minified/html5-qrcode.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "html5-qrcode",
"version": "2.2.8",
"version": "2.3.0",
"description": "A cross platform HTML5 QR Code & bar code scanner",
"main": "./cjs/index.js",
"module": "./esm/index.js",
Expand Down
12 changes: 10 additions & 2 deletions src/strings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,13 +156,21 @@ export class Html5QrcodeScannerStrings {
public static anonymousCameraPrefix(): string {
return "Anonymous Camera";
}

public static dragAndDropMessage(): string {
return "Or drop an image to scan";
}

public static dragAndDropMessageOnlyImages(): string {
return "Or drop an image to scan (other files not supported)";
}
}

/** Strings used in {@class LibraryInfoDiv} */
export class LibraryInfoStrings {

public static builtUsing(): string {
return "Built using ";
public static poweredBy(): string {
return "Powered by ";
}

public static reportIssues(): string {
Expand Down
16 changes: 11 additions & 5 deletions src/ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,20 @@ class LibraryInfoDiv {
this.infoDiv.style.zIndex = "2";
this.infoDiv.style.display = "none";
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.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.builtUsing();
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);

const breakElemFirst = document.createElement("br");
Expand All @@ -50,6 +55,7 @@ class LibraryInfoDiv {
reportIssueLink.innerText = LibraryInfoStrings.reportIssues();
reportIssueLink.href = "https://github.com/mebjas/html5-qrcode/issues";
reportIssueLink.target = "new";
reportIssueLink.style.color = "white";
this.infoDiv.appendChild(reportIssueLink);

parent.appendChild(this.infoDiv);
Expand Down
112 changes: 110 additions & 2 deletions src/ui/scanner/file-selection-ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ export class FileSelectionUi {
parentElement: HTMLDivElement,
showOnRender: boolean,
onFileSelected: OnFileSelected) {
this.fileBasedScanRegion = document.createElement("div");
this.fileBasedScanRegion.style.textAlign = "center";
this.fileBasedScanRegion = this.createFileBasedScanRegion();
this.fileBasedScanRegion.style.display
= showOnRender ? "block" : "none";
parentElement.appendChild(this.fileBasedScanRegion);
Expand Down Expand Up @@ -80,8 +79,84 @@ export class FileSelectionUi {

onFileSelected(file);
});

// Render drag and drop label
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();
});

/*eslint complexity: ["error", 10]*/
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.*/;

// Only process images.
if (!file.type.match(imageType)) {
continue;
}

isAnyFileImage = true;
let fileName = file.name;
$this.setImageNameToButton(fileName);

onFileSelected(file);
dragAndDropMessage.innerText
= Html5QrcodeScannerStrings.dragAndDropMessage();
break;
}

// None of the files were images.
if (!isAnyFileImage) {
dragAndDropMessage.innerText
= Html5QrcodeScannerStrings
.dragAndDropMessageOnlyImages();
}
}

});
}

//#region Public APIs.
/** Hide the file selection UI. */
public hide() {
this.fileBasedScanRegion.style.display = "none";
Expand All @@ -104,6 +179,38 @@ export class FileSelectionUi {
this.fileScanInput.value = "";
this.setInitialValueToButton();
}
//#endregion

//#region private APIs
private createFileBasedScanRegion(): HTMLDivElement {
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;
}

private fileBasedScanRegionDefaultBorder() {
return "6px dashed #ebebeb";
}

/** Border when a file is being dragged over the file scan region. */
private fileBasedScanRegionActiveBorder() {
return "6px dashed rgb(153 151 151)";
}

private createDragAndDropMessage(): HTMLDivElement {
let dragAndDropMessage = document.createElement("div");
dragAndDropMessage.innerText
= Html5QrcodeScannerStrings.dragAndDropMessage();
dragAndDropMessage.style.fontWeight = "400";
return dragAndDropMessage;
}

private setImageNameToButton(imageFileName: string) {
const MAX_CHARS = 20;
Expand Down Expand Up @@ -133,6 +240,7 @@ export class FileSelectionUi {
private getFileScanInputId(): string {
return "html5-qrcode-private-filescan-input";
}
//#endregion

/**
* Creates a file selection UI and renders.
Expand Down

0 comments on commit b526b0c

Please sign in to comment.