From 7eb4ce789a3c8b4e5f5fc8499ac56fc0419bcb6c Mon Sep 17 00:00:00 2001 From: Yui Date: Sat, 18 Jul 2026 11:17:04 +0800 Subject: [PATCH 01/30] =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=95=BF=E6=96=87?= =?UTF-8?q?=E6=B2=89=E6=B5=B8=E9=98=85=E8=AF=BB=E6=A0=B7=E5=BC=8F=E4=B8=8E?= =?UTF-8?q?=E7=89=88=E5=BC=8F=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 1 + src/main/resources/js/long-article.js | 237 +++++--- src/main/resources/js/long-article.min.js | 2 +- src/main/resources/js/m-long-article.js | 157 +++--- src/main/resources/js/m-long-article.min.js | 2 +- src/main/resources/scss/index.scss | 525 ++++++++++++------ src/main/resources/scss/mobile-base.scss | 328 ++++++++--- .../skins/classic/mobile/article.ftl | 67 +-- .../resources/skins/classic/pc/article.ftl | 54 +- 9 files changed, 933 insertions(+), 440 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index e7af6bde..702198ef 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -103,6 +103,7 @@ - 首页两列对齐约束：`getIndexRecentArticles` 的第一页会插入全部置顶且不截断；第二页起需按第一页“置顶占位数”补偿 `fetchSize` 与分页偏移，并基于已排除置顶 ID 的普通文章序列取数，保证两列等高、不重复、不丢中间文章。 - 首页右侧排行补偿（无前端延迟）：由 `IndexProcessor#loadIndexData` 按两列最新文章的最大行数计算 `rankCompensateRows`，先换算“右栏总补偿行数”再分摊到 `checkinVisibleCount/onlineVisibleCount`，Freemarker 直接按该数量渲染，不再依赖 JS 运行时增删行。 - 专栏封面链路：封面字段是 `long_article_column.columnCoverURL`；默认封面在 `LongArticleColumnQueryService` 填充；作者管理页为 `/column/manage`，编辑长篇页的弹窗脚本是 `long-article-cover-dialog.js`，新建长篇封面随 `/article` 请求的 `columnCoverURL` 写入；封面保存接口为 `POST /api/columns/{columnId}/cover`，处理器是 `LongArticleColumnProcessor`。 +- 长文阅读页以 `articleType=6` 区分，PC/移动模板均为 `skins/classic/*/article.ftl`，样式在 `index.scss`/`mobile-base.scss`，交互在 `long-article.js`/`m-long-article.js`；桌面宽度和两端字号统一保存在 `localStorage.longArticleSettings`，宽度仅在 PC 生效。 - 管理员文章页编辑长文专栏时，`admin/article.ftl` 会随文章表单提交 `columnCoverURL`，后端在 `ArticleMgmtService` 的文章事务内复用 `ColumnCoverMgmtService` 校验并更新或清空专栏封面。 - 路由总入口：`Router#requestMapping` + 各 Processor `register()`；新增路由先决定使用 `loginCheck` / `apiCheck` / `permission` / `anonymousViewCheck` 哪条链路。 - Latke 路由存在静态段被相邻动态段截获的风险（如 `/article/{id}/revisions/list` 可能进入 `/article/{id}/revisions/{revisionId}`）；新增相邻路由时需避免路径歧义，或在处理方法中显式识别保留字。 diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index fc306a70..d607760d 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -7,139 +7,200 @@ * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . */ /** * Long article reading page functionality. */ window.LongArticle = { + storageKey: 'longArticleSettings', + allowedWidths: ['auto', '600', '800', '1000', '1200'], settings: { - theme: 'light', - fontSize: 18, - width: 900 + width: '800', + desktopFontSize: 18, + mobileFontSize: 16 }, - init: function() { + init: function () { + if (this.initialized) { + return; + } + this.initialized = true; this.loadSettings(); this.bindEvents(); this.applySettings(); }, - loadSettings: function() { - var saved = localStorage.getItem('longArticleSettings'); - if (saved) { - try { - this.settings = JSON.parse(saved); - } catch (e) { - console.error('Failed to parse settings', e); + loadSettings: function () { + var settings = { + width: '800', + desktopFontSize: 18, + mobileFontSize: 16 + }; + var saved; + + try { + saved = JSON.parse(window.localStorage.getItem(this.storageKey) || '{}'); + } catch (e) { + saved = {}; + } + + if (saved && typeof saved === 'object') { + settings.width = this.normalizeWidth(saved.width); + settings.desktopFontSize = this.normalizeFontSize(saved.desktopFontSize || saved.fontSize, 18, 32, 18); + settings.mobileFontSize = this.normalizeFontSize(saved.mobileFontSize, 16, 24, 16); + } + + try { + var legacyFontSize = parseInt(window.localStorage.getItem('longArticleFontSize'), 10); + if (!saved.desktopFontSize && !saved.fontSize && !isNaN(legacyFontSize)) { + settings.desktopFontSize = this.normalizeFontSize(legacyFontSize, 18, 32, 18); + settings.mobileFontSize = this.normalizeFontSize(legacyFontSize, 16, 24, 16); + } + var mobileSettings = JSON.parse(window.localStorage.getItem('mLongArticleSettings') || '{}'); + if (!saved.mobileFontSize && mobileSettings && !isNaN(parseInt(mobileSettings.fontSize, 10))) { + settings.mobileFontSize = this.normalizeFontSize(parseInt(mobileSettings.fontSize, 10), 16, 24, 16); } + window.localStorage.removeItem('longArticleFontSize'); + window.localStorage.removeItem('mLongArticleSettings'); + } catch (e) { + // Ignore unavailable or malformed legacy storage. } - }, - saveSettings: function() { - localStorage.setItem('longArticleSettings', JSON.stringify(this.settings)); + this.settings = settings; + this.saveSettings(); }, - applySettings: function() { - var body = document.body; - var container = document.querySelector('.long-article-container'); - var content = document.querySelector('.long-article-content'); + normalizeWidth: function (width) { + width = String(width || '800'); + return this.allowedWidths.indexOf(width) >= 0 ? width : '800'; + }, - // Theme - if (this.settings.theme === 'night') { - body.classList.add('night'); - } else { - body.classList.remove('night'); + normalizeFontSize: function (size, min, max, fallback) { + size = parseInt(size, 10); + if (isNaN(size)) { + return fallback; } + return Math.max(min, Math.min(max, size)); + }, - // Font size - if (content) { - content.style.fontSize = this.settings.fontSize + 'px'; + saveSettings: function () { + try { + window.localStorage.setItem(this.storageKey, JSON.stringify(this.settings)); + } catch (e) { + // Ignore unavailable storage. } - document.getElementById('fontSizeValue').textContent = this.settings.fontSize + 'px'; + }, - // Width - if (container) { - container.style.width = this.settings.width + 'px'; - } - document.documentElement.style.setProperty('--la-content-width', this.settings.width + 'px'); + applySettings: function () { + var root = document.documentElement; + var width = this.settings.width; + var halfWidth = width === 'auto' ? 'min(40vw, 600px)' : (parseInt(width, 10) / 2) + 'px'; + + root.style.setProperty('--long-article-width', width === 'auto' ? 'min(80vw, 1200px)' : width + 'px'); + root.style.setProperty('--long-article-half-width', halfWidth); + root.style.setProperty('--long-article-font-size', this.settings.desktopFontSize + 'px'); + this.updateWidthButtons(); }, - bindEvents: function() { + bindEvents: function () { var self = this; + var toolbar = document.querySelector('[data-long-article-toolbar]'); + if (!toolbar) { + return; + } + + toolbar.addEventListener('click', function (event) { + var actionElement = self.findActionElement(event.target, toolbar); + if (!actionElement) { + return; + } + var action = actionElement.getAttribute('data-long-article-action'); + if (action === 'top') { + self.scrollToTop(); + } else if (action === 'comments') { + self.scrollToComments(); + } else if (action === 'font-decrease') { + self.setFontSize(-2); + } else if (action === 'font-increase') { + self.setFontSize(2); + } else if (action === 'layout') { + self.toggleLayoutPanel(); + } else if (actionElement.hasAttribute('data-long-article-width')) { + self.setWidth(actionElement.getAttribute('data-long-article-width')); + } + }); - // Close settings panel when clicking outside - document.addEventListener('click', function(e) { - var panel = document.getElementById('settingsPanel'); - var toggle = document.querySelector('.sidebar-item[onclick*="openSettings"]'); - if (panel && panel.classList.contains('active')) { - if (!panel.contains(e.target) && (!toggle || !toggle.contains(e.target))) { - panel.classList.remove('active'); - } + document.addEventListener('click', function (event) { + var panel = document.getElementById('longArticleLayoutPanel'); + var layoutButton = toolbar.querySelector('[data-long-article-action="layout"]'); + if (panel && panel.classList.contains('is-open') && !panel.contains(event.target) && !layoutButton.contains(event.target)) { + self.closeLayoutPanel(); } }); }, - openSettings: function() { - var panel = document.getElementById('settingsPanel'); - if (panel) { - panel.classList.toggle('active'); + findActionElement: function (target, boundary) { + while (target && target !== boundary) { + if (target.nodeType === 1 && (target.hasAttribute('data-long-article-action') || target.hasAttribute('data-long-article-width'))) { + return target; + } + target = target.parentNode; } + return target && target !== boundary && target.nodeType === 1 ? target : null; }, - setTheme: function(theme) { - this.settings.theme = theme; + setFontSize: function (delta) { + this.settings.desktopFontSize = this.normalizeFontSize(this.settings.desktopFontSize + delta, 12, 32, 18); this.saveSettings(); this.applySettings(); - - // Update active state - var lightBtn = document.querySelector('.theme-btn.light'); - var nightBtn = document.querySelector('.theme-btn.night'); - if (lightBtn) lightBtn.classList.toggle('active', theme === 'light'); - if (nightBtn) nightBtn.classList.toggle('active', theme === 'night'); - }, - - setFontSize: function(delta) { - var newSize = this.settings.fontSize + delta; - if (newSize >= 12 && newSize <= 32) { - this.settings.fontSize = newSize; - this.saveSettings(); - this.applySettings(); - } }, - setWidth: function(width) { - this.settings.width = width; + setWidth: function (width) { + this.settings.width = this.normalizeWidth(width); this.saveSettings(); this.applySettings(); + this.closeLayoutPanel(); + }, - // Update active state - var widthBtns = document.querySelectorAll('.width-btn'); - widthBtns.forEach(function(btn) { - var btnWidth = btn.getAttribute('onclick').match(/\d+/); - if (btnWidth && parseInt(btnWidth[0]) === width) { - btn.classList.add('active'); - } else { - btn.classList.remove('active'); - } + updateWidthButtons: function () { + var width = this.settings.width; + document.querySelectorAll('[data-long-article-width]').forEach(function (button) { + button.classList.toggle('is-active', button.getAttribute('data-long-article-width') === width); }); }, - toggleNight: function() { - this.setTheme(this.settings.theme === 'night' ? 'light' : 'night'); + toggleLayoutPanel: function () { + var panel = document.getElementById('longArticleLayoutPanel'); + var button = document.querySelector('[data-long-article-action="layout"]'); + if (!panel || !button) { + return; + } + var open = !panel.classList.contains('is-open'); + panel.classList.toggle('is-open', open); + panel.setAttribute('aria-hidden', open ? 'false' : 'true'); + button.setAttribute('aria-expanded', open ? 'true' : 'false'); }, - scrollToTop: function() { - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); + closeLayoutPanel: function () { + var panel = document.getElementById('longArticleLayoutPanel'); + var button = document.querySelector('[data-long-article-action="layout"]'); + if (panel) { + panel.classList.remove('is-open'); + panel.setAttribute('aria-hidden', 'true'); + } + if (button) { + button.setAttribute('aria-expanded', 'false'); + } + }, + + scrollToTop: function () { + window.scrollTo({top: 0, behavior: 'smooth'}); + }, + + scrollToComments: function () { + var comments = document.getElementById('comments'); + if (comments) { + comments.scrollIntoView({behavior: 'smooth'}); + } } }; diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js index c3cd0a91..f7a49618 100644 --- a/src/main/resources/js/long-article.min.js +++ b/src/main/resources/js/long-article.min.js @@ -1 +1 @@ -window.LongArticle={settings:{theme:"light",fontSize:18,width:900},init:function(){this.loadSettings(),this.bindEvents(),this.applySettings()},loadSettings:function(){var t=localStorage.getItem("longArticleSettings");if(t)try{this.settings=JSON.parse(t)}catch(t){console.error("Failed to parse settings",t)}},saveSettings:function(){localStorage.setItem("longArticleSettings",JSON.stringify(this.settings))},applySettings:function(){var t=document.body,e=document.querySelector(".long-article-container"),i=document.querySelector(".long-article-content");"night"===this.settings.theme?t.classList.add("night"):t.classList.remove("night"),i&&(i.style.fontSize=this.settings.fontSize+"px"),document.getElementById("fontSizeValue").textContent=this.settings.fontSize+"px",e&&(e.style.width=this.settings.width+"px"),document.documentElement.style.setProperty("--la-content-width",this.settings.width+"px")},bindEvents:function(){document.addEventListener("click",function(t){var e=document.getElementById("settingsPanel"),i=document.querySelector('.sidebar-item[onclick*="openSettings"]');e&&e.classList.contains("active")&&(e.contains(t.target)||i&&i.contains(t.target)||e.classList.remove("active"))})},openSettings:function(){var t=document.getElementById("settingsPanel");t&&t.classList.toggle("active")},setTheme:function(t){this.settings.theme=t,this.saveSettings(),this.applySettings();var e=document.querySelector(".theme-btn.light"),i=document.querySelector(".theme-btn.night");e&&e.classList.toggle("active","light"===t),i&&i.classList.toggle("active","night"===t)},setFontSize:function(t){var e=this.settings.fontSize+t;e>=12&&e<=32&&(this.settings.fontSize=e,this.saveSettings(),this.applySettings())},setWidth:function(t){this.settings.width=t,this.saveSettings(),this.applySettings(),document.querySelectorAll(".width-btn").forEach(function(e){var i=e.getAttribute("onclick").match(/\d+/);i&&parseInt(i[0])===t?e.classList.add("active"):e.classList.remove("active")})},toggleNight:function(){this.setTheme("night"===this.settings.theme?"light":"night")},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})}}; \ No newline at end of file +window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings())},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var i=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(i)||(e.desktopFontSize=this.normalizeFontSize(i,18,32,18),e.mobileFontSize=this.normalizeFontSize(i,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,i,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(i,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,i="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",i),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(i){var o=t.findActionElement(i.target,e);if(o){var n=o.getAttribute("data-long-article-action");"top"===n?t.scrollToTop():"comments"===n?t.scrollToComments():"font-decrease"===n?t.setFontSize(-2):"font-increase"===n?t.setFontSize(2):"layout"===n?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(i){var o=document.getElementById("longArticleLayoutPanel"),n=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(i.target)&&!n.contains(i.target)&&t.closeLayoutPanel()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var i=!t.classList.contains("is-open");t.classList.toggle("is-open",i),t.setAttribute("aria-hidden",i?"false":"true"),e.setAttribute("aria-expanded",i?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},scrollToComments:function(){var t=document.getElementById("comments");t&&t.scrollIntoView({behavior:"smooth"})}}; \ No newline at end of file diff --git a/src/main/resources/js/m-long-article.js b/src/main/resources/js/m-long-article.js index 8df68581..fa41fea0 100644 --- a/src/main/resources/js/m-long-article.js +++ b/src/main/resources/js/m-long-article.js @@ -7,106 +7,123 @@ * it under the terms of the GNU Affero General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . */ /** * Mobile long article reading page functionality. */ window.MLongArticle = { + storageKey: 'longArticleSettings', settings: { - theme: 'light', - fontSize: 16 + width: '800', + desktopFontSize: 18, + mobileFontSize: 16 }, - init: function() { + init: function () { + if (this.initialized) { + return; + } + this.initialized = true; this.loadSettings(); this.bindEvents(); this.applySettings(); }, - loadSettings: function() { - var saved = localStorage.getItem('mLongArticleSettings'); - if (saved) { - try { - this.settings = JSON.parse(saved); - } catch (e) { - console.error('Failed to parse settings', e); + loadSettings: function () { + var settings = { + width: '800', + desktopFontSize: 18, + mobileFontSize: 16 + }; + var saved; + + try { + saved = JSON.parse(window.localStorage.getItem(this.storageKey) || '{}'); + } catch (e) { + saved = {}; + } + if (saved && typeof saved === 'object') { + settings.width = ['auto', '600', '800', '1000', '1200'].indexOf(String(saved.width || '800')) >= 0 ? String(saved.width || '800') : '800'; + settings.desktopFontSize = this.normalizeFontSize(saved.desktopFontSize || saved.fontSize, 18, 32, 18); + settings.mobileFontSize = this.normalizeFontSize(saved.mobileFontSize || saved.fontSize, 16, 24, 16); + } + + try { + var legacyFontSize = parseInt(window.localStorage.getItem('longArticleFontSize'), 10); + var oldSettings = JSON.parse(window.localStorage.getItem('mLongArticleSettings') || '{}'); + if (!saved.mobileFontSize && oldSettings && !isNaN(parseInt(oldSettings.fontSize, 10))) { + settings.mobileFontSize = this.normalizeFontSize(parseInt(oldSettings.fontSize, 10), 16, 24, 16); + } else if (!saved.mobileFontSize && !isNaN(legacyFontSize)) { + settings.mobileFontSize = this.normalizeFontSize(legacyFontSize, 16, 24, 16); } + window.localStorage.removeItem('longArticleFontSize'); + window.localStorage.removeItem('mLongArticleSettings'); + } catch (e) { + // Ignore unavailable or malformed legacy storage. } - }, - saveSettings: function() { - localStorage.setItem('mLongArticleSettings', JSON.stringify(this.settings)); + this.settings = settings; + this.saveSettings(); }, - applySettings: function() { - var body = document.body; - var content = document.querySelector('.m-long-article-content'); - - if (this.settings.theme === 'night') { - body.classList.add('night'); - } else { - body.classList.remove('night'); + normalizeFontSize: function (size, min, max, fallback) { + size = parseInt(size, 10); + if (isNaN(size)) { + return fallback; } + return Math.max(min, Math.min(max, size)); + }, - if (content) { - content.style.fontSize = this.settings.fontSize + 'px'; - } - var fontSizeEl = document.getElementById('mFontSizeValue'); - if (fontSizeEl) { - fontSizeEl.textContent = this.settings.fontSize + 'px'; + saveSettings: function () { + try { + window.localStorage.setItem(this.storageKey, JSON.stringify(this.settings)); + } catch (e) { + // Ignore unavailable storage. } }, - bindEvents: function() { - var self = this; + applySettings: function () { + document.documentElement.style.setProperty('--long-article-font-size', this.settings.mobileFontSize + 'px'); + }, - document.addEventListener('click', function(e) { - var panel = document.getElementById('mSettingsPanel'); - var toggle = document.querySelector('.m-action-btn[onclick*="openSettings"]'); - if (panel && panel.classList.contains('active')) { - if (!panel.contains(e.target) && (!toggle || !toggle.contains(e.target))) { - panel.classList.remove('active'); + bindEvents: function () { + var self = this; + var toolbar = document.querySelector('[data-long-article-toolbar]'); + if (!toolbar) { + return; + } + toolbar.addEventListener('click', function (event) { + var target = event.target; + while (target && target !== toolbar && !target.hasAttribute('data-long-article-action')) { + target = target.parentNode; + } + if (!target || target === toolbar) { + return; + } + var action = target.getAttribute('data-long-article-action'); + if (action === 'toggle') { + var open = !toolbar.classList.contains('is-open'); + toolbar.classList.toggle('is-open', open); + target.classList.toggle('active', open); + target.setAttribute('aria-expanded', open ? 'true' : 'false'); + } else if (action === 'top') { + window.scrollTo({top: 0, behavior: 'smooth'}); + } else if (action === 'comments') { + var comments = document.getElementById('comments'); + if (comments) { + comments.scrollIntoView({behavior: 'smooth'}); } + } else if (action === 'font-decrease') { + self.setFontSize(-2); + } else if (action === 'font-increase') { + self.setFontSize(2); } }); }, - openSettings: function() { - var panel = document.getElementById('mSettingsPanel'); - if (panel) { - panel.classList.toggle('active'); - } - }, - - setTheme: function(theme) { - this.settings.theme = theme; + setFontSize: function (delta) { + this.settings.mobileFontSize = this.normalizeFontSize(this.settings.mobileFontSize + delta, 12, 24, 16); this.saveSettings(); this.applySettings(); - - var lightBtn = document.querySelector('.m-theme-btn.light'); - var nightBtn = document.querySelector('.m-theme-btn.night'); - if (lightBtn) lightBtn.classList.toggle('active', theme === 'light'); - if (nightBtn) nightBtn.classList.toggle('active', theme === 'night'); - }, - - setFontSize: function(delta) { - var newSize = this.settings.fontSize + delta; - if (newSize >= 12 && newSize <= 24) { - this.settings.fontSize = newSize; - this.saveSettings(); - this.applySettings(); - } - }, - - toggleNight: function() { - this.setTheme(this.settings.theme === 'night' ? 'light' : 'night'); } }; diff --git a/src/main/resources/js/m-long-article.min.js b/src/main/resources/js/m-long-article.min.js index 9feb097f..3246c6fe 100644 --- a/src/main/resources/js/m-long-article.min.js +++ b/src/main/resources/js/m-long-article.min.js @@ -1 +1 @@ -window.MLongArticle={settings:{theme:"light",fontSize:16},init:function(){this.loadSettings(),this.bindEvents(),this.applySettings()},loadSettings:function(){var t=localStorage.getItem("mLongArticleSettings");if(t)try{this.settings=JSON.parse(t)}catch(t){console.error("Failed to parse settings",t)}},saveSettings:function(){localStorage.setItem("mLongArticleSettings",JSON.stringify(this.settings))},applySettings:function(){var t=document.body,e=document.querySelector(".m-long-article-content");"night"===this.settings.theme?t.classList.add("night"):t.classList.remove("night"),e&&(e.style.fontSize=this.settings.fontSize+"px");var n=document.getElementById("mFontSizeValue");n&&(n.textContent=this.settings.fontSize+"px")},bindEvents:function(){document.addEventListener("click",function(t){var e=document.getElementById("mSettingsPanel"),n=document.querySelector('.m-action-btn[onclick*="openSettings"]');e&&e.classList.contains("active")&&(e.contains(t.target)||n&&n.contains(t.target)||e.classList.remove("active"))})},openSettings:function(){var t=document.getElementById("mSettingsPanel");t&&t.classList.toggle("active")},setTheme:function(t){this.settings.theme=t,this.saveSettings(),this.applySettings();var e=document.querySelector(".m-theme-btn.light"),n=document.querySelector(".m-theme-btn.night");e&&e.classList.toggle("active","light"===t),n&&n.classList.toggle("active","night"===t)},setFontSize:function(t){var e=this.settings.fontSize+t;e>=12&&e<=24&&(this.settings.fontSize=e,this.saveSettings(),this.applySettings())},toggleNight:function(){this.setTheme("night"===this.settings.theme?"light":"night")}}; \ No newline at end of file +window.MLongArticle={storageKey:"longArticleSettings",settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings())},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=["auto","600","800","1000","1200"].indexOf(String(t.width||"800"))>=0?String(t.width||"800"):"800",e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize||t.fontSize,16,24,16));try{var i=parseInt(window.localStorage.getItem("longArticleFontSize"),10),o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))?t.mobileFontSize||isNaN(i)||(e.mobileFontSize=this.normalizeFontSize(i,16,24,16)):e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeFontSize:function(t,e,i,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(i,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){document.documentElement.style.setProperty("--long-article-font-size",this.settings.mobileFontSize+"px")},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&e.addEventListener("click",function(i){for(var o=i.target;o&&o!==e&&!o.hasAttribute("data-long-article-action");)o=o.parentNode;if(o&&o!==e){var n=o.getAttribute("data-long-article-action");if("toggle"===n){var s=!e.classList.contains("is-open");e.classList.toggle("is-open",s),o.classList.toggle("active",s),o.setAttribute("aria-expanded",s?"true":"false")}else if("top"===n)window.scrollTo({top:0,behavior:"smooth"});else if("comments"===n){var a=document.getElementById("comments");a&&a.scrollIntoView({behavior:"smooth"})}else"font-decrease"===n?t.setFontSize(-2):"font-increase"===n&&t.setFontSize(2)}})},setFontSize:function(t){this.settings.mobileFontSize=this.normalizeFontSize(this.settings.mobileFontSize+t,12,24,16),this.saveSettings(),this.applySettings()}}; \ No newline at end of file diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 81adad5d..8551aae3 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5101,30 +5101,184 @@ code .dec { /* start long-article */ .long-article-content { - max-width: 800px; - margin: 0 auto; - padding: 40px 60px; - font-size: 18px; - line-height: 1.8; + max-width: none; + margin: 36px 0 0; + padding: 0; + color: #25332a; + font-size: var(--long-article-font-size, 18px); + line-height: 1.9; + overflow-wrap: anywhere; + + > p { + margin: 1.15em 0; + text-indent: 2em; + } + + > p:has(> img), + > p:has(> picture), + > p:has(> video), + > p:has(> iframe) { + text-indent: 0; + } + + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + margin: 1.8em 0 0.75em; + color: #1f2e24; + line-height: 1.45; + text-indent: 0; + } + + > ul, + > ol, + > blockquote, + > pre, + > table, + > figure { + margin-top: 1.35em; + margin-bottom: 1.35em; + text-indent: 0; + } + + blockquote { + padding: 14px 18px; + border-left: 4px solid #9bb4a0; + background: #f0f5ef; + color: #526259; + } + + img { + display: block; + max-width: 100%; + height: auto; + margin: 1.6em auto; + } + + table { + display: block; + max-width: 100%; + overflow-x: auto; + } + + pre { + border-radius: 8px; + } + + :not(pre) > code { + border-radius: 4px; + background: #edf2ec; + color: #35513d; + } } .long-article-meta { - text-align: right; - color: #888; - font-size: 13px; - margin-bottom: 15px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px 10px; + margin-top: 14px; + color: #718078; + font-size: 14px; + line-height: 1.6; + text-align: left; a { - color: #888; + color: #526c5a; text-decoration: none; &:hover { - color: #4285f4; + color: #2f6a43; } } .long-article-author { - margin-right: 15px; + color: #2f4937; + font-weight: 600; + } +} + +.long-article-meta__separator { + color: #9ba79f; +} + +.article.long-article-page { + min-height: 100vh; + padding-top: 0; + background: #c7d8ca; + color: #25332a; + + > .nav, + > .footer { + display: none; + } + + .article-container { + box-sizing: border-box; + width: min(var(--long-article-width, 800px), calc(100vw - 28px)); + max-width: none; + margin: 36px auto 0; + border: 1px solid rgba(72, 101, 79, 0.12); + border-radius: 12px; + background: #fbfcf8; + box-shadow: 0 12px 36px rgba(48, 73, 55, 0.1); + } + + .article-body { + padding: 0; + } + + .article-body > .wrapper { + box-sizing: border-box; + width: 100%; + max-width: none; + padding: 54px clamp(32px, 6vw, 72px) 46px; + } + + h1.article-title { + margin: 0; + padding: 0; + color: #1d2b21; + font-size: 32px; + font-weight: 650; + line-height: 1.35; + text-align: left; + + svg { + width: 30px; + height: 30px; + vertical-align: -4px; + } + } + + > .main { + box-sizing: border-box; + margin-top: 36px; + padding: 38px 0 48px; + border-top: 1px solid rgba(72, 101, 79, 0.12); + background: #dce8de; + } + + #articleCommentsPanel { + box-sizing: border-box; + width: min(var(--long-article-width, 800px), calc(100vw - 28px)); + max-width: none; + margin: 0 auto; + padding: 26px; + border: 1px solid rgba(72, 101, 79, 0.1); + border-radius: 12px; + background: #f8faf6; + } + + .article-footer { + box-sizing: border-box; + width: min(var(--long-article-width, 800px), calc(100vw - 28px)); + max-width: none; + margin-right: auto; + margin-left: auto; } } @@ -5384,36 +5538,38 @@ code .dec { .long-article-settings { position: fixed; - right: 20px; + left: min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 58px)); top: 50%; transform: translateY(-50%); - z-index: 100; + z-index: 101; display: flex; flex-direction: column; - gap: 10px; + gap: 8px; } .long-article-settings-btn { width: 44px; height: 44px; - border-radius: 50%; - border: none; - background: #fff; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - cursor: pointer; display: flex; align-items: center; justify-content: center; - color: #666; - transition: all 0.2s; + padding: 0; + border: 1px solid rgba(72, 101, 79, 0.15); + border-radius: 8px; + background: rgba(248, 251, 247, 0.96); + box-shadow: 0 4px 14px rgba(48, 73, 55, 0.12); + color: #52685a; + cursor: pointer; font-size: 16px; - font-weight: bold; + font-weight: 600; position: relative; + transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; &:hover { - background: #f0f0f0; - color: #333; - transform: scale(1.1); + border-color: rgba(55, 100, 68, 0.35); + background: #fff; + color: #2f6a43; + transform: translateX(2px); } svg { @@ -5422,39 +5578,149 @@ code .dec { } } +.long-article-settings-btn--text { + font-size: 13px; +} + +.long-article-settings__count { + position: absolute; + top: -5px; + right: -5px; + min-width: 18px; + box-sizing: border-box; + padding: 1px 5px; + border-radius: 10px; + background: #c94e4e; + color: #fff; + font-size: 10px; + font-weight: 600; + line-height: 16px; + text-align: center; +} + +.long-article-layout { + position: relative; +} + +.long-article-layout-panel { + position: absolute; + right: 56px; + bottom: 0; + display: none; + width: 210px; + box-sizing: border-box; + padding: 14px; + border: 1px solid rgba(72, 101, 79, 0.16); + border-radius: 10px; + background: rgba(251, 253, 249, 0.98); + box-shadow: 0 12px 32px rgba(38, 61, 44, 0.18); + + &.is-open { + display: block; + } +} + +.long-article-layout-panel__title { + margin-bottom: 10px; + color: #52685a; + font-size: 13px; + font-weight: 600; +} + +.long-article-layout-panel__options { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 7px; + + button { + height: 32px; + padding: 0 8px; + border: 1px solid #d9e3da; + border-radius: 6px; + background: #f3f7f1; + color: #52685a; + cursor: pointer; + font-size: 12px; + + &:hover, + &.is-active { + border-color: #77977e; + background: #dfeadf; + color: #285a39; + } + + &.is-active { + font-weight: 600; + } + } +} + body.night { + &.long-article-page { + background: #26332b; + color: #d9e3db; + + .article-container { + border-color: rgba(204, 224, 209, 0.08); + background: #18231d; + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); + } + + h1.article-title { + color: #eef4ef; + } + + > .main { + border-color: rgba(204, 224, 209, 0.08); + background: #202d25; + } + + #articleCommentsPanel { + border-color: rgba(204, 224, 209, 0.08); + background: #18231d; + } + } + .long-article-content { - background-color: #1a1a1a; - color: #e0e0e0; + color: #d9e3db; a { - color: #6bb3ff; + color: #8fc9a0; } blockquote { - border-color: #444; - color: #bbb; + border-color: #587663; + background: #223128; + color: #b8c7bc; } - code { - background-color: #2d2d2d; - color: #e0e0e0; + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + color: #edf4ef; } pre { - background-color: #2d2d2d; + background-color: #111a15; + } + + :not(pre) > code { + background: #27362c; + color: #b9d6c1; } } .long-article-meta { - color: #888; - border-color: #333; + color: #93a299; a { - color: #888; + color: #a9c7b1; &:hover { - color: #6bb3ff; + color: #c6e5ce; } } } @@ -5523,26 +5789,69 @@ body.night { } .long-article-settings-btn { - background: #2d2d2d; - color: #999; + border-color: rgba(190, 214, 196, 0.12); + background: rgba(28, 41, 33, 0.96); + color: #a7b7ac; &:hover { - background: #3d3d3d; - color: #fff; + border-color: rgba(190, 214, 196, 0.25); + background: #26382d; + color: #e3ece5; + } + } + + .long-article-layout-panel { + border-color: rgba(190, 214, 196, 0.12); + background: rgba(24, 35, 29, 0.98); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); + } + + .long-article-layout-panel__title { + color: #a7b7ac; + } + + .long-article-layout-panel__options button { + border-color: #34483a; + background: #223128; + color: #b2c2b7; + + &:hover, + &.is-active { + border-color: #6c9177; + background: #304637; + color: #e3ece5; } } } @media (max-width: 768px) { - .long-article-content { - padding: 20px 15px; - font-size: 16px; + .article.long-article-page { + .article-container { + margin-top: 14px; + border-radius: 9px; + } + + .article-body > .wrapper { + padding: 36px 24px; + } + + h1.article-title { + font-size: 26px; + } + + > .main { + margin-top: 20px; + padding: 24px 0 30px; + } + + #articleCommentsPanel { + padding: 18px; + border-radius: 9px; + } } - .long-article-meta { - font-size: 13px; - padding: 10px 15px; - margin-bottom: 15px; + .long-article-content { + margin-top: 28px; } .article-nav-scope__tabs { @@ -5573,122 +5882,18 @@ body.night { text-align: left; } - // 长文章时，将文章操作按钮移到右下角 - .long-article-page .article-actions { - position: fixed; - bottom: 10px; - right: 10px; - margin: 0 !important; - z-index: 98; - - .fn-right { - display: flex; - flex-direction: column; - gap: 8px; - background: rgba(255, 255, 255, 0.95); - padding: 8px; - border-radius: 8px; - box-shadow: 0 2px 12px rgba(0,0,0,0.15); - - span, a { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; - margin: 0; - } - } - } - - body.night.long-article-page .article-actions .fn-right { - background: rgba(45, 45, 45, 0.95); - } - .long-article-settings { - position: fixed; - right: 10px; - top: 50%; - transform: translateY(-50%); - flex-direction: column; - gap: 8px; - background: transparent; - padding: 0; - box-shadow: none; - border-radius: 0; - z-index: 99; + right: 8px; + left: auto; } .long-article-settings-btn { - width: 36px; - height: 36px; - border-radius: 50%; - padding: 0; - flex-direction: row; - gap: 0; - background: rgba(255, 255, 255, 0.95); - box-shadow: 0 2px 8px rgba(0,0,0,0.15); - transition: all 0.3s; - - svg { - width: 20px; - height: 20px; - } - - span { - font-size: 14px; - font-weight: bold; - } - - &.hide { - opacity: 0; - pointer-events: none; - transform: translateX(60px); - } - } - - .long-article-toggle-btn { - width: 36px; - height: 36px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.95); - border: none; - box-shadow: 0 2px 8px rgba(0,0,0,0.15); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - color: #666; - font-size: 18px; - font-weight: bold; - transition: all 0.3s; - - &.active { - background: #4285f4; - color: #fff; - } + width: 40px; + height: 40px; } - body.night { - .long-article-settings-btn { - background: rgba(45, 45, 45, 0.95); - color: #999; - - &:hover { - background: rgba(61, 61, 61, 0.95); - color: #fff; - } - } - - .long-article-toggle-btn { - background: rgba(45, 45, 45, 0.95); - color: #999; - - &.active { - background: #4285f4; - color: #fff; - } - } + .long-article-layout-panel { + right: 50px; } } diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss index 717a74d7..31f47280 100644 --- a/src/main/resources/scss/mobile-base.scss +++ b/src/main/resources/scss/mobile-base.scss @@ -5399,61 +5399,195 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de /* start long-article */ .long-article-content { - padding: 20px 15px; - font-size: 16px; - line-height: 1.8; + padding: 0; + color: #25332a; + font-size: var(--long-article-font-size, 16px); + line-height: 1.9; + overflow-wrap: anywhere; + + > p { + margin: 1.1em 0; + text-indent: 2em; + } + + > p:has(> img), + > p:has(> picture), + > p:has(> video), + > p:has(> iframe) { + text-indent: 0; + } + + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + margin: 1.65em 0 0.7em; + color: #1f2e24; + line-height: 1.45; + text-indent: 0; + } + + > ul, + > ol, + > blockquote, + > pre, + > table, + > figure { + margin-top: 1.25em; + margin-bottom: 1.25em; + text-indent: 0; + } + + blockquote { + padding: 12px 14px; + border-left: 4px solid #9bb4a0; + background: #f0f5ef; + color: #526259; + } + + img { + display: block; + max-width: 100%; + height: auto; + margin: 1.4em auto; + } + + table { + display: block; + max-width: 100%; + overflow-x: auto; + } + + pre { + border-radius: 7px; + } + + :not(pre) > code { + border-radius: 4px; + background: #edf2ec; + color: #35513d; + } } .long-article-meta { - text-align: right; - color: #888; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px 8px; + margin: 10px 0 0; + padding: 0; + color: #718078; font-size: 13px; - padding: 10px 0; - margin-bottom: 10px; + line-height: 1.55; + text-align: left; a { - color: #888; + color: #526c5a; text-decoration: none; &:hover { - color: #4285f4; + color: #2f6a43; } } .long-article-author { - margin-right: 15px; + color: #2f4937; + font-weight: 600; } } +.long-article-meta__separator { + color: #9ba79f; +} + body.long-article-page { + min-height: 100vh; width: 100%; margin: 0; padding: 0; overflow-x: hidden; box-sizing: border-box; + background: #c7d8ca; + color: #25332a; - .main, - .article-container, - .wrapper, - .article-body { - width: 100% !important; - max-width: 100% !important; - margin: 0 !important; - padding: 0 14px !important; - overflow-x: hidden !important; - box-sizing: border-box !important; + > .nav, + > .footer { + display: none; + } + + > .main { + box-sizing: border-box; + margin: 0; + padding: 14px 14px 30px; + background: #c7d8ca; + box-shadow: none; + } + + > .main > .article-actions { + display: none; + } + + .article-main { + overflow: hidden; + padding: 0; + border: 1px solid rgba(72, 101, 79, 0.12); + border-radius: 10px; + background: #fbfcf8; + box-shadow: 0 8px 24px rgba(48, 73, 55, 0.1); + } + + .article-main > .wrapper { + width: auto; + max-width: none; + margin: 0; + padding: 34px 20px 30px; + overflow-x: hidden; + box-sizing: border-box; } .article-title { - padding-right: 0; - padding-left: 0; + margin: 0; + padding: 0; box-sizing: border-box; + color: #1d2b21; + font-size: 26px; + font-weight: 650; + line-height: 1.35; + text-align: left; + + > a { + color: inherit; + } } .long-article-content { + width: 100%; max-width: 100%; - padding: 20px 0; + margin-top: 28px; + padding: 0; box-sizing: border-box; + color: #25332a; + font-size: var(--long-article-font-size, 16px); + line-height: 1.9; + + > p { + margin: 1.1em 0; + } + } + + #comments { + box-sizing: border-box; + margin: 20px 0 0; + padding: 20px 14px; + border: 1px solid rgba(72, 101, 79, 0.1); + border-radius: 10px; + background: #f7faf5; + } + + .side { + display: none; } } @@ -5700,31 +5834,57 @@ body.long-article-page { .long-article-settings { position: fixed; - right: 10px; - top: 50%; - transform: translateY(-50%); + right: 12px; + bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; + align-items: flex-end; z-index: 99; } +.long-article-settings__actions { + display: flex; + max-height: calc(100vh - 92px); + max-height: calc(100dvh - 92px); + flex-direction: column; + gap: 7px; + overflow-y: auto; + opacity: 0; + pointer-events: none; + scrollbar-width: none; + transform: translateY(10px); + transition: opacity 0.2s ease, transform 0.2s ease; + visibility: hidden; + + &::-webkit-scrollbar { + display: none; + } +} + +.long-article-settings.is-open .long-article-settings__actions { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + visibility: visible; +} + .long-article-settings-btn { - width: 44px; - height: 44px; - border-radius: 50%; - border: none; + width: 40px; + height: 40px; + border: 1px solid rgba(72, 101, 79, 0.15); + border-radius: 8px; background: rgba(255, 255, 255, 0.95); - box-shadow: 0 2px 8px rgba(0,0,0,0.15); + box-shadow: 0 4px 12px rgba(48, 73, 55, 0.15); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; - color: #666; + color: #52685a; font-size: 14px; - font-weight: bold; - transition: all 0.3s; + font-weight: 600; + transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; gap: 1px; position: relative; @@ -5736,8 +5896,8 @@ body.long-article-page { } span { - font-size: 14px; - font-weight: bold; + font-size: 13px; + font-weight: 600; } &.has-cnt { @@ -5749,76 +5909,103 @@ body.long-article-page { .count { font-size: 10px; line-height: 1; - font-weight: bold; + font-weight: 600; } } &.ft-red { color: #f44336; } - - &.hide { - opacity: 0; - pointer-events: none; - transform: translateX(60px); - } } .long-article-toggle-btn { - width: 44px; - height: 44px; - border-radius: 50%; + width: 40px; + height: 40px; + border-radius: 8px; background: rgba(255, 255, 255, 0.95); - border: none; - box-shadow: 0 2px 8px rgba(0,0,0,0.15); + border: 1px solid rgba(72, 101, 79, 0.15); + box-shadow: 0 4px 12px rgba(48, 73, 55, 0.15); cursor: pointer; display: flex; align-items: center; justify-content: center; - color: #666; + color: #52685a; font-size: 18px; - font-weight: bold; - transition: all 0.3s; + font-weight: 600; + transition: background 0.2s ease, color 0.2s ease; &.active { - background: #4285f4; + background: #3e7250; color: #fff; } } body.night { + &.long-article-page { + background: #26332b; + color: #d9e3db; + + > .main { + background: #26332b; + } + + .article-main { + border-color: rgba(204, 224, 209, 0.08); + background: #18231d; + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); + } + + .article-title, + .article-title > a { + color: #eef4ef; + } + + #comments { + border-color: rgba(204, 224, 209, 0.08); + background: #18231d; + } + } + .long-article-content { - background-color: #1a1a1a; - color: #e0e0e0; + color: #d9e3db; a { - color: #6bb3ff; + color: #8fc9a0; } blockquote { - border-color: #444; - color: #bbb; + border-color: #587663; + background: #223128; + color: #b8c7bc; } - code { - background-color: #2d2d2d; - color: #e0e0e0; + > h1, + > h2, + > h3, + > h4, + > h5, + > h6 { + color: #edf4ef; } pre { - background-color: #2d2d2d; + background-color: #111a15; + } + + :not(pre) > code { + background: #27362c; + color: #b9d6c1; } } .long-article-meta { - color: #888; - border-color: #333; + color: #93a299; a { - color: #888; + color: #a9c7b1; &:hover { - color: #6bb3ff; + color: #c6e5ce; } } } @@ -5877,17 +6064,18 @@ body.night { .long-article-settings-btn, .long-article-toggle-btn { - background: rgba(45, 45, 45, 0.95); - color: #999; + border-color: rgba(190, 214, 196, 0.12); + background: rgba(28, 41, 33, 0.96); + color: #a7b7ac; &:hover { - background: rgba(61, 61, 61, 0.95); - color: #fff; + background: #26382d; + color: #e3ece5; } } .long-article-toggle-btn.active { - background: #4285f4; + background: #3e7250; color: #fff; } } diff --git a/src/main/resources/skins/classic/mobile/article.ftl b/src/main/resources/skins/classic/mobile/article.ftl index c8e2f80d..4e53156f 100644 --- a/src/main/resources/skins/classic/mobile/article.ftl +++ b/src/main/resources/skins/classic/mobile/article.ftl @@ -109,6 +109,19 @@ ${article.articleTitleEmoj} + <#if 6 == article.articleType> +
+ + <#if article.articleAuthorNickName != "">${article.articleAuthorNickName}<#else>${article.articleAuthorName} + + ${article.timeAgo} + <#if longArticleColumn??> + · + ${longArticleColumn.columnTitle} + 第 ${article.longArticleChapterNo?c} 章 + +
+
<#if 6 != article.articleType && article.sysMetal != "[]"> <#list article.sysMetal?eval as metal> @@ -235,10 +248,6 @@ <#include "common/article-adjacent-nav.ftl"> <#if 6 == article.articleType> -
- ${article.articleAuthorName} - ${article.timeAgo} -
<#if article.isMyArticle && article.longArticleReadStat??>
长文阅读激励
@@ -488,89 +497,82 @@
<#if 6 == article.articleType> -
- - - - - <#if permissions["commonThankArticle"].permissionGrant> - <#if permissions["commonGoodArticle"].permissionGrant> - <#if permissions["commonBadArticle"].permissionGrant> - <#if isLoggedIn && isFollowing> - <#else> - <#if permissions["commonViewArticleHistory"].permissionGrant && article.articleRevisionCount > 1> - - <#if article.isMyArticle && 3 != article.articleType && permissions["commonUpdateArticle"].permissionGrant> - <#if article.isMyArticle && permissions["commonStickArticle"].permissionGrant> - <#if permissions["articleUpdateArticleBasic"].permissionGrant> - +
+ - <#include "footer.ftl"> <#if isLoggedIn && discussionViewable && article.articleCommentable && permissions["commonAddComment"].permissionGrant> @@ -616,6 +618,9 @@ + <#if 6 == article.articleType> + + <#include "footer.ftl"> @@ -854,6 +867,9 @@ +<#if 6 == article.articleType> + + diff --git a/src/main/resources/skins/classic/pc/article.ftl b/src/main/resources/skins/classic/pc/article.ftl index 565c6942..dd614b30 100644 --- a/src/main/resources/skins/classic/pc/article.ftl +++ b/src/main/resources/skins/classic/pc/article.ftl @@ -80,9 +80,12 @@ +<#assign hidePageChrome = (6 == article.articleType)>

"${article.articlePreviewContent}"

+<#if !hidePageChrome> <#include "header.ftl"> +
<#if showTopAd && 6 != article.articleType> @@ -658,6 +661,7 @@ class="ft-13">${article.thankedCnt}
+<#if !hidePageChrome>

@@ -752,6 +756,7 @@

+ <#if 6 == article.articleType>
diff --git a/src/main/resources/skins/classic/pc/footer.ftl b/src/main/resources/skins/classic/pc/footer.ftl index 0828cbe0..880b4589 100644 --- a/src/main/resources/skins/classic/pc/footer.ftl +++ b/src/main/resources/skins/classic/pc/footer.ftl @@ -18,6 +18,7 @@ along with this program. If not, see . --> +<#if !(hidePageChrome!false)>
@@ -111,6 +112,7 @@
+ From 92c25f90e76863d72b258536acc82989eee4bbb9 Mon Sep 17 00:00:00 2001 From: Yui Date: Sat, 18 Jul 2026 16:09:14 +0800 Subject: [PATCH 04/30] =?UTF-8?q?=E5=AF=B9=E9=BD=90=E9=95=BF=E6=96=87?= =?UTF-8?q?=E9=98=85=E8=AF=BB=E9=A1=B5=E9=B1=BC=E4=B9=8E=E9=85=8D=E8=89=B2?= =?UTF-8?q?=E5=B9=B6=E4=BF=AE=E5=A4=8D=E9=A1=B6=E9=83=A8=E7=95=99=E7=99=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/scss/index.scss | 85 ++++++++++++------------ src/main/resources/scss/mobile-base.scss | 56 ++++++++-------- 2 files changed, 68 insertions(+), 73 deletions(-) diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 70e08060..f6881602 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5208,7 +5208,8 @@ code .dec { .article.long-article-page { min-height: 100vh; padding-top: 0; - background: #c7d8ca; + overflow-x: hidden; + background: #c7dcc8; color: #25332a; > .nav, @@ -5221,11 +5222,11 @@ code .dec { box-sizing: border-box; width: min(var(--long-article-width, 800px), calc(100vw - 28px)); max-width: none; - margin: 36px auto 0; - border: 1px solid rgba(72, 101, 79, 0.12); - border-radius: 12px; - background: #fbfcf8; - box-shadow: 0 12px 36px rgba(48, 73, 55, 0.1); + margin: 0 auto; + border: 0; + border-radius: 0; + background: #dcebdd; + box-shadow: none; } .article-body { @@ -5236,7 +5237,7 @@ code .dec { box-sizing: border-box; width: 100%; max-width: none; - padding: 54px clamp(32px, 6vw, 72px) 46px; + padding: 80px clamp(32px, 6vw, 64px) 64px; } h1.article-title { @@ -5257,10 +5258,10 @@ code .dec { > .main { box-sizing: border-box; - margin-top: 36px; + margin-top: 0; padding: 38px 0 48px; - border-top: 1px solid rgba(72, 101, 79, 0.12); - background: #dce8de; + border-top: 0; + background: #c7dcc8; } #articleCommentsPanel { @@ -5269,9 +5270,9 @@ code .dec { max-width: none; margin: 0 auto; padding: 26px; - border: 1px solid rgba(72, 101, 79, 0.1); - border-radius: 12px; - background: #f8faf6; + border: 0; + border-radius: 0; + background: #dcebdd; } .article-footer { @@ -5555,9 +5556,9 @@ code .dec { align-items: center; justify-content: center; padding: 0; - border: 1px solid rgba(72, 101, 79, 0.15); + border: 0; border-radius: 8px; - background: rgba(248, 251, 247, 0.96); + background: #dcebdd; box-shadow: 0 4px 14px rgba(48, 73, 55, 0.12); color: #52685a; cursor: pointer; @@ -5613,7 +5614,7 @@ code .dec { padding: 14px; border: 1px solid rgba(72, 101, 79, 0.16); border-radius: 10px; - background: rgba(251, 253, 249, 0.98); + background: #ebfaeb; box-shadow: 0 12px 32px rgba(38, 61, 44, 0.18); &.is-open { @@ -5658,13 +5659,12 @@ code .dec { body.night { &.long-article-page { - background: #26332b; + background: #0a0a0a; color: #d9e3db; .article-container { - border-color: rgba(204, 224, 209, 0.08); - background: #18231d; - box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); + background: #111111; + box-shadow: none; } h1.article-title { @@ -5672,18 +5672,16 @@ body.night { } > .main { - border-color: rgba(204, 224, 209, 0.08); - background: #202d25; + background: #0a0a0a; } #articleCommentsPanel { - border-color: rgba(204, 224, 209, 0.08); - background: #18231d; + background: #111111; } } .long-article-content { - color: #d9e3db; + color: #989898; a { color: #8fc9a0; @@ -5701,7 +5699,7 @@ body.night { > h4, > h5, > h6 { - color: #edf4ef; + color: #989898; } pre { @@ -5790,37 +5788,36 @@ body.night { } .long-article-settings-btn { - border-color: rgba(190, 214, 196, 0.12); - background: rgba(28, 41, 33, 0.96); - color: #a7b7ac; + border: 0; + background: #191919; + color: #989898; &:hover { - border-color: rgba(190, 214, 196, 0.25); - background: #26382d; - color: #e3ece5; + background: #191919; + color: #989898; } } .long-article-layout-panel { - border-color: rgba(190, 214, 196, 0.12); - background: rgba(24, 35, 29, 0.98); + border: 0; + background: #1f1f1f; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); } .long-article-layout-panel__title { - color: #a7b7ac; + color: #989898; } .long-article-layout-panel__options button { - border-color: #34483a; - background: #223128; - color: #b2c2b7; + border-color: #3a3a3a; + background: #191919; + color: #989898; &:hover, &.is-active { - border-color: #6c9177; - background: #304637; - color: #e3ece5; + border-color: #666; + background: #292929; + color: #fff; } } } @@ -5828,8 +5825,8 @@ body.night { @media (max-width: 768px) { .article.long-article-page { .article-container { - margin-top: 14px; - border-radius: 9px; + margin-top: 0; + border-radius: 0; } .article-body > .wrapper { @@ -5847,7 +5844,7 @@ body.night { #articleCommentsPanel { padding: 18px; - border-radius: 9px; + border-radius: 0; } } diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss index 8935dc87..b344aac0 100644 --- a/src/main/resources/scss/mobile-base.scss +++ b/src/main/resources/scss/mobile-base.scss @@ -5509,7 +5509,7 @@ body.long-article-page { padding: 0; overflow-x: hidden; box-sizing: border-box; - background: #c7d8ca; + background: #c7dcc8; color: #25332a; > .nav, @@ -5521,8 +5521,8 @@ body.long-article-page { > .main { box-sizing: border-box; margin: 0; - padding: 14px 14px 30px; - background: #c7d8ca; + padding: 0 14px 30px; + background: #c7dcc8; box-shadow: none; } @@ -5533,10 +5533,10 @@ body.long-article-page { .article-main { overflow: hidden; padding: 0; - border: 1px solid rgba(72, 101, 79, 0.12); - border-radius: 10px; - background: #fbfcf8; - box-shadow: 0 8px 24px rgba(48, 73, 55, 0.1); + border: 0; + border-radius: 0; + background: #dcebdd; + box-shadow: none; } .article-main > .wrapper { @@ -5582,9 +5582,9 @@ body.long-article-page { box-sizing: border-box; margin: 20px 0 0; padding: 20px 14px; - border: 1px solid rgba(72, 101, 79, 0.1); - border-radius: 10px; - background: #f7faf5; + border: 0; + border-radius: 0; + background: #dcebdd; } .side { @@ -5873,9 +5873,9 @@ body.long-article-page { .long-article-settings-btn { width: 40px; height: 40px; - border: 1px solid rgba(72, 101, 79, 0.15); + border: 0; border-radius: 8px; - background: rgba(255, 255, 255, 0.95); + background: #dcebdd; box-shadow: 0 4px 12px rgba(48, 73, 55, 0.15); cursor: pointer; display: flex; @@ -5923,8 +5923,8 @@ body.long-article-page { width: 40px; height: 40px; border-radius: 8px; - background: rgba(255, 255, 255, 0.95); - border: 1px solid rgba(72, 101, 79, 0.15); + background: #dcebdd; + border: 0; box-shadow: 0 4px 12px rgba(48, 73, 55, 0.15); cursor: pointer; display: flex; @@ -5943,17 +5943,16 @@ body.long-article-page { body.night { &.long-article-page { - background: #26332b; + background: #0a0a0a; color: #d9e3db; > .main { - background: #26332b; + background: #0a0a0a; } .article-main { - border-color: rgba(204, 224, 209, 0.08); - background: #18231d; - box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); + background: #111111; + box-shadow: none; } .article-title, @@ -5962,13 +5961,12 @@ body.night { } #comments { - border-color: rgba(204, 224, 209, 0.08); - background: #18231d; + background: #111111; } } .long-article-content { - color: #d9e3db; + color: #989898; a { color: #8fc9a0; @@ -5986,7 +5984,7 @@ body.night { > h4, > h5, > h6 { - color: #edf4ef; + color: #989898; } pre { @@ -6065,18 +6063,18 @@ body.night { .long-article-settings-btn, .long-article-toggle-btn { - border-color: rgba(190, 214, 196, 0.12); - background: rgba(28, 41, 33, 0.96); - color: #a7b7ac; + border: 0; + background: #191919; + color: #989898; &:hover { - background: #26382d; - color: #e3ece5; + background: #191919; + color: #989898; } } .long-article-toggle-btn.active { - background: #3e7250; + background: #191919; color: #fff; } } From adcdb308545a50b9c30c721c2f74382c16c150c2 Mon Sep 17 00:00:00 2001 From: Yui Date: Sat, 18 Jul 2026 16:30:53 +0800 Subject: [PATCH 05/30] =?UTF-8?q?=E9=95=BF=E6=96=87=E8=AF=84=E8=AE=BA?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E4=BE=A7=E6=BB=91=E9=98=85=E8=AF=BB=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 2 +- src/main/resources/js/long-article.js | 86 ++++- src/main/resources/js/long-article.min.js | 2 +- src/main/resources/js/m-long-article.js | 84 ++++- src/main/resources/js/m-long-article.min.js | 2 +- src/main/resources/scss/index.scss | 341 +++++++++++++++++- src/main/resources/scss/mobile-base.scss | 286 ++++++++++++++- .../skins/classic/mobile/article.ftl | 9 +- .../resources/skins/classic/pc/article.ftl | 9 +- 9 files changed, 796 insertions(+), 25 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 06413f5f..4a7ccc91 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -103,7 +103,7 @@ - 首页两列对齐约束：`getIndexRecentArticles` 的第一页会插入全部置顶且不截断；第二页起需按第一页“置顶占位数”补偿 `fetchSize` 与分页偏移，并基于已排除置顶 ID 的普通文章序列取数，保证两列等高、不重复、不丢中间文章。 - 首页右侧排行补偿（无前端延迟）：由 `IndexProcessor#loadIndexData` 按两列最新文章的最大行数计算 `rankCompensateRows`，先换算“右栏总补偿行数”再分摊到 `checkinVisibleCount/onlineVisibleCount`，Freemarker 直接按该数量渲染，不再依赖 JS 运行时增删行。 - 专栏封面链路：封面字段是 `long_article_column.columnCoverURL`；默认封面在 `LongArticleColumnQueryService` 填充；作者管理页为 `/column/manage`，编辑长篇页的弹窗脚本是 `long-article-cover-dialog.js`，新建长篇封面随 `/article` 请求的 `columnCoverURL` 写入；封面保存接口为 `POST /api/columns/{columnId}/cover`，处理器是 `LongArticleColumnProcessor`。 -- 长文阅读页以 `articleType=6` 区分，PC/移动模板均为 `skins/classic/*/article.ftl`，样式在 `index.scss`/`mobile-base.scss`，交互在 `long-article.js`/`m-long-article.js`；模板通过 `hidePageChrome` 不渲染顶部与底部视觉内容，但 footer 的公共脚本仍需加载；桌面宽度和两端字号统一保存在 `localStorage.longArticleSettings`，宽度仅在 PC 生效。 +- 长文阅读页以 `articleType=6` 区分，PC/移动模板均为 `skins/classic/*/article.ftl`，样式在 `index.scss`/`mobile-base.scss`，交互在 `long-article.js`/`m-long-article.js`；模板通过 `hidePageChrome` 不渲染顶部与底部视觉内容，但 footer 的公共脚本仍需加载；桌面宽度和两端字号统一保存在 `localStorage.longArticleSettings`，宽度仅在 PC 生效；评论按钮控制右侧评论抽屉，现有评论列表、筛选、分页和编辑器均在抽屉链路内复用。 - 管理员文章页编辑长文专栏时，`admin/article.ftl` 会随文章表单提交 `columnCoverURL`，后端在 `ArticleMgmtService` 的文章事务内复用 `ColumnCoverMgmtService` 校验并更新或清空专栏封面。 - 路由总入口：`Router#requestMapping` + 各 Processor `register()`；新增路由先决定使用 `loginCheck` / `apiCheck` / `permission` / `anonymousViewCheck` 哪条链路。 - Latke 路由存在静态段被相邻动态段截获的风险（如 `/article/{id}/revisions/list` 可能进入 `/article/{id}/revisions/{revisionId}`）；新增相邻路由时需避免路径歧义，或在处理方法中显式识别保留字。 diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index d607760d..7717a6a0 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -28,6 +28,10 @@ window.LongArticle = { this.loadSettings(); this.bindEvents(); this.applySettings(); + if (this.shouldOpenCommentsFromLocation()) { + this.openComments(); + this.focusLocationComment(); + } }, loadSettings: function () { @@ -118,7 +122,7 @@ window.LongArticle = { if (action === 'top') { self.scrollToTop(); } else if (action === 'comments') { - self.scrollToComments(); + self.toggleComments(); } else if (action === 'font-decrease') { self.setFontSize(-2); } else if (action === 'font-increase') { @@ -136,6 +140,15 @@ window.LongArticle = { if (panel && panel.classList.contains('is-open') && !panel.contains(event.target) && !layoutButton.contains(event.target)) { self.closeLayoutPanel(); } + if (event.target.closest && event.target.closest('[data-long-article-comments-close]')) { + self.closeComments(); + } + }); + + document.addEventListener('keydown', function (event) { + if (event.key === 'Escape' && self.isCommentsOpen()) { + self.closeComments(); + } }); }, @@ -197,10 +210,73 @@ window.LongArticle = { window.scrollTo({top: 0, behavior: 'smooth'}); }, - scrollToComments: function () { - var comments = document.getElementById('comments'); - if (comments) { - comments.scrollIntoView({behavior: 'smooth'}); + getCommentsPanel: function () { + return document.getElementById('articleCommentsPanel'); + }, + + isCommentsOpen: function () { + return document.body.classList.contains('long-article-comments-open'); + }, + + toggleComments: function () { + if (this.isCommentsOpen()) { + this.closeComments(); + } else { + this.openComments(); + } + }, + + openComments: function () { + var panel = this.getCommentsPanel(); + var button = document.querySelector('[data-long-article-action="comments"]'); + if (!panel) { + return; + } + this.closeLayoutPanel(); + document.body.classList.add('long-article-comments-open'); + panel.setAttribute('aria-hidden', 'false'); + if (button) { + button.classList.add('is-active'); + button.setAttribute('aria-expanded', 'true'); + } + }, + + closeComments: function () { + var panel = this.getCommentsPanel(); + var button = document.querySelector('[data-long-article-action="comments"]'); + var editorPanel = document.querySelector('.editor-panel'); + if (editorPanel && window.getComputedStyle(editorPanel).display !== 'none' && window.getComputedStyle(editorPanel).bottom === '0px' && window.Comment && typeof window.Comment._toggleReply === 'function') { + window.Comment._toggleReply(); + } + document.body.classList.remove('long-article-comments-open'); + if (panel) { + panel.setAttribute('aria-hidden', 'true'); + } + if (button) { + button.classList.remove('is-active'); + button.setAttribute('aria-expanded', 'false'); + } + }, + + shouldOpenCommentsFromLocation: function () { + var panel = this.getCommentsPanel(); + var hash = window.location.hash.replace(/^#/, ''); + var target = hash ? document.getElementById(hash) : null; + if (panel && target && panel.contains(target)) { + return true; } + return /(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search); + }, + + focusLocationComment: function () { + var self = this; + window.setTimeout(function () { + var hash = window.location.hash.replace(/^#/, ''); + var target = hash ? document.getElementById(hash) : null; + var panel = self.getCommentsPanel(); + if (panel && target && panel.contains(target)) { + target.scrollIntoView({block: 'center'}); + } + }, 0); } }; diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js index f7a49618..fa7296c2 100644 --- a/src/main/resources/js/long-article.min.js +++ b/src/main/resources/js/long-article.min.js @@ -1 +1 @@ -window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings())},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var i=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(i)||(e.desktopFontSize=this.normalizeFontSize(i,18,32,18),e.mobileFontSize=this.normalizeFontSize(i,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,i,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(i,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,i="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",i),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(i){var o=t.findActionElement(i.target,e);if(o){var n=o.getAttribute("data-long-article-action");"top"===n?t.scrollToTop():"comments"===n?t.scrollToComments():"font-decrease"===n?t.setFontSize(-2):"font-increase"===n?t.setFontSize(2):"layout"===n?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(i){var o=document.getElementById("longArticleLayoutPanel"),n=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(i.target)&&!n.contains(i.target)&&t.closeLayoutPanel()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var i=!t.classList.contains("is-open");t.classList.toggle("is-open",i),t.setAttribute("aria-hidden",i?"false":"true"),e.setAttribute("aria-expanded",i?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},scrollToComments:function(){var t=document.getElementById("comments");t&&t.scrollIntoView({behavior:"smooth"})}}; \ No newline at end of file +window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&"0px"===window.getComputedStyle(n).bottom&&window.Comment&&"function"==typeof window.Comment._toggleReply&&window.Comment._toggleReply(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/js/m-long-article.js b/src/main/resources/js/m-long-article.js index fa41fea0..7b6e52a8 100644 --- a/src/main/resources/js/m-long-article.js +++ b/src/main/resources/js/m-long-article.js @@ -27,6 +27,10 @@ window.MLongArticle = { this.loadSettings(); this.bindEvents(); this.applySettings(); + if (this.shouldOpenCommentsFromLocation()) { + this.openComments(); + this.focusLocationComment(); + } }, loadSettings: function () { @@ -109,21 +113,93 @@ window.MLongArticle = { } else if (action === 'top') { window.scrollTo({top: 0, behavior: 'smooth'}); } else if (action === 'comments') { - var comments = document.getElementById('comments'); - if (comments) { - comments.scrollIntoView({behavior: 'smooth'}); - } + self.toggleComments(); } else if (action === 'font-decrease') { self.setFontSize(-2); } else if (action === 'font-increase') { self.setFontSize(2); } }); + + document.addEventListener('click', function (event) { + if (event.target.closest && event.target.closest('[data-long-article-comments-close]')) { + self.closeComments(); + } + }); }, setFontSize: function (delta) { this.settings.mobileFontSize = this.normalizeFontSize(this.settings.mobileFontSize + delta, 12, 24, 16); this.saveSettings(); this.applySettings(); + }, + + getCommentsPanel: function () { + return document.getElementById('comments'); + }, + + isCommentsOpen: function () { + return document.body.classList.contains('long-article-comments-open'); + }, + + toggleComments: function () { + if (this.isCommentsOpen()) { + this.closeComments(); + } else { + this.openComments(); + } + }, + + openComments: function () { + var panel = this.getCommentsPanel(); + var button = document.querySelector('[data-long-article-action="comments"]'); + if (!panel) { + return; + } + document.body.classList.add('long-article-comments-open'); + panel.setAttribute('aria-hidden', 'false'); + if (button) { + button.classList.add('is-active'); + button.setAttribute('aria-expanded', 'true'); + } + }, + + closeComments: function () { + var panel = this.getCommentsPanel(); + var button = document.querySelector('[data-long-article-action="comments"]'); + var editorPanel = document.querySelector('.editor-panel'); + if (editorPanel && editorPanel.classList.contains('editor-panel--open') && window.Comment && typeof window.Comment._toggleReply === 'function') { + window.Comment._toggleReply(); + } + document.body.classList.remove('long-article-comments-open'); + if (panel) { + panel.setAttribute('aria-hidden', 'true'); + } + if (button) { + button.classList.remove('is-active'); + button.setAttribute('aria-expanded', 'false'); + } + }, + + shouldOpenCommentsFromLocation: function () { + var panel = this.getCommentsPanel(); + var hash = window.location.hash.replace(/^#/, ''); + var target = hash ? document.getElementById(hash) : null; + if (panel && target && panel.contains(target)) { + return true; + } + return /(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search); + }, + + focusLocationComment: function () { + var self = this; + window.setTimeout(function () { + var hash = window.location.hash.replace(/^#/, ''); + var target = hash ? document.getElementById(hash) : null; + var panel = self.getCommentsPanel(); + if (panel && target && panel.contains(target)) { + target.scrollIntoView({block: 'center'}); + } + }, 0); } }; diff --git a/src/main/resources/js/m-long-article.min.js b/src/main/resources/js/m-long-article.min.js index 3246c6fe..2613b324 100644 --- a/src/main/resources/js/m-long-article.min.js +++ b/src/main/resources/js/m-long-article.min.js @@ -1 +1 @@ -window.MLongArticle={storageKey:"longArticleSettings",settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings())},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=["auto","600","800","1000","1200"].indexOf(String(t.width||"800"))>=0?String(t.width||"800"):"800",e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize||t.fontSize,16,24,16));try{var i=parseInt(window.localStorage.getItem("longArticleFontSize"),10),o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))?t.mobileFontSize||isNaN(i)||(e.mobileFontSize=this.normalizeFontSize(i,16,24,16)):e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeFontSize:function(t,e,i,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(i,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){document.documentElement.style.setProperty("--long-article-font-size",this.settings.mobileFontSize+"px")},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&e.addEventListener("click",function(i){for(var o=i.target;o&&o!==e&&!o.hasAttribute("data-long-article-action");)o=o.parentNode;if(o&&o!==e){var n=o.getAttribute("data-long-article-action");if("toggle"===n){var s=!e.classList.contains("is-open");e.classList.toggle("is-open",s),o.classList.toggle("active",s),o.setAttribute("aria-expanded",s?"true":"false")}else if("top"===n)window.scrollTo({top:0,behavior:"smooth"});else if("comments"===n){var a=document.getElementById("comments");a&&a.scrollIntoView({behavior:"smooth"})}else"font-decrease"===n?t.setFontSize(-2):"font-increase"===n&&t.setFontSize(2)}})},setFontSize:function(t){this.settings.mobileFontSize=this.normalizeFontSize(this.settings.mobileFontSize+t,12,24,16),this.saveSettings(),this.applySettings()}}; \ No newline at end of file +window.MLongArticle={storageKey:"longArticleSettings",settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=["auto","600","800","1000","1200"].indexOf(String(t.width||"800"))>=0?String(t.width||"800"):"800",e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize||t.fontSize,16,24,16));try{var o=parseInt(window.localStorage.getItem("longArticleFontSize"),10),n=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!n||isNaN(parseInt(n.fontSize,10))?t.mobileFontSize||isNaN(o)||(e.mobileFontSize=this.normalizeFontSize(o,16,24,16)):e.mobileFontSize=this.normalizeFontSize(parseInt(n.fontSize,10),16,24,16),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeFontSize:function(t,e,o,n){return t=parseInt(t,10),isNaN(t)?n:Math.max(e,Math.min(o,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){document.documentElement.style.setProperty("--long-article-font-size",this.settings.mobileFontSize+"px")},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(o){for(var n=o.target;n&&n!==e&&!n.hasAttribute("data-long-article-action");)n=n.parentNode;if(n&&n!==e){var i=n.getAttribute("data-long-article-action");if("toggle"===i){var s=!e.classList.contains("is-open");e.classList.toggle("is-open",s),n.classList.toggle("active",s),n.setAttribute("aria-expanded",s?"true":"false")}else"top"===i?window.scrollTo({top:0,behavior:"smooth"}):"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i&&t.setFontSize(2)}}),document.addEventListener("click",function(e){e.target.closest&&e.target.closest("[data-long-article-comments-close]")&&t.closeComments()}))},setFontSize:function(t){this.settings.mobileFontSize=this.normalizeFontSize(this.settings.mobileFontSize+t,12,24,16),this.saveSettings(),this.applySettings()},getCommentsPanel:function(){return document.getElementById("comments")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),o=document.querySelector(".editor-panel");o&&o.classList.contains("editor-panel--open")&&window.Comment&&"function"==typeof window.Comment._toggleReply&&window.Comment._toggleReply(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),o=e?document.getElementById(e):null;return!!(t&&o&&t.contains(o))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),o=e?document.getElementById(e):null,n=t.getCommentsPanel();n&&o&&n.contains(o)&&o.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index f6881602..7ab18e4b 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5206,6 +5206,7 @@ code .dec { } .article.long-article-page { + --long-article-comments-width: min(430px, calc(100vw - 72px)); min-height: 100vh; padding-top: 0; overflow-x: hidden; @@ -5218,6 +5219,13 @@ code .dec { display: none !important; } + #share, + .share, + .article-nav-scope, + .article-tail { + display: none !important; + } + .article-container { box-sizing: border-box; width: min(var(--long-article-width, 800px), calc(100vw - 28px)); @@ -5258,21 +5266,272 @@ code .dec { > .main { box-sizing: border-box; - margin-top: 0; - padding: 38px 0 48px; + min-height: 0; + height: 0; + margin: 0; + padding: 0; + overflow: visible; border-top: 0; - background: #c7dcc8; + background: transparent; } #articleCommentsPanel { + position: fixed; + top: 0; + right: 0; + bottom: 0; + z-index: 115; + display: flex; + flex-direction: column; box-sizing: border-box; - width: min(var(--long-article-width, 800px), calc(100vw - 28px)); + width: var(--long-article-comments-width); + height: 100vh; + height: 100dvh; max-width: none; - margin: 0 auto; - padding: 26px; + margin: 0; + padding: 0 20px 86px; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; border: 0; + border-left: 1px solid rgba(61, 91, 68, 0.14); border-radius: 0; background: #dcebdd; + box-shadow: -16px 0 38px rgba(40, 66, 47, 0.16); + transform: translateX(100%); + transition: transform 0.28s ease, visibility 0s linear 0.28s; + visibility: hidden; + + > .module { + flex: 0 0 auto; + margin: 14px 0 0; + border: 0; + background: transparent; + box-shadow: none; + } + + > .pagination { + flex: 0 0 auto; + margin: 18px auto 0; + float: none; + } + } + + &.long-article-comments-open { + #articleCommentsPanel { + transform: translateX(0); + transition-delay: 0s; + visibility: visible; + } + + .long-article-settings { + right: calc(var(--long-article-comments-width) + 14px); + left: auto; + z-index: 121; + } + } + + #comments { + order: -1; + margin: 0; + border: 0; + background: transparent; + box-shadow: none; + + .comments-header { + position: sticky; + top: 0; + z-index: 4; + margin: 0 -20px 6px; + padding: 22px 20px 16px; + border-bottom: 1px solid rgba(65, 94, 71, 0.14); + background: rgba(220, 235, 221, 0.97); + backdrop-filter: blur(8px); + } + + .comments-header__main > .fn-right { + display: none; + } + + .article-cmt-cnt { + color: #1f2e24; + font-size: 22px; + font-weight: 650; + } + + .long-article-comments-count { + margin-left: 4px; + color: #77857c; + font-size: 13px; + font-weight: 400; + } + + .comment-filterbar { + margin-top: 12px; + } + + .comment-segment { + border-color: rgba(65, 94, 71, 0.15); + background: #edf5ed; + } + + .comments-header a.comment-segment__item { + color: #68776e; + } + + .comments-header a.comment-segment__item:hover { + color: #2f4937; + background: rgba(255, 255, 255, 0.42); + } + + .comments-header a.comment-segment__item--active, + .comments-header a.comment-segment__item--active:hover { + background: #5f7e68; + color: #fff; + } + + .list { + background: transparent; + } + + .list > ul { + margin: 0; + padding: 0 0 12px; + } + + .list > ul > li, + .list > ul > li.cmt-perfect, + .list > ul > li.cmt-perfect:hover { + margin: 0; + padding: 18px 0; + border-bottom: 1px solid rgba(65, 94, 71, 0.12); + background: transparent; + } + + .list > ul > li > .fn-flex { + align-items: flex-start; + gap: 2px; + } + + .list > ul > li .avatar { + width: 34px; + height: 34px; + border-radius: 50%; + } + + .comment-info { + min-height: 22px; + color: #6f7d74; + line-height: 1.55; + } + + .comment-info a, + .comment-thread__meta a { + color: #405647; + font-weight: 600; + } + + .comment { + margin: 7px 0 0; + color: #243128; + font-size: 15px; + line-height: 1.75; + } + + .comment-action { + margin-top: 8px; + } + + .comment-thread { + margin: 12px 0 4px; + padding: 12px; + border: 0; + border-radius: 8px; + background: #edf5ed; + } + + .comment-thread__reply--nested::before, + .comment-thread__reply + .comment-thread__reply { + border-color: rgba(65, 94, 71, 0.12); + } + + .comment-thread__content { + color: #34463a; + } + + .comment__reply { + position: fixed; + right: 0; + bottom: 0; + z-index: 5; + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 14px 20px; + border-top: 1px solid rgba(65, 94, 71, 0.14); + background: rgba(220, 235, 221, 0.97); + box-shadow: 0 -8px 22px rgba(40, 66, 47, 0.08); + backdrop-filter: blur(8px); + + .reply__text { + min-height: 38px; + box-sizing: border-box; + border-color: rgba(65, 94, 71, 0.14); + border-radius: 8px; + background: #edf5ed; + color: #65746a; + line-height: 36px; + } + } + } + + .long-article-comments-close { + display: inline-flex; + flex: 0 0 34px; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + margin-left: auto; + padding: 0; + border: 0; + border-radius: 50%; + background: rgba(95, 126, 104, 0.12); + box-shadow: none; + color: #617068; + + &:hover { + background: rgba(95, 126, 104, 0.2); + box-shadow: none; + color: #2f4937; + } + + svg { + width: 18px; + height: 18px; + } + } + + .editor-panel { + right: 0; + left: auto; + width: var(--long-article-comments-width); + max-width: var(--long-article-comments-width); + + .editor-bg { + display: none; + } + + .wrapper { + right: 0; + left: auto; + width: 100%; + max-width: 100%; + padding: 16px 20px 20px; + border-top: 1px solid rgba(65, 94, 71, 0.16); + background: #dcebdd; + box-shadow: 0 -12px 30px rgba(40, 66, 47, 0.16); + } } .article-footer { @@ -5574,6 +5833,11 @@ code .dec { transform: translateX(2px); } + &.is-active { + background: #3e7250; + color: #fff; + } + svg { width: 20px; height: 20px; @@ -5677,6 +5941,67 @@ body.night { #articleCommentsPanel { background: #111111; + border-left-color: rgba(255, 255, 255, 0.08); + box-shadow: -16px 0 38px rgba(0, 0, 0, 0.34); + } + + #comments { + .comments-header, + .comment__reply { + border-color: rgba(255, 255, 255, 0.08); + background: rgba(17, 17, 17, 0.97); + } + + .article-cmt-cnt { + color: #eef4ef; + } + + .long-article-comments-count, + .comment-info { + color: #858f88; + } + + .comment-segment, + .comment-thread, + .comment__reply .reply__text { + border-color: rgba(255, 255, 255, 0.08); + background: #191919; + } + + .comments-header a.comment-segment__item, + .comment-info a, + .comment-thread__meta a { + color: #aab4ad; + } + + .comments-header a.comment-segment__item--active, + .comments-header a.comment-segment__item--active:hover { + background: #465c4d; + color: #fff; + } + + .list > ul > li, + .list > ul > li.cmt-perfect, + .list > ul > li.cmt-perfect:hover { + border-color: rgba(255, 255, 255, 0.08); + background: transparent; + } + + .comment, + .comment-thread__content { + color: #b9c2bc; + } + } + + .long-article-comments-close { + background: #191919; + color: #989898; + } + + .editor-panel .wrapper { + border-color: rgba(255, 255, 255, 0.08); + background: #191919; + box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.34); } } @@ -5824,6 +6149,8 @@ body.night { @media (max-width: 768px) { .article.long-article-page { + --long-article-comments-width: calc(100vw - 20px); + .article-container { margin-top: 0; border-radius: 0; @@ -5843,7 +6170,7 @@ body.night { } #articleCommentsPanel { - padding: 18px; + padding: 0 18px 82px; border-radius: 0; } } diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss index b344aac0..2679a564 100644 --- a/src/main/resources/scss/mobile-base.scss +++ b/src/main/resources/scss/mobile-base.scss @@ -5503,6 +5503,7 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de } body.long-article-page { + --long-article-comments-width: min(430px, 100vw); min-height: 100vh; width: 100%; margin: 0; @@ -5518,6 +5519,13 @@ body.long-article-page { display: none !important; } + #share, + .share, + .article-nav-scope, + .article-tail { + display: none !important; + } + > .main { box-sizing: border-box; margin: 0; @@ -5579,12 +5587,222 @@ body.long-article-page { } #comments { + position: fixed; + top: 0; + right: 0; + bottom: 0; + z-index: 115; box-sizing: border-box; - margin: 20px 0 0; - padding: 20px 14px; + width: var(--long-article-comments-width); + height: 100vh; + height: 100dvh; + margin: 0; + padding: 0 14px calc(78px + env(safe-area-inset-bottom)); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; border: 0; + border-left: 1px solid rgba(61, 91, 68, 0.14); border-radius: 0; background: #dcebdd; + box-shadow: -12px 0 30px rgba(40, 66, 47, 0.16); + transform: translateX(100%); + transition: transform 0.28s ease, visibility 0s linear 0.28s; + visibility: hidden; + + .list.comments { + border: 0; + background: transparent; + box-shadow: none; + } + + .comments-header { + position: sticky; + top: 0; + z-index: 4; + margin: 0 -14px 6px; + padding: 18px 14px 14px; + border-bottom: 1px solid rgba(65, 94, 71, 0.14); + background: rgba(220, 235, 221, 0.97); + backdrop-filter: blur(8px); + } + + .comments-header__main > .fn-right { + display: none; + } + + .article-cmt-cnt { + color: #1f2e24; + font-size: 20px; + font-weight: 650; + } + + .long-article-comments-count { + margin-left: 4px; + color: #77857c; + font-size: 12px; + font-weight: 400; + } + + .comment-filterbar { + margin-top: 10px; + } + + .comment-segment { + border-color: rgba(65, 94, 71, 0.15); + background: #edf5ed; + } + + .comments-header a.comment-segment__item { + color: #68776e; + } + + .comments-header a.comment-segment__item--active, + .comments-header a.comment-segment__item--active:hover { + background: #5f7e68; + color: #fff; + } + + .list.comments > ul { + margin: 0; + padding: 0 0 10px; + } + + .list.comments > ul > li, + .list.comments > ul > li.cmt-perfect, + .list.comments > ul > li.cmt-perfect:hover { + margin: 0; + padding: 16px 0; + border-bottom: 1px solid rgba(65, 94, 71, 0.12); + background: transparent; + } + + .list.comments > ul > li .avatar { + width: 32px; + height: 32px; + border-radius: 50%; + } + + .comment-info { + color: #6f7d74; + line-height: 1.5; + } + + .comment-info a, + .comment-thread__meta a { + color: #405647; + font-weight: 600; + } + + .comment { + margin-top: 6px; + color: #243128; + font-size: 15px; + line-height: 1.7; + } + + .comment-thread { + margin: 10px 0 4px; + padding: 10px; + border: 0; + border-radius: 8px; + background: #edf5ed; + } + + .comment-thread__content { + color: #34463a; + } + + .comment__reply { + position: fixed; + right: 0; + bottom: 0; + z-index: 5; + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); + border-top: 1px solid rgba(65, 94, 71, 0.14); + background: rgba(220, 235, 221, 0.97); + box-shadow: 0 -8px 22px rgba(40, 66, 47, 0.08); + backdrop-filter: blur(8px); + + .reply__text { + min-height: 38px; + border-color: rgba(65, 94, 71, 0.14); + border-radius: 8px; + background: #edf5ed; + color: #65746a; + line-height: 36px; + } + } + } + + &.long-article-comments-open #comments { + transform: translateX(0); + transition-delay: 0s; + visibility: visible; + } + + &.long-article-comments-open { + .long-article-settings { + z-index: 121; + } + + .long-article-settings__actions { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + visibility: visible; + } + + .long-article-settings__actions > :not([data-long-article-action="comments"]), + .long-article-toggle-btn { + display: none; + } + } + + .long-article-comments-close { + display: inline-flex; + flex: 0 0 32px; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + margin-left: auto; + padding: 0; + border: 0; + border-radius: 50%; + background: rgba(95, 126, 104, 0.12); + box-shadow: none; + color: #617068; + + svg { + width: 17px; + height: 17px; + } + } + + .editor-panel { + right: 0; + left: auto; + width: var(--long-article-comments-width); + max-width: var(--long-article-comments-width); + + .editor-bg { + display: none; + } + + .wrapper { + right: 0; + left: auto; + width: 100%; + max-width: 100%; + border-radius: 10px 0 0; + border-top: 1px solid rgba(65, 94, 71, 0.16); + background: #dcebdd; + box-shadow: 0 -12px 30px rgba(40, 66, 47, 0.16); + } } .side { @@ -5917,6 +6135,11 @@ body.long-article-page { &.ft-red { color: #f44336; } + + &.is-active { + background: #3e7250; + color: #fff; + } } .long-article-toggle-btn { @@ -5962,6 +6185,65 @@ body.night { #comments { background: #111111; + border-left-color: rgba(255, 255, 255, 0.08); + box-shadow: -12px 0 30px rgba(0, 0, 0, 0.34); + + .comments-header, + .comment__reply { + border-color: rgba(255, 255, 255, 0.08); + background: rgba(17, 17, 17, 0.97); + } + + .article-cmt-cnt { + color: #eef4ef; + } + + .long-article-comments-count, + .comment-info { + color: #858f88; + } + + .comment-segment, + .comment-thread, + .comment__reply .reply__text { + border-color: rgba(255, 255, 255, 0.08); + background: #191919; + } + + .comments-header a.comment-segment__item, + .comment-info a, + .comment-thread__meta a { + color: #aab4ad; + } + + .comments-header a.comment-segment__item--active, + .comments-header a.comment-segment__item--active:hover { + background: #465c4d; + color: #fff; + } + + .list.comments > ul > li, + .list.comments > ul > li.cmt-perfect, + .list.comments > ul > li.cmt-perfect:hover { + border-color: rgba(255, 255, 255, 0.08); + background: transparent; + } + + .comment, + .comment-thread__content { + color: #b9c2bc; + } + } + + .long-article-comments-close { + background: #191919; + color: #989898; + } + + .editor-panel .wrapper { + border-color: rgba(255, 255, 255, 0.08); + background: #191919; + box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.34); } } diff --git a/src/main/resources/skins/classic/mobile/article.ftl b/src/main/resources/skins/classic/mobile/article.ftl index fae445b0..ea423cd0 100644 --- a/src/main/resources/skins/classic/mobile/article.ftl +++ b/src/main/resources/skins/classic/mobile/article.ftl @@ -379,10 +379,15 @@
- ${commentDisplayCount!article.articleCommentCount} ${cmtLabel} + <#if 6 == article.articleType>评论 ${commentDisplayCount!article.articleCommentCount} 条<#else>${commentDisplayCount!article.articleCommentCount} ${cmtLabel} + <#if 6 == article.articleType> + +
<#if article.articleCommentCount != 0>
@@ -507,7 +512,7 @@ - +
<#if article.articleCommentCount != 0>
@@ -765,7 +770,7 @@ - "},renderThreadPagination:function(e,t,n){if(e.find(".comment-thread__pager").remove(),n&&!(parseInt(n.paginationPageCount||0)<=1)){var i=parseInt(n.paginationCurrentPageNum||1),o=parseInt(n.paginationPageCount||1),r=['
'];i>1&&r.push(Comment.renderThreadPageButton(t,i-1,"上一页")),r.push('',i,"/",o,""),i"),e.append(r.join(""))}},getCommentQueryExtra:function(){return Label.commentQueryExtra||""},normalizeReactionSummary:function(e){if(Array.isArray(e))return e;if("string"!=typeof e||""===e)return[];try{var t=JSON.parse(e);return Array.isArray(t)?t:[]}catch(e){return[]}},getReactionMap:function(e){e=Comment.normalizeReactionSummary(e);for(var t={},n=0;n/g,">")},getReactionUserDetails:function(e){return e&&Array.isArray(e.userDetails)?e.userDetails:[]},renderReactionTip:function(e){var t=Comment.getReactionUserDetails(e);if(0===t.length)return"";for(var n=[],i=0;i'),n.push('',Comment.escapeReactionHtml(s),''),n.push("")}}return 0===n.length?"":''+n.join("")+""},renderReactionSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r'),o.push('"),""!==m&&o.push(m,"")}}return o.join("")},renderReactionPanel:function(e,t){for(var n=['
'],i=0;i"),n.push('',o.emoji,""),n.push("")}return n.push("
"),n.join("")},renderReactionSummaryWidget:function(e,t,n){var i=Comment.renderReactionSummaryItems(e,t,n),o=['
'];return o.push('
'),o.push('
',i,"
"),o.join("")},renderReactionTriggerWidget:function(e,t,n){var i=n?" is-open":"",o=['
'];return o.push('"),o.push(Comment.renderReactionPanel(e,t)),o.push("
"),o.join("")},renderReactionBar:function(e,t,n,i,o){if("summary"===o)return Comment.renderReactionSummaryWidget(e,t,n);if("trigger"===o)return Comment.renderReactionTriggerWidget(e,n,i);var r=i?" is-open":"",a=Comment.renderReactionSummaryItems(e,t,n),s=['
'];return s.push('
'),s.push('
',a,"
"),s.push('
"),s.push(Comment.renderReactionPanel(e,n)),s.push("
"),s.join("")},getReactionWidgets:function(e){return $('.comment-reaction[data-target-id="'+e+'"]')},getInteractiveReactionWidgets:function(e){return $('.comment-reaction--combined[data-target-id="'+e+'"], .comment-reaction--trigger[data-target-id="'+e+'"]')},mountReactionTrigger:function(e,t,n,i){if(0!==e.length){var o=Comment.renderReactionBar(t,[],n,i,"trigger"),r=e.find('.comment-reaction--trigger[data-target-id="'+t+'"]');r.length>0?r.replaceWith(o):e.prepend(o)}},collectReactionShells:function(e){var t=e?$(e):$(document);return t.hasClass("comment-reaction-shell")?t.add(t.find(".comment-reaction-shell")):t.find(".comment-reaction-shell")},initReactionWidgets:function(e){Comment.collectReactionShells(e).each(function(){var e=$(this),t=e.attr("data-target-id"),n=e.attr("data-summary"),i=e.attr("data-current-user-reaction")||"",o=e.closest(".comment-action__bar").find(".action-btns").first(),r=e.closest(".comment-action__left").length>0&&o.length>0,a=Comment.renderReactionBar(t,n,i,!1,r?"summary":"combined");e.replaceWith(a),r&&Comment.mountReactionTrigger(o,t,i,!1)})},closeReactionPanels:function(e){var t=e?$(e):$(document),n=".comment-reaction--combined, .comment-reaction--trigger";(t.is(n)?t.add(t.find(n)):t.find(n)).removeClass("is-open")},toggleReactionPanel:function(e){var t=$(e).closest(".comment-reaction"),n=t.attr("data-target-id"),i=!t.hasClass("is-open");Comment.closeReactionPanels(),i&&Comment.getInteractiveReactionWidgets(n).addClass("is-open")},bindReactionPanels:function(){$(document).off("click.commentReaction").on("click.commentReaction",function(e){0===$(e.target).closest(".comment-reaction").length&&Comment.closeReactionPanels()})},updateReactionBars:function(e,t,n,i){var o=Comment.getReactionWidgets(e),r="boolean"==typeof i?i:Comment.getInteractiveReactionWidgets(e).first().hasClass("is-open");o.each(function(){var i=$(this),o="combined";i.hasClass("comment-reaction--summary")?o="summary":i.hasClass("comment-reaction--trigger")&&(o="trigger"),i.replaceWith(Comment.renderReactionBar(e,t,n,r,o))})},updateReactionFromChannel:function(e){var t=e.targetId||e.commentId;if(t){var n=Comment.getReactionWidgets(t);if(0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";Comment.updateReactionBars(t,e.summary||[],i,!1)}}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".comment-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/comment/reaction",type:"POST",data:JSON.stringify({commentId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?Comment.updateReactionBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})},report:function(e){var t=$(e);t.attr("disabled","disabled").css("opacity","0.3"),$.ajax({url:Label.servePath+"/report",type:"POST",cache:!1,data:JSON.stringify({reportDataId:$("#reportDialog").data("id"),reportDataType:$("#reportDialog").data("type"),reportType:$("input[name=report]:checked").val(),reportMemo:$("#reportTextarea").val()}),complete:function(e){t.removeAttr("disabled").css("opacity","1"),0===e.responseJSON.code?(Util.alert(Label.reportSuccLabel),$("#reportTextarea").val(""),$("#reportDialog").dialog("close")):Util.alert(e.responseJSON.msg)}})},accept:function(e,t,n){confirm(e)&&$.ajax({url:Label.servePath+"/comment/accept",type:"POST",headers:{csrfToken:Label.csrfToken},cache:!1,data:JSON.stringify({commentId:t}),success:function(e){0===e.code?($(n).closest("li").addClass("cmt-perfect"),$(n).remove()):Util.alert(e.msg)}})},remove:function(e){if(!confirm("删除评论需要100积分，"+Label.confirmRemoveLabel))return!1;$.ajax({url:Label.servePath+"/comment/"+e+"/remove",type:"POST",cache:!1,success:function(t,n){0===t.code?$("#"+e).remove():Util.alert(t.msg)}})},exchangeCmtSort:function(e){e=0===e?1:0;var t=Comment.getCommentQueryExtra().replace("&sort=hot","");window.location.href=window.location.pathname+"?m="+e+t+"#comments"},_bgFade:function(e,t){return 0!==e.length&&(!1!==(t=t||{}).scroll&&$(window).scrollTop(e[0].offsetTop-48),"comments"!==e.attr("id")&&!1!==t.highlight&&($(".comment-focus-highlight").removeClass("comment-focus-highlight"),e.addClass("comment-focus-highlight"),setTimeout(function(){e.removeClass("comment-focus-highlight")},1800),!0))},edit:function(e){Comment._toggleReply(),$(".cmt-anonymous").hide(),$.ajax({url:Label.servePath+"/comment/"+e+"/content",type:"GET",cache:!1,success:function(e,t){0===e.code&&Comment.editor.setValue(e.commentContent)}}),$("#replyUseName").html(' '+Label.commonUpdateCommentPermissionLabel+"").data("commentId",e)},goComment:function(e){var t=Comment.getCommentHashId(e);return(!t||!Comment.focusCommentById(t))&&(t&&Comment.isSameCommentPage(e)?(Comment.expandThreadForComment(t),!1):(window.location=e,!1))},focusCommentElement:function(e,t){return Comment._bgFade(e,t)},focusCommentById:function(e,t){var n=Comment.getCommentElement(e);return 1===n.length&&Comment.focusCommentElement(n,t)},focusLocationHash:function(){var e=Comment.getCommentHashId(window.location.hash);return!!e&&(!!Comment.focusCommentById(e)||Comment.expandThreadForComment(e))},expandThreadForComment:function(e){return $.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,anchorCommentId:e,userCommentViewMode:Label.userCommentViewMode,sort:Label.commentSort,author:Label.commentAuthorFilter?"1":""}),success:function(t){if(0!==t.code)return!1;Comment.renderThreadResponse(t.commentThreadRootId,t.commentThreadReplies||[],e,{pagination:t.pagination})}}),!0},renderThreadResponse:function(e,t,n,i){i=i||{};var o=Comment.getCommentElement(e);if(1!==o.length)return!1;var r=Comment.ensureThread(o,e);return r.find(".comment-thread__list").html(Comment.renderThreadReplies(t)),r.addClass("comment-thread--expanded"),r.find(".comment-thread__more").remove(),Comment.renderThreadPagination(r,e,i.pagination),Comment.initReactionWidgets(r),Util.listenUserCard(),Util.parseHljs(),Util.parseMarkdown(),!1===i.focus||!n||Comment.focusCommentById(n)},_toggleReply:function(e){return Label.isLoggedIn?0===$("#commentContent").length?(Util.alert(Label.notAllowCmtLabel),!1):"false"===$(this).data("hasPermission")?(Article.permissionTip(Label.noPermissionLabel),!1):$(".footer").attr("style")?($(".editor-panel .wrapper").slideUp(function(){$(".editor-panel").fadeOut(100),$(".footer").removeAttr("style")}),!1):($(".cmt-anonymous").show(),$(".footer").css("margin-bottom",$(".editor-panel > .wrapper").outerHeight()+"px"),$("#replyUseName").html(''+$(".article-title").text().replace(//g,">")+"").removeData(),"0px"!==$(".editor-panel").css("bottom")&&($(".editor-panel .wrapper").hide(),$(".editor-panel").css("bottom",0)),$(".editor-panel").show(),void $(".editor-panel .wrapper").slideDown(function(){Comment.editor.focus(),e&&e()})):(Util.needLogin(),!1)},loadEmojis:function(){let e=Comment.getEmojis(),t="";for(let n=0;n\n
\n \n`;$("#emojis").html(t)},confirmed:!1,delEmoji:function(e){if(!0===Comment.confirmed||confirm("确定要删除该表情包吗？")){Comment.confirmed=!0;let t=Comment.getEmojis();for(let n=0;n5242880?Util.alert("图片过大 (最大限制 5M)"):t.submit():Util.alert("只允许上传图片!")}}else t.submit()},formData:function(e){return e.serializeArray()},submit:function(e,t){},done:function(e,t){var n={result:{key:t.result.data.succMap[Object.keys(t.result.data.succMap)[0]]}};Comment.addEmoji(n.result.key)},fail:function(e,t){Util.alert("Upload error: "+t.errorThrown)}})},fromURL:function(){Util.alert('
\n\n
\n
\n \n
\n
',"从URL导入表情包"),$("#fromURL").focus(),$("#fromURL").unbind(),$("#fromURL").bind("keypress",function(e){"13"==e.keyCode&&(Comment.addEmoji($("#fromURL").val()),Util.closeAlert())})},addEmoji:function(){if(0!==arguments.length){var e=[];if(1===arguments.length&&Array.isArray(arguments[0]))e=arguments[0];else for(var t=0;t ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-reply").parent().click():Comment._toggleReply(),!1}).bind("keyup","h",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-heart").parent().click(),!1}).bind("keyup","t",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-down").parent().click(),!1}).bind("keyup","c",function(){return 1===$("#comments .list > ul > li.focus .comment-info .icon-reply-to").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-info .icon-reply-to").parent().click(),!1}).bind("keyup","m",function(){return 1===$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").click(),!1}).bind("keyup","a",function(){return"x"===Util.prevKey&&1===$("#comments .list > ul > li.focus .icon-setting").parent().length&&(window.location=$("#comments .list > ul > li.focus .icon-setting").parent().attr("href")),!1}).bind("keyup","m",function(){return"v"===Util.prevKey&&Article.toggleToc(),!1}).bind("keyup","h",function(){return"v"===Util.prevKey&&$("#thankArticle").click(),!1}).bind("keyup","t",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-down").parent().click(),!1}).bind("keyup","i",function(){return"v"===Util.prevKey&&$(".article-header .icon-view").parent().click(),!1}).bind("keyup","c",function(){return"v"===Util.prevKey&&$(".article-header .icon-star").parent().click(),!1}).bind("keyup","l",function(){return"v"===Util.prevKey&&$(".article-header .icon-history").parent().click(),!1}).bind("keyup","e",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-edit").parent().length&&(window.location=$(".article-actions .icon-edit").parent().attr("href")),!1}).bind("keyup","s",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-chevron-up").length&&Article.stick(Label.articleOId),!1}).bind("keyup","a",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-setting").parent().length&&(window.location=$(".article-actions .icon-setting").parent().attr("href")),!1}).bind("keyup","p",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=prev]").length&&(window.location=$(".article-header a[rel=prev]").attr("href")),!1}).bind("keyup","n",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=next]").length&&(window.location=$(".article-header a[rel=next]").attr("href")),!1})},init:function(){if($("#sendComment").click(function(){Comment._toggleReply()}),Comment.focusLocationHash(),this._initHotKey(),$.pjax({selector:"#comments .pagination a",container:"#comments",show:"",cache:!1,storage:!0,titleSuffix:"",callback:function(){Comment.initReactionWidgets($("#comments")),Util.parseMarkdown(),Util.parseHljs(),Util.listenUserCard(),Comment.focusLocationHash()}}),NProgress.configure({showSpinner:!1}),$("#comments").bind("pjax.start",function(){NProgress.start()}),$("#comments").bind("pjax.end",function(){NProgress.done()}),ArticleReaction.bindPanels(),ArticleReaction.initWidgets(),Comment.bindReactionPanels(),Comment.initReactionWidgets($("#comments")),!Label.isLoggedIn||!document.getElementById("commentContent"))return!1;Comment.editor=Util.newVditor({id:"commentContent",cache:!0,preview:{mode:"editor"},resize:{enable:!0,position:"top"},height:200,placeholder:Label.commentEditorPlaceholderLabel,ctrlEnter:function(){Comment.add(Label.articleOId,Label.csrfToken,document.getElementById("articleCommentBtn"))},esc:function(){$(".editor-hide").click()}})},thank:function(e,t,n,i,o){if(!Label.isLoggedIn)return Util.needLogin(),!1;if(0===i&&!confirm(n))return!1;var r={commentId:e};$.ajax({url:Label.servePath+"/comment/thank",type:"POST",headers:{csrfToken:t},cache:!1,data:JSON.stringify(r),error:function(e,t,n){Util.alert(n)},success:function(e,t){if(0===e.code){$(o).removeAttr("onclick");var n=$(''),i=$(o).offset().top,r=$(o).offset().left;n.css({"z-index":9999,top:i,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(n),n.animate({left:r-150,top:i-60,opacity:0},1e3,function(){var e=parseInt($(o).text());$(o).html(' '+(e+1)).addClass("ft-red"),n.remove()})}else Util.alert(e.msg)}})},showReply:function(e,t,n){var i=$(t).closest("li").find("."+n);if("comment-get-comment"===n){if(0!==i.find("li").length)return i.html(""),!1}else if(0===$(t).find(".icon-chevron-down").length)return $(t).find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down").find("use").attr("xlink:href","#chevron-down"),i.html(""),!1;if("0.3"===$(t).css("opacity"))return!1;var o="/comment/replies";"comment-get-comment"===n&&(o="/comment/original"),$.ajax({url:Label.servePath+o,type:"POST",data:JSON.stringify({commentId:e,userCommentViewMode:Label.userCommentViewMode}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(e,n){if(0!==e.code)return Util.alert(e.msg),!1;var o=e.commentReplies,r="";o instanceof Array||(o=[o]),0===o.length&&(r='
  • '+Label.removedLabel+"
    • ");for(var a=0;a
    ',r+='',r+='
    ',r+="    ",r+='
    ',r+='',r+=Comment.renderCommentAuthorName(s),r+="",r+=Comment.renderOriginalAuthorLabel(s),r+=' • '+s.timeAgo,s.rewardedCnt>0&&(r+=' '+s.rewardedCnt+" "),r+="",r+='
    '+s.commentContent+"
    "+Comment.renderReactionBar(s.oId,s.reactionSummary,s.currentUserReaction)+"
    "}i.html("
      "+r+"
    "),Util.parseHljs(),Util.parseMarkdown(),$(t).find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up").find("use").attr("xlink:href","#chevron-up")},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},showThreadReplies:function(e,t,n){if("0.3"===$(t).css("opacity"))return!1;$.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,paginationCurrentPageNum:n||1}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(t){if(0!==t.code)return Util.alert(t.msg),!1;Comment.renderThreadResponse(t.commentThreadRootId||e,t.commentThreadReplies||[],null,{focus:!1,pagination:t.pagination})},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},add:function(e,t,n){var i={articleId:e,commentAnonymous:$("#commentAnonymous").prop("checked"),commentVisible:$("#commentVisible").prop("checked"),commentContent:Comment.editor.getValue(),userCommentViewMode:Label.userCommentViewMode};$("#replyUseName").data("commentOriginalCommentId")&&(i.commentOriginalCommentId=$("#replyUseName").data("commentOriginalCommentId"));var o=Label.servePath+"/comment",r="POST",a=$("#replyUseName").data("commentId");a&&(o=Label.servePath+"/comment/"+a,r="PUT"),$.ajax({url:o,type:r,headers:{csrfToken:t},cache:!1,data:JSON.stringify(i),beforeSend:function(){$(n).attr("disabled","disabled").css("opacity","0.3")},success:function(e,t){$(n).removeAttr("disabled").css("opacity","1"),0===e.code?(a&&(Comment.updateEditedCommentContent(a,e.commentContent),Comment.updateCommentHistoryAction(a,parseInt(e.commentRevisionCount||0))),i.commentOriginalCommentId&&Util.setUnreadNotificationCount(),Comment.editor.setValue(""),$(".editor-hide").click(),$("#replyUseName").text("").removeData(),i.commentOriginalCommentId&&Comment.focusCommentById(i.commentOriginalCommentId,{scroll:!1})):$("#addCommentTip").addClass("error").html("
    • "+e.msg+"
    ")},error:function(e){$("#addCommentTip").addClass("error").html("
    • "+e.statusText+"
    ")},complete:function(){$(n).removeAttr("disabled").css("opacity","1"),setTimeout(Util.listenUserCard,1e3)}})},reply:function(e,t){Comment._toggleReply(function(){var e=Comment.getCommentElement(t);0!==e.length&&$(window).height()-(e[0].offsetTop-$(window).scrollTop()+e.outerHeight())<$(".editor-panel .wrapper").outerHeight()&&$(window).scrollTop(e[0].offsetTop-($(window).height()-$(".editor-panel .wrapper").outerHeight()-e.outerHeight()))});var n="",i=Comment.escapeHTML(e),o=Comment.getCommentElement(t),r=o.find(">.fn-flex>div>a").clone();0===r.length&&(r=o.find(">.fn-flex .avatar").clone()),0===r.length?n=' '+i+"":r.is("a")?(r.addClass("ft-a-title").attr("href","#"+t).attr("onclick",'Comment._bgFade($("#'+t+'"))'),r.find("div").removeClass("avatar").addClass("avatar-small").after(" "+i).before(' '),n=r[0].outerHTML):(r.removeClass("avatar").addClass("avatar-small"),n=' '+r[0].outerHTML+" "+i+""),$("#replyUseName").html(n).data("commentOriginalCommentId",t)}},ArticleReaction={renderSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r'),o.push('"),""!==m&&o.push(m,"")}}return o.join("")},renderPanel:function(e,t){for(var n=['
    '],i=0;i"),n.push('',o.emoji,""),n.push("")}return n.push("
    "),n.join("")},renderBar:function(e,t,n,i){var o=i?" is-open":"",r=['
    '];return r.push('
    '),r.push('
    ',ArticleReaction.renderSummaryItems(e,t,n),"
    "),r.push('
    "),r.push(ArticleReaction.renderPanel(e,n)),r.push("
    "),r.join("")},collectShells:function(e){var t=e?$(e):$(document);return t.hasClass("article-reaction-shell")?t.add(t.find(".article-reaction-shell")):t.find(".article-reaction-shell")},ensureShell:function(){if(!($(".article-reaction-shell, .article-reaction").length>0)&&Label.articleOId){var e=$(".article-main .tag-desc").first().closest(".fn-flex");0===e.length&&(e=$(".article-main .article-actions.action-btns").first()),0!==e.length&&$('
    ').insertAfter(e)}},getWidgets:function(e){return $('.article-reaction[data-target-id="'+e+'"]')},initWidgets:function(e){e||ArticleReaction.ensureShell(),ArticleReaction.collectShells(e).each(function(){var e=$(this);e.replaceWith(ArticleReaction.renderBar(e.attr("data-target-id"),e.attr("data-summary"),e.attr("data-current-user-reaction")||"",!1))})},closePanels:function(){$(".article-reaction.is-open").removeClass("is-open")},togglePanel:function(e){var t=$(e).closest(".article-reaction"),n=!t.hasClass("is-open");ArticleReaction.closePanels(),n&&t.addClass("is-open")},bindPanels:function(){$(document).off("click.articleReaction").on("click.articleReaction",function(e){0===$(e.target).closest(".article-reaction").length&&ArticleReaction.closePanels()})},updateBars:function(e,t,n,i){var o=ArticleReaction.getWidgets(e),r="boolean"==typeof i?i:o.first().hasClass("is-open");o.each(function(){$(this).replaceWith(ArticleReaction.renderBar(e,t,n,r))})},updateReactionFromChannel:function(e){var t=e.targetId,n=ArticleReaction.getWidgets(t);if(t&&0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";ArticleReaction.updateBars(t,e.summary||[],i,!1)}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".article-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/article/reaction",type:"POST",data:JSON.stringify({articleId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?ArticleReaction.updateBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})}},Article={initAudio:function(){$(".content-audio").each(function(){var e=$(this);new APlayer({element:this,narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",preload:"none",mode:"circulation",music:{title:e.data("title"),author:'音乐分享',url:e.data("url"),pic:Label.staticServePath+"/images/music.png"}})});var e=$("#articleAudio");if(0===e.length)return!1;new APlayer({element:document.getElementById("articleAudio"),narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",mode:"order",preload:"none",music:{title:"语音预览",author:'小薇',url:e.data("url"),pic:Label.staticServePath+"/images/blank.png"}})},permissionTip:function(e){Label.isLoggedIn?Util.alert(e):Util.needLogin()},voteUp:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.next();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/up/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(i.text()),r=parseInt(o.text());0!==e.code?Util.alert(e.msg):0===e.type?i.html(' '+(n-1)).removeClass("ft-red"):(i.html(' '+(n+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html(' '+(r-1)).removeClass("ft-red"))}})},voteDown:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.prev();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/down/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(o.text()),r=parseInt(i.text());if(0===e.code)return 1===e.type?i.html(' '+(r-1)).removeClass("ft-red"):(i.html(' '+(r+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html(' '+(n-1)).removeClass("ft-red")),!1;Util.alert(e.msg)}})},previewImgAfterLoading:function(){$(".img-preview img").css("transform","translate3d("+Math.max(0,$(window).width()-$(".img-preview img").width())/2+"px, "+Math.max(0,$(window).height()-$(".img-preview img").height())/2+"px, 0)"),setTimeout(function(){$(".img-preview").width($(window).width())},300)},init:function(){this.initToc(),this.share(),Util.parseHljs(),Util.parseMarkdown();var e=null;$(".article").on("dblclick",".vditor-reset img",function(){clearTimeout(e),$(this).hasClass("emoji")||1===$(this).closest(".editor-panel").length||1===$(this).closest(".ad").length||window.open($(this).attr("src"))}).on("click",".vditor-reset img",function(t){if(clearTimeout(e),!$(this).hasClass("emoji")&&1!==$(this).closest(".editor-panel").length&&1!==$(this).closest(".ad").length){var n=$(this),i=this;e=setTimeout(function(){var e=i.offsetTop,t=i.offsetLeft;1===n.closest(".comments").length&&(e+=n.closest("li")[0].offsetTop,t=t+$(".comments")[0].offsetLeft+15);var o=(n.attr("src")||"").split("?imageView2")[0],r=$('
    ').on("click",function(){$(this).remove()}),a=$("").css("transform","translate3d("+Math.max(0,t)+"px, "+Math.max(0,e-$(window).scrollTop())+"px, 0)").attr("src",o).on("load",Article.previewImgAfterLoading);r.append(a),$("body").append(r),$(".img-preview").css({"background-color":"#fff",position:"fixed"})},100)}}),$("#reportDialog").dialog({width:$(window).width()>500?500:$(window).width()-50,height:450,modal:!0,hideFooter:!0}),this.initAudio(),$(window).scroll(function(){var e=$(window).scrollTop();$(".share").css("top",e+60+"px"),e<$(".article-title").offset().top?($(".article-header").css("top","-60px"),$(".nav").show()):($(".article-header").css("top","0"),$(".nav").hide())}),$(window).resize(function(){Article.syncTocLayout()});var t=location.search.split("r=")[1];t&&sessionStorage.setItem("r",t.split("&")[0]),$(function(){$.ajax({url:Label.servePath+"/api/article/reward/senders/"+Label.articleOId,method:"GET",async:!1,headers:{csrfToken:Label.csrfToken},success:function(e){if(0===e.code&&""!==e.data){let t=e.data;for(let e=0;e\n
    \n
    \n
    \n")}Util.listenUserCard()}}})})},revision:function(e,t){if(!Label.isLoggedIn)return Util.needLogin(),!1;t||(t="article"),Article._revisionDialogOpen("comment"===t?"评论历史":"文章历史"),"comment"===t?Article._legacyRevision(e,t):Article._articleRevision(e)},_revisionDialogInit:function(){$("#revisionDialog").length>0||($("body").append(''),$("#revisionDialog .revision-modal__body").append($("#revision")),$("#revisionDialog .revision-modal__overlay, #revisionDialog .revision-modal__close").click(function(){Article._revisionDialogClose()}),$(document).off("keydown.revisionDialog").on("keydown.revisionDialog",function(e){"Escape"===e.key&&$("#revisionDialog").hasClass("is-open")&&Article._revisionDialogClose()}))},_revisionDialogOpen:function(e){Article._revisionDialogInit(),$("#revisionDialogTitle").text(e||"历史版本"),$("#revisionDialog").addClass("is-open").attr("aria-hidden","false"),$("body").addClass("revision-modal-open"),$("#revisionDialog .revision-modal__close").focus()},_revisionDialogClose:function(){$("#revisionDialog").removeClass("is-open").attr("aria-hidden","true"),$("body").removeClass("revision-modal-open")},_legacyRevision:function(e,t){$.ajax({url:Label.servePath+"/"+t+"/"+e+"/revisions",cache:!1,success:function(e,n){if(0===e.code){if(0===e.revisions.length||1===e.revisions.length)return $("#revision > .revisions").remove(),$("#revisions").html(""+Label.noRevisionLabel+""),!1;$("#revisions").html("").prev().remove(),$("#revisions").data("revisions",e.revisions).before('
    '+(e.revisions.length-1)+"~"+e.revisions.length+"/"+e.revisions.length+'
    '),e.revisions.length<=2&&$("#revision a").first().addClass("disabled");var i=JsDiff.createPatch("",e.revisions[e.revisions.length-2].revisionData.articleContent||e.revisions[e.revisions.length-2].revisionData.commentContent,e.revisions[e.revisions.length-1].revisionData.articleContent||e.revisions[e.revisions.length-1].revisionData.commentContent,e.revisions[e.revisions.length-2].revisionData.articleTitle||"",e.revisions[e.revisions.length-1].revisionData.articleTitle||"");return new Diff2HtmlUI({diff:i}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0}),Article._revisionsControls(t),!1}Util.alert(e.msg)}})},_revisionsControls:function(e){var t=$("#revisions").data("revisions");$("#revision a.first").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions").text().split("~")[0]);e<=2?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.last").removeClass("disabled"),$("#revision .revisions > span").html(e-1+"~"+e+"/"+t.length);var n=JsDiff.createPatch("",t[e-2].revisionData.articleContent||t[e-2].revisionData.commentContent,t[e-1].revisionData.articleContent||t[e-1].revisionData.commentContent,t[e-2].revisionData.articleTitle||"",t[e-1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}}),$("#revision a.last").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions span").text().split("~")[0]);e>t.length-3?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.first").removeClass("disabled"),$("#revision .revisions > span").html(e+1+"~"+(e+2)+"/"+t.length);var n=JsDiff.createPatch("",t[e].revisionData.articleContent||t[e].revisionData.commentContent,t[e+1].revisionData.articleContent||t[e+1].revisionData.commentContent,t[e].revisionData.articleTitle||"",t[e+1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}})},_articleRevision:function(e){$("#revision > .revisions").remove(),$("#revisions").removeData("revisions").removeData("revisionDetails").html("加载中"),$.ajax({url:Label.servePath+"/article/"+e+"/revisions/list",cache:!1,success:function(t){if(0===t.code){var n=t.revisions||[];n.length<2?$("#revisions").html(""+Label.noRevisionLabel+""):($("#revisions").data("revisions",n).data("revisionDetails",{}).html(Article._revisionPickerHtml(n)),Article._revisionBindPicker(e),Article._revisionCompare(e))}else $("#revisions").html(""+Article._revisionEscapeHTML(t.msg||"加载失败")+"")},error:function(){$("#revisions").html("加载失败")}})},_revisionPickerHtml:function(e){for(var t=e.length-2,n=e.length-1,i="",o="",r=0;r
    '},_revisionOptionHtml:function(e,t){return'"},_revisionVersionLabel:function(e){return e.current?"当前 "+e.revisionTimeStr:e.revisionTimeStr},_revisionBindPicker:function(e){$("#revision .revision-picker__compare").click(function(){Article._revisionCompare(e)}),$("#revision .revision-picker__diff-only").change(function(){Article._revisionCompare(e)})},_revisionCompare:function(e){var t=$("#revision .revision-picker__base").val(),n=$("#revision .revision-picker__target").val(),i=$("#revision .revision-picker__diff-only").is(":checked");$("#revisions .revision-diff").html("加载中"),$.when(Article._revisionFetch(e,t),Article._revisionFetch(e,n)).done(function(e,t){Article._revisionRenderCompare(e,t,i)}).fail(function(e){$("#revisions .revision-diff").html(""+Article._revisionEscapeHTML(e||"加载失败")+"")})},_revisionFetch:function(e,t){var n=$("#revisions").data("revisionDetails")||{},i=$.Deferred();return n[t]?(i.resolve(n[t]),i.promise()):($.ajax({url:Label.servePath+"/article/"+e+"/revisions/"+encodeURIComponent(t),cache:!1,success:function(e){0===e.code?(n[t]=e.revision,$("#revisions").data("revisionDetails",n),i.resolve(e.revision)):i.reject(e.msg)},error:function(){i.reject("加载失败")}}),i.promise())},_revisionRenderCompare:function(e,t,n){var i=e.revisionData||{},o=t.revisionData||{},r=Article._revisionRenderInlineDiff("标题",i.articleTitle||"",o.articleTitle||"",n);r+=Article._revisionRenderLineDiff("内容",i.articleContent||"",o.articleContent||"",n),$("#revisions .revision-diff").html(r||"无差异")},_revisionRenderInlineDiff:function(e,t,n,i){for(var o=JsDiff.diffWordsWithSpace?JsDiff.diffWordsWithSpace(t,n):JsDiff.diffWords(t,n),r=!1,a="",s=0;s'+Article._revisionEscapeHTML(o[s].value)+"")}return i&&!r?"":'

    '+e+'

    '+a+"
    "},_revisionRenderLineDiff:function(e,t,n,i){for(var o=JsDiff.diffLines(t,n),r=!1,a="",s=0;s

    '+e+'

    '+a+"
    "},_revisionLineHtml:function(e,t){for(var n=Article._revisionSplitLines(e),i="",o=0;o'+Article._revisionEscapeHTML(n[o])+"
    ";return i},_revisionSplitLines:function(e){var t=e.split("\n");return""===t[t.length-1]&&t.pop(),t},_revisionEscapeHTML:function(e){return String(e).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},share:function(){var e=$("#qrCode").data("shareurl");$("#qrCode").qrcode({width:90,height:90,text:e}),$("body").click(function(){$("#qrCode").slideUp()}),$(".share > span").click(function(){var t=$(this).data("type");if(!t)return!1;if("wechat"===t)return $("#qrCode").slideToggle(),!1;if("copy"===t)return!1;var n=encodeURIComponent(Label.articleTitle+" - "+Label.symphonyLabel),i=encodeURIComponent(e),o=$(".article-info .avatar-mid").css("background-image");pic=o.substring(5,o.length-2);var r={};r.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+n+"&url="+i+"&pic="+pic,r.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+i+"&pic="+pic,r.google="https://plus.google.com/share?url="+i,r.twitter="https://twitter.com/intent/tweet?status="+n+" "+i,window.open(r[t],"_blank","top=100,left=200,width=648,height=618")}),$("#qrCode").click(function(){$(this).hide()}),$("#shareClipboard").mouseover(function(){$(this).attr("aria-label",Label.copyLabel)}),Util.clipboard($("#shareClipboard"),$("#shareClipboard").next(),function(){$("#shareClipboard").attr("aria-label",Label.copiedLabel)})},reward:function(e){confirm(Label.rewardConfirmLabel)&&$.ajax({url:Label.servePath+"/article/reward?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0!==e.code)Util.alert(e.msg);else{$("#articleRewardContent .vditor-reset").html(e.articleRewardContent),Util.parseHljs(),Util.parseMarkdown();var n=$("#articleRewardContent > span"),i=parseInt(n.text());n.addClass("ft-red").removeClass("ft-blue").html(i+1+" "+Label.rewardLabel).removeAttr("onclick")}},error:function(e){Util.needLogin()}})},thankArticle:function(e,t){return Label.isLoggedIn?!(0===t&&!confirm(Label.thankArticleConfirmLabel))&&(Label.currentUserName===Label.articleAuthorName?(Util.alert(Label.thankSelfLabel),!1):void $.ajax({url:Label.servePath+"/article/thank?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0===e.code){var n=parseInt($("#thankArticle").text());$("#thankArticle").removeAttr("onclick").html(''+(n+1)+"").addClass("ft-red").removeClass("ft-blue");var i=$(''),o=$("#thankArticle").offset().top,r=$("#thankArticle").offset().left;return i.css({"z-index":9999,top:o-20,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(i),i.animate({top:o-180,opacity:0},1500,function(){i.remove()}),!1}Util.alert(e.msg)}})):(Util.needLogin(),!1)},stick:function(e){confirm(Label.stickConfirmLabel)&&$.ajax({url:Label.servePath+"/article/stick?articleId="+e,type:"POST",cache:!1,success:function(e,t){Util.alert(e.msg),window.location.href=Label.servePath+"/recent"}})},playThought:function(e){var t=String.fromCharCode(31),n=String.fromCharCode(30),i=String.fromCharCode(29),o=String.fromCharCode(10),r=String.fromCharCode(24),a=$("#thoughtProgress > span"),s=$("#thoughtProgress > svg"),l="#articleThought",c=function(e,n){var o=e.split(t);3===o.length&&o.splice(0,0,"");var a=o[0],s=o[2].split("-"),l=o[3].split("-");if(s[0]=parseInt(s[0]),s[1]=parseInt(s[1]),l[0]=parseInt(l[0]),l[1]=parseInt(l[1]),a===r){for(var c=[],m=s[1],d=0;l[1],m").replace(/ /g," ").replace(/ /g,"    ");$(l).data("text",e).html(t)},parseInt(m[u].split(t)[1])/d);for(var h=0,f=parseInt(m[u-1].split(t)[1])/d,v=setInterval(function(){h>=f?(a.width("100%"),s.css("left","100%"),clearInterval(v)):(h+=20,s.css("left",100*h/f+"%"),a.width(100*h/f+"%"))},20),g="",b="",C=0,y=0,w=0;y").replace(/ /g," ").replace(/ /g,"    "),g=L,$(l).html(b),C=Math.max(C,$(l).height())}$("#thoughtProgressPreview").html('
    '+b+"
    "),$("#thoughtProgressPreview").dialog({modal:!0,hideFooter:!0}),s.click(function(){$("#thoughtProgressPreview").dialog("open")}),$(l).html(b).height(C).css("margin-bottom","15px").html("")},syncTocLayout:function(){var e=1===$("#articleToC").length;return $("body.article").toggleClass("article--has-toc",e),$(".article-body .wrapper, #articleCommentsPanel, .article-footer").css("margin-right",""),e&&$("#articleToC > .module-panel").height($(window).height()-48),e},initToc:function(){if(!this.syncTocLayout())return!1;var e=$("#articleToC"),t=$(".article-toc"),n=$(".article-content [id^=toc]"),i=!1;e.offset().top;toc=[],e.find("li").click(function(){var t=$(this);let n=$(this).find("a").text();n=normalizeHeadingIdFromString(n),document.getElementById(n).scrollIntoView({behavior:"smooth"}),setTimeout(function(){e.find("li").removeClass("current"),t.addClass("current")},50)}),$(window).scroll(function(o){if(parseInt($("#articleToC").css("right"))<0)return!1;$("#articleToC > .module-panel").height($(window).height()-49),toc=[],n.each(function(e){toc.push({id:this.id,offsetTop:this.offsetTop})});for(var r=$(window).scrollTop(),a=0,s=toc.length;a0?a-1:0;e.find('a[data-id="'+toc[l].id+'"]').parent().addClass("current");break}r>=toc[toc.length-1].offsetTop-53&&(e.find("li").removeClass("current"),e.find("li:last").addClass("current"));var c=e.find("li.current")[0].offsetTop;i||(t.scrollTop()c-30&&t.scrollTop(c)),setTimeout(function(){i=!1},600)}),$(window).scroll(),t.scrollTop(e.find("li.current")[0].offsetTop).scroll(function(){i=!0})},toggleToc:function(){var e=$("#articleToC");if(0===e.length)return!1;var t=$(".article-header .icon-unordered-list");t.hasClass("ft-red")?(e.animate({right:"-"+$("#articleToC").outerWidth()+"px"}),t.removeClass("ft-red"),$(".article-actions .icon-unordered-list").removeClass("ft-red")):(e.animate({right:0}),t.addClass("ft-red"),$(".article-actions .icon-unordered-list").addClass("ft-red"))},getNotificationCommentIds:function(e){var t=[],n=function(e){(e=String(e||"").replace(/^#/,"").trim())&&-1===t.indexOf(e)&&t.push(e)};return String(e||"").split(",").forEach(n),n(window.location.hash),t.join(",")},makeNotificationRead:function(e,t){var n={articleId:e,commentIds:Article.getNotificationCommentIds(t)};$.ajax({url:Label.servePath+"/notifications/make-read",type:"POST",cache:!1,data:JSON.stringify(n)})}},ArticleAdjacentNav={storageKey:"articleAdjacentSort",sortValues:["time","author","hot"],init:function(){var e=$("[data-article-nav-sort]");0!==e.length&&(this.applySort(e,this.getStoredSort()),this.bindSortChange(e))},getStoredSort:function(){var e=window.localStorage.getItem(this.storageKey);return this.isValidSort(e)?e:"time"},isValidSort:function(e){return-1!==this.sortValues.indexOf(e)},bindSortChange:function(e){var t=this;e.find(".article-nav-sort__input").on("change",function(){this.checked&&t.isValidSort(this.value)&&(window.localStorage.setItem(t.storageKey,this.value),t.applySort(e,this.value))})},applySort:function(e,t){e.find('.article-nav-sort__input[value="'+t+'"]').prop("checked",!0)}};Article.init(),$(document).ready(function(){ArticleAdjacentNav.init(),Comment.init(),EmojiGroups.init("Comment","New"),Comment.loadEmojiGroupsNew(),(()=>{let e=(new Date).getTime(),t=0;const n=function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),t=setTimeout(()=>{(new Date).getTime()-e<=700&&$("#emojiList").removeClass("showList")},null!==navigator.userAgent.match(/(phone|pad|pod|ios|Android|Mobile|BlackBerry|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian)/i)?0:600)};$("#emojiBtn").hover(function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),EmojiGroups.ensureCurrentFresh(Comment,"New"),setTimeout(()=>0!==$("#emojiBtn:hover").length&&$("#emojiList").addClass("showList"),300)},n),$("#emojiList").hover(function(){0!==t&&(clearTimeout(t),t=0),e=(new Date).getTime()},n)})(),ArticleChannel.init(Label.articleChannel),Label.isLoggedIn&&(Article.makeNotificationRead(Label.articleOId,Label.notificationCmtIds),setTimeout(function(){Util.setUnreadNotificationCount()},1e3))}),Article.initCollectButtons=function(){$(".comment-action .action-btns").each(function(){const e=$(this);if(e.data("collect-inited"))return;const t=e.closest("li").find(".vditor-reset.comment").first();if(!t.length)return;const n=t.find("img").filter(function(){return!$(this).hasClass("emoji")&&0===$(this).closest(".editor-panel, .ad").length}).map(function(){return $(this).attr("src")}).get().filter(Boolean),i=Array.from(new Set(n));if(!i.length)return;e.data("collect-inited",!0);const o=$('');o.append(' 收藏表情'),o.on("click",function(e){e.stopPropagation(),EmojiGroups.openCollectDialog(i)}),e.prepend(o).prepend(" ")})},$(function(){Article.initCollectButtons()}); \ No newline at end of file +function isLetterOrDigit(e){return/\p{L}|\p{N}/u.test(e)}function normalizeHeadingIdFromString(e,t){let n=e.replace(/^#+/,"");if(t){const e=new RegExp(t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"g");n=n.replace(e,"")}let i="";for(const e of n)isLetterOrDigit(e)?i+=e:i+="-";return i=i.replace(/-{3,}/g,"--"),i.startsWith("--")&&(i="-"+i.slice(2)),i.endsWith("--")&&(i=i.slice(0,-2)+"-"),i}var Comment={editor:void 0,reactionOptions:[{value:"thumbsup",emoji:"👍"},{value:"thumbsdown",emoji:"👎"},{value:"check",emoji:"✅"},{value:"cross",emoji:"❌"},{value:"star",emoji:"⭐"},{value:"heart",emoji:"❤️"},{value:"fire",emoji:"🔥"},{value:"party",emoji:"🎉"},{value:"laugh",emoji:"😂"},{value:"wow",emoji:"😮"},{value:"clap",emoji:"👏"},{value:"hundred",emoji:"💯"},{value:"rocket",emoji:"🚀"},{value:"salute",emoji:"🖖"},{value:"handshake",emoji:"🤝"},{value:"raisedhands",emoji:"🙌"},{value:"mindblown",emoji:"🤯"},{value:"thinking",emoji:"🤔"},{value:"eyes",emoji:"👀"},{value:"cry",emoji:"😢"},{value:"angry",emoji:"😡"},{value:"pray",emoji:"🙏"},{value:"brokenheart",emoji:"💔"},{value:"skull",emoji:"💀"},{value:"clown",emoji:"🤡"},{value:"poop",emoji:"💩"},{value:"heartonfire",emoji:"❤️‍🔥"},{value:"plus",emoji:"➕1️⃣"}],isWideReactionOption:function(e){return"plus"===e.value||"heartonfire"===e.value},escapeHTML:function(e){return $("
    ").text(e||"").html()},renderCommentAuthorName:function(e){var t=Comment.escapeHTML(e.commentAuthorName);return e.commentAuthorNickName?Comment.escapeHTML(e.commentAuthorNickName)+" ("+t+")":t},renderOriginalAuthorLabel:function(e){var t=e.commentOriginalAuthorNickName||e.commentOriginalAuthorName;return t?'回复 @'+Comment.escapeHTML(t)+"":""},escapeJSString:function(e){return String(e||"").replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/\r/g,"\\r").replace(/\n/g,"\\n")},getCommentHashId:function(e){var t=String(e||"").indexOf("#");return t<0?"":String(e).substring(t+1)},getCurrentPageNum:function(){var e=window.location.search.match(/[?&]p=(\d+)/);return e?parseInt(e[1]):1},getSearchValue:function(e,t){for(var n=String(e||"").replace(/^\?/,"").split("&"),i=0;i1?o[1]:""}return""},normalizeCommentSearch:function(e){for(var t=["p","m","sort","author"],n=[],i=0;i
    '),e.find(".comment-action").before(n)),n},renderThreadAction:function(e){return'
    '+Comment.renderReactionBar(e.oId,e.reactionSummary,e.currentUserReaction)+'
    '+Comment.renderThreadThankAction(e)+Comment.renderThreadVoteAction(e,!0)+Comment.renderThreadVoteAction(e,!1)+Comment.renderThreadReportAction(e)+Comment.renderThreadHistoryAction(e)+Comment.renderThreadEditAction(e)+Comment.renderThreadReplyAction(e)+"
    "},renderThreadThankAction:function(e){var t=Comment.escapeJSString(e.oId),n=Comment.escapeJSString(e.commentThankLabel),i=parseInt(e.commentAnonymous||0),o=parseInt(e.rewardedCnt||e.commentThankCnt||0),r=e.rewarded?" ft-red":"",a="";return e.rewarded||(a=Label.canThankComment?" onclick=\"Comment.thank('"+t+"', '"+Comment.escapeJSString(Label.csrfToken)+"', '"+n+"', "+i+', this)"':' onclick="Article.permissionTip(Label.noPermissionLabel)"'),' '+o+""},renderThreadVoteAction:function(e,t){var n=Comment.escapeJSString(e.oId),i=parseInt(e.commentVote)===(t?0:1),o=parseInt(t?e.commentGoodCnt||0:e.commentBadCnt||0),r=t?Label.upLabel:Label.downLabel,a=t?"thumbs-up":"thumbs-down",s=t?"voteUp":"voteDown",l=(t?Label.canGoodComment:Label.canBadComment)?"Article."+s+"('"+n+"', 'comment', this)":"Article.permissionTip(Label.noPermissionLabel)";return' '+o+""},renderThreadReportAction:function(e){var t=Comment.escapeJSString(e.oId);return'"},renderThreadReplyAction:function(e){return Label.isLoggedIn&&Label.canAddComment?'':""},renderThreadEditAction:function(e){return e.commentIsCurrentUser&&Label.canUpdateComment?'':""},renderThreadHistoryAction:function(e){return!Label.canViewCommentHistory||parseInt(e.commentRevisionCount||0)<2?"":''},updateCommentHistoryAction:function(e,t){var n=Comment.getCommentElement(e);if(n.hasClass("comment-thread__reply")){var i=n.find("> .comment-thread__body > .comment-thread__actions > .action-btns");if(i.children(".comment-history-action").remove(),!(t<2)){var o=Comment.renderThreadHistoryAction({oId:e,commentRevisionCount:t}),r=i.children(".comment-edit-action");1===r.length?r.before(o):i.append(o)}}else n.find(".icon-history").parent().toggle(t>=2)},updateEditedCommentContent:function(e,t){var n=Comment.getCommentElement(e);n.hasClass("comment-thread__reply")?n.find("> .comment-thread__body > .comment-thread__content").html(t):n.find("> .fn-flex > .fn-flex-1 > .vditor-reset").html(t)},getThreadReplyDepth:function(e){var t=parseInt(e.commentThreadDepth,10);if(!isNaN(t)&&t>=0)return t;var n=document.getElementById(e.commentOriginalCommentId);return n&&$(n).hasClass("comment-thread__reply")?(t=parseInt($(n).attr("data-thread-depth"),10),isNaN(t)?1:t+1):0},renderThreadReplyClass:function(e){return"comment-thread__reply"+(e>0?" comment-thread__reply--nested":"")},renderThreadReplyStyle:function(e){return' data-thread-depth="'+e+'" style="--comment-thread-indent:'+28*e+'px"'},renderThreadReply:function(e){var t=Comment.getThreadReplyDepth(e);return'
    '+Comment.renderCommentAuthorName(e)+""+Comment.renderOriginalAuthorLabel(e)+' • '+Comment.escapeHTML(e.timeAgo)+'
    '+e.commentContent+"
    "+Comment.renderThreadAction(e)+"
    "},renderThreadReplies:function(e){for(var t="",n=0;n'+Comment.escapeHTML(n)+""},renderThreadPagination:function(e,t,n){if(e.find(".comment-thread__pager").remove(),n&&!(parseInt(n.paginationPageCount||0)<=1)){var i=parseInt(n.paginationCurrentPageNum||1),o=parseInt(n.paginationPageCount||1),r=['
    '];i>1&&r.push(Comment.renderThreadPageButton(t,i-1,"上一页")),r.push('',i,"/",o,""),i"),e.append(r.join(""))}},getCommentQueryExtra:function(){return Label.commentQueryExtra||""},normalizeReactionSummary:function(e){if(Array.isArray(e))return e;if("string"!=typeof e||""===e)return[];try{var t=JSON.parse(e);return Array.isArray(t)?t:[]}catch(e){return[]}},getReactionMap:function(e){e=Comment.normalizeReactionSummary(e);for(var t={},n=0;n/g,">")},getReactionUserDetails:function(e){return e&&Array.isArray(e.userDetails)?e.userDetails:[]},renderReactionTip:function(e){var t=Comment.getReactionUserDetails(e);if(0===t.length)return"";for(var n=[],i=0;i'),n.push('',Comment.escapeReactionHtml(s),''),n.push("")}}return 0===n.length?"":''+n.join("")+""},renderReactionSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r'),o.push('"),""!==m&&o.push(m,"")}}return o.join("")},renderReactionPanel:function(e,t){for(var n=['
    '],i=0;i"),n.push('',o.emoji,""),n.push("")}return n.push("
    "),n.join("")},renderReactionSummaryWidget:function(e,t,n){var i=Comment.renderReactionSummaryItems(e,t,n),o=['
    '];return o.push('
    '),o.push('
    ',i,"
    "),o.join("")},renderReactionTriggerWidget:function(e,t,n){var i=n?" is-open":"",o=['
    '];return o.push('"),o.push(Comment.renderReactionPanel(e,t)),o.push("
    "),o.join("")},renderReactionBar:function(e,t,n,i,o){if("summary"===o)return Comment.renderReactionSummaryWidget(e,t,n);if("trigger"===o)return Comment.renderReactionTriggerWidget(e,n,i);var r=i?" is-open":"",a=Comment.renderReactionSummaryItems(e,t,n),s=['
    '];return s.push('
    '),s.push('
    ',a,"
    "),s.push('
    "),s.push(Comment.renderReactionPanel(e,n)),s.push("
    "),s.join("")},getReactionWidgets:function(e){return $('.comment-reaction[data-target-id="'+e+'"]')},getInteractiveReactionWidgets:function(e){return $('.comment-reaction--combined[data-target-id="'+e+'"], .comment-reaction--trigger[data-target-id="'+e+'"]')},mountReactionTrigger:function(e,t,n,i){if(0!==e.length){var o=Comment.renderReactionBar(t,[],n,i,"trigger"),r=e.find('.comment-reaction--trigger[data-target-id="'+t+'"]');r.length>0?r.replaceWith(o):e.prepend(o)}},collectReactionShells:function(e){var t=e?$(e):$(document);return t.hasClass("comment-reaction-shell")?t.add(t.find(".comment-reaction-shell")):t.find(".comment-reaction-shell")},initReactionWidgets:function(e){Comment.collectReactionShells(e).each(function(){var e=$(this),t=e.attr("data-target-id"),n=e.attr("data-summary"),i=e.attr("data-current-user-reaction")||"",o=e.closest(".comment-action__bar").find(".action-btns").first(),r=e.closest(".comment-action__left").length>0&&o.length>0,a=Comment.renderReactionBar(t,n,i,!1,r?"summary":"combined");e.replaceWith(a),r&&Comment.mountReactionTrigger(o,t,i,!1)})},closeReactionPanels:function(e){var t=e?$(e):$(document),n=".comment-reaction--combined, .comment-reaction--trigger";(t.is(n)?t.add(t.find(n)):t.find(n)).removeClass("is-open")},toggleReactionPanel:function(e){var t=$(e).closest(".comment-reaction"),n=t.attr("data-target-id"),i=!t.hasClass("is-open");Comment.closeReactionPanels(),i&&Comment.getInteractiveReactionWidgets(n).addClass("is-open")},bindReactionPanels:function(){$(document).off("click.commentReaction").on("click.commentReaction",function(e){0===$(e.target).closest(".comment-reaction").length&&Comment.closeReactionPanels()})},updateReactionBars:function(e,t,n,i){var o=Comment.getReactionWidgets(e),r="boolean"==typeof i?i:Comment.getInteractiveReactionWidgets(e).first().hasClass("is-open");o.each(function(){var i=$(this),o="combined";i.hasClass("comment-reaction--summary")?o="summary":i.hasClass("comment-reaction--trigger")&&(o="trigger"),i.replaceWith(Comment.renderReactionBar(e,t,n,r,o))})},updateReactionFromChannel:function(e){var t=e.targetId||e.commentId;if(t){var n=Comment.getReactionWidgets(t);if(0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";Comment.updateReactionBars(t,e.summary||[],i,!1)}}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".comment-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/comment/reaction",type:"POST",data:JSON.stringify({commentId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?Comment.updateReactionBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})},report:function(e){var t=$(e);t.attr("disabled","disabled").css("opacity","0.3"),$.ajax({url:Label.servePath+"/report",type:"POST",cache:!1,data:JSON.stringify({reportDataId:$("#reportDialog").data("id"),reportDataType:$("#reportDialog").data("type"),reportType:$("input[name=report]:checked").val(),reportMemo:$("#reportTextarea").val()}),complete:function(e){t.removeAttr("disabled").css("opacity","1"),0===e.responseJSON.code?(Util.alert(Label.reportSuccLabel),$("#reportTextarea").val(""),$("#reportDialog").dialog("close")):Util.alert(e.responseJSON.msg)}})},accept:function(e,t,n){confirm(e)&&$.ajax({url:Label.servePath+"/comment/accept",type:"POST",headers:{csrfToken:Label.csrfToken},cache:!1,data:JSON.stringify({commentId:t}),success:function(e){0===e.code?($(n).closest("li").addClass("cmt-perfect"),$(n).remove()):Util.alert(e.msg)}})},remove:function(e){if(!confirm("删除评论需要100积分，"+Label.confirmRemoveLabel))return!1;$.ajax({url:Label.servePath+"/comment/"+e+"/remove",type:"POST",cache:!1,success:function(t,n){0===t.code?$("#"+e).remove():Util.alert(t.msg)}})},exchangeCmtSort:function(e){e=0===e?1:0;var t=Comment.getCommentQueryExtra().replace("&sort=hot","");window.location.href=window.location.pathname+"?m="+e+t+"#comments"},_bgFade:function(e,t){return 0!==e.length&&(!1!==(t=t||{}).scroll&&$(window).scrollTop(e[0].offsetTop-48),"comments"!==e.attr("id")&&!1!==t.highlight&&($(".comment-focus-highlight").removeClass("comment-focus-highlight"),e.addClass("comment-focus-highlight"),setTimeout(function(){e.removeClass("comment-focus-highlight")},1800),!0))},edit:function(e){Comment._toggleReply(),$(".cmt-anonymous").hide(),$.ajax({url:Label.servePath+"/comment/"+e+"/content",type:"GET",cache:!1,success:function(e,t){0===e.code&&Comment.editor.setValue(e.commentContent)}}),$("#replyUseName").html(' '+Label.commonUpdateCommentPermissionLabel+"").data("commentId",e)},goComment:function(e){var t=Comment.getCommentHashId(e);return(!t||!Comment.focusCommentById(t))&&(t&&Comment.isSameCommentPage(e)?(Comment.expandThreadForComment(t),!1):(window.location=e,!1))},focusCommentElement:function(e,t){return Comment._bgFade(e,t)},focusCommentById:function(e,t){var n=Comment.getCommentElement(e);return 1===n.length&&Comment.focusCommentElement(n,t)},focusLocationHash:function(){var e=Comment.getCommentHashId(window.location.hash);return!!e&&(!!Comment.focusCommentById(e)||Comment.expandThreadForComment(e))},expandThreadForComment:function(e){return $.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,anchorCommentId:e,userCommentViewMode:Label.userCommentViewMode,sort:Label.commentSort,author:Label.commentAuthorFilter?"1":""}),success:function(t){if(0!==t.code)return!1;Comment.renderThreadResponse(t.commentThreadRootId,t.commentThreadReplies||[],e,{pagination:t.pagination})}}),!0},renderThreadResponse:function(e,t,n,i){i=i||{};var o=Comment.getCommentElement(e);if(1!==o.length)return!1;var r=Comment.ensureThread(o,e);return r.find(".comment-thread__list").html(Comment.renderThreadReplies(t)),r.addClass("comment-thread--expanded"),r.find(".comment-thread__more").remove(),Comment.renderThreadPagination(r,e,i.pagination),Comment.initReactionWidgets(r),Util.listenUserCard(),Util.parseHljs(),Util.parseMarkdown(),!1===i.focus||!n||Comment.focusCommentById(n)},_hideReplyPanel:function(){var e=$(".editor-panel");return!(0===e.length||!e.hasClass("editor-panel--open"))&&(e.removeClass("editor-panel--open"),e.find(".wrapper").slideUp(function(){e.fadeOut(100),$(".footer").removeAttr("style")}),!1)},_toggleReply:function(e){if(!Label.isLoggedIn)return Util.needLogin(),!1;if(0===$("#commentContent").length)return Util.alert(Label.notAllowCmtLabel),!1;if("false"===$(this).data("hasPermission"))return Article.permissionTip(Label.noPermissionLabel),!1;var t=$(".editor-panel");if(t.hasClass("editor-panel--open"))return Comment._hideReplyPanel();document.body.classList.contains("long-article-page")&&window.LongArticle&&!window.LongArticle.isCommentsOpen()&&window.LongArticle.openComments(),$(".cmt-anonymous").show(),$(".footer").css("margin-bottom",$(".editor-panel > .wrapper").outerHeight()+"px"),$("#replyUseName").html(''+$(".article-title").text().replace(//g,">")+"").removeData(),"0px"!==t.css("bottom")&&(t.find(".wrapper").hide(),t.css("bottom",0)),t.show().addClass("editor-panel--open"),t.find(".wrapper").slideDown(function(){Comment.editor.focus(),e&&e()})},loadEmojis:function(){let e=Comment.getEmojis(),t="";for(let n=0;n\n
    \n \n`;$("#emojis").html(t)},confirmed:!1,delEmoji:function(e){if(!0===Comment.confirmed||confirm("确定要删除该表情包吗？")){Comment.confirmed=!0;let t=Comment.getEmojis();for(let n=0;n5242880?Util.alert("图片过大 (最大限制 5M)"):t.submit():Util.alert("只允许上传图片!")}}else t.submit()},formData:function(e){return e.serializeArray()},submit:function(e,t){},done:function(e,t){var n={result:{key:t.result.data.succMap[Object.keys(t.result.data.succMap)[0]]}};Comment.addEmoji(n.result.key)},fail:function(e,t){Util.alert("Upload error: "+t.errorThrown)}})},fromURL:function(){Util.alert('
    \n\n
    \n
    \n \n
    \n
    ',"从URL导入表情包"),$("#fromURL").focus(),$("#fromURL").unbind(),$("#fromURL").bind("keypress",function(e){"13"==e.keyCode&&(Comment.addEmoji($("#fromURL").val()),Util.closeAlert())})},addEmoji:function(){if(0!==arguments.length){var e=[];if(1===arguments.length&&Array.isArray(arguments[0]))e=arguments[0];else for(var t=0;t ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-reply").parent().click():Comment._toggleReply(),!1}).bind("keyup","h",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-heart").parent().click(),!1}).bind("keyup","t",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return 1===$("#comments .list > ul > li.focus").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .icon-thumbs-down").parent().click(),!1}).bind("keyup","c",function(){return 1===$("#comments .list > ul > li.focus .comment-info .icon-reply-to").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-info .icon-reply-to").parent().click(),!1}).bind("keyup","m",function(){return 1===$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").length&&"x"===Util.prevKey&&$("#comments .list > ul > li.focus .comment-action > .ft-fade > .fn-pointer").click(),!1}).bind("keyup","a",function(){return"x"===Util.prevKey&&1===$("#comments .list > ul > li.focus .icon-setting").parent().length&&(window.location=$("#comments .list > ul > li.focus .icon-setting").parent().attr("href")),!1}).bind("keyup","m",function(){return"v"===Util.prevKey&&Article.toggleToc(),!1}).bind("keyup","h",function(){return"v"===Util.prevKey&&$("#thankArticle").click(),!1}).bind("keyup","t",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-up").parent().click(),!1}).bind("keyup","d",function(){return"v"===Util.prevKey&&$(".article-header .icon-thumbs-down").parent().click(),!1}).bind("keyup","i",function(){return"v"===Util.prevKey&&$(".article-header .icon-view").parent().click(),!1}).bind("keyup","c",function(){return"v"===Util.prevKey&&$(".article-header .icon-star").parent().click(),!1}).bind("keyup","l",function(){return"v"===Util.prevKey&&$(".article-header .icon-history").parent().click(),!1}).bind("keyup","e",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-edit").parent().length&&(window.location=$(".article-actions .icon-edit").parent().attr("href")),!1}).bind("keyup","s",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-chevron-up").length&&Article.stick(Label.articleOId),!1}).bind("keyup","a",function(){return"v"===Util.prevKey&&1===$(".article-actions .icon-setting").parent().length&&(window.location=$(".article-actions .icon-setting").parent().attr("href")),!1}).bind("keyup","p",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=prev]").length&&(window.location=$(".article-header a[rel=prev]").attr("href")),!1}).bind("keyup","n",function(){return"v"===Util.prevKey&&1===$(".article-header a[rel=next]").length&&(window.location=$(".article-header a[rel=next]").attr("href")),!1})},init:function(){if($("#sendComment").click(function(){Comment._toggleReply()}),Comment.focusLocationHash(),this._initHotKey(),$.pjax({selector:"#comments .pagination a",container:"#comments",show:"",cache:!1,storage:!0,titleSuffix:"",callback:function(){Comment.initReactionWidgets($("#comments")),Util.parseMarkdown(),Util.parseHljs(),Util.listenUserCard(),Comment.focusLocationHash()}}),NProgress.configure({showSpinner:!1}),$("#comments").bind("pjax.start",function(){NProgress.start()}),$("#comments").bind("pjax.end",function(){NProgress.done()}),ArticleReaction.bindPanels(),ArticleReaction.initWidgets(),Comment.bindReactionPanels(),Comment.initReactionWidgets($("#comments")),!Label.isLoggedIn||!document.getElementById("commentContent"))return!1;Comment.editor=Util.newVditor({id:"commentContent",cache:!0,preview:{mode:"editor"},resize:{enable:!0,position:"top"},height:200,placeholder:Label.commentEditorPlaceholderLabel,ctrlEnter:function(){Comment.add(Label.articleOId,Label.csrfToken,document.getElementById("articleCommentBtn"))},esc:function(){$(".editor-hide").click()}})},thank:function(e,t,n,i,o){if(!Label.isLoggedIn)return Util.needLogin(),!1;if(0===i&&!confirm(n))return!1;var r={commentId:e};$.ajax({url:Label.servePath+"/comment/thank",type:"POST",headers:{csrfToken:t},cache:!1,data:JSON.stringify(r),error:function(e,t,n){Util.alert(n)},success:function(e,t){if(0===e.code){$(o).removeAttr("onclick");var n=$(''),i=$(o).offset().top,r=$(o).offset().left;n.css({"z-index":9999,top:i,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(n),n.animate({left:r-150,top:i-60,opacity:0},1e3,function(){var e=parseInt($(o).text());$(o).html(' '+(e+1)).addClass("ft-red"),n.remove()})}else Util.alert(e.msg)}})},showReply:function(e,t,n){var i=$(t).closest("li").find("."+n);if("comment-get-comment"===n){if(0!==i.find("li").length)return i.html(""),!1}else if(0===$(t).find(".icon-chevron-down").length)return $(t).find(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down").find("use").attr("xlink:href","#chevron-down"),i.html(""),!1;if("0.3"===$(t).css("opacity"))return!1;var o="/comment/replies";"comment-get-comment"===n&&(o="/comment/original"),$.ajax({url:Label.servePath+o,type:"POST",data:JSON.stringify({commentId:e,userCommentViewMode:Label.userCommentViewMode}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(e,n){if(0!==e.code)return Util.alert(e.msg),!1;var o=e.commentReplies,r="";o instanceof Array||(o=[o]),0===o.length&&(r='
  • '+Label.removedLabel+"
    • ");for(var a=0;a
    ',r+='',r+='
    ',r+="    ",r+='
    ',r+='',r+=Comment.renderCommentAuthorName(s),r+="",r+=Comment.renderOriginalAuthorLabel(s),r+=' • '+s.timeAgo,s.rewardedCnt>0&&(r+=' '+s.rewardedCnt+" "),r+="",r+='
    '+s.commentContent+"
    "+Comment.renderReactionBar(s.oId,s.reactionSummary,s.currentUserReaction)+"
    "}i.html("
      "+r+"
    "),Util.parseHljs(),Util.parseMarkdown(),$(t).find(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up").find("use").attr("xlink:href","#chevron-up")},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},showThreadReplies:function(e,t,n){if("0.3"===$(t).css("opacity"))return!1;$.ajax({url:Label.servePath+"/comment/thread/replies",type:"POST",data:JSON.stringify({commentId:e,paginationCurrentPageNum:n||1}),beforeSend:function(){$(t).css("opacity","0.3")},success:function(t){if(0!==t.code)return Util.alert(t.msg),!1;Comment.renderThreadResponse(t.commentThreadRootId||e,t.commentThreadReplies||[],null,{focus:!1,pagination:t.pagination})},error:function(e){Util.alert(e.statusText)},complete:function(){$(t).css("opacity","1")}})},add:function(e,t,n){var i={articleId:e,commentAnonymous:$("#commentAnonymous").prop("checked"),commentVisible:$("#commentVisible").prop("checked"),commentContent:Comment.editor.getValue(),userCommentViewMode:Label.userCommentViewMode};$("#replyUseName").data("commentOriginalCommentId")&&(i.commentOriginalCommentId=$("#replyUseName").data("commentOriginalCommentId"));var o=Label.servePath+"/comment",r="POST",a=$("#replyUseName").data("commentId");a&&(o=Label.servePath+"/comment/"+a,r="PUT"),$.ajax({url:o,type:r,headers:{csrfToken:t},cache:!1,data:JSON.stringify(i),beforeSend:function(){$(n).attr("disabled","disabled").css("opacity","0.3")},success:function(e,t){$(n).removeAttr("disabled").css("opacity","1"),0===e.code?(a&&(Comment.updateEditedCommentContent(a,e.commentContent),Comment.updateCommentHistoryAction(a,parseInt(e.commentRevisionCount||0))),i.commentOriginalCommentId&&Util.setUnreadNotificationCount(),Comment.editor.setValue(""),$(".editor-hide").click(),$("#replyUseName").text("").removeData(),i.commentOriginalCommentId&&Comment.focusCommentById(i.commentOriginalCommentId,{scroll:!1})):$("#addCommentTip").addClass("error").html("
    • "+e.msg+"
    ")},error:function(e){$("#addCommentTip").addClass("error").html("
    • "+e.statusText+"
    ")},complete:function(){$(n).removeAttr("disabled").css("opacity","1"),setTimeout(Util.listenUserCard,1e3)}})},reply:function(e,t){Comment._toggleReply(function(){var e=Comment.getCommentElement(t);0!==e.length&&$(window).height()-(e[0].offsetTop-$(window).scrollTop()+e.outerHeight())<$(".editor-panel .wrapper").outerHeight()&&$(window).scrollTop(e[0].offsetTop-($(window).height()-$(".editor-panel .wrapper").outerHeight()-e.outerHeight()))});var n="",i=Comment.escapeHTML(e),o=Comment.getCommentElement(t),r=o.find(">.fn-flex>div>a").clone();0===r.length&&(r=o.find(">.fn-flex .avatar").clone()),0===r.length?n=' '+i+"":r.is("a")?(r.addClass("ft-a-title").attr("href","#"+t).attr("onclick",'Comment._bgFade($("#'+t+'"))'),r.find("div").removeClass("avatar").addClass("avatar-small").after(" "+i).before(' '),n=r[0].outerHTML):(r.removeClass("avatar").addClass("avatar-small"),n=' '+r[0].outerHTML+" "+i+""),$("#replyUseName").html(n).data("commentOriginalCommentId",t)}},ArticleReaction={renderSummaryItems:function(e,t,n){for(var i=Comment.getReactionMap(t),o=[],r=0;r'),o.push('"),""!==m&&o.push(m,"")}}return o.join("")},renderPanel:function(e,t){for(var n=['
    '],i=0;i"),n.push('',o.emoji,""),n.push("")}return n.push("
    "),n.join("")},renderBar:function(e,t,n,i){var o=i?" is-open":"",r=['
    '];return r.push('
    '),r.push('
    ',ArticleReaction.renderSummaryItems(e,t,n),"
    "),r.push('
    "),r.push(ArticleReaction.renderPanel(e,n)),r.push("
    "),r.join("")},collectShells:function(e){var t=e?$(e):$(document);return t.hasClass("article-reaction-shell")?t.add(t.find(".article-reaction-shell")):t.find(".article-reaction-shell")},ensureShell:function(){if(!($(".article-reaction-shell, .article-reaction").length>0)&&Label.articleOId){var e=$(".article-main .tag-desc").first().closest(".fn-flex");0===e.length&&(e=$(".article-main .article-actions.action-btns").first()),0!==e.length&&$('
    ').insertAfter(e)}},getWidgets:function(e){return $('.article-reaction[data-target-id="'+e+'"]')},initWidgets:function(e){e||ArticleReaction.ensureShell(),ArticleReaction.collectShells(e).each(function(){var e=$(this);e.replaceWith(ArticleReaction.renderBar(e.attr("data-target-id"),e.attr("data-summary"),e.attr("data-current-user-reaction")||"",!1))})},closePanels:function(){$(".article-reaction.is-open").removeClass("is-open")},togglePanel:function(e){var t=$(e).closest(".article-reaction"),n=!t.hasClass("is-open");ArticleReaction.closePanels(),n&&t.addClass("is-open")},bindPanels:function(){$(document).off("click.articleReaction").on("click.articleReaction",function(e){0===$(e.target).closest(".article-reaction").length&&ArticleReaction.closePanels()})},updateBars:function(e,t,n,i){var o=ArticleReaction.getWidgets(e),r="boolean"==typeof i?i:o.first().hasClass("is-open");o.each(function(){$(this).replaceWith(ArticleReaction.renderBar(e,t,n,r))})},updateReactionFromChannel:function(e){var t=e.targetId,n=ArticleReaction.getWidgets(t);if(t&&0!==n.length){var i=e.actorUserId===Label.currentUserId?e.actorReaction||"":n.first().attr("data-current-user-reaction")||"";ArticleReaction.updateBars(t,e.summary||[],i,!1)}},react:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n).closest(".article-reaction");if("true"===i.attr("data-loading"))return!1;$.ajax({url:Label.servePath+"/article/reaction",type:"POST",data:JSON.stringify({articleId:e,groupType:"emoji",value:t}),beforeSend:function(){i.attr("data-loading","true").addClass("reaction-loading")},success:function(e){0===e.code?ArticleReaction.updateBars(e.data.targetId,e.data.summary,e.data.currentUserReaction,!1):Util.alert(e.msg)},error:function(e){Util.alert(e.statusText)},complete:function(){i.removeAttr("data-loading").removeClass("reaction-loading")}})}},Article={initAudio:function(){$(".content-audio").each(function(){var e=$(this);new APlayer({element:this,narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",preload:"none",mode:"circulation",music:{title:e.data("title"),author:'音乐分享',url:e.data("url"),pic:Label.staticServePath+"/images/music.png"}})});var e=$("#articleAudio");if(0===e.length)return!1;new APlayer({element:document.getElementById("articleAudio"),narrow:!1,autoplay:!1,mutex:!0,theme:"#4285f4",mode:"order",preload:"none",music:{title:"语音预览",author:'小薇',url:e.data("url"),pic:Label.staticServePath+"/images/blank.png"}})},permissionTip:function(e){Label.isLoggedIn?Util.alert(e):Util.needLogin()},voteUp:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.next();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/up/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(i.text()),r=parseInt(o.text());0!==e.code?Util.alert(e.msg):0===e.type?i.html(' '+(n-1)).removeClass("ft-red"):(i.html(' '+(n+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html(' '+(r-1)).removeClass("ft-red"))}})},voteDown:function(e,t,n){if(!Label.isLoggedIn)return Util.needLogin(),!1;var i=$(n),o=i.prev();if(i.hasClass("disabled"))return!1;var r={dataId:e};i.addClass("disabled"),$.ajax({url:Label.servePath+"/vote/down/"+t,type:"POST",cache:!1,data:JSON.stringify(r),success:function(e,t){i.removeClass("disabled");var n=parseInt(o.text()),r=parseInt(i.text());if(0===e.code)return 1===e.type?i.html(' '+(r-1)).removeClass("ft-red"):(i.html(' '+(r+1)).addClass("ft-red"),o.hasClass("ft-red")&&o.html(' '+(n-1)).removeClass("ft-red")),!1;Util.alert(e.msg)}})},previewImgAfterLoading:function(){$(".img-preview img").css("transform","translate3d("+Math.max(0,$(window).width()-$(".img-preview img").width())/2+"px, "+Math.max(0,$(window).height()-$(".img-preview img").height())/2+"px, 0)"),setTimeout(function(){$(".img-preview").width($(window).width())},300)},init:function(){this.initToc(),this.share(),Util.parseHljs(),Util.parseMarkdown();var e=null;$(".article").on("dblclick",".vditor-reset img",function(){clearTimeout(e),$(this).hasClass("emoji")||1===$(this).closest(".editor-panel").length||1===$(this).closest(".ad").length||window.open($(this).attr("src"))}).on("click",".vditor-reset img",function(t){if(clearTimeout(e),!$(this).hasClass("emoji")&&1!==$(this).closest(".editor-panel").length&&1!==$(this).closest(".ad").length){var n=$(this),i=this;e=setTimeout(function(){var e=i.offsetTop,t=i.offsetLeft;1===n.closest(".comments").length&&(e+=n.closest("li")[0].offsetTop,t=t+$(".comments")[0].offsetLeft+15);var o=(n.attr("src")||"").split("?imageView2")[0],r=$('
    ').on("click",function(){$(this).remove()}),a=$("").css("transform","translate3d("+Math.max(0,t)+"px, "+Math.max(0,e-$(window).scrollTop())+"px, 0)").attr("src",o).on("load",Article.previewImgAfterLoading);r.append(a),$("body").append(r),$(".img-preview").css({"background-color":"#fff",position:"fixed"})},100)}}),$("#reportDialog").dialog({width:$(window).width()>500?500:$(window).width()-50,height:450,modal:!0,hideFooter:!0}),this.initAudio(),$(window).scroll(function(){var e=$(window).scrollTop();$(".share").css("top",e+60+"px"),e<$(".article-title").offset().top?($(".article-header").css("top","-60px"),$(".nav").show()):($(".article-header").css("top","0"),$(".nav").hide())}),$(window).resize(function(){Article.syncTocLayout()});var t=location.search.split("r=")[1];t&&sessionStorage.setItem("r",t.split("&")[0]),$(function(){$.ajax({url:Label.servePath+"/api/article/reward/senders/"+Label.articleOId,method:"GET",async:!1,headers:{csrfToken:Label.csrfToken},success:function(e){if(0===e.code&&""!==e.data){let t=e.data;for(let e=0;e\n
    \n
    \n
    \n")}Util.listenUserCard()}}})})},revision:function(e,t){if(!Label.isLoggedIn)return Util.needLogin(),!1;t||(t="article"),Article._revisionDialogOpen("comment"===t?"评论历史":"文章历史"),"comment"===t?Article._legacyRevision(e,t):Article._articleRevision(e)},_revisionDialogInit:function(){$("#revisionDialog").length>0||($("body").append(''),$("#revisionDialog .revision-modal__body").append($("#revision")),$("#revisionDialog .revision-modal__overlay, #revisionDialog .revision-modal__close").click(function(){Article._revisionDialogClose()}),$(document).off("keydown.revisionDialog").on("keydown.revisionDialog",function(e){"Escape"===e.key&&$("#revisionDialog").hasClass("is-open")&&Article._revisionDialogClose()}))},_revisionDialogOpen:function(e){Article._revisionDialogInit(),$("#revisionDialogTitle").text(e||"历史版本"),$("#revisionDialog").addClass("is-open").attr("aria-hidden","false"),$("body").addClass("revision-modal-open"),$("#revisionDialog .revision-modal__close").focus()},_revisionDialogClose:function(){$("#revisionDialog").removeClass("is-open").attr("aria-hidden","true"),$("body").removeClass("revision-modal-open")},_legacyRevision:function(e,t){$.ajax({url:Label.servePath+"/"+t+"/"+e+"/revisions",cache:!1,success:function(e,n){if(0===e.code){if(0===e.revisions.length||1===e.revisions.length)return $("#revision > .revisions").remove(),$("#revisions").html(""+Label.noRevisionLabel+""),!1;$("#revisions").html("").prev().remove(),$("#revisions").data("revisions",e.revisions).before('
    '+(e.revisions.length-1)+"~"+e.revisions.length+"/"+e.revisions.length+'
    '),e.revisions.length<=2&&$("#revision a").first().addClass("disabled");var i=JsDiff.createPatch("",e.revisions[e.revisions.length-2].revisionData.articleContent||e.revisions[e.revisions.length-2].revisionData.commentContent,e.revisions[e.revisions.length-1].revisionData.articleContent||e.revisions[e.revisions.length-1].revisionData.commentContent,e.revisions[e.revisions.length-2].revisionData.articleTitle||"",e.revisions[e.revisions.length-1].revisionData.articleTitle||"");return new Diff2HtmlUI({diff:i}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0}),Article._revisionsControls(t),!1}Util.alert(e.msg)}})},_revisionsControls:function(e){var t=$("#revisions").data("revisions");$("#revision a.first").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions").text().split("~")[0]);e<=2?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.last").removeClass("disabled"),$("#revision .revisions > span").html(e-1+"~"+e+"/"+t.length);var n=JsDiff.createPatch("",t[e-2].revisionData.articleContent||t[e-2].revisionData.commentContent,t[e-1].revisionData.articleContent||t[e-1].revisionData.commentContent,t[e-2].revisionData.articleTitle||"",t[e-1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}}),$("#revision a.last").click(function(){if(!$(this).hasClass("disabled")){var e=parseInt($("#revision .revisions span").text().split("~")[0]);e>t.length-3?$(this).addClass("disabled"):$(this).removeClass("disabled"),t.length>2&&$("#revision a.first").removeClass("disabled"),$("#revision .revisions > span").html(e+1+"~"+(e+2)+"/"+t.length);var n=JsDiff.createPatch("",t[e].revisionData.articleContent||t[e].revisionData.commentContent,t[e+1].revisionData.articleContent||t[e+1].revisionData.commentContent,t[e].revisionData.articleTitle||"",t[e+1].revisionData.articleTitle||"");new Diff2HtmlUI({diff:n}).draw("#revisions",{matching:"lines",outputFormat:"side-by-side",synchronisedScroll:!0})}})},_articleRevision:function(e){$("#revision > .revisions").remove(),$("#revisions").removeData("revisions").removeData("revisionDetails").html("加载中"),$.ajax({url:Label.servePath+"/article/"+e+"/revisions/list",cache:!1,success:function(t){if(0===t.code){var n=t.revisions||[];n.length<2?$("#revisions").html(""+Label.noRevisionLabel+""):($("#revisions").data("revisions",n).data("revisionDetails",{}).html(Article._revisionPickerHtml(n)),Article._revisionBindPicker(e),Article._revisionCompare(e))}else $("#revisions").html(""+Article._revisionEscapeHTML(t.msg||"加载失败")+"")},error:function(){$("#revisions").html("加载失败")}})},_revisionPickerHtml:function(e){for(var t=e.length-2,n=e.length-1,i="",o="",r=0;r
    '},_revisionOptionHtml:function(e,t){return'"},_revisionVersionLabel:function(e){return e.current?"当前 "+e.revisionTimeStr:e.revisionTimeStr},_revisionBindPicker:function(e){$("#revision .revision-picker__compare").click(function(){Article._revisionCompare(e)}),$("#revision .revision-picker__diff-only").change(function(){Article._revisionCompare(e)})},_revisionCompare:function(e){var t=$("#revision .revision-picker__base").val(),n=$("#revision .revision-picker__target").val(),i=$("#revision .revision-picker__diff-only").is(":checked");$("#revisions .revision-diff").html("加载中"),$.when(Article._revisionFetch(e,t),Article._revisionFetch(e,n)).done(function(e,t){Article._revisionRenderCompare(e,t,i)}).fail(function(e){$("#revisions .revision-diff").html(""+Article._revisionEscapeHTML(e||"加载失败")+"")})},_revisionFetch:function(e,t){var n=$("#revisions").data("revisionDetails")||{},i=$.Deferred();return n[t]?(i.resolve(n[t]),i.promise()):($.ajax({url:Label.servePath+"/article/"+e+"/revisions/"+encodeURIComponent(t),cache:!1,success:function(e){0===e.code?(n[t]=e.revision,$("#revisions").data("revisionDetails",n),i.resolve(e.revision)):i.reject(e.msg)},error:function(){i.reject("加载失败")}}),i.promise())},_revisionRenderCompare:function(e,t,n){var i=e.revisionData||{},o=t.revisionData||{},r=Article._revisionRenderInlineDiff("标题",i.articleTitle||"",o.articleTitle||"",n);r+=Article._revisionRenderLineDiff("内容",i.articleContent||"",o.articleContent||"",n),$("#revisions .revision-diff").html(r||"无差异")},_revisionRenderInlineDiff:function(e,t,n,i){for(var o=JsDiff.diffWordsWithSpace?JsDiff.diffWordsWithSpace(t,n):JsDiff.diffWords(t,n),r=!1,a="",s=0;s'+Article._revisionEscapeHTML(o[s].value)+"")}return i&&!r?"":'

    '+e+'

    '+a+"
    "},_revisionRenderLineDiff:function(e,t,n,i){for(var o=JsDiff.diffLines(t,n),r=!1,a="",s=0;s

    '+e+'

    '+a+"
    "},_revisionLineHtml:function(e,t){for(var n=Article._revisionSplitLines(e),i="",o=0;o'+Article._revisionEscapeHTML(n[o])+"
    ";return i},_revisionSplitLines:function(e){var t=e.split("\n");return""===t[t.length-1]&&t.pop(),t},_revisionEscapeHTML:function(e){return String(e).replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")},share:function(){var e=$("#qrCode").data("shareurl");$("#qrCode").qrcode({width:90,height:90,text:e}),$("body").click(function(){$("#qrCode").slideUp()}),$(".share > span").click(function(){var t=$(this).data("type");if(!t)return!1;if("wechat"===t)return $("#qrCode").slideToggle(),!1;if("copy"===t)return!1;var n=encodeURIComponent(Label.articleTitle+" - "+Label.symphonyLabel),i=encodeURIComponent(e),o=$(".article-info .avatar-mid").css("background-image");pic=o.substring(5,o.length-2);var r={};r.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+n+"&url="+i+"&pic="+pic,r.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+i+"&pic="+pic,r.google="https://plus.google.com/share?url="+i,r.twitter="https://twitter.com/intent/tweet?status="+n+" "+i,window.open(r[t],"_blank","top=100,left=200,width=648,height=618")}),$("#qrCode").click(function(){$(this).hide()}),$("#shareClipboard").mouseover(function(){$(this).attr("aria-label",Label.copyLabel)}),Util.clipboard($("#shareClipboard"),$("#shareClipboard").next(),function(){$("#shareClipboard").attr("aria-label",Label.copiedLabel)})},reward:function(e){confirm(Label.rewardConfirmLabel)&&$.ajax({url:Label.servePath+"/article/reward?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0!==e.code)Util.alert(e.msg);else{$("#articleRewardContent .vditor-reset").html(e.articleRewardContent),Util.parseHljs(),Util.parseMarkdown();var n=$("#articleRewardContent > span"),i=parseInt(n.text());n.addClass("ft-red").removeClass("ft-blue").html(i+1+" "+Label.rewardLabel).removeAttr("onclick")}},error:function(e){Util.needLogin()}})},thankArticle:function(e,t){return Label.isLoggedIn?!(0===t&&!confirm(Label.thankArticleConfirmLabel))&&(Label.currentUserName===Label.articleAuthorName?(Util.alert(Label.thankSelfLabel),!1):void $.ajax({url:Label.servePath+"/article/thank?articleId="+e,type:"POST",cache:!1,success:function(e,t){if(0===e.code){var n=parseInt($("#thankArticle").text());$("#thankArticle").removeAttr("onclick").html(''+(n+1)+"").addClass("ft-red").removeClass("ft-blue");var i=$(''),o=$("#thankArticle").offset().top,r=$("#thankArticle").offset().left;return i.css({"z-index":9999,top:o-20,left:r,position:"absolute","font-size":16,"-moz-user-select":"none","-webkit-user-select":"none","-ms-user-select":"none"}),$("body").append(i),i.animate({top:o-180,opacity:0},1500,function(){i.remove()}),!1}Util.alert(e.msg)}})):(Util.needLogin(),!1)},stick:function(e){confirm(Label.stickConfirmLabel)&&$.ajax({url:Label.servePath+"/article/stick?articleId="+e,type:"POST",cache:!1,success:function(e,t){Util.alert(e.msg),window.location.href=Label.servePath+"/recent"}})},playThought:function(e){var t=String.fromCharCode(31),n=String.fromCharCode(30),i=String.fromCharCode(29),o=String.fromCharCode(10),r=String.fromCharCode(24),a=$("#thoughtProgress > span"),s=$("#thoughtProgress > svg"),l="#articleThought",c=function(e,n){var o=e.split(t);3===o.length&&o.splice(0,0,"");var a=o[0],s=o[2].split("-"),l=o[3].split("-");if(s[0]=parseInt(s[0]),s[1]=parseInt(s[1]),l[0]=parseInt(l[0]),l[1]=parseInt(l[1]),a===r){for(var c=[],m=s[1],d=0;l[1],m").replace(/ /g," ").replace(/ /g,"    ");$(l).data("text",e).html(t)},parseInt(m[u].split(t)[1])/d);for(var h=0,f=parseInt(m[u-1].split(t)[1])/d,v=setInterval(function(){h>=f?(a.width("100%"),s.css("left","100%"),clearInterval(v)):(h+=20,s.css("left",100*h/f+"%"),a.width(100*h/f+"%"))},20),g="",C="",b=0,y=0,w=0;y").replace(/ /g," ").replace(/ /g,"    "),g=L,$(l).html(C),b=Math.max(b,$(l).height())}$("#thoughtProgressPreview").html('
    '+C+"
    "),$("#thoughtProgressPreview").dialog({modal:!0,hideFooter:!0}),s.click(function(){$("#thoughtProgressPreview").dialog("open")}),$(l).html(C).height(b).css("margin-bottom","15px").html("")},syncTocLayout:function(){var e=1===$("#articleToC").length;return $("body.article").toggleClass("article--has-toc",e),$(".article-body .wrapper, #articleCommentsPanel, .article-footer").css("margin-right",""),e&&$("#articleToC > .module-panel").height($(window).height()-48),e},initToc:function(){if(!this.syncTocLayout())return!1;var e=$("#articleToC"),t=$(".article-toc"),n=$(".article-content [id^=toc]"),i=!1;e.offset().top;toc=[],e.find("li").click(function(){var t=$(this);let n=$(this).find("a").text();n=normalizeHeadingIdFromString(n),document.getElementById(n).scrollIntoView({behavior:"smooth"}),setTimeout(function(){e.find("li").removeClass("current"),t.addClass("current")},50)}),$(window).scroll(function(o){if(parseInt($("#articleToC").css("right"))<0)return!1;$("#articleToC > .module-panel").height($(window).height()-49),toc=[],n.each(function(e){toc.push({id:this.id,offsetTop:this.offsetTop})});for(var r=$(window).scrollTop(),a=0,s=toc.length;a0?a-1:0;e.find('a[data-id="'+toc[l].id+'"]').parent().addClass("current");break}r>=toc[toc.length-1].offsetTop-53&&(e.find("li").removeClass("current"),e.find("li:last").addClass("current"));var c=e.find("li.current")[0].offsetTop;i||(t.scrollTop()c-30&&t.scrollTop(c)),setTimeout(function(){i=!1},600)}),$(window).scroll(),t.scrollTop(e.find("li.current")[0].offsetTop).scroll(function(){i=!0})},toggleToc:function(){var e=$("#articleToC");if(0===e.length)return!1;var t=$(".article-header .icon-unordered-list");t.hasClass("ft-red")?(e.animate({right:"-"+$("#articleToC").outerWidth()+"px"}),t.removeClass("ft-red"),$(".article-actions .icon-unordered-list").removeClass("ft-red")):(e.animate({right:0}),t.addClass("ft-red"),$(".article-actions .icon-unordered-list").addClass("ft-red"))},getNotificationCommentIds:function(e){var t=[],n=function(e){(e=String(e||"").replace(/^#/,"").trim())&&-1===t.indexOf(e)&&t.push(e)};return String(e||"").split(",").forEach(n),n(window.location.hash),t.join(",")},makeNotificationRead:function(e,t){var n={articleId:e,commentIds:Article.getNotificationCommentIds(t)};$.ajax({url:Label.servePath+"/notifications/make-read",type:"POST",cache:!1,data:JSON.stringify(n)})}},ArticleAdjacentNav={storageKey:"articleAdjacentSort",sortValues:["time","author","hot"],init:function(){var e=$("[data-article-nav-sort]");0!==e.length&&(this.applySort(e,this.getStoredSort()),this.bindSortChange(e))},getStoredSort:function(){var e=window.localStorage.getItem(this.storageKey);return this.isValidSort(e)?e:"time"},isValidSort:function(e){return-1!==this.sortValues.indexOf(e)},bindSortChange:function(e){var t=this;e.find(".article-nav-sort__input").on("change",function(){this.checked&&t.isValidSort(this.value)&&(window.localStorage.setItem(t.storageKey,this.value),t.applySort(e,this.value))})},applySort:function(e,t){e.find('.article-nav-sort__input[value="'+t+'"]').prop("checked",!0)}};Article.init(),$(document).ready(function(){ArticleAdjacentNav.init(),Comment.init(),EmojiGroups.init("Comment","New"),Comment.loadEmojiGroupsNew(),(()=>{let e=(new Date).getTime(),t=0;const n=function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),t=setTimeout(()=>{(new Date).getTime()-e<=700&&$("#emojiList").removeClass("showList")},null!==navigator.userAgent.match(/(phone|pad|pod|ios|Android|Mobile|BlackBerry|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian)/i)?0:600)};$("#emojiBtn").hover(function(){0!==t&&(clearTimeout(t),t=0),$("#emojiList").css("top","auto"),$("#emojiList").css("bottom","60px"),e=(new Date).getTime(),EmojiGroups.ensureCurrentFresh(Comment,"New"),setTimeout(()=>0!==$("#emojiBtn:hover").length&&$("#emojiList").addClass("showList"),300)},n),$("#emojiList").hover(function(){0!==t&&(clearTimeout(t),t=0),e=(new Date).getTime()},n)})(),ArticleChannel.init(Label.articleChannel),Label.isLoggedIn&&(Article.makeNotificationRead(Label.articleOId,Label.notificationCmtIds),setTimeout(function(){Util.setUnreadNotificationCount()},1e3))}),Article.initCollectButtons=function(){$(".comment-action .action-btns").each(function(){const e=$(this);if(e.data("collect-inited"))return;const t=e.closest("li").find(".vditor-reset.comment").first();if(!t.length)return;const n=t.find("img").filter(function(){return!$(this).hasClass("emoji")&&0===$(this).closest(".editor-panel, .ad").length}).map(function(){return $(this).attr("src")}).get().filter(Boolean),i=Array.from(new Set(n));if(!i.length)return;e.data("collect-inited",!0);const o=$('');o.append(' 收藏表情'),o.on("click",function(e){e.stopPropagation(),EmojiGroups.openCollectDialog(i)}),e.prepend(o).prepend(" ")})},$(function(){Article.initCollectButtons()}); \ No newline at end of file diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 7717a6a0..2f48fe2a 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -104,6 +104,7 @@ window.LongArticle = { root.style.setProperty('--long-article-half-width', halfWidth); root.style.setProperty('--long-article-font-size', this.settings.desktopFontSize + 'px'); this.updateWidthButtons(); + this.updateLayoutMetrics(); }, bindEvents: function () { @@ -150,6 +151,10 @@ window.LongArticle = { self.closeComments(); } }); + + window.addEventListener('resize', function () { + self.updateLayoutMetrics(); + }); }, findActionElement: function (target, boundary) { @@ -206,6 +211,41 @@ window.LongArticle = { } }, + updateLayoutMetrics: function () { + var root = document.documentElement; + var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); + var selectedWidth = this.settings.width === 'auto' ? Math.min(viewportWidth * 0.8, 1200) : parseInt(this.settings.width, 10); + var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28)); + var drawerWidth = viewportWidth <= 768 ? Math.max(320, viewportWidth - 20) : Math.min(430, Math.max(360, viewportWidth * 0.3)); + var articleDrawerGap = 14; + var toolbarGap = 14; + var toolbarWidth = 44; + var safeMargin = 14; + var inline = viewportWidth >= 1100; + var openArticleWidth = closedArticleWidth; + + if (inline) { + var maxInlineStageWidth = viewportWidth - (toolbarWidth + toolbarGap + safeMargin) * 2; + var maxInlineArticleWidth = maxInlineStageWidth - drawerWidth - articleDrawerGap; + openArticleWidth = Math.min(closedArticleWidth, Math.max(560, maxInlineArticleWidth)); + inline = openArticleWidth >= 560; + } + + var stageWidth = inline ? openArticleWidth + articleDrawerGap + drawerWidth : closedArticleWidth; + var stageLeft = Math.max(safeMargin, (viewportWidth - stageWidth) / 2); + var drawerLeft = inline ? stageLeft + openArticleWidth + articleDrawerGap : viewportWidth - drawerWidth; + var closedToolbarLeft = Math.min(viewportWidth - toolbarWidth - safeMargin, (viewportWidth - closedArticleWidth) / 2 + closedArticleWidth + toolbarGap); + var openToolbarLeft = inline ? Math.min(viewportWidth - toolbarWidth - safeMargin, stageLeft + stageWidth + toolbarGap) : closedToolbarLeft; + + root.style.setProperty('--long-article-stage-width', stageWidth + 'px'); + root.style.setProperty('--long-article-open-article-width', openArticleWidth + 'px'); + document.body.style.setProperty('--long-article-drawer-width', drawerWidth + 'px'); + root.style.setProperty('--long-article-drawer-left', drawerLeft + 'px'); + root.style.setProperty('--long-article-toolbar-closed-left', closedToolbarLeft + 'px'); + root.style.setProperty('--long-article-toolbar-open-left', openToolbarLeft + 'px'); + document.body.classList.toggle('long-article-comments-inline', inline); + }, + scrollToTop: function () { window.scrollTo({top: 0, behavior: 'smooth'}); }, @@ -233,6 +273,7 @@ window.LongArticle = { return; } this.closeLayoutPanel(); + this.updateLayoutMetrics(); document.body.classList.add('long-article-comments-open'); panel.setAttribute('aria-hidden', 'false'); if (button) { @@ -245,8 +286,8 @@ window.LongArticle = { var panel = this.getCommentsPanel(); var button = document.querySelector('[data-long-article-action="comments"]'); var editorPanel = document.querySelector('.editor-panel'); - if (editorPanel && window.getComputedStyle(editorPanel).display !== 'none' && window.getComputedStyle(editorPanel).bottom === '0px' && window.Comment && typeof window.Comment._toggleReply === 'function') { - window.Comment._toggleReply(); + if (editorPanel && window.getComputedStyle(editorPanel).display !== 'none' && window.Comment && typeof window.Comment._hideReplyPanel === 'function') { + window.Comment._hideReplyPanel(); } document.body.classList.remove('long-article-comments-open'); if (panel) { diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js index fa7296c2..e06e5e32 100644 --- a/src/main/resources/js/long-article.min.js +++ b/src/main/resources/js/long-article.min.js @@ -1 +1 @@ -window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&"0px"===window.getComputedStyle(n).bottom&&window.Comment&&"function"==typeof window.Comment._toggleReply&&window.Comment._toggleReply(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file +window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(320,e-20):Math.min(430,Math.max(360,.3*e)),a=e>=1100,s=o;if(a){var l=e-144-i-14;a=(s=Math.min(o,Math.max(560,l)))>=560}var r=a?s+14+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+14:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?Math.min(e-44-14,c+r+14):m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/js/m-long-article.js b/src/main/resources/js/m-long-article.js index 7b6e52a8..43c64bb6 100644 --- a/src/main/resources/js/m-long-article.js +++ b/src/main/resources/js/m-long-article.js @@ -168,8 +168,8 @@ window.MLongArticle = { var panel = this.getCommentsPanel(); var button = document.querySelector('[data-long-article-action="comments"]'); var editorPanel = document.querySelector('.editor-panel'); - if (editorPanel && editorPanel.classList.contains('editor-panel--open') && window.Comment && typeof window.Comment._toggleReply === 'function') { - window.Comment._toggleReply(); + if (editorPanel && editorPanel.classList.contains('editor-panel--open') && window.Comment && typeof window.Comment._hideReplyPanel === 'function') { + window.Comment._hideReplyPanel(); } document.body.classList.remove('long-article-comments-open'); if (panel) { diff --git a/src/main/resources/js/m-long-article.min.js b/src/main/resources/js/m-long-article.min.js index 2613b324..6f13694b 100644 --- a/src/main/resources/js/m-long-article.min.js +++ b/src/main/resources/js/m-long-article.min.js @@ -1 +1 @@ -window.MLongArticle={storageKey:"longArticleSettings",settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=["auto","600","800","1000","1200"].indexOf(String(t.width||"800"))>=0?String(t.width||"800"):"800",e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize||t.fontSize,16,24,16));try{var o=parseInt(window.localStorage.getItem("longArticleFontSize"),10),n=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!n||isNaN(parseInt(n.fontSize,10))?t.mobileFontSize||isNaN(o)||(e.mobileFontSize=this.normalizeFontSize(o,16,24,16)):e.mobileFontSize=this.normalizeFontSize(parseInt(n.fontSize,10),16,24,16),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeFontSize:function(t,e,o,n){return t=parseInt(t,10),isNaN(t)?n:Math.max(e,Math.min(o,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){document.documentElement.style.setProperty("--long-article-font-size",this.settings.mobileFontSize+"px")},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(o){for(var n=o.target;n&&n!==e&&!n.hasAttribute("data-long-article-action");)n=n.parentNode;if(n&&n!==e){var i=n.getAttribute("data-long-article-action");if("toggle"===i){var s=!e.classList.contains("is-open");e.classList.toggle("is-open",s),n.classList.toggle("active",s),n.setAttribute("aria-expanded",s?"true":"false")}else"top"===i?window.scrollTo({top:0,behavior:"smooth"}):"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i&&t.setFontSize(2)}}),document.addEventListener("click",function(e){e.target.closest&&e.target.closest("[data-long-article-comments-close]")&&t.closeComments()}))},setFontSize:function(t){this.settings.mobileFontSize=this.normalizeFontSize(this.settings.mobileFontSize+t,12,24,16),this.saveSettings(),this.applySettings()},getCommentsPanel:function(){return document.getElementById("comments")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),o=document.querySelector(".editor-panel");o&&o.classList.contains("editor-panel--open")&&window.Comment&&"function"==typeof window.Comment._toggleReply&&window.Comment._toggleReply(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),o=e?document.getElementById(e):null;return!!(t&&o&&t.contains(o))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),o=e?document.getElementById(e):null,n=t.getCommentsPanel();n&&o&&n.contains(o)&&o.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file +window.MLongArticle={storageKey:"longArticleSettings",settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=["auto","600","800","1000","1200"].indexOf(String(t.width||"800"))>=0?String(t.width||"800"):"800",e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize||t.fontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10),o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))?t.mobileFontSize||isNaN(n)||(e.mobileFontSize=this.normalizeFontSize(n,16,24,16)):e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){document.documentElement.style.setProperty("--long-article-font-size",this.settings.mobileFontSize+"px")},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){for(var o=n.target;o&&o!==e&&!o.hasAttribute("data-long-article-action");)o=o.parentNode;if(o&&o!==e){var i=o.getAttribute("data-long-article-action");if("toggle"===i){var s=!e.classList.contains("is-open");e.classList.toggle("is-open",s),o.classList.toggle("active",s),o.setAttribute("aria-expanded",s?"true":"false")}else"top"===i?window.scrollTo({top:0,behavior:"smooth"}):"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i&&t.setFontSize(2)}}),document.addEventListener("click",function(e){e.target.closest&&e.target.closest("[data-long-article-comments-close]")&&t.closeComments()}))},setFontSize:function(t){this.settings.mobileFontSize=this.normalizeFontSize(this.settings.mobileFontSize+t,12,24,16),this.saveSettings(),this.applySettings()},getCommentsPanel:function(){return document.getElementById("comments")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&n.classList.contains("editor-panel--open")&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 7ab18e4b..bc122dd4 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5206,7 +5206,7 @@ code .dec { } .article.long-article-page { - --long-article-comments-width: min(430px, calc(100vw - 72px)); + --long-article-drawer-width: min(430px, calc(100vw - 72px)); min-height: 100vh; padding-top: 0; overflow-x: hidden; @@ -5226,15 +5226,28 @@ code .dec { display: none !important; } - .article-container { + .long-article-reading-stage { + display: flex; + align-items: flex-start; + column-gap: 0; box-sizing: border-box; width: min(var(--long-article-width, 800px), calc(100vw - 28px)); - max-width: none; + max-width: calc(100vw - 28px); margin: 0 auto; + transition: width 0.32s ease, column-gap 0.32s ease; + } + + .article-container { + flex: 0 0 100%; + box-sizing: border-box; + width: 100%; + max-width: none; + margin: 0; border: 0; border-radius: 0; background: #dcebdd; box-shadow: none; + transition: width 0.32s ease, flex-basis 0.32s ease; } .article-body { @@ -5264,8 +5277,10 @@ code .dec { } } - > .main { + .long-article-reading-stage > .main { + flex: 0 0 0; box-sizing: border-box; + width: 0; min-height: 0; height: 0; margin: 0; @@ -5273,18 +5288,17 @@ code .dec { overflow: visible; border-top: 0; background: transparent; + transition: width 0.32s ease, flex-basis 0.32s ease; } #articleCommentsPanel { - position: fixed; + position: sticky; top: 0; - right: 0; - bottom: 0; z-index: 115; display: flex; flex-direction: column; box-sizing: border-box; - width: var(--long-article-comments-width); + width: 100%; height: 100vh; height: 100dvh; max-width: none; @@ -5298,8 +5312,10 @@ code .dec { border-radius: 0; background: #dcebdd; box-shadow: -16px 0 38px rgba(40, 66, 47, 0.16); - transform: translateX(100%); - transition: transform 0.28s ease, visibility 0s linear 0.28s; + opacity: 0; + pointer-events: none; + transform: translateX(24px); + transition: opacity 0.24s ease, transform 0.32s ease, visibility 0s linear 0.32s; visibility: hidden; > .module { @@ -5310,6 +5326,10 @@ code .dec { box-shadow: none; } + > #comments { + margin-top: 0; + } + > .pagination { flex: 0 0 auto; margin: 18px auto 0; @@ -5318,19 +5338,61 @@ code .dec { } &.long-article-comments-open { + .long-article-settings { + right: auto; + left: var(--long-article-toolbar-open-left, calc(100vw - 58px)); + z-index: 121; + } + + .editor-panel { + right: auto; + left: var(--long-article-drawer-left, calc(100vw - var(--long-article-drawer-width))); + } + #articleCommentsPanel { + opacity: 1; + pointer-events: auto; transform: translateX(0); transition-delay: 0s; visibility: visible; } + } - .long-article-settings { - right: calc(var(--long-article-comments-width) + 14px); - left: auto; - z-index: 121; + &.long-article-comments-open.long-article-comments-inline { + .long-article-reading-stage { + column-gap: 14px; + width: var(--long-article-stage-width, calc(var(--long-article-width, 800px) + var(--long-article-drawer-width) + 14px)); + max-width: calc(100vw - 28px); + } + + .article-container { + flex-basis: var(--long-article-open-article-width, var(--long-article-width, 800px)); + width: var(--long-article-open-article-width, var(--long-article-width, 800px)); + } + + .long-article-reading-stage > .main { + flex-basis: var(--long-article-drawer-width); + width: var(--long-article-drawer-width); + height: auto; + } + } + + &.long-article-comments-open:not(.long-article-comments-inline) { + #articleCommentsPanel { + position: fixed; + right: auto; + bottom: 0; + left: var(--long-article-drawer-left, calc(100vw - var(--long-article-drawer-width))); + width: var(--long-article-drawer-width); } } + .long-article-settings { + right: auto; + left: var(--long-article-toolbar-closed-left, min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 58px))); + transition: left 0.32s ease; + } + #comments { order: -1; margin: 0; @@ -5515,8 +5577,9 @@ code .dec { .editor-panel { right: 0; left: auto; - width: var(--long-article-comments-width); - max-width: var(--long-article-comments-width); + width: var(--long-article-drawer-width); + max-width: var(--long-article-drawer-width); + transition: left 0.32s ease; .editor-bg { display: none; @@ -5935,7 +5998,7 @@ body.night { color: #eef4ef; } - > .main { + .long-article-reading-stage > .main { background: #0a0a0a; } @@ -6149,8 +6212,6 @@ body.night { @media (max-width: 768px) { .article.long-article-page { - --long-article-comments-width: calc(100vw - 20px); - .article-container { margin-top: 0; border-radius: 0; @@ -6164,11 +6225,6 @@ body.night { font-size: 26px; } - > .main { - margin-top: 20px; - padding: 24px 0 30px; - } - #articleCommentsPanel { padding: 0 18px 82px; border-radius: 0; diff --git a/src/main/resources/skins/classic/pc/article.ftl b/src/main/resources/skins/classic/pc/article.ftl index 7a1fdf3b..28b65c00 100644 --- a/src/main/resources/skins/classic/pc/article.ftl +++ b/src/main/resources/skins/classic/pc/article.ftl @@ -86,6 +86,9 @@ <#if !hidePageChrome> <#include "header.ftl"> +<#if 6 == article.articleType> +
    +
    <#if showTopAd && 6 != article.articleType> @@ -561,6 +564,9 @@ <#if pjax>
    +<#if 6 == article.articleType> +
    +
    <#if 6 != article.articleType> <#if sideRelevantArticles?size != 0> From d7c9b2be60a4c4c2d01df17f4e6c692a813210ac Mon Sep 17 00:00:00 2001 From: Yui Date: Sat, 18 Jul 2026 17:32:49 +0800 Subject: [PATCH 07/30] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E9=9D=A2=E6=9D=BF=E7=BA=B5=E5=90=91=E9=94=99?= =?UTF-8?q?=E4=BD=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/scss/index.scss | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index bc122dd4..7d0059b5 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5292,13 +5292,16 @@ code .dec { } #articleCommentsPanel { - position: sticky; + position: fixed; top: 0; + right: auto; + bottom: 0; + left: var(--long-article-drawer-left, calc(100vw - var(--long-article-drawer-width))); z-index: 115; display: flex; flex-direction: column; box-sizing: border-box; - width: 100%; + width: var(--long-article-drawer-width); height: 100vh; height: 100dvh; max-width: none; @@ -5315,7 +5318,7 @@ code .dec { opacity: 0; pointer-events: none; transform: translateX(24px); - transition: opacity 0.24s ease, transform 0.32s ease, visibility 0s linear 0.32s; + transition: left 0.32s ease, opacity 0.24s ease, transform 0.32s ease, visibility 0s linear 0.32s; visibility: hidden; > .module { @@ -5377,16 +5380,6 @@ code .dec { } } - &.long-article-comments-open:not(.long-article-comments-inline) { - #articleCommentsPanel { - position: fixed; - right: auto; - bottom: 0; - left: var(--long-article-drawer-left, calc(100vw - var(--long-article-drawer-width))); - width: var(--long-article-drawer-width); - } - } - .long-article-settings { right: auto; left: var(--long-article-toolbar-closed-left, min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 58px))); From e5c5f0c039b537e3e07da084c4897933e144d13a Mon Sep 17 00:00:00 2001 From: Yui Date: Sat, 18 Jul 2026 17:44:48 +0800 Subject: [PATCH 08/30] =?UTF-8?q?=E6=94=B6=E7=AA=84=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E9=9D=A2=E6=9D=BF=E5=B9=B6=E4=BF=AE=E6=AD=A3?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 6 +++--- src/main/resources/js/long-article.min.js | 2 +- src/main/resources/scss/index.scss | 14 +++++++++----- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 2f48fe2a..edc4bab6 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -216,8 +216,8 @@ window.LongArticle = { var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); var selectedWidth = this.settings.width === 'auto' ? Math.min(viewportWidth * 0.8, 1200) : parseInt(this.settings.width, 10); var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28)); - var drawerWidth = viewportWidth <= 768 ? Math.max(320, viewportWidth - 20) : Math.min(430, Math.max(360, viewportWidth * 0.3)); - var articleDrawerGap = 14; + var drawerWidth = viewportWidth <= 768 ? Math.max(320, viewportWidth - 20) : Math.min(360, Math.max(320, viewportWidth * 0.22)); + var articleDrawerGap = 0; var toolbarGap = 14; var toolbarWidth = 44; var safeMargin = 14; @@ -235,7 +235,7 @@ window.LongArticle = { var stageLeft = Math.max(safeMargin, (viewportWidth - stageWidth) / 2); var drawerLeft = inline ? stageLeft + openArticleWidth + articleDrawerGap : viewportWidth - drawerWidth; var closedToolbarLeft = Math.min(viewportWidth - toolbarWidth - safeMargin, (viewportWidth - closedArticleWidth) / 2 + closedArticleWidth + toolbarGap); - var openToolbarLeft = inline ? Math.min(viewportWidth - toolbarWidth - safeMargin, stageLeft + stageWidth + toolbarGap) : closedToolbarLeft; + var openToolbarLeft = inline ? stageLeft + stageWidth + toolbarGap : closedToolbarLeft; root.style.setProperty('--long-article-stage-width', stageWidth + 'px'); root.style.setProperty('--long-article-open-article-width', openArticleWidth + 'px'); diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js index e06e5e32..98e05c02 100644 --- a/src/main/resources/js/long-article.min.js +++ b/src/main/resources/js/long-article.min.js @@ -1 +1 @@ -window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(320,e-20):Math.min(430,Math.max(360,.3*e)),a=e>=1100,s=o;if(a){var l=e-144-i-14;a=(s=Math.min(o,Math.max(560,l)))>=560}var r=a?s+14+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+14:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?Math.min(e-44-14,c+r+14):m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file +window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(320,e-20):Math.min(360,Math.max(320,.22*e)),a=e>=1100,s=o;if(a){var l=e-144-i-0;a=(s=Math.min(o,Math.max(560,l)))>=560}var r=a?s+0+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+0:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?c+r+14:m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 7d0059b5..a84e1a91 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5206,7 +5206,7 @@ code .dec { } .article.long-article-page { - --long-article-drawer-width: min(430px, calc(100vw - 72px)); + --long-article-drawer-width: min(360px, calc(100vw - 72px)); min-height: 100vh; padding-top: 0; overflow-x: hidden; @@ -5314,7 +5314,7 @@ code .dec { border-left: 1px solid rgba(61, 91, 68, 0.14); border-radius: 0; background: #dcebdd; - box-shadow: -16px 0 38px rgba(40, 66, 47, 0.16); + box-shadow: none; opacity: 0; pointer-events: none; transform: translateX(24px); @@ -5363,11 +5363,15 @@ code .dec { &.long-article-comments-open.long-article-comments-inline { .long-article-reading-stage { - column-gap: 14px; - width: var(--long-article-stage-width, calc(var(--long-article-width, 800px) + var(--long-article-drawer-width) + 14px)); + column-gap: 0; + width: var(--long-article-stage-width, calc(var(--long-article-width, 800px) + var(--long-article-drawer-width))); max-width: calc(100vw - 28px); } + .long-article-settings { + left: calc(var(--long-article-drawer-left) + var(--long-article-drawer-width) + 14px); + } + .article-container { flex-basis: var(--long-article-open-article-width, var(--long-article-width, 800px)); width: var(--long-article-open-article-width, var(--long-article-width, 800px)); @@ -5998,7 +6002,7 @@ body.night { #articleCommentsPanel { background: #111111; border-left-color: rgba(255, 255, 255, 0.08); - box-shadow: -16px 0 38px rgba(0, 0, 0, 0.34); + box-shadow: none; } #comments { From b48462425ed4426d781378e6971ac381e4442ec3 Mon Sep 17 00:00:00 2001 From: Yui Date: Sat, 18 Jul 2026 18:03:01 +0800 Subject: [PATCH 09/30] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E9=9D=A2=E6=9D=BF=E6=BB=9A=E5=8A=A8=E6=9D=A1?= =?UTF-8?q?=E5=81=8F=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 2 +- src/main/resources/js/long-article.min.js | 2 +- src/main/resources/scss/index.scss | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index edc4bab6..3c29d45f 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -213,7 +213,7 @@ window.LongArticle = { updateLayoutMetrics: function () { var root = document.documentElement; - var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); + var viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0; var selectedWidth = this.settings.width === 'auto' ? Math.min(viewportWidth * 0.8, 1200) : parseInt(this.settings.width, 10); var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28)); var drawerWidth = viewportWidth <= 768 ? Math.max(320, viewportWidth - 20) : Math.min(360, Math.max(320, viewportWidth * 0.22)); diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js index 98e05c02..b062358a 100644 --- a/src/main/resources/js/long-article.min.js +++ b/src/main/resources/js/long-article.min.js @@ -1 +1 @@ -window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(320,e-20):Math.min(360,Math.max(320,.22*e)),a=e>=1100,s=o;if(a){var l=e-144-i-0;a=(s=Math.min(o,Math.max(560,l)))>=560}var r=a?s+0+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+0:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?c+r+14:m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file +window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=document.documentElement.clientWidth||window.innerWidth||0,n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(320,e-20):Math.min(360,Math.max(320,.22*e)),a=e>=1100,s=o;if(a){var l=e-144-i-0;a=(s=Math.min(o,Math.max(560,l)))>=560}var r=a?s+0+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+0:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?c+r+14:m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index a84e1a91..4e4bf6d3 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5311,7 +5311,7 @@ code .dec { overflow-y: auto; overscroll-behavior: contain; border: 0; - border-left: 1px solid rgba(61, 91, 68, 0.14); + border-left: 0; border-radius: 0; background: #dcebdd; box-shadow: none; @@ -6001,7 +6001,7 @@ body.night { #articleCommentsPanel { background: #111111; - border-left-color: rgba(255, 255, 255, 0.08); + border-left: 0; box-shadow: none; } From 04b8e017dea8a60dc3e830695f7f04026a9c80af Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 08:30:17 +0800 Subject: [PATCH 10/30] =?UTF-8?q?=E6=94=B6=E7=AA=84=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=8C=BA=E5=B9=B6=E9=81=BF=E8=AE=A9=E9=98=85?= =?UTF-8?q?=E8=AF=BB=E5=B7=A5=E5=85=B7=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 8 ++++---- src/main/resources/js/long-article.min.js | 2 +- src/main/resources/scss/index.scss | 12 +++++++++--- 3 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 3c29d45f..0d7f6697 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -216,19 +216,19 @@ window.LongArticle = { var viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0; var selectedWidth = this.settings.width === 'auto' ? Math.min(viewportWidth * 0.8, 1200) : parseInt(this.settings.width, 10); var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28)); - var drawerWidth = viewportWidth <= 768 ? Math.max(320, viewportWidth - 20) : Math.min(360, Math.max(320, viewportWidth * 0.22)); + var drawerWidth = viewportWidth <= 768 ? Math.max(280, viewportWidth - 20) : Math.min(320, Math.max(280, viewportWidth * 0.2)); var articleDrawerGap = 0; var toolbarGap = 14; var toolbarWidth = 44; var safeMargin = 14; - var inline = viewportWidth >= 1100; + var inline = viewportWidth >= 960; var openArticleWidth = closedArticleWidth; if (inline) { var maxInlineStageWidth = viewportWidth - (toolbarWidth + toolbarGap + safeMargin) * 2; var maxInlineArticleWidth = maxInlineStageWidth - drawerWidth - articleDrawerGap; - openArticleWidth = Math.min(closedArticleWidth, Math.max(560, maxInlineArticleWidth)); - inline = openArticleWidth >= 560; + openArticleWidth = Math.min(closedArticleWidth, Math.max(480, maxInlineArticleWidth)); + inline = openArticleWidth >= 480; } var stageWidth = inline ? openArticleWidth + articleDrawerGap + drawerWidth : closedArticleWidth; diff --git a/src/main/resources/js/long-article.min.js b/src/main/resources/js/long-article.min.js index b062358a..183e2d2d 100644 --- a/src/main/resources/js/long-article.min.js +++ b/src/main/resources/js/long-article.min.js @@ -1 +1 @@ -window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=document.documentElement.clientWidth||window.innerWidth||0,n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(320,e-20):Math.min(360,Math.max(320,.22*e)),a=e>=1100,s=o;if(a){var l=e-144-i-0;a=(s=Math.min(o,Math.max(560,l)))>=560}var r=a?s+0+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+0:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?c+r+14:m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file +window.LongArticle={storageKey:"longArticleSettings",allowedWidths:["auto","600","800","1000","1200"],settings:{width:"800",desktopFontSize:18,mobileFontSize:16},init:function(){this.initialized||(this.initialized=!0,this.loadSettings(),this.bindEvents(),this.applySettings(),this.shouldOpenCommentsFromLocation()&&(this.openComments(),this.focusLocationComment()))},loadSettings:function(){var t,e={width:"800",desktopFontSize:18,mobileFontSize:16};try{t=JSON.parse(window.localStorage.getItem(this.storageKey)||"{}")}catch(e){t={}}t&&"object"==typeof t&&(e.width=this.normalizeWidth(t.width),e.desktopFontSize=this.normalizeFontSize(t.desktopFontSize||t.fontSize,18,32,18),e.mobileFontSize=this.normalizeFontSize(t.mobileFontSize,16,24,16));try{var n=parseInt(window.localStorage.getItem("longArticleFontSize"),10);t.desktopFontSize||t.fontSize||isNaN(n)||(e.desktopFontSize=this.normalizeFontSize(n,18,32,18),e.mobileFontSize=this.normalizeFontSize(n,16,24,16));var o=JSON.parse(window.localStorage.getItem("mLongArticleSettings")||"{}");t.mobileFontSize||!o||isNaN(parseInt(o.fontSize,10))||(e.mobileFontSize=this.normalizeFontSize(parseInt(o.fontSize,10),16,24,16)),window.localStorage.removeItem("longArticleFontSize"),window.localStorage.removeItem("mLongArticleSettings")}catch(t){}this.settings=e,this.saveSettings()},normalizeWidth:function(t){return t=String(t||"800"),this.allowedWidths.indexOf(t)>=0?t:"800"},normalizeFontSize:function(t,e,n,o){return t=parseInt(t,10),isNaN(t)?o:Math.max(e,Math.min(n,t))},saveSettings:function(){try{window.localStorage.setItem(this.storageKey,JSON.stringify(this.settings))}catch(t){}},applySettings:function(){var t=document.documentElement,e=this.settings.width,n="auto"===e?"min(40vw, 600px)":parseInt(e,10)/2+"px";t.style.setProperty("--long-article-width","auto"===e?"min(80vw, 1200px)":e+"px"),t.style.setProperty("--long-article-half-width",n),t.style.setProperty("--long-article-font-size",this.settings.desktopFontSize+"px"),this.updateWidthButtons(),this.updateLayoutMetrics()},bindEvents:function(){var t=this,e=document.querySelector("[data-long-article-toolbar]");e&&(e.addEventListener("click",function(n){var o=t.findActionElement(n.target,e);if(o){var i=o.getAttribute("data-long-article-action");"top"===i?t.scrollToTop():"comments"===i?t.toggleComments():"font-decrease"===i?t.setFontSize(-2):"font-increase"===i?t.setFontSize(2):"layout"===i?t.toggleLayoutPanel():o.hasAttribute("data-long-article-width")&&t.setWidth(o.getAttribute("data-long-article-width"))}}),document.addEventListener("click",function(n){var o=document.getElementById("longArticleLayoutPanel"),i=e.querySelector('[data-long-article-action="layout"]');o&&o.classList.contains("is-open")&&!o.contains(n.target)&&!i.contains(n.target)&&t.closeLayoutPanel(),n.target.closest&&n.target.closest("[data-long-article-comments-close]")&&t.closeComments()}),document.addEventListener("keydown",function(e){"Escape"===e.key&&t.isCommentsOpen()&&t.closeComments()}),window.addEventListener("resize",function(){t.updateLayoutMetrics()}))},findActionElement:function(t,e){for(;t&&t!==e;){if(1===t.nodeType&&(t.hasAttribute("data-long-article-action")||t.hasAttribute("data-long-article-width")))return t;t=t.parentNode}return t&&t!==e&&1===t.nodeType?t:null},setFontSize:function(t){this.settings.desktopFontSize=this.normalizeFontSize(this.settings.desktopFontSize+t,12,32,18),this.saveSettings(),this.applySettings()},setWidth:function(t){this.settings.width=this.normalizeWidth(t),this.saveSettings(),this.applySettings(),this.closeLayoutPanel()},updateWidthButtons:function(){var t=this.settings.width;document.querySelectorAll("[data-long-article-width]").forEach(function(e){e.classList.toggle("is-active",e.getAttribute("data-long-article-width")===t)})},toggleLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');if(t&&e){var n=!t.classList.contains("is-open");t.classList.toggle("is-open",n),t.setAttribute("aria-hidden",n?"false":"true"),e.setAttribute("aria-expanded",n?"true":"false")}},closeLayoutPanel:function(){var t=document.getElementById("longArticleLayoutPanel"),e=document.querySelector('[data-long-article-action="layout"]');t&&(t.classList.remove("is-open"),t.setAttribute("aria-hidden","true")),e&&e.setAttribute("aria-expanded","false")},updateLayoutMetrics:function(){var t=document.documentElement,e=document.documentElement.clientWidth||window.innerWidth||0,n="auto"===this.settings.width?Math.min(.8*e,1200):parseInt(this.settings.width,10),o=Math.min(n,Math.max(320,e-28)),i=e<=768?Math.max(280,e-20):Math.min(320,Math.max(280,.2*e)),a=e>=960,s=o;if(a){var l=e-144-i-0;a=(s=Math.min(o,Math.max(480,l)))>=480}var r=a?s+0+i:o,c=Math.max(14,(e-r)/2),d=a?c+s+0:e-i,m=Math.min(e-44-14,(e-o)/2+o+14),u=a?c+r+14:m;t.style.setProperty("--long-article-stage-width",r+"px"),t.style.setProperty("--long-article-open-article-width",s+"px"),document.body.style.setProperty("--long-article-drawer-width",i+"px"),t.style.setProperty("--long-article-drawer-left",d+"px"),t.style.setProperty("--long-article-toolbar-closed-left",m+"px"),t.style.setProperty("--long-article-toolbar-open-left",u+"px"),document.body.classList.toggle("long-article-comments-inline",a)},scrollToTop:function(){window.scrollTo({top:0,behavior:"smooth"})},getCommentsPanel:function(){return document.getElementById("articleCommentsPanel")},isCommentsOpen:function(){return document.body.classList.contains("long-article-comments-open")},toggleComments:function(){this.isCommentsOpen()?this.closeComments():this.openComments()},openComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]');t&&(this.closeLayoutPanel(),this.updateLayoutMetrics(),document.body.classList.add("long-article-comments-open"),t.setAttribute("aria-hidden","false"),e&&(e.classList.add("is-active"),e.setAttribute("aria-expanded","true")))},closeComments:function(){var t=this.getCommentsPanel(),e=document.querySelector('[data-long-article-action="comments"]'),n=document.querySelector(".editor-panel");n&&"none"!==window.getComputedStyle(n).display&&window.Comment&&"function"==typeof window.Comment._hideReplyPanel&&window.Comment._hideReplyPanel(),document.body.classList.remove("long-article-comments-open"),t&&t.setAttribute("aria-hidden","true"),e&&(e.classList.remove("is-active"),e.setAttribute("aria-expanded","false"))},shouldOpenCommentsFromLocation:function(){var t=this.getCommentsPanel(),e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null;return!!(t&&n&&t.contains(n))||/(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search)},focusLocationComment:function(){var t=this;window.setTimeout(function(){var e=window.location.hash.replace(/^#/,""),n=e?document.getElementById(e):null,o=t.getCommentsPanel();o&&n&&o.contains(n)&&n.scrollIntoView({block:"center"})},0)}}; \ No newline at end of file diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 4e4bf6d3..356d5497 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5206,7 +5206,7 @@ code .dec { } .article.long-article-page { - --long-article-drawer-width: min(360px, calc(100vw - 72px)); + --long-article-drawer-width: min(320px, calc(100vw - 72px)); min-height: 100vh; padding-top: 0; overflow-x: hidden; @@ -5311,7 +5311,7 @@ code .dec { overflow-y: auto; overscroll-behavior: contain; border: 0; - border-left: 0; + border-left: 1px solid rgba(61, 91, 68, 0.18); border-radius: 0; background: #dcebdd; box-shadow: none; @@ -5384,6 +5384,12 @@ code .dec { } } + &.long-article-comments-open:not(.long-article-comments-inline) { + .long-article-settings { + display: none; + } + } + .long-article-settings { right: auto; left: var(--long-article-toolbar-closed-left, min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 58px))); @@ -6001,7 +6007,7 @@ body.night { #articleCommentsPanel { background: #111111; - border-left: 0; + border-left-color: rgba(255, 255, 255, 0.1); box-shadow: none; } From ac6801313d810b30e90cb884e7c56ebace787a0e Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 08:42:51 +0800 Subject: [PATCH 11/30] =?UTF-8?q?=E6=94=B9=E8=BF=9B=E9=95=BF=E6=96=87?= =?UTF-8?q?=E9=98=85=E8=AF=BB=E5=B7=A5=E5=85=B7=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 17 ++- src/main/resources/scss/index.scss | 113 ++++++++++++------ .../resources/skins/classic/pc/article.ftl | 42 ++++--- 3 files changed, 119 insertions(+), 53 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 0d7f6697..0fbfb81c 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -28,6 +28,7 @@ window.LongArticle = { this.loadSettings(); this.bindEvents(); this.applySettings(); + this.updateTopButton(); if (this.shouldOpenCommentsFromLocation()) { this.openComments(); this.focusLocationComment(); @@ -155,6 +156,9 @@ window.LongArticle = { window.addEventListener('resize', function () { self.updateLayoutMetrics(); }); + window.addEventListener('scroll', function () { + self.updateTopButton(); + }, {passive: true}); }, findActionElement: function (target, boundary) { @@ -185,6 +189,17 @@ window.LongArticle = { document.querySelectorAll('[data-long-article-width]').forEach(function (button) { button.classList.toggle('is-active', button.getAttribute('data-long-article-width') === width); }); + var fontSize = document.querySelector('[data-long-article-font-size]'); + if (fontSize) { + fontSize.textContent = this.settings.desktopFontSize + 'px'; + } + }, + + updateTopButton: function () { + var button = document.querySelector('[data-long-article-action="top"]'); + if (button) { + button.classList.toggle('is-visible', (window.pageYOffset || document.documentElement.scrollTop || 0) > 320); + } }, toggleLayoutPanel: function () { @@ -219,7 +234,7 @@ window.LongArticle = { var drawerWidth = viewportWidth <= 768 ? Math.max(280, viewportWidth - 20) : Math.min(320, Math.max(280, viewportWidth * 0.2)); var articleDrawerGap = 0; var toolbarGap = 14; - var toolbarWidth = 44; + var toolbarWidth = 64; var safeMargin = 14; var inline = viewportWidth >= 960; var openArticleWidth = closedArticleWidth; diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 356d5497..1698cd50 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5343,7 +5343,7 @@ code .dec { &.long-article-comments-open { .long-article-settings { right: auto; - left: var(--long-article-toolbar-open-left, calc(100vw - 58px)); + left: var(--long-article-toolbar-open-left, calc(100vw - 78px)); z-index: 121; } @@ -5392,7 +5392,7 @@ code .dec { .long-article-settings { right: auto; - left: var(--long-article-toolbar-closed-left, min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 58px))); + left: var(--long-article-toolbar-closed-left, min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 78px))); transition: left 0.32s ease; } @@ -5865,30 +5865,32 @@ code .dec { .long-article-settings { position: fixed; - left: min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 58px)); + left: min(calc(50% + min(var(--long-article-half-width, 400px), calc(50vw - 14px)) + 14px), calc(100vw - 78px)); top: 50%; transform: translateY(-50%); z-index: 101; display: flex; flex-direction: column; - gap: 8px; + gap: 10px; } .long-article-settings-btn { - width: 44px; - height: 44px; + width: 64px; + height: 64px; display: flex; + flex-direction: column; align-items: center; justify-content: center; + gap: 3px; padding: 0; border: 0; - border-radius: 8px; + border-radius: 5px; background: #dcebdd; box-shadow: 0 4px 14px rgba(48, 73, 55, 0.12); color: #52685a; cursor: pointer; - font-size: 16px; - font-weight: 600; + font-size: 14px; + font-weight: 400; position: relative; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; @@ -5905,13 +5907,17 @@ code .dec { } svg { - width: 20px; - height: 20px; + width: 18px; + height: 18px; } } -.long-article-settings-btn--text { - font-size: 13px; +.long-article-settings-btn--top { + display: none; + + &.is-visible { + display: flex; + } } .long-article-settings__count { @@ -5936,12 +5942,12 @@ code .dec { .long-article-layout-panel { position: absolute; - right: 56px; + right: 80px; bottom: 0; display: none; - width: 210px; + width: 360px; box-sizing: border-box; - padding: 14px; + padding: 24px; border: 1px solid rgba(72, 101, 79, 0.16); border-radius: 10px; background: #ebfaeb; @@ -5953,34 +5959,60 @@ code .dec { } .long-article-layout-panel__title { - margin-bottom: 10px; + margin-bottom: 20px; color: #52685a; - font-size: 13px; + font-size: 18px; font-weight: 600; } -.long-article-layout-panel__options { +.long-article-layout-panel__row { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 48px minmax(0, 1fr); + align-items: center; + gap: 12px; + margin-top: 16px; + color: #52685a; + font-size: 13px; +} + +.long-article-font-options { + display: grid; + grid-template-columns: 44px minmax(64px, 1fr) 44px; + align-items: center; gap: 7px; - button { - height: 32px; - padding: 0 8px; - border: 1px solid #d9e3da; - border-radius: 6px; - background: #f3f7f1; + output { color: #52685a; - cursor: pointer; - font-size: 12px; + font-size: 13px; + text-align: center; + } +} - &:hover, - &.is-active { - border-color: #77977e; - background: #dfeadf; - color: #285a39; - } +.long-article-font-options button, +.long-article-layout-panel__options button { + height: 34px; + padding: 0 8px; + border: 1px solid #d9e3da; + border-radius: 5px; + background: #f3f7f1; + color: #52685a; + cursor: pointer; + font-size: 12px; + + &:hover, + &.is-active { + border-color: #77977e; + background: #dfeadf; + color: #285a39; + } +} + +.long-article-layout-panel__options { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 7px; + button { &.is-active { font-weight: 600; } @@ -6199,6 +6231,12 @@ body.night { color: #989898; } + .long-article-layout-panel__row, + .long-article-font-options output { + color: #989898; + } + + .long-article-font-options button, .long-article-layout-panel__options button { border-color: #3a3a3a; background: #191919; @@ -6272,12 +6310,13 @@ body.night { } .long-article-settings-btn { - width: 40px; - height: 40px; + width: 54px; + height: 54px; } .long-article-layout-panel { - right: 50px; + right: 64px; + width: min(340px, calc(100vw - 90px)); } } diff --git a/src/main/resources/skins/classic/pc/article.ftl b/src/main/resources/skins/classic/pc/article.ftl index 28b65c00..c40228b9 100644 --- a/src/main/resources/skins/classic/pc/article.ftl +++ b/src/main/resources/skins/classic/pc/article.ftl @@ -771,35 +771,47 @@ <#if 6 == article.articleType>
    - - -
    - + From 9b7e616b6f7da6f07d037b0578b30fb2e5cf099c Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 08:54:50 +0800 Subject: [PATCH 12/30] =?UTF-8?q?=E8=BF=9B=E4=B8=80=E6=AD=A5=E6=94=B6?= =?UTF-8?q?=E7=AA=84=E9=95=BF=E6=96=87=E8=AF=84=E8=AE=BA=E5=8C=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 4 +++- src/main/resources/scss/index.scss | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 0fbfb81c..c732d800 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -231,7 +231,9 @@ window.LongArticle = { var viewportWidth = document.documentElement.clientWidth || window.innerWidth || 0; var selectedWidth = this.settings.width === 'auto' ? Math.min(viewportWidth * 0.8, 1200) : parseInt(this.settings.width, 10); var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28)); - var drawerWidth = viewportWidth <= 768 ? Math.max(280, viewportWidth - 20) : Math.min(320, Math.max(280, viewportWidth * 0.2)); + var drawerWidth = viewportWidth <= 768 + ? Math.max(280, viewportWidth - 20) + : Math.min(280, Math.max(240, closedArticleWidth * 0.38)); var articleDrawerGap = 0; var toolbarGap = 14; var toolbarWidth = 64; diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 1698cd50..632c20af 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5206,7 +5206,7 @@ code .dec { } .article.long-article-page { - --long-article-drawer-width: min(320px, calc(100vw - 72px)); + --long-article-drawer-width: min(280px, calc(100vw - 72px)); min-height: 100vh; padding-top: 0; overflow-x: hidden; From bcf262d6678caaceaa3d73e65c94029de24e6355 Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 08:58:18 +0800 Subject: [PATCH 13/30] =?UTF-8?q?=E6=B8=85=E9=99=A4=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=8C=BA=E6=9C=80=E5=B0=8F=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/scss/index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 632c20af..dcd15a25 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5302,6 +5302,7 @@ code .dec { flex-direction: column; box-sizing: border-box; width: var(--long-article-drawer-width); + min-width: 0; height: 100vh; height: 100dvh; max-width: none; @@ -5592,6 +5593,7 @@ code .dec { right: 0; left: auto; width: 100%; + min-width: 0; max-width: 100%; padding: 16px 20px 20px; border-top: 1px solid rgba(65, 94, 71, 0.16); From 30753e5ea9836e61ef783d2cb44474a00ab13518 Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 09:00:35 +0800 Subject: [PATCH 14/30] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E5=8C=BA=E5=AE=BD=E5=BA=A6=E4=B8=BA320?= =?UTF-8?q?=E5=83=8F=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 2 +- src/main/resources/scss/index.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index c732d800..0214a293 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -233,7 +233,7 @@ window.LongArticle = { var closedArticleWidth = Math.min(selectedWidth, Math.max(320, viewportWidth - 28)); var drawerWidth = viewportWidth <= 768 ? Math.max(280, viewportWidth - 20) - : Math.min(280, Math.max(240, closedArticleWidth * 0.38)); + : 320; var articleDrawerGap = 0; var toolbarGap = 14; var toolbarWidth = 64; diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index dcd15a25..24755f53 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5206,7 +5206,7 @@ code .dec { } .article.long-article-page { - --long-article-drawer-width: min(280px, calc(100vw - 72px)); + --long-article-drawer-width: min(320px, calc(100vw - 72px)); min-height: 100vh; padding-top: 0; overflow-x: hidden; From ebec51642c8222c9af12ad053e1368ad1bc7b1f3 Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 09:05:33 +0800 Subject: [PATCH 15/30] =?UTF-8?q?=E6=89=A9=E5=B1=95=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=AF=84=E8=AE=BA=E8=BE=93=E5=85=A5=E5=8C=BA=E5=9F=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 1 + src/main/resources/scss/index.scss | 14 ++++++++------ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 0214a293..7e3b1470 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -255,6 +255,7 @@ window.LongArticle = { var openToolbarLeft = inline ? stageLeft + stageWidth + toolbarGap : closedToolbarLeft; root.style.setProperty('--long-article-stage-width', stageWidth + 'px'); + root.style.setProperty('--long-article-stage-left', stageLeft + 'px'); root.style.setProperty('--long-article-open-article-width', openArticleWidth + 'px'); document.body.style.setProperty('--long-article-drawer-width', drawerWidth + 'px'); root.style.setProperty('--long-article-drawer-left', drawerLeft + 'px'); diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 24755f53..561e67fd 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5350,7 +5350,9 @@ code .dec { .editor-panel { right: auto; - left: var(--long-article-drawer-left, calc(100vw - var(--long-article-drawer-width))); + left: var(--long-article-stage-left, 14px); + width: var(--long-article-stage-width, calc(100vw - 28px)); + max-width: calc(100vw - 28px); } #articleCommentsPanel { @@ -5579,11 +5581,11 @@ code .dec { } .editor-panel { - right: 0; - left: auto; - width: var(--long-article-drawer-width); - max-width: var(--long-article-drawer-width); - transition: left 0.32s ease; + right: auto; + left: var(--long-article-stage-left, 14px); + width: var(--long-article-stage-width, min(var(--long-article-width, 800px), calc(100vw - 28px))); + max-width: calc(100vw - 28px); + transition: left 0.32s ease, width 0.32s ease; .editor-bg { display: none; From 0ac507253bfeb2703a8f4a72e32b9aafcaa9b15c Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 09:09:01 +0800 Subject: [PATCH 16/30] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E9=95=BF=E6=96=87?= =?UTF-8?q?=E7=AA=84=E7=89=88=E6=8E=92=E7=89=88=E4=B8=8E=E9=A1=B6=E9=83=A8?= =?UTF-8?q?=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/js/long-article.js | 29 ++++++++++++++++++++++++++ src/main/resources/scss/index.scss | 30 +++++++++++++++++++++++++-- 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index 7e3b1470..dbeacb6c 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -28,6 +28,7 @@ window.LongArticle = { this.loadSettings(); this.bindEvents(); this.applySettings(); + this.formatParagraphIndentation(); this.updateTopButton(); if (this.shouldOpenCommentsFromLocation()) { this.openComments(); @@ -88,6 +89,34 @@ window.LongArticle = { return Math.max(min, Math.min(max, size)); }, + formatParagraphIndentation: function () { + document.querySelectorAll('.long-article-content > p').forEach(function (paragraph) { + var hasDirectBreak = Array.prototype.some.call(paragraph.childNodes, function (node) { + return node.nodeType === 1 && node.tagName === 'BR'; + }); + if (!hasDirectBreak || paragraph.querySelector('img, picture, video, iframe')) { + return; + } + + var fragment = document.createDocumentFragment(); + var line = document.createElement('span'); + line.className = 'long-article-paragraph-line'; + Array.prototype.slice.call(paragraph.childNodes).forEach(function (node) { + if (node.nodeType === 1 && node.tagName === 'BR') { + fragment.appendChild(line); + line = document.createElement('span'); + line.className = 'long-article-paragraph-line'; + } else { + line.appendChild(node); + } + }); + fragment.appendChild(line); + paragraph.textContent = ''; + paragraph.classList.add('long-article-paragraph-lines'); + paragraph.appendChild(fragment); + }); + }, + saveSettings: function () { try { window.localStorage.setItem(this.storageKey, JSON.stringify(this.settings)); diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 561e67fd..4bb8e44d 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5114,6 +5114,15 @@ code .dec { text-indent: 2em; } + > p.long-article-paragraph-lines { + text-indent: 0; + } + + .long-article-paragraph-line { + display: block; + text-indent: 2em; + } + > p:has(> img), > p:has(> picture), > p:has(> video), @@ -5257,6 +5266,7 @@ code .dec { .article-body > .wrapper { box-sizing: border-box; width: 100%; + min-width: 0; max-width: none; padding: 80px clamp(32px, 6vw, 64px) 64px; } @@ -5917,10 +5927,22 @@ code .dec { } .long-article-settings-btn--top { - display: none; + height: 0; + min-height: 0; + overflow: hidden; + opacity: 0; + pointer-events: none; + transform: translateY(10px) scale(0.94); + visibility: hidden; + transition: height 0.24s ease, opacity 0.2s ease, transform 0.24s ease, visibility 0s linear 0.24s; &.is-visible { - display: flex; + height: 64px; + opacity: 1; + pointer-events: auto; + transform: translateY(0) scale(1); + visibility: visible; + transition-delay: 0s; } } @@ -6318,6 +6340,10 @@ body.night { height: 54px; } + .long-article-settings-btn--top.is-visible { + height: 54px; + } + .long-article-layout-panel { right: 64px; width: min(340px, calc(100vw - 90px)); From 1bf659c679bb882edd9a851dd7d3106d3231a58d Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 10:11:43 +0800 Subject: [PATCH 17/30] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=95=BF=E6=96=87?= =?UTF-8?q?=E8=BF=94=E5=9B=9E=E9=A6=96=E9=A1=B5=E5=85=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/resources/scss/index.scss | 35 +++++++++++++++++++ src/main/resources/scss/mobile-base.scss | 22 ++++++++++++ .../skins/classic/mobile/article.ftl | 6 ++++ .../resources/skins/classic/pc/article.ftl | 6 ++++ 4 files changed, 69 insertions(+) diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 4bb8e44d..23a15ffd 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -5214,6 +5214,32 @@ code .dec { color: #9ba79f; } +.long-article-home-link { + display: inline-flex; + align-items: center; + gap: 5px; + min-height: 32px; + margin: 0 0 24px; + padding: 0 10px 0 8px; + border-radius: 5px; + color: #526c5a; + font-size: 13px; + text-decoration: none; + transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; + + svg { + width: 17px; + height: 17px; + } + + &:hover { + background: rgba(95, 126, 104, 0.12); + color: #2f4937; + text-decoration: none; + transform: translateX(-2px); + } +} + .article.long-article-page { --long-article-drawer-width: min(320px, calc(100vw - 72px)); min-height: 100vh; @@ -6063,6 +6089,15 @@ body.night { background: #0a0a0a; } + .long-article-home-link { + color: #989898; + + &:hover { + background: #191919; + color: #d9e3db; + } + } + #articleCommentsPanel { background: #111111; border-left-color: rgba(255, 255, 255, 0.1); diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss index 2679a564..9158d67b 100644 --- a/src/main/resources/scss/mobile-base.scss +++ b/src/main/resources/scss/mobile-base.scss @@ -5502,6 +5502,24 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de color: #9ba79f; } +.long-article-home-link { + display: inline-flex; + align-items: center; + gap: 5px; + min-height: 32px; + margin: 0 0 20px; + padding: 0 9px 0 7px; + border-radius: 5px; + color: #526c5a; + font-size: 13px; + text-decoration: none; + + svg { + width: 17px; + height: 17px; + } +} + body.long-article-page { --long-article-comments-width: min(430px, 100vw); min-height: 100vh; @@ -6183,6 +6201,10 @@ body.night { color: #eef4ef; } + .long-article-home-link { + color: #989898; + } + #comments { background: #111111; border-left-color: rgba(255, 255, 255, 0.08); diff --git a/src/main/resources/skins/classic/mobile/article.ftl b/src/main/resources/skins/classic/mobile/article.ftl index ea423cd0..1f8a8e5f 100644 --- a/src/main/resources/skins/classic/mobile/article.ftl +++ b/src/main/resources/skins/classic/mobile/article.ftl @@ -103,6 +103,12 @@
    + <#if 6 == article.articleType> + + + 首页 + + <#if showTopAd> ${HeaderBannerLabel} diff --git a/src/main/resources/skins/classic/pc/article.ftl b/src/main/resources/skins/classic/pc/article.ftl index c40228b9..89fd624e 100644 --- a/src/main/resources/skins/classic/pc/article.ftl +++ b/src/main/resources/skins/classic/pc/article.ftl @@ -95,6 +95,12 @@ ${HeaderBannerLabel}
    + <#if 6 == article.articleType> + + + 首页 + +

    <@icon article.articlePerfect article.articleType> ${article.articleTitleEmoj} From 104c1d34672ebee5f3774329527c802d32818929 Mon Sep 17 00:00:00 2001 From: Yui Date: Sun, 19 Jul 2026 14:35:46 +0800 Subject: [PATCH 18/30] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=95=BF=E7=AF=87?= =?UTF-8?q?=E6=AE=B5=E8=AF=84=E4=B8=8E=E6=AE=B5=E8=90=BD=E9=94=9A=E7=82=B9?= =?UTF-8?q?=E8=BF=81=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 1 + API.md | 101 ++++ ...0260719_long_article_paragraph_comment.sql | 9 + .../org/b3log/symphony/model/Comment.java | 20 + .../symphony/processor/ArticleProcessor.java | 14 + .../symphony/processor/CommentProcessor.java | 99 +++- .../processor/channel/ArticleChannel.java | 4 +- ...icleParagraphCommentValidationMidware.java | 97 ++++ .../symphony/service/ArticleMgmtService.java | 8 + .../symphony/service/CommentMgmtService.java | 27 + .../symphony/service/CommentQueryService.java | 192 ++++++- .../service/LongArticleParagraphService.java | 486 ++++++++++++++++++ .../service/NotificationQueryService.java | 11 + src/main/resources/js/article.js | 31 ++ src/main/resources/js/channel.js | 5 + .../resources/js/long-article-paragraph.js | 400 ++++++++++++++ src/main/resources/js/long-article.js | 12 +- src/main/resources/js/m-article.js | 31 ++ src/main/resources/js/m-long-article.js | 12 +- src/main/resources/repository.json | 33 ++ src/main/resources/scss/index.scss | 226 ++++++++ src/main/resources/scss/mobile-base.scss | 188 +++++++ .../skins/classic/mobile/article.ftl | 18 +- .../skins/classic/mobile/common/comment.ftl | 6 + .../skins/classic/mobile/home/comments.ftl | 3 + .../mobile/home/notifications/commented.ftl | 3 + .../mobile/home/notifications/reply.ftl | 3 + .../resources/skins/classic/pc/article.ftl | 22 +- .../skins/classic/pc/common/comment.ftl | 6 + .../skins/classic/pc/home/comments.ftl | 3 + .../pc/home/notifications/commented.ftl | 3 + .../classic/pc/home/notifications/reply.ftl | 3 + src/main/resources/symphony.properties | 1 + 33 files changed, 2057 insertions(+), 21 deletions(-) create mode 100644 sql/20260719_long_article_paragraph_comment.sql create mode 100644 src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java create mode 100644 src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java create mode 100644 src/main/resources/js/long-article-paragraph.js diff --git a/AGENTS.md b/AGENTS.md index f56c16d0..ea3e2df9 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -104,6 +104,7 @@ - 首页右侧排行补偿（无前端延迟）：由 `IndexProcessor#loadIndexData` 按两列最新文章的最大行数计算 `rankCompensateRows`，先换算“右栏总补偿行数”再分摊到 `checkinVisibleCount/onlineVisibleCount`，Freemarker 直接按该数量渲染，不再依赖 JS 运行时增删行。 - 专栏封面链路：封面字段是 `long_article_column.columnCoverURL`；默认封面在 `LongArticleColumnQueryService` 填充；作者管理页为 `/column/manage`，编辑长篇页的弹窗脚本是 `long-article-cover-dialog.js`，新建长篇封面随 `/article` 请求的 `columnCoverURL` 写入；封面保存接口为 `POST /api/columns/{columnId}/cover`，处理器是 `LongArticleColumnProcessor`。 - 长文阅读页以 `articleType=6` 区分，PC/移动模板均为 `skins/classic/*/article.ftl`，样式在 `index.scss`/`mobile-base.scss`，交互在 `long-article.js`/`m-long-article.js`；模板通过 `hidePageChrome` 不渲染顶部与底部视觉内容，但 footer 的公共脚本仍需加载；桌面宽度和两端字号统一保存在 `localStorage.longArticleSettings`，宽度仅在 PC 生效；PC 评论按钮控制居中的“正文 + 评论”阅读舞台，移动端使用右侧抽屉，现有评论列表、筛选、分页和编辑器均复用。 +- 长文段评链路：`LongArticleParagraphService` 根据服务端清洗后的正文生成段落锚点并给 HTML 添加 `data-long-paragraph-*`；段评字段存于 `comment`（`commentType=1`），新增接口位于 `CommentProcessor` 的 `/comment/paragraph*`；评论编辑事务调用段落迁移，无法匹配的段评标记为失效但保留快照。PC/移动均加载 `long-article-paragraph.js`，段评列表复用现有评论线程与编辑器能力。 - 管理员文章页编辑长文专栏时，`admin/article.ftl` 会随文章表单提交 `columnCoverURL`，后端在 `ArticleMgmtService` 的文章事务内复用 `ColumnCoverMgmtService` 校验并更新或清空专栏封面。 - 路由总入口：`Router#requestMapping` + 各 Processor `register()`；新增路由先决定使用 `loginCheck` / `apiCheck` / `permission` / `anonymousViewCheck` 哪条链路。 - Latke 路由存在静态段被相邻动态段截获的风险（如 `/article/{id}/revisions/list` 可能进入 `/article/{id}/revisions/{revisionId}`）；新增相邻路由时需避免路径歧义，或在处理方法中显式识别保留字。 diff --git a/API.md b/API.md index 9f480fdb..49fe7fb4 100644 --- a/API.md +++ b/API.md @@ -2318,6 +2318,107 @@ curl --location --request POST 'https://fishpi.cn/comment/thread/replies' \ | commentContent | 评论原文（Markdown格式） | hello world | | commentOriginalCommentId | （选填）如果是回复某个评论，传递此参数并填写值为要回复的评论的oId | 1646216549324 | +### 长篇段评 + +`POST /comment/paragraph` + +为长篇正文指定段落发表评论或回复。旧的 `POST /comment` 继续创建章评。 + +请求： + +| Key | 说明 | 示例 | +| --- | --- | --- | +| apiKey | 通用密钥，可选 | oXTQTD4ljryXoIxa1lySgEl6aObrIhSS | +| articleId | 长篇文章 Id | 1645002736006 | +| paragraphId | 服务端生成的段落 Id | `64 位小写 SHA-256` | +| commentContent | 评论原文（Markdown 格式） | 这一段写得很好 | +| commentAnonymous | 是否匿名评论 | false | +| commentVisible | 是否仅楼主可见 | false | +| commentOriginalCommentId | 回复时填写段评 Id，可选 | 1646216549324 | + +请求示例： + +```bash +curl -X POST "https://fishpi.cn/comment/paragraph" \ + -H "Content-Type: application/json" \ + -d '{"apiKey":"你的 apiKey","articleId":"1645002736006","paragraphId":"64 位小写 SHA-256","commentContent":"这一段写得很好","commentAnonymous":false,"commentVisible":false}' +``` + +响应： + +| Key | 说明 | 示例 | +| --- | --- | --- | +| code | `0` 表示成功 | 0 | +| commentId | 新评论 Id | 1646216549324 | + +> 仅支持 `articleType=6`。段落类型、顺序和文本快照由服务端校验并保存，客户端不能伪造。新增根评论必须关联当前有效段落；回复必须属于同一文章和同一段评线程，原段落已修改的线程仍可继续回复。 + +### 获取长篇段评摘要 + +`POST /comment/paragraph/summary` + +获取长篇当前有效段落的评论数量，数量包含根评论和回复。 + +请求： + +| Key | 说明 | 示例 | +| --- | --- | --- | +| apiKey | 访问受限文章时填写 | oXTQTD4ljryXoIxa1lySgEl6aObrIhSS | +| articleId | 长篇文章 Id | 1645002736006 | + +请求示例： + +```bash +curl -X POST "https://fishpi.cn/comment/paragraph/summary" \ + -H "Content-Type: application/json" \ + -d '{"articleId":"1645002736006"}' +``` + +响应： + +| Key | 说明 | 示例 | +| --- | --- | --- | +| code | `0` 表示成功 | 0 | +| paragraphComments | 段落评论数量 | `[...]` | +| - paragraphId | 段落 Id | `64 位小写 SHA-256` | +| - commentCount | 段评总数 | 3 | + +### 获取长篇段评线程 + +`POST /comment/paragraph/thread/parents` + +获取指定段落的评论线程根评论。 + +请求： + +| Key | 说明 | 示例 | +| --- | --- | --- | +| apiKey | 访问受限文章时填写 | oXTQTD4ljryXoIxa1lySgEl6aObrIhSS | +| articleId | 长篇文章 Id | 1645002736006 | +| paragraphId | 段落 Id | `64 位小写 SHA-256` | +| paginationCurrentPageNum | 页码，默认 1 | 1 | +| sort | `hot` 表示热门排序 | hot | + +请求示例： + +```bash +curl -X POST "https://fishpi.cn/comment/paragraph/thread/parents" \ + -H "Content-Type: application/json" \ + -d '{"articleId":"1645002736006","paragraphId":"64 位小写 SHA-256","paginationCurrentPageNum":1,"sort":"hot"}' +``` + +响应： + +| Key | 说明 | 示例 | +| --- | --- | --- | +| code | `0` 表示成功 | 0 | +| commentThreadParents | 段评线程根评论，字段与线程接口一致 | `[...]` | +| paragraphId | 当前段落 Id | `64 位小写 SHA-256` | +| paragraphSnapshot | 当前段落摘要 | 这一段写得很好 | +| pagination | 分页信息 | `{...}` | + +> 段评接口遵循文章匿名访问、讨论帖权限和评论可见性校验；响应不返回评论 IP、UA、联系方式、密钥或完整用户对象。文章编辑后无法匹配的段评会保留为“原段落已修改”，不会丢失。 + ### 更新评论 `PUT /comment/{评论oId}` diff --git a/sql/20260719_long_article_paragraph_comment.sql b/sql/20260719_long_article_paragraph_comment.sql new file mode 100644 index 00000000..a51375be --- /dev/null +++ b/sql/20260719_long_article_paragraph_comment.sql @@ -0,0 +1,9 @@ +ALTER TABLE `symphony_comment` + ADD COLUMN `commentType` INT NOT NULL DEFAULT 0, + ADD COLUMN `commentParagraphId` VARCHAR(64) NOT NULL DEFAULT '', + ADD COLUMN `commentParagraphKind` VARCHAR(16) NOT NULL DEFAULT '', + ADD COLUMN `commentParagraphIndex` INT NOT NULL DEFAULT -1, + ADD COLUMN `commentParagraphSnapshot` VARCHAR(1024) NOT NULL DEFAULT '', + ADD COLUMN `commentParagraphStatus` INT NOT NULL DEFAULT 0, + ADD INDEX `idx_cmt_article_type_paragraph_status_oid` + (`commentOnArticleId`, `commentType`, `commentParagraphId`, `commentParagraphStatus`, `commentCreateTime`, `oId`); diff --git a/src/main/java/org/b3log/symphony/model/Comment.java b/src/main/java/org/b3log/symphony/model/Comment.java index e2edbad6..06e5e210 100644 --- a/src/main/java/org/b3log/symphony/model/Comment.java +++ b/src/main/java/org/b3log/symphony/model/Comment.java @@ -132,6 +132,18 @@ public final class Comment { */ public static final String COMMENT_VISIBLE = "commentVisible"; + public static final String COMMENT_TYPE = "commentType"; + + public static final String COMMENT_PARAGRAPH_ID = "commentParagraphId"; + + public static final String COMMENT_PARAGRAPH_KIND = "commentParagraphKind"; + + public static final String COMMENT_PARAGRAPH_INDEX = "commentParagraphIndex"; + + public static final String COMMENT_PARAGRAPH_SNAPSHOT = "commentParagraphSnapshot"; + + public static final String COMMENT_PARAGRAPH_STATUS = "commentParagraphStatus"; + //// Transient //// /** * Key of comment revision count. @@ -292,6 +304,14 @@ public final class Comment { */ public static final int COMMENT_VISIBLE_C_AUTHOR = 1; + public static final int COMMENT_TYPE_C_ARTICLE = 0; + + public static final int COMMENT_TYPE_C_PARAGRAPH = 1; + + public static final int COMMENT_PARAGRAPH_STATUS_C_ACTIVE = 0; + + public static final int COMMENT_PARAGRAPH_STATUS_C_ORPHANED = 1; + //// Validation constants /** * Max comment content length. diff --git a/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java b/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java index 68a8b602..92b37359 100644 --- a/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java +++ b/src/main/java/org/b3log/symphony/processor/ArticleProcessor.java @@ -162,6 +162,9 @@ public class ArticleProcessor { @Inject private LongArticleColumnQueryService longArticleColumnQueryService; + @Inject + private LongArticleParagraphService longArticleParagraphService; + /** * Comment query service. */ @@ -534,6 +537,9 @@ public void showArticleApi(final RequestContext context) { articleQueryService.processArticleContent(article); if (Article.ARTICLE_TYPE_C_LONG == article.optInt(Article.ARTICLE_TYPE)) { + final JSONObject paragraphContent = longArticleParagraphService.annotateRenderedContent( + articleId, article.optString(Article.ARTICLE_CONTENT)); + article.put(Article.ARTICLE_CONTENT, paragraphContent.optString("html")); final JSONObject readStat = longArticleReadService.getStat(articleId); article.put("longArticleReadStat", readStat); dataModel.put("longArticleReadStat", readStat); @@ -1418,6 +1424,9 @@ public void showArticle(final RequestContext context) { articleQueryService.processArticleContent(article); if (Article.ARTICLE_TYPE_C_LONG == article.optInt(Article.ARTICLE_TYPE)) { + final JSONObject paragraphContent = longArticleParagraphService.annotateRenderedContent( + articleId, article.optString(Article.ARTICLE_CONTENT)); + article.put(Article.ARTICLE_CONTENT, paragraphContent.optString("html")); final JSONObject readStat = longArticleReadService.getStat(articleId); article.put("longArticleReadStat", readStat); dataModel.put("longArticleReadStat", readStat); @@ -1640,6 +1649,11 @@ public void showArticle(final RequestContext context) { // Load comments final List articleComments = commentQueryService.getArticleThreadParentComments(commentThreadOptions); article.put(Article.ARTICLE_T_COMMENTS, (Object) articleComments); + if (Article.ARTICLE_TYPE_C_LONG == article.optInt(Article.ARTICLE_TYPE)) { + article.put("articleOrphanedParagraphComments", (Object) + commentQueryService.getOrphanedParagraphThreadParentComments( + articleId, currentUserId, articleAuthorId)); + } article.put("commentors", (Object) commentQueryService.getArticleCommentors(articleId)); // Fill comment thank diff --git a/src/main/java/org/b3log/symphony/processor/CommentProcessor.java b/src/main/java/org/b3log/symphony/processor/CommentProcessor.java index 22a8850f..7453f619 100644 --- a/src/main/java/org/b3log/symphony/processor/CommentProcessor.java +++ b/src/main/java/org/b3log/symphony/processor/CommentProcessor.java @@ -41,12 +41,14 @@ import org.b3log.symphony.processor.middleware.PermissionMidware; import org.b3log.symphony.processor.middleware.validate.CommentAddValidationMidware; import org.b3log.symphony.processor.middleware.validate.CommentUpdateValidationMidware; +import org.b3log.symphony.processor.middleware.validate.LongArticleParagraphCommentValidationMidware; import org.b3log.symphony.service.*; import org.b3log.symphony.util.*; import org.json.JSONObject; import java.util.Collections; import java.util.List; +import java.util.Map; import java.util.Set; /** @@ -156,6 +158,9 @@ public class CommentProcessor { @Inject private FollowMgmtService followMgmtService; + @Inject + private LongArticleParagraphService longArticleParagraphService; + @Inject private PointtransferMgmtService pointtransferMgmtService; @@ -170,6 +175,8 @@ public static void register() { final AnonymousViewCheckMidware anonymousViewCheckMidware = beanManager.getReference(AnonymousViewCheckMidware.class); final CommentUpdateValidationMidware commentUpdateValidationMidware = beanManager.getReference(CommentUpdateValidationMidware.class); final CommentAddValidationMidware commentAddValidationMidware = beanManager.getReference(CommentAddValidationMidware.class); + final LongArticleParagraphCommentValidationMidware paragraphValidation = + beanManager.getReference(LongArticleParagraphCommentValidationMidware.class); final CommentProcessor commentProcessor = beanManager.getReference(CommentProcessor.class); Dispatcher.post("/comment/accept", commentProcessor::acceptComment, loginCheck::handle, csrfMidware::check, permissionMidware::check); @@ -182,6 +189,13 @@ public static void register() { Dispatcher.post("/comment/thread/parents", commentProcessor::getThreadParentComments, anonymousViewCheckMidware::handle); Dispatcher.post("/comment/thread/replies", commentProcessor::getThreadReplies, anonymousViewCheckMidware::handle); Dispatcher.post("/comment", commentProcessor::addComment, loginCheck::handle, permissionMidware::check, commentAddValidationMidware::handle); + Dispatcher.post("/comment/paragraph", commentProcessor::addParagraphComment, + loginCheck::handle, permissionMidware::check, commentAddValidationMidware::handle, + paragraphValidation::handle); + Dispatcher.post("/comment/paragraph/summary", commentProcessor::getParagraphSummary, + anonymousViewCheckMidware::handle); + Dispatcher.post("/comment/paragraph/thread/parents", commentProcessor::getParagraphThreadParents, + anonymousViewCheckMidware::handle); Dispatcher.post("/comment/thank", commentProcessor::thankComment, loginCheck::handle, permissionMidware::check); } @@ -522,6 +536,69 @@ public void getThreadParentComments(final RequestContext context) { renderJSONValue(Pagination.PAGINATION, buildThreadPagination(currentPage, pageCount, commentCnt)); } + public void getParagraphSummary(final RequestContext context) { + context.renderJSON(StatusCodes.ERR); + final JSONObject request = context.requestJSON(); + final String articleId = request.optString(Article.ARTICLE_T_ID, request.optString("articleId")); + final JSONObject currentUser = getCurrentUser(context, request); + final JSONObject article = getViewableArticle(articleId, currentUser); + if (null == article || Article.ARTICLE_TYPE_C_LONG != article.optInt(Article.ARTICLE_TYPE)) { + context.renderMsg("文章不存在或不可查看"); + return; + } + articleQueryService.processArticleContent(article); + + final Map counts = commentQueryService.getParagraphCommentCounts(articleId); + final List summaries = new java.util.ArrayList<>(); + for (final LongArticleParagraphService.Paragraph paragraph : + longArticleParagraphService.extractRendered(articleId, article.optString(Article.ARTICLE_CONTENT))) { + final JSONObject item = new JSONObject(); + item.put("paragraphId", paragraph.getId()); + item.put("commentCount", counts.getOrDefault(paragraph.getId(), 0)); + summaries.add(item); + } + context.renderJSON(StatusCodes.SUCC).renderJSONValue("paragraphComments", summaries); + } + + public void getParagraphThreadParents(final RequestContext context) { + context.renderJSON(StatusCodes.ERR); + final JSONObject request = context.requestJSON(); + final String articleId = request.optString(Article.ARTICLE_T_ID, request.optString("articleId")); + final String paragraphId = request.optString("paragraphId"); + final JSONObject currentUser = getCurrentUser(context, request); + final JSONObject article = getViewableArticle(articleId, currentUser); + if (null == article || Article.ARTICLE_TYPE_C_LONG != article.optInt(Article.ARTICLE_TYPE)) { + context.renderMsg("段落不存在或不可查看"); + return; + } + articleQueryService.processArticleContent(article); + final LongArticleParagraphService.Paragraph paragraph = longArticleParagraphService.findRenderedParagraph( + articleId, article.optString(Article.ARTICLE_CONTENT), paragraphId); + if (null == paragraph) { + context.renderMsg("段落不存在或不可查看"); + return; + } + final int pageNum = request.optInt(Pagination.PAGINATION_CURRENT_PAGE_NUM, 1); + if (pageNum < 1) { + context.renderMsg("页码无效"); + return; + } + final int sortMode = normalizeCommentViewMode(request); + final String currentUserId = getCurrentUserId(currentUser); + final int commentCnt = commentQueryService.countParagraphThreadParents(articleId, paragraphId); + final int pageCount = (int) Math.ceil((double) commentCnt / Symphonys.ARTICLE_COMMENTS_CNT); + final int currentPage = normalizeThreadPage(pageNum, pageCount, sortMode); + final List comments = commentQueryService.getParagraphThreadParentComments(articleId, + paragraphId, currentPage, sortMode, normalizeCommentSort(request.optString("sort")), + currentUserId, article.optString(Article.ARTICLE_AUTHOR_ID)); + fillThreadParentViewState(comments, article, currentUser, sortMode); + context.renderJSON(StatusCodes.SUCC). + renderJSONValue(COMMENT_THREAD_PARENTS, comments). + renderJSONValue("paragraphId", paragraphId). + renderJSONValue("paragraphSnapshot", paragraph.getSnapshot()). + renderJSONValue(Pagination.PAGINATION, buildThreadPagination(currentPage, pageCount, commentCnt)); + } + public void getThreadReplies(final RequestContext context) { context.renderJSON(StatusCodes.ERR); final JSONObject requestJSONObject = context.requestJSON(); @@ -818,6 +895,14 @@ private int normalizeCommentViewMode(final JSONObject requestJSONObject) { * @param context the specified context */ public void addComment(final RequestContext context) { + addComment(context, false); + } + + public void addParagraphComment(final RequestContext context) { + addComment(context, true); + } + + private void addComment(final RequestContext context, final boolean paragraphComment) { context.renderJSON(StatusCodes.ERR); final Request request = context.getRequest(); @@ -846,6 +931,15 @@ public void addComment(final RequestContext context) { comment.put(Comment.COMMENT_UA, ua); } comment.put(Comment.COMMENT_ORIGINAL_COMMENT_ID, commentOriginalCommentId); + if (paragraphComment) { + comment.put(Comment.COMMENT_TYPE, Comment.COMMENT_TYPE_C_PARAGRAPH); + comment.put(Comment.COMMENT_PARAGRAPH_ID, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_ID)); + comment.put(Comment.COMMENT_PARAGRAPH_KIND, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_KIND)); + comment.put(Comment.COMMENT_PARAGRAPH_INDEX, requestJSONObject.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1)); + comment.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); + comment.put(Comment.COMMENT_PARAGRAPH_STATUS, requestJSONObject.optInt( + Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE)); + } try { JSONObject currentUser = Sessions.getUser(); @@ -889,7 +983,7 @@ public void addComment(final RequestContext context) { comment.put(Comment.COMMENT_VISIBLE, isOnlyAuthorVisible ? Comment.COMMENT_VISIBLE_C_AUTHOR : Comment.COMMENT_VISIBLE_C_ALL); - commentMgmtService.addComment(comment); + final String commentId = commentMgmtService.addComment(comment); if ((!commentAuthorId.equals(articleAuthorId) && UserExt.USER_XXX_STATUS_C_ENABLED == currentUser.optInt(UserExt.USER_REPLY_WATCH_ARTICLE_STATUS)) @@ -898,6 +992,9 @@ public void addComment(final RequestContext context) { } context.renderJSONValue(Keys.CODE, StatusCodes.SUCC); + if (paragraphComment) { + context.renderJSONValue("commentId", commentId); + } } catch (final ServiceException e) { context.renderMsg(e.getMessage()); } diff --git a/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java b/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java index 901557d9..cb4cf3fd 100644 --- a/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java +++ b/src/main/java/org/b3log/symphony/processor/channel/ArticleChannel.java @@ -267,7 +267,9 @@ private static JSONObject buildCommentPayload(final JSONObject message) { Comment.COMMENT_STATUS, Common.REWARED_COUNT, Common.REWARDED, Comment.COMMENT_T_VOTE, Comment.COMMENT_REVISION_COUNT, Comment.COMMENT_T_NICE, Comment.COMMENT_T_THANK_LABEL, Comment.COMMENT_T_IS_ARTICLE_AUTHOR, - Comment.COMMENT_T_IS_CURRENT_USER, "sysMetal", "reactionSummary", "currentUserReaction" + Comment.COMMENT_T_IS_CURRENT_USER, "sysMetal", "reactionSummary", "currentUserReaction", + Comment.COMMENT_TYPE, Comment.COMMENT_PARAGRAPH_ID, Comment.COMMENT_PARAGRAPH_KIND, + Comment.COMMENT_PARAGRAPH_INDEX, Comment.COMMENT_PARAGRAPH_SNAPSHOT, Comment.COMMENT_PARAGRAPH_STATUS }; for (final String field : publicFields) { if (message.has(field)) { diff --git a/src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java b/src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java new file mode 100644 index 00000000..e1a2f50c --- /dev/null +++ b/src/main/java/org/b3log/symphony/processor/middleware/validate/LongArticleParagraphCommentValidationMidware.java @@ -0,0 +1,97 @@ +/* + * Rhythm - A modern community (forum/BBS/SNS/blog) platform written in Java. + * Modified version from Symphony, Thanks Symphony :) + * Copyright (C) 2012-present, b3log.org + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + */ +package org.b3log.symphony.processor.middleware.validate; + +import org.apache.commons.lang.StringUtils; +import org.b3log.latke.Keys; +import org.b3log.latke.ioc.Inject; +import org.b3log.latke.ioc.Singleton; +import org.b3log.latke.http.RequestContext; +import org.b3log.symphony.model.Article; +import org.b3log.symphony.model.Comment; +import org.b3log.symphony.service.ArticleQueryService; +import org.b3log.symphony.service.CommentQueryService; +import org.b3log.symphony.service.LongArticleParagraphService; +import org.json.JSONObject; + +/** Validates and enriches a long article paragraph comment request. */ +@Singleton +public class LongArticleParagraphCommentValidationMidware { + + @Inject + private LongArticleParagraphService paragraphService; + + @Inject + private ArticleQueryService articleQueryService; + + @Inject + private CommentQueryService commentQueryService; + + public void handle(final RequestContext context) { + JSONObject request = (JSONObject) context.attr(Keys.REQUEST); + if (null == request) { + request = context.requestJSON(); + context.getRequest().setAttribute(Keys.REQUEST, request); + } + final String articleId = request.optString(Article.ARTICLE_T_ID); + final JSONObject article = articleQueryService.getArticleById(articleId); + if (null == article || Article.ARTICLE_TYPE_C_LONG != article.optInt(Article.ARTICLE_TYPE)) { + reject(context, "段评仅支持长篇文章"); + return; + } + articleQueryService.processArticleContent(article); + + final String paragraphId = request.optString("paragraphId"); + final String originalId = request.optString(Comment.COMMENT_ORIGINAL_COMMENT_ID); + try { + JSONObject source = null; + if (StringUtils.isNotBlank(originalId)) { + source = commentQueryService.getComment(originalId); + if (null == source || !articleId.equals(source.optString(Comment.COMMENT_ON_ARTICLE_ID)) + || Comment.COMMENT_TYPE_C_PARAGRAPH != source.optInt(Comment.COMMENT_TYPE) + || Comment.COMMENT_STATUS_C_VALID != source.optInt(Comment.COMMENT_STATUS) + || !paragraphId.equals(source.optString(Comment.COMMENT_PARAGRAPH_ID))) { + reject(context, "段评回复目标无效"); + return; + } + request.put(Comment.COMMENT_PARAGRAPH_ID, source.optString(Comment.COMMENT_PARAGRAPH_ID)); + request.put(Comment.COMMENT_PARAGRAPH_KIND, source.optString(Comment.COMMENT_PARAGRAPH_KIND)); + request.put(Comment.COMMENT_PARAGRAPH_INDEX, source.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1)); + request.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, source.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); + request.put(Comment.COMMENT_PARAGRAPH_STATUS, + source.optInt(Comment.COMMENT_PARAGRAPH_STATUS)); + } else { + final LongArticleParagraphService.Paragraph paragraph = paragraphService.findRenderedParagraph( + articleId, article.optString(Article.ARTICLE_CONTENT), paragraphId); + if (null == paragraph) { + reject(context, "段落不存在或已更新"); + return; + } + request.put(Comment.COMMENT_PARAGRAPH_KIND, paragraph.getKind()); + request.put(Comment.COMMENT_PARAGRAPH_ID, paragraph.getId()); + request.put(Comment.COMMENT_PARAGRAPH_INDEX, paragraph.getIndex()); + request.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, paragraph.getSnapshot()); + } + request.put(Comment.COMMENT_TYPE, Comment.COMMENT_TYPE_C_PARAGRAPH); + if (!request.has(Comment.COMMENT_PARAGRAPH_STATUS)) { + request.put(Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE); + } + context.handle(); + } catch (final Exception e) { + reject(context, "段落校验失败"); + } + } + + private void reject(final RequestContext context, final String message) { + context.renderJSON(new JSONObject().put(Keys.CODE, -1).put(Keys.MSG, message)); + context.abort(); + } +} diff --git a/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java b/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java index a3201c04..523ad417 100644 --- a/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java +++ b/src/main/java/org/b3log/symphony/service/ArticleMgmtService.java @@ -176,6 +176,9 @@ public class ArticleMgmtService { @Inject private LongArticleColumnMgmtService longArticleColumnMgmtService; + @Inject + private LongArticleParagraphService longArticleParagraphService; + @Inject private ColumnCoverMgmtService columnCoverMgmtService; @@ -918,6 +921,7 @@ public synchronized void updateArticle(final JSONObject requestJSONObject) throw articleToUpdate.put(Article.ARTICLE_QNA_OFFER_POINT, qnaOfferPoint); final int articleType = requestJSONObject.optInt(Article.ARTICLE_TYPE, Article.ARTICLE_TYPE_C_NORMAL); + final int oldArticleType = articleToUpdate.optInt(Article.ARTICLE_TYPE, Article.ARTICLE_TYPE_C_NORMAL); final Transaction transaction = articleRepository.beginTransaction(); @@ -984,6 +988,10 @@ public synchronized void updateArticle(final JSONObject requestJSONObject) throw final boolean titleChanged = !oldTitle.replaceAll("\\s+", "").equals(articleTitle.replaceAll("\\s+", "")); final boolean contentChanged = !oldContent.replaceAll("\\s+", "").equals(articleContent.replaceAll("\\s+", "")); + if (contentChanged && (Article.ARTICLE_TYPE_C_LONG == articleType + || Article.ARTICLE_TYPE_C_LONG == oldArticleType)) { + longArticleParagraphService.migrateCommentsInCurrentTransaction(articleId, oldContent, articleContent); + } if (notIn5m && Article.ARTICLE_TYPE_C_THOUGHT != articleType && (titleChanged || contentChanged)) { final JSONObject revision = new JSONObject(); diff --git a/src/main/java/org/b3log/symphony/service/CommentMgmtService.java b/src/main/java/org/b3log/symphony/service/CommentMgmtService.java index 312643f9..8b5b75f0 100644 --- a/src/main/java/org/b3log/symphony/service/CommentMgmtService.java +++ b/src/main/java/org/b3log/symphony/service/CommentMgmtService.java @@ -490,6 +490,20 @@ public synchronized String addComment(final JSONObject requestJSONObject) throws originalCmt.put(Comment.COMMENT_REPLY_CNT, originalCmtReplyCnt + 1); commentRepository.update(originalCmtId, originalCmt); + if (Comment.COMMENT_TYPE_C_PARAGRAPH == originalCmt.optInt(Comment.COMMENT_TYPE)) { + requestJSONObject.put(Comment.COMMENT_TYPE, Comment.COMMENT_TYPE_C_PARAGRAPH); + requestJSONObject.put(Comment.COMMENT_PARAGRAPH_ID, + originalCmt.optString(Comment.COMMENT_PARAGRAPH_ID)); + requestJSONObject.put(Comment.COMMENT_PARAGRAPH_KIND, + originalCmt.optString(Comment.COMMENT_PARAGRAPH_KIND)); + requestJSONObject.put(Comment.COMMENT_PARAGRAPH_INDEX, + originalCmt.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1)); + requestJSONObject.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, + originalCmt.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); + requestJSONObject.put(Comment.COMMENT_PARAGRAPH_STATUS, + originalCmt.optInt(Comment.COMMENT_PARAGRAPH_STATUS)); + } + notificationMgmtService.makeRead(commentAuthorId, Arrays.asList(originalCmtId)); } @@ -543,6 +557,19 @@ public synchronized String addComment(final JSONObject requestJSONObject) throws comment.put(Comment.COMMENT_REPLY_CNT, 0); comment.put(Comment.COMMENT_AUDIO_URL, ""); comment.put(Comment.COMMENT_QNA_OFFERED, Comment.COMMENT_QNA_OFFERED_C_NOT); + comment.put(Comment.COMMENT_TYPE, requestJSONObject.optInt(Comment.COMMENT_TYPE, + Comment.COMMENT_TYPE_C_ARTICLE)); + comment.put(Comment.COMMENT_PARAGRAPH_ID, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_ID)); + comment.put(Comment.COMMENT_PARAGRAPH_KIND, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_KIND)); + comment.put(Comment.COMMENT_PARAGRAPH_INDEX, requestJSONObject.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1)); + comment.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, requestJSONObject.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); + comment.put(Comment.COMMENT_PARAGRAPH_STATUS, requestJSONObject.optInt(Comment.COMMENT_PARAGRAPH_STATUS, + Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE)); + if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE) + && StringUtils.isNotBlank(comment.optString(Comment.COMMENT_PARAGRAPH_ID))) { + comment.put(Comment.COMMENT_SHARP_URL, "/article/" + articleId + "?paragraph=" + + comment.optString(Comment.COMMENT_PARAGRAPH_ID) + "#" + ret); + } // Adds the comment final String commentId = commentRepository.add(comment); diff --git a/src/main/java/org/b3log/symphony/service/CommentQueryService.java b/src/main/java/org/b3log/symphony/service/CommentQueryService.java index bacc9874..df77c10a 100644 --- a/src/main/java/org/b3log/symphony/service/CommentQueryService.java +++ b/src/main/java/org/b3log/symphony/service/CommentQueryService.java @@ -197,10 +197,17 @@ public String getCommentURL(final String commentId, final int sortMode, final in } String title = Escapes.escapeHTML(article.optString(Article.ARTICLE_TITLE)); title = Emotions.convert(title); - final int commentPage = getCommentThreadPage(articleId, commentId, sortMode, pageSize); - - return "" + title + ""; + final String paragraphId = comment.optString(Comment.COMMENT_PARAGRAPH_ID); + final String sharpURL; + if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE) + && StringUtils.isNotBlank(paragraphId)) { + sharpURL = "/article/" + articleId + "?paragraph=" + paragraphId + "#" + commentId; + } else { + final int commentPage = getCommentThreadPage(articleId, commentId, sortMode, pageSize); + sharpURL = "/article/" + articleId + "?p=" + commentPage + "&m=" + sortMode + "#" + commentId; + } + return "" + title + ""; } catch (final Exception e) { LOGGER.log(Level.ERROR, "Gets comment URL failed", e); @@ -422,6 +429,7 @@ public List getNiceComments(final int commentViewMode, setPage(1, fetchSize).setPageCount(1). setFilter(CompositeFilterOperator.and( new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId), + new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_ARTICLE), new PropertyFilter(Comment.COMMENT_SCORE, FilterOperator.GREATER_THAN, 0D), new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID))); try { @@ -609,7 +617,7 @@ public List getUserComments(final String userId, final int anonymous final String commentId = comment.optString(Keys.OBJECT_ID); final int cmtViewMode = UserExt.USER_COMMENT_VIEW_MODE_C_TRADITIONAL; final int cmtPage = getCommentThreadPage(articleId, commentId, cmtViewMode, Symphonys.ARTICLE_COMMENTS_CNT); - comment.put(Comment.COMMENT_SHARP_URL, "/article/" + articleId + "?p=" + cmtPage + "&m=" + cmtViewMode + "#" + commentId); + comment.put(Comment.COMMENT_SHARP_URL, buildCommentSharpURL(comment, articleId, cmtPage, cmtViewMode)); if (Article.ARTICLE_TYPE_C_DISCUSSION == article.optInt(Article.ARTICLE_TYPE) && Article.ARTICLE_ANONYMOUS_C_PUBLIC == article.optInt(Article.ARTICLE_ANONYMOUS)) { @@ -712,6 +720,116 @@ public int countArticleComments(final String articleId, final String authorId) { } } + public int countChapterComments(final String articleId) { + final Query query = new Query().setFilter(buildChapterCommentFilter(articleId)); + try { + return (int) commentRepository.count(query); + } catch (final RepositoryException e) { + LOGGER.log(Level.ERROR, "Counts chapter comments failed", e); + return 0; + } + } + + public int countParagraphComments(final String articleId, final String paragraphId) { + final Query query = new Query().setFilter(buildParagraphCommentFilter(articleId, paragraphId)); + try { + return (int) commentRepository.count(query); + } catch (final RepositoryException e) { + LOGGER.log(Level.ERROR, "Counts paragraph comments failed", e); + return 0; + } + } + + public int countParagraphThreadParents(final String articleId, final String paragraphId) { + final Query query = new Query().setFilter(buildParagraphThreadParentCommentFilter(articleId, paragraphId)); + try { + return (int) commentRepository.count(query); + } catch (final RepositoryException e) { + LOGGER.log(Level.ERROR, "Counts paragraph comment threads failed", e); + return 0; + } + } + + public Map getParagraphCommentCounts(final String articleId) { + final Map ret = new LinkedHashMap<>(); + final Filter filter = buildParagraphArticleFilter(articleId); + try { + final List comments = commentRepository.getList(new Query().setPage(1, Integer.MAX_VALUE). + setPageCount(1).setFilter(filter).select(Comment.COMMENT_PARAGRAPH_ID)); + for (final JSONObject comment : comments) { + final String paragraphId = comment.optString(Comment.COMMENT_PARAGRAPH_ID); + if (StringUtils.isNotBlank(paragraphId)) { + ret.put(paragraphId, ret.getOrDefault(paragraphId, 0) + 1); + } + } + } catch (final RepositoryException e) { + LOGGER.log(Level.ERROR, "Gets paragraph comment counts failed", e); + } + return ret; + } + + public List getParagraphThreadParentComments(final String articleId, final String paragraphId, + final int currentPageNum, final int sortMode, + final String commentSort, final String currentUserId, + final String articleAuthorId) { + final Query query = new Query().setPageCount(1). + setPage(currentPageNum, Symphonys.ARTICLE_COMMENTS_CNT). + setFilter(buildParagraphThreadParentCommentFilter(articleId, paragraphId)); + if (COMMENT_SORT_HOT.equals(commentSort)) { + query.addSort(Comment.COMMENT_SCORE, SortDirection.DESCENDING). + addSort(Keys.OBJECT_ID, SortDirection.DESCENDING); + } else if (UserExt.USER_COMMENT_VIEW_MODE_C_REALTIME == sortMode) { + query.addSort(Keys.OBJECT_ID, SortDirection.DESCENDING); + } else { + query.addSort(Keys.OBJECT_ID, SortDirection.ASCENDING); + } + try { + final JSONObject result = commentRepository.get(query); + final List comments = (List) result.opt(Keys.RESULTS); + organizeComments(comments); + final ThreadQueryContext context = buildThreadQueryContext( + currentUserId, "", articleId, articleAuthorId); + final List ret = new ArrayList<>(); + for (final JSONObject comment : comments) { + fillArticleCommentMetadata(comment, articleId, sortMode, Symphonys.ARTICLE_COMMENTS_CNT); + fillCommentThreadPreview(comment, currentUserId); + ret.add(buildThreadParentComment(comment, context)); + } + return ret; + } catch (final RepositoryException e) { + LOGGER.log(Level.ERROR, "Gets paragraph comments failed", e); + return java.util.Collections.emptyList(); + } + } + + public List getOrphanedParagraphThreadParentComments(final String articleId, + final String currentUserId, + final String articleAuthorId) { + final Query query = new Query().setPageCount(1).setPage(1, Integer.MAX_VALUE). + setFilter(buildOrphanedParagraphThreadParentCommentFilter(articleId)). + addSort(Keys.OBJECT_ID, SortDirection.ASCENDING); + try { + final List comments = commentRepository.getList(query); + organizeComments(comments); + final ThreadQueryContext context = buildThreadQueryContext( + currentUserId, "", articleId, articleAuthorId); + final List ret = new ArrayList<>(); + for (final JSONObject comment : comments) { + fillArticleCommentMetadata(comment, articleId, + UserExt.USER_COMMENT_VIEW_MODE_C_TRADITIONAL, Symphonys.ARTICLE_COMMENTS_CNT); + fillCommentThreadPreview(comment, currentUserId); + final JSONObject target = buildThreadParentComment(comment, context); + target.put(Comment.COMMENT_T_NICE, false); + ret.add(target); + } + reactionQueryService.fillCommentReactions(ret, currentUserId); + return ret; + } catch (final RepositoryException e) { + LOGGER.log(Level.ERROR, "Gets orphaned paragraph comments failed", e); + return Collections.emptyList(); + } + } + public int countArticleThreadParentComments(final JSONObject options) { final String articleId = options.optString(Article.ARTICLE_T_ID, options.optString("articleId")); final Query query = new Query().setFilter(buildThreadParentCommentFilter(articleId, options.optString(Comment.COMMENT_AUTHOR_ID))); @@ -880,7 +998,7 @@ private Query buildArticleCommentQuery(final String articleId, final int current } private Filter buildArticleCommentFilter(final String articleId, final String authorId) { - final Filter articleFilter = new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId); + final Filter articleFilter = buildChapterCommentFilter(articleId); if (StringUtils.isBlank(authorId)) { return articleFilter; } @@ -889,6 +1007,52 @@ private Filter buildArticleCommentFilter(final String articleId, final String au new PropertyFilter(Comment.COMMENT_AUTHOR_ID, FilterOperator.EQUAL, authorId)); } + private Filter buildChapterCommentFilter(final String articleId) { + return CompositeFilterOperator.and( + new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId), + new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_ARTICLE), + new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID)); + } + + private Filter buildParagraphCommentFilter(final String articleId, final String paragraphId) { + return CompositeFilterOperator.and(buildParagraphArticleFilter(articleId), + new PropertyFilter(Comment.COMMENT_PARAGRAPH_ID, FilterOperator.EQUAL, paragraphId)); + } + + private Filter buildParagraphArticleFilter(final String articleId) { + return CompositeFilterOperator.and( + new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId), + new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_PARAGRAPH), + new PropertyFilter(Comment.COMMENT_PARAGRAPH_STATUS, FilterOperator.EQUAL, + Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE), + new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID)); + } + + private Filter buildParagraphThreadParentCommentFilter(final String articleId, final String paragraphId) { + return CompositeFilterOperator.and(buildParagraphCommentFilter(articleId, paragraphId), + new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, "")); + } + + private Filter buildOrphanedParagraphThreadParentCommentFilter(final String articleId) { + return CompositeFilterOperator.and( + new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId), + new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_PARAGRAPH), + new PropertyFilter(Comment.COMMENT_PARAGRAPH_STATUS, FilterOperator.EQUAL, + Comment.COMMENT_PARAGRAPH_STATUS_C_ORPHANED), + new PropertyFilter(Comment.COMMENT_STATUS, FilterOperator.EQUAL, Comment.COMMENT_STATUS_C_VALID), + new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, "")); + } + + private String buildCommentSharpURL(final JSONObject comment, final String articleId, + final int commentPage, final int sortMode) { + final String paragraphId = comment.optString(Comment.COMMENT_PARAGRAPH_ID); + if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE) + && StringUtils.isNotBlank(paragraphId)) { + return "/article/" + articleId + "?paragraph=" + paragraphId + "#" + comment.optString(Keys.OBJECT_ID); + } + return "/article/" + articleId + "?p=" + commentPage + "&m=" + sortMode + "#" + comment.optString(Keys.OBJECT_ID); + } + private Query buildThreadParentCommentQuery(final JSONObject options) { final Query query = new Query(). setPageCount(1). @@ -908,7 +1072,7 @@ private Query buildThreadParentCommentQuery(final JSONObject options) { private Filter buildThreadParentCommentFilter(final String articleId, final String authorId) { final Filter parentFilter = CompositeFilterOperator.and( - new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId), + buildChapterCommentFilter(articleId), new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, "")); if (StringUtils.isBlank(authorId)) { return parentFilter; @@ -920,7 +1084,11 @@ private Filter buildThreadParentCommentFilter(final String articleId, final Stri private Filter buildThreadPageBeforeFilter(final String articleId, final JSONObject rootComment, final int sortMode, final String commentSort, final String authorId) { - final Filter parentFilter = buildThreadParentCommentFilter(articleId, authorId); + final Filter parentFilter = Comment.COMMENT_TYPE_C_PARAGRAPH == rootComment.optInt(Comment.COMMENT_TYPE) + ? CompositeFilterOperator.and(buildParagraphCommentFilter(articleId, + rootComment.optString(Comment.COMMENT_PARAGRAPH_ID)), + new PropertyFilter(Comment.COMMENT_ORIGINAL_COMMENT_ID, FilterOperator.EQUAL, "")) + : buildThreadParentCommentFilter(articleId, authorId); if (COMMENT_SORT_HOT.equals(commentSort)) { return CompositeFilterOperator.and(parentFilter, buildHotThreadBeforeFilter(rootComment)); } @@ -1092,6 +1260,12 @@ private JSONObject buildThreadCommentBase(final JSONObject comment, final Thread ret.put(Comment.COMMENT_CREATE_TIME_STR, comment.optString(Comment.COMMENT_CREATE_TIME_STR)); ret.put(Comment.COMMENT_CONTENT, comment.optString(Comment.COMMENT_CONTENT)); ret.put(Comment.COMMENT_VISIBLE, comment.optInt(Comment.COMMENT_VISIBLE)); + ret.put(Comment.COMMENT_TYPE, comment.optInt(Comment.COMMENT_TYPE)); + ret.put(Comment.COMMENT_PARAGRAPH_ID, comment.optString(Comment.COMMENT_PARAGRAPH_ID)); + ret.put(Comment.COMMENT_PARAGRAPH_KIND, comment.optString(Comment.COMMENT_PARAGRAPH_KIND)); + ret.put(Comment.COMMENT_PARAGRAPH_INDEX, comment.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1)); + ret.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); + ret.put(Comment.COMMENT_PARAGRAPH_STATUS, comment.optInt(Comment.COMMENT_PARAGRAPH_STATUS)); fillThreadCommentState(ret, comment, context); fillOriginalAuthor(ret, null); filterThreadCommentContent(ret, comment, context); @@ -1160,7 +1334,7 @@ private void filterThreadCommentContent(final JSONObject target, final JSONObjec */ public List getArticleCommentors(final String articleId) { final Query query = new Query(). - setFilter(new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId)). + setFilter(buildChapterCommentFilter(articleId)). addSort(Keys.OBJECT_ID, SortDirection.DESCENDING). select(Comment.COMMENT_AUTHOR_ID); diff --git a/src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java b/src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java new file mode 100644 index 00000000..7c3dfdd6 --- /dev/null +++ b/src/main/java/org/b3log/symphony/service/LongArticleParagraphService.java @@ -0,0 +1,486 @@ +/* + * Rhythm - A modern community (forum/BBS/SNS/blog) platform written in Java. + * Copyright (C) 2012-present, b3log.org + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + */ +package org.b3log.symphony.service; + +import org.apache.commons.lang.StringUtils; +import org.b3log.latke.Latkes; +import org.b3log.latke.Keys; +import org.b3log.latke.ioc.Inject; +import org.b3log.latke.repository.CompositeFilterOperator; +import org.b3log.latke.repository.Filter; +import org.b3log.latke.repository.FilterOperator; +import org.b3log.latke.repository.PropertyFilter; +import org.b3log.latke.repository.Query; +import org.b3log.latke.repository.RepositoryException; +import org.b3log.latke.service.annotation.Service; +import org.b3log.symphony.model.Comment; +import org.b3log.symphony.repository.CommentRepository; +import org.b3log.symphony.util.Emotions; +import org.b3log.symphony.util.Markdowns; +import org.b3log.symphony.util.MediaPlayers; +import org.jsoup.Jsoup; +import org.jsoup.nodes.Document; +import org.jsoup.nodes.Element; +import org.jsoup.nodes.Node; +import org.jsoup.parser.Tag; +import org.json.JSONObject; + +import java.nio.charset.StandardCharsets; +import java.security.MessageDigest; +import java.util.ArrayList; +import java.util.Comparator; +import java.util.HashMap; +import java.util.HashSet; +import java.util.LinkedHashMap; +import java.util.List; +import java.util.Map; +import java.util.Set; +import java.util.regex.Pattern; + +/** + * Parses, annotates and migrates long-article paragraph anchors. + */ +@Service +public class LongArticleParagraphService { + + private static final Pattern WHITESPACE = Pattern.compile("\\s+"); + + private static final Pattern INVISIBLE = Pattern.compile("[\\p{Cc}\\p{Cf}]"); + + private static final int SNAPSHOT_MAX_LENGTH = 1024; + + private static final double FUZZY_MATCH_THRESHOLD = 0.82D; + + private static final int FUZZY_MATCH_CANDIDATE_LIMIT = 32; + + @Inject + private CommentRepository commentRepository; + + @Inject + private ShortLinkQueryService shortLinkQueryService; + + public static final class Paragraph { + private String id; + private final String kind; + private int index; + private final String normalizedText; + private final String snapshot; + private Element element; + + private Paragraph(final String kind, final String normalizedText, final String snapshot, + final Element element) { + this.kind = kind; + this.normalizedText = normalizedText; + this.snapshot = snapshot; + this.element = element; + } + + public String getId() { + return id; + } + + public String getKind() { + return kind; + } + + public int getIndex() { + return index; + } + + public String getSnapshot() { + return snapshot; + } + + private JSONObject toJSON() { + final JSONObject ret = new JSONObject(); + ret.put(Comment.COMMENT_PARAGRAPH_ID, id); + ret.put(Comment.COMMENT_PARAGRAPH_KIND, kind); + ret.put(Comment.COMMENT_PARAGRAPH_INDEX, index); + ret.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, snapshot); + return ret; + } + } + + public JSONObject annotateRenderedContent(final String articleId, final String renderedHTML) { + final Document document = parse(renderedHTML); + final List paragraphs = extract(articleId, document, true); + final List paragraphJSON = new ArrayList<>(); + for (final Paragraph paragraph : paragraphs) { + paragraphJSON.add(paragraph.toJSON()); + } + final Document.OutputSettings outputSettings = new Document.OutputSettings(); + outputSettings.prettyPrint(false); + document.outputSettings(outputSettings); + final JSONObject ret = new JSONObject(); + ret.put("html", document.body().html()); + ret.put("paragraphs", paragraphJSON); + return ret; + } + + public Paragraph findParagraph(final String articleId, final String markdown, final String paragraphId) { + if (!isValidParagraphId(paragraphId)) { + return null; + } + for (final Paragraph paragraph : extractMarkdown(articleId, markdown)) { + if (paragraphId.equals(paragraph.id)) { + return paragraph; + } + } + return null; + } + + public Paragraph findRenderedParagraph(final String articleId, final String renderedHTML, + final String paragraphId) { + if (!isValidParagraphId(paragraphId)) { + return null; + } + for (final Paragraph paragraph : extract(articleId, parse(renderedHTML), false)) { + if (paragraphId.equals(paragraph.id)) { + return paragraph; + } + } + return null; + } + + public List extractRendered(final String articleId, final String renderedHTML) { + return extract(articleId, parse(renderedHTML), false); + } + + public boolean isValidParagraphId(final String paragraphId) { + return null != paragraphId && paragraphId.matches("[0-9a-f]{64}"); + } + + public List extractMarkdown(final String articleId, final String markdown) { + String content = shortLinkQueryService.linkArticle(StringUtils.defaultString(markdown)); + String html = Markdowns.toHTML(Emotions.convert(content)); + html = Markdowns.clean(html, Latkes.getServePath() + "/article/" + articleId); + html = MediaPlayers.renderAudio(html); + html = MediaPlayers.renderVideo(html); + return extract(articleId, parse(html), false); + } + + public void migrateCommentsInCurrentTransaction(final String articleId, final String oldMarkdown, + final String newMarkdown) throws RepositoryException { + final List comments = getParagraphComments(articleId); + if (comments.isEmpty()) { + return; + } + + final List oldParagraphs = extractMarkdown(articleId, oldMarkdown); + final List newParagraphs = extractMarkdown(articleId, newMarkdown); + final Map oldById = indexById(oldParagraphs); + final Map newById = indexById(newParagraphs); + final Map mapped = matchParagraphs(oldParagraphs, newParagraphs); + final Set claimedNewIds = new HashSet<>(); + for (final Paragraph paragraph : mapped.values()) { + claimedNewIds.add(paragraph.id); + } + + final Map> commentsByParagraph = new LinkedHashMap<>(); + for (final JSONObject comment : comments) { + commentsByParagraph.computeIfAbsent(comment.optString(Comment.COMMENT_PARAGRAPH_ID), key -> new ArrayList<>()).add(comment); + } + + for (final Map.Entry> entry : commentsByParagraph.entrySet()) { + final String oldId = entry.getKey(); + Paragraph target = newById.get(oldId); + if (null == target && oldById.containsKey(oldId)) { + target = mapped.get(oldId); + } + if (null == target) { + target = matchOrphan(entry.getValue().get(0), newParagraphs, claimedNewIds); + } + if (null != target) { + claimedNewIds.add(target.id); + } + updateCommentParagraphs(entry.getValue(), target); + } + } + + private List getParagraphComments(final String articleId) throws RepositoryException { + final Filter filter = CompositeFilterOperator.and( + new PropertyFilter(Comment.COMMENT_ON_ARTICLE_ID, FilterOperator.EQUAL, articleId), + new PropertyFilter(Comment.COMMENT_TYPE, FilterOperator.EQUAL, Comment.COMMENT_TYPE_C_PARAGRAPH)); + return commentRepository.getList(new Query().setPage(1, Integer.MAX_VALUE).setPageCount(1).setFilter(filter)); + } + + private void updateCommentParagraphs(final List comments, final Paragraph target) + throws RepositoryException { + for (final JSONObject comment : comments) { + if (null == target) { + comment.put(Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ORPHANED); + } else { + comment.put(Comment.COMMENT_PARAGRAPH_ID, target.id); + comment.put(Comment.COMMENT_PARAGRAPH_KIND, target.kind); + comment.put(Comment.COMMENT_PARAGRAPH_INDEX, target.index); + comment.put(Comment.COMMENT_PARAGRAPH_STATUS, Comment.COMMENT_PARAGRAPH_STATUS_C_ACTIVE); + } + commentRepository.update(comment.optString(Keys.OBJECT_ID), comment); + } + } + + private Map matchParagraphs(final List oldParagraphs, + final List newParagraphs) { + final Map ret = new HashMap<>(); + final Map newById = indexById(newParagraphs); + final Set used = new HashSet<>(); + for (final Paragraph oldParagraph : oldParagraphs) { + final Paragraph exact = newById.get(oldParagraph.id); + if (null != exact) { + ret.put(oldParagraph.id, exact); + used.add(exact.id); + } + } + for (final Paragraph oldParagraph : oldParagraphs) { + if (ret.containsKey(oldParagraph.id) || oldParagraph.normalizedText.length() < 12) { + continue; + } + final Paragraph matched = bestMatch(oldParagraph.kind, oldParagraph.normalizedText, + oldParagraph.index, newParagraphs, used); + if (null != matched) { + ret.put(oldParagraph.id, matched); + used.add(matched.id); + } + } + return ret; + } + + private Paragraph matchOrphan(final JSONObject comment, final List paragraphs, + final Set used) { + final String snapshot = normalize(comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); + if (snapshot.length() < 12) { + return null; + } + return bestMatch(comment.optString(Comment.COMMENT_PARAGRAPH_KIND), snapshot, + comment.optInt(Comment.COMMENT_PARAGRAPH_INDEX, -1), paragraphs, used); + } + + private Paragraph bestMatch(final String kind, final String text, final int oldIndex, + final List candidates, final Set used) { + final String comparableText = StringUtils.substring(text, 0, SNAPSHOT_MAX_LENGTH); + return candidates.stream(). + filter(candidate -> kind.equals(candidate.kind) && !used.contains(candidate.id)). + sorted(Comparator.comparingInt(candidate -> oldIndex < 0 + ? candidate.index : Math.abs(oldIndex - candidate.index))). + limit(FUZZY_MATCH_CANDIDATE_LIMIT). + map(candidate -> new Match(candidate, similarity(comparableText, + StringUtils.substring(candidate.normalizedText, 0, SNAPSHOT_MAX_LENGTH)), + Math.abs(oldIndex - candidate.index))). + filter(match -> match.similarity >= FUZZY_MATCH_THRESHOLD). + sorted(Comparator.comparingDouble((Match match) -> match.similarity).reversed(). + thenComparingInt(match -> match.distance)). + map(match -> match.paragraph). + findFirst().orElse(null); + } + + private static final class Match { + private final Paragraph paragraph; + private final double similarity; + private final int distance; + + private Match(final Paragraph paragraph, final double similarity, final int distance) { + this.paragraph = paragraph; + this.similarity = similarity; + this.distance = distance; + } + } + + private double similarity(final String left, final String right) { + final int maxLength = Math.max(left.length(), right.length()); + if (0 == maxLength) { + return 1D; + } + final int[] previous = new int[right.length() + 1]; + final int[] current = new int[right.length() + 1]; + for (int j = 0; j <= right.length(); j++) { + previous[j] = j; + } + for (int i = 1; i <= left.length(); i++) { + current[0] = i; + for (int j = 1; j <= right.length(); j++) { + final int cost = left.charAt(i - 1) == right.charAt(j - 1) ? 0 : 1; + current[j] = Math.min(Math.min(current[j - 1] + 1, previous[j] + 1), previous[j - 1] + cost); + } + System.arraycopy(current, 0, previous, 0, current.length); + } + return 1D - ((double) previous[right.length()] / maxLength); + } + + private Map indexById(final List paragraphs) { + final Map ret = new HashMap<>(); + for (final Paragraph paragraph : paragraphs) { + ret.put(paragraph.id, paragraph); + } + return ret; + } + + private List extract(final String articleId, final Document document, final boolean annotate) { + final List paragraphs = new ArrayList<>(); + extractChildren(document.body(), paragraphs, annotate); + final Map duplicateCounts = new HashMap<>(); + int index = 0; + for (final Paragraph paragraph : paragraphs) { + paragraph.index = index++; + final String duplicateKey = paragraph.kind + "\n" + paragraph.normalizedText; + final int duplicateIndex = duplicateCounts.getOrDefault(duplicateKey, 0); + duplicateCounts.put(duplicateKey, duplicateIndex + 1); + paragraph.id = sha256(articleId + "\n" + duplicateKey + "\n" + duplicateIndex); + if (annotate && null != paragraph.element) { + paragraph.element.attr("data-long-paragraph-id", paragraph.id); + paragraph.element.attr("data-long-paragraph-kind", paragraph.kind); + paragraph.element.attr("data-long-paragraph-index", String.valueOf(paragraph.index)); + } + } + return paragraphs; + } + + private void extractChildren(final Element parent, final List paragraphs, final boolean annotate) { + for (final Element element : new ArrayList<>(parent.children())) { + final String tag = element.tagName(); + if ("p".equals(tag)) { + extractParagraph(element, paragraphs, annotate); + } else if (tag.matches("h[1-6]")) { + addParagraph("heading", element, paragraphs); + } else if ("ul".equals(tag) || "ol".equals(tag)) { + for (final Element child : element.children()) { + if ("li".equals(child.tagName())) { + addParagraph("list-item", child, paragraphs); + } + } + } else if ("blockquote".equals(tag)) { + addParagraph("blockquote", element, paragraphs); + } else if ("pre".equals(tag)) { + addParagraph("code", element, paragraphs); + } else if ("table".equals(tag)) { + addParagraph("table", element, paragraphs); + } else if ("figure".equals(tag) || isMediaTag(tag)) { + addParagraph("media", element, paragraphs); + } else if ("div".equals(tag) || "section".equals(tag) || "article".equals(tag) + || "main".equals(tag) || "header".equals(tag) || "footer".equals(tag)) { + extractChildren(element, paragraphs, annotate); + } + } + } + + private void extractParagraph(final Element paragraph, final List paragraphs, + final boolean annotate) { + if (containsMedia(paragraph)) { + addParagraph("media", paragraph, paragraphs); + return; + } + boolean hasDirectBreak = false; + for (final Node child : paragraph.childNodes()) { + if (child instanceof Element && "br".equals(((Element) child).tagName())) { + hasDirectBreak = true; + break; + } + } + if (!hasDirectBreak) { + addParagraph("paragraph", paragraph, paragraphs); + return; + } + + final List nodes = new ArrayList<>(paragraph.childNodes()); + if (annotate) { + paragraph.empty(); + Element line = paragraph.appendElement("span").addClass("long-article-paragraph-line"); + for (final Node node : nodes) { + if (node instanceof Element && "br".equals(((Element) node).tagName())) { + addParagraph("paragraph", line, paragraphs); + line = paragraph.appendElement("span").addClass("long-article-paragraph-line"); + } else { + line.appendChild(node); + } + } + addParagraph("paragraph", line, paragraphs); + return; + } + + final Element holder = new Element(Tag.valueOf("span"), ""); + Element line = holder.appendElement("span"); + for (final Node node : nodes) { + if (node instanceof Element && "br".equals(((Element) node).tagName())) { + addParagraph("paragraph", line, paragraphs); + line = holder.appendElement("span"); + } else { + line.appendChild(node.clone()); + } + } + addParagraph("paragraph", line, paragraphs); + } + + private void addParagraph(final String kind, final Element element, final List paragraphs) { + final String snapshot = snapshot(kind, element); + final String normalized = normalize(snapshot); + if (StringUtils.isBlank(normalized)) { + return; + } + paragraphs.add(new Paragraph(kind, normalized, StringUtils.substring(snapshot, 0, SNAPSHOT_MAX_LENGTH), element)); + } + + private String snapshot(final String kind, final Element element) { + String text = element.text(); + if ("media".equals(kind) && StringUtils.isBlank(text)) { + final Element media = findMedia(element); + if (null != media) { + text = StringUtils.defaultIfBlank(media.attr("alt"), + StringUtils.defaultIfBlank(media.attr("title"), media.attr("src"))); + } + if (StringUtils.isBlank(text)) { + text = "媒体"; + } + } + return normalize(text); + } + + private static boolean isMediaTag(final String tag) { + return "img".equals(tag) || "video".equals(tag) || "audio".equals(tag) + || "iframe".equals(tag) || "picture".equals(tag); + } + + private static boolean containsMedia(final Element element) { + return null != findMedia(element); + } + + private static Element findMedia(final Element element) { + for (final Element media : element.select("img,video,audio,iframe,picture")) { + if (!"img".equals(media.tagName()) || !media.hasClass("emoji")) { + return media; + } + } + return null; + } + + private static Document parse(final String html) { + final Document document = Jsoup.parseBodyFragment(StringUtils.defaultString(html)); + final Document.OutputSettings outputSettings = new Document.OutputSettings(); + outputSettings.prettyPrint(false); + document.outputSettings(outputSettings); + return document; + } + + private static String normalize(final String value) { + final String withoutInvisible = INVISIBLE.matcher(StringUtils.defaultString(value)).replaceAll(""); + return WHITESPACE.matcher(withoutInvisible).replaceAll(" ").trim(); + } + + private static String sha256(final String value) { + try { + final byte[] digest = MessageDigest.getInstance("SHA-256").digest(value.getBytes(StandardCharsets.UTF_8)); + final StringBuilder ret = new StringBuilder(64); + for (final byte b : digest) { + ret.append(String.format("%02x", b & 0xff)); + } + return ret.toString(); + } catch (final Exception e) { + throw new IllegalStateException("Generates paragraph id failed", e); + } + } +} diff --git a/src/main/java/org/b3log/symphony/service/NotificationQueryService.java b/src/main/java/org/b3log/symphony/service/NotificationQueryService.java index 881f9440..28150955 100644 --- a/src/main/java/org/b3log/symphony/service/NotificationQueryService.java +++ b/src/main/java/org/b3log/symphony/service/NotificationQueryService.java @@ -774,6 +774,9 @@ public JSONObject getCommentedNotifications(final String userId, final int curre commentedNotification.put(Notification.NOTIFICATION_HAS_READ, notification.optBoolean(Notification.NOTIFICATION_HAS_READ)); commentedNotification.put(Comment.COMMENT_T_ARTICLE_PERFECT, articlePerfect); commentedNotification.put(Comment.COMMENT_SHARP_URL, buildCommentSharpURL(comment, cmtViewMode)); + commentedNotification.put(Comment.COMMENT_TYPE, comment.optInt(Comment.COMMENT_TYPE)); + commentedNotification.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, + comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); rslts.add(commentedNotification); } @@ -851,6 +854,9 @@ public JSONObject getReplyNotifications(final String userId, final int currentPa replyNotification.put(Comment.COMMENT_CREATE_TIME, comment.opt(Comment.COMMENT_CREATE_TIME)); replyNotification.put(Notification.NOTIFICATION_HAS_READ, notification.optBoolean(Notification.NOTIFICATION_HAS_READ)); replyNotification.put(Comment.COMMENT_T_ARTICLE_PERFECT, articlePerfect); + replyNotification.put(Comment.COMMENT_TYPE, comment.optInt(Comment.COMMENT_TYPE)); + replyNotification.put(Comment.COMMENT_PARAGRAPH_SNAPSHOT, + comment.optString(Comment.COMMENT_PARAGRAPH_SNAPSHOT)); replyNotification.put(Notification.NOTIFICATION_DATA_TYPE, Notification.DATA_TYPE_C_REPLY); final String articleId = comment.optString(Comment.COMMENT_ON_ARTICLE_ID); replyNotification.put(Article.ARTICLE_T_ID, articleId); @@ -870,6 +876,11 @@ public JSONObject getReplyNotifications(final String userId, final int currentPa private String buildCommentSharpURL(final JSONObject comment, final int cmtViewMode) { final String articleId = comment.optString(Comment.COMMENT_ON_ARTICLE_ID); final String commentId = comment.optString(Keys.OBJECT_ID); + if (Comment.COMMENT_TYPE_C_PARAGRAPH == comment.optInt(Comment.COMMENT_TYPE) + && StringUtils.isNotBlank(comment.optString(Comment.COMMENT_PARAGRAPH_ID))) { + return "/article/" + articleId + "?paragraph=" + + comment.optString(Comment.COMMENT_PARAGRAPH_ID) + "#" + commentId; + } final int cmtPage = commentQueryService.getCommentThreadPage( articleId, commentId, cmtViewMode, Symphonys.ARTICLE_COMMENTS_CNT); return "/article/" + articleId + "?p=" + cmtPage + "&m=" + cmtViewMode + "#" + commentId; diff --git a/src/main/resources/js/article.js b/src/main/resources/js/article.js index ef753962..b4ff00cc 100644 --- a/src/main/resources/js/article.js +++ b/src/main/resources/js/article.js @@ -188,6 +188,7 @@ var Comment = { + Comment.renderThreadVoteAction(data, true) + Comment.renderThreadVoteAction(data, false) + Comment.renderThreadReportAction(data) + + Comment.renderThreadRemoveAction(data) + Comment.renderThreadHistoryAction(data) + Comment.renderThreadEditAction(data) + Comment.renderThreadReplyAction(data) @@ -243,6 +244,15 @@ var Comment = { Comment.escapeJSString(data.oId) + '\')">' }, + renderThreadRemoveAction: function (data) { + if (!data.commentIsCurrentUser || !Label.canRemoveComment) { + return '' + } + return '' + }, renderThreadEditAction: function (data) { if (!data.commentIsCurrentUser || !Label.canUpdateComment) { return '' @@ -698,6 +708,8 @@ var Comment = { if (!confirm('删除评论需要100积分，' + Label.confirmRemoveLabel)) { return false } + var commentElement = document.getElementById(id) + var paragraphId = commentElement ? commentElement.getAttribute('data-comment-paragraph-id') : '' $.ajax({ url: Label.servePath + '/comment/' + id + '/remove', type: 'POST', @@ -705,6 +717,9 @@ var Comment = { success: function (result, textStatus) { if (result.code === 0) { $('#' + id).remove() + if (paragraphId && window.LongArticleParagraphComments) { + window.LongArticleParagraphComments.handleRemove(paragraphId) + } } else { Util.alert(result.msg) } @@ -1581,12 +1596,21 @@ var Comment = { data('commentOriginalCommentId') } + var paragraphComments = window.LongArticleParagraphComments + var paragraphId = paragraphComments && paragraphComments.getSubmissionParagraphId + ? paragraphComments.getSubmissionParagraphId(requestJSONObject.commentOriginalCommentId) : '' + if (paragraphId) { + requestJSONObject.paragraphId = paragraphId + } + var url = Label.servePath + '/comment', type = 'POST', commentId = $('#replyUseName').data('commentId') if (commentId) { url = Label.servePath + '/comment/' + commentId type = 'PUT' + } else if (paragraphId) { + url = Label.servePath + '/comment/paragraph' } $.ajax({ @@ -1622,6 +1646,10 @@ var Comment = { // clear reply comment $('#replyUseName').text('').removeData() + if (paragraphId && paragraphComments) { + paragraphComments.handleSubmitSuccess() + } + // 发送后不主动调整页面位置，避免评论框收起时跳动 if (requestJSONObject.commentOriginalCommentId) { Comment.focusCommentById(requestJSONObject.commentOriginalCommentId, { @@ -1650,6 +1678,9 @@ var Comment = { * @param {String} userName 用户名称 */ reply: function (userName, id) { + if (window.LongArticleParagraphComments) { + window.LongArticleParagraphComments.activateFromComment(document.getElementById(id)) + } Comment._toggleReply(function () { var $target = Comment.getCommentElement(id) if ($target.length === 0) { diff --git a/src/main/resources/js/channel.js b/src/main/resources/js/channel.js index 1e893321..91f19b97 100644 --- a/src/main/resources/js/channel.js +++ b/src/main/resources/js/channel.js @@ -58,6 +58,11 @@ var ArticleChannel = { switch (data.type) { case 'comment': + if (parseInt(data.commentType || 0) === 1 && + window.LongArticleParagraphComments) { + window.LongArticleParagraphComments.handleRealtime(data) + break + } if (Label.commentAuthorFilter && !data.commentIsArticleAuthor) { return diff --git a/src/main/resources/js/long-article-paragraph.js b/src/main/resources/js/long-article-paragraph.js new file mode 100644 index 00000000..2bcaeb4f --- /dev/null +++ b/src/main/resources/js/long-article-paragraph.js @@ -0,0 +1,400 @@ +/** Long article paragraph comment interactions shared by PC and mobile. */ +window.LongArticleParagraphComments = { + activeParagraphId: '', + activeSnapshot: '', + activeParagraphOrphaned: false, + currentPage: 1, + currentSort: '', + counts: {}, + initialized: false, + + init: function () { + if (this.initialized) { + return + } + this.controller = window.LongArticle || window.MLongArticle + this.commentsPanel = this.controller && this.controller.getCommentsPanel() + if (!this.commentsPanel) { + return + } + this.initialized = true + this.ensurePanel() + this.decorateParagraphs() + this.bindEvents() + this.loadSummary() + var paragraphId = this.getQueryValue('paragraph') + if (paragraphId) { + this.open(paragraphId) + } + }, + + ensurePanel: function () { + if (document.getElementById('longArticleParagraphComments')) { + this.paragraphPanel = document.getElementById('longArticleParagraphComments') + return + } + var section = document.createElement('section') + section.id = 'longArticleParagraphComments' + section.className = 'long-article-paragraph-comments' + section.setAttribute('aria-hidden', 'true') + section.innerHTML = '
    ' + + '
    段评
    ' + + '' + + '

    ' + + '
    ' + + '' + + '
    ' + + '
    写段评
    ' + + '
      ' + + '
      暂无段评
      ' + + '
      ' + this.commentsPanel.appendChild(section) + this.paragraphPanel = section + }, + + decorateParagraphs: function () { + var self = this + document.querySelectorAll('[data-long-paragraph-id]').forEach(function (paragraph) { + if (self.getDirectCommentButton(paragraph)) { + return + } + paragraph.classList.add('long-article-commentable-block') + var button = document.createElement('button') + button.type = 'button' + button.className = 'long-article-paragraph-comment-btn' + button.setAttribute('data-open-paragraph-comments', paragraph.getAttribute('data-long-paragraph-id')) + button.setAttribute('aria-label', '查看段评') + button.innerHTML = '0' + paragraph.appendChild(button) + self.updateParagraphButton(paragraph.getAttribute('data-long-paragraph-id')) + }) + }, + + bindEvents: function () { + var self = this + document.addEventListener('click', function (event) { + var openButton = event.target.closest && event.target.closest('[data-open-paragraph-comments]') + if (openButton) { + event.preventDefault() + event.stopPropagation() + self.open(openButton.getAttribute('data-open-paragraph-comments')) + return + } + if (event.target.closest && event.target.closest('[data-paragraph-comments-close]')) { + self.close() + return + } + var sortButton = event.target.closest && event.target.closest('[data-paragraph-sort]') + if (sortButton) { + self.currentSort = sortButton.getAttribute('data-paragraph-sort') + self.paragraphPanel.querySelectorAll('[data-paragraph-sort]').forEach(function (button) { + button.classList.toggle('is-active', button === sortButton) + }) + self.load(1) + return + } + if (event.target.closest && event.target.closest('.long-article-paragraph-comments__reply')) { + Comment._toggleReply() + } + }) + }, + + loadSummary: function () { + var self = this + $.ajax({ + url: Label.servePath + '/comment/paragraph/summary', + type: 'POST', + cache: false, + data: JSON.stringify({articleId: Label.articleOId}), + success: function (result) { + if (result.code !== 0) { + return + } + self.counts = {} + ;(result.paragraphComments || []).forEach(function (item) { + self.counts[item.paragraphId] = parseInt(item.commentCount || 0) + self.updateParagraphButton(item.paragraphId) + }) + }, + }) + }, + + updateParagraphButton: function (paragraphId) { + var button = document.querySelector('[data-open-paragraph-comments="' + paragraphId + '"]') + if (!button) { + return + } + var count = parseInt(this.counts[paragraphId] || 0) + button.classList.toggle('has-comments', count > 0) + button.querySelector('span').textContent = count > 0 ? count : '' + }, + + open: function (paragraphId) { + var paragraph = document.querySelector('[data-long-paragraph-id="' + paragraphId + '"]') + if (!paragraph) { + this.showChapterComments(true) + this.openOrphanedCommentFromHash() + return + } + this.showChapterComments(false) + this.activeParagraphId = paragraphId + this.activeParagraphOrphaned = false + this.activeSnapshot = this.getSnapshot(paragraph) + document.querySelectorAll('.long-article-commentable-block.is-commenting').forEach(function (element) { + element.classList.remove('is-commenting') + }) + paragraph.classList.add('is-commenting') + this.paragraphPanel.querySelector('[data-paragraph-comment-snapshot]').textContent = this.activeSnapshot + this.controller.openComments() + this.updateURL(paragraphId) + this.load(1) + }, + + close: function () { + this.showChapterComments(true) + this.controller.closeComments() + }, + + showChapterComments: function (show, updateURL) { + if (show === undefined) { + show = true + } + this.activeParagraphId = show ? '' : this.activeParagraphId + this.activeParagraphOrphaned = show ? false : this.activeParagraphOrphaned + this.commentsPanel.classList.toggle('is-paragraph-view', !show) + this.paragraphPanel.classList.toggle('is-active', !show) + this.paragraphPanel.setAttribute('aria-hidden', show ? 'true' : 'false') + if (show) { + document.querySelectorAll('.long-article-commentable-block.is-commenting').forEach(function (element) { + element.classList.remove('is-commenting') + }) + if (updateURL !== false) { + this.updateURL('') + } + } + }, + + load: function (page) { + var self = this + this.currentPage = page || 1 + this.paragraphPanel.classList.add('is-loading') + $.ajax({ + url: Label.servePath + '/comment/paragraph/thread/parents', + type: 'POST', + cache: false, + data: JSON.stringify({ + articleId: Label.articleOId, + paragraphId: this.activeParagraphId, + paginationCurrentPageNum: this.currentPage, + userCommentViewMode: Label.userCommentViewMode, + sort: this.currentSort, + }), + success: function (result) { + if (result.code !== 0) { + self.renderError(result.msg || '加载失败') + return + } + if (result.paragraphSnapshot) { + self.activeSnapshot = result.paragraphSnapshot + self.paragraphPanel.querySelector('[data-paragraph-comment-snapshot]').textContent = self.activeSnapshot + } + self.render(result.commentThreadParents || [], result.pagination || {}) + }, + error: function () { + self.renderError('加载失败') + }, + complete: function () { + self.paragraphPanel.classList.remove('is-loading') + }, + }) + }, + + render: function (comments, pagination) { + var list = this.paragraphPanel.querySelector('[data-paragraph-comment-list]') + list.innerHTML = '' + for (var i = 0; i < comments.length; i++) { + list.insertAdjacentHTML('beforeend', this.renderRoot(comments[i])) + } + this.paragraphPanel.querySelector('[data-paragraph-comment-empty]').style.display = comments.length ? 'none' : 'block' + this.paragraphPanel.querySelector('[data-paragraph-comment-count]').textContent = ' ' + parseInt(this.counts[this.activeParagraphId] || 0) + ' 条' + this.renderPager(pagination) + Comment.initReactionWidgets($(this.paragraphPanel)) + Util.parseMarkdown() + Util.parseHljs() + Util.listenUserCard() + this.focusLocationComment() + }, + + renderRoot: function (data) { + var replies = data.commentThreadReplies || [] + var thread = replies.length ? '
      ' + Comment.renderThreadReplies(replies) + '
      ' : '' + return '
    • ' + + '
      ' + + '' + + '
      ' + + Comment.renderCommentAuthorName(data) + ' · ' + Comment.escapeHTML(data.timeAgo) + '
      ' + + '
      ' + data.commentContent + '
      ' + thread + + '
      ' + Comment.renderThreadAction(data) + '
      • ' + }, + + renderPager: function (pagination) { + var self = this + var pager = this.paragraphPanel.querySelector('[data-paragraph-comment-pager]') + var page = parseInt(pagination.paginationCurrentPageNum || 1) + var pages = parseInt(pagination.paginationPageCount || 1) + pager.innerHTML = '' + if (pages <= 1) { + return + } + if (page > 1) { + pager.appendChild(this.pagerButton('上一页', page - 1)) + } + var info = document.createElement('span') + info.textContent = page + '/' + pages + pager.appendChild(info) + if (page < pages) { + pager.appendChild(this.pagerButton('下一页', page + 1)) + } + }, + + pagerButton: function (label, page) { + var self = this + var button = document.createElement('button') + button.type = 'button' + button.textContent = label + button.addEventListener('click', function () { self.load(page) }) + return button + }, + + renderError: function (message) { + this.paragraphPanel.querySelector('[data-paragraph-comment-list]').innerHTML = '' + var empty = this.paragraphPanel.querySelector('[data-paragraph-comment-empty]') + empty.textContent = message + empty.style.display = 'block' + }, + + getSnapshot: function (paragraph) { + var clone = paragraph.cloneNode(true) + var button = this.getDirectCommentButton(clone) + if (button) { + button.parentNode.removeChild(button) + } + return String(clone.textContent || '').replace(/\s+/g, ' ').trim().substring(0, 160) + }, + + getDirectCommentButton: function (paragraph) { + for (var i = 0; i < paragraph.children.length; i++) { + if (paragraph.children[i].classList.contains('long-article-paragraph-comment-btn')) { + return paragraph.children[i] + } + } + return null + }, + + getActiveParagraphId: function () { + return this.activeParagraphId + }, + + getSubmissionParagraphId: function (originalCommentId) { + if (this.activeParagraphOrphaned && !originalCommentId) { + return '' + } + return this.activeParagraphId + }, + + activateFromComment: function (element) { + var root = element && element.closest ? element.closest('[data-comment-paragraph-id]') : null + if (root && root.getAttribute('data-comment-paragraph-id')) { + this.activeParagraphId = root.getAttribute('data-comment-paragraph-id') + this.activeParagraphOrphaned = root.getAttribute('data-comment-paragraph-status') === '1' + } + }, + + handleSubmitSuccess: function () { + if (!this.activeParagraphId) { + return + } + if (this.activeParagraphOrphaned) { + window.setTimeout(function () { window.location.reload() }, 250) + return + } + var self = this + window.setTimeout(function () { + self.loadSummary() + self.load(self.currentPage) + }, 250) + }, + + handleRemove: function (paragraphId) { + if (!paragraphId) { + return + } + this.counts[paragraphId] = Math.max(0, parseInt(this.counts[paragraphId] || 0) - 1) + this.updateParagraphButton(paragraphId) + if (this.activeParagraphId === paragraphId) { + this.paragraphPanel.querySelector('[data-paragraph-comment-count]').textContent = + ' ' + this.counts[paragraphId] + ' 条' + } + }, + + handleRealtime: function (data) { + var paragraphId = data.commentParagraphId || '' + if (!paragraphId) { + return + } + this.counts[paragraphId] = parseInt(this.counts[paragraphId] || 0) + 1 + this.updateParagraphButton(paragraphId) + if (this.activeParagraphId === paragraphId) { + var self = this + window.setTimeout(function () { self.load(self.currentPage) }, 100) + } + }, + + getQueryValue: function (key) { + var match = window.location.search.match(new RegExp('(?:^|[?&])' + key + '=([^&]*)')) + return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : '' + }, + + updateURL: function (paragraphId) { + var search = String(window.location.search || '').replace(/^\?/, '').split('&').filter(function (part) { + return part && part.split('=')[0] !== 'paragraph' + }) + if (paragraphId) { + search.push('paragraph=' + encodeURIComponent(paragraphId)) + } + window.history.replaceState({}, '', window.location.pathname + (search.length ? '?' + search.join('&') : '') + window.location.hash) + }, + + focusLocationComment: function () { + var self = this + window.setTimeout(function () { + var id = window.location.hash.replace(/^#/, '') + var target = id ? document.getElementById(id) : null + if (target && self.paragraphPanel.contains(target)) { + target.scrollIntoView({block: 'center'}) + Comment._bgFade($(target), {scroll: false}) + } + }, 0) + }, + + openOrphanedCommentFromHash: function () { + var id = window.location.hash.replace(/^#/, '') + var target = id ? document.getElementById(id) : null + if (!target) { + return + } + var details = target.closest ? target.closest('.long-article-orphaned-comments') : null + if (!details) { + return + } + details.open = true + this.controller.openComments() + window.setTimeout(function () { + target.scrollIntoView({block: 'center'}) + Comment._bgFade($(target), {scroll: false}) + }, 0) + }, +} diff --git a/src/main/resources/js/long-article.js b/src/main/resources/js/long-article.js index dbeacb6c..241941a1 100644 --- a/src/main/resources/js/long-article.js +++ b/src/main/resources/js/long-article.js @@ -153,7 +153,12 @@ window.LongArticle = { if (action === 'top') { self.scrollToTop(); } else if (action === 'comments') { - self.toggleComments(); + if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) { + window.LongArticleParagraphComments.showChapterComments(); + self.openComments(); + } else { + self.toggleComments(); + } } else if (action === 'font-decrease') { self.setFontSize(-2); } else if (action === 'font-increase') { @@ -336,6 +341,9 @@ window.LongArticle = { if (editorPanel && window.getComputedStyle(editorPanel).display !== 'none' && window.Comment && typeof window.Comment._hideReplyPanel === 'function') { window.Comment._hideReplyPanel(); } + if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) { + window.LongArticleParagraphComments.showChapterComments(true, false); + } document.body.classList.remove('long-article-comments-open'); if (panel) { panel.setAttribute('aria-hidden', 'true'); @@ -353,7 +361,7 @@ window.LongArticle = { if (panel && target && panel.contains(target)) { return true; } - return /(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search); + return /(?:\?|&)(?:p|m|sort|author|paragraph)=/.test(window.location.search); }, focusLocationComment: function () { diff --git a/src/main/resources/js/m-article.js b/src/main/resources/js/m-article.js index 9200a9e7..550e4610 100644 --- a/src/main/resources/js/m-article.js +++ b/src/main/resources/js/m-article.js @@ -154,6 +154,7 @@ var Comment = { + Comment.renderThreadReplyAction(data) + Comment.renderThreadHistoryAction(data) + Comment.renderThreadEditAction(data) + + Comment.renderThreadRemoveAction(data) + Comment.renderThreadThankAction(data) + Comment.renderThreadVoteAction(data, true) + Comment.renderThreadVoteAction(data, false) @@ -210,6 +211,15 @@ var Comment = { Comment.escapeJSString(data.oId) + '\')">' }, + renderThreadRemoveAction: function (data) { + if (!data.commentIsCurrentUser || !Label.canRemoveComment) { + return '' + } + return '' + }, renderThreadEditAction: function (data) { if (!data.commentIsCurrentUser || !Label.canUpdateComment) { return '' @@ -986,6 +996,8 @@ var Comment = { if (!confirm(Label.confirmRemoveLabel)) { return false } + var commentElement = document.getElementById(id) + var paragraphId = commentElement ? commentElement.getAttribute('data-comment-paragraph-id') : '' $.ajax({ url: Label.servePath + '/comment/' + id + '/remove', type: 'POST', @@ -993,6 +1005,9 @@ var Comment = { success: function (result, textStatus) { if (result.code === 0) { $('#' + id).remove() + if (paragraphId && window.LongArticleParagraphComments) { + window.LongArticleParagraphComments.handleRemove(paragraphId) + } } else { Util.alert(result.msg) } @@ -1574,12 +1589,21 @@ var Comment = { data('commentOriginalCommentId') } + var paragraphComments = window.LongArticleParagraphComments + var paragraphId = paragraphComments && paragraphComments.getSubmissionParagraphId + ? paragraphComments.getSubmissionParagraphId(requestJSONObject.commentOriginalCommentId) : '' + if (paragraphId) { + requestJSONObject.paragraphId = paragraphId + } + var url = Label.servePath + '/comment', type = 'POST', commentId = $replyUseName.data('commentId') if (commentId) { url = Label.servePath + '/comment/' + commentId type = 'PUT' + } else if (paragraphId) { + url = Label.servePath + '/comment/paragraph' } $.ajax({ @@ -1611,6 +1635,10 @@ var Comment = { // clear reply comment Comment._clearReplyUseName() + if (paragraphId && paragraphComments) { + paragraphComments.handleSubmitSuccess() + } + // clear local storage if (window.localStorage) { var emptyContent = { @@ -1648,6 +1676,9 @@ var Comment = { * @param {String} userName 用户名称 */ reply: function (userName, id) { + if (window.LongArticleParagraphComments) { + window.LongArticleParagraphComments.activateFromComment(document.getElementById(id)) + } var safeUserName = Comment.escapeHTML(userName), $replyUseName = Comment._getReplyUseName() diff --git a/src/main/resources/js/m-long-article.js b/src/main/resources/js/m-long-article.js index 43c64bb6..a68333d6 100644 --- a/src/main/resources/js/m-long-article.js +++ b/src/main/resources/js/m-long-article.js @@ -113,7 +113,12 @@ window.MLongArticle = { } else if (action === 'top') { window.scrollTo({top: 0, behavior: 'smooth'}); } else if (action === 'comments') { - self.toggleComments(); + if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) { + window.LongArticleParagraphComments.showChapterComments(); + self.openComments(); + } else { + self.toggleComments(); + } } else if (action === 'font-decrease') { self.setFontSize(-2); } else if (action === 'font-increase') { @@ -171,6 +176,9 @@ window.MLongArticle = { if (editorPanel && editorPanel.classList.contains('editor-panel--open') && window.Comment && typeof window.Comment._hideReplyPanel === 'function') { window.Comment._hideReplyPanel(); } + if (window.LongArticleParagraphComments && window.LongArticleParagraphComments.getActiveParagraphId()) { + window.LongArticleParagraphComments.showChapterComments(true, false); + } document.body.classList.remove('long-article-comments-open'); if (panel) { panel.setAttribute('aria-hidden', 'true'); @@ -188,7 +196,7 @@ window.MLongArticle = { if (panel && target && panel.contains(target)) { return true; } - return /(?:\?|&)(?:p|m|sort|author)=/.test(window.location.search); + return /(?:\?|&)(?:p|m|sort|author|paragraph)=/.test(window.location.search); }, focusLocationComment: function () { diff --git a/src/main/resources/repository.json b/src/main/resources/repository.json index 55b02cb2..a1c00a08 100644 --- a/src/main/resources/repository.json +++ b/src/main/resources/repository.json @@ -1251,6 +1251,39 @@ "name": "commentVisible", "type": "int", "description": "0：所有人可见，1：仅楼主和自己可见" + }, + { + "name": "commentType", + "type": "int", + "description": "0：章评，1：段评" + }, + { + "name": "commentParagraphId", + "type": "String", + "length": 64, + "description": "段评锚点 ID" + }, + { + "name": "commentParagraphKind", + "type": "String", + "length": 16, + "description": "段评锚点类型" + }, + { + "name": "commentParagraphIndex", + "type": "int", + "description": "段评锚点顺序" + }, + { + "name": "commentParagraphSnapshot", + "type": "String", + "length": 1024, + "description": "段评原文快照" + }, + { + "name": "commentParagraphStatus", + "type": "int", + "description": "0：关联有效，1：原段落已修改" } ] }, diff --git a/src/main/resources/scss/index.scss b/src/main/resources/scss/index.scss index 23a15ffd..08a678cd 100644 --- a/src/main/resources/scss/index.scss +++ b/src/main/resources/scss/index.scss @@ -1144,6 +1144,33 @@ label.cmt-anonymous { } } +.comment-paragraph-context { + display: -webkit-box; + margin: 0 0 8px; + overflow: hidden; + color: #718078; + font-size: 12px; + line-height: 1.55; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.long-article-orphaned-comments { + margin: 18px 0 0; + border-top: 1px solid rgba(65, 94, 71, 0.14); + padding-top: 12px; + + summary { + color: #68776e; + cursor: pointer; + font-size: 13px; + } + + > ul { + margin-top: 8px; + } +} + .nice .comments > ul > li:last-child { border-bottom-width: 0; } @@ -5184,6 +5211,205 @@ code .dec { } } +.long-article-commentable-block { + position: relative; +} + +.long-article-paragraph-comment-btn { + position: absolute; + top: 50%; + right: -36px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 0; + border: 0; + border-radius: 50%; + background: rgba(220, 235, 221, 0.94); + color: #6e8975; + cursor: pointer; + opacity: 0; + transform: translateY(-50%) translateX(-4px); + transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease; + + svg { + width: 15px; + height: 15px; + } + + span { + position: absolute; + top: -5px; + right: -5px; + min-width: 15px; + height: 15px; + padding: 0 3px; + border-radius: 8px; + background: #c94e4e; + color: #fff; + font-size: 9px; + line-height: 15px; + text-align: center; + } +} + +.long-article-commentable-block:hover > .long-article-paragraph-comment-btn, +.long-article-paragraph-comment-btn.has-comments, +.long-article-commentable-block.is-commenting > .long-article-paragraph-comment-btn { + opacity: 1; + transform: translateY(-50%) translateX(0); +} + +.long-article-paragraph-comment-btn:hover, +.long-article-commentable-block.is-commenting > .long-article-paragraph-comment-btn { + background: #3e7250; + color: #fff; +} + +.long-article-paragraph-comments { + position: absolute; + inset: 0; + z-index: 6; + display: none; + box-sizing: border-box; + min-width: 0; + padding: 20px; + overflow: auto; + background: #dcebdd; +} + +.long-article-paragraph-comments.is-active { + display: block; +} + +#articleCommentsPanel.is-paragraph-view { + > :not(#comments):not(.long-article-paragraph-comments) { + display: none; + } + + > #comments { + > :not(.long-article-paragraph-comments) { + visibility: hidden; + } + } +} + +.long-article-paragraph-comments__header { + position: sticky; + top: -20px; + z-index: 2; + margin: -20px -20px 14px; + padding: 20px 20px 14px; + border-bottom: 1px solid rgba(65, 94, 71, 0.14); + background: rgba(220, 235, 221, 0.97); + backdrop-filter: blur(8px); + + strong { + color: #1f2e24; + font-size: 20px; + } + + p { + margin: 10px 0; + color: #526259; + font-size: 13px; + line-height: 1.6; + } + + > button { + position: absolute; + top: 16px; + right: 18px; + border: 0; + background: transparent; + color: #77857c; + cursor: pointer; + font-size: 24px; + } +} + +.long-article-paragraph-comments__sort, +.long-article-paragraph-comments__pager { + display: flex; + justify-content: center; + gap: 8px; +} + +.long-article-paragraph-comments__sort button, +.long-article-paragraph-comments__reply { + min-height: 30px; + padding: 0 10px; + border: 1px solid rgba(65, 94, 71, 0.14); + border-radius: 5px; + background: #edf5ed; + color: #6e8975; + cursor: pointer; + font-size: 12px; +} + +.long-article-paragraph-comments .list > ul > li { + margin: 0; + padding: 16px 0; + border-bottom: 1px solid rgba(65, 94, 71, 0.12); + background: transparent; +} + +.long-article-paragraph-comments__sort button.is-active { + background: #3e7250; + color: #fff; +} + +.long-article-paragraph-comments__reply { + display: block; + margin-bottom: 12px; + padding: 10px 12px; +} + +.long-article-paragraph-comments__empty { + padding: 30px 0; + color: #77857c; + text-align: center; +} + +.long-article-paragraph-comments__pager { + margin-top: 16px; + color: #77857c; + font-size: 12px; + + button { + border: 0; + background: transparent; + color: #526c5a; + cursor: pointer; + } +} + +body.night .long-article-paragraph-comments { + background: #111; + + .long-article-paragraph-comments__header { + background: rgba(17, 17, 17, 0.97); + } + + .long-article-paragraph-comments__header strong { + color: #eef4ef; + } + + .long-article-paragraph-comments__header p, + .long-article-paragraph-comments__header > button { + color: #858f88; + } + + .long-article-paragraph-comments__sort button, + .long-article-paragraph-comments__reply { + border-color: rgba(255, 255, 255, 0.08); + background: #191919; + color: #989898; + } +} + .long-article-meta { display: flex; flex-wrap: wrap; diff --git a/src/main/resources/scss/mobile-base.scss b/src/main/resources/scss/mobile-base.scss index 9158d67b..4e9625bb 100644 --- a/src/main/resources/scss/mobile-base.scss +++ b/src/main/resources/scss/mobile-base.scss @@ -2449,6 +2449,33 @@ label.cmt-anonymous { border-bottom-width: 0; } +.comment-paragraph-context { + display: -webkit-box; + margin: 0 0 7px; + overflow: hidden; + color: #718078; + font-size: 12px; + line-height: 1.5; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.long-article-orphaned-comments { + margin: 14px 0 0; + border-top: 1px solid rgba(65, 94, 71, 0.14); + padding-top: 10px; + + summary { + color: #68776e; + cursor: pointer; + font-size: 12px; + } + + > ul { + margin-top: 8px; + } +} + .comment-login { box-sizing: border-box; margin: 10px; @@ -5471,6 +5498,167 @@ only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-de } } +.long-article-commentable-block { + position: relative; +} + +.long-article-paragraph-comment-btn { + position: absolute; + right: 0; + bottom: -8px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 0; + border: 0; + border-radius: 50%; + background: #dcebdd; + color: #6e8975; + opacity: 0.76; + + svg { + width: 15px; + height: 15px; + } + + span { + position: absolute; + top: -5px; + right: -5px; + min-width: 15px; + height: 15px; + padding: 0 3px; + border-radius: 8px; + background: #c94e4e; + color: #fff; + font-size: 9px; + line-height: 15px; + text-align: center; + } +} + +.long-article-commentable-block.is-commenting > .long-article-paragraph-comment-btn { + background: #3e7250; + color: #fff; + opacity: 1; +} + +.long-article-paragraph-comments { + position: absolute; + inset: 0; + z-index: 6; + display: none; + box-sizing: border-box; + padding: 14px; + overflow: auto; + background: #dcebdd; +} + +.long-article-paragraph-comments.is-active { + display: block; +} + +#comments.is-paragraph-view { + > :not(.long-article-paragraph-comments) { + visibility: hidden; + } +} + +.long-article-paragraph-comments__header { + position: sticky; + top: -14px; + z-index: 2; + margin: -14px -14px 12px; + padding: 16px 14px 12px; + border-bottom: 1px solid rgba(65, 94, 71, 0.14); + background: rgba(220, 235, 221, 0.97); +} + +.long-article-paragraph-comments__header strong { + color: #1f2e24; + font-size: 18px; +} + +.long-article-paragraph-comments__header p { + margin: 8px 0; + color: #526259; + font-size: 12px; + line-height: 1.6; +} + +.long-article-paragraph-comments__header > button { + position: absolute; + top: 12px; + right: 12px; + border: 0; + background: transparent; + color: #77857c; + font-size: 24px; +} + +.long-article-paragraph-comments__sort, +.long-article-paragraph-comments__pager { + display: flex; + justify-content: center; + gap: 6px; +} + +.long-article-paragraph-comments__sort button, +.long-article-paragraph-comments__reply { + min-height: 28px; + padding: 0 10px; + border: 1px solid rgba(65, 94, 71, 0.14); + border-radius: 5px; + background: #edf5ed; + color: #6e8975; + font-size: 12px; +} + +.long-article-paragraph-comments .list > ul > li { + margin: 0; + padding: 14px 0; + border-bottom: 1px solid rgba(65, 94, 71, 0.12); + background: transparent; +} + +.long-article-paragraph-comments__sort button.is-active { + background: #3e7250; + color: #fff; +} + +.long-article-paragraph-comments__reply { + display: block; + margin-bottom: 10px; + padding: 10px; + cursor: pointer; +} + +body.night .long-article-paragraph-comments { + background: #111; + + .long-article-paragraph-comments__header { + background: rgba(17, 17, 17, 0.97); + } + + .long-article-paragraph-comments__header strong { + color: #eef4ef; + } + + .long-article-paragraph-comments__header p, + .long-article-paragraph-comments__header > button { + color: #858f88; + } + + .long-article-paragraph-comments__sort button, + .long-article-paragraph-comments__reply { + border-color: rgba(255, 255, 255, 0.08); + background: #191919; + color: #989898; + } +} + .long-article-meta { display: flex; flex-wrap: wrap; diff --git a/src/main/resources/skins/classic/mobile/article.ftl b/src/main/resources/skins/classic/mobile/article.ftl index 1f8a8e5f..7c233ec1 100644 --- a/src/main/resources/skins/classic/mobile/article.ftl +++ b/src/main/resources/skins/classic/mobile/article.ftl @@ -395,7 +395,7 @@

      - <#if article.articleCommentCount != 0> + <#if (commentDisplayCount!article.articleCommentCount) != 0>
      + <#if 6 == article.articleType && (article.articleOrphanedParagraphComments![])?size gt 0> +
      + 原段落已修改 ${article.articleOrphanedParagraphComments?size} +
        + <#list article.articleOrphanedParagraphComments as comment> + <#include 'common/comment.ftl' /> + +
      +
      +
      <@pagination url=article.articlePermalink query="${commentPaginationQuery}" />
      @@ -522,7 +532,7 @@ - ${article.articleCommentCount} + ${commentDisplayCount!article.articleCommentCount}