Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

FIX: keyboard on android (#21505)

This commit is contained in:
Joffrey JAFFEUX 2023-05-11 16:12:48 +02:00 committed by GitHub
parent 26f9ccd8bb
commit 0c27baef76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
plugins/chat/assets/javascripts/discourse/components/chat-vh.js
View File

@ -3,7 +3,6 @@ import Component from "@ember/component";
import isZoomed from "discourse/plugins/chat/discourse/lib/zoom-check"; import isZoomed from "discourse/plugins/chat/discourse/lib/zoom-check";
const CSS_VAR = "--chat-vh"; const CSS_VAR = "--chat-vh";
let pendingUpdate = false;
export default class ChatVh extends Component { export default class ChatVh extends Component {
tagName = ""; tagName = "";
@ -11,16 +10,16 @@ export default class ChatVh extends Component {
didInsertElement() { didInsertElement() {
this._super(...arguments); this._super(...arguments);
this.setVHFromVisualViewPort();
if ("virtualKeyboard" in navigator) { if ("virtualKeyboard" in navigator) {
this.setVHFromKeyboard(); navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener( navigator.virtualKeyboard.addEventListener(
"geometrychange", "geometrychange",
this.setVHFromKeyboard this.setVHFromKeyboard
); );
} else { } else {
this.setVHFromVisualViewPort();
(window?.visualViewport || window).addEventListener( (window?.visualViewport || window).addEventListener(
"resize", "resize",
this.setVHFromVisualViewPort this.setVHFromVisualViewPort
@ -42,16 +41,10 @@ export default class ChatVh extends Component {
this.setVHFromVisualViewPort this.setVHFromVisualViewPort
); );
} }
pendingUpdate = false;
} }
@bind @bind
setVHFromKeyboard(event) { setVHFromKeyboard(event) {
if (pendingUpdate) {
return;
}
if (this.isDestroying || this.isDestroyed) { if (this.isDestroying || this.isDestroyed) {
return; return;
} }
@ -60,24 +53,20 @@ export default class ChatVh extends Component {
return; return;
} }
pendingUpdate = true;
requestAnimationFrame(() => { requestAnimationFrame(() => {
const { height } = event.target.boundingRect; requestAnimationFrame(() => {
const vhInPixels = const keyboardHeight = event.target.boundingRect.height;
((window.visualViewport?.height || window.innerHeight) - height) * 0.01; const viewportHeight =
document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`); window.visualViewport?.height || window.innerHeight;
pendingUpdate = false; const vhInPixels = (viewportHeight - keyboardHeight) * 0.01;
document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`);
});
}); });
} }
@bind @bind
setVHFromVisualViewPort() { setVHFromVisualViewPort() {
if (pendingUpdate) {
return;
}
if (this.isDestroying || this.isDestroyed) { if (this.isDestroying || this.isDestroyed) {
return; return;
} }
@ -86,14 +75,10 @@ export default class ChatVh extends Component {
return; return;
} }
pendingUpdate = true;
requestAnimationFrame(() => { requestAnimationFrame(() => {
const vhInPixels = const vhInPixels =
(window.visualViewport?.height || window.innerHeight) * 0.01; (window.visualViewport?.height || window.innerHeight) * 0.01;
document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`); document.documentElement.style.setProperty(CSS_VAR, `${vhInPixels}px`);
pendingUpdate = false;
}); });
} }
} }