文章详细页实现全局DOM加载
This commit is contained in:
@@ -32,13 +32,6 @@
|
||||
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;
|
||||
}
|
||||
@@ -191,10 +184,6 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.virtual-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.commentlist .no-more {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
@@ -243,30 +232,7 @@
|
||||
* ============================================================ */
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.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 {
|
||||
.drop-fixed-sm .dropdown-menu {
|
||||
position: fixed;
|
||||
transform: translateY(220%);
|
||||
transition: 0.6s;
|
||||
@@ -281,22 +247,12 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drop-fixed-sm.open .dropdown-menu,
|
||||
.mobile-fixed.show {
|
||||
.drop-fixed-sm.open .dropdown-menu {
|
||||
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;
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -31,13 +31,6 @@
|
||||
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;
|
||||
}
|
||||
@@ -190,10 +183,6 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.virtual-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.commentlist .no-more {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
|
||||
@@ -7,30 +7,7 @@
|
||||
* ============================================================ */
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.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 {
|
||||
.drop-fixed-sm .dropdown-menu {
|
||||
position: fixed;
|
||||
transform: translateY(220%);
|
||||
transition: 0.6s;
|
||||
@@ -45,22 +22,12 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.drop-fixed-sm.open .dropdown-menu,
|
||||
.mobile-fixed.show {
|
||||
.drop-fixed-sm.open .dropdown-menu {
|
||||
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;
|
||||
|
||||
@@ -2415,8 +2415,6 @@ 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) {
|
||||
@@ -2448,14 +2446,6 @@ 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();
|
||||
@@ -2966,59 +2956,11 @@ tbquire.config({
|
||||
|
||||
/* source: assets/js/core/comment-fixed-input.js */
|
||||
/**
|
||||
* Mobile FixedInput + autoheight for comment respond (legacy parity).
|
||||
* Autoheight for comment textarea (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;
|
||||
@@ -3040,20 +2982,10 @@ tbquire.config({
|
||||
|
||||
document.addEventListener('DOMContentLoaded', scan);
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') {
|
||||
window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root) {
|
||||
window.AksrtFrontend.register('aksrt-comment-fixed-input', function () {
|
||||
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;
|
||||
})();
|
||||
;
|
||||
|
||||
@@ -3168,8 +3100,6 @@ 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;
|
||||
};
|
||||
}
|
||||
@@ -3214,12 +3144,6 @@ tbquire.config({
|
||||
}
|
||||
}
|
||||
|
||||
if (window.AksrtFixedInput) {
|
||||
window.AksrtFixedInput(respond, 'show');
|
||||
} else {
|
||||
respond.classList.add('show');
|
||||
}
|
||||
|
||||
if (comm && comm.scrollIntoView) {
|
||||
comm.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
@@ -1,57 +1,9 @@
|
||||
/**
|
||||
* Mobile FixedInput + autoheight for comment respond (legacy parity).
|
||||
* Autoheight for comment textarea (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;
|
||||
@@ -73,18 +25,8 @@
|
||||
|
||||
document.addEventListener('DOMContentLoaded', scan);
|
||||
if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') {
|
||||
window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root) {
|
||||
window.AksrtFrontend.register('aksrt-comment-fixed-input', function () {
|
||||
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;
|
||||
})();
|
||||
|
||||
@@ -108,8 +108,6 @@
|
||||
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;
|
||||
};
|
||||
}
|
||||
@@ -154,12 +152,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
if (window.AksrtFixedInput) {
|
||||
window.AksrtFixedInput(respond, 'show');
|
||||
} else {
|
||||
respond.classList.add('show');
|
||||
}
|
||||
|
||||
if (comm && comm.scrollIntoView) {
|
||||
comm.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
|
||||
@@ -232,8 +232,6 @@
|
||||
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) {
|
||||
@@ -265,14 +263,6 @@
|
||||
// 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();
|
||||
|
||||
@@ -464,12 +464,8 @@ 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
|
||||
}
|
||||
?>
|
||||
<div id="respond" class="mobile-fixed">
|
||||
<div class="fixed-body"></div>
|
||||
<div id="respond">
|
||||
<form id="commentform" method="post" action="<?php echo esc_url(site_url('/wp-comments-post.php')); ?>">
|
||||
<div class="flex ac">
|
||||
<div class="comt-title text-center flex0 mr10">
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<?php
|
||||
/**
|
||||
* Comment form partials — virtual-input + expand toolbar (legacy DOM contract).
|
||||
* Comment form partials — expand toolbar (legacy DOM contract).
|
||||
*
|
||||
* Mirrors legacy() and legacy()
|
||||
* Mirrors legacy()
|
||||
* from legacy/inc/functions.
|
||||
*
|
||||
* @package AKSRT
|
||||
@@ -10,31 +10,6 @@
|
||||
|
||||
defined('ABSPATH') || exit;
|
||||
|
||||
if (!function_exists('aksrt_get_comment_virtual_input_html')) :
|
||||
/**
|
||||
* Mobile virtual input bar (legacy: legacy).
|
||||
*
|
||||
* @param string $placeholder Placeholder text.
|
||||
* @param string $target CSS selector for the FixedInput target.
|
||||
* @return string
|
||||
*/
|
||||
function aksrt_get_comment_virtual_input_html(string $placeholder = '', string $target = '#respond'): string {
|
||||
$user_id = get_current_user_id();
|
||||
$avatar = get_avatar($user_id, 36, '', '', ['class' => 'avatar']);
|
||||
if ($placeholder === '') {
|
||||
$placeholder = __('说点什么吧...', 'aksrt');
|
||||
}
|
||||
$html = '<div class="flex ac jsb virtual-input" fixed-input="' . esc_attr($target) . '">';
|
||||
$html .= '<div class="flex flex1 ac">';
|
||||
$html .= $avatar;
|
||||
$html .= '<div class="text-ellipsis simulation mr10">' . esc_html($placeholder) . '</div>';
|
||||
$html .= '</div>';
|
||||
$html .= '<span class="but c-blue">' . esc_html__('提交', 'aksrt') . '</span>';
|
||||
$html .= '</div>';
|
||||
return $html;
|
||||
}
|
||||
endif;
|
||||
|
||||
if (!function_exists('aksrt_get_input_expand_but')) :
|
||||
/**
|
||||
* legacy-style expand toolbar button + dropdown (legacy: legacy).
|
||||
|
||||
@@ -241,7 +241,7 @@ trait ScriptsPart1b {
|
||||
|
||||
// 评论区样式(硬切换后全部自有):任何会渲染评论区的 singular
|
||||
// (普通文章 / 资源型 post / 启用评论的页面)统一加载 build 聚合。
|
||||
// 缺失时手机端 .mobile-fixed 抽屉规则不生效,表单会按文档流直接显示。
|
||||
// 缺失时评论表单/列表会失去自有布局规则,按文档流裸显示。
|
||||
if (is_singular() && !empty($singular_assets['needs_comments'])) {
|
||||
$comments_filename = file_exists(get_template_directory() . '/assets/css/build/comments.min.css')
|
||||
? 'comments.min.css'
|
||||
|
||||
Reference in New Issue
Block a user