Merge pull request #243 from jparkerweb/develop

v3.5.2

Author: jparkerweb

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to the Pixel Banner plugin will be documented in this file.
 
 ## 🎉 What's New
+### v3.5.2 - 2025-05-21
+#### 🐛 Fixed
+- Updated styles to remove overflow on images for mobile devices
+- Resolved issue with icon image selection modal not using the correct extension for non-svg images
+
 ### v3.5.1 - 2025-05-19
 #### ✨ Added
 - Added Command Palette command for selecting a `Banner Icon Image`

UPDATE.md

@@ -3,6 +3,11 @@
 </a>
 
 ## 🎉 What's New
+### v3.5.2 - 2025-05-21
+#### 🐛 Fixed
+- Updated styles to remove overflow on images for mobile devices
+- Resolved issue with icon image selection modal not using the correct extension for non-svg images
+
 ### v3.5.1 - 2025-05-19
 #### ✨ Added
 - Added Command Palette command for selecting a `Banner Icon Image`

inventory.md

@@ -1,6 +1,6 @@
 # Inventory of Pixel Banner Plugin
 
-**Last Updated:** May 5, 2025
+**Last Updated:** May 19, 2025
 
 Below is a concise overview of all files and their primary functions or methods. This document helps developers quickly locate and understand the key points in the codebase.
 
@@ -11,7 +11,7 @@ Below is a concise overview of all files and their primary functions or methods.
 ### `manifest.json`
 **Description**:  
 - Plugin manifest containing metadata like ID, name, version, minimum app version, description, author info, and funding URL.
-- Current Version: 3.4.5
+- Current Version: 3.5.1
 
 ### `package.json`
 **Description**:  
@@ -92,7 +92,11 @@ Provides utility methods for managing the "icon overlay" feature on banners.
    Checks whether the existing icon overlay's styling or state differs from the desired icon state and thus needs an update.
 5. **handleSetBannerIcon(plugin)**  
    Opens an emoji selection modal and updates frontmatter with the chosen banner icon.
-6. **cleanupIconOverlay(plugin, view)**  
+6. **handleSetBannerIconImage(plugin)**  
+   Opens the Icon Image Selection modal for adding images to banner icons, supporting local images, web URLs, and online collections.
+7. **applyIconRotation(iconElement, rotationDegrees)**  
+   Applies rotation transformation to the banner icon based on user-defined degree values (0-360 degrees).
+8. **cleanupIconOverlay(plugin, view)**  
    Removes any non-persistent icon overlays from the specified view.
 
 ---
@@ -403,6 +407,54 @@ Helps visually set or tweak the X/Y offsets for the banner and icon.
 
 ---
 
+## `/src/modal/modals/iconImageSelectionModal.js`
+**Class**: `IconImageSelectionModal` (extends `Modal`)  
+Provides image selection for banner icons, allowing users to choose from local images, web URLs, or online collections.
+
+**Key Methods**:
+1. **onOpen()**  
+   Builds the modal interface with tabs for different icon image sources.
+2. **renderCollectionsTab()**  
+   Creates the interface for browsing and selecting from online icon collections.
+3. **renderLocalTab()**  
+   Displays local vault images that can be used as banner icons.
+4. **renderWebTab()**  
+   Provides an interface for entering web URLs for icon images.
+5. **handleImageSelection(imagePath)**  
+   Processes the selected image and updates the banner icon.
+
+---
+
+## `/src/modal/modals/iconFolderSelectionModal.js`
+**Class**: `IconFolderSelectionModal` (extends `FuzzySuggestModal`)  
+Allows selection of a folder containing images to use as banner icons.
+
+**Key Methods**:
+1. **getItems()**  
+   Returns a list of folders from the vault.
+2. **onChooseItem(folder)**  
+   Sets the selected folder as the source for banner icons.
+
+---
+
+## `/src/modal/modals/targetPositionModal.js`
+**Class**: `TargetPositionModal` (extends `Modal`)  
+Provides an interactive UI for adjusting banner position, size, and appearance with enhanced controls for icon styling.
+
+**Key Methods**:
+1. **onOpen()**  
+   Builds the UI with controls for banner position, size, alignment, and icon settings.
+2. **createBannerControls()**  
+   Creates sliders and inputs for banner position, size, and display settings.
+3. **createBorderRadiusControl()**  
+   Creates the new border radius slider control for adjusting banner corner rounding.
+4. **createIconControls()**  
+   Creates controls for banner icon styling, including size, position, opacity, and rotation.
+5. **onClose()**  
+   Cleans up the modal and saves any changes to banner settings.
+
+---
+
 ## `/src/modal/modals/dailyGame.js`
 **Class**: `DailyGameModal` (extends `Modal`)  
 Provides a daily game or challenge feature within the plugin.
@@ -437,6 +489,8 @@ Exports all modals from the `modal/modals` directory.
 - `PixelBannerStoreModal`
 - `WebAddressModal`
 - `DailyGameModal`
