remove safari-hacks file
This commit is contained in:
Penar Musaraj
parent
7e9a21c520
commit
9157ce9303
|
|
@ -1,167 +0,0 @@
|
|||
import $ from "jquery";
|
||||
import { INPUT_DELAY } from "discourse-common/config/environment";
|
||||
import discourseDebounce from "discourse-common/lib/debounce";
|
||||
import { helperContext } from "discourse-common/lib/helpers";
|
||||
import discourseLater from "discourse-common/lib/later";
|
||||
|
||||
let workaroundActive = false;
|
||||
|
||||
export function isWorkaroundActive() {
|
||||
return workaroundActive;
|
||||
}
|
||||
|
||||
// per http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/29064810
|
||||
function positioningWorkaround(fixedElement) {
|
||||
let caps = helperContext().capabilities;
|
||||
if (!caps.isIOS) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.addEventListener("scroll", () => {
|
||||
if (!caps.isIpadOS && workaroundActive) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
let originalScrollTop = 0;
|
||||
let lastTouchedElement = null;
|
||||
|
||||
positioningWorkaround.blur = function (evt) {
|
||||
if (workaroundActive) {
|
||||
document.body.classList.remove("ios-safari-composer-hacks");
|
||||
window.scrollTo(0, originalScrollTop);
|
||||
evt?.target?.removeEventListener("blur", blurred);
|
||||
|
||||
workaroundActive = false;
|
||||
}
|
||||
};
|
||||
|
||||
let blurredNow = function (evt) {
|
||||
// we cannot use evt.relatedTarget to get the last focused element in safari iOS
|
||||
// document.activeElement is also unreliable (iOS does not mark buttons as focused)
|
||||
// so instead, we store the last touched element and check against it
|
||||
|
||||
// cancel blur event when:
|
||||
// - switching to another iOS app
|
||||
// - displaying title field
|
||||
// - invoking a select-kit dropdown
|
||||
// - invoking mentions
|
||||
// - invoking emoji dropdown via : and hitting return
|
||||
// - invoking a button in the editor toolbar
|
||||
// - tapping on emoji in the emoji modal
|
||||
// - tapping on the upload button
|
||||
// - tapping on the edit reason icon/input
|
||||
|
||||
if (
|
||||
lastTouchedElement &&
|
||||
(document.visibilityState === "hidden" ||
|
||||
fixedElement.classList.contains("edit-title") ||
|
||||
lastTouchedElement.classList.contains("select-kit-header") ||
|
||||
lastTouchedElement.closest(".autocomplete") ||
|
||||
(lastTouchedElement.nodeName === "TEXTAREA" &&
|
||||
document.activeElement === lastTouchedElement) ||
|
||||
lastTouchedElement.closest(".d-editor-button-bar") ||
|
||||
lastTouchedElement.classList.contains("emoji") ||
|
||||
lastTouchedElement.closest(".mobile-file-upload") ||
|
||||
lastTouchedElement.closest(".display-edit-reason"))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
positioningWorkaround.blur(evt);
|
||||
};
|
||||
|
||||
let blurred = function (evt) {
|
||||
discourseDebounce(this, blurredNow, evt, INPUT_DELAY);
|
||||
};
|
||||
|
||||
let positioningHack = function (evt) {
|
||||
if (evt === undefined) {
|
||||
evt = new CustomEvent("no-op");
|
||||
}
|
||||
|
||||
// we need this, otherwise changing focus means we never clear
|
||||
this.addEventListener("blur", blurred);
|
||||
|
||||
// resets focus out of select-kit elements
|
||||
// might become redundant after select-kit refactoring
|
||||
fixedElement
|
||||
.querySelectorAll(".select-kit.is-expanded > button")
|
||||
.forEach((el) => el.click());
|
||||
fixedElement
|
||||
.querySelectorAll(".select-kit > button.is-focused")
|
||||
.forEach((el) => el.classList.remove("is-focused"));
|
||||
|
||||
if (window.pageYOffset > 0) {
|
||||
originalScrollTop = window.pageYOffset;
|
||||
}
|
||||
|
||||
let delay = caps.isIpadOS ? 350 : 150;
|
||||
|
||||
discourseLater(() => {
|
||||
if (caps.isIpadOS) {
|
||||
// disable hacks when using a hardware keyboard
|
||||
// by default, a hardware keyboard will show the keyboard accessory bar
|
||||
// whose height is currently 55px (using 75 for a bit of a buffer)
|
||||
let heightDiff = window.innerHeight - window.visualViewport.height;
|
||||
if (heightDiff < 75) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// don't trigger keyboard on disabled element (happens when a category is required)
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.body.classList.add("ios-safari-composer-hacks");
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
evt.preventDefault();
|
||||
this.focus();
|
||||
workaroundActive = true;
|
||||
}, delay);
|
||||
};
|
||||
|
||||
let lastTouched = function (evt) {
|
||||
if (evt && evt.target) {
|
||||
lastTouchedElement = evt.target;
|
||||
}
|
||||
};
|
||||
|
||||
function attachTouchStart(elem, fn) {
|
||||
if (!$(elem).data("listening")) {
|
||||
elem.addEventListener("touchstart", fn);
|
||||
$(elem).data("listening", true);
|
||||
}
|
||||
}
|
||||
|
||||
function checkForInputs() {
|
||||
attachTouchStart(fixedElement, lastTouched);
|
||||
|
||||
fixedElement
|
||||
.querySelectorAll("input[type=text], textarea")
|
||||
.forEach((el) => {
|
||||
attachTouchStart(el, positioningHack);
|
||||
});
|
||||
}
|
||||
|
||||
function debouncedCheckForInputs() {
|
||||
discourseDebounce(checkForInputs, 100);
|
||||
}
|
||||
|
||||
positioningWorkaround.touchstartEvent = function (element) {
|
||||
let triggerHack = positioningHack.bind(element);
|
||||
triggerHack();
|
||||
};
|
||||
|
||||
const observer = new MutationObserver(debouncedCheckForInputs);
|
||||
observer.observe(fixedElement, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
attributes: false,
|
||||
characterData: false,
|
||||
});
|
||||
}
|
||||
|
||||
export default positioningWorkaround;
|
||||
Loading…
Reference in New Issue