@teachingtextbooks/keyboard/public/keys-row.js

Customizable TypeScript soft keyboard

import { KeyboardCSS, KeyboardKeys } from "./const";
import TTUtils from "./tt-utils";
import { KeyBtnReg } from "./key-btn-reg";
export default class KeysRow {
    constructor(id, win, doc, config, keysConfig, align, keysGap, rowsGap, stickDelay, holder, shiftCase = false, callback) {
        this.section = doc.createElement('section');
        this.section.classList.add(KeyboardCSS.ROW);
        !shiftCase && holder.appendChild(this.section);
        this.section.style.marginBottom = TTUtils.num2px(rowsGap);
        this.section.style.textAlign = align;
        this.id = id;
        this.holder = holder;
        this.gap = keysGap;
        this._hasUpperCase = this._hasShift = this._hasCapsLock = false;
        this._shiftCase = shiftCase;
        this.buttons = [];
        config.keys.map((key, ind, arr) => {
            const isTuple = key instanceof Array;
            const pKey = isTuple ? key[0] : key;
            const sKey = isTuple ? key[1] : null;
            if (!this._hasShift && isTuple)
                this._hasShift = true;
            if (!this._hasCapsLock && pKey === KeyboardKeys.CAPSLOCK)
                this._hasCapsLock = true;
            const conf = shiftCase && sKey ?
                keysConfig.get(sKey) :
                keysConfig.get(pKey);
            if (!conf)
                return;
            const btn = new KeyBtnReg(win, doc, conf, keysGap, stickDelay, this.section, ind === 0, ind === (arr.length - 1), callback);
            this.buttons.push(btn);
            if (conf.code === KeyboardKeys.SHIFT_LEFT || conf.code === KeyboardKeys.SHIFT_RIGHT || conf.code === KeyboardKeys.SHIFT) {
                this._hasUpperCase = true;
            }
        });
        this.clientWidth = TTUtils.getElWidth(this.section) - this.getKeysMargin();
        (this._hasUpperCase) && this.shift(false, false, false);
        (this._hasCapsLock) && this.shift(false, true, false);
    }
    getID() {
        return this.id;
    }
    attach() {
        !this.holder.contains(this.section) && this.holder.appendChild(this.section);
    }
    remove() {
        var _a;
        (_a = this.section.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.section);
    }
    static checkShift(keys) {
        let k = keys.length;
        while (k--) {
            if (keys[k] instanceof Array)
                return true;
        }
        return false;
    }
    setScale(val) {
        this.buttons.map((btn) => {
            btn.setScale(val);
        });
    }
    getClientWidth() {
        return this.clientWidth;
    }
    getKeysMargin() {
        let sum = 0;
        this.buttons.map((btn) => {
            sum += btn.getSideMargins();
        });
        return sum;
    }
    enable(bool) {
        this.buttons.map((btn) => {
            btn.enable(bool);
        });
    }
    shift(bool, capsLock, capsLocked) {
        this.buttons.map((btn) => {
            const isShift = btn.getCode() === KeyboardKeys.SHIFT_LEFT || btn.getCode() === KeyboardKeys.SHIFT_RIGHT || btn.getCode() === KeyboardKeys.SHIFT;
            const isCapslock = btn.getCode() === KeyboardKeys.CAPSLOCK;
            if (!isShift && !isCapslock) {
                if (!bool && capsLocked)
                    return;
                bool ? btn.upperCase() : btn.lowerCase();
            }
            else if (isShift && bool && !capsLock) {
                btn.removeClass(KeyboardCSS.SHIFT_OFF);
                btn.addClass(KeyboardCSS.SHIFT_ON);
            }
            else if (isShift && !bool && !capsLock) {
                btn.removeClass(KeyboardCSS.SHIFT_ON);
                btn.addClass(KeyboardCSS.SHIFT_OFF);
            }
            else if (isCapslock && bool && capsLock) {
                btn.removeClass(KeyboardCSS.CAPSLOCK_OFF);
                btn.addClass(KeyboardCSS.CAPSLOCK_ON);
            }
            else if (isCapslock && !bool && capsLock) {
                btn.removeClass(KeyboardCSS.CAPSLOCK_ON);
                btn.addClass(KeyboardCSS.CAPSLOCK_OFF);
            }
        });
    }
    hasUpperCase() {
        return this._hasUpperCase;
    }
    hasShift() {
        return this._hasShift;
    }
    hasCapsLock() {
        return this._hasCapsLock;
    }
    shiftCase() {
        return this._shiftCase;
    }
}