+- `IconImageSelectionModal`
+- `IconFolderSelectionModal`
 
 ---
 

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "pexels-banner",
     "name": "Pixel Banner",
-    "version": "3.5.1",
+    "version": "3.5.2",
     "minAppVersion": "1.6.0",
     "description": "Enhance your notes with customizable banner images, including AI-generated designs and a curated store of downloadable banners. Transform your workspace with visually stunning headers that add context, improve aesthetics, and take your note-taking beyond the ordinary.",
     "author": "Justin Parker (eQui\\\\ Labs)",

src/modal/modals/iconImageSelectionModal.js

@@ -238,7 +238,6 @@ export class IconImageSelectionModal extends Modal {
             .pixel-banner-image-container {
                 cursor: pointer;
                 border-radius: 6px;
-                overflow: hidden;
                 border: 1px solid var(--background-modifier-border);
                 transition: transform 0.2s ease, box-shadow 0.2s ease;
                 position: relative;
@@ -1344,6 +1343,7 @@ export class IconImageSelectionModal extends Modal {
         try {
             const url = `${PIXEL_BANNER_PLUS.API_URL}${PIXEL_BANNER_PLUS.ENDPOINTS.BANNER_ICONS_ID.replace(':id', icon.id)}?key=${PIXEL_BANNER_PLUS.BANNER_ICON_KEY}`;
 
+            // Get the icon details from the API
             const response = await fetch(url, {
                 headers: {
                     'Accept': 'application/json'
@@ -1362,13 +1362,25 @@ export class IconImageSelectionModal extends Modal {
 
             const iconData = data.bannerIcon;
 
-            // Extract extension from file_name or description, defaulting to the original format
-            // Look for extension in file_name first
-            let extension = 'svg'; // Default to svg as mentioned by user
-            let fileName = iconData.file_name || '';
+            // Extract extension from the base64 image string's MIME type
+            let extension = 'png'; // Default as fallback
 
-            if (fileName) {
-                const parts = fileName.split('.');
+            // Check if we have a base64 image with MIME type info
+            if (iconData.base64Image) {
+                
+                // regex to handle MIME type formats
+                const mimeTypeMatch = iconData.base64Image.match(/data:image\/([\w\+\-\.]+);base64/);
+                
+                if (mimeTypeMatch && mimeTypeMatch[1]) {
+                    extension = mimeTypeMatch[1];
+                    
+                    if (extension === 'jpeg') extension = 'jpg';
+                    if (extension === 'svg+xml') extension = 'svg';
+                }
+            }
+            // Fallback: try to get extension from file_name
+            else if (iconData.file_name) {
+                const parts = iconData.file_name.split('.');
                 if (parts.length > 1) {
                     extension = parts[parts.length - 1].toLowerCase();
                 }
@@ -1396,21 +1408,31 @@ export class IconImageSelectionModal extends Modal {
                     await this.app.vault.createFolder(folderPath);
                 }
 
-                // Get a safe filename
-                const suggestedName = `${iconData.description || 'icon'}.${extension}`;
-                const fileName = await new Promise((resolve) => {
+                // Get a safe filename without extension - we'll add it later
+                const suggestedName = `${iconData.description || 'icon'}`;
+                const userFileName = await new Promise((resolve) => {
                     new SaveImageModal(this.app, suggestedName, (result) => {
                         resolve(result);
                     }).open();
                 });
 
-                if (!fileName) {
+                if (!userFileName) {
                     new Notice('No file name provided');
                     return;
                 }
 
+                // Remove any extension the user might have added
+                let baseName = userFileName;
+                if (baseName.includes('.')) {
+                    baseName = baseName.substring(0, baseName.lastIndexOf('.'));
+                }
+                
+                // Add the correct extension from our MIME type detection
+                const finalFileName = `${baseName}.${extension}`;
+                
                 // Convert base64 to binary
-                const base64Data = iconData.base64Image.split(',')[1]; // Remove the data:image/png;base64, part
+                const base64Parts = iconData.base64Image.split(',');
+                const base64Data = base64Parts[1];
                 const binaryString = window.atob(base64Data);
                 const bytes = new Uint8Array(binaryString.length);
                 for (let i = 0; i < binaryString.length; i++) {
@@ -1419,7 +1441,7 @@ export class IconImageSelectionModal extends Modal {
 
                 try {
                     // Create the file in the vault
-                    const fullPath = `${folderPath}/${fileName}`.replace(/\/+/g, '/');
+                    const fullPath = `${folderPath}/${finalFileName}`.replace(/\/+/g, '/');
                     const newFile = await this.app.vault.createBinary(fullPath, bytes.buffer);
 
                     // Call onChoose with the new file

src/modal/modals/imageSelectionModal.js

@@ -219,7 +219,6 @@ export class ImageSelectionModal extends Modal {
             .pixel-banner-image-container {
                 cursor: pointer;
                 border-radius: 6px;
-                overflow: hidden;
                 border: 1px solid var(--background-modifier-border);
                 transition: transform 0.2s ease, box-shadow 0.2s ease;
                 position: relative;