github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 01:47:22 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Extract virtual keyboard code (#18267)

Browse Source 
Makes it possible for other code to use `.keyboard-visible` class on `<html>` element.
This commit is contained in:
Jarek Radosz 2022-09-16 21:09:28 +02:00 committed by GitHub
parent 40183080d9
commit 5259198c61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/discourse/app/components/composer-body.js
View File

@ -89,11 +89,6 @@ export default Component.extend(KeyEnterEscape, {
passive: false, passive: false,
}); });
}); });
if (this._visualViewportResizing()) {
this.viewportResize();
window.visualViewport.addEventListener("resize", this.viewportResize);
}
}, },
@bind @bind
@ -170,42 +165,9 @@ export default Component.extend(KeyEnterEscape, {
throttle(this, this.performDragHandler, event, THROTTLE_RATE); throttle(this, this.performDragHandler, event, THROTTLE_RATE);
}, },
@bind
viewportResize() {
const composerVH = window.visualViewport.height * 0.01,
doc = document.documentElement;
doc.style.setProperty("--composer-vh", `${composerVH}px`);
const viewportWindowDiff =
this.windowInnerHeight - window.visualViewport.height;
viewportWindowDiff > 0
? doc.classList.add("keyboard-visible")
: doc.classList.remove("keyboard-visible");
// adds bottom padding when using a hardware keyboard and the accessory bar is visible
// accessory bar height is 55px, using 75 allows a small buffer
doc.style.setProperty(
"--composer-ipad-padding",
`${viewportWindowDiff < 75 ? viewportWindowDiff : 0}px`
);
},
_visualViewportResizing() {
return (
(this.capabilities.isIpadOS || this.site.mobileView) &&
window.visualViewport !== undefined
);
},
didInsertElement() { didInsertElement() {
this._super(...arguments); this._super(...arguments);
if (this._visualViewportResizing()) {
this.set("windowInnerHeight", window.innerHeight);
}
this.setupComposerResizeEvents(); this.setupComposerResizeEvents();
const triggerOpen = () => { const triggerOpen = () => {
@ -225,10 +187,6 @@ export default Component.extend(KeyEnterEscape, {
willDestroyElement() { willDestroyElement() {
this._super(...arguments); this._super(...arguments);
if (this._visualViewportResizing()) {
window.visualViewport.removeEventListener("resize", this.viewportResize);
}
START_DRAG_EVENTS.forEach((startDragEvent) => { START_DRAG_EVENTS.forEach((startDragEvent) => {
this.element this.element
.querySelector(".grippie") .querySelector(".grippie")

47
app/assets/javascripts/discourse/app/initializers/mobile-keyboard.js Normal file
View File

@ -0,0 +1,47 @@
import { bind } from "discourse-common/utils/decorators";
export default {
name: "mobile-keyboard",
after: "mobile",
initialize(container) {
const site = container.lookup("service:site");
const capabilities = container.lookup("capabilities:main");
if (!capabilities.isIpadOS && !site.mobileView) {
return;
}
if (!window.visualViewport) {
return;
}
// TODO: Handle device rotation?
this.windowInnerHeight = window.innerHeight;
this.onViewportResize();
window.visualViewport.addEventListener("resize", this.onViewportResize);
},
teardown() {
window.visualViewport.removeEventListener("resize", this.onViewportResize);
},
@bind
onViewportResize() {
const composerVH = window.visualViewport.height * 0.01;
const doc = document.documentElement;
doc.style.setProperty("--composer-vh", `${composerVH}px`);
const heightDiff = this.windowInnerHeight - window.visualViewport.height;
doc.classList.toggle("keyboard-visible", heightDiff > 0);
// Add bottom padding when using a hardware keyboard and the accessory bar
// is visible accessory bar height is 55px, using 75 allows a small buffer
doc.style.setProperty(
"--composer-ipad-padding",
`${heightDiff < 75 ? heightDiff : 0}px`
);
},
};