From ceff76a0f61916ed9ebd73a4ffe995a827ca0806 Mon Sep 17 00:00:00 2001 From: daonali Date: Sun, 29 Dec 2024 13:26:59 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E5=AE=9Aset=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E6=9C=89=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 400 ++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 259 insertions(+), 141 deletions(-) diff --git a/main.js b/main.js index fe82aaa..9f580c3 100644 --- a/main.js +++ b/main.js @@ -1,173 +1,291 @@ -const { PluginSettingTab, Setting, Plugin} = require('obsidian'); +const { PluginSettingTab, Setting, Plugin, debounce } = require('obsidian'); // 设置默认值 const DEFAULT_SETTINGS = { - imageAdressList: [], // 用于存储图片的绝对路径 - defaultFolder: 'images', // 默认文件夹 - fadeOutTime: 1000, + defaultFolder: '', + transTime: 1000,//fade out-in time + changeTime: 120000,//change time default 20 min + opacity: 0.9, + whetherrandom: false, }; // 设置面板 class MySettingTab extends PluginSettingTab { - constructor(app, plugin) { - super(app, plugin); - this.plugin = plugin; - } + constructor(app, plugin) { + super(app, plugin); + this.plugin = plugin; + } - display() { - const { containerEl } = this; - containerEl.empty(); + display() { + const { containerEl } = this; + containerEl.empty(); - containerEl.createEl('h2', { text: 'Background Settings' }); + containerEl.createEl('h2', { text: 'Background Settings' }); - // 设置删除按钮 - new Setting(containerEl) - .setName('Delete Background') - .setDesc('Remove the current background with a fade-out effect') - .addButton((button) => - button - .setButtonText('Delete Background') - .setCta() // 可选：如果需要突出显示按钮（通常会使按钮有强调效果）） - .onClick(() => { - this.plugin.deleteBackground(); - }) - ); + // set defaultFolder + new Setting(containerEl) + .setName('Set your Background defaultFolder') + .addText( + (text) => text + .setPlaceholder(`a relative path starting from your vault + Example: images/backgrounds`) + .setValue(this.plugin.settings.defaultFolder) + .onChange(debounce(async (value) => { + this.plugin.settings.defaultFolder = value; + await this.plugin.saveSettings(); + this.plugin.updateImageList(); + }, 500)) + ); - // 显示图片编号（以网格形式排列） - const imageListContainer = containerEl.createEl('div', { cls: 'image-grid' }); + // whether random + new Setting(containerEl) + .setName("Random play") + .setDesc("Toggle random background playback") + .addToggle( + (toggle) => toggle + .setValue(this.plugin.settings.whetherrandom) // 根据当前设置初始化开关状态 + .onChange(async (value) => { + this.plugin.settings.whetherrandom = value ? 1 : 0; // 更新设置值 + await this.plugin.saveSettings(); // 保存设置 + }) + ); - this.plugin.settings.imageAdressList.forEach((imagePath, index) => { - const imgContainer = imageListContainer.createDiv({ cls: 'image-item' }); - - // 添加缩略图 - const thumbnail = imgContainer.createEl('img'); - thumbnail.src = imagePath; // 使用图片路径 - thumbnail.style.maxWidth = '100px'; // 控制缩略图最大宽度 - thumbnail.style.maxHeight = '100px'; // 控制缩略图最大高度 - thumbnail.style.objectFit = 'cover'; // 保持图片比例裁剪 - - // 设置背景按钮 - const setBackgroundButton = imgContainer.createEl('button', { text: 'Set as Background' }); - setBackgroundButton.style.marginTop = '5px'; - setBackgroundButton.addEventListener('click', () => { - this.plugin.setBackground(index); - }); - }); - - } + + // set changeTime + new Setting(containerEl) + .setName('Set the change time(min)') + .addText( + (text) => text + .setPlaceholder('change time(min)') + .setValue((this.plugin.settings.changeTime / 60000.0).toString()) + .onChange(debounce(async (value) => { + this.plugin.settings.changeTime = value * 60000; + await this.plugin.saveSettings(); + }, 500) + ) // 设置防抖延迟时间为 500 毫秒 + ); + + // set opacity + new Setting(containerEl) + .setName('Set the opacity') + .addText( + (text) => text + .setPlaceholder('0.1 - 1') + .setValue(this.plugin.settings.opacity.toString()) + .onChange(debounce(async (value) => { + if (value < 0.1 || value > 1) return; + this.plugin.settings.opacity = value; + const body = document.body; + if (body.classList.contains('active')) { + body.style.opacity = value; // 动态更新 body 的透明度 + } + }, 500) + ) + ); + + // set transTime + new Setting(containerEl) + .setName('Set the fade out-in time(ms)') + .addText( + (text) => text + .setPlaceholder('fade out-in time(ms)') + .setValue(this.plugin.settings.transTime.toString()) + .onChange(debounce(async (value) => { + this.plugin.settings.transTime = value; + await this.plugin.saveSettings(); + }, 300, true)) + ); + + // random background + new Setting(containerEl) + .setName('Apply random Background') + .addButton( + (button) => button + .setButtonText('Random Background') + .onClick(() => { + this.plugin.setRandomBackground(); + }) + ); + + // 设置删除按钮 + new Setting(containerEl) + .setName('Delete Background') + .addButton( + (button) => button + .setButtonText('Delete Background') + .onClick(() => { + this.plugin.deleteBackground(); + }) + ); + + // 显示图片编号（以网格形式排列） + const imageListContainer = containerEl.createEl('div', { cls: 'image-grid' }); + + globalThis.imageAdressList.forEach((imagePath, index) => { + const imgContainer = imageListContainer.createDiv({ cls: 'image-item' }); + + // 添加缩略图 + const thumbnail = imgContainer.createEl('img'); + thumbnail.src = imagePath; // 使用图片路径 + thumbnail.style.maxWidth = '100px'; // 控制缩略图最大宽度 + thumbnail.style.maxHeight = '100px'; // 控制缩略图最大高度 + thumbnail.style.objectFit = 'cover'; // 保持图片比例裁剪 + + // 设置背景按钮 + const setBackgroundButton = imgContainer.createEl('button', { text: 'Set as Background' }); + setBackgroundButton.style.marginTop = '5px'; + setBackgroundButton.addEventListener('click', () => { + this.plugin.setOrderedBackground(index); + }); + }); + + } } // 主插件类 module.exports = class MyPlugin extends Plugin { - async onload() { - await this.loadSettings(); - this.app.workspace.onLayoutReady(() => { - this.updateImageList(); - this.addSettingTab(new MySettingTab(this.app, this)); - this.setRandomBackground(); - }); - } + async onload() { + globalThis.imageAdressList = []; + await this.loadSettings(); + this.app.workspace.onLayoutReady(() => { + this.addSettingTab(new MySettingTab(this.app, this)); + this.setRandomBackground(); + }); + } - onunload() { - this.deleteBackground(); - this.saveSettings(); - } + onunload() { + this.deleteBackground(); + delete globalThis.imageAdressList; + } - async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - console.log("loadsettings success"); - } + async loadSettings() { + this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); + } - async saveSettings() { - await this.saveData(this.settings); - } + async saveSettings() { + await this.saveData(this.settings); + } - // 更新图片列表，扫描 images 文件夹并获取所有图片的路径 - async updateImageList() { - const folder = this.app.vault.getFolderByPath(this.settings.defaultFolder); + // 更新图片列表，扫描 images 文件夹并获取所有图片的路径 + async updateImageList() { + const folder = this.app.vault.getFolderByPath(this.settings.defaultFolder); - // 检查文件夹是否存在 - if (!folder) { - console.warn('Folder not found:', this.settings.defaultFolder); - return; - } + // 检查文件夹是否存在 + if (!folder) { + console.warn('Folder not found:', this.settings.defaultFolder); + return; + } - // 扫描文件夹并更新图片列表 - this.settings.imageAdressList = folder.children - .filter((file) => file.extension === 'png' || file.extension === 'jpg' || file.extension === 'jpeg') - .map((file) => this.app.vault.getResourcePath(file)); - } + // 扫描文件夹并更新图片列表 + globalThis.imageAdressList = folder.children + .filter((file) => file.extension === 'png' || file.extension === 'jpg' || file.extension === 'jpeg') + .map((file) => this.app.vault.getResourcePath(file)); + } - async deleteBackground() { - const styleElement = document.getElementById('dynamic-background-style'); - const body = document.body; - if (styleElement && body.classList.contains('active')) { - // 触发淡出效果 - body.classList.remove('active'); + async deleteBackground() { + const styleElement = document.getElementById('background-style'); + const body = document.body; + if (styleElement) { + // 触发淡出效果 + if (body.classList.contains('active')) + body.classList.remove('active'); + // 等待淡出完成后，移除样式 + body.addEventListener('transitionend', () => { + styleElement.remove(); + document.body.style.backgroundImage = 'none'; + }, { once: true }); + } + // 清除定时器 + if (this.backgroundChangeInterval) { + clearInterval(this.backgroundChangeInterval); + } + } - // 等待淡出完成后，移除样式 - body.addEventListener('transitionend', () => { - styleElement.remove(); - }); - } - } + async setBackground(index) { + const imageUrl = globalThis.imageAdressList[index]; + let styleElement = document.getElementById('background-style'); - async setBackground(index) { - const imageUrl = this.settings.imageAdressList[index]; - let styleElement = document.getElementById('dynamic-background-style'); + if (!styleElement) { + // 创建样式元素 + styleElement = document.createElement('style'); + styleElement.id = 'background-style'; + styleElement.textContent = ` + body { + transition: opacity ${this.settings.transTime / 1000}s; + background-size: cover; + background-position: center; + } + body.active { + opacity: ${this.settings.opacity}; + } + `; + document.head.appendChild(styleElement); - if (!styleElement) { - // 创建样式元素 - styleElement = document.createElement('style'); - styleElement.id = 'dynamic-background-style'; - styleElement.textContent = ` - body { - transition: opacity 1s; - background-size: cover; - background-position: center; - } - body.active { - opacity: 0.9; - background-image: url("${imageUrl}"); - } - `; - document.head.appendChild(styleElement); + // 添加 active 类以淡入背景 + document.body.style.backgroundImage = `url("${imageUrl}")`; + document.body.classList.add('active'); + } else { + // 触发背景切换 + const body = document.body; - // 添加 active 类以淡入背景 - document.body.classList.add('active'); - } else { - // 触发背景切换 - const body = document.body; + if (body.classList.contains('active')) { + // 已有背景时，先淡出当前背景 + body.classList.remove('active'); - if (body.classList.contains('active')) { - // 已有背景时，先淡出当前背景 - body.classList.remove('active'); + // 等待淡出完成后切换背景 + body.addEventListener('transitionend', () => { + body.style.backgroundImage = `url("${imageUrl}")`; + body.classList.add('active'); + }); + } else { + // 如果没有背景，直接淡入新背景 + body.style.backgroundImage = `url("${imageUrl}")`; + body.classList.add('active'); + } + } + } - // 等待淡出完成后切换背景 - body.addEventListener('transitionend', () => { - body.style.backgroundImage = `url("${imageUrl}")`; - body.classList.add('active'); - }); - } else { - // 如果没有背景，直接淡入新背景 - body.style.backgroundImage = `url("${imageUrl}")`; - body.classList.add('active'); - } - } - } + async setRandomBackground() { + await this.deleteBackground() + this.updateImageList(); + let len = globalThis.imageAdressList.length; + if (len === 0) { + console.warn('No images available in the URL list.'); + return; + } - async setRandomBackground() { - if (this.settings.imageAdressList.length === 0) { - console.warn('No images available in the URL list.'); - return; - } + const apply = async () => {//sb,funtion is diff form => + const randomIndex = Math.floor(Math.random() * len); + await this.setBackground(randomIndex); + }; + apply(); + // 如果 `changeTime` 已设定，定时更换背景 + if (this.settings.changeTime > 0) { + // 设置新的定时器 + this.backgroundChangeInterval = setInterval((() => { + apply(); + }), this.settings.changeTime); + // use IIFE to immediate invoke the function + } + } - // 随机选择一个图片 - const randomIndex = Math.floor( - Math.random() * this.settings.imageAdressList.length - ); - - // 动态创建样式表 - this.setBackground(randomIndex); - } + async setOrderedBackground(index) { + await this.deleteBackground() + this.updateImageList(); + let len = globalThis.imageAdressList.length; + if (len === 0) { + console.warn('No images available in the URL list.'); + return; + } + const apply = async () => {//sb,funtion is diff form => + await this.setBackground(index++ % len); + }; apply(); + // 如果 `changeTime` 已设定，定时更换背景 + if (this.settings.changeTime > 0) { + // 设置新的定时器 + this.backgroundChangeInterval = setInterval(() => { + apply(); + }, this.settings.changeTime); + } + } };