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

DEV: De-jQuerify safari-hacks (#17456)

This commit is contained in:
Jarek Radosz 2022-07-13 12:33:39 +02:00 committed by GitHub
parent 32c4603dd5
commit f48a1ec648
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -215,7 +215,8 @@ export default Component.extend(KeyEnterEscape, {
afterTransition($(this.element), () => { afterTransition($(this.element), () => {
triggerOpen(); triggerOpen();
}); });
positioningWorkaround($(this.element));
positioningWorkaround(this.element);
}, },
willDestroyElement() { willDestroyElement() {

49
app/assets/javascripts/discourse/app/lib/safari-hacks.js
View File

@ -10,7 +10,7 @@ export function isWorkaroundActive() {
} }
// per http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/29064810 // per http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/29064810
function positioningWorkaround($fixedElement) { function positioningWorkaround(fixedElement) {
let caps = helperContext().capabilities; let caps = helperContext().capabilities;
if (!caps.isIOS) { if (!caps.isIOS) {
return; return;
@ -22,7 +22,6 @@ function positioningWorkaround($fixedElement) {
} }
}); });
const fixedElement = $fixedElement[0];
let originalScrollTop = 0; let originalScrollTop = 0;
let lastTouchedElement = null; let lastTouchedElement = null;
@ -30,10 +29,7 @@ function positioningWorkaround($fixedElement) {
if (workaroundActive) { if (workaroundActive) {
document.body.classList.remove("ios-safari-composer-hacks"); document.body.classList.remove("ios-safari-composer-hacks");
window.scrollTo(0, originalScrollTop); window.scrollTo(0, originalScrollTop);
evt?.target?.removeEventListener("blur", blurred);
if (evt && evt.target) {
evt.target.removeEventListener("blur", blurred);
}
workaroundActive = false; workaroundActive = false;
} }
@ -56,13 +52,13 @@ function positioningWorkaround($fixedElement) {
if ( if (
lastTouchedElement && lastTouchedElement &&
(document.visibilityState === "hidden" || (document.visibilityState === "hidden" ||
$fixedElement.hasClass("edit-title") || fixedElement.classList.contains("edit-title") ||
$(lastTouchedElement).hasClass("select-kit-header") || lastTouchedElement.classList.contains("select-kit-header") ||
$(lastTouchedElement).closest(".autocomplete").length || lastTouchedElement.closest(".autocomplete") ||
(lastTouchedElement.nodeName.toLowerCase() === "textarea" && (lastTouchedElement.nodeName === "TEXTAREA" &&
document.activeElement === lastTouchedElement) || document.activeElement === lastTouchedElement) ||
$(lastTouchedElement).closest(".d-editor-button-bar").length || lastTouchedElement.closest(".d-editor-button-bar") ||
$(lastTouchedElement).hasClass("emoji")) lastTouchedElement.classList.contains("emoji"))
) { ) {
return; return;
} }
@ -75,8 +71,6 @@ function positioningWorkaround($fixedElement) {
}; };
let positioningHack = function (evt) { let positioningHack = function (evt) {
let _this = this;
if (evt === undefined) { if (evt === undefined) {
evt = new CustomEvent("no-op"); evt = new CustomEvent("no-op");
} }
@ -86,10 +80,12 @@ function positioningWorkaround($fixedElement) {
// resets focus out of select-kit elements // resets focus out of select-kit elements
// might become redundant after select-kit refactoring // might become redundant after select-kit refactoring
$fixedElement.find(".select-kit.is-expanded > button").trigger("click"); fixedElement
$fixedElement .querySelectorAll(".select-kit.is-expanded > button")
.find(".select-kit > button.is-focused") .forEach((el) => el.click());
.removeClass("is-focused"); fixedElement
.querySelectorAll(".select-kit > button.is-focused")
.forEach((el) => el.classList.remove("is-focused"));
if (window.pageYOffset > 0) { if (window.pageYOffset > 0) {
originalScrollTop = window.pageYOffset; originalScrollTop = window.pageYOffset;
@ -109,7 +105,7 @@ function positioningWorkaround($fixedElement) {
} }
// don't trigger keyboard on disabled element (happens when a category is required) // don't trigger keyboard on disabled element (happens when a category is required)
if (_this.disabled) { if (this.disabled) {
return; return;
} }
@ -117,7 +113,7 @@ function positioningWorkaround($fixedElement) {
window.scrollTo(0, 0); window.scrollTo(0, 0);
evt.preventDefault(); evt.preventDefault();
_this.focus(); this.focus();
workaroundActive = true; workaroundActive = true;
}, delay); }, delay);
}; };
@ -141,8 +137,10 @@ function positioningWorkaround($fixedElement) {
function () { function () {
attachTouchStart(fixedElement, lastTouched); attachTouchStart(fixedElement, lastTouched);
$fixedElement.find("input[type=text],textarea").each(function () { fixedElement
attachTouchStart(this, positioningHack); .querySelectorAll("input[type=text], textarea")
.forEach((el) => {
attachTouchStart(el, positioningHack);
}); });
}, },
100 100
@ -154,14 +152,13 @@ function positioningWorkaround($fixedElement) {
triggerHack(); triggerHack();
}; };
const config = { const observer = new MutationObserver(checkForInputs);
observer.observe(fixedElement, {
childList: true, childList: true,
subtree: true, subtree: true,
attributes: false, attributes: false,
characterData: false, characterData: false,
}; });
const observer = new MutationObserver(checkForInputs);
observer.observe(fixedElement, config);
} }
export default positioningWorkaround; export default positioningWorkaround;