kollapsminoriteten/wp-content/themes/blocksy/inc/panel-builder/header/menu/sync.js

import ctEvents from 'ct-events'

import { typographyOption } from '../../../../static/js/customizer/sync/variables/typography'
import { updateAndSaveEl } from '../../../../static/js/customizer/sync'
import {
	getRootSelectorFor,
	assembleSelector,
	withKeys,
	mutateSelector,
	getSkipRuleKeyword,
} from '../../../../static/js/customizer/sync/helpers'

export const handleMenuVariables = ({ itemId, values }) => {
	const header_menu_type = values.header_menu_type || 'type-1'

	const allSkipped = {
		default: {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		hover: {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		active: {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		'hover-type-3': {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		'active-type-3': {
			color: getSkipRuleKeyword('DEFAULT'),
		},
	}

	const valuesDefaults = {
		menuFontColor: {
			default: { color: 'var(--theme-text-color)' },
			hover: {
				color: getSkipRuleKeyword('DEFAULT'),
			},
			active: {
				color: getSkipRuleKeyword('DEFAULT'),
			},
			'hover-type-3': { color: '#ffffff' },
			'active-type-3': {
				color: getSkipRuleKeyword('DEFAULT'),
			},
		},

		transparentMenuFontColor: allSkipped,
		stickyMenuFontColor: allSkipped,
		headerDropdownDivider: {
			width: 1,
			style: 'dashed',
			color: {
				color: 'rgba(255, 255, 255, 0.1)',
			},
		},
	}

	const extractKeyWithDefault = (key) => (values) => {
		return values[key] || valuesDefaults[key]
	}

	const menuFontColor = [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'theme-link-initial-color',
			type: 'color:default',

			fullValue: true,
			extractValue: extractKeyWithDefault('menuFontColor'),
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'theme-link-hover-color',
			type:
				header_menu_type === 'type-3'
					? 'color:hover-type-3'
					: 'color:hover',

			fullValue: true,
			extractValue: extractKeyWithDefault('menuFontColor'),
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'theme-link-active-color',
			type:
				header_menu_type === 'type-3'
					? 'color:active-type-3'
					: 'color:active',

			fullValue: true,
			extractValue: extractKeyWithDefault('menuFontColor'),
		},
	]

	const transparentMenuFontColor = [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),
			variable: 'theme-link-initial-color',
			type: 'color:default',

			fullValue: true,
			extractValue: extractKeyWithDefault('transparentMenuFontColor'),
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),
			variable: 'theme-link-hover-color',
			type:
				header_menu_type === 'type-3'
					? 'color:hover-type-3'
					: 'color:hover',

			fullValue: true,
			extractValue: extractKeyWithDefault('transparentMenuFontColor'),
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),
			variable: 'theme-link-active-color',
			type:
				header_menu_type === 'type-3'
					? 'color:active-type-3'
					: 'color:active',

			fullValue: true,
			extractValue: extractKeyWithDefault('transparentMenuFontColor'),
		},
	]

	const stickyMenuFontColor = [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'theme-link-initial-color',
			type: 'color:default',

			fullValue: true,

			extractValue: extractKeyWithDefault('stickyMenuFontColor'),
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'theme-link-hover-color',
			type:
				header_menu_type === 'type-3'
					? 'color:hover-type-3'
					: 'color:hover',

			fullValue: true,
			extractValue: extractKeyWithDefault('stickyMenuFontColor'),
		},

		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'theme-link-active-color',
			type:
				header_menu_type === 'type-3'
					? 'color:active-type-3'
					: 'color:active',

			fullValue: true,

			extractValue: extractKeyWithDefault('stickyMenuFontColor'),
		},
	]

	return {
		headerMenuItemsSpacing: {
			selector: assembleSelector(getRootSelectorFor({ itemId })),
			variable: 'menu-items-spacing',
			unit: 'px',
		},

		headerMenuItemsGap: {
			selector: assembleSelector(getRootSelectorFor({ itemId })),
			variable: 'menu-items-gap',
			unit: 'px',
		},

		headerMenuItemsHeight: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'menu-item-height',
			unit: '%',
		},

		...typographyOption({
			id: 'headerMenuFont',

			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
		}),

		dropdownTopOffset: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-top-offset',
			unit: 'px',
		},

		stickyStateDropdownTopOffset: {
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'sticky-state-dropdown-top-offset',
			unit: 'px',
		},

		dropdown_horizontal_offset: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-horizontal-offset',
			unit: 'px',
		},

		dropdownMenuWidth: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-width',
			unit: 'px',
		},

		dropdownItemsSpacing: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-items-spacing',
			unit: 'px',
		},

		...typographyOption({
			id: 'headerDropdownFont',

			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu .ct-menu-link',
				})
			),
		}),

		...withKeys(
			['headerDropdownDivider', 'dropdown_items_type'],
			[
				{
					selector: assembleSelector(
						mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						})
					),
					fullValue: true,
					extractValue: extractKeyWithDefault(
						'headerDropdownDivider'
					),
					variable: 'dropdown-divider',
					type: 'border',
				},

				{
					selector: assembleSelector(
						mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						})
					),
					fullValue: true,
					extractValue: ({ dropdown_items_type }) => {
						if (dropdown_items_type !== 'padded') {
							return 'CT_CSS_SKIP_RULE'
						}

						const headerDropdownDivider = extractKeyWithDefault(
							'headerDropdownDivider'
						)(values)

						return headerDropdownDivider['style'] !== 'none'
							? '1'
							: '0'
					},
					unit: '',
					variable: 'has-divider',
				},
			]
		),

		headerMenuMargin: {
			selector: assembleSelector(getRootSelectorFor({ itemId })),
			type: 'spacing',
			variable: 'margin',
			responsive: true,
			important: true,
		},

		headerToplevelBorderRadius: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			type: 'spacing',
			variable: 'menu-item-radius',
			responsive: true,
		},

		headerDropdownShadow: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			type: 'box-shadow',
			variable: 'theme-box-shadow',
			responsive: true,
		},

		headerDropdownRadius: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			type: 'spacing',
			variable: 'theme-border-radius',
			responsive: true,
		},

		header_menu_type: [
			...menuFontColor,

			...(values.stickyMenuFontColor ? stickyMenuFontColor : []),

			...(values.transparentMenuFontColor
				? transparentMenuFontColor
				: []),
		],

		// default state
		menuFontColor,

		menuIndicatorColor: [
			{
				selector: assembleSelector(getRootSelectorFor({ itemId })),
				variable: 'menu-indicator-initial-color',
				type: 'color:default',
				responsive: true,
			},

			{
				selector: assembleSelector(getRootSelectorFor({ itemId })),
				variable: 'menu-indicator-hover-color',
				type: 'color:hover',
				responsive: true,
			},

			{
				selector: assembleSelector(getRootSelectorFor({ itemId })),
				variable: 'menu-indicator-active-color',
				type: 'color:active',
				responsive: true,
			},
		],

		headerDropdownFontColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu .ct-menu-link',
					})
				),
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu .ct-menu-link',
					})
				),
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu .ct-menu-link',
					})
				),
				variable: 'theme-link-active-color',
				type: 'color:active',
			},
		],

		headerDropdownBackground: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu',
					})
				),
				variable: 'dropdown-background-color',
				type: 'color:default',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu',
					})
				),
				variable: 'dropdown-background-hover-color',
				type: 'color:hover',
			},
		],

		// transparent state
		transparentMenuFontColor,

		transparentMenuIndicatorColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),

				variable: 'menu-indicator-initial-color',
				type: 'color:default',
				responsive: true,
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),

				variable: 'menu-indicator-hover-color',
				type: 'color:hover',
				responsive: true,
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),

				variable: 'menu-indicator-active-color',
				type: 'color:active',
				responsive: true,
			},
		],

		transparentHeaderDropdownFontColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'theme-link-active-color',
				type: 'color:active',
			},
		],

		transparentHeaderDropdownBackground: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'dropdown-background-color',
				type: 'color:default',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'dropdown-background-hover-color',
				type: 'color:hover',
			},
		],

		// sticky state
		stickyMenuFontColor,

		stickyMenuIndicatorColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'menu-indicator-initial-color',
				type: 'color:default',
				responsive: true,
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'menu-indicator-hover-color',
				type: 'color:hover',
				responsive: true,
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'menu-indicator-active-color',
				type: 'color:active',
				responsive: true,
			},
		],

		stickyHeaderDropdownFontColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'theme-link-active-color',
				type: 'color:active',
			},
		],

		stickyHeaderDropdownBackground: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'dropdown-background-color',
				type: 'color:default',
			},

			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'dropdown-background-hover-color',
				type: 'color:hover',
			},
		],
	}
}

