feat: add popup background blur enable option

gitcpy · Nov 15, 2024 · 4053bcc · 4053bcc
1 parent 0d68e5d
commit 4053bcc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -25,6 +25,7 @@ interface MermaidPopupSetting {
     bgColorDark:string;
     bgAlpha:string;
     bgAlphaStep:Record<string, string>;
+    bgIsBlur:string;
 };
 
 const DEFAULT_SETTINGS: MermaidPopupSetting = {
@@ -85,7 +86,8 @@ const DEFAULT_SETTINGS: MermaidPopupSetting = {
         '0.8':'0.8',
         '0.9':'0.9',
         '1.0':'1.0'
-    },    
+    },  
+    bgIsBlur:'1'
 };
 
 export default class MermaidPopupPlugin extends Plugin {
@@ -441,6 +443,7 @@ export default class MermaidPopupPlugin extends Plugin {
         const overlay = targetElement.doc.createElement('div');
         overlay.classList.add('popup-overlay');
         this.setPopupBgAlpha(overlay);
+        this.setPopupBgBlur(overlay);
         // copy target
         let targetElementClone = targetElement.cloneNode(true);
         let targetElementInPopup = targetElementClone as HTMLElement;
@@ -498,10 +501,21 @@ export default class MermaidPopupPlugin extends Plugin {
         });
     }
 
+    setPopupBgBlur(_popupElement:HTMLElement){
+        if (!_popupElement) 
+            return;
+
+        let bgIsBlur = this.settings.bgIsBlur;
+        let cssBgIsBlur = bgIsBlur=='1'?'blur(10px)':'';
+        _popupElement.setCssStyles({
+            backdropFilter:cssBgIsBlur
+        })        
+    }
+
     setPopupBgAlpha(_popupElement:HTMLElement) {
         if (!_popupElement) 
             return;
-        
+
         let alpha = this.settings.bgAlpha;
         // 构造新的 rgba 值
         let newBgColor;

diff --git a/src/settings.ts b/src/settings.ts
@@ -139,7 +139,6 @@ class MermaidPopupSettingTab extends PluginSettingTab {
         // bg Alpha title
         let titlePpBgA = td_title_a.createEl('h2', { text: 'Popup Background Alpha Value' });
         titlePpBgA.classList.add('config-text');
-        //const rowPpBgAlpha = td_title_a.createDiv({ cls: 'kv-row' });
         // bg Alpha settign
         new Setting(td_title_a)
         .setName('Choose the alpha value')
@@ -154,13 +153,28 @@ class MermaidPopupSettingTab extends PluginSettingTab {
                     this.plugin.settings.bgAlpha = value;
                     await this.plugin.saveSettings();
                 }
-
             )
         });    
 
         this.addClass(td_title_a, 'setting-item', 'setting-item-on-top-line');
 
-
+        const td_title_blur = row.createEl('td');
+        // bg Alpha title
+        let titleBlur = td_title_blur.createEl('h2', { text: 'Popup Background Blur' });
+        titleBlur.classList.add('config-text');
+        // bg Alpha settign
+        new Setting(td_title_blur)
+        .setName('Enable blur')
+        .addToggle(toggle => 
+            toggle
+                .setValue(this.plugin.settings.bgIsBlur=='1'?true:false)
+                .onChange(async (value) => {
+                    this.plugin.settings.bgIsBlur = value?'1':'0';
+                    await this.plugin.saveSettings();
+                })
+        );
+
+        this.addClass(td_title_blur, 'setting-item', 'setting-item-on-top-line');        
 
         // 开启弹窗按钮位置
         let title_btn_pos = containerEl.createEl('h2', { text: 'Open Popup Button Relative Position Init' });