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:
@@ -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