mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-13 17:30:45 +01:00
refactor(frontend): use scrollX
or scrollY
(#13645)
This commit is contained in:
parent
61978cb4ca
commit
b4b47d85cf
6 changed files with 42 additions and 42 deletions
|
@ -47,12 +47,12 @@ onMounted(() => {
|
||||||
const width = rootEl.value!.offsetWidth;
|
const width = rootEl.value!.offsetWidth;
|
||||||
const height = rootEl.value!.offsetHeight;
|
const height = rootEl.value!.offsetHeight;
|
||||||
|
|
||||||
if (left + width - window.pageXOffset >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
|
if (left + width - window.scrollX >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
|
||||||
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset;
|
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.scrollX;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (top + height - window.pageYOffset >= (window.innerHeight - SCROLLBAR_THICKNESS)) {
|
if (top + height - window.scrollY >= (window.innerHeight - SCROLLBAR_THICKNESS)) {
|
||||||
top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.pageYOffset;
|
top = (window.innerHeight - SCROLLBAR_THICKNESS) - height + window.scrollY;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (top < 0) {
|
if (top < 0) {
|
||||||
|
|
|
@ -175,8 +175,8 @@ const align = () => {
|
||||||
let left;
|
let left;
|
||||||
let top;
|
let top;
|
||||||
|
|
||||||
const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
|
const x = srcRect.left + (fixed.value ? 0 : window.scrollX);
|
||||||
const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
|
const y = srcRect.top + (fixed.value ? 0 : window.scrollY);
|
||||||
|
|
||||||
if (props.anchor.x === 'center') {
|
if (props.anchor.x === 'center') {
|
||||||
left = x + (props.src.offsetWidth / 2) - (width / 2);
|
left = x + (props.src.offsetWidth / 2) - (width / 2);
|
||||||
|
@ -220,24 +220,24 @@ const align = () => {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 画面から横にはみ出る場合
|
// 画面から横にはみ出る場合
|
||||||
if (left + width - window.pageXOffset > (window.innerWidth - SCROLLBAR_THICKNESS)) {
|
if (left + width - window.scrollX > (window.innerWidth - SCROLLBAR_THICKNESS)) {
|
||||||
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset - 1;
|
left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.scrollX - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.pageYOffset);
|
const underSpace = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - (top - window.scrollY);
|
||||||
const upperSpace = (srcRect.top - MARGIN);
|
const upperSpace = (srcRect.top - MARGIN);
|
||||||
|
|
||||||
// 画面から縦にはみ出る場合
|
// 画面から縦にはみ出る場合
|
||||||
if (top + height - window.pageYOffset > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) {
|
if (top + height - window.scrollY > ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN)) {
|
||||||
if (props.noOverlap && props.anchor.x === 'center') {
|
if (props.noOverlap && props.anchor.x === 'center') {
|
||||||
if (underSpace >= (upperSpace / 3)) {
|
if (underSpace >= (upperSpace / 3)) {
|
||||||
maxHeight.value = underSpace;
|
maxHeight.value = underSpace;
|
||||||
} else {
|
} else {
|
||||||
maxHeight.value = upperSpace;
|
maxHeight.value = upperSpace;
|
||||||
top = window.pageYOffset + ((upperSpace + MARGIN) - height);
|
top = window.scrollY + ((upperSpace + MARGIN) - height);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.pageYOffset - 1;
|
top = ((window.innerHeight - SCROLLBAR_THICKNESS) - MARGIN) - height + window.scrollY - 1;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
maxHeight.value = underSpace;
|
maxHeight.value = underSpace;
|
||||||
|
@ -255,15 +255,15 @@ const align = () => {
|
||||||
let transformOriginX = 'center';
|
let transformOriginX = 'center';
|
||||||
let transformOriginY = 'center';
|
let transformOriginY = 'center';
|
||||||
|
|
||||||
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) {
|
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.scrollY)) {
|
||||||
transformOriginY = 'top';
|
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';
|
transformOriginY = 'bottom';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) {
|
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.scrollX)) {
|
||||||
transformOriginX = 'left';
|
transformOriginX = 'left';
|
||||||
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) {
|
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.scrollX)) {
|
||||||
transformOriginX = 'right';
|
transformOriginX = 'right';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -33,8 +33,8 @@ const left = ref(0);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const rect = props.source.getBoundingClientRect();
|
const rect = props.source.getBoundingClientRect();
|
||||||
const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
|
const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.scrollX;
|
||||||
const y = rect.top + props.source.offsetHeight + window.pageYOffset;
|
const y = rect.top + props.source.offsetHeight + window.scrollY;
|
||||||
|
|
||||||
top.value = y;
|
top.value = y;
|
||||||
left.value = x;
|
left.value = x;
|
||||||
|
|
|
@ -106,8 +106,8 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const rect = props.source.getBoundingClientRect();
|
const rect = props.source.getBoundingClientRect();
|
||||||
const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
|
const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.scrollX;
|
||||||
const y = rect.top + props.source.offsetHeight + window.pageYOffset;
|
const y = rect.top + props.source.offsetHeight + window.scrollY;
|
||||||
|
|
||||||
top.value = y;
|
top.value = y;
|
||||||
left.value = x;
|
left.value = x;
|
||||||
|
|
|
@ -26,8 +26,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
let top: number;
|
let top: number;
|
||||||
|
|
||||||
if (props.anchorElement) {
|
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 - contentHeight) - props.innerMargin;
|
top = (rect.top + window.scrollY - contentHeight) - props.innerMargin;
|
||||||
} else {
|
} else {
|
||||||
left = props.x;
|
left = props.x;
|
||||||
top = (props.y - contentHeight) - props.innerMargin;
|
top = (props.y - contentHeight) - props.innerMargin;
|
||||||
|
@ -35,8 +35,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
|
|
||||||
left -= (el.offsetWidth / 2);
|
left -= (el.offsetWidth / 2);
|
||||||
|
|
||||||
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
|
if (left + contentWidth - window.scrollX > window.innerWidth) {
|
||||||
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
|
left = window.innerWidth - contentWidth + window.scrollX - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return [left, top];
|
return [left, top];
|
||||||
|
@ -47,8 +47,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
let top: number;
|
let top: number;
|
||||||
|
|
||||||
if (props.anchorElement) {
|
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 + props.anchorElement.offsetHeight) + props.innerMargin;
|
top = (rect.top + window.scrollY + props.anchorElement.offsetHeight) + props.innerMargin;
|
||||||
} else {
|
} else {
|
||||||
left = props.x;
|
left = props.x;
|
||||||
top = (props.y) + props.innerMargin;
|
top = (props.y) + props.innerMargin;
|
||||||
|
@ -56,8 +56,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
|
|
||||||
left -= (el.offsetWidth / 2);
|
left -= (el.offsetWidth / 2);
|
||||||
|
|
||||||
if (left + contentWidth - window.pageXOffset > window.innerWidth) {
|
if (left + contentWidth - window.scrollX > window.innerWidth) {
|
||||||
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
|
left = window.innerWidth - contentWidth + window.scrollX - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return [left, top];
|
return [left, top];
|
||||||
|
@ -68,8 +68,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
let top: number;
|
let top: number;
|
||||||
|
|
||||||
if (props.anchorElement) {
|
if (props.anchorElement) {
|
||||||
left = (rect.left + window.pageXOffset - contentWidth) - props.innerMargin;
|
left = (rect.left + window.scrollX - contentWidth) - props.innerMargin;
|
||||||
top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
|
top = rect.top + window.scrollY + (props.anchorElement.offsetHeight / 2);
|
||||||
} else {
|
} else {
|
||||||
left = (props.x - contentWidth) - props.innerMargin;
|
left = (props.x - contentWidth) - props.innerMargin;
|
||||||
top = props.y;
|
top = props.y;
|
||||||
|
@ -77,8 +77,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
|
|
||||||
top -= (el.offsetHeight / 2);
|
top -= (el.offsetHeight / 2);
|
||||||
|
|
||||||
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
|
if (top + contentHeight - window.scrollY > window.innerHeight) {
|
||||||
top = window.innerHeight - contentHeight + window.pageYOffset - 1;
|
top = window.innerHeight - contentHeight + window.scrollY - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return [left, top];
|
return [left, top];
|
||||||
|
@ -89,15 +89,15 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
let top: number;
|
let top: number;
|
||||||
|
|
||||||
if (props.anchorElement) {
|
if (props.anchorElement) {
|
||||||
left = (rect.left + props.anchorElement.offsetWidth + window.pageXOffset) + props.innerMargin;
|
left = (rect.left + props.anchorElement.offsetWidth + window.scrollX) + props.innerMargin;
|
||||||
|
|
||||||
if (props.align === 'top') {
|
if (props.align === 'top') {
|
||||||
top = rect.top + window.pageYOffset;
|
top = rect.top + window.scrollY;
|
||||||
if (props.alignOffset != null) top += props.alignOffset;
|
if (props.alignOffset != null) top += props.alignOffset;
|
||||||
} else if (props.align === 'bottom') {
|
} else if (props.align === 'bottom') {
|
||||||
// TODO
|
// TODO
|
||||||
} else { // center
|
} else { // center
|
||||||
top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
|
top = rect.top + window.scrollY + (props.anchorElement.offsetHeight / 2);
|
||||||
top -= (el.offsetHeight / 2);
|
top -= (el.offsetHeight / 2);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -106,8 +106,8 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
top -= (el.offsetHeight / 2);
|
top -= (el.offsetHeight / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (top + contentHeight - window.pageYOffset > window.innerHeight) {
|
if (top + contentHeight - window.scrollY > window.innerHeight) {
|
||||||
top = window.innerHeight - contentHeight + window.pageYOffset - 1;
|
top = window.innerHeight - contentHeight + window.scrollY - 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return [left, top];
|
return [left, top];
|
||||||
|
@ -123,7 +123,7 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
const [left, top] = calcPosWhenTop();
|
const [left, top] = calcPosWhenTop();
|
||||||
|
|
||||||
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
|
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
|
||||||
if (top - window.pageYOffset < 0) {
|
if (top - window.scrollY < 0) {
|
||||||
const [left, top] = calcPosWhenBottom();
|
const [left, top] = calcPosWhenBottom();
|
||||||
return { left, top, transformOrigin: 'center top' };
|
return { left, top, transformOrigin: 'center top' };
|
||||||
}
|
}
|
||||||
|
@ -141,7 +141,7 @@ export function calcPopupPosition(el: HTMLElement, props: {
|
||||||
const [left, top] = calcPosWhenLeft();
|
const [left, top] = calcPosWhenLeft();
|
||||||
|
|
||||||
// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
|
// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
|
||||||
if (left - window.pageXOffset < 0) {
|
if (left - window.scrollX < 0) {
|
||||||
const [left, top] = calcPosWhenRight();
|
const [left, top] = calcPosWhenRight();
|
||||||
return { left, top, transformOrigin: 'left center' };
|
return { left, top, transformOrigin: 'left center' };
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,11 +53,11 @@ export function useChartTooltip(opts: { position: 'top' | 'middle' } = { positio
|
||||||
const rect = context.chart.canvas.getBoundingClientRect();
|
const rect = context.chart.canvas.getBoundingClientRect();
|
||||||
|
|
||||||
tooltipShowing.value = true;
|
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') {
|
if (opts.position === 'top') {
|
||||||
tooltipY.value = rect.top + window.pageYOffset;
|
tooltipY.value = rect.top + window.scrollY;
|
||||||
} else if (opts.position === 'middle') {
|
} else if (opts.position === 'middle') {
|
||||||
tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
|
tooltipY.value = rect.top + window.scrollY + context.tooltip.caretY;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue