laoyang
1a31e412b0
之前四个密钥框（百度 APPID/密钥、有道应用 ID/密钥）无论选哪家服务商 都全摆在设置页上，四组输入框里永远有三组用不上。 改动： - inc/theme-options.php：新增 $yang_prov_class() 闭包，统一生成字段 的 class。服务端就按「当前已保存的服务商」把 yq-cond-hide 打好， 首帧不闪。分组标记 yang-prov / yang-prov-<key> 写在每个字段的 'class' 上，是**唯一的分组声明处**，JS 不再抄服务商清单。 原本一个 shared 的 info 块拆成三块，每家一句自己的说明。 - inc/options-framework/js/options-custom.js：重写 yq_toggle_writing_slug_fields()。两层条件（总开关 + 服务商归属） 必须在同一函数内合成一个结果再 toggleClass —— toggleClass 的 force 是绝对赋值，拆成两个函数各 toggle 一次的话结果只取决于 注册顺序。change 事件同时监听 #w_on_slug 与 #w_provider。 - style.css：3.2.57 -> 3.2.58 两处刻意避开的老坑： - 用 class + display:none !important，不用 jQuery show()/hide()， 后者会把行内 display 写成 block，回退 3.2.28 的 flow-root 修复。 - 隐藏不 disabled 输入框，密钥字段是「留空=不修改」语义，disabled 不随表单提交，会把已保存的密钥冲掉。
255 lines
9.4 KiB
JavaScript
255 lines
9.4 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()
|
||
|
||
// 写作增强：翻译服务商的四个凭据 + 说明，只在「自动生成英文别名」勾选时才有意义。
|
||
//
|
||
// 为什么用 requires 之外的方式：`requires` 这个键在框架里**根本没被读取**
|
||
// （grep 整个 options-framework 目录零命中，条件显示全靠本文件里这些
|
||
// 硬编码的 jQuery）。所以主题里其它 19 处 'requires' 其实都是死代码，
|
||
// 这里不再往那个坑里加，直接写显式逻辑。
|
||
//
|
||
// ── 3.2.58 起这里变成**两层**条件 ──────────────────────────────────
|
||
//
|
||
// 第一层（原有）：w_on_slug 勾了 → 这一整块才出现
|
||
// 第二层（本次）：w_provider 选了谁 → 只出现那一家的输入框
|
||
//
|
||
// 两层是「与」的关系：没勾别名生成时，整块都不该出现（不管下拉框选的谁）。
|
||
//
|
||
// 🔴🔴 最容易踩的坑：这两层必须**在同一个函数里一起算**，不能各写一个
|
||
// yq_toggle_xxx() 分别去 toggleClass 同一批元素。因为 toggleClass 的
|
||
// 第二参数是「绝对赋值」不是「与」：
|
||
// 函数A 按第一层算出 true → 去掉 yq-cond-hide（显示）
|
||
// 函数B 按第二层算出 false → 加上 yq-cond-hide（隐藏）
|
||
// 两个都跑完之后，结果**只取决于谁后注册**，跟真实业务无关。
|
||
// 表现就是「勾了别名生成、选了百度，百度框却时有时无」这种鬼故事。
|
||
//
|
||
// ── 分组是数据驱动的，不是 JS 里写死映射表 ────────────────────────
|
||
// 服务商清单只有 theme-writing.php 的 yang_writing_providers() 一份。
|
||
// 若在这里抄一遍 {baidu:[...], youdao:[...]}，加一家要改两处，且不一致时
|
||
// **不报错**，只表现成「新服务商的框永远不出现」。所以分组标记写在 PHP
|
||
// 每个字段的 'class' 上：
|
||
// yang-prov → 我参与「按服务商显示」
|
||
// yang-prov-<key> → 我属于 <key> 这家
|
||
// 这里只读 class、和下拉框当前 value 比对，零服务商知识。
|
||
function yq_toggle_writing_slug_fields () {
|
||
var on = jQuery('#w_on_slug').is(':checked')
|
||
|
||
// 整块的两个「共同成员」（不区分服务商的部分）
|
||
jQuery('#section-w_provider').toggleClass('yq-cond-hide', !on)
|
||
jQuery('#section-w_timeout').toggleClass('yq-cond-hide', !on)
|
||
|
||
// 按服务商分组的字段：两层条件合成一个结果再赋值
|
||
var provider = String(jQuery('#w_provider').val() || '')
|
||
|
||
jQuery('.yang-prov').each(function () {
|
||
var el = jQuery(this)
|
||
var belongs = el.hasClass('yang-prov-' + provider)
|
||
// 第一层不成立时，第二层算什么都不重要 —— 一律隐藏
|
||
el.toggleClass('yq-cond-hide', !(on && belongs))
|
||
})
|
||
}
|
||
|
||
// 两个控件任一变化都要重算：下拉框换了服务商、或者勾掉别名生成
|
||
jQuery(document).on('change', '#w_on_slug, #w_provider', yq_toggle_writing_slug_fields)
|
||
yq_toggle_writing_slug_fields()
|
||
|
||
// 写作增强：「每篇最多新增几个标签」只在「自动生成标签」勾选时才有意义。
|
||
function yq_toggle_writing_tag_fields () {
|
||
var on = jQuery('#w_on_tag').is(':checked')
|
||
jQuery('#section-w_tag_new_limit').toggleClass('yq-cond-hide', !on)
|
||
}
|
||
|
||
jQuery(document).on('change', '#w_on_tag', yq_toggle_writing_tag_fields)
|
||
yq_toggle_writing_tag_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()
|
||
|
||
})
|
||
}
|
||
|
||
}) |