diff --git a/packages/client/src/components/MkMenu.child.vue b/packages/client/src/components/MkMenu.child.vue index 24fabafc3c..8f50673ae2 100644 --- a/packages/client/src/components/MkMenu.child.vue +++ b/packages/client/src/components/MkMenu.child.vue @@ -36,35 +36,49 @@ function setPosition() { const rootRect = props.rootElement.getBoundingClientRect(); const rect = props.targetElement.getBoundingClientRect(); const isRtl = getComputedStyle(props.rootElement).direction === "rtl"; - const writingMode = getComputedStyle(props.rootElement)['writing-mode']; + const writingMode = getComputedStyle(props.rootElement)["writing-mode"]; const isVertical = writingMode.startsWith("vertical"); - const targetInlineSize = isVertical ? props.targetElement.offsetHeight : props.targetElement.offsetWidth; + const targetInlineSize = isVertical + ? props.targetElement.offsetHeight + : props.targetElement.offsetWidth; const rectInlineSize = isVertical ? rect.height : rect.width; const windowInlineSize = isVertical ? window.innerHeight : window.innerWidth; - const rootInsetInlineStart = - isRtl && isVertical ? rootRect.bottom : - !isRtl && isVertical ? rootRect.top : - isRtl && !isVertical ? rootRect.right : - rootRect.left; - const rectInsetInlineStart = - isRtl && isVertical ? rect.bottom : - !isRtl && isVertical ? rect.top : - isRtl && !isVertical ? rect.right : - rect.left; + const rootInsetInlineStart = + isRtl && isVertical + ? rootRect.bottom + : !isRtl && isVertical + ? rootRect.top + : isRtl && !isVertical + ? rootRect.right + : rootRect.left; + const rectInsetInlineStart = + isRtl && isVertical + ? rect.bottom + : !isRtl && isVertical + ? rect.top + : isRtl && !isVertical + ? rect.right + : rect.left; let insetInlineStart = targetInlineSize; - if (rootInsetInlineStart + insetInlineStart > windowInlineSize - rectInlineSize) { + if ( + rootInsetInlineStart + insetInlineStart > + windowInlineSize - rectInlineSize + ) { insetInlineStart = -rectInlineSize; } if (rectInsetInlineStart + insetInlineStart < 0) { insetInlineStart = -rectInsetInlineStart; } - const insetBlockStart = - writingMode === "vertical-rl" ? rootRect.right - rect.right - 8: - writingMode === "vertical-lr" ? rootRect.left - rect.left - 8 : - writingMode === "horizontal-bt" ? rect.right - rootRect.right - 8 : - rect.top - rootRect.top - 8; + const insetBlockStart = + writingMode === "vertical-rl" + ? rootRect.right - rect.right - 8 + : writingMode === "vertical-lr" + ? rootRect.left - rect.left - 8 + : writingMode === "horizontal-bt" + ? rect.right - rootRect.right - 8 + : rect.top - rootRect.top - 8; el.value!.style.insetInlineStart = `${insetInlineStart}px`; el.value!.style.insetBlockStart = `${insetBlockStart}px`; } diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue index bb42959622..ff70b54f81 100644 --- a/packages/client/src/components/MkModal.vue +++ b/packages/client/src/components/MkModal.vue @@ -221,7 +221,11 @@ function onBgClick() { if (type.value === "drawer") { maxHeight.value = window.innerHeight / 1.5; - if (getComputedStyle(document.documentElement)["writing-mode"].startsWith("vertical")) { + if ( + getComputedStyle(document.documentElement)["writing-mode"].startsWith( + "vertical", + ) + ) { maxHeight.value = window.innerHeight / 1.5; } } @@ -254,7 +258,7 @@ const align = () => { const styles = getComputedStyle(props.src); const direction = styles.direction; - const writingMode = styles['writing-mode']; + const writingMode = styles["writing-mode"]; if (direction === "rtl") { if (anchorX === "right") { @@ -268,27 +272,27 @@ const align = () => { const prevAnchorX = anchorX; const prevAnchorY = anchorY; if (prevAnchorX === "left") { - anchorY = "top" + anchorY = "top"; } else if (prevAnchorX === "right") { - anchorY = "bottom" + anchorY = "bottom"; } else if (prevAnchorX === "center") { - anchorY = "top" + anchorY = "top"; } if (writingMode === "vertical-rl") { if (prevAnchorY === "top") { - anchorX = "right" + anchorX = "right"; } else if (prevAnchorY === "bottom") { - anchorX = "left" + anchorX = "left"; } else if (prevAnchorY === "center") { - anchorX = "center" + anchorX = "center"; } } else if (writingMode === "vertical-lr") { if (prevAnchorY === "top") { - anchorX = "left" + anchorX = "left"; } else if (prevAnchorY === "bottom") { - anchorX = "right" + anchorX = "right"; } else if (prevAnchorY === "center") { - anchorX = "center" + anchorX = "center"; } } } @@ -313,25 +317,31 @@ const align = () => { const windowBlockSize = isVertical ? window.innerWidth : window.innerHeight; const windowScrollBlock = isVertical ? window.scrollX : window.scrollY; const insetBlockStart = - writingMode === "vertical-rl" ? windowBlockSize - left - width : - writingMode === "vertical-lr" ? left : - top; + writingMode === "vertical-rl" + ? windowBlockSize - left - width + : writingMode === "vertical-lr" + ? left + : top; const insetBlockEnd = - writingMode === "vertical-rl" ? windowBlockSize - left : - writingMode === "vertical-lr" ? left + width : - top + height; + writingMode === "vertical-rl" + ? windowBlockSize - left + : writingMode === "vertical-lr" + ? left + width + : top + height; const blockSize = isVertical ? width : height; - const srcRectBlockStart = - writingMode === "vertical-rl" ? srcRect.right : - writingMode === "vertical-lr" ? srcRect.left : - srcRect.top; + const srcRectBlockStart = + writingMode === "vertical-rl" + ? srcRect.right + : writingMode === "vertical-lr" + ? srcRect.left + : srcRect.top; if (fixed.value) { // 画面から横にはみ出る場合 if (left + width > window.innerWidth) { left = window.innerWidth - width; } - + const underSpace = window.innerHeight - MARGIN - top; const upperSpace = srcRect.top - MARGIN; @@ -345,11 +355,14 @@ const align = () => { top = window.innerHeight - MARGIN - height; } } - + const blockEndSpace = windowBlockSize - MARGIN - insetBlockStart; const blockStartSpace = srcRectBlockStart - MARGIN; - if (insetBlockEnd > windowBlockSize - MARGIN || blockSize > windowBlockSize - MARGIN) { + if ( + insetBlockEnd > windowBlockSize - MARGIN || + blockSize > windowBlockSize - MARGIN + ) { if (props.noOverlap) { if (blockEndSpace >= blockStartSpace / 3) { maxHeight.value = blockEndSpace; @@ -378,8 +391,8 @@ const align = () => { } } - - const blockEndSpace =windowBlockSize - MARGIN - (insetBlockStart - windowScrollBlock); + const blockEndSpace = + windowBlockSize - MARGIN - (insetBlockStart - windowScrollBlock); const blockStartSpace = srcRectBlockStart - MARGIN; // 画面から縦にはみ出る場合 @@ -400,7 +413,10 @@ const align = () => { top = MARGIN; } - if (left > window.innerWidth - width - MARGIN && writingMode !== "vertical-lr") { + if ( + left > window.innerWidth - width - MARGIN && + writingMode !== "vertical-lr" + ) { left = window.innerWidth - width - MARGIN; } if (left < 0 && writingMode !== "vertical-rl") { diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue index 04c655445a..4db0bffa85 100644 --- a/packages/client/src/components/MkTooltip.vue +++ b/packages/client/src/components/MkTooltip.vue @@ -60,7 +60,7 @@ function setPosition() { direction = "right"; } } - if (getComputedStyle(el.value!)['writing-mode'].startsWith("vertical")) { + if (getComputedStyle(el.value!)["writing-mode"].startsWith("vertical")) { if (direction === "top") { direction = "right"; } else if (direction === "bottom") { diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue index 733749ab51..9a7cba493b 100644 --- a/packages/client/src/components/form/select.vue +++ b/packages/client/src/components/form/select.vue @@ -189,7 +189,11 @@ function show(_ev: MouseEvent) { scanOptions(options); os.popupMenu(menu, container.value!, { - width: getComputedStyle(container.value!)['writing-mode'].startsWith('vertical') ? container.value!.offsetHeight : container.value!.offsetWidth, + width: getComputedStyle(container.value!)["writing-mode"].startsWith( + "vertical", + ) + ? container.value!.offsetHeight + : container.value!.offsetWidth, // onClosing: () => { // opening.value = false; // }, diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue index c8330c6adc..e84fe86a52 100644 --- a/packages/client/src/components/global/MkPageHeader.vue +++ b/packages/client/src/components/global/MkPageHeader.vue @@ -270,23 +270,28 @@ onMounted(() => { if (!isTabs(props.tabs)) return; const tabEl = tabRefs[props.tab]; if (tabEl && tabHighlightEl.value) { - const isVertical = getComputedStyle(tabHighlightEl.value)['writing-mode'].startsWith("vertical"); + const isVertical = getComputedStyle(tabHighlightEl.value)[ + "writing-mode" + ].startsWith("vertical"); // offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4 - const tabSizeX = (isVertical ? tabEl.scrollHeight : tabEl.scrollWidth) + 20; // + the tab's padding + const tabSizeX = + (isVertical ? tabEl.scrollHeight : tabEl.scrollWidth) + 20; // + the tab's padding if (props.tabs.length > 3) { tabEl.style = `--width: ${tabSizeX}px`; } setTimeout(() => { if (tabHighlightEl.value == null) return; - let translateFunction = 'translateX'; + let translateFunction = "translateX"; let translateValue = tabEl.offsetLeft; if (isVertical) { - translateFunction = 'translateY'; + translateFunction = "translateY"; translateValue = tabEl.offsetTop; } if (getComputedStyle(tabHighlightEl.value).direction === "rtl") { - translateValue += isVertical ? tabEl.offsetHeight - tabEl.offsetParent.scrollHeight : tabEl.offsetWidth - tabEl.offsetParent.scrollWidth; + translateValue += isVertical + ? tabEl.offsetHeight - tabEl.offsetParent.scrollHeight + : tabEl.offsetWidth - tabEl.offsetParent.scrollWidth; } tabHighlightEl.value.style.inlineSize = `${tabSizeX}px`; tabHighlightEl.value.style.transform = `${translateFunction}(${translateValue}px)`; diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index 90e86c7399..8ce82224fc 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -302,9 +302,9 @@ function setSwiperRef(swiper: SwiperType) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue index d7cb6d966f..c6dd208bd7 100644 --- a/packages/client/src/pages/admin-file.vue +++ b/packages/client/src/pages/admin-file.vue @@ -265,9 +265,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue index c798b56632..272adf651a 100644 --- a/packages/client/src/pages/admin/_header_.vue +++ b/packages/client/src/pages/admin/_header_.vue @@ -173,19 +173,24 @@ onMounted(() => { const rect = tabEl.getBoundingClientRect(); var inlineSize = rect.width; var insetInlineStart = rect.left - parentRect.left; - const isVertical = getComputedStyle(tabHighlightEl.value)['writing-mode'].startsWith("vertical"); + const isVertical = getComputedStyle(tabHighlightEl.value)[ + "writing-mode" + ].startsWith("vertical"); if (isVertical) { inlineSize = rect.height; } if (getComputedStyle(tabHighlightEl.value).direction === "rtl") { if (isVertical) { - tabHighlightEl.value.style.insetBlockEnd = rect.bottom - parentRect.bottom + "px"; + tabHighlightEl.value.style.insetBlockEnd = + rect.bottom - parentRect.bottom + "px"; } else { - tabHighlightEl.value.style.insetInlineEnd = rect.right - parentRect.right + "px"; + tabHighlightEl.value.style.insetInlineEnd = + rect.right - parentRect.right + "px"; } } else { if (isVertical) { - tabHighlightEl.value.style.insetBlockStart = rect.top - parentRect.top + "px"; + tabHighlightEl.value.style.insetBlockStart = + rect.top - parentRect.top + "px"; } } tabHighlightEl.value.style.inlineSize = inlineSize + "px"; diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index f410c1cc83..bdc517d2bf 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -223,9 +223,9 @@ function setSwiperRef(swiper: SwiperType) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue index c90d6ee031..ad68199441 100644 --- a/packages/client/src/pages/explore.vue +++ b/packages/client/src/pages/explore.vue @@ -82,9 +82,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue index e4eba16ffe..6f798c3350 100644 --- a/packages/client/src/pages/gallery/index.vue +++ b/packages/client/src/pages/gallery/index.vue @@ -196,9 +196,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue index 8435818b24..71de95915b 100644 --- a/packages/client/src/pages/instance-info.vue +++ b/packages/client/src/pages/instance-info.vue @@ -437,9 +437,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue index fd91bc31a2..570d83f314 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -242,9 +242,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue index f40c20354a..749462ef11 100644 --- a/packages/client/src/pages/notifications.vue +++ b/packages/client/src/pages/notifications.vue @@ -180,9 +180,9 @@ function setSwiperRef(swiper: SwiperType) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue index 8a384aac91..a861ebf854 100644 --- a/packages/client/src/pages/pages.vue +++ b/packages/client/src/pages/pages.vue @@ -157,9 +157,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue index 7f0313f2eb..10b4ce3e54 100644 --- a/packages/client/src/pages/search.vue +++ b/packages/client/src/pages/search.vue @@ -141,9 +141,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index 1ef64ac688..dc639d969c 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -454,9 +454,7 @@ const mergeThreadInTimeline = computed( const mergeRenotesInTimeline = computed( defaultStore.makeGetterSetter("mergeRenotesInTimeline"), ); -const writingMode = computed( - defaultStore.makeGetterSetter("writingMode"), -); +const writingMode = computed(defaultStore.makeGetterSetter("writingMode")); // This feature (along with injectPromo) is currently disabled // function onChangeInjectFeaturedNote(v) { @@ -528,7 +526,7 @@ watch( useEmojiCdn, enableTimelineStreaming, enablePullToRefresh, - pullToRefreshThreshold + pullToRefreshThreshold, ], async () => { await reloadAsk(); diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue index 9e708ef3d2..c712732748 100644 --- a/packages/client/src/pages/tag.vue +++ b/packages/client/src/pages/tag.vue @@ -99,9 +99,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index e0eba89d0f..c28dcdfb3d 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -310,9 +310,9 @@ function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(timelineIndex(src.value)); const styles = getComputedStyle(swiper.el); - swiper.changeLanguageDirection(styles.direction as ("rtl" | "ltr")); - if (styles['writing-mode'].startsWith('vertical')) { - swiper.changeDirection('vertical'); + swiper.changeLanguageDirection(styles.direction as "rtl" | "ltr"); + if (styles["writing-mode"].startsWith("vertical")) { + swiper.changeDirection("vertical"); } } diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 6c992a864a..f8ed0056e6 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -471,8 +471,13 @@ export const defaultStore = markRaw( }, writingMode: { where: "deviceAccount", - default: "horizontal-tb" as "horizontal-tb" | "vertical-rl" | "vertical-lr" | "vertical-rl-upright" | "vertical-lr-upright", - } + default: "horizontal-tb" as + | "horizontal-tb" + | "vertical-rl" + | "vertical-lr" + | "vertical-rl-upright" + | "vertical-lr-upright", + }, }), ); diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index d18d187bc9..40c2085c9c 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -394,7 +394,9 @@ async function startGroup(): void { onMounted(() => { if (!isDesktop.value) { - matchMedia(`(min-inline-size: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => { + matchMedia(`(min-inline-size: ${DESKTOP_THRESHOLD - 1}px)`).onchange = ( + mql, + ) => { if (mql.matches) isDesktop.value = true; }; }