File manager - Edit - /home/palg2351/public_html/wp-content/themes/blocksy/inc/panel-builder/header/menu/sync.js
Back
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-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-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-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 } )
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0.17 |
proxy
|
phpinfo
|
Settings