diff --git a/README.ja-JP.md b/README.ja-JP.md index c969896..504fbfb 100644 --- a/README.ja-JP.md +++ b/README.ja-JP.md @@ -102,14 +102,14 @@ フルスクリーン、サイドバー、パネル部分を設定するには、`background.fullscreen`、`background.sidebar`、`background.panel`を編集します。 -| 設定 | 型 | デフォルト | 説明 | -| :--------- | :--------: | :-----------: | :--------------------------------------------------------------------------------------------------------- | -| `images` | `string[]` | `[]` | `https`または`file`プロトコルで画像のパスを指定してください。複数指定することもできます。 | -| `opacity` | `number` | `0.91`、`0.2` | 画像の不透明度を制御します、[opacity][mdn-opacity]へのエイリアスです。推奨値 `0.1 ～ 0.3`。 | -| `size` | `string` | `cover` | [background-size][mdn-background-size]へのエイリアスです。推奨 `cover`，縦横比を保ったまま領域を覆います。 | -| `position` | `string` | `center` | [background-position][mdn-background-position]へのエイリアスです。デフォルト値は `center` です。 | -| `interval` | `number` | `0` | 次の画像を表示するまでの秒数を制御します。`0` の場合、画像は変更されません。 | -| `random` | `boolean` | `false` | 画像の表示順をランダムにするかを制御します。 | +| 設定 | 型 | デフォルト | 説明 | +| :--------- | :--------: | :--------: | :--------------------------------------------------------------------------------------------------------- | +| `images` | `string[]` | `[]` | `https`または`file`プロトコルで画像のパスを指定してください。複数指定することもできます。 | +| `opacity` | `number` | `0.1` | 画像の不透明度を制御します、[opacity][mdn-opacity]へのエイリアスです。推奨値 `0.1 ～ 0.3`。 | +| `size` | `string` | `cover` | [background-size][mdn-background-size]へのエイリアスです。推奨 `cover`，縦横比を保ったまま領域を覆います。 | +| `position` | `string` | `center` | [background-position][mdn-background-position]へのエイリアスです。デフォルト値は `center` です。 | +| `interval` | `number` | `0` | 次の画像を表示するまでの秒数を制御します。`0` の場合、画像は変更されません。 | +| `random` | `boolean` | `false` | 画像の表示順をランダムにするかを制御します。 | [mdn-opacity]: https://developer.mozilla.org/docs/Web/CSS/opacity [mdn-background-size]: https://developer.mozilla.org/docs/Web/CSS/background-size @@ -122,7 +122,7 @@ example: "background.fullscreen": { // ローカルの画像へのfileプロトコルによるパスは、ブラウザにドラッグアンドドロップすることで簡単に取得できます "images": ["https://pathtoimage.png", "file:///path/to/local/file"], - "opacity": 0.2, + "opacity": 0.1, "size": "cover", "position": "center", "interval": 0, diff --git a/README.md b/README.md index 65c422c..1d8c76f 100644 --- a/README.md +++ b/README.md @@ -105,7 +105,7 @@ Edit `background.fullscreen`、`background.sidebar`、`background.panel` to conf | Name | Type | Default | Description | | :--------- | :--------: | :------: | :--------------------------------------------------------------------------------------- | | `images` | `string[]` | `[]` | Your custom images, support `https` and `file` protocol. | -| `opacity` | `number` | `0.2` | Opacity of the images, alias to [opacity][mdn-opacity], `0.1 ~ 0.3` recommended. | +| `opacity` | `number` | `0.1` | Opacity of the images, alias to [opacity][mdn-opacity], `0.1 ~ 0.3` recommended. | | `size` | `string` | `cover` | Alias to [background-size][mdn-background-size], `cover` to self-adaption (recommended). | | `position` | `string` | `center` | Alias to [background-position][mdn-background-position], default `center`. | | `interval` | `number` | `0` | Seconds of interval for carousel, default `0` to disabled. | @@ -122,7 +122,7 @@ example： "background.fullscreen": { // Local images can be dragged into the browser to quickly get the file protocol address from the address bar "images": ["https://pathtoimage.png", "file:///path/to/local/file"], - "opacity": 0.2, + "opacity": 0.1, "size": "cover", "position": "center", "interval": 0, diff --git a/README.zh-CN.md b/README.zh-CN.md index 13c8e3d..6016e8a 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -100,14 +100,14 @@ example: 通过 `background.fullscreen`、`background.sidebar`、`background.panel` 来进行这些区域的配置。 -| 名称 | 类型 | 默认值 | 描述 | -| :--------- | :--------: | :-----------: | :--------------------------------------------------------------------------- | -| `images` | `string[]` | `[]` | 自定义图片，支持 `https` 和 `file` 协议。 | -| `opacity` | `number` | `0.91`、`0.2` | 透明度，等同 css [opacity][mdn-opacity]，建议 `0.1 ~ 0.3`。 | -| `size` | `string` | `cover` | 等同 css [background-size][mdn-background-size], 建议使用 `cover` 来自适应。 | -| `position` | `string` | `center` | 等同 css [background-position][mdn-background-position]， 默认值 `center`。 | -| `interval` | `number` | `0` | 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。 | -| `random` | `boolean` | `false` | 是否随机展示图片。 | +| 名称 | 类型 | 默认值 | 描述 | +| :--------- | :--------: | :------: | :--------------------------------------------------------------------------- | +| `images` | `string[]` | `[]` | 自定义图片，支持 `https` 和 `file` 协议。 | +| `opacity` | `number` | `0.1` | 透明度，等同 css [opacity][mdn-opacity]，建议 `0.1 ~ 0.3`。 | +| `size` | `string` | `cover` | 等同 css [background-size][mdn-background-size], 建议使用 `cover` 来自适应。 | +| `position` | `string` | `center` | 等同 css [background-position][mdn-background-position]， 默认值 `center`。 | +| `interval` | `number` | `0` | 单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。 | +| `random` | `boolean` | `false` | 是否随机展示图片。 | [mdn-opacity]: https://developer.mozilla.org/docs/Web/CSS/opacity [mdn-background-size]: https://developer.mozilla.org/docs/Web/CSS/background-size @@ -120,7 +120,7 @@ example: "background.fullscreen": { // 本地图片可以拖到浏览器中，快速从地址栏得到file协议的地址 "images": ["https://pathtoimage.png", "file:///path/to/local/file"], - "opacity": 0.2, + "opacity": 0.1, "size": "cover", "position": "center", "interval": 0, diff --git a/package.json b/package.json index 261db57..aa6ae26 100644 --- a/package.json +++ b/package.json @@ -174,7 +174,7 @@ "type": "object", "default": { "images": [], - "opacity": 0.2, + "opacity": 0.1, "size": "cover", "position": "center", "interval": 0, @@ -193,7 +193,7 @@ }, "opacity": { "type": "number", - "default": 0.2, + "default": 0.1, "minimum": 0, "maximum": 0.6, "markdownDescription": "%extension.background.fullscreen.opacity%" @@ -225,7 +225,7 @@ "type": "object", "default": { "images": [], - "opacity": 0.2, + "opacity": 0.1, "size": "cover", "position": "center", "interval": 0, @@ -257,7 +257,7 @@ "type": "object", "default": { "images": [], - "opacity": 0.2, + "opacity": 0.1, "size": "cover", "position": "center", "interval": 0, diff --git a/package.nls.ja.json b/package.nls.ja.json index bb86af0..288219a 100644 --- a/package.nls.ja.json +++ b/package.nls.ja.json @@ -16,7 +16,7 @@ "extension.background.fullscreen.description": "フルスクリーン表示の設定", "extension.background.fullscreen.images": "表示させる画像を制御します。\n\nパスの入力例:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`", - "extension.background.fullscreen.opacity": "画像の不透明度（opacity）を制御します、[opacity][mdn-opacity]へのエイリアスです。\n\n推奨値`0.1～0.3`，制限範囲`0～0.6`を超えると、デフォルト値`0.2`にリセットされます。", + "extension.background.fullscreen.opacity": "画像の不透明度（opacity）を制御します、[opacity][mdn-opacity]へのエイリアスです。\n\n推奨値`0.1～0.3`，制限範囲`0～0.6`を超えると、デフォルト値`0.1`にリセットされます。", "extension.background.fullscreen.size": "[background-size](https://developer.mozilla.org/docs/Web/CSS/background-size)へのエイリアスです。推奨`cover`，縦横比を保ったまま領域を覆います。", "extension.background.fullscreen.position": "[background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)へのエイリアスです。デフォルト値は`center`です。", "extension.background.fullscreen.interval": "次の画像を表示するまでの秒数を制御します。`0`の場合、画像は変更されません。", diff --git a/package.nls.json b/package.nls.json index af0efea..48e7167 100644 --- a/package.nls.json +++ b/package.nls.json @@ -16,7 +16,7 @@ "extension.background.fullscreen.description": "Fullscreen section config.", "extension.background.fullscreen.images": "Your custom images.\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`", - "extension.background.fullscreen.opacity": "Opacity of the images, alias to [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity),\n\n`0.1 ~ 0.3` recommended, it will be reset to the default `0.2` if exceeds the limit range `0 ~ 0.6`.", + "extension.background.fullscreen.opacity": "Opacity of the images, alias to [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity),\n\n`0.1 ~ 0.3` recommended, it will be reset to the default `0.1` if exceeds the limit range `0 ~ 0.6`.", "extension.background.fullscreen.size": "Alias to [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size), `cover` to self-adaption (recommended).", "extension.background.fullscreen.position": "Alias to [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position), default `center`.", "extension.background.fullscreen.interval": "Seconds of interval for carousel, default `0` to disabled.", diff --git a/package.nls.zh.json b/package.nls.zh.json index 924ec87..1166cf6 100644 --- a/package.nls.zh.json +++ b/package.nls.zh.json @@ -16,7 +16,7 @@ "extension.background.fullscreen.description": "全屏区域配置。", "extension.background.fullscreen.images": "自定义图片。\n\nExample:\n\n`https://a.com/b.png`\n\n`file:///a/b.jpg`", - "extension.background.fullscreen.opacity": "透明度，等同 css [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity)，\n\n建议 `0.1 ~ 0.3`，超出限制范围 `0 ~ 0.6` 会重置为 `0.2`。", + "extension.background.fullscreen.opacity": "透明度，等同 css [opacity](https://developer.mozilla.org/docs/Web/CSS/opacity)，\n\n建议 `0.1 ~ 0.3`，超出限制范围 `0 ~ 0.6` 会重置为 `0.1`。", "extension.background.fullscreen.size": "等同 css [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size), 建议使用 `cover` 来自适应。", "extension.background.fullscreen.position": "等同 css [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position)， 默认值 `center`。", "extension.background.fullscreen.interval": "单位 `秒`，轮播时候图片切换间隔，默认 `0` 表示不开启。", diff --git a/src/background/PatchGenerator/PatchGenerator.base.ts b/src/background/PatchGenerator/PatchGenerator.base.ts index 9abdc87..8c53526 100644 --- a/src/background/PatchGenerator/PatchGenerator.base.ts +++ b/src/background/PatchGenerator/PatchGenerator.base.ts @@ -28,7 +28,14 @@ export function css(template: TemplateStringsArray, ...args: any[]) { } export class AbsPatchGenerator { - constructor(protected config: T) {} + protected config: T; + + constructor(config: T) { + this.config = { + ...config, + images: this.normalizeImageUrls(config?.images || []) + }; + } /** * 归一化图片路径 @@ -71,6 +78,20 @@ export class AbsPatchGenerator { return ''; } + // protected getPreload() { + // return ` + // const images = ${JSON.stringify(this.config?.images || [])}; + + // images.forEach(imgLink => { + // const link = document.createElement('link'); + // link.rel = 'preload'; + // link.as = 'image'; + // link.href = imgLink; + // document.head.appendChild(link); + // }); + // `; + // } + public create() { if (!this.config?.images.length) { return ''; diff --git a/src/background/PatchGenerator/PatchGenerator.editor.ts b/src/background/PatchGenerator/PatchGenerator.editor.ts index fdd1e22..07cab1c 100644 --- a/src/background/PatchGenerator/PatchGenerator.editor.ts +++ b/src/background/PatchGenerator/PatchGenerator.editor.ts @@ -55,13 +55,10 @@ export class EditorPatchGenerator extends AbsPatchGenerator, useFront: boolean): string { diff --git a/src/background/PatchGenerator/PatchGenerator.fullscreen.ts b/src/background/PatchGenerator/PatchGenerator.fullscreen.ts index 2736d69..e140fc1 100644 --- 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.2; // 建议在 0.1 ~ 0.3 + opacity = 0.1; // 建议在 0.1 ~ 0.3 size = 'cover' as 'cover' | 'contain'; position = 'center'; interval = 0; @@ -17,8 +17,7 @@ export class FullscreenPatchGenerator ...new FullscreenPatchGeneratorConfig(), ...this.config }; - // ------ 处理图片 ------ - cur.images = this.normalizeImageUrls(cur.images); + // ------ opacity ------ if (cur.opacity < 0 || cur.opacity > 0.6) { cur.opacity = new FullscreenPatchGeneratorConfig().opacity; @@ -35,7 +34,7 @@ export class FullscreenPatchGenerator content: ''; display: block; position: absolute; - z-index: 10; + z-index: 1000; inset: 0; pointer-events: none; background-size: ${size}; @@ -43,7 +42,7 @@ export class FullscreenPatchGenerator /* background-attachment: fixed; // 兼容 code-server，其他的不影响 */ background-position: ${position}; opacity: ${opacity}; - transition: 0.3s; + transition: 1s; background-image: var(${this.cssvariable}); } `; diff --git a/src/background/PatchGenerator/PatchGenerator.panel.ts b/src/background/PatchGenerator/PatchGenerator.panel.ts index 2ffff23..3195b84 100644 --- a/src/background/PatchGenerator/PatchGenerator.panel.ts +++ b/src/background/PatchGenerator/PatchGenerator.panel.ts @@ -22,7 +22,7 @@ export class PanelPatchGenerator extends FullscreenPatchGenerator