Fix positioning when only a header is present

Mara-Li · Sep 13, 2023 · 7d1e07a · 7d1e07a
1 parent b603034
commit 7d1e07a
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 17 deletions.
diff --git a/src/banner/Banner.svelte b/src/banner/Banner.svelte
@@ -23,7 +23,7 @@
   export let x = 0.5;
   export let y = 0.5;
   export let icon: IconString | undefined = undefined;
-  export let header: string | boolean | undefined = undefined;
+  export let header: string | undefined = undefined;
   export let lock = false;
 
   export let viewType: 'editing' | 'reading';
@@ -54,7 +54,7 @@
   const toggleLock = () => updateBannerData(file, { lock: !lock || undefined });
   const openIconModal = () => new IconModal(file).open();
 
-  $: height = getBannerHeight(heights, source, icon);
+  $: height = getBannerHeight(heights, source, icon, header);
   $: if (sizerEl) {
     const marginTop = getSizerHeight(heights, source, header, icon, headerVerticalAlignment);
     sizerEl.setCssStyles({ marginTop });
@@ -63,9 +63,6 @@
   $: bannerY = y ?? 0.5;
   $: isEmbed = !!embed;
   $: lockValue = lock ?? false;
-  $: headerText = (typeof header === 'boolean')
-    ? (header ? file.basename : undefined)
-    : header;
 </script>
 
 <header
@@ -97,8 +94,8 @@
   {#if icon || header}
     <Header
       {icon}
+      {header}
       {isEmbed}
-      header={headerText}
       on:open-icon-modal={openIconModal}
     />
   {/if}

diff --git a/src/banner/Header.svelte b/src/banner/Header.svelte
@@ -3,7 +3,7 @@
   import { getSetting } from 'src/settings';
   import settings from 'src/settings/store';
   import Icon from './Icon.svelte';
-  import { getIconTransform } from './utils';
+  import { getHeaderTransform } from './utils';
 
   export let icon: IconString | undefined;
   export let isEmbed: boolean;
@@ -22,7 +22,7 @@
   $: hTransform = getSetting('headerHorizontalTransform', headerHorizontalTransform);
   $: vertical = getSetting('headerVerticalAlignment', headerVerticalAlignment);
   $: vTransform = getSetting('headerVerticalTransform', headerVerticalTransform);
-  $: transform = getIconTransform(horizontal, hTransform, vertical, vTransform);
+  $: transform = getHeaderTransform(horizontal, hTransform, vertical, vTransform);
   $: fontSize = getSetting('headerSize', headerSize);
 </script>
 

diff --git a/src/banner/utils.ts b/src/banner/utils.ts
@@ -57,14 +57,15 @@ export const getHeights = (embedded: Embedded, _deps?: any[]): Heights => {
 export const getBannerHeight = (
   heights: Heights,
   source: string | undefined,
-  icon: IconString | undefined
+  icon: IconString | undefined,
+  header: string | undefined
 ): string => {
   if (source) return heights.banner;
-  else if (icon) return heights.icon;
+  else if (icon || header) return heights.icon;
   return '';
 };
 
-const getIconExtraOffset = (offset: string, alignment: HeaderVerticalAlignmentOption): string => {
+const getHeaderExtraOffset = (offset: string, alignment: HeaderVerticalAlignmentOption): string => {
   switch (alignment) {
     case 'center':
     case 'above': return '0px';
@@ -83,7 +84,7 @@ export const getSizerHeight = (
 ): string => {
   if (source) {
     if (icon || header) {
-      const extraOffset = getIconExtraOffset(heights.icon, iconAlignment);
+      const extraOffset = getHeaderExtraOffset(heights.icon, iconAlignment);
       return `calc(${heights.banner} + ${extraOffset})`;
     }
     else return heights.banner;
@@ -93,7 +94,7 @@ export const getSizerHeight = (
   return '';
 };
 
-export const getIconTransform = (
+export const getHeaderTransform = (
   horizontal: HeaderHorizontalAlignmentOption,
   hTransform: string,
   vertical: HeaderVerticalAlignmentOption,

diff --git a/src/bannerData/index.ts b/src/bannerData/index.ts
@@ -117,3 +117,9 @@ export const updateBannerData = async (file: TFile, bannerData: Partial<BannerMe
     }
   });
 };
+
+// Helper on whether a banner element should be displayed or not
+export const shouldDisplayBanner = (bannerData: Partial<BannerMetadata>): boolean => {
+  const { source, icon, header } = bannerData;
+  return !!source || !!icon || !!header;
+};
diff --git a/src/editing/extensions/bannerExtender.ts b/src/editing/extensions/bannerExtender.ts
@@ -1,6 +1,6 @@
 import { EditorState, StateEffect } from '@codemirror/state';
 import { editorInfoField } from 'obsidian';
-import { extractBannerDataFromState } from 'src/bannerData';
+import { extractBannerDataFromState, shouldDisplayBanner } from 'src/bannerData';
 import {
   assignBannerEffect,
   hasEffect,
@@ -20,7 +20,7 @@ const bannerExtender = EditorState.transactionExtender.of((transaction) => {
 
   const bannerData = extractBannerDataFromState(state);
   const newEffects: StateEffect<any>[] = [];
-  const effectFromData = (bannerData.source || bannerData.icon)
+  const effectFromData = shouldDisplayBanner(bannerData)
     ? upsertBannerEffect.of(bannerData)
     : removeBannerEffect.of(null);
   if (hasEffect(effects, openNoteEffect)) {

diff --git a/src/reading/index.ts b/src/reading/index.ts
@@ -1,5 +1,5 @@
 import type { MarkdownPostProcessor } from 'obsidian';
-import { extractBannerData } from 'src/bannerData';
+import { extractBannerData, shouldDisplayBanner } from 'src/bannerData';
 import { plug } from 'src/main';
 import { getSetting } from 'src/settings';
 import { registerSettingChangeEvent } from 'src/utils';
@@ -56,7 +56,7 @@ const postprocessor: MarkdownPostProcessor = (el, ctx) => {
   const file = plug.app.metadataCache.getFirstLinkpathDest(sourcePath, '/')!;
   const bannerData = extractBannerData(frontmatter, file);
 
-  if (bannerData.source || bannerData.icon) {
+  if (shouldDisplayBanner(bannerData)) {
     const banner = new BannerRenderChild(el, ctx, bannerData, file, embed);
     if (currentBanners[docId]) currentBanners[docId].prepareSwap();
     ctx.addChild(banner);