项目初始化

Houjie

2025-04-11 1bf977929dd324f3ac64b70debd8a79443c54392

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
 * @fileoverview
 * Contains base classes for different UI elements used in the scanner.
 * 
 * @author mebjas <minhazav@gmail.com>
 * 
 * The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
 * http://www.denso-wave.com/qrcode/faqpatent-e.html
 */
 
/**
 * Id and classes of UI elements, for developers to configure the theme of
 * end to end scanner using css.
 */
export class PublicUiElementIdAndClasses {
    //#region Public list of element IDs for major UI elements.
 
    /** Class name added to all major UI elements used in scanner. */
    static ALL_ELEMENT_CLASS = "html5-qrcode-element";
 
    /** Id of the camera permission button. */
    static CAMERA_PERMISSION_BUTTON_ID = "html5-qrcode-button-camera-permission";
 
    /** Id of the camera start button. */
    static CAMERA_START_BUTTON_ID = "html5-qrcode-button-camera-start";
 
    /** Id of the camera stop button. */
    static CAMERA_STOP_BUTTON_ID = "html5-qrcode-button-camera-stop";
 
    /** Id of the torch button. */
    static TORCH_BUTTON_ID = "html5-qrcode-button-torch";
 
    /** Id of the select element used for camera selection. */
    static CAMERA_SELECTION_SELECT_ID = "html5-qrcode-select-camera";
 
    /** Id of the button used for file selection. */
    static FILE_SELECTION_BUTTON_ID = "html5-qrcode-button-file-selection";
 
    /** Id of the range input for zoom. */
    static ZOOM_SLIDER_ID = "html5-qrcode-input-range-zoom";
 
    /**
     * Id of the anchor {@code <a>} element used for swapping between file scan
     * and camera scan.
     */
    static SCAN_TYPE_CHANGE_ANCHOR_ID = "html5-qrcode-anchor-scan-type-change";
 
    //#endregion
 
    //#region List of classes for specific use-cases.
 
    /** Torch button class when torch is ON. */ 
    static TORCH_BUTTON_CLASS_TORCH_ON = "html5-qrcode-button-torch-on";
 
    /** Torch button class when torch is OFF. */ 
    static TORCH_BUTTON_CLASS_TORCH_OFF = "html5-qrcode-button-torch-off";
 
    //#endregion
}
 
/**
 * Factory class for creating different base UI elements used by the scanner.
 */
export class BaseUiElementFactory {
    /**
     * Creates {@link HTMLElement} of given {@param elementType}.
     * 
     * @param elementType Type of element to create, example 
     */
    public static createElement<Type extends HTMLElement>(
        elementType: string, elementId: string): Type {
 
        let element: Type = <Type>(document.createElement(elementType));
        element.id = elementId;
        element.classList.add(PublicUiElementIdAndClasses.ALL_ELEMENT_CLASS);
        if (elementType === "button") {
            element.setAttribute("type", "button");
        }
        return element;
    }
}