diff --git a/src/App.vue b/src/App.vue index 5cf2a77e..cc010939 100644 --- a/src/App.vue +++ b/src/App.vue @@ -255,7 +255,7 @@ export default class App extends Mixins(GlobalMixin, UserConfig) { linkClick() { const nav: any = this.$refs.nav; - if (window.innerWidth <= 1024) nav?.toggleNavigation(false); + if (globalThis.windowInnerWidth <= 1024) nav?.toggleNavigation(false); } doRouteChecks() { diff --git a/src/components/ScrollerManager.vue b/src/components/ScrollerManager.vue index d508026a..fbdc67d5 100644 --- a/src/components/ScrollerManager.vue +++ b/src/components/ScrollerManager.vue @@ -320,7 +320,7 @@ export default class ScrollerManager extends Mixins(GlobalMixin) { const fontSizePx = parseFloat( getComputedStyle(this.$refs.cursorSt as any).fontSize ); - const minGap = fontSizePx + (window.innerWidth <= 768 ? 5 : 2); + const minGap = fontSizePx + (globalThis.windowInnerWidth <= 768 ? 5 : 2); let prevShow = -9999; for (const [idx, tick] of this.ticks.entries()) { // Conservative diff --git a/src/components/SelectionManager.vue b/src/components/SelectionManager.vue index eaf6216e..04463542 100644 --- a/src/components/SelectionManager.vue +++ b/src/components/SelectionManager.vue @@ -364,12 +364,13 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) { // Scroll if at top or bottom const scrollUp = touch.clientY > 50 && touch.clientY < 110; // 50 topbar - const scrollDown = touch.clientY > window.innerHeight - 60; + const scrollDown = touch.clientY > globalThis.windowInnerHeight - 60; if (scrollUp || scrollDown) { if (scrollUp) { this.touchScrollDelta = (-1 * (110 - touch.clientY)) / 3; } else { - this.touchScrollDelta = (touch.clientY - window.innerHeight + 60) / 3; + this.touchScrollDelta = + (touch.clientY - globalThis.windowInnerHeight + 60) / 3; } if (this.touchAnchor && !this.touchScrollInterval) { diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 9cb0693f..012f69a3 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -313,11 +313,11 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) { } isMobile() { - return window.innerWidth <= 768; + return globalThis.windowInnerWidth <= 768; } isMobileLayout() { - return window.innerWidth <= 600; + return globalThis.windowInnerWidth <= 600; } get isMonthView() { @@ -378,6 +378,11 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) { /** Do resize after some time */ handleResizeWithDelay() { + // Update global vars + globalThis.windowInnerWidth = window.innerWidth; + globalThis.windowInnerHeight = window.innerHeight; + + // Reflow after timer if (this.resizeTimer) { clearTimeout(this.resizeTimer); } diff --git a/src/components/Viewer.vue b/src/components/Viewer.vue index 584f51c5..145d4b69 100644 --- a/src/components/Viewer.vue +++ b/src/components/Viewer.vue @@ -212,7 +212,7 @@ export default class Viewer extends Mixins(GlobalMixin) { if (this.canShare) base++; if (this.canEdit) base++; - if (window.innerWidth < 768) { + if (globalThis.windowInnerWidth < 768) { return Math.min(base, 3); } else { return Math.min(base, 5); @@ -317,8 +317,8 @@ export default class Viewer extends Mixins(GlobalMixin) { const sidebarWidth = this.sidebarOpen ? this.sidebarWidth : 0; this.outerWidth = `calc(100vw - ${sidebarWidth}px)`; return { - x: window.innerWidth - sidebarWidth, - y: window.innerHeight, + x: globalThis.windowInnerWidth - sidebarWidth, + y: globalThis.windowInnerHeight, }; }, ...args, @@ -556,7 +556,7 @@ export default class Viewer extends Mixins(GlobalMixin) { const thumb = this.thumbElem(e.slide.data?.photo); if (thumb && this.fullyOpened) { const rect = thumb.getBoundingClientRect(); - if (rect.bottom < 50 || rect.top > window.innerHeight - 50) { + if (rect.bottom < 50 || rect.top > globalThis.windowInnerHeight - 50) { thumb.scrollIntoView({ block: "center", }); diff --git a/src/components/top-matter/OnThisDay.vue b/src/components/top-matter/OnThisDay.vue index d0e78e35..fc160e16 100644 --- a/src/components/top-matter/OnThisDay.vue +++ b/src/components/top-matter/OnThisDay.vue @@ -147,7 +147,7 @@ export default class OnThisDay extends Mixins(GlobalMixin) { // Choose preview photo for (const year of this.years) { // Try to prioritize landscape photos on desktop - if (window.innerWidth <= 600) { + if (globalThis.windowInnerWidth <= 600) { const landscape = year.photos.filter((p) => p.w > p.h); year.preview = utils.randomChoice(landscape); } diff --git a/src/main.ts b/src/main.ts index bea31e0d..366fbc6b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -41,9 +41,15 @@ declare global { var currentViewerPhoto: IPhoto; var touchingPhoto: boolean; + var windowInnerWidth: number; // cache + var windowInnerHeight: number; // cache } + globalThis.vuerouter = router; + globalThis.touchingPhoto = false; +globalThis.windowInnerWidth = window.innerWidth; +globalThis.windowInnerHeight = window.innerHeight; Vue.use(VueVirtualScroller);