Skip to content

Commit

Permalink
Feat: Custom Local Wallpaper
Browse files Browse the repository at this point in the history 
自选本地图片，使用 IndexDB 存储
  • Loading branch information
@Dreamer-Paul
Dreamer-Paul committed Jul 23, 2024
1 parent d7a993a commit a0612dd
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 11 deletions.
14 changes: 10 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,15 +107,15 @@ <h3>关于本项目</h3>
<article>
<p><img src="static/about.jpg" alt="关于奇趣起始页"></p>
<p>欢迎使用奇趣起始页！本项目建设于 2020/5/9，是一个主打社区形式维护的开源项目。几乎采用原生（JS/CSS）技术实现，性能扛扛的！</p>
<p>它的使用方式很简单，只需要在 <a href="https://github.com/Dreamer-Paul/KStart-Sites" target="_blank">本项目的仓库</a> 上提交 PR，即可创造一个属于自己的导航页面。访问它只需要一个 <a href="https://s.paul.ren/?u=paul" target="_blank">URL 后缀</a> 即可直达，无需注册和登录，非常方便易用。</p>
<p>本站默认<b>不保存任何私人数据</b>，因此不必担心你的<b>个人隐私被他人所查阅</b>。当然，你也可以选择编辑并共享它们。</p>
<p>只需要在 <a href="https://github.com/Dreamer-Paul/KStart-Sites" target="_blank">本项目的仓库</a> 上提交 PR，即可创造一个属于自己的导航页面。访问它只需要一个 <a href="https://s.paul.ren/?u=paul" target="_blank">URL 后缀</a> 即可直达，无需注册和登录，非常方便易用。</p>
<p>现有的类似站点已经很多了，为什么我仍然选择编写了这个项目？这是因为它们都是「<b>闭源的私人项目</b>」，只有作者本人才可以进行维护。</p>
<p>与此同时，这些站点的导航项大多已经预设。想要修改它们，要么需要注册后修改，要么就干脆不给改，个人觉得略显鸡肋。如果你更换了电脑，不就需要重新登录了吗？</p>
<p>本项目与众不同的地方则是采用了 GitHub 托管的形式，属于“无后端”项目，于是一些看似可以提升用户体验的功能，我暂时没有考虑去实现它。如果你有些好的建议，不妨在项目的 <a href="https://github.com/Dreamer-Paul/KStart/issues" target="_blank">Issues</a> 区进行留言？</p>
<h3>类似项目：</h3>
<ul>
<li><a href="https://xiaoshu.app" target="_blank" rel="nofollow">小舒同学</a></li>
<li><a href="https://limestart.cn" target="_blank" rel="nofollow">青柠起始页</a></li>
<li><a href="https://yubius.com" target="_blank" rel="nofollow">布斯起始页（本项目的二改）</a></li>
</ul>
<h3>使用了开源项目：</h3>
<ul>
Expand All @@ -124,8 +124,12 @@ <h3>使用了开源项目：</h3>
</ul>
<h3>使用了第三方服务：</h3>
<ul>
<li><a href="https://www.iconfont.cn" target="_blank" rel="nofollow">IconFont</a></li>
<li><a href="https://api.paugram.com" target="_blank">保罗 API</a>（随机动漫壁纸、必应壁纸解析）</li>
<li><a href="https://www.iconfont.cn" target="_blank" rel="nofollow">IconFont</a>（图标托管）</li>
<li><a href="https://api.paugram.com" target="_blank">保罗 API</a>（随机动漫壁纸、必应壁纸解析）
<ul>
<li>其中 <a href="https://github.com/Dreamer-Paul/Anime-Wallpaper" target="_blank">随机动漫壁纸</a> 部分是公开仓库，欢迎你的投稿</li>
</ul>
</li>
</ul>
</article>
</div>
Expand All @@ -144,6 +148,8 @@ <h3>设置</h3>
<label>
<span>自定义背景：</span>
<select name="background" data-key="background_type"></select>
<span class="custom-background-preview" hidden></span>
<input type="file" id="custom-background-input" hidden />
</label>
<label>
<span>减淡动画和视觉效果：</span>
Expand Down
17 changes: 16 additions & 1 deletion static/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# KStart
# By: Dreamer-Paul
# Last Update: 2022.5.27
# Last Update: 2024.7.24
一个简洁轻巧的起始页
Expand Down Expand Up @@ -52,6 +52,10 @@
}
}

[hidden]{
display: none !important;
}

html, body{
height: 100%;
}
Expand Down Expand Up @@ -464,6 +468,17 @@ body.low-animate .the-window.closed{
width: 6px;
}

/* 自选本地图片 */
.custom-background-preview {
height: 8em;
cursor: copy;
display: block;
margin-top: 1em;
border-radius: var(--radius);
background: center/cover no-repeat;
border: var(--border-width) var(--gray) solid;
}

