Abstract UI element creation.

changelog.md

@@ -1,3 +1,6 @@
+### Version 2.2.7
+TBD
+
 ### Version 2.2.5 & Version 2.2.6
 
 > Small minification fix in Version 2.2.6.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html5-qrcode",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "A cross platform HTML5 QR Code & bar code scanner",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",

src/html5-qrcode-scanner.ts

@@ -59,6 +59,10 @@ import {
     TorchUtils
 } from "./ui/scanner/torch-button";
 
+import {
+    BaseUiElementFactory
+} from "./ui/scanner/base";
+
 /**
  * Different states of QR Code Scanner.
  */
@@ -564,7 +568,7 @@ export class Html5QrcodeScanner {
         scpCameraScanRegion: HTMLDivElement,
         requestPermissionContainer: HTMLDivElement) {
         const $this = this;
-        const requestPermissionButton = document.createElement("button");
+        const requestPermissionButton = BaseUiElementFactory.createButton();
         requestPermissionButton.id = this.getCameraPermissionButtonId();
         requestPermissionButton.innerText
             = Html5QrcodeScannerStrings.cameraPermissionTitle();
@@ -656,10 +660,9 @@ export class Html5QrcodeScanner {
             ? "none" : "block";
         parent.appendChild(fileBasedScanRegion);
 
-        const fileScanInput = document.createElement("input");
+        const fileScanInput = BaseUiElementFactory.createInputFile();
         fileScanInput.id = this.getFileScanInputId();
         fileScanInput.accept = "image/*";
-        fileScanInput.type = "file";
         fileScanInput.style.width = "200px";
         fileScanInput.disabled
             = ScanTypeSelector.isCameraScanType(this.currentScanType);
@@ -723,7 +726,7 @@ export class Html5QrcodeScanner {
         for (const camera of cameras) {
             const value = camera.id;
             const name = camera.label == null ? value : camera.label;
-            const option = document.createElement("option");
+            const option = BaseUiElementFactory.createOption();
             option.value = value;
             option.innerText = name;
             options.push(option);
@@ -733,12 +736,12 @@ export class Html5QrcodeScanner {
         scpCameraScanRegion.appendChild(cameraSelectionContainer);
 
         const cameraActionContainer = document.createElement("span");
-        const cameraActionStartButton = document.createElement("button");
+        const cameraActionStartButton = BaseUiElementFactory.createButton();
         cameraActionStartButton.innerText
             = Html5QrcodeScannerStrings.scanButtonStartScanningText();
         cameraActionContainer.appendChild(cameraActionStartButton);
 
-        const cameraActionStopButton = document.createElement("button");
+        const cameraActionStopButton = BaseUiElementFactory.createButton();
         cameraActionStopButton.innerText
             = Html5QrcodeScannerStrings.scanButtonStopScanningText();
         cameraActionStopButton.style.display = "none";
@@ -889,7 +892,7 @@ export class Html5QrcodeScanner {
         const section = document.getElementById(this.getDashboardSectionId())!;
         const switchContainer = document.createElement("div");
         switchContainer.style.textAlign = "center";
-        const switchScanTypeLink = document.createElement("a");
+        const switchScanTypeLink = BaseUiElementFactory.createAnchor();
         switchScanTypeLink.style.textDecoration = "underline";
         switchScanTypeLink.id = this.getDashboardSectionSwapLinkId();
         switchScanTypeLink.innerText

src/ui/scanner/base.ts

@@ -0,0 +1,76 @@
+/**
+ * @fileoverview
+ * Contains base classes for different UI elements used in the scanner.
+ * 
+ * @author mebjas <[email protected]>
+ * 
+ * The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
+ * http://www.denso-wave.com/qrcode/faqpatent-e.html
+ */
+
+const ALL_ELEMENT_CLASS_NAME = "html5-qrcode-element";
+const BUTTON_CLASS_NAME = "html5-qrcode-button";
+const SELECT_CLASS_NAME = "html5-qrcode-select";
+const OPTION_CLASS_NAME = "html5-qrcode-option";
+const INPUT_FILE_CLASS_NAME = "html5-qrcode-input-file";
+const ANCHOR_CLASS_NAME = "html5-qrcode-anchor";
+
+export class BaseUiElementFactory {
+    /**
+     * Creates bare bone {@link HTMLButtonElement} to be used for all buttons.
+     */
+    public static createButton(): HTMLButtonElement {
+        let button = document.createElement("button");
+        button.classList.add(ALL_ELEMENT_CLASS_NAME);
+        button.classList.add(BUTTON_CLASS_NAME);
+
+        return button;
+    }
+
+    /**
+     * Creates bare bone {@link HTMLOptionElement} element.
+     */
+     public static createSelect(): HTMLSelectElement {
+        let select = document.createElement("select");
+        select.classList.add(ALL_ELEMENT_CLASS_NAME);
+        select.classList.add(SELECT_CLASS_NAME);
+
+        return select;
+    }
+
+    /**
+     * Creates bare bone {@link HTMLOptionElement} element.
+     */
+    public static createOption(): HTMLOptionElement {
+        let option = document.createElement("option");
+        option.classList.add(ALL_ELEMENT_CLASS_NAME);
+        option.classList.add(OPTION_CLASS_NAME);
+
+        return option;
+    }
+
+
+    /**
+     * Creates bare bone {@link HTMLInputElement} element.
+     */
+    public static createInputFile(): HTMLInputElement {
+        let inputFile = document.createElement("input");
+        inputFile.type = "file";
+        inputFile.classList.add(ALL_ELEMENT_CLASS_NAME);
+        inputFile.classList.add(INPUT_FILE_CLASS_NAME);
+
+        return inputFile;
+    }
+
+    /**
+     * Creates bare bone {@link HTMLAnchorElement} element.
+     */
+    public static createAnchor(): HTMLAnchorElement {
+        let anchor = document.createElement("a");
+        anchor.type = "file";
+        anchor.classList.add(ALL_ELEMENT_CLASS_NAME);
+        anchor.classList.add(ANCHOR_CLASS_NAME);
+
+        return anchor;
+    }
+}

src/ui/scanner/torch-button.ts

@@ -10,6 +10,7 @@
 
 import {Html5QrcodeScannerStrings} from "../../strings";
 import {Html5Qrcode} from "../../html5-qrcode";
+import {BaseUiElementFactory} from "./base";
 
 /**
  * Interface for callback that will be called in case of torch action failures.
@@ -130,7 +131,7 @@ export class TorchButton {
         torchButtonOptions: TorchButtonOptions,
         onTorchActionFailureCallback: OnTorchActionFailureCallback)
         : TorchButton {
-        let torchButton = document.createElement("button");
+        let torchButton = BaseUiElementFactory.createButton();
         let torchController = new TorchController(
             html5Qrcode,
             torchButton,