Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-05-29 12:39:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #13110 from ctrlaltdavid/21866

Browse source 
Don't unnecessarily scroll HTML content when keyboard is raised
This commit is contained in:
Dante Ruiz 2018-05-15 11:00:38 -07:00 committed by GitHub
commit 931c8f5abe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 21 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
interface/resources/html/raiseAndLowerKeyboard.js
View file

@ -7,6 +7,9 @@
// //
// Sends messages over the EventBridge when text input is required. // Sends messages over the EventBridge when text input is required.
// //
/* global document, window, console, setTimeout, setInterval, EventBridge */
(function () { (function () {
var POLL_FREQUENCY = 500; // ms var POLL_FREQUENCY = 500; // ms
var MAX_WARNINGS = 3; var MAX_WARNINGS = 3;
@ -37,22 +40,24 @@
} }
return false; return false;
} }
}; }
function shouldSetNumeric() { function shouldSetNumeric() {
return document.activeElement.type === "number"; return document.activeElement.type === "number";
}; }
function scheduleBringToView(timeout) { function scheduleBringToView(timeout) {
setTimeout(function () {
var timer = setTimeout(function () { // If the element is not visible because the keyboard has been raised over the top of it, scroll it up into view.
clearTimeout(timer); // 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 elementRect = document.activeElement.getBoundingClientRect();
var absoluteElementTop = elementRect.top + window.scrollY; var VISUAL_MARGIN = 3;
var middle = absoluteElementTop - (window.innerHeight / 2); var delta = elementRect.y + elementRect.height + VISUAL_MARGIN - window.innerHeight;
if (delta > 0) {
window.scrollTo(0, middle); window.scrollBy(0, delta);
} else if (elementRect.y < VISUAL_MARGIN) {
window.scrollBy(0, elementRect.y - VISUAL_MARGIN);
}
}, timeout); }, timeout);
} }
@ -62,11 +67,13 @@
var passwordField = shouldSetPasswordField(); var passwordField = shouldSetPasswordField();
if (isWindowFocused && if (isWindowFocused &&
(keyboardRaised !== window.isKeyboardRaised || numericKeyboard !== window.isNumericKeyboard || passwordField !== window.isPasswordField)) { (keyboardRaised !== window.isKeyboardRaised || numericKeyboard !== window.isNumericKeyboard
|| passwordField !== window.isPasswordField)) {
if (typeof EventBridge !== "undefined" && EventBridge !== null) { if (typeof EventBridge !== "undefined" && EventBridge !== null) {
EventBridge.emitWebEvent( EventBridge.emitWebEvent(
keyboardRaised ? ("_RAISE_KEYBOARD" + (numericKeyboard ? "_NUMERIC" : "") + (passwordField ? "_PASSWORD" : "")) : "_LOWER_KEYBOARD" keyboardRaised ? ("_RAISE_KEYBOARD" + (numericKeyboard ? "_NUMERIC" : "")
+ (passwordField ? "_PASSWORD" : "")) : "_LOWER_KEYBOARD"
); );
} else { } else {
if (numWarnings < MAX_WARNINGS) { if (numWarnings < MAX_WARNINGS) {
@ -77,7 +84,7 @@
if (!window.isKeyboardRaised) { if (!window.isKeyboardRaised) {
scheduleBringToView(250); // Allow time for keyboard to be raised in QML. scheduleBringToView(250); // Allow time for keyboard to be raised in QML.
// 2DO: should it be rather done from 'client area height changed' event? // 2DO: should it be rather done from 'client area height changed' event?
} }
window.isKeyboardRaised = keyboardRaised; window.isKeyboardRaised = keyboardRaised;

1
scripts/system/html/entityList.html
View file

@ -14,7 +14,6 @@
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="js/eventBridgeLoader.js"></script> <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="js/spinButtons.js"></script> <script type="text/javascript" src="js/spinButtons.js"></script>
<script type="text/javascript" src="js/keyboardControl.js"></script>
<script type="text/javascript" src="js/entityList.js"></script> <script type="text/javascript" src="js/entityList.js"></script>
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>

1
scripts/system/html/entityProperties.html
View file

@ -20,7 +20,6 @@
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="js/eventBridgeLoader.js"></script> <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="js/spinButtons.js"></script> <script type="text/javascript" src="js/spinButtons.js"></script>
<script type="text/javascript" src="js/keyboardControl.js"></script>
<script type="text/javascript" src="js/entityProperties.js"></script> <script type="text/javascript" src="js/entityProperties.js"></script>
<script src="js/jsoneditor.min.js"></script> <script src="js/jsoneditor.min.js"></script>
</head> </head>

1
scripts/system/html/gridControls.html
View file

@ -16,7 +16,6 @@
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="js/eventBridgeLoader.js"></script> <script type="text/javascript" src="js/eventBridgeLoader.js"></script>
<script type="text/javascript" src="js/spinButtons.js"></script> <script type="text/javascript" src="js/spinButtons.js"></script>
<script type="text/javascript" src="js/keyboardControl.js"></script>
<script type="text/javascript" src="js/gridControls.js"></script> <script type="text/javascript" src="js/gridControls.js"></script>
</head> </head>
<body onload='loaded();'> <body onload='loaded();'>

2
scripts/system/html/js/entityList.js
View file

@ -444,8 +444,6 @@ function loaded() {
augmentSpinButtons(); augmentSpinButtons();
setUpKeyboardControl();
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function (event) { document.addEventListener("contextmenu", function (event) {
event.preventDefault(); event.preventDefault();

4
scripts/system/html/js/entityProperties.js
View file

@ -7,7 +7,7 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
/* global alert, augmentSpinButtons, clearTimeout, console, document, Element, EventBridge, /* global alert, augmentSpinButtons, clearTimeout, console, document, Element, EventBridge,
HifiEntityUI, JSONEditor, openEventBridge, setUpKeyboardControl, setTimeout, window, _ $ */ HifiEntityUI, JSONEditor, openEventBridge, setTimeout, window, _ $ */
var PI = 3.14159265358979; var PI = 3.14159265358979;
var DEGREES_TO_RADIANS = PI / 180.0; var DEGREES_TO_RADIANS = PI / 180.0;
@ -2157,8 +2157,6 @@ function loaded() {
augmentSpinButtons(); augmentSpinButtons();
setUpKeyboardControl();
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked // Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
document.addEventListener("contextmenu", function(event) { document.addEventListener("contextmenu", function(event) {
event.preventDefault(); event.preventDefault();

2
scripts/system/html/js/gridControls.js
View file

@ -129,8 +129,6 @@ function loaded() {
augmentSpinButtons(); augmentSpinButtons();
setUpKeyboardControl();
EventBridge.emitWebEvent(JSON.stringify({ type: 'init' })); EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
}); });
document.addEventListener("keydown", function (keyDown) { document.addEventListener("keydown", function (keyDown) {

73
scripts/system/html/js/keyboardControl.js
View file

@ -1,73 +0,0 @@
//
// keyboardControl.js
//
// Created by David Rowe on 28 Sep 2016.
// 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
//
function setUpKeyboardControl() {
var lowerTimer = null;
var isRaised = false;
var KEYBOARD_HEIGHT = 200;
function raiseKeyboard() {
window.isKeyboardRaised = true;
window.isNumericKeyboard = this.type === "number";
if (lowerTimer !== null) {
clearTimeout(lowerTimer);
lowerTimer = null;
}
EventBridge.emitWebEvent("_RAISE_KEYBOARD" + (this.type === "number" ? "_NUMERIC" : ""));
if (!isRaised) {
var delta = this.getBoundingClientRect().bottom + 10 - (document.body.clientHeight - KEYBOARD_HEIGHT);
if (delta > 0) {
setTimeout(function () {
document.body.scrollTop += delta;
}, 500); // Allow time for keyboard to be raised in QML.
}
}
isRaised = true;
}
function doLowerKeyboard() {
window.isKeyboardRaised = false;
window.isNumericKeyboard = false;
EventBridge.emitWebEvent("_LOWER_KEYBOARD");
lowerTimer = null;
isRaised = false;
}
function lowerKeyboard() {
// Delay lowering keyboard a little in case immediately raise it again.
if (lowerTimer === null) {
lowerTimer = setTimeout(doLowerKeyboard, 20);
}
}
function documentBlur() {
// Action any pending Lower keyboard event immediately upon leaving document window so that they don't interfere with
// other Entities Editor tab.
if (lowerTimer !== null) {
clearTimeout(lowerTimer);
doLowerKeyboard();
}
}
var inputs = document.querySelectorAll("input[type=text], input[type=password], input[type=number], textarea");
for (var i = 0, length = inputs.length; i < length; i++) {
inputs[i].addEventListener("focus", raiseKeyboard);
inputs[i].addEventListener("blur", lowerKeyboard);
}
window.addEventListener("blur", documentBlur);
}