diff --git a/assets/css/build/comments.css b/assets/css/build/comments.css index 7c57ba0b..ad7bf746 100644 --- a/assets/css/build/comments.css +++ b/assets/css/build/comments.css @@ -32,6 +32,13 @@ display: none; } +#respond:not(.mobile-fixed) #postcomments .comt-box { + padding: 5px 5px 4px 5px; + background: var(--main-bg-color); + border-radius: 4px; + margin-top: 12px; +} + #comments #postcomments .comt-ctrl .but { margin-bottom: 2px; } @@ -184,6 +191,13 @@ height: auto; } +/* 假输入条仅移动端显示。必须带 #comments 前缀(id 特异性): + 标记上自带的 .flex{display:flex} 等单类工具规则无论加载顺序 + 如何都压不过它,宽屏不会再重复出现假输入条。 */ +#comments .virtual-input { + display: none; +} + .commentlist .no-more { margin: 0; padding-bottom: 10px; @@ -232,7 +246,31 @@ * ============================================================ */ @media (max-width: 767px) { - .drop-fixed-sm .dropdown-menu { + /* 与 layout.css 的桌面隐藏同特异性,靠 bundle 内靠后顺序在移动端反转。 */ + #comments .virtual-input { + display: flex; + height: 36px; + border-radius: 120px; + background: var(--main-shadow); + color: var(--muted-2-color); + } + + .virtual-input .but, + .virtual-input img { + width: 28px; + height: 28px; + border-radius: 120px; + margin: 0 4px; + flex-shrink: 0; + } + + .virtual-input .but { + width: auto; + padding: 3px 10px; + } + + .drop-fixed-sm .dropdown-menu, + .mobile-fixed { position: fixed; transform: translateY(220%); transition: 0.6s; @@ -247,12 +285,22 @@ margin: 0; } - .drop-fixed-sm.open .dropdown-menu { + .drop-fixed-sm.open .dropdown-menu, + .mobile-fixed.show { box-shadow: 0 -50px 50px rgba(0, 0, 0, 0.2); transition: 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99); transform: unset; } + .mobile-fixed.show .fixed-body { + visibility: unset; + z-index: -1; + } + + #respond.mobile-fixed { + z-index: 1040; + } + .drop-fixed-sm .dropdown-menu { z-index: 1045; padding: 10px; diff --git a/assets/css/build/comments.min.css b/assets/css/build/comments.min.css index 8792e4b9..c154dbe0 100644 --- a/assets/css/build/comments.min.css +++ b/assets/css/build/comments.min.css @@ -1 +1 @@ -#comments .comment-box .comments-closed,#comments .action-text,#comments #cancel-comment-reply-link{display:none}#comments #postcomments .action-text,#comments #postcomments #cancel-comment-reply-link{display:inline-block}#comments .comt-title{width:90px}#comments .comt-title .comt-avatar .avatar{width:60px;height:60px}#comments #postcomments .comt-title{display:none}#comments #postcomments .comt-ctrl .but{margin-bottom:2px}#comments .list-inline{padding:15px}#comment{margin-bottom:5px}.comment-signarea{background:var(--main-shadow)}#respond+#postcomments .comment-filter,.comment-signarea+#postcomments .comment-filter{margin-top:20px}#postcomments .tab-nav-theme{margin-top:0}#postcomments .tab-nav-theme li{padding-bottom:1px}#postcomments .tab-nav-theme li:before{bottom:-2px}#postcomments .comment-footer{position:relative}#postcomments .avatar-img{--this-size: 45px;margin-right:20px}#postcomments .children .avatar-img{--this-size: 26px;vertical-align:2px;margin-right:6px}#postcomments .commentlist>.comment>.list-inline .author-box{align-items:start;margin-bottom:0;padding:0;background:none;border-radius:0;box-shadow:none}#postcomments .commentlist>.comment>.list-inline .comment-footer{margin-left:65px;margin-top:-25px}#postcomments .comment .list-inline>.comt-main{width:100%}#postcomments .commentlist .comment+.comment{border-top:1px solid var(--main-border-color)}#postcomments .comment .list-inline>li{padding:10px;vertical-align:top}#postcomments .comment-header{font-size:15px;position:relative}.comment-header .badge-status{margin-top:0;width:68px;z-index:0}#postcomments .action count{margin-left:4px}#postcomments .comt-meta>span:not(:empty){margin-right:10px;vertical-align:middle}#postcomments .comt-meta>span a{color:inherit}#postcomments .comt-meta>span .but{padding:.2em .8em}#postcomments .comment-approve-link.unapprove{color:#e87725}#postcomments .comment-approve-link.approve{color:#3695ff}#postcomments .comt-meta>span .comment-trash-link{color:#ff4b4b}#postcomments .children{margin-left:86px;background:var(--main-shadow);border-radius:var(--main-radius);margin-bottom:6px}#postcomments .children .children{margin-left:23px}#postcomments .children .avatar-icontag{font-size:8px;height:14px;width:14px}.comment-content{word-wrap:break-word;white-space:pre-wrap}.comment-content .enlighter-default{margin-bottom:0;opacity:.9}#postcomments .comment-content img{max-width:260px;max-height:350px;display:block;width:auto;height:auto}.commentlist .no-more{margin:0;padding-bottom:10px}#comments .comment-header .aksrt-identity-chip{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}#comments .comment-header .aksrt-identity-medal{display:inline-block;width:auto;height:1.1em;max-width:6em;object-fit:contain;vertical-align:-.15em}@media(max-width:767px){.drop-fixed-sm .dropdown-menu{position:fixed;transform:translateY(220%);transition:.6s;opacity:1;left:0;right:0;bottom:0;padding:22px 16px;background:var(--main-bg-color);z-index:1080;border-radius:10px 10px 0 0;margin:0}.drop-fixed-sm.open .dropdown-menu{box-shadow:0 -50px 50px #0003;transition:.6s cubic-bezier(.28,.9,.34,.99);transform:unset}.drop-fixed-sm .dropdown-menu{z-index:1045;padding:10px;top:auto!important;right:0!important;left:0!important;max-height:50vh;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.drop-fixed-sm .dropdown-menu>li>a{font-size:16px!important;padding:10px 20px}.modal-open .drop-fixed-sm.open .dropdown-menu{opacity:0}.drop-fixed-sm .dropdown-menu:before{display:none}}@media(max-width:640px){#comments .comt-title{display:none}#comments .comt-box{width:100%;padding:0}#comments .list-inline{padding:15px 0;margin:0}.comment-signarea h3{font-size:13px}.comt-tips-left .but svg,.comt-tips-left .but .fa{margin:0}.btn-input-expand{width:31px;padding:0;height:31px;line-height:31px}#postcomments .comment-header{font-size:14px}#postcomments .comt-meta{font-size:12px}#postcomments .comment .list-inline>li{padding:0}#postcomments .comment .list-inline>li+li{padding-left:10px}#postcomments .avatar-img{--this-size: 36px;margin-right:10px}#postcomments .commentlist>.comment>.list-inline .comment-footer{margin-left:45px;margin-top:-15px}#postcomments .children{margin-left:0}#postcomments .children .children{margin-left:13px}#postcomments .children .list-inline{padding:15px}#postcomments .post_ajax_loader .ml20{margin-left:5px}} +#comments .comment-box .comments-closed,#comments .action-text,#comments #cancel-comment-reply-link{display:none}#comments #postcomments .action-text,#comments #postcomments #cancel-comment-reply-link{display:inline-block}#comments .comt-title{width:90px}#comments .comt-title .comt-avatar .avatar{width:60px;height:60px}#comments #postcomments .comt-title{display:none}#respond:not(.mobile-fixed) #postcomments .comt-box{padding:5px 5px 4px;background:var(--main-bg-color);border-radius:4px;margin-top:12px}#comments #postcomments .comt-ctrl .but{margin-bottom:2px}#comments .list-inline{padding:15px}#comment{margin-bottom:5px}.comment-signarea{background:var(--main-shadow)}#respond+#postcomments .comment-filter,.comment-signarea+#postcomments .comment-filter{margin-top:20px}#postcomments .tab-nav-theme{margin-top:0}#postcomments .tab-nav-theme li{padding-bottom:1px}#postcomments .tab-nav-theme li:before{bottom:-2px}#postcomments .comment-footer{position:relative}#postcomments .avatar-img{--this-size: 45px;margin-right:20px}#postcomments .children .avatar-img{--this-size: 26px;vertical-align:2px;margin-right:6px}#postcomments .commentlist>.comment>.list-inline .author-box{align-items:start;margin-bottom:0;padding:0;background:none;border-radius:0;box-shadow:none}#postcomments .commentlist>.comment>.list-inline .comment-footer{margin-left:65px;margin-top:-25px}#postcomments .comment .list-inline>.comt-main{width:100%}#postcomments .commentlist .comment+.comment{border-top:1px solid var(--main-border-color)}#postcomments .comment .list-inline>li{padding:10px;vertical-align:top}#postcomments .comment-header{font-size:15px;position:relative}.comment-header .badge-status{margin-top:0;width:68px;z-index:0}#postcomments .action count{margin-left:4px}#postcomments .comt-meta>span:not(:empty){margin-right:10px;vertical-align:middle}#postcomments .comt-meta>span a{color:inherit}#postcomments .comt-meta>span .but{padding:.2em .8em}#postcomments .comment-approve-link.unapprove{color:#e87725}#postcomments .comment-approve-link.approve{color:#3695ff}#postcomments .comt-meta>span .comment-trash-link{color:#ff4b4b}#postcomments .children{margin-left:86px;background:var(--main-shadow);border-radius:var(--main-radius);margin-bottom:6px}#postcomments .children .children{margin-left:23px}#postcomments .children .avatar-icontag{font-size:8px;height:14px;width:14px}.comment-content{word-wrap:break-word;white-space:pre-wrap}.comment-content .enlighter-default{margin-bottom:0;opacity:.9}#postcomments .comment-content img{max-width:260px;max-height:350px;display:block;width:auto;height:auto}#comments .virtual-input{display:none}.commentlist .no-more{margin:0;padding-bottom:10px}#comments .comment-header .aksrt-identity-chip{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}#comments .comment-header .aksrt-identity-medal{display:inline-block;width:auto;height:1.1em;max-width:6em;object-fit:contain;vertical-align:-.15em}@media(max-width:767px){#comments .virtual-input{display:flex;height:36px;border-radius:120px;background:var(--main-shadow);color:var(--muted-2-color)}.virtual-input .but,.virtual-input img{width:28px;height:28px;border-radius:120px;margin:0 4px;flex-shrink:0}.virtual-input .but{width:auto;padding:3px 10px}.drop-fixed-sm .dropdown-menu,.mobile-fixed{position:fixed;transform:translateY(220%);transition:.6s;opacity:1;left:0;right:0;bottom:0;padding:22px 16px;background:var(--main-bg-color);z-index:1080;border-radius:10px 10px 0 0;margin:0}.drop-fixed-sm.open .dropdown-menu,.mobile-fixed.show{box-shadow:0 -50px 50px #0003;transition:.6s cubic-bezier(.28,.9,.34,.99);transform:unset}.mobile-fixed.show .fixed-body{visibility:unset;z-index:-1}#respond.mobile-fixed{z-index:1040}.drop-fixed-sm .dropdown-menu{z-index:1045;padding:10px;top:auto!important;right:0!important;left:0!important;max-height:50vh;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.drop-fixed-sm .dropdown-menu>li>a{font-size:16px!important;padding:10px 20px}.modal-open .drop-fixed-sm.open .dropdown-menu{opacity:0}.drop-fixed-sm .dropdown-menu:before{display:none}}@media(max-width:640px){#comments .comt-title{display:none}#comments .comt-box{width:100%;padding:0}#comments .list-inline{padding:15px 0;margin:0}.comment-signarea h3{font-size:13px}.comt-tips-left .but svg,.comt-tips-left .but .fa{margin:0}.btn-input-expand{width:31px;padding:0;height:31px;line-height:31px}#postcomments .comment-header{font-size:14px}#postcomments .comt-meta{font-size:12px}#postcomments .comment .list-inline>li{padding:0}#postcomments .comment .list-inline>li+li{padding-left:10px}#postcomments .avatar-img{--this-size: 36px;margin-right:10px}#postcomments .commentlist>.comment>.list-inline .comment-footer{margin-left:45px;margin-top:-15px}#postcomments .children{margin-left:0}#postcomments .children .children{margin-left:13px}#postcomments .children .list-inline{padding:15px}#postcomments .post_ajax_loader .ml20{margin-left:5px}} diff --git a/assets/css/frontend/comments/layout.css b/assets/css/frontend/comments/layout.css index 5ebe9414..838995b0 100644 --- a/assets/css/frontend/comments/layout.css +++ b/assets/css/frontend/comments/layout.css @@ -31,6 +31,13 @@ display: none; } +#respond:not(.mobile-fixed) #postcomments .comt-box { + padding: 5px 5px 4px 5px; + background: var(--main-bg-color); + border-radius: 4px; + margin-top: 12px; +} + #comments #postcomments .comt-ctrl .but { margin-bottom: 2px; } @@ -183,6 +190,13 @@ height: auto; } +/* 假输入条仅移动端显示。必须带 #comments 前缀(id 特异性): + 标记上自带的 .flex{display:flex} 等单类工具规则无论加载顺序 + 如何都压不过它,宽屏不会再重复出现假输入条。 */ +#comments .virtual-input { + display: none; +} + .commentlist .no-more { margin: 0; padding-bottom: 10px; diff --git a/assets/css/frontend/comments/mobile-item.css b/assets/css/frontend/comments/mobile-item.css index ddbb3b75..9c754fa4 100644 --- a/assets/css/frontend/comments/mobile-item.css +++ b/assets/css/frontend/comments/mobile-item.css @@ -7,7 +7,31 @@ * ============================================================ */ @media (max-width: 767px) { - .drop-fixed-sm .dropdown-menu { + /* 与 layout.css 的桌面隐藏同特异性,靠 bundle 内靠后顺序在移动端反转。 */ + #comments .virtual-input { + display: flex; + height: 36px; + border-radius: 120px; + background: var(--main-shadow); + color: var(--muted-2-color); + } + + .virtual-input .but, + .virtual-input img { + width: 28px; + height: 28px; + border-radius: 120px; + margin: 0 4px; + flex-shrink: 0; + } + + .virtual-input .but { + width: auto; + padding: 3px 10px; + } + + .drop-fixed-sm .dropdown-menu, + .mobile-fixed { position: fixed; transform: translateY(220%); transition: 0.6s; @@ -22,12 +46,22 @@ margin: 0; } - .drop-fixed-sm.open .dropdown-menu { + .drop-fixed-sm.open .dropdown-menu, + .mobile-fixed.show { box-shadow: 0 -50px 50px rgba(0, 0, 0, 0.2); transition: 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99); transform: unset; } + .mobile-fixed.show .fixed-body { + visibility: unset; + z-index: -1; + } + + #respond.mobile-fixed { + z-index: 1040; + } + .drop-fixed-sm .dropdown-menu { z-index: 1045; padding: 10px; diff --git a/assets/js/build/public.js b/assets/js/build/public.js index e7717b4a..02b1a939 100644 --- a/assets/js/build/public.js +++ b/assets/js/build/public.js @@ -2415,6 +2415,8 @@ tbquire.config({ restoreRespondPosition(); setLoading(false); notyf(json.message || '评论已更新', 'success'); + var respondEl = document.getElementById('respond'); + if (respondEl && window.AksrtFixedInput) window.AksrtFixedInput(respondEl, 'hide'); return; } if (json && json.success && json.html) { @@ -2446,6 +2448,14 @@ tbquire.config({ // Move respond back to original position restoreRespondPosition(); + // Hide mobile FixedInput after successful submit. + var respondEl = document.getElementById('respond'); + if (respondEl && window.AksrtFixedInput) { + window.AksrtFixedInput(respondEl, 'hide'); + } else if (respondEl) { + respondEl.classList.remove('show'); + } + // If editing via moveForm, clear edit field. var editField = form.querySelector('[name="edit_comment_ID"]'); if (editField) editField.remove(); @@ -2956,11 +2966,59 @@ tbquire.config({ /* source: assets/js/core/comment-fixed-input.js */ /** - * Autoheight for comment textarea (legacy parity). + * Mobile FixedInput + autoheight for comment respond (legacy parity). */ (function () { 'use strict'; + function $(sel, root) { + return (root || document).querySelector(sel); + } + + function FixedInput(el, action) { + if (!el) return; + if (!el.dataset.fixedBound) { + el.addEventListener('click', function (e) { + if (e.target && e.target.closest && e.target.closest('.fixed-body')) { + FixedInput(el, 'hide'); + } + }); + el.dataset.fixedBound = '1'; + } + if (action === 'show') { + el.classList.add('show'); + window.setTimeout(function () { + var field = el.querySelector('textarea, input'); + if (field) field.focus(); + }, 100); + return; + } + if (action === 'hide') { + var cancel = el.querySelector('#cancel-comment-reply-link'); + if (cancel) cancel.click(); + el.querySelectorAll('input,textarea').forEach(function (n) { + try { n.blur(); } catch (e) {} + }); + el.querySelectorAll('.dropup.open, .open').forEach(function (n) { + n.classList.remove('open'); + }); + el.classList.remove('show'); + } + } + + document.addEventListener('click', function (e) { + var trigger = e.target && e.target.closest ? e.target.closest('[fixed-input]') : null; + if (!trigger) return; + e.preventDefault(); + var targetSel = trigger.getAttribute('fixed-input') || '#respond'; + var panel = document.querySelector(targetSel); + var comments = document.getElementById('comments'); + if (comments && comments.scrollIntoView) { + comments.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + FixedInput(panel, 'show'); + }); + // Autoheight textareas. function bindAutoheight(ta) { if (!ta || ta.dataset.autoheightBound) return; @@ -2982,10 +3040,20 @@ tbquire.config({ document.addEventListener('DOMContentLoaded', scan); if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') { - window.AksrtFrontend.register('aksrt-comment-fixed-input', function () { + window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root) { scan(); + // Expose for submit hide. + root = root || document; + var respond = root.querySelector ? root.querySelector('#respond') : document.getElementById('respond'); + if (respond) { + respond.aksrtFixedInput = function (action) { + FixedInput(respond, action); + }; + } }); } + + window.AksrtFixedInput = FixedInput; })(); ; @@ -3100,6 +3168,8 @@ tbquire.config({ if (textarea) textarea.value = ''; editingId = 0; cancel.style.display = 'none'; + if (window.AksrtFixedInput) window.AksrtFixedInput(r, 'hide'); + else if (r) r.classList.remove('show'); return false; }; } @@ -3144,6 +3214,12 @@ tbquire.config({ } } + if (window.AksrtFixedInput) { + window.AksrtFixedInput(respond, 'show'); + } else { + respond.classList.add('show'); + } + if (comm && comm.scrollIntoView) { comm.scrollIntoView({ behavior: 'smooth', block: 'center' }); } diff --git a/assets/js/core/comment-fixed-input.js b/assets/js/core/comment-fixed-input.js index cc75609b..4d0305d4 100644 --- a/assets/js/core/comment-fixed-input.js +++ b/assets/js/core/comment-fixed-input.js @@ -1,9 +1,57 @@ /** - * Autoheight for comment textarea (legacy parity). + * Mobile FixedInput + autoheight for comment respond (legacy parity). */ (function () { 'use strict'; + function $(sel, root) { + return (root || document).querySelector(sel); + } + + function FixedInput(el, action) { + if (!el) return; + if (!el.dataset.fixedBound) { + el.addEventListener('click', function (e) { + if (e.target && e.target.closest && e.target.closest('.fixed-body')) { + FixedInput(el, 'hide'); + } + }); + el.dataset.fixedBound = '1'; + } + if (action === 'show') { + el.classList.add('show'); + window.setTimeout(function () { + var field = el.querySelector('textarea, input'); + if (field) field.focus(); + }, 100); + return; + } + if (action === 'hide') { + var cancel = el.querySelector('#cancel-comment-reply-link'); + if (cancel) cancel.click(); + el.querySelectorAll('input,textarea').forEach(function (n) { + try { n.blur(); } catch (e) {} + }); + el.querySelectorAll('.dropup.open, .open').forEach(function (n) { + n.classList.remove('open'); + }); + el.classList.remove('show'); + } + } + + document.addEventListener('click', function (e) { + var trigger = e.target && e.target.closest ? e.target.closest('[fixed-input]') : null; + if (!trigger) return; + e.preventDefault(); + var targetSel = trigger.getAttribute('fixed-input') || '#respond'; + var panel = document.querySelector(targetSel); + var comments = document.getElementById('comments'); + if (comments && comments.scrollIntoView) { + comments.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + FixedInput(panel, 'show'); + }); + // Autoheight textareas. function bindAutoheight(ta) { if (!ta || ta.dataset.autoheightBound) return; @@ -25,8 +73,18 @@ document.addEventListener('DOMContentLoaded', scan); if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') { - window.AksrtFrontend.register('aksrt-comment-fixed-input', function () { + window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root) { scan(); + // Expose for submit hide. + root = root || document; + var respond = root.querySelector ? root.querySelector('#respond') : document.getElementById('respond'); + if (respond) { + respond.aksrtFixedInput = function (action) { + FixedInput(respond, action); + }; + } }); } + + window.AksrtFixedInput = FixedInput; })(); diff --git a/assets/js/core/comment-move-form.js b/assets/js/core/comment-move-form.js index f945ceee..3f3204f2 100644 --- a/assets/js/core/comment-move-form.js +++ b/assets/js/core/comment-move-form.js @@ -108,6 +108,8 @@ if (textarea) textarea.value = ''; editingId = 0; cancel.style.display = 'none'; + if (window.AksrtFixedInput) window.AksrtFixedInput(r, 'hide'); + else if (r) r.classList.remove('show'); return false; }; } @@ -152,6 +154,12 @@ } } + if (window.AksrtFixedInput) { + window.AksrtFixedInput(respond, 'show'); + } else { + respond.classList.add('show'); + } + if (comm && comm.scrollIntoView) { comm.scrollIntoView({ behavior: 'smooth', block: 'center' }); } diff --git a/assets/js/core/comments.js b/assets/js/core/comments.js index 15933494..5e09132e 100644 --- a/assets/js/core/comments.js +++ b/assets/js/core/comments.js @@ -232,6 +232,8 @@ restoreRespondPosition(); setLoading(false); notyf(json.message || '评论已更新', 'success'); + var respondEl = document.getElementById('respond'); + if (respondEl && window.AksrtFixedInput) window.AksrtFixedInput(respondEl, 'hide'); return; } if (json && json.success && json.html) { @@ -263,6 +265,14 @@ // Move respond back to original position restoreRespondPosition(); + // Hide mobile FixedInput after successful submit. + var respondEl = document.getElementById('respond'); + if (respondEl && window.AksrtFixedInput) { + window.AksrtFixedInput(respondEl, 'hide'); + } else if (respondEl) { + respondEl.classList.remove('show'); + } + // If editing via moveForm, clear edit field. var editField = form.querySelector('[name="edit_comment_ID"]'); if (editField) editField.remove(); diff --git a/inc/helpers/aksrt-comments.php b/inc/helpers/aksrt-comments.php index d791a264..1176d10d 100644 --- a/inc/helpers/aksrt-comments.php +++ b/inc/helpers/aksrt-comments.php @@ -464,8 +464,12 @@ if (!function_exists('aksrt_comments_render_form')) : return; } + if (function_exists('aksrt_get_comment_virtual_input_html')) { + echo aksrt_get_comment_virtual_input_html($placeholder, '#respond'); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + } ?> -