overte/interface/resources/html/raiseAndLowerKeyboard.js

//
//  Created by Anthony Thibault on 2016-09-02
//  Copyright 2016 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//
//  Sends messages over the EventBridge when text input is required.
//

/* global document, window, console, setTimeout, setInterval, EventBridge */

(function () {
    var POLL_FREQUENCY = 500; // ms
    var MAX_WARNINGS = 3;
    var numWarnings = 0;
    var isWindowFocused = true;
    window.isKeyboardRaised = false;
    window.isNumericKeyboard = false;
    window.isPasswordField = false;
    window.lastActiveInputElement = null;

    function getActiveElement() {
        return document.activeElement;
    }

    function shouldSetPasswordField() {
        var nodeType = document.activeElement.type;
        return nodeType === "password";
    }

    function shouldRaiseKeyboard() {
        var nodeName = document.activeElement.nodeName;
        var nodeType = document.activeElement.type;
        if (nodeName === "INPUT" && ["email", "number", "password", "tel", "text", "url", "search"].indexOf(nodeType) !== -1
            || document.activeElement.nodeName === "TEXTAREA") {
            return true;
        } else {
            // check for contenteditable attribute
            for (var i = 0; i < document.activeElement.attributes.length; i++) {
                if (document.activeElement.attributes[i].name === "contenteditable" &&
                    document.activeElement.attributes[i].value === "true") {
                    return true;
                }
            }
            return false;
        }
    }

    function shouldSetNumeric() {
        return document.activeElement.type === "number";
    }

    function scheduleBringToView(timeout) {
        setTimeout(function () {
            // If the element is not visible because the keyboard has been raised over the top of it, scroll it up into view.
            // If the element is not visible because the keyboard raising has moved it off screen, scroll it down into view.
            var elementRect = document.activeElement.getBoundingClientRect();
            var VISUAL_MARGIN = 3;
            var delta = elementRect.y + elementRect.height + VISUAL_MARGIN - window.innerHeight;
            if (delta > 0) {
                window.scrollBy(0, delta);
            } else if (elementRect.y < VISUAL_MARGIN) {
                window.scrollBy(0, elementRect.y - VISUAL_MARGIN);
            }
        }, timeout);
    }

    setInterval(function () {
        var keyboardRaised = shouldRaiseKeyboard();
        var numericKeyboard = shouldSetNumeric();
        var passwordField = shouldSetPasswordField();
        var activeInputElement = null;
        // Only set the active input element when there is an input element focussed, otherwise it will scroll on body focus as well.
        if (keyboardRaised) {
            activeInputElement = getActiveElement();
        }

        if (isWindowFocused &&
            (keyboardRaised !== window.isKeyboardRaised || numericKeyboard !== window.isNumericKeyboard
                || passwordField !== window.isPasswordField || activeInputElement !== window.lastActiveInputElement)) {

            if (typeof EventBridge !== "undefined" && EventBridge !== null) {
                EventBridge.emitWebEvent(
                    keyboardRaised ? ("_RAISE_KEYBOARD" + (numericKeyboard ? "_NUMERIC" : "")
                        + (passwordField ? "_PASSWORD" : "")) : "_LOWER_KEYBOARD"
                );
            } else {
                if (numWarnings < MAX_WARNINGS) {
                    console.log("WARNING: No global EventBridge object found");
                    numWarnings++;
                }
            }

            if (!window.isKeyboardRaised) {
                scheduleBringToView(250); // Allow time for keyboard to be raised in QML.
                // 2DO: should it be rather done from 'client area height changed' event?
            }

            window.isKeyboardRaised = keyboardRaised;
            window.isNumericKeyboard = numericKeyboard;
            window.isPasswordField = passwordField;
            window.lastActiveInputElement = activeInputElement;
        }
    }, POLL_FREQUENCY);

    window.addEventListener("click", function () {
        var keyboardRaised = shouldRaiseKeyboard();
        if (keyboardRaised && window.isKeyboardRaised) {
            scheduleBringToView(150);
        }
    });

    window.addEventListener("focus", function () {
        isWindowFocused = true;
    });

    window.addEventListener("blur", function () {
        isWindowFocused = false;
        window.isKeyboardRaised = false;
        window.isNumericKeyboard = false;
    });
})();