implement panorama on patio

AprilSylph · Jan 19, 2024 · 2ec6c73 · 2ec6c73
1 parent 9cca5cc
commit 2ec6c73
Showing 1 changed file with 36 additions and 20 deletions.
diff --git a/src/scripts/panorama.js b/src/scripts/panorama.js
@@ -14,36 +14,52 @@ const mainContentWrapper = `${keyToCss('mainContentWrapper')}:not(${keyToCss('ma
 const container = `${mainContentWrapper} > ${keyToCss('container')}`;
 const mainElement = `${container} > ${keyToCss('main')}`;
 const postColumn = `${mainElement} > ${keyToCss('postColumn', 'postsColumn')}`;
+const patioWidePostColumn = `[id]${keyToCss('columnWide')}`;
 
 const togglePanorama = async () => {
-  const enablePanorama = document.querySelector(keyToCss('postColumn', 'postsColumn'));
+  const hasColumn = document.querySelector(postColumn);
+  const hasPatioColumn = document.querySelector(patioWidePostColumn);
 
-  if (enablePanorama) {
-    const { maxPostWidth: maxPostWidthString } = await getPreferences('panorama');
-    const maxPostWidth = Number(maxPostWidthString.trim().replace('px', '')) || 0;
+  const { maxPostWidth: maxPostWidthString } = await getPreferences('panorama');
+  const maxPostWidth = Number(maxPostWidthString.trim().replace('px', '')) || 0;
 
+  const enableOnPatio = true; // add preference when patio is released
+
+  if (hasColumn || (hasPatioColumn && enableOnPatio)) {
     const sidebarMaxWidth = 320;
     const mainRightPadding = 20;
     const mainRightBorder = 1;
     const sidebarOffset = sidebarMaxWidth + mainRightPadding + mainRightBorder;
     const stickyContainerOffset = document.querySelector(keyToCss('reblogRedesignEnabled')) ? 0 : 85;
 
+    const column = hasPatioColumn ? patioWidePostColumn : postColumn;
+
     styleElement.textContent = `
-      ${mainContentWrapper} {
-        flex-grow: 1;
-        max-width: ${Math.max(maxPostWidth, 540) + stickyContainerOffset + sidebarOffset}px;
-      }
-      ${container} {
-        max-width: unset;
-      }
-      ${mainElement} {
-        max-width: calc(100% - ${sidebarOffset}px);
-      }
-      ${postColumn} {
-        max-width: calc(100% - ${stickyContainerOffset}px);
+      ${
+        hasPatioColumn
+          ? `
+              ${column} {
+                width: ${Math.max(maxPostWidth, 540)}px;
+              }
+            `
+          : `
+              ${mainContentWrapper} {
+                flex-grow: 1;
+                max-width: ${Math.max(maxPostWidth, 540) + stickyContainerOffset + sidebarOffset}px;
+              }
+              ${container} {
+                max-width: unset;
+              }
+              ${mainElement} {
+                max-width: calc(100% - ${sidebarOffset}px);
+              }
+              ${column} {
+                max-width: calc(100% - ${stickyContainerOffset}px);
+              }
+            `
       }
 
-      ${postColumn}
+      ${column}
         :is(
           ${keyToCss('cell')},
           article,
@@ -53,14 +69,14 @@ const togglePanorama = async () => {
         max-width: 100%;
       }
 
-      ${postColumn} article ${keyToCss('link')} ${keyToCss('header')}${keyToCss('withImage')} {
+      ${column} article ${keyToCss('link')} ${keyToCss('header')}${keyToCss('withImage')} {
         height: unset;
         aspect-ratio: 2;
       }
-      ${postColumn} article ${keyToCss('videoBlock')} iframe {
+      ${column} article ${keyToCss('videoBlock')} iframe {
         max-width: none !important;
       }
-      ${postColumn}
+      ${column}
         :is(
           [data-is-resizable="true"][style="width: 540px;"],
           ${keyToCss('takeoverBanner')}