Panorama: Update for vertical navigation; implement custom width

src/features/panorama.js

@@ -1,39 +1,148 @@
 import { keyToCss } from '../utils/css_map.js';
-import { buildStyle } from '../utils/interface.js';
+import { buildStyle, postSelector } from '../utils/interface.js';
+import { pageModifications } from '../utils/mutations.js';
+import { getPreferences } from '../utils/preferences.js';
 
-const container = `${keyToCss('bluespaceLayout')} > ${keyToCss('container')}`;
-const reblog = `${keyToCss('post')} ${keyToCss('reblog')}`;
-const videoBlock = keyToCss('videoBlock');
-const queueSettings = keyToCss('queueSettings');
+const navigationWrapperBasis = 240;
+const navigationWrapperMargin = 20;
+const mainContentWrapperMinWidth = 902;
+const widenDashMinWidth = navigationWrapperBasis + navigationWrapperMargin + mainContentWrapperMinWidth;
+
+const sidebarMaxWidth = 320;
+const mainRightPadding = 20;
+const mainRightBorder = 1;
+const sidebarOffset = sidebarMaxWidth + mainRightPadding + mainRightBorder;
+
+const mainEnableClass = 'xkit-panorama-main';
+const patioEnableClass = 'xkit-panorama-patio';
+const expandClass = 'xkit-panorama-expand-media';
+
+const maxPostWidthVar = '--xkit-panorama-post-width';
+const aspectRatioVar = '--xkit-panorama-aspect-ratio';
+
+const mainContentWrapper =
+  `body.${mainEnableClass} ${keyToCss('mainContentWrapper')}:not(${keyToCss('mainContentIsMasonry', 'mainContentIsFullWidth')})`;
+const mainPostColumn = `main${keyToCss('postColumn', 'postsColumn')}`;
+const patioPostColumn = `[id]${keyToCss('columnWide')}`;
+
+const mainStyleElement = buildStyle(`
+${mainContentWrapper}:has(> div > div > ${mainPostColumn}) {
+  flex-grow: 1;
+  max-width: calc(var(${maxPostWidthVar}) + ${sidebarOffset}px);
+}
+${mainContentWrapper} > div:has(> div > ${mainPostColumn}) {
+  max-width: unset;
+}
+${mainContentWrapper} > div > div:has(> ${mainPostColumn}) {
+  max-width: calc(100% - ${sidebarOffset}px);
+}
+${mainContentWrapper} > div > div > ${mainPostColumn} {
+  max-width: 100%;
+}
+body.${mainEnableClass} ${keyToCss('queueSettings')} {
+  box-sizing: border-box;
+  width: 100%;
+}
+`);
+mainStyleElement.media = `(min-width: ${widenDashMinWidth}px)`;
 
 const styleElement = buildStyle(`
-#base-container > div > div > header,
-${container} {
-  max-width: 100vw;
-  padding-left: ${85 - 64}px;
-  padding-right: 30px;
+body.${patioEnableClass} ${patioPostColumn} {
+  width: min(var(${maxPostWidthVar}), 100vw);
 }
 
-${container} > :first-child {
-  min-width: 0;
-  max-width: none;
-  flex: 1;
+/* Widen posts */
+${keyToCss('cell')}, ${postSelector}
+  :is(
+    article,
+    article > header,
+    article ${keyToCss('reblog')}
+  ) {
+  max-width: unset;
 }
 
-${container} > :first-child > main { max-width: calc(100% - ${625 - 540}px); }
-${container} > :first-child > main article { max-width: 100%; }
-${container} > :first-child > main article > * { max-width: 100%; }
+/* Center non-expanded content */
+body:not(.${expandClass}) ${postSelector}
+  :is(
+    ${keyToCss('videoBlock', 'audioBlock', 'link', 'pollBlock', 'imageBlockLink')},
+    figure${keyToCss('imageBlock')}:not(${keyToCss('unstretched')})
+  ) {
+  margin: 0 auto;
+  max-width: 540px;
+}
 
-${reblog} { max-width: none; }
-${videoBlock} { max-width: none; }
-${videoBlock} iframe { max-width: none !important; }
+/* Widen + lock aspect ratios of expanded content */
+body.${expandClass} ${postSelector}
+  :is(
+    ${keyToCss('videoBlock', 'audioBlock', 'link', 'pollBlock')},
+    ${keyToCss('videoBlock')} iframe
+  ) {
+  max-width: unset !important;
+}
+body.${expandClass} ${postSelector} ${keyToCss('videoBlock')} iframe[style*="${aspectRatioVar}"] {
+  aspect-ratio: var(${aspectRatioVar});
+  height: unset !important;
+}
+body.${expandClass} ${postSelector} a > ${keyToCss('withImage')} {
+  aspect-ratio: 2;
+  height: unset !important;
+}
 
-${queueSettings} {
-  box-sizing: border-box;
-  width: calc(100% - ${625 - 540}px);
+/* Fix ad containers */
+${keyToCss('adTimelineObject', 'instreamAd', 'nativeIponWebAd', 'takeoverBanner')},
+${keyToCss('adTimelineObject', 'instreamAd', 'nativeIponWebAd', 'takeoverBanner')} header {
+  max-width: unset;
+}
+[data-is-resizable="true"][style="width: 540px;"],
+${keyToCss('takeoverBanner')} {
+  width: unset !important;
 }
 `);
