Fixed modal dimensions

Author: dominikmayer

main.ts

@@ -128,12 +128,12 @@ export default class Yesterday extends Plugin {
 				if (isDreamStart && !this.inDream) {
 					this.inDream = true;
 					this.dreamContent = "> [!yesterday-dream] Dream\n";
-				} 
+				}
 
-				if (this.inDream) {					
+				if (this.inDream) {
 					let textWithoutMarkers = text.replace(/^§§§|§§§$/g, '').trim();
 					this.dreamContent += `> ${textWithoutMarkers}\n`;
-					if(!isDreamEnd) {
+					if (!isDreamEnd) {
 						this.dreamContent += `> \n`;
 						this.dreamParagraphsToRemove.push(paragraph);
 					}
@@ -286,7 +286,7 @@ export default class Yesterday extends Plugin {
 			document.body.classList.remove('hide-media-files');
 		}
 	}
-	
+
 	setColorClasses() {
 		if (this.settings.colorMarkdownFiles) {
 			document.body.classList.add('color-markdown-files');
@@ -298,7 +298,7 @@ export default class Yesterday extends Plugin {
 	async saveSettings() {
 		await this.saveData(this.settings);
 	}
-	
+
 }
 
 function updateStatusBarTodoCount(barElement: HTMLElement) {
@@ -382,15 +382,15 @@ class YesterdaySettingTab extends PluginSettingTab {
 		p.createEl('a', { href: 'https://www.yesterday.md', text: 'yesterday.md' });
 
 		new Setting(containerEl)
-		.setName('Color Entries')
-		.setDesc('Highlights open and resolved entries in different colors')
-		.addToggle(toggle => toggle
-			.setValue(this.plugin.settings.colorMarkdownFiles)
-			.onChange(async (value) => {
-				this.plugin.settings.colorMarkdownFiles = value;
-				await this.plugin.saveSettings();
-				this.plugin.setColorClasses();
-			}));
+			.setName('Color Entries')
+			.setDesc('Highlights open and resolved entries in different colors')
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.colorMarkdownFiles)
+				.onChange(async (value) => {
+					this.plugin.settings.colorMarkdownFiles = value;
+					await this.plugin.saveSettings();
+					this.plugin.setColorClasses();
+				}));
 
 		new Setting(containerEl)
 			.setName('Hide Media Files')
@@ -402,17 +402,5 @@ class YesterdaySettingTab extends PluginSettingTab {
 					await this.plugin.saveSettings();
 					this.plugin.setMediaClasses();
 				}));
-
-		// new Setting(containerEl)
-		// 	.setName('DarkSky API Key')
-		// 	.setDesc('You can get it from DarkSky')
-		// 	.addText(text => text
-		// 		.setPlaceholder('Enter your API key')
-		// 		.setValue(this.plugin.settings.darkSkyApiKey)
-		// 		.onChange(async (value) => {
-		// 			console.log('Secret: ' + value);
-		// 			this.plugin.settings.darkSkyApiKey = value;
-		// 			await this.plugin.saveSettings();
-		// 		}));
 	}
 }

media.ts

@@ -47,26 +47,53 @@ export class ImageModal extends Modal {
    */
   onOpen() {
     const { contentEl } = this;
-    contentEl.createEl('img', {
-      attr: {
-        src: this.imgSrc,
-        style: 'width: 100%; height: 100%; object-fit: contain; object-position: center;'
-      }
-    });
 
-    Object.assign(this.modalEl.style, {
-      width: '100%',
-      height: '100%',
-      boxShadow: 'none'
+    // Create an image element
+    const img = contentEl.createEl('img', {
+        attr: {
+            src: this.imgSrc,
+            // Remove the explicit width and height setting to allow natural size
+            style: 'max-width: 100%; max-height: 100%; object-fit: contain; object-position: center;'
+        }
     });
 
+    // Wait for the image to load to get its natural dimensions
+    img.onload = () => {
+        // Calculate the aspect ratio of the image
+        const aspectRatio = img.naturalWidth / img.naturalHeight;
+        
+        // Determine the maximum size of the modal based on the window size
+        const maxWidth = window.innerWidth * 0.9; // 90% of the viewport width
+        const maxHeight = window.innerHeight * 0.8; // 80% of the viewport height
+
+        // Calculate the optimal size of the modal based on the image aspect ratio
+        let modalWidth, modalHeight;
+        if (aspectRatio > 1) {
+            // Image is wider than it is tall
+            modalWidth = Math.min(maxWidth, img.naturalWidth);
+            modalHeight = modalWidth / aspectRatio;
+        } else {
+            // Image is taller than it is wide or square
+            modalHeight = Math.min(maxHeight, img.naturalHeight);
+            modalWidth = modalHeight * aspectRatio;
+        }
+
+        // Apply the calculated dimensions to the modal
+        Object.assign(this.modalEl.style, {
+            width: `${modalWidth}px`,
+            height: `${modalHeight}px`,
+            boxShadow: 'none'
+        });
+    };
+
+    // Close the modal on click
     this.modalEl.addEventListener('click', () => this.close());
-  }
+}
 
-  /**
-   * Called when the modal is closed. Cleans up by emptying the content element.
-   */
-  onClose() {
-    this.contentEl.empty();
+    /**
+     * Called when the modal is closed. Cleans up by emptying the content element.
+     */
+    onClose() {
+      this.contentEl.empty();
+    }
   }
-}