hexo-theme-solitude 2.1.5 → 2.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_config.yml +18 -19
- package/languages/default.yml +173 -173
- package/layout/archive.pug +3 -1
- package/layout/category.pug +3 -1
- package/layout/includes/head/page_config.pug +3 -1
- package/layout/includes/loading.pug +1 -1
- package/layout/includes/rightmenu.pug +6 -5
- package/layout/includes/widgets/aside/aside.pug +1 -1
- package/layout/includes/widgets/page/links/banner.pug +15 -12
- package/layout/includes/widgets/rightside/show.pug +1 -1
- package/layout/includes/widgets/third-party/hot/artalk.pug +56 -0
- package/layout/includes/widgets/third-party/hot/twikoo.pug +57 -0
- package/layout/includes/widgets/third-party/pjax.pug +2 -1
- package/layout/index.pug +1 -1
- package/layout/tag.pug +2 -0
- package/package.json +1 -1
- package/scripts/event/cdn.js +1 -1
- package/scripts/event/init.js +0 -1
- package/scripts/event/merge_config.js +14 -39
- package/scripts/filter/default.js +20 -21
- package/scripts/filter/lazyload.js +2 -4
- package/scripts/helper/getArchiveLength.js +9 -11
- package/scripts/helper/related_post.js +56 -56
- package/scripts/tags/article.js +1 -1
- package/scripts/tags/tabs.js +28 -46
- package/source/css/_comments/twikoo.styl +3 -3
- package/source/css/_highlight/highlight/diff.styl +13 -1
- package/source/css/_highlight/index.styl +9 -0
- package/source/css/_highlight/prismjs/diff.styl +13 -1
- package/source/css/_layout/article-container.styl +1 -1
- package/source/css/_layout/recent-post.styl +2 -2
- package/source/img/error_load.avif +0 -0
- package/source/js/covercolor/api.js +29 -14
- package/source/js/covercolor/ave.js +38 -24
- package/source/js/covercolor/local.js +52 -52
- package/source/js/main.js +238 -240
- package/source/js/music.js +21 -39
- package/source/js/right_menu.js +67 -132
- package/source/js/third_party/barrage.min.js +93 -1
- package/source/js/third_party/envelope.min.js +1 -1
- package/source/js/third_party/post_ai.min.js +184 -1
- package/source/js/tw_cn.js +19 -18
- package/source/js/utils.js +50 -57
- package/layout/includes/widgets/home/hot/artalk.pug +0 -45
- package/layout/includes/widgets/home/hot/twikoo.pug +0 -46
- package/source/img/loading.avif +0 -0
- /package/layout/includes/widgets/{home → third-party}/hot/index.pug +0 -0
package/source/js/music.js
CHANGED
@@ -2,21 +2,19 @@ class MusicPlayer {
|
|
2
2
|
constructor() {
|
3
3
|
this.init();
|
4
4
|
}
|
5
|
+
|
5
6
|
init() {
|
6
7
|
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);
|
7
8
|
this.getCustomPlayList();
|
8
|
-
this.
|
9
|
-
this.addButtonListEventListener();
|
9
|
+
this.addEventListeners();
|
10
10
|
}
|
11
11
|
|
12
12
|
getCustomPlayList() {
|
13
13
|
this.changeMusicBg(false);
|
14
14
|
}
|
15
|
-
addEventListenerToDocument() {
|
16
|
-
document.addEventListener("keydown", this.handleKeydown.bind(this));
|
17
|
-
}
|
18
15
|
|
19
|
-
|
16
|
+
addEventListeners() {
|
17
|
+
document.addEventListener("keydown", this.handleKeydown.bind(this));
|
20
18
|
const aplayerList = document.querySelector(".aplayer-list");
|
21
19
|
document.querySelector(".aplayer-lrc")?.addEventListener("click", () => {
|
22
20
|
aplayerList.classList.toggle("aplayer-list-hide");
|
@@ -27,11 +25,7 @@ class MusicPlayer {
|
|
27
25
|
const musicBg = document.getElementById("Music-bg");
|
28
26
|
const musicLoading = document.getElementsByClassName("Music-loading")[0];
|
29
27
|
|
30
|
-
|
31
|
-
this.updateBackgroundImage(musicBg);
|
32
|
-
} else {
|
33
|
-
this.setLoadingScreen(musicLoading, musicBg);
|
34
|
-
}
|
28
|
+
isChangeBg ? this.updateBackgroundImage(musicBg) : this.setLoadingScreen(musicLoading, musicBg);
|
35
29
|
}
|
36
30
|
|
37
31
|
updateBackgroundImage(element) {
|
@@ -40,8 +34,8 @@ class MusicPlayer {
|
|
40
34
|
img.src = this.extractValue(musicCover.style.backgroundImage);
|
41
35
|
img.onload = () => {
|
42
36
|
element.style.backgroundImage = musicCover.style.backgroundImage;
|
37
|
+
element.className = 'show';
|
43
38
|
};
|
44
|
-
element.className = 'show'
|
45
39
|
}
|
46
40
|
|
47
41
|
setLoadingScreen(loadingElement, backgroundElement) {
|
@@ -50,23 +44,20 @@ class MusicPlayer {
|
|
50
44
|
if (musicCover) {
|
51
45
|
loadingElement.style.display = "none";
|
52
46
|
clearInterval(timer);
|
53
|
-
document.querySelector('meting-js');
|
54
47
|
this.addEventListenerChangeMusicBg();
|
55
48
|
backgroundElement.style.display = "block";
|
56
49
|
}
|
57
|
-
this.addButtonListEventListener();
|
58
50
|
}, 100);
|
59
51
|
}
|
60
52
|
|
61
53
|
extractValue(input) {
|
62
|
-
const
|
63
|
-
const match = valueRegex.exec(input);
|
54
|
+
const match = /url\("([^"]+)"\)/.exec(input);
|
64
55
|
return match ? match[1] : '';
|
65
56
|
}
|
66
57
|
|
67
58
|
addEventListenerChangeMusicBg() {
|
68
59
|
const aplayer = document.querySelector("#Music-page meting-js").aplayer;
|
69
|
-
aplayer.on('loadeddata', this.changeMusicBg
|
60
|
+
aplayer.on('loadeddata', () => this.changeMusicBg(true));
|
70
61
|
aplayer.on('timeupdate', this.lrcUpdate.bind(this));
|
71
62
|
}
|
72
63
|
|
@@ -81,36 +72,27 @@ class MusicPlayer {
|
|
81
72
|
|
82
73
|
handleKeydown(event) {
|
83
74
|
const aplayer = document.querySelector('meting-js').aplayer;
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
aplayer.skipBack();
|
96
|
-
break;
|
97
|
-
case "ArrowUp":
|
98
|
-
event.preventDefault();
|
99
|
-
if (aplayer.volume < 1) aplayer.volume(aplayer.volume + 0.1);
|
100
|
-
break;
|
101
|
-
case "ArrowDown":
|
102
|
-
event.preventDefault();
|
103
|
-
if (aplayer.volume > 0) aplayer.volume(aplayer.volume - 0.1);
|
104
|
-
break;
|
75
|
+
const actions = {
|
76
|
+
"Space": () => aplayer.toggle(),
|
77
|
+
"ArrowRight": () => aplayer.skipForward(),
|
78
|
+
"ArrowLeft": () => aplayer.skipBack(),
|
79
|
+
"ArrowUp": () => { if (aplayer.volume < 1) aplayer.volume(aplayer.volume + 0.1); },
|
80
|
+
"ArrowDown": () => { if (aplayer.volume > 0) aplayer.volume(aplayer.volume - 0.1); }
|
81
|
+
};
|
82
|
+
|
83
|
+
if (actions[event.code]) {
|
84
|
+
event.preventDefault();
|
85
|
+
actions[event.code]();
|
105
86
|
}
|
106
87
|
}
|
88
|
+
|
107
89
|
destroy() {
|
108
90
|
document.removeEventListener("keydown", this.handleKeydown);
|
109
91
|
}
|
110
92
|
}
|
111
93
|
|
112
94
|
function initializeMusicPlayer() {
|
113
|
-
|
95
|
+
const exitingMusic = window.scoMusic;
|
114
96
|
if (exitingMusic) exitingMusic.destroy();
|
115
97
|
window.scoMusic = new MusicPlayer();
|
116
98
|
}
|
package/source/js/right_menu.js
CHANGED
@@ -1,10 +1,10 @@
|
|
1
1
|
let selectTextNow = "";
|
2
2
|
let firstShowRightMenu = true;
|
3
|
+
|
3
4
|
const selectText = () => {
|
4
|
-
selectTextNow = document.selection
|
5
|
-
? document.selection.createRange().text
|
6
|
-
: window.getSelection() + "" || "";
|
5
|
+
selectTextNow = document.selection ? document.selection.createRange().text : window.getSelection().toString() || "";
|
7
6
|
};
|
7
|
+
|
8
8
|
document.onmouseup = document.ondbclick = selectText;
|
9
9
|
|
10
10
|
const rm = {
|
@@ -41,24 +41,26 @@ const rm = {
|
|
41
41
|
],
|
42
42
|
},
|
43
43
|
showRightMenu(e, x = 0, y = 0) {
|
44
|
-
this.menu.style.top = y
|
45
|
-
this.menu.style.left = x
|
44
|
+
this.menu.style.top = `${y}px`;
|
45
|
+
this.menu.style.left = `${x}px`;
|
46
46
|
this.menu.style.display = e ? "block" : "none";
|
47
|
-
|
47
|
+
this.mask.style.display = e ? "flex" : "none";
|
48
|
+
if (e) stopMaskScroll();
|
48
49
|
},
|
49
50
|
hideRightMenu() {
|
50
|
-
|
51
|
-
rm.mask.style.display = "none";
|
51
|
+
this.showRightMenu(false);
|
52
52
|
},
|
53
53
|
reLoadSize() {
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
54
|
+
this.menu.style.display = "block";
|
55
|
+
this.width = this.menu.offsetWidth;
|
56
|
+
this.height = this.menu.offsetHeight;
|
57
|
+
this.menu.style.display = 'none';
|
58
58
|
},
|
59
59
|
copyText(e) {
|
60
|
-
|
61
|
-
|
60
|
+
if (navigator.clipboard) {
|
61
|
+
navigator.clipboard.writeText(e);
|
62
|
+
utils.snackbarShow(GLOBAL_CONFIG.lang.copy.success, false, 2000);
|
63
|
+
}
|
62
64
|
this.hideRightMenu();
|
63
65
|
},
|
64
66
|
async downloadImage(imageUrl = this.domsrc, filename = "photo") {
|
@@ -68,8 +70,7 @@ const rm = {
|
|
68
70
|
const url = URL.createObjectURL(blob);
|
69
71
|
const link = document.createElement("a");
|
70
72
|
link.href = url;
|
71
|
-
link.download = filename
|
72
|
-
link.style.display = "none";
|
73
|
+
link.download = filename;
|
73
74
|
document.body.appendChild(link);
|
74
75
|
link.click();
|
75
76
|
document.body.removeChild(link);
|
@@ -82,127 +83,80 @@ const rm = {
|
|
82
83
|
window.open(imgUrl);
|
83
84
|
},
|
84
85
|
mode(darkmode) {
|
85
|
-
darkmode
|
86
|
-
? (document.querySelector(".menu-darkmode-text").textContent =
|
87
|
-
GLOBAL_CONFIG.right_menu.mode.light)
|
88
|
-
: (document.querySelector(".menu-darkmode-text").textContent =
|
89
|
-
GLOBAL_CONFIG.right_menu.mode.dark);
|
86
|
+
document.querySelector(".menu-darkmode-text").textContent = darkmode ? GLOBAL_CONFIG.right_menu.mode.light : GLOBAL_CONFIG.right_menu.mode.dark;
|
90
87
|
this.hideRightMenu();
|
91
88
|
},
|
92
89
|
barrage(enable) {
|
93
|
-
enable
|
94
|
-
? (document.querySelector(".menu-commentBarrage-text").textContent =
|
95
|
-
GLOBAL_CONFIG.right_menu.barrage.open)
|
96
|
-
: (document.querySelector(".menu-commentBarrage-text").textContent =
|
97
|
-
GLOBAL_CONFIG.right_menu.barrage.close);
|
90
|
+
document.querySelector(".menu-commentBarrage-text").textContent = enable ? GLOBAL_CONFIG.right_menu.barrage.open : GLOBAL_CONFIG.right_menu.barrage.close;
|
98
91
|
this.hideRightMenu();
|
99
92
|
},
|
100
93
|
};
|
101
94
|
|
102
95
|
function stopMaskScroll() {
|
103
|
-
|
104
|
-
utils.addEventListenerPjax(rm.
|
105
|
-
utils.addEventListenerPjax(rm.mask, "
|
96
|
+
const hideMenu = rm.hideRightMenu.bind(rm);
|
97
|
+
utils.addEventListenerPjax(rm.menu, "mousewheel", hideMenu, { passive: true });
|
98
|
+
utils.addEventListenerPjax(rm.mask, "mousewheel", hideMenu, { passive: true });
|
99
|
+
utils.addEventListenerPjax(rm.mask, "click", hideMenu, { passive: true });
|
106
100
|
}
|
107
101
|
|
108
102
|
window.oncontextmenu = (ele) => {
|
109
103
|
if (document.body.clientWidth <= 768) return;
|
110
|
-
if (GLOBAL_CONFIG.right_menu.ctrlOriginalMenu) {
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
}
|
115
|
-
if (ele.ctrlKey) {
|
116
|
-
return true;
|
117
|
-
}
|
104
|
+
if (GLOBAL_CONFIG.right_menu.ctrlOriginalMenu && firstShowRightMenu) {
|
105
|
+
firstShowRightMenu = false;
|
106
|
+
utils.snackbarShow(GLOBAL_CONFIG.right_menu.ctrlOriginalMenu, false, 2000);
|
107
|
+
if (ele.ctrlKey) return true;
|
118
108
|
}
|
109
|
+
|
119
110
|
let x = ele.clientX + 10;
|
120
111
|
let y = ele.clientY;
|
121
|
-
Array.from(rm.menuItems.other).forEach(
|
112
|
+
Array.from(rm.menuItems.other).forEach(item => item.style.display = "flex");
|
122
113
|
rm.globalEvent = ele;
|
123
114
|
|
124
|
-
|
125
|
-
|
126
|
-
|
115
|
+
const link = ele.target.href;
|
116
|
+
const src = ele.target.currentSrc;
|
117
|
+
const tagName = ele.target.tagName.toLowerCase();
|
118
|
+
const cls = ele.target.className.toLowerCase();
|
127
119
|
|
128
|
-
|
129
|
-
display = true;
|
130
|
-
rm.menuItems.copy.style.display = "flex";
|
131
|
-
GLOBAL_CONFIG.comment && (rm.menuItems.comment.style.display = "flex");
|
132
|
-
rm.menuItems.search && (rm.menuItems.search.style.display = "flex");
|
133
|
-
} else {
|
134
|
-
rm.menuItems.copy.style.display = "none";
|
135
|
-
GLOBAL_CONFIG.comment && (rm.menuItems.comment.style.display = "none");
|
136
|
-
rm.menuItems.search && (rm.menuItems.search.style.display = "none");
|
137
|
-
}
|
120
|
+
const display = !!(selectTextNow && window.getSelection()) || !!link || !!src || (tagName === "input" || tagName === "textarea") || cls.match(/aplayer/);
|
138
121
|
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
rm.menuItems.copyLink.style.display = "flex";
|
143
|
-
rm.domhref = link;
|
144
|
-
} else {
|
145
|
-
rm.menuItems.new.style.display = "none";
|
146
|
-
rm.menuItems.copyLink.style.display = "none";
|
147
|
-
}
|
122
|
+
rm.menuItems.copy.style.display = selectTextNow && window.getSelection() ? "flex" : "none";
|
123
|
+
GLOBAL_CONFIG.comment && (rm.menuItems.comment.style.display = selectTextNow && window.getSelection() ? "flex" : "none");
|
124
|
+
rm.menuItems.search.style.display = selectTextNow && window.getSelection() ? "flex" : "none";
|
148
125
|
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
126
|
+
rm.menuItems.new.style.display = link ? "flex" : "none";
|
127
|
+
rm.menuItems.copyLink.style.display = link ? "flex" : "none";
|
128
|
+
rm.domhref = link || "";
|
129
|
+
|
130
|
+
rm.menuItems.copyImg.style.display = src ? "flex" : "none";
|
131
|
+
rm.menuItems.downloadImg.style.display = src ? "flex" : "none";
|
132
|
+
rm.domsrc = src || "";
|
133
|
+
|
134
|
+
rm.menuItems.paste.style.display = (tagName === "input" || tagName === "textarea") ? "flex" : "none";
|
158
135
|
|
159
|
-
let tagName = ele.target.tagName.toLowerCase();
|
160
|
-
if (tagName === "input" || tagName === "textarea") {
|
161
|
-
display = true;
|
162
|
-
rm.menuItems.paste.style.display = "flex";
|
163
|
-
} else {
|
164
|
-
rm.menuItems.paste.style.display = "none";
|
165
|
-
}
|
166
|
-
let cls = ele.target.className.toLowerCase();
|
167
136
|
if (cls.match(/aplayer/)) {
|
168
|
-
display =
|
169
|
-
rm.menuItems.music.forEach((item) => (item.style.display = "flex"));
|
137
|
+
rm.menuItems.music.forEach(item => item.style.display = "flex");
|
170
138
|
} else {
|
171
|
-
rm.menuItems.music
|
172
|
-
rm.menuItems.music.forEach((item) => (item.style.display = "none"));
|
139
|
+
rm.menuItems.music.forEach(item => item.style.display = "none");
|
173
140
|
}
|
174
141
|
|
175
|
-
Array.from(display ? rm.menuItems.other : rm.menuItems.plugin).forEach(
|
176
|
-
|
177
|
-
);
|
142
|
+
Array.from(display ? rm.menuItems.other : rm.menuItems.plugin).forEach(item => item.style.display = "none");
|
143
|
+
Array.from(display ? rm.menuItems.plugin : rm.menuItems.other).forEach(item => item.style.display = "block");
|
178
144
|
|
179
|
-
Array.from(display ? rm.menuItems.plugin : rm.menuItems.other).forEach(
|
180
|
-
(item) => (item.style.display = "block")
|
181
|
-
);
|
182
145
|
rm.reLoadSize();
|
183
|
-
x + rm.width > window.innerWidth
|
184
|
-
y + rm.height > window.innerHeight
|
185
|
-
|
146
|
+
x = (x + rm.width > window.innerWidth) ? x - (rm.width + 10) : x;
|
147
|
+
y = (y + rm.height > window.innerHeight) ? y - (y + rm.height - window.innerHeight) : y;
|
148
|
+
|
186
149
|
rm.showRightMenu(true, x, y);
|
187
150
|
return false;
|
188
151
|
};
|
189
152
|
|
190
153
|
(function () {
|
191
|
-
const addEventListener = (element, event, handler) =>
|
192
|
-
element.addEventListener(event, handler);
|
154
|
+
const addEventListener = (element, event, handler) => element.addEventListener(event, handler);
|
193
155
|
|
194
|
-
addEventListener(rm.menuItems.back, "click", () =>
|
195
|
-
|
196
|
-
);
|
197
|
-
addEventListener(rm.menuItems.
|
198
|
-
window.history.forward() || rm.hideRightMenu()
|
199
|
-
);
|
200
|
-
addEventListener(rm.menuItems.refresh, "click", () =>
|
201
|
-
window.location.reload()
|
202
|
-
);
|
203
|
-
addEventListener(rm.menuItems.top, "click", () =>
|
204
|
-
sco.toTop() || rm.hideRightMenu()
|
205
|
-
);
|
156
|
+
addEventListener(rm.menuItems.back, "click", () => window.history.back() || rm.hideRightMenu());
|
157
|
+
addEventListener(rm.menuItems.forward, "click", () => window.history.forward() || rm.hideRightMenu());
|
158
|
+
addEventListener(rm.menuItems.refresh, "click", () => window.location.reload());
|
159
|
+
addEventListener(rm.menuItems.top, "click", () => sco.toTop() || rm.hideRightMenu());
|
206
160
|
|
207
161
|
if (GLOBAL_CONFIG.right_menu.music) {
|
208
162
|
addEventListener(rm.menuItems.music[0], "click", () => {
|
@@ -218,45 +172,26 @@ window.oncontextmenu = (ele) => {
|
|
218
172
|
rm.hideRightMenu();
|
219
173
|
});
|
220
174
|
addEventListener(rm.menuItems.music[3], "click", () => {
|
221
|
-
const title = Array.from(document.querySelectorAll(".aplayer-title")).map(
|
222
|
-
(e) => e.innerText
|
223
|
-
)[0];
|
175
|
+
const title = Array.from(document.querySelectorAll(".aplayer-title")).map(e => e.innerText)[0];
|
224
176
|
rm.copyText(title);
|
225
177
|
});
|
226
178
|
}
|
227
179
|
|
228
180
|
addEventListener(rm.menuItems.copy, "click", () => {
|
229
|
-
if (GLOBAL_CONFIG.copyright) {
|
230
|
-
|
231
|
-
if (selectTextNow.length > limit) {
|
232
|
-
selectTextNow = `${selectTextNow}\n\n${author}\n${link}${window.location.href}\n${source}\n${info}`;
|
233
|
-
}
|
181
|
+
if (GLOBAL_CONFIG.copyright && selectTextNow.length > GLOBAL_CONFIG.right_menu.limit) {
|
182
|
+
selectTextNow += `\n\n${GLOBAL_CONFIG.right_menu.author}\n${GLOBAL_CONFIG.right_menu.link}${window.location.href}\n${GLOBAL_CONFIG.right_menu.source}\n${GLOBAL_CONFIG.right_menu.info}`;
|
234
183
|
}
|
235
184
|
rm.copyText(selectTextNow);
|
236
|
-
rm.hideRightMenu();
|
237
185
|
});
|
238
186
|
|
239
187
|
if (utils.saveToLocal.get("commentBarrageSwitch") !== null) {
|
240
188
|
rm.menuItems.barrage && rm.barrage(!utils.saveToLocal.get("commentBarrageSwitch"));
|
241
189
|
}
|
242
190
|
|
243
|
-
addEventListener(rm.menuItems.paste, "click", () =>
|
244
|
-
|
245
|
-
);
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
);
|
250
|
-
addEventListener(rm.menuItems.new, "click", () =>
|
251
|
-
window.open(rm.domhref) && rm.hideRightMenu()
|
252
|
-
);
|
253
|
-
addEventListener(rm.menuItems.downloadImg, "click", () =>
|
254
|
-
rm.downloadImage() && rm.hideRightMenu()
|
255
|
-
);
|
256
|
-
addEventListener(rm.menuItems.copyImg, "click", () =>
|
257
|
-
rm.copyImage() && rm.hideRightMenu()
|
258
|
-
);
|
259
|
-
addEventListener(rm.menuItems.copyLink, "click", () =>
|
260
|
-
rm.copyText(rm.domhref) && rm.hideRightMenu()
|
261
|
-
);
|
191
|
+
addEventListener(rm.menuItems.paste, "click", () => rm.pasteText() && rm.hideRightMenu());
|
192
|
+
GLOBAL_CONFIG.comment && addEventListener(rm.menuItems.comment, "click", () => rm.hideRightMenu() || sco.toTalk(selectTextNow));
|
193
|
+
addEventListener(rm.menuItems.new, "click", () => window.open(rm.domhref) && rm.hideRightMenu());
|
194
|
+
addEventListener(rm.menuItems.downloadImg, "click", () => rm.downloadImage() && rm.hideRightMenu());
|
195
|
+
addEventListener(rm.menuItems.copyImg, "click", () => rm.copyImage() && rm.hideRightMenu());
|
196
|
+
addEventListener(rm.menuItems.copyLink, "click", () => rm.copyText(rm.domhref) && rm.hideRightMenu());
|
262
197
|
})();
|
@@ -3,4 +3,96 @@
|
|
3
3
|
* author: @everfu
|
4
4
|
* date: 2024-04-28
|
5
5
|
*/
|
6
|
-
|
6
|
+
class Barrage {
|
7
|
+
constructor(comments) {
|
8
|
+
this.comments = comments;
|
9
|
+
this.dom = document.querySelector('.comment-barrage');
|
10
|
+
this.barrageList = [];
|
11
|
+
this.barrageIndex = 0;
|
12
|
+
this.barrageTimer = [];
|
13
|
+
this.hoverOnCommentBarrage = false;
|
14
|
+
this.init();
|
15
|
+
}
|
16
|
+
|
17
|
+
filterAndFlatten(comments) {
|
18
|
+
return comments.flatMap(comment => comment.replies ? [comment, ...this.filterAndFlatten(comment.replies)] : [comment]);
|
19
|
+
}
|
20
|
+
|
21
|
+
sanitizeContent(content) {
|
22
|
+
return content.replace(/(<([^>]+)>)/ig, '').trim();
|
23
|
+
}
|
24
|
+
|
25
|
+
createBarrageItem(comment) {
|
26
|
+
const sanitizedContent = this.sanitizeContent(comment.content);
|
27
|
+
if (!sanitizedContent) return false;
|
28
|
+
|
29
|
+
const barrageItem = document.createElement('div');
|
30
|
+
barrageItem.className = 'comment-barrage-item';
|
31
|
+
barrageItem.innerHTML = `
|
32
|
+
<div class="barrageHead">
|
33
|
+
<a class="barrageTitle" href="javascript:sco.scrollTo('post-comment')">
|
34
|
+
${GLOBAL_CONFIG.lang.barrage.title}
|
35
|
+
</a>
|
36
|
+
<div class="barrageNick">${comment.nick}</div>
|
37
|
+
<img class="barrageAvatar" src="${GLOBAL_CONFIG.comment.avatar}/avatar/${comment.mailMd5}" />
|
38
|
+
<a class="comment-barrage-close" href="javascript:sco.switchCommentBarrage();">
|
39
|
+
<i class="solitude st-close-fill"></i>
|
40
|
+
</a>
|
41
|
+
</div>
|
42
|
+
<a class="barrageContent" href="${comment.id ? `javascript:sco.scrollTo('${comment.id}')` : 'javascript:sco.scrollTo(\'post-comment\')'}">
|
43
|
+
${sanitizedContent}
|
44
|
+
</a>
|
45
|
+
|
46
|
+
`;
|
47
|
+
this.dom.appendChild(barrageItem);
|
48
|
+
this.barrageTimer.push(barrageItem);
|
49
|
+
return true;
|
50
|
+
}
|
51
|
+
|
52
|
+
removeBarrageItem(barrageItem) {
|
53
|
+
barrageItem.classList.add('out');
|
54
|
+
setTimeout(() => this.dom.removeChild(barrageItem), 1000);
|
55
|
+
}
|
56
|
+
|
57
|
+
manageBarrage() {
|
58
|
+
if (this.barrageList.length && !this.hoverOnCommentBarrage) {
|
59
|
+
if (!this.createBarrageItem(this.barrageList[this.barrageIndex])) {
|
60
|
+
this.barrageIndex = (this.barrageIndex + 1) % this.barrageList.length;
|
61
|
+
this.manageBarrage();
|
62
|
+
}
|
63
|
+
this.barrageIndex = (this.barrageIndex + 1) % this.barrageList.length;
|
64
|
+
}
|
65
|
+
if (this.barrageTimer.length > Math.min(1, this.barrageList.length) && !this.hoverOnCommentBarrage) {
|
66
|
+
this.removeBarrageItem(this.barrageTimer.shift());
|
67
|
+
}
|
68
|
+
}
|
69
|
+
|
70
|
+
initBarrage() {
|
71
|
+
const isBarrageEnabled = utils.saveToLocal.get('commentBarrageSwitch');
|
72
|
+
this.dom.style.display = isBarrageEnabled ? 'flex' : 'none';
|
73
|
+
this.barrageList = this.filterAndFlatten(this.comments);
|
74
|
+
this.dom.innerHTML = '';
|
75
|
+
clearInterval(this.commentInterval);
|
76
|
+
this.commentInterval = setInterval(() => this.manageBarrage(), 5000);
|
77
|
+
}
|
78
|
+
|
79
|
+
init() {
|
80
|
+
this.initBarrage();
|
81
|
+
this.dom.addEventListener('mouseover', () => this.hoverOnCommentBarrage = true);
|
82
|
+
this.dom.addEventListener('mouseout', () => this.hoverOnCommentBarrage = false);
|
83
|
+
}
|
84
|
+
|
85
|
+
destroy() {
|
86
|
+
clearInterval(this.commentInterval);
|
87
|
+
this.dom.removeEventListener('mouseover', () => this.hoverOnCommentBarrage = true);
|
88
|
+
this.dom.removeEventListener('mouseout', () => this.hoverOnCommentBarrage = false);
|
89
|
+
this.dom.innerHTML = '';
|
90
|
+
}
|
91
|
+
}
|
92
|
+
|
93
|
+
function initializeCommentBarrage(comments) {
|
94
|
+
if (comments.length === 0) return;
|
95
|
+
let existingBarrage = window.currentBarrage;
|
96
|
+
if (existingBarrage) existingBarrage.destroy();
|
97
|
+
window.currentBarrage = new Barrage(comments);
|
98
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
2
|
* EasyDanmaku v1.0.0
|
3
|
-
* author:
|
3
|
+
* author: @Lea321
|
4
4
|
*/
|
5
5
|
class EasyDanmaku{constructor(t){this.container=this.checkParams(t),this.pathname=t.page||null,this.wrapperStyle=t.wrapperStyle||null,this.line=t.line||10,this.speed=t.speed||5,this.runtime=t.runtime||10,this.colourful=t.colourful||!1,this.loop=t.loop||!1,this.hover=t.hover||!1,this.coefficient=t.coefficient||1.38,this.originIndex=0,this.originList=null,this.offsetValue=this.container.offsetHeight/this.line,this.vipIndex=0,this.overflowArr=[],this.clearIng=!1,this.cleartimer=null,this.init(),this.handleEvents(t)}handleEvents(t){this.onComplete=t.onComplete||null,this.onHover=t.onHover||null}init(){this.runstatus=1,this.aisle=[],this.container.style.overflow="hidden",this.hover&&this.handleMouseHover(),"relative"!==Utils.getStyle(this.container,"position")&&"fixed"!==Utils.getStyle(this.container,"position")&&(this.container.style.position="relative");for(let t=0;t<this.line;t++)this.aisle.push({normalRow:!0,vipRow:!0})}checkParams(t){if(!document.querySelector(t.el))throw`Could not find the ${t.el} element`;if(t.wrapperStyle&&"string"!=typeof t.wrapperStyle)throw"The type accepted by the wrapperStyle parameter is string";if(t.line&&"number"!=typeof t.line)throw"The type accepted by the line parameter is number";if(t.speed&&"number"!=typeof t.speed)throw"The type accepted by the speed parameter is number";if(t.colourful&&"boolean"!=typeof t.colourful)throw"The type accepted by the colourful parameter is boolean";if(t.runtime&&"number"!=typeof t.runtime)throw"The type accepted by the runtime parameter is number";if(t.loop&&"boolean"!=typeof t.loop)throw"The type accepted by the loop parameter is boolean";if(t.coefficient&&"number"!=typeof t.coefficient)throw"The type accepted by the coefficient parameter is number";if(t.hover&&"boolean"!=typeof t.hover)throw"The type accepted by the hover parameter is boolean";if(t.onComplete&&"function"!=typeof t.onComplete)throw"The type accepted by the onComplete parameter is function";if(t.onHover&&"function"!=typeof t.onHover)throw"The type accepted by the onHover parameter is function";return document.querySelector(t.el)}send(t,e=null,i=null){if(0==this.runstatus)return void this.overflowArr.push({content:t,normalClass:e});if(t.length<1)return;this.offsetValue=this.container.offsetHeight/this.line;let n=document.createElement("div"),r=0,s=this.speed,o=null,l=0;n.innerHTML=t,n.style.display="inline-block",n.classList.add("default-style"),(e||this.wrapperStyle)&&n.classList.add(e||this.wrapperStyle),function a(){if(r=Math.round(Math.random()*(this.line-1)),this.aisle[r].normalRow){this.aisle[r].normalRow=!1,this.container.appendChild(n),s+=n.offsetWidth/n.parentNode.offsetWidth*2,n.style.cssText=`\n text-align:center;\n min-width:130px;\n will-change: transform;\n position:absolute;\n right: -${n.offsetWidth+130}px;\n transition: transform ${s}s linear;\n transform: translateX(-${n.parentNode.offsetWidth+n.offsetWidth+130}px);\n top: ${r*this.offsetValue}px;\n line-height:${this.offsetValue}px;\n color:${this.colourful?"#"+("00000"+(16777216*Math.random()|0).toString(16)).substr(-6):void 0}\n `;let t=(n.parentNode.offsetWidth+n.offsetWidth)/s/60;o=setInterval((()=>{l+=t,l>n.offsetWidth*this.coefficient&&(this.aisle[r].normalRow=!0,clearInterval(o))}),16.66),setTimeout((()=>{1!=n.getAttribute("relieveDel")&&(i&&i({runtime:s,target:n,width:n.offsetWidth}),n.remove())}),1e3*s)}else{this.aisle.some((t=>!0===t.normalRow))?a.call(this):(()=>{this.overflowArr.push({content:t,normalClass:e}),this.clearIng||this.clearOverflowDanmakuArray()})()}}.call(this)}batchSend(t,e=!1,i=null){let n=this.runtime||1.23*t.length;this.originList=t,this.hasAvatar=e,this.normalClass=i;let r=setInterval((()=>{location.pathname!=this.pathname&&clearInterval(r),this.originIndex>t.length-1?(clearInterval(r),this.originIndex=0,this.onComplete&&this.onComplete(),this.loop&&this.batchSend(this.originList,e,i)):(e?this.send(`${t[this.originIndex].url?'<a href="'+t[this.originIndex].url+'">':""}<img src=${t[this.originIndex].avatar}>\n <p>${t[this.originIndex].content}</p>${t[this.originIndex].url?"</a>":""}\n `,i||this.wrapperStyle):this.send(t[this.originIndex],i||this.wrapperStyle),this.originIndex++)}),n/t.length*1e3)}centeredSend(t,e,i=3e3,n=null){let r=document.createElement("div"),s=0;r.innerHTML=t,(e||this.wrapperStyle)&&r.classList.add(e||this.wrapperStyle),function t(){if(this.aisle[s].vipRow)this.container.appendChild(r),r.style.cssText=`\n position:absolute;\n left:50%;\n transform:translateX(-50%);\n top: ${s*this.offsetValue}px;\n `,this.aisle[s].vipRow=!1,setTimeout((()=>{n&&n({duration:i,target:r,width:r.offsetWidth}),r.remove(),this.aisle[s].vipRow=!0}),i);else{if(s++,s>this.line-1)return;t.call(this)}}.call(this)}play(){const t=this.container.children;for(let e=0;e<t.length;e++)this.controlDanmakurunStatus(t[e],1);this.runstatus=1,0!==this.overflowArr.length&&this.clearOverflowDanmakuArray()}pause(){const t=this.container.children;for(let e=0;e<t.length;e++)this.controlDanmakurunStatus(t[e],0);this.runstatus=0}controlDanmakurunStatus(t,e){const i=0,n=/-(\S*),/;if(e===1){clearTimeout(t.timer);const e=Utils.getStyle(t,"transform").match(n)[1];t.style.transition=`transform ${this.speed}s linear`,t.style.transform=`translateX(-${t.parentNode.offsetWidth+parseInt(e)+t.offsetWidth+130}px)`,t.timer=setTimeout((()=>{t.remove()}),1e3*this.speed)}else if(e===i){clearTimeout(t.timer);const e=Utils.getStyle(t,"transform").match(n)[1];t.style.transition="transform 0s linear",t.style.transform=`translateX(-${e}px)`,t.setAttribute("relieveDel",1)}}handleMouseHover(){Utils.eventDelegation(this.container,"default-style","mouseover",(t=>{t.style["z-index"]=1e3,this.controlDanmakurunStatus(t,0),this.onHover&&this.onHover(t)})),Utils.eventDelegation(this.container,"default-style","mouseout",(t=>{t.style.zIndex=1,1==this.runstatus&&this.controlDanmakurunStatus(t,1)}))}clearOverflowDanmakuArray(){clearInterval(this.cleartimer),this.clearIng=!0;let t=0;this.cleartimer=setInterval((()=>{0===this.overflowArr.length?(t++,t>20&&(clearInterval(this.cleartimer),this.clearIng=!1)):(this.send(this.overflowArr[0].content,this.overflowArr[0].normalClass||this.wrapperStyle),this.overflowArr.shift())}),500)}}class Utils{static getStyle(t,e){return window.getComputedStyle(t,null)[e]}static eventDelegation(t,e,i,n){t.addEventListener(i,(t=>{try{t.target.className.includes(e)?n(t.target):t.target.parentNode.className.includes(e)&&n(t.target.parentNode)}catch(t){}}))}}
|