fix(frontend): align page-set hint bar and FA5 icons with the reference
- 齿轮提示横条改为参考主题的 .abs-right 垂直居中几何（top:50% + right:.7em + translateY(-50%)），本站 legacy .abs-right 是 top:0/right:0 导致横条贴到按钮顶角 - 新增 front-page-admin-set.js：横条 2 秒后淡出 1 秒消失（对齐参考 主题 js/page-edit.js），开关关闭时不出队脚本 - 齿轮与弹窗内图标统一为 FA5 惯例 fa fas fa-*，并采用 FA5 的 glyph 重命名（sliders→sliders-h、pie-chart→chart-pie）
This commit is contained in:
@@ -4908,6 +4908,22 @@ html.dark .footer-tabbar {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* 前台页面编辑齿轮的提示横条：参考主题共用 .abs-right（top:50% + right:.7em +
|
||||
* translateY(-50%) 的垂直居中定位）。本站 legacy-utilities 的 .abs-right 是
|
||||
* top:0/right:0，横条会贴到按钮顶角，故在此恢复参考几何。 */
|
||||
.float-right .admin-set-page .admin-set-info {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.7em;
|
||||
transform: translateY(-50%);
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body:has(.modal.in) .float-right,
|
||||
.modal-open .float-right,
|
||||
.imgbox-show .float-right,
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -14,6 +14,22 @@
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/* 前台页面编辑齿轮的提示横条：参考主题共用 .abs-right（top:50% + right:.7em +
|
||||
* translateY(-50%) 的垂直居中定位）。本站 legacy-utilities 的 .abs-right 是
|
||||
* top:0/right:0，横条会贴到按钮顶角，故在此恢复参考几何。 */
|
||||
.float-right .admin-set-page .admin-set-info {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.7em;
|
||||
transform: translateY(-50%);
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body:has(.modal.in) .float-right,
|
||||
.modal-open .float-right,
|
||||
.imgbox-show .float-right,
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* AKSRT Frontend Page Admin Set — 前台编辑齿轮的提示横条
|
||||
*
|
||||
* 齿轮按钮左侧的「在此编辑此页面参数」横条只是首次进入的引导提示，
|
||||
* 2 秒后淡出 1 秒消失，避免常驻遮挡悬浮按钮栏（对齐参考主题 js/page-edit.js）。
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
function fadeHint() {
|
||||
var hint = document.querySelector('.admin-set-page .admin-set-info');
|
||||
if (!hint) return;
|
||||
|
||||
setTimeout(function () {
|
||||
hint.style.transition = 'opacity 1s';
|
||||
hint.style.opacity = '0';
|
||||
setTimeout(function () {
|
||||
hint.style.display = 'none';
|
||||
}, 1000);
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', fadeHint);
|
||||
} else {
|
||||
fadeHint();
|
||||
}
|
||||
})();
|
||||
@@ -27,9 +27,33 @@ class PageAdminSet {
|
||||
public function init(): void {
|
||||
add_filter('aksrt_float_right_buttons', [$this, 'float_button'], 10, 2);
|
||||
add_action('wp_footer', [$this, 'render_modal'], 10);
|
||||
add_action('wp_footer', [self::class, 'enqueue_hint_script'], 9);
|
||||
add_action('wp_ajax_aksrt_frontend_set_save', [$this, 'ajax_save']);
|
||||
}
|
||||
|
||||
/**
|
||||
* 提示横条的自动淡出（对齐参考主题 js/page-edit.js）。
|
||||
*
|
||||
* 参考主题在 2 秒后把 .admin-set-info 淡出 1 秒，避免提示常驻遮挡悬浮栏。
|
||||
* 挂在 wp_footer 早期：wp_print_footer_scripts 在此之前执行，脚本仍能入队。
|
||||
*/
|
||||
public static function enqueue_hint_script(): void {
|
||||
if (!self::enabled()) {
|
||||
return;
|
||||
}
|
||||
$path = get_template_directory() . '/assets/js/front-page-admin-set.js';
|
||||
if (!file_exists($path)) {
|
||||
return;
|
||||
}
|
||||
wp_enqueue_script(
|
||||
'aksrt-front-page-admin-set',
|
||||
get_template_directory_uri() . '/assets/js/front-page-admin-set.js',
|
||||
['jquery'],
|
||||
(string) filemtime($path),
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
/** 开启条件：设置开关 + 管理员 + 单页/术语页 + 有效对象（排除投稿与导航页模板）。 */
|
||||
public static function enabled(): bool {
|
||||
if (!class_exists('\AKSRT\Settings\ExtensionRuntime') || !is_user_logged_in()) {
|
||||
@@ -60,7 +84,7 @@ class PageAdminSet {
|
||||
|
||||
$button = '<a href="javascript:;" data-toggle="modal" data-target="#modal_admin_set"'
|
||||
. ' title="' . esc_attr__('设置页面参数', 'aksrt') . '" class="admin-set-page float-btn">'
|
||||
. '<i class="fa fa-cog fa-spin" aria-hidden="true"></i>'
|
||||
. '<i class="fa fas fa-cog fa-spin" aria-hidden="true"></i>'
|
||||
. '<div class="abs-right badg c-red px12 admin-set-info" style="width:187px;">' . esc_html__('在此编辑此页面参数', 'aksrt') . '</div></a>';
|
||||
|
||||
return (string) $buttons . $button;
|
||||
@@ -96,13 +120,13 @@ class PageAdminSet {
|
||||
], admin_url('customize.php'));
|
||||
|
||||
$header = '<div class="modal-header"><strong class="modal-title">'
|
||||
. '<i class="fa fa-sliders mr10" aria-hidden="true"></i>' . esc_html($type_label . __('设置', 'aksrt'))
|
||||
. '<i class="fa fas fa-sliders-h mr10" aria-hidden="true"></i>' . esc_html($type_label . __('设置', 'aksrt'))
|
||||
. '</strong><button class="close" data-dismiss="modal">' . $this->close_icon() . '</button></div>';
|
||||
|
||||
$footer = '<div class="modal-footer">'
|
||||
. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fa-pie-chart" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
|
||||
. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
|
||||
. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
|
||||
. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fas fa-chart-pie" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
|
||||
. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fas fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
|
||||
. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fas fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
|
||||
. '</div>';
|
||||
|
||||
$body = '<div class="modal-body">'
|
||||
|
||||
@@ -20,6 +20,7 @@ namespace {
|
||||
$GLOBALS['aksrt_set_object'] = null;
|
||||
$GLOBALS['aksrt_set_page_templates'] = [];
|
||||
$GLOBALS['aksrt_set_can'] = true;
|
||||
$GLOBALS['aksrt_set_scripts'] = [];
|
||||
|
||||
function __(string $text, string $domain = ''): string { return $text; }
|
||||
function esc_html__($t, $d = ''): string { return (string) $t; }
|
||||
@@ -84,6 +85,11 @@ namespace {
|
||||
function wp_kses($t, $allowed = null): string { return (string) $t; }
|
||||
function checked($a, $b = true, $echo = true): string { return (string) $a === (string) $b ? ' checked="checked"' : ''; }
|
||||
function selected($a, $b = true, $echo = true): string { return (string) $a === (string) $b ? ' selected="selected"' : ''; }
|
||||
function wp_enqueue_script($handle, $src = '', $deps = [], $ver = false, $in_footer = false): void {
|
||||
$GLOBALS['aksrt_set_scripts'][$handle] = ['src' => $src, 'deps' => $deps, 'in_footer' => $in_footer];
|
||||
}
|
||||
function get_template_directory(): string { return dirname(__DIR__, 2); }
|
||||
function get_template_directory_uri(): string { return 'https://example.test/wp-content/themes/aksrt-theme'; }
|
||||
|
||||
function set_check(bool $condition, string $message): void {
|
||||
if (!$condition) throw new \RuntimeException($message);
|
||||
@@ -256,5 +262,36 @@ namespace {
|
||||
set_check(($GLOBALS['aksrt_set_meta']['widgets_register'] ?? '') === '', 'closing the widget container must clear the flag');
|
||||
set_check(($GLOBALS['aksrt_set_meta']['widgets_register_container'] ?? ['x']) === [], 'closing the widget container must clear positions');
|
||||
|
||||
// --- Hint script: the transient label must fade like the reference theme. ---
|
||||
PageAdminSet::enqueue_hint_script();
|
||||
$hint = $GLOBALS['aksrt_set_scripts']['aksrt-front-page-admin-set'] ?? null;
|
||||
set_check(is_array($hint), 'the hint fade script must be enqueued when the feature is on');
|
||||
set_check(strpos((string) ($hint['src'] ?? ''), '/assets/js/front-page-admin-set.js') !== false, 'the hint fade script must point at front-page-admin-set.js');
|
||||
set_check(($hint['deps'] ?? []) === ['jquery'], 'the hint fade script must depend on jQuery');
|
||||
set_check(!empty($hint['in_footer']), 'the hint fade script must load in the footer');
|
||||
|
||||
\AKSRT\Settings\ExtensionRuntime::$settings = ['admin_frontend_set' => false];
|
||||
$GLOBALS['aksrt_set_scripts'] = [];
|
||||
PageAdminSet::enqueue_hint_script();
|
||||
set_check($GLOBALS['aksrt_set_scripts'] === [], 'the disabled switch must not enqueue the hint fade script');
|
||||
\AKSRT\Settings\ExtensionRuntime::$settings = ['admin_frontend_set' => true];
|
||||
|
||||
// --- Icons: the site-wide convention is the normalized `fa fas fa-*` form. ---
|
||||
$GLOBALS['aksrt_set_queried'] = 12;
|
||||
$GLOBALS['aksrt_set_is_single'] = true;
|
||||
$GLOBALS['aksrt_set_is_page'] = false;
|
||||
$GLOBALS['aksrt_set_post_type'] = 'post';
|
||||
$GLOBALS['aksrt_set_post'] = (object) ['ID' => 12, 'post_type' => 'post'];
|
||||
ob_start();
|
||||
(new PageAdminSet())->render_modal();
|
||||
$modal_icons = (string) ob_get_clean();
|
||||
foreach (['fa fas fa-sliders-h', 'fa fas fa-times', 'fa fas fa-chart-pie', 'fa fas fa-wordpress', 'fa fas fa-check'] as $icon) {
|
||||
set_check(strpos($modal_icons, $icon) !== false, "modal must use the FA5 icon {$icon}");
|
||||
}
|
||||
set_check(strpos($modal_icons, 'class="fa fa-') === false, 'modal must not use bare FA4 icon classes');
|
||||
|
||||
$gear = (new PageAdminSet())->float_button('', false);
|
||||
set_check(strpos($gear, 'fa fas fa-cog fa-spin') !== false, 'the gear must use the FA5 cog class');
|
||||
|
||||
echo "Frontend page edit harness passed\n";
|
||||
}
|
||||
|
||||
@@ -218,6 +218,54 @@ test('frontend page edit ships gate, footer modal, and legacy ajax-save contract
|
||||
assert.equal(fs.existsSync(path.join(root, 'assets/js/page-admin-set.js')), false);
|
||||
});
|
||||
|
||||
test('frontend page edit icons follow the FA5 convention and the hint bar fades like the reference', () => {
|
||||
const pageAdminSet = read('src/Frontend/PageAdminSet.php');
|
||||
const hintJs = read('assets/js/front-page-admin-set.js');
|
||||
const floatingCss = read('assets/css/frontend/floating-buttons.css');
|
||||
const publicCss = read('assets/css/build/public.css');
|
||||
const publicMinCss = read('assets/css/build/public.min.css');
|
||||
|
||||
// Site-wide icon convention is aksrt_icon_markup()'s normalized `fa fas fa-*`:
|
||||
// the gear, the modal header, both footer links and the submit button.
|
||||
// FA5 renames the reference's FA4 glyphs (sliders→sliders-h, pie-chart→chart-pie).
|
||||
assert.match(pageAdminSet, /<i class="fa fas fa-cog fa-spin" aria-hidden="true"><\/i>/);
|
||||
assert.match(pageAdminSet, /<i class="fa fas fa-sliders-h mr10" aria-hidden="true"><\/i>/);
|
||||
assert.match(pageAdminSet, /<i class="fa fas fa-chart-pie" aria-hidden="true"><\/i>/);
|
||||
assert.match(pageAdminSet, /<i class="fa fas fa-wordpress" aria-hidden="true"><\/i>/);
|
||||
assert.match(pageAdminSet, /<i class="fa fas fa-check" aria-hidden="true"><\/i>/);
|
||||
assert.match(pageAdminSet, /<i class="fa fas fa-times" aria-hidden="true"><\/i>/);
|
||||
// No bare FA4 prefixes survive inside the feature markup.
|
||||
assert.doesNotMatch(pageAdminSet, /class="fa fa-(cog|sliders|sliders-h|chart-pie|pie-chart|wordpress|check|times)\b/);
|
||||
// Every glyph must exist in the shipped FA5 build (fa-spin is a utility, not a glyph).
|
||||
const fa5 = read('assets/fontawesome5/css/all.min.css');
|
||||
for (const token of ['fa-cog', 'fa-sliders-h', 'fa-chart-pie', 'fa-wordpress', 'fa-check', 'fa-times']) {
|
||||
assert.ok(fa5.includes(`.${token}:before`), `${token} is missing from Font Awesome 5.15.4`);
|
||||
}
|
||||
|
||||
// The transient label fades 2s after load over 1s (reference js/page-edit.js).
|
||||
assert.match(pageAdminSet, /add_action\('wp_footer', \[self::class, 'enqueue_hint_script'\], 9\)/);
|
||||
assert.match(pageAdminSet, /wp_enqueue_script\(\s*'aksrt-front-page-admin-set',\s*get_template_directory_uri\(\) \. '\/assets\/js\/front-page-admin-set\.js',\s*\['jquery'\],\s*\(string\) filemtime\(\$path\),\s*true\s*\)/s);
|
||||
assert.match(hintJs, /setTimeout\(function \(\) \{/, 'the fade is delayed like the reference');
|
||||
assert.match(hintJs, /hint\.style\.transition = 'opacity 1s'/);
|
||||
assert.match(hintJs, /hint\.style\.opacity = '0'/);
|
||||
assert.match(hintJs, /querySelector\('\.admin-set-page \.admin-set-info'\)/);
|
||||
|
||||
// Label geometry: reference .abs-right is top:50% + right:.7em + translateY(-50%).
|
||||
// AKSRT's legacy .abs-right is top:0/right:0, so the float bar restores it.
|
||||
// The minified bundle has no space before the brace, so keep it optional.
|
||||
const labelRule = /\.float-right \.admin-set-page \.admin-set-info\s*\{[^}]*\}/s;
|
||||
assert.match(floatingCss, labelRule);
|
||||
assert.match(publicCss, labelRule);
|
||||
assert.match(publicMinCss, labelRule);
|
||||
for (const css of [floatingCss, publicCss, publicMinCss]) {
|
||||
const rule = css.match(labelRule)[0];
|
||||
assert.match(rule, /position:\s*absolute/);
|
||||
assert.match(rule, /top:\s*50%/);
|
||||
assert.match(rule, /right:\s*0?\.7em/);
|
||||
assert.match(rule, /transform:\s*translateY\(-50%\)/);
|
||||
}
|
||||
});
|
||||
|
||||
test('float toolbar config reaches the tinymce plugin with reference-context buttons', () => {
|
||||
const editorJs = read('assets/js/front-submit-editor.js');
|
||||
const submitPage = read('templates/pages/page-submit.php');
|
||||
|
||||
Reference in New Issue
Block a user