@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/keyboard/src/KeyboardBase.tsx

@@ -0,0 +1,325 @@
+import { Component, createRef, Reference } from '@24i/bigscreen-sdk/jsx';
+import { getKeyDigit } from '@24i/bigscreen-sdk/device';
+import { EventsManager } from '@24i/bigscreen-sdk/events-manager';
+import {
+    Matrix,
+    focusCandidate,
+    setActiveElementAsFocusCandidate,
+    Index2D,
+    CircularDirection,
+} from '@24i/bigscreen-sdk/focus';
+import { IKeyboard, IKeyboardEvents } from '@24i/bigscreen-sdk/ime';
+import { forEach } from '@24i/bigscreen-sdk/perf-utils/array';
+import { addClass } from '@24i/bigscreen-sdk/utils/addClass';
+import { removeClass } from '@24i/bigscreen-sdk/utils/removeClass';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import {
+    DISPLAY_NONE,
+    getDisplayToggler,
+    IDisplayToggler,
+} from '@24i/bigscreen-sdk/utils/displayToggler';
+import { stopEvent } from '@24i/bigscreen-sdk/utils/stopEvent';
+import { caretLeft, caretRight } from './utils/caret';
+import { backspace, insertCharAtCaret } from './utils/input';
+import { generateFocusMatrixFromStringMatrix } from './utils/generateFocusMatrixFromStringMatrix';
+import { hwKeyboardEventToChar } from './hwKeyboardEventToChar';
+import { ShiftMode } from './ShiftMode';
+import { KeyMatrixCell } from './types';
+
+const SHIFT_ACTIVE_CLASS = 'shift-active';
+const CAPS_ACTIVE_CLASS = 'caps-active';
+
+type ShiftState = 'off' | 'shift' | 'caps';
+
+export type BaseProps<Layouts extends string> = {
+    layouts?: Record<Layouts, KeyMatrixCell[][]>,
+    initialFocus?: Index2D,
+    initiallyIsHidden?: boolean,
+    handleRemoteDigits?: boolean;
+    handleHWKeyboard?: boolean,
+    circular?: CircularDirection;
+    shouldHideOnBackdropClick?: boolean;
+    shiftMode?: ShiftMode,
+    className?: string,
+};
+
+export abstract class KeyboardBase<
+    Layouts extends string,
+    Props extends BaseProps<Layouts>,
+> extends Component<Props> implements IKeyboard {
+    static defaultProps = {
+        className: 'keyboard',
+        initiallyIsHidden: true,
+        handleRemoteDigits: true,
+        handleHWKeyboard: true,
+        circular: CircularDirection.HORIZONTAL,
+        shouldHideOnBackdropClick: true,
+        shiftMode: 'combined',
+    };
+
+    events: EventsManager<IKeyboardEvents> = new EventsManager();
+
+    addEventListener = this.events.addEventListener;
+
+    removeEventListener = this.events.removeEventListener;
+
+    triggerEvent = this.events.triggerEvent;
+
+    /**
+     * Main wrapping element.
+     */
+    keyboardWrapper = createRef<HTMLDivElement>();
+
+    /**
+     * Focus Matrix component.
+     */
+    matrix = createRef<Matrix>();
+
+    /**
+     * Input element that is controlled by the Keyboard.
+     */
+    inputElement: HTMLInputElement | null = null;
+
+    /**
+     * DisplayToggler for the {@link KeyboardBase.keyboardWrapper main wrapper}.
+     */
+    displayToggler: IDisplayToggler;
+
+    /**
+     * Resolve function to call once the input is finished.
+     */
+    inputResolver: ((value: boolean) => void) | null = null;
+
+    /**
+     * State of the shift activity.
+     */
+    shiftState: ShiftState = 'off';
+
+    /**
+     * Record of focus matrices [key === layout].
+     */
+    // @ts-ignore - filled up during constructor
+    focusMatrices: Record<Layouts, Reference<HTMLDivElement>[][]> = {};
+
+    /**
+     * References to the keys by their name.
+     */
+    keyRefs: Record<string, Reference<HTMLDivElement>> = {};
+
+    constructor(props: Props) {
+        super(props);
+        const { layouts, initiallyIsHidden } = this.props;
+        this.displayToggler = getDisplayToggler(this.keyboardWrapper, initiallyIsHidden);
+        this.createFocusMatrices(layouts!);
+    }
+
+    /**
+     * Keyboard event handler, like arrow keys.
+     * NOTE: Bound to base keyboard class!
+     * @param event keyboard event to handle
+     */
+    onKeyDown(event: KeyboardEvent) {
+        const { handleRemoteDigits, handleHWKeyboard } = this.props;
+        const digit = getKeyDigit(event);
+        if (BACK.is(event)) {
+            this.onCancel();
+        } else if (handleHWKeyboard) {
+            const char = hwKeyboardEventToChar(event);
+            if (char) this.onKey(char);
+        } else if (handleRemoteDigits && typeof digit === 'number') {
+            this.onKey(digit.toString());
+        }
+        stopEvent(event);
+    }
+
+    /**
+     * Positively finishes the input (Done, Continue, etc.)
+     * NOTE: Bound to base keyboard class!
+     */
+    onDone() {
+        this.finishInput();
+    }
+
+    /**
+     * Negatively finishes the input (Cancel, etc.)
+     */
+    onCancel() {
+        this.finishInput(true);
+    }
+
+    /**
+     * To go to/from shifted (capitals) layer.
+     */
+    onShift() {
+        const { shiftMode } = this.props;
+        if (this.shiftState === 'caps') {
+            this.shiftState = 'off';
+            removeClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+            return;
+        }
+        if (this.shiftState === 'shift') {
+            if (shiftMode === 'shift_only') {
+                this.shiftState = 'off';
+                removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+            } else {
+                this.shiftState = 'caps';
+                addClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+                removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+            }
+            return;
+        }
+        if (shiftMode !== 'caps_only') {
+            this.shiftState = 'shift';
+            addClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+        } else {
+            this.shiftState = 'caps';
+            addClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+        }
+    }
+
+    /**
+     * Removes the character before the caret.
+     */
+    onBackspace() {
+        const newValue = backspace(this.inputElement!);
+        if (typeof newValue === 'string') {
+            this.updateCaretPosition();
+        }
+    }
+
+    /**
+     * Clears the whole input.
+     */
+    onClear() {
+        const previous = this.inputElement!.value;
+        this.inputElement!.value = '';
+        if (previous !== '') {
+            this.updateCaretPosition();
+        }
+    }
+
+    /**
+     * Moves caret 1 position to the left.
+     */
+    onLeft() {
+        const newPosition = caretLeft(this.inputElement);
+        if (typeof newPosition === 'number') {
+            this.updateCaretPosition(newPosition);
+        }
+    }
+
+    /**
+     * Moves caret 1 position to the right.
+     */
+    onRight() {
+        const newPosition = caretRight(this.inputElement);
+        if (typeof newPosition === 'number') {
+            this.updateCaretPosition(newPosition);
+        }
+    }
+
+    /**
+     * General value key press.
+     * @param char pressed character to be added to the input.
+     */
+    onKey(char: string) {
+        const charToInsert = this.isShiftActive() ? char.toUpperCase() : char;
+        this.updateShiftStateAfterKeyPress();
+        const newValue = insertCharAtCaret(this.inputElement, charToInsert);
+        if (typeof newValue === 'string') {
+            this.updateCaretPosition();
+        }
+    }
+
+    /**
+     * Creates focus matrices from the layouts.
+     */
+    createFocusMatrices(matrices: Record<Layouts, KeyMatrixCell[][]>) {
+        forEach(Object.keys(matrices) as Layouts[], (matrixName) => {
+            this.focusMatrices[matrixName] = generateFocusMatrixFromStringMatrix(
+                this.keyRefs, matrices[matrixName],
+            );
+        });
+    }
+
+    async input(input: HTMLInputElement): Promise<boolean> {
+        const { initialFocus } = this.props;
+        this.inputElement = input;
+        setActiveElementAsFocusCandidate();
+        this.show();
+        this.matrix.current!.setIndex(initialFocus!);
+        this.matrix.current!.focus();
+        return new Promise((resolve) => {
+            this.inputResolver = resolve;
+        });
+    }
+
+    /**
+     * Finishes the inputting.
+     */
+    finishInput(cancelled = false) {
+        this.inputElement = null;
+        this.hide();
+        focusCandidate();
+        this.inputResolver!(cancelled);
+        this.inputResolver = null;
+    }
+
+    /**
+     * Triggers event to update caret position.
+     */
+    updateCaretPosition(newPosition: number = this.inputElement!.selectionStart!) {
+        this.triggerEvent('caretpositionchange', newPosition);
+    }
+
+    /**
+     * Shows the keyboard.
+     */
+    show() {
+        this.displayToggler.show();
+    }
+
+    /**
+     * Hides the keyboard and restores shift state to OFF.
+     */
+    hide() {
+        this.displayToggler.hide();
+        this.shiftState = 'off';
+        removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+        removeClass(this.keyboardWrapper, CAPS_ACTIVE_CLASS);
+    }
+
+    /**
+     * Returns whether the shiftState is SHIFT or CAPS.
+     * @returns true for 'shift' or 'caps', false for 'off'
+     */
+    isShiftActive() {
+        return this.shiftState !== 'off';
+    }
+
+    /**
+     * Turns off shift if shiftState was SHIFT.
+     */
+    updateShiftStateAfterKeyPress() {
+        if (this.shiftState === 'shift') {
+            this.shiftState = 'off';
+            removeClass(this.keyboardWrapper, SHIFT_ACTIVE_CLASS);
+        }
+    }
+
+    render() {
+        const { className } = this.props;
+        return (
+            <div
+                ref={this.keyboardWrapper}
+                className={
+                    this.displayToggler.isHidden()
+                        ? `${className} ${DISPLAY_NONE}`
+                        : className
+                }
+                tabIndex={0}
+                onKeyDown={(event) => this.onKeyDown(event)}
+            />
+        );
+    }
+}

