hexo-theme-solitude 1.8.10 → 1.8.11

package/source/js/barrage_comment.js

@@ -1,84 +1,77 @@
-function initializeCommentBarrage(array) {
-    if (array === []) return;
-    let existingBarrage = window.currentBarrage;
-
-    if (existingBarrage) {
-        existingBarrage.destroy();
+class Barrage {
+    constructor(comments) {
+        this.comments = comments;
+        this.dom = document.querySelector(".comment-barrage");
+        this.barrageList = [];
+        this.barrageIndex = 0;
+        this.barrageTimer = [];
+        this.hoverOnCommentBarrage = false;
+        this.init();
     }
 
-    let barrage = class {
-        constructor() {
-            this.config = {
-                barrageTimer: [],
-                barrageList: [],
-                barrageIndex: 0,
-                dom: document.querySelector(".comment-barrage"),
-                maxBarrage: 1,
-                barrageTime: 5000
-            };
-            this.hoverOnCommentBarrage = false;
-            this.init();
-        }
-
-        filterAndFlatten(comments) {
-            return comments.flatMap(comment => comment.replies ? [comment, ...this.filterAndFlatten(comment.replies)] : [comment]);
-        }
+    filterAndFlatten = (comments) => {
+        return (comments.flatMap(comment => comment.replies ? [comment, ...this.filterAndFlatten(comment.replies)] : [comment]))
+    }
 
-        sanitizeContent(content) {
-            return content.replace(/(<([^>]+)>)/ig, '').trim();
-        }
+    sanitizeContent(content) {
+        return content.replace(/(<([^>]+)>)/ig, '').trim();
+    }
 
-        createBarrageItem(comment) {
-            const content = this.sanitizeContent(comment.content);
-            if (!content) return false;
-            const element = document.createElement("div");
-            element.className = "comment-barrage-item";
-            element.innerHTML = `<div class="barrageHead"><a class="barrageTitle" href="javascript:sco.scrollTo('post-comment')">${GLOBAL_CONFIG.lang.barrage.title}</a><div class="barrageNick">${comment.nick}</div><img class="barrageAvatar" src="${GLOBAL_CONFIG.comment.avatar}/avatar/${comment.mailMd5}"/><a class="comment-barrage-close" href="javascript:sco.switchCommentBarrage();"><i class="solitude st-close-fill"></i></a></div><a class="barrageContent" href="${comment.id ? `javascript:sco.scrollTo(\'${comment.id}\')` : 'javascript:sco.scrollTo(\'post-comment\')'}">${content}</a>`;
-            this.config.dom.appendChild(element);
-            this.config.barrageTimer.push(element);
-            return true;
-        }
+    createBarrageItem(comment) {
+        const content = this.sanitizeContent(comment.content);
+        if (!content) return false;
+        const element = document.createElement("div");
+        element.className = "comment-barrage-item";
+        element.innerHTML = `<div class="barrageHead"><a class="barrageTitle" href="javascript:sco.scrollTo('post-comment')">${GLOBAL_CONFIG.lang.barrage.title}</a><div class="barrageNick">${comment.nick}</div><img class="barrageAvatar" src="${GLOBAL_CONFIG.comment.avatar}/avatar/${comment.mailMd5}"/><a class="comment-barrage-close" href="javascript:sco.switchCommentBarrage();"><i class="solitude st-close-fill"></i></a></div><a class="barrageContent" href="${comment.id ? `javascript:sco.scrollTo(\'${comment.id}\')` : 'javascript:sco.scrollTo(\'post-comment\')'}">${content}</a>`;
+        this.dom.appendChild(element);
+        this.barrageTimer.push(element);
+        return true;
+    }
 
-        removeBarrageItem(element) {
-            element.classList.add("out");
-            setTimeout(() => this.config.dom.removeChild(element), 1000);
-        }
+    removeBarrageItem(element) {
+        element.classList.add("out");
+        setTimeout(() => this.dom.removeChild(element), 1000);
+    }
 
-        manageBarrage() {
-            if (this.config.barrageList.length && !this.hoverOnCommentBarrage) {
-                if (!this.createBarrageItem(this.config.barrageList[this.config.barrageIndex])) {
-                    this.config.barrageIndex = (this.config.barrageIndex + 1) % this.config.barrageList.length;
-                    return this.manageBarrage();
-                }
-                this.config.barrageIndex = (this.config.barrageIndex + 1) % this.config.barrageList.length;
-            }
-            if (this.config.barrageTimer.length > Math.min(this.config.maxBarrage, this.config.barrageList.length) && !this.hoverOnCommentBarrage) {
-                this.removeBarrageItem(this.config.barrageTimer.shift());
+    manageBarrage() {
+        if (this.barrageList.length && !this.hoverOnCommentBarrage) {
+            if (!this.createBarrageItem(this.barrageList[this.barrageIndex])) {
+                this.barrageIndex = (this.barrageIndex + 1) % this.barrageList.length;
+                return this.manageBarrage();
             }
+            this.barrageIndex = (this.barrageIndex + 1) % this.barrageList.length;
         }
-
-        async initBarrage() {
-            const storageSwitch = utils.saveToLocal.get("commentBarrageSwitch");
-            this.config.dom.style.display = storageSwitch ? "flex" : "none";
-            this.config.barrageList = this.filterAndFlatten(array);
-            this.config.dom.innerHTML = "";
-            clearInterval(this.commentInterval);
-            this.commentInterval = setInterval(() => this.manageBarrage(), this.config.barrageTime);
+        if (this.barrageTimer.length > Math.min(1, this.barrageList.length) && !this.hoverOnCommentBarrage) {
+            this.removeBarrageItem(this.barrageTimer.shift());
         }
+    }
 
-        async init() {
-            await this.initBarrage();
-            this.config.dom.addEventListener('mouseover', () => this.hoverOnCommentBarrage = true);
-            this.config.dom.addEventListener('mouseout', () => this.hoverOnCommentBarrage = false);
-        }
+    initBarrage() {
+        const storageSwitch = utils.saveToLocal.get("commentBarrageSwitch");
+        this.dom.style.display = storageSwitch ? "flex" : "none";
+        this.barrageList = this.filterAndFlatten(this.comments);
+        this.dom.innerHTML = "";
+        clearInterval(this.commentInterval);
+        this.commentInterval = setInterval(() => this.manageBarrage(), 5000);
+    }
 
-        destroy() {
-            clearInterval(this.commentInterval);
-            this.config.dom.removeEventListener('mouseover', () => this.hoverOnCommentBarrage = true)
-            this.config.dom.removeEventListener('mouseout', () => this.hoverOnCommentBarrage = false)
-            this.config.dom.innerHTML = ""
-        }
+    init() {
+        this.initBarrage();
+        this.dom.addEventListener('mouseover', () => this.hoverOnCommentBarrage = true);
+        this.dom.addEventListener('mouseout', () => this.hoverOnCommentBarrage = false);
+    }
+
+    destroy() {
+        clearInterval(this.commentInterval);
+        this.dom.removeEventListener('mouseover', () => this.hoverOnCommentBarrage = true)
+        this.dom.removeEventListener('mouseout', () => this.hoverOnCommentBarrage = false)
+        this.dom.innerHTML = ""
     }
+}
 
-    window.currentBarrage = new barrage();
+function initializeCommentBarrage(array) {
+    if (array.length === 0) return;
+    let existingBarrage = window.currentBarrage;
+    if (existingBarrage) existingBarrage.destroy();
+    window.currentBarrage = new Barrage(array);
 }

package/source/js/covercolor/api.js

@@ -1,76 +1,59 @@
 const coverColor = () => {
     const path = document.getElementById("post-cover")?.src;
-    if (path) {
-        handleApiColor(path);
-    } else {
-        document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-        document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-        document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-        document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-        initThemeColor()
-    }
+    path ? handleApiColor(path) : setDefaultThemeColors();
 }
 
 function handleApiColor(path) {
     const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
-    if (cacheGroup.postcolor && cacheGroup.postcolor[path]) {
-        const color = cacheGroup.postcolor[path].value;
-        const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
-        setThemeColors(color, r, g, b);
-    } else {
-        img2color(path);
-    }
+    cacheGroup.postcolor && cacheGroup.postcolor[path] ? setThemeColors(cacheGroup.postcolor[path].value) : img2color(path);
 }
 
 function img2color(src) {
-    const apiUrl = coverColorConfig.api + encodeURIComponent(src);
-    fetch(apiUrl)
+    fetch(coverColorConfig.api + encodeURIComponent(src))
         .then(response => response.json())
         .then(data => {
-            const color = data.RGB;
-            const [r, g, b] = color.match(/\w\w/g).map(x => parseInt(x, 16));
-            setThemeColors(color, r, g, b);
-            const expirationTime = Date.now() + coverColorConfig.time;
-            const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
-            cacheGroup.postcolor = cacheGroup.postcolor || {};
-            cacheGroup.postcolor[src] = {value: color, expiration: expirationTime};
-            localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
+            setThemeColors(data.RGB);
+            cacheColor(src, data.RGB);
         })
-        .catch(error => {
-            console.error('API:error:', error);
-        });
+        .catch(console.error);
 }
 
-function setThemeColors(value, r = null, g = null, b = null) {
+function setThemeColors(value) {
     if (value) {
+        const [r, g, b] = value.match(/\w\w/g).map(x => parseInt(x, 16));
         document.documentElement.style.setProperty('--efu-main', value);
         document.documentElement.style.setProperty('--efu-main-op', value + '23');
         document.documentElement.style.setProperty('--efu-main-op-deep', value + 'dd');
         document.documentElement.style.setProperty('--efu-main-none', value + '00');
-
-        if (r && g && b) {
-            let brightness = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
-            if (brightness < 125) {
-                let cardContents = document.getElementsByClassName('card-content');
-                for (let i = 0; i < cardContents.length; i++) {
-                    cardContents[i].style.setProperty('--efu-card-bg', 'var(--efu-white)');
-                }
-
-                let authorInfo = document.getElementsByClassName('author-info__sayhi');
-                for (let i = 0; i < authorInfo.length; i++) {
-                    authorInfo[i].style.setProperty('background', 'var(--efu-white-op)');
-                    authorInfo[i].style.setProperty('color', 'var(--efu-white)');
-                }
-            }
-        }
-
+        adjustBrightness(r, g, b);
         document.getElementById("coverdiv").classList.add("loaded");
         initThemeColor();
     } else {
-        document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-        document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-        document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-        document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-        initThemeColor();
+        setDefaultThemeColors();
+    }
+}
+
+function setDefaultThemeColors() {
+    document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
+    document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
+    document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
+    document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
+    initThemeColor();
+}
+
+function cacheColor(src, color) {
+    const cacheGroup = JSON.parse(localStorage.getItem('Solitude')) || {};
+    cacheGroup.postcolor = cacheGroup.postcolor || {};
+    cacheGroup.postcolor[src] = {value: color, expiration: Date.now() + coverColorConfig.time};
+    localStorage.setItem('Solitude', JSON.stringify(cacheGroup));
+}
+
+function adjustBrightness(r, g, b) {
+    if (Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000) < 125) {
+        [...document.getElementsByClassName('card-content')].forEach(item => item.style.setProperty('--efu-card-bg', 'var(--efu-white)'));
+        [...document.getElementsByClassName('author-info__sayhi')].forEach(item => {
+            item.style.setProperty('background', 'var(--efu-white-op)');
+            item.style.setProperty('color', 'var(--efu-white)');
+        });
     }
 }

package/source/js/covercolor/local.js

@@ -1,39 +1,34 @@
 const coverColor = () => {
     const path = document.getElementById("post-cover")?.src;
-    if (path) {
-        localColor(path);
-    } else {
-        document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
-        document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
-        document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
-        document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
-        initThemeColor()
-    }
+    path ? localColor(path) : setDefaultThemeColors();
 }
 
-const localColor = (path) => {
+function setDefaultThemeColors() {
+    document.documentElement.style.setProperty('--efu-main', 'var(--efu-theme)');
+    document.documentElement.style.setProperty('--efu-main-op', 'var(--efu-theme-op)');
+    document.documentElement.style.setProperty('--efu-main-op-deep', 'var(--efu-theme-op-deep)');
+    document.documentElement.style.setProperty('--efu-main-none', 'var(--efu-theme-none)');
+    initThemeColor();
+}
+
+const localColor = path => {
     const img = new Image();
     img.crossOrigin = "Anonymous";
-    img.onload = function () {
-        const canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(img, 0, 0);
-        const data = ctx.getImageData(0, 0, img.width, img.height).data;
-        const {r, g, b} = calculateRGB(data);
-        let value = rgbToHex(r, g, b);
-        if (getContrastYIQ(value) === "light") {
-            value = LightenDarkenColor(value, -50);
-        }
-        setThemeColors(value, r, g, b);
-    };
-    img.onerror = function () {
-        console.error('Image Error');
-    };
+    img.onload = () => setThemeColors(calculateColor(img));
+    img.onerror = () => console.error('Image Error');
     img.src = path;
 }
 
+const calculateColor = img => {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0);
+    const data = ctx.getImageData(0, 0, img.width, img.height).data;
+    const {r, g, b} = calculateRGB(data);
+    let value = rgbToHex(r, g, b);
+    return getContrastYIQ(value) === "light" ? LightenDarkenColor(value, -50) : value;
+}
+
 function calculateRGB(data) {
     let r = 0, g = 0, b = 0;
     const step = 5;