export const handleMenuOptions = ({
	selector,
	changeDescriptor: { optionId, optionValue, values },
}) => {
	if (
		optionId === 'header_menu_type' ||
		optionId === 'menu_indicator_effect'
	) {
		updateAndSaveEl(selector, (el) => {
			el.dataset.menu = `${values.header_menu_type}${
				values.header_menu_type === 'type-2'
					? `:${values.menu_indicator_effect}`
					: ``
			}`
		})
	}

	if (optionId === 'headerMenuItemsSpacing') {
		ctEvents.trigger('ct:header:update')
		ctEvents.trigger('ct:header:refresh-menu-submenus')
	}

	if (
		optionId === 'dropdown_animation' ||
		optionId === 'dropdown_items_type'
	) {
		const {
			dropdown_animation = 'type-1',
			dropdown_items_type = 'simple',
		} = values

		updateAndSaveEl(
			selector,
			(el) =>
				(el.dataset.dropdown = `${dropdown_animation}:${dropdown_items_type}`)
		)
	}
}

ctEvents.on('ct:header:sync:item:menu', (changeDescriptor) => {
	const selector = '.header-menu-1'
	handleMenuOptions({ selector, changeDescriptor })
})

ctEvents.on(
	'ct:header:sync:collect-variable-descriptors',
	(variableDescriptors) => {
		variableDescriptors['menu'] = handleMenuVariables
	}
)