HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

chore (client): replace pageXOffset (pageYOffset) with scrollX (scrollY)

Browse source 
b4b47d85cf

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
This commit is contained in:
naskya 2024-04-08 17:31:33 +09:00
parent 7adef666d1
commit 2beeeddca2
No known key found for this signature in database
GPG key ID: 712D413B3A9FED5C
7 changed files with 40 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/assets/tagcanvas.min.js vendored
View file

@ -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 };

8
packages/client/src/components/MkContextMenu.vue
View file

@ -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) {

23
packages/client/src/components/MkModal.vue
View file

@ -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";
}

4
packages/client/src/components/MkUrlPreviewPopup.vue
View file

@ -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;

5
packages/client/src/components/MkUserPreview.vue
View file

@ -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;

42
packages/client/src/scripts/popup-position.ts
View file

@ -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" };
}

6
packages/client/src/scripts/use-chart-tooltip.ts
View file

@ -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;
}
}