wordpress-kratos-yang/inc/options-framework/js/options-custom.js

/**
 * 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()

		})
	}

})