From 2beeeddca2e3cd8312da81ae270248ecb53be295 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Mon, 8 Apr 2024 17:31:33 +0900
Subject: [PATCH] chore (client): replace pageXOffset (pageYOffset) with
scrollX (scrollY)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
https://github.com/misskey-dev/misskey/commit/b4b47d85cf50486980cc3fa3575cf48c7fb0a2e7
Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
---
packages/client/assets/tagcanvas.min.js | 4 +-
.../client/src/components/MkContextMenu.vue | 8 ++--
packages/client/src/components/MkModal.vue | 23 ++++------
.../src/components/MkUrlPreviewPopup.vue | 4 +-
.../client/src/components/MkUserPreview.vue | 5 +--
packages/client/src/scripts/popup-position.ts | 42 +++++++++----------
.../client/src/scripts/use-chart-tooltip.ts | 6 +--
7 files changed, 40 insertions(+), 52 deletions(-)
diff --git a/packages/client/assets/tagcanvas.min.js b/packages/client/assets/tagcanvas.min.js
index 526dec528d..60f5306807 100644
--- a/packages/client/assets/tagcanvas.min.js
+++ b/packages/client/assets/tagcanvas.min.js
@@ -968,8 +968,8 @@
a = c.documentElement,
d = c.body,
e = window,
- h = e.pageXOffset || a.scrollLeft,
- i = e.pageYOffset || a.scrollTop,
+ h = e.scrollX || a.scrollLeft,
+ i = e.scrollY || a.scrollTop,
j = a.clientLeft || d.clientLeft,
k = a.clientTop || d.clientTop;
return { x: b.left + h - j, y: b.top + i - k };
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index 42c9f74e1f..319f7fd0fe 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -39,12 +39,12 @@ onMounted(() => {
const width = rootEl.value.offsetWidth;
const height = rootEl.value.offsetHeight;
- if (left + width - window.pageXOffset > window.innerWidth) {
- left = window.innerWidth - width + window.pageXOffset;
+ if (left + width - window.scrollX > window.innerWidth) {
+ left = window.innerWidth - width + window.scrollX;
}
- if (top + height - window.pageYOffset > window.innerHeight) {
- top = window.innerHeight - height + window.pageYOffset;
+ if (top + height - window.scrollY > window.innerHeight) {
+ top = window.innerHeight - height + window.scrollY;
}
if (top < 0) {
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 1c9a252dda..a0552ec18d 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -238,8 +238,8 @@ const align = () => {
let left;
let top;
- const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
- const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
+ const x = srcRect.left + (fixed.value ? 0 : window.scrollX);
+ const y = srcRect.top + (fixed.value ? 0 : window.scrollY);
if (props.anchor.x === "center") {
left = x + props.src.offsetWidth / 2 - width / 2;
@@ -287,7 +287,7 @@ const align = () => {
left = window.innerWidth - width + window.scrollX - 1;
}
- const underSpace = window.innerHeight - MARGIN - (top - window.pageYOffset);
+ const underSpace = window.innerHeight - MARGIN - (top - window.scrollY);
const upperSpace = srcRect.top - MARGIN;
// 画面から縦にはみ出る場合
@@ -300,7 +300,7 @@ const align = () => {
top = window.scrollY + (upperSpace + MARGIN - height);
}
} else {
- top = window.innerHeight - MARGIN - height + window.pageYOffset - 1;
+ top = window.innerHeight - MARGIN - height + window.scrollY - 1;
}
} else {
maxHeight.value = underSpace;
@@ -320,28 +320,21 @@ const align = () => {
if (
top >=
- srcRect.top +
- props.src.offsetHeight +
- (fixed.value ? 0 : window.pageYOffset)
+ srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.scrollY)
) {
transformOriginY = "top";
- } else if (
- top + height <=
- srcRect.top + (fixed.value ? 0 : window.pageYOffset)
- ) {
+ } else if (top + height <= srcRect.top + (fixed.value ? 0 : window.scrollY)) {
transformOriginY = "bottom";
}
if (
left >=
- srcRect.left +
- props.src.offsetWidth +
- (fixed.value ? 0 : window.pageXOffset)
+ srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.scrollX)
) {
transformOriginX = "left";
} else if (
left + width <=
- srcRect.left + (fixed.value ? 0 : window.pageXOffset)
+ srcRect.left + (fixed.value ? 0 : window.scrollX)
) {
transformOriginX = "right";
}
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index 0f0ac1ec68..c5d64e0cf0 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -36,8 +36,8 @@ onMounted(() => {
const rect = props.source.getBoundingClientRect();
const x =
Math.max(rect.left + props.source.offsetWidth / 2 - 300 / 2, 6) +
- window.pageXOffset;
- const y = rect.top + props.source.offsetHeight + window.pageYOffset;
+ window.scrollX;
+ const y = rect.top + props.source.offsetHeight + window.scrollY;
top.value = y;
left.value = x;
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index fe2ef8e3f2..aff822dbf9 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -66,9 +66,8 @@ onMounted(() => {
}
const rect = props.source.getBoundingClientRect();
- const x =
- rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset;
- const y = rect.top + props.source.offsetHeight + window.pageYOffset;
+ const x = rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.scrollX;
+ const y = rect.top + props.source.offsetHeight + window.scrollY;
top.value = y;
left.value = x;
diff --git a/packages/client/src/scripts/popup-position.ts b/packages/client/src/scripts/popup-position.ts
index 905e7bc716..658012bcc9 100644
--- a/packages/client/src/scripts/popup-position.ts
+++ b/packages/client/src/scripts/popup-position.ts
@@ -24,9 +24,8 @@ export function calcPopupPosition(
let top: number;
if (props.anchorElement) {
- left =
- rect.left + window.pageXOffset + props.anchorElement.offsetWidth / 2;
- top = rect.top + window.pageYOffset - contentHeight - props.innerMargin;
+ left = rect.left + window.scrollX + props.anchorElement.offsetWidth / 2;
+ top = rect.top + window.scrollY - contentHeight - props.innerMargin;
} else {
left = props.x;
top = props.y - contentHeight - props.innerMargin;
@@ -34,8 +33,8 @@ export function calcPopupPosition(
left -= el.offsetWidth / 2;
- if (left + contentWidth - window.pageXOffset > window.innerWidth) {
- left = window.innerWidth - contentWidth + window.pageXOffset - 1;
+ if (left + contentWidth - window.scrollX > window.innerWidth) {
+ left = window.innerWidth - contentWidth + window.scrollX - 1;
}
return [left, top];
@@ -46,11 +45,10 @@ export function calcPopupPosition(
let top: number;
if (props.anchorElement) {
- left =
- rect.left + window.pageXOffset + props.anchorElement.offsetWidth / 2;
+ left = rect.left + window.scrollX + props.anchorElement.offsetWidth / 2;
top =
rect.top +
- window.pageYOffset +
+ window.scrollY +
props.anchorElement.offsetHeight +
props.innerMargin;
} else {
@@ -60,8 +58,8 @@ export function calcPopupPosition(
left -= el.offsetWidth / 2;
- if (left + contentWidth - window.pageXOffset > window.innerWidth) {
- left = window.innerWidth - contentWidth + window.pageXOffset - 1;
+ if (left + contentWidth - window.scrollX > window.innerWidth) {
+ left = window.innerWidth - contentWidth + window.scrollX - 1;
}
return [left, top];
@@ -72,9 +70,8 @@ export function calcPopupPosition(
let top: number;
if (props.anchorElement) {
- left = rect.left + window.pageXOffset - contentWidth - props.innerMargin;
- top =
- rect.top + window.pageYOffset + props.anchorElement.offsetHeight / 2;
+ left = rect.left + window.scrollX - contentWidth - props.innerMargin;
+ top = rect.top + window.scrollY + props.anchorElement.offsetHeight / 2;
} else {
left = props.x - contentWidth - props.innerMargin;
top = props.y;
@@ -82,8 +79,8 @@ export function calcPopupPosition(
top -= el.offsetHeight / 2;
- if (top + contentHeight - window.pageYOffset > window.innerHeight) {
- top = window.innerHeight - contentHeight + window.pageYOffset - 1;
+ if (top + contentHeight - window.scrollY > window.innerHeight) {
+ top = window.innerHeight - contentHeight + window.scrollY - 1;
}
return [left, top];
@@ -97,18 +94,17 @@ export function calcPopupPosition(
left =
rect.left +
props.anchorElement.offsetWidth +
- window.pageXOffset +
+ window.scrollX +
props.innerMargin;
if (props.align === "top") {
- top = rect.top + window.pageYOffset;
+ top = rect.top + window.scrollY;
if (props.alignOffset != null) top += props.alignOffset;
} else if (props.align === "bottom") {
// TODO
} else {
// center
- top =
- rect.top + window.pageYOffset + props.anchorElement.offsetHeight / 2;
+ top = rect.top + window.scrollY + props.anchorElement.offsetHeight / 2;
top -= el.offsetHeight / 2;
}
} else {
@@ -117,8 +113,8 @@ export function calcPopupPosition(
top -= el.offsetHeight / 2;
}
- if (top + contentHeight - window.pageYOffset > window.innerHeight) {
- top = window.innerHeight - contentHeight + window.pageYOffset - 1;
+ if (top + contentHeight - window.scrollY > window.innerHeight) {
+ top = window.innerHeight - contentHeight + window.scrollY - 1;
}
return [left, top];
@@ -134,7 +130,7 @@ export function calcPopupPosition(
const [left, top] = calcPosWhenTop();
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
- if (top - window.pageYOffset < 0) {
+ if (top - window.scrollY < 0) {
const [left, top] = calcPosWhenBottom();
return { left, top, transformOrigin: "center top" };
}
@@ -152,7 +148,7 @@ export function calcPopupPosition(
const [left, top] = calcPosWhenLeft();
// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
- if (left - window.pageXOffset < 0) {
+ if (left - window.scrollX < 0) {
const [left, top] = calcPosWhenRight();
return { left, top, transformOrigin: "left center" };
}
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
index 5d50fd41df..573b5b4c7c 100644
--- a/packages/client/src/scripts/use-chart-tooltip.ts
+++ b/packages/client/src/scripts/use-chart-tooltip.ts
@@ -50,11 +50,11 @@ export function useChartTooltip(
const rect = context.chart.canvas.getBoundingClientRect();
tooltipShowing.value = true;
- tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
+ tooltipX.value = rect.left + window.scrollX + context.tooltip.caretX;
if (opts.position === "top") {
- tooltipY.value = rect.top + window.pageYOffset;
+ tooltipY.value = rect.top + window.scrollY;
} else if (opts.position === "middle") {
- tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+ tooltipY.value = rect.top + window.scrollY + context.tooltip.caretY;
}
}