Skip to content

Commit 3c07318

Browse files
tw93tw93
committed
✨ 1.11
1 parent 1e2d138 commit 3c07318

File tree

2 files changed

+103
-112
lines changed

2 files changed

+103
-112
lines changed

‎bookmark/popup.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ window.onload = async function () {
388388
const bookmarksContainer = document.querySelector("#bookmarks");
389389

390390
createBookmarks(bookmarkTreeNodes);
391-
391+
392392
// 立即计算并设置正确的高度
393393
requestAnimationFrame(() => {
394394
const actualHeight = calculateOptimalHeight();
@@ -437,26 +437,21 @@ function setBodyHeightFromStorage() {
437437
function calculateOptimalHeight() {
438438
const bookmarksContainer = document.getElementById("bookmarks");
439439
const searchWrapper = document.querySelector("#search-wrapper");
440-
440+
441441
let totalHeight = 20; // 基础padding
442-
442+
443443
if (bookmarksContainer) {
444444
totalHeight += bookmarksContainer.scrollHeight;
445445
}
446-
446+
447447
if (isSearchEnabled() && !searchIsHide) {
448448
totalHeight += searchWrapper ? searchWrapper.scrollHeight : 0;
449449
}
450-
450+
451451
// 限制最大高度
452452
return Math.min(Math.max(totalHeight, 200), 618);
453453
}
454454

455-
function saveCurrentHeight() {
456-
let currentHeight = calculateOptimalHeight();
457-
localStorage.setItem("savedHeight", (currentHeight - 8).toString());
458-
}
459-
460455
function createBookmarks(bookmarkTreeNodes) {
461456
const bookmarksContainer = document.getElementById("bookmarks");
462457

‎newtab/newtab.js‎

Lines changed: 98 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -48,37 +48,37 @@ window.onload = function () {
4848
function convertToLinkElement(data, showRefreshBtn = false) {
4949
const bgContent = document.querySelector(".bg-content");
5050
const refreshBtn = document.getElementById("refresh-btn");
51-
51+
5252
if (data && data.title) {
5353
// 清除之前的内容
5454
bgContent.innerHTML = "";
55-
55+
5656
// 创建标题容器（包含标题文本和刷新按钮）
5757
const titleContainer = document.createElement("div");
5858
// 只有随机模式(潮流周刊)才使用粗体
59-
titleContainer.style.fontWeight = (bgSelector.value === "random") ? "bold" : "normal";
59+
titleContainer.style.fontWeight = bgSelector.value === "random" ? "bold" : "normal";
6060
titleContainer.style.marginBottom = "4px";
6161
titleContainer.style.display = "flex";
6262
titleContainer.style.alignItems = "flex-start";
6363
titleContainer.style.gap = "6px";
64-
64+
6565
// 创建标题文本元素
6666
const titleText = document.createElement("span");
67-
67+
6868
// 格式化标题显示：如果有期数则显示为"第xxx期 - 标题"格式，并在数字后添加空格
6969
let displayTitle = data.title;
7070
if (data.num) {
7171
displayTitle = `第 ${data.num} 期 - ${data.title}`;
7272
}
73-
73+
7474
// 如果有日期则显示在标题后
7575
if (data.date) {
7676
displayTitle += ` · ${data.date}`;
7777
}
78-
78+
7979
titleText.textContent = displayTitle;
8080
titleContainer.appendChild(titleText);
81-
81+
8282
// 如果需要刷新按钮，直接添加到标题容器中
8383
if (showRefreshBtn) {
8484
const inlineRefreshBtn = document.createElement("button");
@@ -97,7 +97,7 @@ window.onload = function () {
9797
line-height: 1;
9898
margin-top: ${bgSelector.value === "bing" ? "2px" : "0"};
9999
`;
100-
100+
101101
inlineRefreshBtn.onmouseover = () => {
102102
inlineRefreshBtn.style.transform = "rotate(180deg)";
103103
inlineRefreshBtn.style.opacity = "1";
@@ -106,7 +106,7 @@ window.onload = function () {
106106
inlineRefreshBtn.style.transform = "rotate(0deg)";
107107
inlineRefreshBtn.style.opacity = "0.8";
108108
};
109-
109+
110110
inlineRefreshBtn.onclick = function (e) {
111111
e.preventDefault();
112112
e.stopPropagation();
@@ -122,15 +122,15 @@ window.onload = function () {
122122
setBingBackgroundImage();
123123
}
124124
};
125-
125+
126126
titleContainer.appendChild(inlineRefreshBtn);
127127
refreshBtn.classList.remove("show");
128128
} else {
129129
refreshBtn.classList.remove("show");
130130
}
131-
131+
132132
bgContent.appendChild(titleContainer);
133-
133+
134134
// 如果有描述字段，添加描述元素
135135
if (data.description) {
136136
const descElement = document.createElement("div");
@@ -139,7 +139,7 @@ window.onload = function () {
139139
descElement.textContent = data.description;
140140
bgContent.appendChild(descElement);
141141
}
142-
142+
143143
bgDescription.href = "#";
144144
bgDescription.style.cursor = data.url ? "pointer" : "default";
145145
bgDescription.onclick = function (e) {
@@ -198,114 +198,111 @@ window.onload = function () {
198198
function setBingBackgroundImage() {
199199
// 专门搜索本身就是黑白的艺术摄影作品
200200
const bwKeywords = [
201-
'black and white photography',
202-
'monochrome photography',
203-
'black white architecture',
204-
'monochrome portrait',
205-
'black white street photography',
206-
'monochrome minimalism',
207-
'black white abstract art',
208-
'noir photography',
209-
'grayscale art'
201+
"black and white photography",
202+
"monochrome photography",
203+
"black white architecture",
204+
"monochrome portrait",
205+
"black white street photography",
206+
"monochrome minimalism",
207+
"black white abstract art",
208+
"noir photography",
209+
"grayscale art",
210210
];
211211
const randomKeyword = bwKeywords[Math.floor(Math.random() * bwKeywords.length)];
212212
const apiUrl = `https://api.pexels.com/v1/search?query=${encodeURIComponent(randomKeyword)}&per_page=30&orientation=landscape&color=black_and_white`;
213-
213+
214214
const today = new Date();
215215
const date = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate();
216216

217217
fetch(apiUrl, {
218218
headers: {
219-
'Authorization': '2b1sfykhv5szbTVFvohmurxQDC6IPaa5CRJ7ckTWMwCZj2Ltkq1ErhnA'
220-
}
219+
Authorization: "2b1sfykhv5szbTVFvohmurxQDC6IPaa5CRJ7ckTWMwCZj2Ltkq1ErhnA",
220+
},
221221
})
222-
.then((response) => response.json())
223-
.then((data) => {
224-
if (data.photos && data.photos.length > 0) {
225-
const randomPhoto = data.photos[Math.floor(Math.random() * data.photos.length)];
226-
// 使用最高分辨率的图片
227-
const imageUrl = randomPhoto.src.large2x || randomPhoto.src.large || randomPhoto.src.medium;
228-
229-
const Info = {
230-
title: randomPhoto.alt || `黑白艺术摄影 by ${randomPhoto.photographer}`,
231-
url: randomPhoto.url || "#",
232-
date: date,
233-
pic: imageUrl,
234-
};
235-
convertToLinkElement(Info, true);
222+
.then((response) => response.json())
223+
.then((data) => {
224+
if (data.photos && data.photos.length > 0) {
225+
const randomPhoto = data.photos[Math.floor(Math.random() * data.photos.length)];
226+
// 使用最高分辨率的图片
227+
const imageUrl = randomPhoto.src.large2x || randomPhoto.src.large || randomPhoto.src.medium;
236228

237-
// 不再使用滤镜，因为图片本身就是黑白的
238-
body.style.backgroundImage = `url(${imageUrl})`;
239-
body.style.filter = "contrast(1.1)"; // 只是稍微增强对比度
240-
241-
localStorage.setItem("bgBingUrl", imageUrl);
242-
localStorage.setItem("bgBingDate", new Date().toISOString().slice(0, 10));
243-
localStorage.setItem("bgBingInfo", JSON.stringify(Info));
244-
} else {
245-
// 如果没有数据，使用备选方案
229+
const Info = {
230+
title: randomPhoto.alt || `黑白艺术摄影 by ${randomPhoto.photographer}`,
231+
url: randomPhoto.url || "#",
232+
date: date,
233+
pic: imageUrl,
234+
};
235+
convertToLinkElement(Info, true);
236+
237+
// 不再使用滤镜，因为图片本身就是黑白的
238+
body.style.backgroundImage = `url(${imageUrl})`;
239+
body.style.filter = "contrast(1.1)"; // 只是稍微增强对比度
240+
241+
localStorage.setItem("bgBingUrl", imageUrl);
242+
localStorage.setItem("bgBingDate", new Date().toISOString().slice(0, 10));
243+
localStorage.setItem("bgBingInfo", JSON.stringify(Info));
244+
} else {
245+
// 如果没有数据，使用备选方案
246+
useSimpleFallback();
247+
}
248+
})
249+
.catch((error) => {
250+
console.error("Error fetching Pexels:", error);
251+
// 如果 Pexels 失败，使用备选方案
246252
useSimpleFallback();
247-
}
248-
})
249-
.catch((error) => {
250-
console.error("Error fetching Pexels:", error);
251-
// 如果 Pexels 失败，使用备选方案
252-
useSimpleFallback();
253-
});
253+
});
254254
}
255255

256-
257256
// 黑白艺术摄影备选方案，使用 Pexels Curated
258257
function useSimpleFallback() {
259258
const page = Math.floor(Math.random() * 10) + 1; // 随机页面
260259
const apiUrl = `https://api.pexels.com/v1/curated?per_page=30&page=${page}`;
261-
260+
262261
const today = new Date();
263262
const date = today.getFullYear() + "/" + (today.getMonth() + 1) + "/" + today.getDate();
264263

265264
fetch(apiUrl, {
266265
headers: {
267-
'Authorization': '2b1sfykhv5szbTVFvohmurxQDC6IPaa5CRJ7ckTWMwCZj2Ltkq1ErhnA'
268-
}
266+
Authorization: "2b1sfykhv5szbTVFvohmurxQDC6IPaa5CRJ7ckTWMwCZj2Ltkq1ErhnA",
267+
},
269268
})
270-
.then((response) => response.json())
271-
.then((data) => {
272-
if (data.photos && data.photos.length > 0) {
273-
const randomPhoto = data.photos[Math.floor(Math.random() * data.photos.length)];
274-
const imageUrl = randomPhoto.src.large2x || randomPhoto.src.large || randomPhoto.src.medium;
275-
269+
.then((response) => response.json())
270+
.then((data) => {
271+
if (data.photos && data.photos.length > 0) {
272+
const randomPhoto = data.photos[Math.floor(Math.random() * data.photos.length)];
273+
const imageUrl = randomPhoto.src.large2x || randomPhoto.src.large || randomPhoto.src.medium;
274+
275+
const Info = {
276+
title: randomPhoto.alt || `黑白艺术摄影 by ${randomPhoto.photographer}`,
277+
url: randomPhoto.url || "#",
278+
date: date,
279+
pic: imageUrl,
280+
};
281+
convertToLinkElement(Info, true);
282+
283+
body.style.backgroundImage = `url(${imageUrl})`;
284+
body.style.filter = "contrast(1.1)"; // 只增强对比度，不强制灰度
285+
286+
localStorage.setItem("bgBingUrl", imageUrl);
287+
localStorage.setItem("bgBingDate", new Date().toISOString().slice(0, 10));
288+
localStorage.setItem("bgBingInfo", JSON.stringify(Info));
289+
}
290+
})
291+
.catch((error) => {
292+
console.error("Fallback Error:", error);
293+
// 最后的最后，使用一个静态的黑白样式
276294
const Info = {
277-
title: randomPhoto.alt || `黑白艺术摄影 by ${randomPhoto.photographer}`,
278-
url: randomPhoto.url || "#",
295+
title: "黑白艺术摄影",
296+
url: "#",
279297
date: date,
280-
pic: imageUrl,
298+
pic: "",
281299
};
282300
convertToLinkElement(Info, true);
283-
284-
body.style.backgroundImage = `url(${imageUrl})`;
285-
body.style.filter = "contrast(1.1)"; // 只增强对比度，不强制灰度
286-
287-
localStorage.setItem("bgBingUrl", imageUrl);
288-
localStorage.setItem("bgBingDate", new Date().toISOString().slice(0, 10));
289-
localStorage.setItem("bgBingInfo", JSON.stringify(Info));
290-
}
291-
})
292-
.catch((error) => {
293-
console.error("Fallback Error:", error);
294-
// 最后的最后，使用一个静态的黑白样式
295-
const Info = {
296-
title: "黑白艺术摄影",
297-
url: "#",
298-
date: date,
299-
pic: "",
300-
};
301-
convertToLinkElement(Info, true);
302-
body.style.backgroundImage = "linear-gradient(45deg, #1a1a1a 0%, #4a4a4a 50%, #7a7a7a 100%)";
303-
body.style.filter = "contrast(1.1)";
304-
});
301+
body.style.backgroundImage = "linear-gradient(45deg, #1a1a1a 0%, #4a4a4a 50%, #7a7a7a 100%)";
302+
body.style.filter = "contrast(1.1)";
303+
});
305304
}
306305

307-
308-
309306
/**
310307
* @description 处理选择非空白背景时的逻辑
311308
* @param type 选择的背景类型，random 或 bing
@@ -389,7 +386,7 @@ window.onload = function () {
389386
isDarkMode = e.matches;
390387
setBackgroundColor();
391388
};
392-
389+
393390
if (darkModeMediaQuery.addEventListener) {
394391
darkModeMediaQuery.addEventListener("change", handleColorSchemeChange);
395392
} else {
@@ -403,7 +400,7 @@ window.onload = function () {
403400

404401
function showUI() {
405402
if (isUIVisible) return;
406-
403+
407404
clearTimeout(hideTimeout);
408405
const selectorContainer = document.querySelector(".selector-container");
409406

@@ -413,7 +410,7 @@ window.onload = function () {
413410

414411
function hideUI() {
415412
if (!isUIVisible) return;
416-
413+
417414
clearTimeout(showTimeout);
418415
const selectorContainer = document.querySelector(".selector-container");
419416

@@ -425,20 +422,19 @@ window.onload = function () {
425422
document.body.addEventListener("mousemove", function (e) {
426423
const { clientX, clientY } = e;
427424
const { innerWidth, innerHeight } = window;
428-
425+
429426
// 如果鼠标接近边缘区域，立即显示
430-
const nearEdge = clientX < 50 || clientX > innerWidth - 200 ||
431-
clientY < 50 || clientY > innerHeight - 100;
432-
427+
const nearEdge = clientX < 50 || clientX > innerWidth - 200 || clientY < 50 || clientY > innerHeight - 100;
428+
433429
clearTimeout(showTimeout);
434430
clearTimeout(hideTimeout);
435-
431+
436432
if (nearEdge) {
437433
showUI();
438434
} else if (!isUIVisible) {
439435
showTimeout = setTimeout(showUI, 800);
440436
}
441-
437+
442438
// 如果UI已显示，设置隐藏计时器
443439
if (isUIVisible) {
444440
hideTimeout = setTimeout(hideUI, 3000);

0 commit comments

Comments
 (0)