3.2.31 目录「正文内显示」与「浮动显示」拆成两个独立开关(#1)
原来「目录位置」是一个三选一下拉:正文中间 / 页面左侧 / 页面右侧,
等于把「放进正文」和「浮在页边」当成互斥的一件事 —— 想同时在正文
开头放一份、又在边上浮一份,做不到。
改成两个独立勾选,各自带子选项:
· 在正文中显示 → 正文中的对齐(靠左 / 靠右)+ 自动插入位置
· 浮动显示 → 浮动方向(页面左侧 / 页面右侧)
两个都勾就同时出现两份,只勾一个就只出现一种。四种组合都在后台
联动里逐个验证过(探针 70/0)。
新增能力「正文内靠左 / 靠右」是本单的主要新需求。实现上两个要点:
1. 必须给正文目录一个宽度上限(max-width: min(100%, 28em))。
块级盒子默认撑满正文栏,此时 margin:auto 没有剩余空间可分配,
「靠左/靠右」会是一个属性正确、画面纹丝不动的空操作。
2. 用 data-align 属性把方向带下去,CSS 只需两条规则,
不随方向数量膨胀。属性在 yang_toc_slot_html() 里输出。
语义收窄:手写 [TOC] 以前会让整份自动处理全停(连带 rail=false),
现在只手管「正文那一份」—— 手写位置优先,浮动仍由 float 开关独立
决定。这样「精确定位正文位置」和「全站边上都有目录」可以并存。
顺手修掉一处默认值错配:checkbox 用 !empty() 判断会把「键不存在」
和「键明确为空」混成一件事,导致新装站点后台框显示勾上、页面却
不出目录。改用 array_key_exists() 区分的三态判断。
老配置不迁移:3.2.30 的 toc_place 直接作废,不做兼容。
默认 inline=1 / float=0,升级后页面与升级前一致。
重构:把内容过滤器拆成 yang_toc_apply()(纯执行层)+ 运行时壳,
使设置组合能在单进程单测里逐个喂进去(PHP 无法重置函数 static)。
验证
逻辑 101/0 · 逻辑反向 15/15
旧回归 53/0
静态契约 58/0 · 反向 11/11
后台几何+交互 70/0 · 反向 11/11
侧栏几何 73/0 · 反向 8/8
正文对齐几何 23/0 · 反向 5/5(含阴性对照)
包内容契约 59/0 · 反向 9/9
正文对齐的几何探针量到真实的 Δleft = 348px(靠右比靠左),
而不是只断言 data-align 字符串存在。
This commit is contained in:
@@ -100,21 +100,33 @@ jQuery(document).ready(function ($) {
|
||||
jQuery('#section-top_describe').show()
|
||||
}
|
||||
|
||||
// 自动目录:只有「目录位置 = 正文中间」时,插入位置才有意义。
|
||||
// 侧栏模式(左/右)下它完全无效 —— 若还留着这个下拉框,用户会以为
|
||||
// 「选了文章结尾却没插进正文」是个 bug。
|
||||
// 自动目录:字段显隐跟着两个开关走。
|
||||
//
|
||||
// 「在正文中显示」勾了 → 「正文中的对齐」「自动插入位置」才有意义
|
||||
// 「浮动显示」勾了 → 「浮动方向」才有意义
|
||||
//
|
||||
// 为什么必须藏起来:两个开关任一关闭时,它下面那几个子选项完全无效。
|
||||
// 若还留着,用户会以为「选了文章结尾却没插进正文」是个 bug。
|
||||
//
|
||||
// 用 class 切换而不是 fadeIn/fadeOut:.section 的 display 是 flow-root
|
||||
// (3.2.28 靠它建独立 BFC,避免被左侧浮动标签列的 clear:both 拉长)。
|
||||
// jQuery 的 show()/hide() 会写行内 display,把那套布局打回 block,
|
||||
// 等于悄悄回退 3.2.28 的修复。
|
||||
function yq_toggle_toc_anchor () {
|
||||
var center = jQuery('#toc_place').val() === 'center'
|
||||
jQuery('#section-toc_anchor').toggleClass('yq-cond-hide', !center)
|
||||
//
|
||||
// ⚠️ 绑定事件用 delegation('change' 挂 document、选择器过滤):
|
||||
// 这两个是 checkbox,框架的 checkbox 控件可能在外面再包一层 label/inline,
|
||||
// 直接绑在 input 上偶尔会因为 DOM 顺序变了而漏绑。delegation 不受影响。
|
||||
function yq_toggle_toc_fields () {
|
||||
var inline = jQuery('#toc_inline').is(':checked')
|
||||
var float = jQuery('#toc_float').is(':checked')
|
||||
|
||||
jQuery('#section-toc_inline_align').toggleClass('yq-cond-hide', !inline)
|
||||
jQuery('#section-toc_anchor').toggleClass('yq-cond-hide', !inline)
|
||||
jQuery('#section-toc_float_side').toggleClass('yq-cond-hide', !float)
|
||||
}
|
||||
|
||||
jQuery('#toc_place').on('change', yq_toggle_toc_anchor)
|
||||
yq_toggle_toc_anchor()
|
||||
jQuery(document).on('change', '#toc_inline, #toc_float', yq_toggle_toc_fields)
|
||||
yq_toggle_toc_fields()
|
||||
|
||||
// Loads the color pickers
|
||||
$('.of-color').wpColorPicker()
|
||||
|
||||
Reference in New Issue
Block a user