laoyang
4a2d62b1aa
原来「目录位置」是一个三选一下拉：正文中间 / 页面左侧 / 页面右侧，
等于把「放进正文」和「浮在页边」当成互斥的一件事 —— 想同时在正文
开头放一份、又在边上浮一份，做不到。
改成两个独立勾选，各自带子选项：
· 在正文中显示 → 正文中的对齐（靠左 / 靠右）+ 自动插入位置
· 浮动显示 → 浮动方向（页面左侧 / 页面右侧）
两个都勾就同时出现两份，只勾一个就只出现一种。四种组合都在后台
联动里逐个验证过（探针 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 字符串存在。
194 lines
6.0 KiB
JavaScript
194 lines
6.0 KiB
JavaScript
/**
|
||
* Custom scripts needed for the colorpicker, image button selectors,
|
||
* and navigation tabs.
|
||
*/
|
||
|
||
jQuery(document).ready(function ($) {
|
||
|
||
$('input[id^="s_"]').click(function () {
|
||
jQuery('#section-' + this.id + '_url').fadeToggle(400)
|
||
jQuery('#section-' + this.id + '_links').fadeToggle(400)
|
||
})
|
||
|
||
for (i = 0; i < $('input[id^="s_"]' + ':checked').length; i++) {
|
||
let id = $('input[id^="s_"]' + ':checked')[i].id
|
||
$('#section-' + id + '_url').show()
|
||
$('#section-' + id + '_links').show()
|
||
}
|
||
|
||
jQuery('#g_cos').click(function () {
|
||
jQuery('#section-g_cos_bucketname').fadeToggle(400)
|
||
jQuery('#section-g_cos_url').fadeToggle(400)
|
||
jQuery('#section-g_cos_accesskey').fadeToggle(400)
|
||
jQuery('#section-g_cos_secretkey').fadeToggle(400)
|
||
})
|
||
|
||
if (jQuery('#g_cos:checked').val() !== undefined) {
|
||
jQuery('#section-g_cos_bucketname').show()
|
||
jQuery('#section-g_cos_url').show()
|
||
jQuery('#section-g_cos_accesskey').show()
|
||
jQuery('#section-g_cos_secretkey').show()
|
||
}
|
||
|
||
jQuery('#g_cc_switch').click(function () {
|
||
jQuery('#section-g_cc').fadeToggle(400)
|
||
})
|
||
|
||
if (jQuery('#g_cc_switch:checked').val() !== undefined) {
|
||
jQuery('#section-g_cc').show()
|
||
}
|
||
|
||
jQuery('#g_donate').click(function () {
|
||
jQuery('#section-g_donate_alipay').fadeToggle(400)
|
||
jQuery('#section-g_donate_wechat').fadeToggle(400)
|
||
})
|
||
|
||
if (jQuery('#g_donate:checked').val() !== undefined) {
|
||
jQuery('#section-g_donate_alipay').show()
|
||
jQuery('#section-g_donate_wechat').show()
|
||
}
|
||
|
||
jQuery('#m_smtp').click(function () {
|
||
jQuery('#section-m_host').fadeToggle(400)
|
||
jQuery('#section-m_sec').fadeToggle(400)
|
||
jQuery('#section-m_port').fadeToggle(400)
|
||
jQuery('#section-m_username').fadeToggle(400)
|
||
jQuery('#section-m_passwd').fadeToggle(400)
|
||
jQuery('#section-m_sendmail').fadeToggle(400)
|
||
})
|
||
|
||
if (jQuery('#m_smtp:checked').val() !== undefined) {
|
||
jQuery('#section-m_host').show()
|
||
jQuery('#section-m_sec').show()
|
||
jQuery('#section-m_port').show()
|
||
jQuery('#section-m_username').show()
|
||
jQuery('#section-m_passwd').show()
|
||
jQuery('#section-m_sendmail').show()
|
||
}
|
||
|
||
jQuery('#g_thumbnail').click(function () {
|
||
jQuery('#section-g_postthumbnail').fadeToggle(400)
|
||
})
|
||
|
||
if (jQuery('#g_thumbnail:checked').val() !== undefined) {
|
||
jQuery('#section-g_postthumbnail').show()
|
||
}
|
||
|
||
jQuery('#top_select').change(function () {
|
||
if (jQuery("#top_select").val() == 'color') {
|
||
jQuery('#section-top_color').fadeIn(400)
|
||
jQuery('#section-top_img').fadeOut(400)
|
||
jQuery('#section-top_title').fadeOut(400)
|
||
jQuery('#section-top_describe').fadeOut(400)
|
||
} else {
|
||
jQuery('#section-top_color').fadeOut(400)
|
||
jQuery('#section-top_img').fadeIn(400)
|
||
jQuery('#section-top_title').fadeIn(400)
|
||
jQuery('#section-top_describe').fadeIn(400)
|
||
}
|
||
})
|
||
|
||
if (jQuery('#top_select').val() == 'color') {
|
||
jQuery('#section-top_color').show()
|
||
jQuery('#section-top_img').hide()
|
||
jQuery('#section-top_title').hide()
|
||
jQuery('#section-top_describe').hide()
|
||
} else {
|
||
jQuery('#section-top_color').hide()
|
||
jQuery('#section-top_img').show()
|
||
jQuery('#section-top_title').show()
|
||
jQuery('#section-top_describe').show()
|
||
}
|
||
|
||
// 自动目录：字段显隐跟着两个开关走。
|
||
//
|
||
// 「在正文中显示」勾了 → 「正文中的对齐」「自动插入位置」才有意义
|
||
// 「浮动显示」勾了 → 「浮动方向」才有意义
|
||
//
|
||
// 为什么必须藏起来：两个开关任一关闭时，它下面那几个子选项完全无效。
|
||
// 若还留着，用户会以为「选了文章结尾却没插进正文」是个 bug。
|
||
//
|
||
// 用 class 切换而不是 fadeIn/fadeOut：.section 的 display 是 flow-root
|
||
// （3.2.28 靠它建独立 BFC，避免被左侧浮动标签列的 clear:both 拉长）。
|
||
// jQuery 的 show()/hide() 会写行内 display，把那套布局打回 block，
|
||
// 等于悄悄回退 3.2.28 的修复。
|
||
//
|
||
// ⚠️ 绑定事件用 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(document).on('change', '#toc_inline, #toc_float', yq_toggle_toc_fields)
|
||
yq_toggle_toc_fields()
|
||
|
||
// Loads the color pickers
|
||
$('.of-color').wpColorPicker()
|
||
|
||
// Image Options
|
||
$('.of-radio-img-img').click(function () {
|
||
$(this).parent().parent().find('.of-radio-img-img').removeClass('of-radio-img-selected')
|
||
$(this).addClass('of-radio-img-selected')
|
||
})
|
||
|
||
$('.of-radio-img-label').hide()
|
||
$('.of-radio-img-img').show()
|
||
$('.of-radio-img-radio').hide()
|
||
|
||
// Loads tabbed sections if they exist
|
||
if ($('.nav-tab-wrapper').length > 0) {
|
||
options_framework_tabs()
|
||
}
|
||
|
||
function options_framework_tabs () {
|
||
|
||
var $group = $('.group'),
|
||
$navtabs = $('.nav-tab-wrapper a'),
|
||
active_tab = ''
|
||
|
||
// Hides all the .group sections to start
|
||
$group.hide()
|
||
|
||
// Find if a selected tab is saved in localStorage
|
||
if (typeof (localStorage) != 'undefined') {
|
||
active_tab = localStorage.getItem('active_tab')
|
||
}
|
||
|
||
// If active tab is saved and exists, load it's .group
|
||
if (active_tab != '' && $(active_tab).length) {
|
||
$(active_tab).fadeIn()
|
||
$(active_tab + '-tab').addClass('nav-tab-active')
|
||
} else {
|
||
$('.group:first').fadeIn()
|
||
$('.nav-tab-wrapper a:first').addClass('nav-tab-active')
|
||
}
|
||
|
||
// Bind tabs clicks
|
||
$navtabs.click(function (e) {
|
||
|
||
e.preventDefault()
|
||
|
||
// Remove active class from all tabs
|
||
$navtabs.removeClass('nav-tab-active')
|
||
|
||
$(this).addClass('nav-tab-active').blur()
|
||
|
||
if (typeof (localStorage) != 'undefined') {
|
||
localStorage.setItem('active_tab', $(this).attr('href'))
|
||
}
|
||
|
||
var selected = $(this).attr('href')
|
||
|
||
$group.hide()
|
||
$(selected).fadeIn()
|
||
|
||
})
|
||
}
|
||
|
||
}) |