@teachingtextbooks/keyboard/public/key-btn-abstr.js

Customizable TypeScript soft keyboard

import { InputEvents, KeyboardCSS, KeyboardKeys, Platform } from "./const";
import TTUtils from "./tt-utils";
class KeyBtnAbstr {
    constructor(win, doc, config, keysGap, stickDelay, holder, leftSide, rightSide, callback) {
        this.win = win;
        this.doc = doc;
        this.callback = callback;
        this.config = config;
        this.stickDelay = stickDelay;
        this.stickInd = -1;
        this.gap = keysGap;
        this.upper = false;
        this.side = [leftSide, rightSide];
        this.classes = [];
        this.span = doc.createElement('span');
        this.init();
        // this.setMargin();
        holder.appendChild(this.span);
        const bind = this.mClick.bind(this);
        if (TTUtils.getPlatform(win) === Platform.WEB) {
            this.span.onclick = bind;
            this.span.onmousedown = bind;
            this.span.onmouseup = bind;
            this.span.onmouseleave = bind;
        }
        else {
            this.span.ontouchstart = bind;
            this.span.ontouchend = bind;
            this.span.onclick = bind;
        }
        this.initData = null;
        this.enable(true);
    }
    getCode() {
        return this.config.code;
    }
    getHolder() {
        return this.span;
    }
    addClass(val) {
        this.span.classList.add(val);
    }
    removeClass(val) {
        this.span.classList.remove(val);
    }
    upperCase() {
        this.upper = true;
    }
    lowerCase() {
        this.upper = false;
    }
    setPosition(top, right, bottom, left) {
        if (!isNaN(top))
            this.span.style.top = TTUtils.num2px(top);
        if (!isNaN(right))
            this.span.style.right = TTUtils.num2px(right);
        if (!isNaN(bottom))
            this.span.style.bottom = TTUtils.num2px(bottom);
        if (!isNaN(left))
            this.span.style.left = TTUtils.num2px(left);
    }
    init() {
        this.classes.push(...this.getClasses());
        this.classes.push(KeyBtnAbstr.KEY_CLASS_HASH.get(this.config.code) || KeyboardCSS.REGULAR);
    }
    setMargin() {
        const spanEl = this.span;
        if (!this.side[0] || !this.side[1]) {
            this.side[0] ?
                spanEl.style.marginRight = TTUtils.num2px(this.gap) :
                this.side[1] ?
                    spanEl.style.marginLeft = TTUtils.num2px(this.gap) :
                    spanEl.style.marginLeft = spanEl.style.marginRight = TTUtils.num2px(this.gap);
        }
    }
    enable(bool) {
        this.span.classList.remove(KeyboardCSS.ENABLED);
        this.span.classList.remove(KeyboardCSS.DISABLED);
        this.span.classList.add(...this.classes, bool ? KeyboardCSS.ENABLED : KeyboardCSS.DISABLED);
    }
    getSideMargins() {
        const style = getComputedStyle(this.span);
        return TTUtils.px2Num(style.marginLeft) + TTUtils.px2Num(style.marginRight);
    }
    setScale(val) {
        const spanEl = this.span;
        if (!this.initData) {
            const style = getComputedStyle(spanEl);
            this.initData = new InitSizeData;
            this.initData.width = TTUtils.getElWidth(spanEl, false);
            this.initData.paddingLeft = TTUtils.px2Num(style.paddingLeft);
            this.initData.paddingRight = TTUtils.px2Num(style.paddingRight);
        }
        spanEl.style.width = TTUtils.num2px(Math.round(this.initData.width * val));
        spanEl.style.paddingLeft = TTUtils.num2px(Math.round(this.initData.paddingLeft * val));
        spanEl.style.paddingRight = TTUtils.num2px(Math.round(this.initData.paddingRight * val));
    }
    show(bool) {
        this.span.style.visibility = bool ? '' : 'hidden';
    }
    mClick(event) {
        if (this.stickDelay > 0) {
            switch (event.type) {
                case InputEvents.MOUSE_DOWN:
                case InputEvents.TOUCH_START:
                    this.resetStick();
                    this.stickInd = this.win.setTimeout(this.onStick.bind(this), this.stickDelay * 5, event.type);
                    break;
                default:
                    this.resetStick();
            }
        }
        this.mCallback(event.type);
    }
    onStick(event) {
        this.resetStick();
        this.stickInd = this.win.setInterval(this.mCallback.bind(this), this.stickDelay, event);
    }
    mCallback(event) {
        this.callback && this.callback(event, this.config, this.upper);
    }
    resetStick() {
        this.win.clearTimeout(this.stickInd);
        this.win.clearInterval(this.stickInd);
        this.stickInd = -1;
    }
}
KeyBtnAbstr.KEY_CLASS_HASH = new Map([
    [KeyboardKeys.SPACE, KeyboardCSS.SPACE_BAR],
    [KeyboardKeys.SPACE_WIDE, KeyboardCSS.SPACE_BAR_WIDE],
    [KeyboardKeys.SHIFT_RIGHT, KeyboardCSS.SHIFT],
    [KeyboardKeys.SHIFT_LEFT, KeyboardCSS.SHIFT],
    [KeyboardKeys.BACKSPACE, KeyboardCSS.BACKSPACE],
    [KeyboardKeys.BACKSPACE_WIDE, KeyboardCSS.BACKSPACE_WIDE],
    [KeyboardKeys.NUMPAD_0_WIDE, KeyboardCSS.WIDE],
    [KeyboardKeys.ENTER, KeyboardCSS.ENTER],
    [KeyboardKeys.CAPSLOCK, KeyboardCSS.CAPSLOCK],
    [KeyboardKeys.TAB, KeyboardCSS.TAB],
    [KeyboardKeys.ARROW_UP, KeyboardCSS.ARROW],
    [KeyboardKeys.ARROW_DOWN, KeyboardCSS.ARROW],
    [KeyboardKeys.ARROW_RIGHT, KeyboardCSS.ARROW],
    [KeyboardKeys.ARROW_LEFT, KeyboardCSS.ARROW],
    [KeyboardKeys.CHECK, KeyboardCSS.BLUE],
    [KeyboardKeys.CROSS, KeyboardCSS.CROSS],
    [KeyboardKeys.ALPHABET, KeyboardCSS.ALPHABET],
    [KeyboardKeys.NUMBERS, KeyboardCSS.NUMBERS],
    [KeyboardKeys.HOME, KeyboardCSS.HOME],
    [KeyboardKeys.MENU, KeyboardCSS.MENU],
    [KeyboardKeys.PREV, KeyboardCSS.PREV],
    [KeyboardKeys.NEXT, KeyboardCSS.NEXT],
    [KeyboardKeys.RESET, KeyboardCSS.RESET],
    [KeyboardKeys.CHECK_SEPARATE, KeyboardCSS.CHECK_SEPARATE],
    [KeyboardKeys.KBD, KeyboardCSS.KBD],
    [KeyboardKeys.SHIFT, KeyboardCSS.SHIFT],
    // [KeyboardKeys.UPPER, KeyboardCSS.UPPER],
    // [KeyboardKeys.LOWER, KeyboardCSS.LOWER],
]);
export default KeyBtnAbstr;
class InitSizeData {
    constructor() {
        this.width = 0;
        this.paddingLeft = 0;
        this.paddingRight = 0;
    }
}