-styleElement.media = '(min-width: 990px)';
 
-export const main = async () => document.documentElement.append(styleElement);
-export const clean = async () => styleElement.remove();
+const processVideoIframes = iframes => iframes.forEach(iframe => {
+  const { maxWidth, height } = iframe.style;
+  if (maxWidth && height) {
+    iframe.style.setProperty(
+      aspectRatioVar,
+      `${maxWidth.replace('px', '')} / ${height.replace('px', '')}`
+    );
+  }
+});
+
+export const onStorageChanged = async (changes, areaName) =>
+  Object.keys(changes).some(key => key.startsWith('panorama')) && main();
+
+export const main = async () => {
+  const {
+    maxPostWidth: maxPostWidthString,
+    expandPostMedia,
+    mainEnable,
+    patioEnable
+  } = await getPreferences('panorama');
+
+  const maxPostWidth = Number(maxPostWidthString.trim().replace('px', '')) || 0;
+  document.body.style.setProperty(maxPostWidthVar, `${Math.max(maxPostWidth, 540)}px`);
+  document.body.classList[mainEnable ? 'add' : 'remove'](mainEnableClass);
+  document.body.classList[patioEnable ? 'add' : 'remove'](patioEnableClass);
+  document.body.classList[expandPostMedia ? 'add' : 'remove'](expandClass);
+
+  document.documentElement.append(styleElement, mainStyleElement);
+
+  pageModifications.register(
+    `${postSelector} ${keyToCss('videoBlock')} iframe[style*="max-width"][style*="height"]`,
+    processVideoIframes
+  );
+};
+
+export const clean = async () => {
+  pageModifications.unregister(processVideoIframes);
+  [...document.querySelectorAll(`iframe[style*="${aspectRatioVar}"]`)].forEach(el =>
+    el.style.removeProperty(aspectRatioVar)
+  );
+
+  document.body.style.removeProperty(maxPostWidthVar);
+  document.body.classList.remove(mainEnableClass, patioEnableClass, expandClass);
+
+  styleElement.remove();
+  mainStyleElement.remove();
+};

src/features/panorama.json

@@ -1,11 +1,32 @@
 {
   "title": "Panorama",
   "description": "Widescreen dashboard",
-  "note": "This feature is not currently functional.",
   "icon": {
     "class_name": "ri-align-justify",
     "color": "white",
     "background_color": "#1a2735"
   },
-  "help": "https://github.com/AprilSylph/XKit-Rewritten/wiki/Features#panorama"
+  "help": "https://github.com/AprilSylph/XKit-Rewritten/wiki/Features#panorama",
+  "preferences": {
+    "maxPostWidth": {
+      "label": "Max. post width",
+      "type": "text",
+      "default": "800px"
+    },
+    "expandPostMedia": {
+      "label": "Expand media content in posts",
+      "type": "checkbox",
+      "default": true
+    },
+    "mainEnable": {
+      "label": "Apply to most post columns",
+      "type": "checkbox",
+      "default": true
+    },
+    "patioEnable": {
+      "label": "Apply to Tumblr Patio",
+      "type": "checkbox",
+      "default": true
+    }
+  }
 }