File manager - Edit - /home/palg2351/public_html/wp-content/themes/blocksy/inc/panel-builder/header/button/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, responsiveClassesFor, mutateSelector, getColumnSelectorFor, } from '../../../../static/js/customizer/sync/helpers' const getVariables = ({ itemId, fullItemId, panelType }) => ({ cta_button_icon_size: { selector: assembleSelector( getRootSelectorFor({ itemId, fullItemId, panelType }) ), variable: 'theme-icon-size', responsive: true, unit: 'px', }, headerCtaRadius: { selector: assembleSelector( getRootSelectorFor({ itemId, fullItemId, panelType }) ), type: 'spacing', variable: 'theme-button-border-radius', responsive: true, emptyValue: '', }, headerCtaPadding: { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType }), operation: 'suffix', to_add: 'a', }) ), type: 'spacing', variable: 'theme-button-padding', responsive: true, emptyValue: '', }, headerCtaMargin: { selector: assembleSelector( getRootSelectorFor({ itemId, fullItemId, panelType }) ), type: 'spacing', variable: 'margin', responsive: true, important: true, }, ...typographyOption({ id: 'headerButtonFont', prefix: 'button', selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType }), operation: 'suffix', to_add: '[class*="ct-button"]', }) ), }), header_button_text_horizontal_alignment: { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType }), operation: 'suffix', to_add: '.ct-button-text', }) ), variable: 'horizontal-alignment', responsive: true, unit: '', }, ...typographyOption({ id: 'headerButtonSecondaryLabelFont', prefix: 'button', selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType }), operation: 'suffix', to_add: '.ct-button-secondary-text', }) ), }), // default state headerButtonFontColor: [ { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button', }) ), variable: 'theme-button-text-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost', }) ), variable: 'theme-button-text-initial-color', type: 'color:default_2', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover_2', responsive: true, }, ], headerButtonSecondaryFontColor: [ { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button .ct-button-secondary-text', }) ), variable: 'theme-button-text-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button .ct-button-secondary-text', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost .ct-button-secondary-text', }) ), variable: 'theme-button-text-initial-color', type: 'color:default_2', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost .ct-button-secondary-text', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover_2', responsive: true, }, ], headerButtonForeground: [ { selector: assembleSelector( getRootSelectorFor({ itemId, fullItemId, panelType }) ), variable: 'theme-button-background-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( getRootSelectorFor({ itemId, fullItemId, panelType }) ), variable: 'theme-button-background-hover-color', type: 'color:hover', responsive: true, }, ], // transparent state transparentHeaderButtonFontColor: [ { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default_2', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover_2', responsive: true, }, ], transparentHeaderButtonSecondaryFontColor: [ { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button .ct-button-secondary-text', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button .ct-button-secondary-text', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost .ct-button-secondary-text', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default_2', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost .ct-button-secondary-text', }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover_2', responsive: true, }, ], transparentHeaderButtonForeground: [ { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-background-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'between', to_add: '[data-transparent-row="yes"]', }) ), variable: 'theme-button-background-hover-color', type: 'color:hover', responsive: true, }, ], // sticky state stickyHeaderButtonFontColor: [ { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default_2', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover_2', responsive: true, }, ], stickyHeaderButtonSecondaryFontColor: [ { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button .ct-button-secondary-text', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button .ct-button-secondary-text', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost .ct-button-secondary-text', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-initial-color', type: 'color:default_2', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'suffix', to_add: '.ct-button-ghost .ct-button-secondary-text', }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-text-hover-color', type: 'color:hover_2', responsive: true, }, ], stickyHeaderButtonForeground: [ { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-background-initial-color', type: 'color:default', responsive: true, }, { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType, }), operation: 'between', to_add: '[data-sticky*="yes"]', }) ), variable: 'theme-button-background-hover-color', type: 'color:hover', responsive: true, }, ], // footer button footer_button_horizontal_alignment: { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType: 'footer', }), operation: 'replace-last', to_add: getColumnSelectorFor({ itemId: fullItemId }), }) ), variable: 'horizontal-alignment', responsive: true, unit: '', }, footer_button_vertical_alignment: { selector: assembleSelector( mutateSelector({ selector: getRootSelectorFor({ itemId, fullItemId, panelType: 'footer', }), operation: 'replace-last', to_add: getColumnSelectorFor({ itemId: fullItemId }), }) ), variable: 'vertical-alignment', responsive: true, unit: '', }, }) ctEvents.on( 'ct:header:sync:collect-variable-descriptors', (variableDescriptors) => { variableDescriptors['button'] = ({ itemId, fullItemId }) => { return getVariables({ itemId, fullItemId, panelType: 'header' }) } } ) ctEvents.on( 'ct:footer:sync:collect-variable-descriptors', (variableDescriptors) => { variableDescriptors['button'] = ({ itemId, fullItemId }) => getVariables({ itemId, fullItemId, panelType: 'footer' }) } ) ctEvents.on( 'ct:header:sync:item:button', ({ itemId, optionId, optionValue, values: { icon_position } }) => { const selector = `[data-id="${itemId}"]` if (optionId === 'header_button_type') { updateAndSaveEl(selector, (el) => { const button = el.querySelector('[class*="ct-button"]') button.classList.remove('ct-button', 'ct-button-ghost') button.classList.add( optionValue === 'type-1' ? 'ct-button' : 'ct-button-ghost' ) }) } if (optionId === 'visibility') { updateAndSaveEl(selector, (el) => responsiveClassesFor({ ...optionValue, desktop: true }, el) ) } if (optionId === 'header_button_size') { updateAndSaveEl(selector, (el) => { el.querySelector('[class*="ct-button"]').dataset.size = optionValue }) } if (optionId === 'header_button_text') { updateAndSaveEl(selector, (el) => { if (el.querySelector('.ct-button-secondary-text')) { const maybeSmallTag = el.querySelector( '.ct-button-secondary-text' ) el.querySelector('.ct-button-text').innerHTML = optionValue + maybeSmallTag.outerHTML } else { const maybeIcon = el.querySelector( '[class*="ct-button"] .ct-icon' ) let icon = '' if (maybeIcon) { icon = maybeIcon.outerHTML } el.querySelector('[class*="ct-button"]').innerHTML = icon_position === 'right' ? `${optionValue}${icon}` : `${icon}${optionValue}` } }) } if (optionId === 'header_button_secondary_text') { updateAndSaveEl(selector, (el) => { el.querySelector('.ct-button-secondary-text').innerHTML = optionValue }) } if (optionId === 'header_button_link') { updateAndSaveEl(selector, (el) => { el.querySelector('[class*="ct-button"]').href = optionValue }) } } ) ctEvents.on( 'ct:footer:sync:item:button', ({ itemId, optionId, optionValue }) => { const selector = `.ct-footer [data-id="${itemId}"]` const el = document.querySelector(selector) if (optionId === 'header_button_type') { const button = el.querySelector('[class*="ct-button"]') button.classList.remove('ct-button', 'ct-button-ghost') button.classList.add( optionValue === 'type-1' ? 'ct-button' : 'ct-button-ghost' ) } if (optionId === 'visibility') { responsiveClassesFor(optionValue, el) } if (optionId === 'header_button_size') { el.querySelector('[class*="ct-button"]').dataset.size = optionValue } if (optionId === 'header_button_text') { el.querySelector('[class*="ct-button"]').innerHTML = optionValue } if (optionId === 'header_button_link') { el.querySelector('[class*="ct-button"]').href = optionValue } } )
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0.07 |
proxy
|
phpinfo
|
Settings