.the-drawer{
top: 0;
right: 0;
Expand Down
132 changes: 126 additions & 6 deletions static/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# KStart
# By: Dreamer-Paul
# Last Update: 2022.5.28
# Last Update: 2024.7.24
一个简洁轻巧的起始页
Expand Down Expand Up @@ -33,6 +33,8 @@ function KStart() {
settings: {
search: ks.select("[name=search]"),
background: ks.select("[name=background]"),
background_preview: ks.select(".custom-background-preview"),
background_input: ks.select("#custom-background-input"),
sites: ks.select("[name=sites]"),
auto_focus: ks.select("[name=auto_focus]"),
low_animate: ks.select("[name=low_animate]")
Expand Down Expand Up @@ -60,6 +62,8 @@ function KStart() {
timer: "",
window: 0,
sites: [],
db: undefined,
custom_background: undefined,
background_type: [
{
name: "无背景",
Expand All @@ -78,7 +82,11 @@ function KStart() {
name: "Unsplash 随机图片",
url: "https://source.unsplash.com/random/1920x1080",
set: "center/cover no-repeat",
}
},
{
name: "自选本地图片",
set: "center/cover no-repeat",
},
],
search_method: [
{
Expand Down Expand Up @@ -140,6 +148,50 @@ function KStart() {

// 各种方法
const methods = {
// DB 相关
initDB: () => {
return new Promise((resolve, reject) => {
const request = indexedDB.open("wallpaper", 1);

request.onerror = (e) => {
reject();
console.error("Database error:", e.target.errorCode);
};

request.onsuccess = (e) => {
data.db = e.target.result;
resolve();
};

request.onupgradeneeded = (e) => {
data.db = e.target.result;
data.db.createObjectStore("images", { keyPath: "id" });
};
})
},
getCustomWallpaper: () => (
new Promise((resolve, reject) => {
if (data.custom_background) {
resolve(data.custom_background);
}

const transaction = data.db.transaction(["images"], "readonly");
const objectStore = transaction.objectStore("images");
const getRequest = objectStore.get(1);

getRequest.onsuccess = () => {
if (getRequest.result) {
data.custom_background = getRequest.result.data;
resolve(getRequest.result.data);
}
};

getRequest.onerror = () => {
reject(new Error(transaction.error));
}
})
),

// 存储相关
getStorage: () => {
const storage = localStorage.getItem("paul-userset");
Expand Down Expand Up @@ -409,7 +461,7 @@ function KStart() {
}
},
// 初始化背景和深色背景模式检测
initBackground: () => {
initBackground: async () => {
if (data.user_set.background == 0) {
obj.main.bg.style = "";

Expand All @@ -418,7 +470,16 @@ function KStart() {

const img = new Image();
img.crossOrigin = "Anonymous";
img.src = data.background_type[data.user_set.background].url;

const { url } = data.background_type[data.user_set.background];

// 自定义图片
if (data.user_set.background == 4) {
img.src = await methods.getCustomWallpaper();
}
else {
img.src = url;
}

// 深色背景增加深色模式
img.onload = () => {
Expand All @@ -441,6 +502,32 @@ function KStart() {
}
};
},

// 上传了新的背景图片
customWallpaperInputChange: (e) => {
const file = e.target.files[0];

if (file && file.type.startsWith("image/")) {
const reader = new FileReader();

reader.onload = (e) => {
const imageDataUrl = e.target.result;
const transaction = data.db.transaction(["images"], "readwrite");
const objectStore = transaction.objectStore("images");
objectStore.put({ id: 1, data: imageDataUrl });

data.custom_background = imageDataUrl;
obj.settings.background_preview.style.backgroundImage = `url(${imageDataUrl})`;

modifys.initBackground();
};

reader.readAsDataURL(file);
} else {
ks.notice("请选择有效的图片文件", { color: "red", time: 3000 });
}
},

// 自动聚焦到搜索框
focusSearchInput: () => {
obj.main.input.focus();
Expand Down Expand Up @@ -570,12 +657,44 @@ function KStart() {
}
},

// 初始化自定义背景相关逻辑
initSettingBackground: () => {
// 预览自定义图片
methods.getCustomWallpaper().then((imgUrl) => {
obj.settings.background_preview.style.backgroundImage = `url(${imgUrl})`;

if (data.user_set.background === 4) {
obj.settings.background_preview.hidden = false;
}
});

obj.settings.background_preview.addEventListener("click", () => {
obj.settings.background_input.click();
});

// 如果修改成自定义背景
obj.settings.background.addEventListener("change", (ev) => {
obj.settings.background_preview.hidden = ev.target.value != 4;
});

// 如果自定义背景被修改
obj.settings.background_input.onchange = modifys.customWallpaperInputChange;
},

// 初始化设置表单项
initSettingForm: () => {
const set = data.user_set;

const inputElements = ["INPUT", "SELECT", "TEXTAREA"];

for (item in set) {
if (!obj.settings[item]) return;
if (!obj.settings[item]) {
return;
}

if (!inputElements.includes(obj.settings[item].nodeName)) {
return;
}

let type, i = item;

Expand Down Expand Up @@ -688,7 +807,7 @@ function KStart() {
return methods.getStorage();
}).then((userData) => {
userData && methods.setUserSettings(userData);

}).then(methods.initDB).then(() => {
modifys.initNavi();
modifys.initBackground();
modifys.initMediaQueryListener();
Expand All @@ -699,6 +818,7 @@ function KStart() {
data.user_set.auto_focus && modifys.focusSearchInput();

modifys.changeSearch(data.user_set.search);
modifys.initSettingBackground();
modifys.initSettingForm();
modifys.initDrawerItems();
});
Expand Down

0 comments on commit a0612dd

Please sign in to comment.