ui.ts

/**
 * @fileoverview
 * All structured UI classes.
 * 
 * TODO(mebjas): Migrate all UI components to modular UI classes so they are
 * easy to improve.
 * TODO(mebjas): Add tests for all UI components.
 * @author mebjas <minhazav@gmail.com>
 */

import { ASSET_CLOSE_ICON_16PX, ASSET_INFO_ICON_16PX } from "./image-assets";

import { LibraryInfoStrings } from "./strings";

type OnClickListener0 = () => void;

//#region Info Icon + Div

class LibraryInfoDiv {
    private infoDiv: HTMLDivElement;

    constructor() {
        this.infoDiv = document.createElement("div");
    }

    public renderInto(parent: HTMLElement) {
        this.infoDiv.style.position = "absolute";
        this.infoDiv.style.top = "10px";
        this.infoDiv.style.right = "10px";
        this.infoDiv.style.zIndex = "2";
        this.infoDiv.style.display = "none";
        this.infoDiv.style.padding = "5pt";
        this.infoDiv.style.border = "1px solid #171717";
        this.infoDiv.style.fontSize = "10pt";
        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 = "ScanApp";
        projectLink.href = "https://scanapp.org";
        projectLink.target = "new";
        projectLink.style.color = "white";
        this.infoDiv.appendChild(projectLink);

        const breakElemFirst = document.createElement("br");
        const breakElemSecond = document.createElement("br");
        this.infoDiv.appendChild(breakElemFirst);
        this.infoDiv.appendChild(breakElemSecond);

        const reportIssueLink = document.createElement("a");
        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);
    }

    public show() {
        this.infoDiv.style.display = "block";
    }

    public hide() {
        this.infoDiv.style.display = "none";
    }
}

class LibraryInfoIcon {

    private infoIcon: HTMLImageElement;
    private onTapIn: OnClickListener0;
    private onTapOut: OnClickListener0;
    private isShowingInfoIcon: boolean = true;

    constructor(onTapIn: OnClickListener0, onTapOut: OnClickListener0) {
        this.onTapIn = onTapIn;
        this.onTapOut = onTapOut;

        this.infoIcon = document.createElement("img");
    }
    
    public renderInto(parent: HTMLElement) {
        this.infoIcon.alt = "Info icon";
        this.infoIcon.src = ASSET_INFO_ICON_16PX;
        this.infoIcon.style.position = "absolute";
        this.infoIcon.style.top = "4px";
        this.infoIcon.style.right = "4px";
        this.infoIcon.style.opacity = "0.6";
        this.infoIcon.style.cursor = "pointer";
        this.infoIcon.style.zIndex = "2";
        this.infoIcon.style.width = "16px";
        this.infoIcon.style.height = "16px";

        this.infoIcon.onmouseover = (_) => this.onHoverIn();
        this.infoIcon.onmouseout = (_) => this.onHoverOut();
        this.infoIcon.onclick = (_) => this.onClick();

        parent.appendChild(this.infoIcon);
    }

    private onHoverIn() {
        if (this.isShowingInfoIcon) {
            this.infoIcon.style.opacity = "1";
        }
    }

    private onHoverOut() {
        if (this.isShowingInfoIcon) {
            this.infoIcon.style.opacity = "0.6";
        }
    }

    private onClick() {
        if (this.isShowingInfoIcon) {
            this.isShowingInfoIcon = false;
            this.onTapIn();
            this.infoIcon.src = ASSET_CLOSE_ICON_16PX;
            this.infoIcon.style.opacity = "1";
        } else {
            this.isShowingInfoIcon = true;
            this.onTapOut();
            this.infoIcon.src = ASSET_INFO_ICON_16PX;
            this.infoIcon.style.opacity = "0.6";
        }
    }
}

export class LibraryInfoContainer {

    private infoDiv: LibraryInfoDiv;
    private infoIcon: LibraryInfoIcon;

    constructor() {
        this.infoDiv = new LibraryInfoDiv();
        this.infoIcon = new LibraryInfoIcon(() => {
            this.infoDiv.show();
        }, () => {
            this.infoDiv.hide();
        });
    }
    
    public renderInto(parent: HTMLElement) {
        this.infoDiv.renderInto(parent);
        this.infoIcon.renderInto(parent);
    }
}
//#endregion