package/packages/keyboard/src/MobiKeyboard/Keyboard.scss

@@ -0,0 +1,180 @@
+$background-color: #121317;
+$key-text-color: #aaa;
+$key-color: #dcdcdc;
+$focus-color: #f0f0f0;
+$focus-text-color: #000;
+
+$double-key-width: ($key-width + $key-margin) * 2 - 2;
+$double-key-margin: $key-margin + 2;
+
+$done-key-height: ($key-height * 3) + ($key-margin * 4);
+$done-key-line-height: ($line-height * 3) + ($key-margin * 3);
+$space-key-width: ($key-width * 11) + ($key-margin * 20);
+
+@mixin mask-icon {
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+}
+
+.keyboard {
+    position: absolute;
+    left: $margin-horizontal;
+    bottom: $margin-bottom;
+    right: $margin-horizontal;
+    padding: $padding;
+  
+    z-index: 10;
+    background-color: $background-color;
+
+    &.shift-active,
+    &.caps-active {
+        text-transform: uppercase;
+
+        .key-shift,
+        .key-clear,
+        .key-done,
+        .key-cancel {
+            text-transform: none;
+        }
+    }
+
+    &.caps-active .key-shift::before {
+        content: '⬤';
+        position: absolute;
+        left: $caps-indicator-left;
+        font-size: 0.35em;
+    }
+
+    .keyboard-row {
+        position: relative;
+        text-align: center;
+    }
+
+    .key {
+        font-size: $font-size;
+        font-weight: bold;
+        display: inline-block;
+        width: $key-width;
+        height: $key-height;
+        margin: $key-margin;
+        line-height: $line-height;
+        text-align: center;
+        background-color: rgba($key-color, 0.1);
+        color: $key-text-color;
+        outline: none;
+
+        &.key-icon {
+            background-position: center;
+            background-repeat: no-repeat;
+            vertical-align: bottom;
+
+            .key-mask-icon {
+                background-color: $key-text-color;
+                display: inline-block;
+                width: $icon-width;
+                height: 100%;
+            }
+        }
+
+        &:focus {
+            background-color: $focus-color;
+            color: $focus-text-color;
+
+            .key-mask-icon {
+                background-color: $focus-text-color;
+            }
+        }
+
+        &.key-space {
+            width: $space-key-width;
+
+            .key-mask-icon {
+                -webkit-mask: url('./icons/key_space.svg');
+                mask: url('./icons/key_space.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.done-container {
+            margin-right: -$key-width - $key-margin;
+            position: relative;
+            vertical-align: bottom;
+            background: none;
+        }
+
+        &.key-done {
+            position: absolute;
+            margin: 0;
+            top: -$key-height - ($key-margin * 2);
+            left: 0;
+            height: $done-key-height;
+            line-height: $done-key-line-height;
+            width: $double-key-width;
+        }
+
+        &.key-backspace {
+            .key-mask-icon {
+                -webkit-mask: url('./icons/key_backspace.svg');
+                mask: url('./icons/key_backspace.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.key-left {
+            .key-mask-icon {
+                -webkit-mask: url('./icons/arrow_left.svg');
+                mask: url('./icons/arrow_left.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.key-right {
+            .key-mask-icon {
+                -webkit-mask: url('./icons/arrow_right.svg');
+                mask: url('./icons/arrow_right.svg');
+                /* stylelint-disable */
+                @include mask-icon;
+                /* stylelint-enable */
+            }
+        }
+
+        &.key-fill {
+            background: none;
+            vertical-align: bottom;
+
+            &.double {
+                width: $double-key-width;
+            }
+        }
+
+        &.key-special {
+            width: $double-key-width;
+            margin-left: $double-key-margin;
+        }
+
+        &.key-clear {
+            width: $double-key-width;
+            margin-right: $double-key-margin;
+        }
+
+        &.key-shift {
+            width: $double-key-width;
+            margin-left: $double-key-margin;
+        }
+
+        &.key-cancel {
+            width: $double-key-width;
+            margin-right: $double-key-margin;
+        }
+    }
+}

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Keyboard';

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.animated.1080.scss

@@ -0,0 +1,3 @@
+@import './sizes.1080';
+@import './Keyboard';
+@import './animated';

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.animated.scss

@@ -0,0 +1,3 @@
+@import './sizes';
+@import './Keyboard';
+@import './animated';

package/packages/keyboard/src/MobiKeyboard/Keyboard.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Keyboard';