使用body::after实现fullscreen (#481)

shalldie · Oct 30, 2024 · 74b81a4 · 74b81a4
1 parent 7ae5fc8
commit 74b81a4
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -76,7 +76,7 @@ Edit `background.editor` to config editor section.
 | `interval` |  `number`  |     `0`      | Seconds of interval for carousel, default `0` to disabled. |
 | `random`   | `boolean`  |   `false`    | Whether to randomly display images.                        |
 
-> `style` means [css style](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS), which allows you to create great-looking background.
+> `style` means [css style](https://developer.mozilla.org/docs/Web/CSS), which allows you to create great-looking background.
 
 example:
 

diff --git a/README.pt-BR.md b/README.pt-BR.md
@@ -75,7 +75,7 @@ Os requisitos definidos pelo usuário podem ser alterados usando a configuraçã
 | `background.customImages` | `Array<String>` |     `[]`     | Adiciona suas imagens personalizadas                                 |
 | `background.interval`     |    `Number`     |     `0`      | Segundos de intervalo para o carousel, utilize `0` para desabilitar. |
 
-> `style` significa [css style](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS), que permite a criação de planos de fundo atrativos.
+> `style` significa [css style](https://developer.mozilla.org/docs/Web/CSS), que permite a criação de planos de fundo atrativos.
 
 ### Configuração de Tela cheia
 

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -74,7 +74,7 @@
 | `interval` |  `number`  |     `0`      | 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。 |
 | `random`   | `boolean`  |   `false`    | 是否随机展示图片。                                     |
 
-> `style` 指的是 [css style](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS)， 通过自定义样式可以改变背景图的展示。
+> `style` 指的是 [css style](https://developer.mozilla.org/docs/Web/CSS)， 通过自定义样式可以改变背景图的展示。
 
 example:
 

diff --git a/package.json b/package.json
@@ -174,7 +174,7 @@
           "type": "object",
           "default": {
             "images": [],
-            "opacity": 0.91,
+            "opacity": 0.2,
             "size": "cover",
             "position": "center",
             "interval": 0,
@@ -193,7 +193,9 @@
             },
             "opacity": {
               "type": "number",
-              "default": 0.91,
+              "default": 0.2,
+              "minimum": 0,
+              "maximum": 0.6,
               "markdownDescription": "%extension.background.fullscreen.opacity%"
             },
             "size": {

diff --git a/package.nls.json b/package.nls.json
@@ -8,7 +8,7 @@
 
     "extension.background.editor.description": "Editor section config.",
     "extension.background.editor.useFront": "Place the image above or below the code.",
-    "extension.background.editor.style": "Custom style for images.",
+    "extension.background.editor.style": "Custom style for images. [MDN Reference](https://developer.mozilla.org/docs/Web/CSS)",
     "extension.background.editor.styles": "Each style of editor section image.",
     "extension.background.editor.images": "Your custom images.\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`",
     "extension.background.editor.interval": "Seconds of interval for carousel, default `0` to disabled.",

diff --git a/package.nls.zh.json b/package.nls.zh.json
@@ -8,7 +8,7 @@
 
     "extension.background.editor.description": "编辑器区域配置。",
     "extension.background.editor.useFront": "把图片放在代码的上方或下方。",
-    "extension.background.editor.style": "自定义图片样式。",
+    "extension.background.editor.style": "自定义图片样式。 [MDN Reference](https://developer.mozilla.org/docs/Web/CSS)",
     "extension.background.editor.styles": "为每一个图片自定义样式。",
     "extension.background.editor.images": "自定义图片。\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`",
     "extension.background.editor.interval": "单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。",

diff --git a/src/background/PatchGenerator/PatchGenerator.fullscreen.ts b/src/background/PatchGenerator/PatchGenerator.fullscreen.ts
@@ -2,7 +2,7 @@ import { AbsPatchGenerator, css } from './PatchGenerator.base';
 
 export class FullscreenPatchGeneratorConfig {
     images = [] as string[];
-    opacity = 0.91; // 建议在 0.85 ~ 0.95 之间微调
+    opacity = 0.2; // 建议在 0.1 ~ 0.3
     size = 'cover' as 'cover' | 'contain';
     position = 'center';
     interval = 0;
@@ -19,23 +19,31 @@ export class FullscreenPatchGenerator<T extends FullscreenPatchGeneratorConfig>
         };
         // ------ 处理图片 ------
         cur.images = this.normalizeImageUrls(cur.images);
+        // ------ opacity ------
+        if (cur.opacity < 0 || cur.opacity > 0.6) {
+            cur.opacity = new FullscreenPatchGeneratorConfig().opacity;
+        }
+
         return cur;
     }
 
     protected getStyle(): string {
         const { size, position, opacity } = this.curConfig;
 
         return css`
-            body {
+            body::after {
+                content: '';
+                display: block;
+                position: absolute;
+                z-index: 10;
+                inset: 0;
+                pointer-events: none;
                 background-size: ${size};
                 background-repeat: no-repeat;
-                background-attachment: fixed; // 兼容 code-server，其他的不影响
+                /* background-attachment: fixed; // 兼容 code-server，其他的不影响 */
                 background-position: ${position};
                 opacity: ${opacity};
                 transition: 0.3s;
-            }
-            // 从 1.78.0 开始使用 Chromium:108+，支持 :has 选择器
-            body:has([id='workbench.parts.editor']) {
                 background-image: var(${this.cssvariable});
             }
         `;
@@ -44,11 +52,12 @@ export class FullscreenPatchGenerator<T extends FullscreenPatchGeneratorConfig>
     protected getScript(): string {
         const { images, random, interval } = this.curConfig;
         return `
-var cssvariable = '${this.cssvariable}';
-var images = ${JSON.stringify(images)};
-var random = ${random};
-var interval = ${interval};
-var curIndex = -1;
+const cssvariable = '${this.cssvariable}';
+const images = ${JSON.stringify(images)};
+const random = ${random};
+const interval = ${interval};
+
+let curIndex = -1;
 
 function getNextImg() {
     if (random) {

diff --git a/src/background/PatchGenerator/PatchGenerator.panel.ts b/src/background/PatchGenerator/PatchGenerator.panel.ts
@@ -1,23 +1,11 @@
 import { css } from './PatchGenerator.base';
 import { FullscreenPatchGenerator, FullscreenPatchGeneratorConfig } from './PatchGenerator.fullscreen';
 
-export class PanelPatchGeneratorConfig extends FullscreenPatchGeneratorConfig {
-    opacity = 0.2; // 建议在 0.1 ~ 0.3 左右
-}
+export class PanelPatchGeneratorConfig extends FullscreenPatchGeneratorConfig {}
 
 export class PanelPatchGenerator extends FullscreenPatchGenerator<PanelPatchGeneratorConfig> {
     protected readonly cssvariable = '--background-panel-img';
 
-    protected get curConfig() {
-        const cur = {
-            ...new PanelPatchGeneratorConfig(),
-            ...this.config
-        };
-        // ------ 处理图片 ------
-        cur.images = this.normalizeImageUrls(cur.images);
-        return cur;
-    }
-
     protected getStyle(): string {
         const { size, position, opacity } = this.curConfig;
 

diff --git a/src/background/PatchGenerator/PatchGenerator.sidebar.ts b/src/background/PatchGenerator/PatchGenerator.sidebar.ts
@@ -1,23 +1,11 @@
 import { css } from './PatchGenerator.base';
 import { FullscreenPatchGenerator, FullscreenPatchGeneratorConfig } from './PatchGenerator.fullscreen';
 
-export class SidebarPatchGeneratorConfig extends FullscreenPatchGeneratorConfig {
-    opacity = 0.2; // 建议在 0.1 ~ 0.3 左右
-}
+export class SidebarPatchGeneratorConfig extends FullscreenPatchGeneratorConfig {}
 
 export class SidebarPatchGenerator extends FullscreenPatchGenerator<SidebarPatchGeneratorConfig> {
     protected cssvariable = '--background-sidebar-img';
 
-    protected get curConfig() {
-        const cur = {
-            ...new SidebarPatchGeneratorConfig(),
-            ...this.config
-        };
-        // ------ 处理图片 ------
-        cur.images = this.normalizeImageUrls(cur.images);
-        return cur;
-    }
-
     protected getStyle(): string {
         const { size, position, opacity } = this.curConfig;