Cache inner width and height

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

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

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

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

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",
           });

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

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