File: //proc/thread-self/cwd/wp-content/themes/sydney/js/customize-controls.js
"use strict";
/* Customizer Back Button */
jQuery(document).ready(function ($) {
// Store the previous section in a global variable to use later
let previous_section = '';
$( '.sydney-to-widget-area-link' ).on( 'click', function(){
// Sections
if( $( this ).closest( '.control-section' ).length ) {
previous_section = $( this ).closest( '.control-section' ).attr( 'id' ).replace( 'sub-accordion-section-', '' );
}
} );
// Flag when hidden section content is active
let is_any_header_footer_section = false,
is_hidden_section_content = false,
is_header_builder_section = false,
is_header_builder_component_section = false,
is_footer_builder_section = false,
is_footer_builder_component_section = false;
$( document ).on( 'mouseover focus', '.customize-section-back', function(e){
if( ! $( '.control-section.open' ).length ) {
return false;
}
is_any_header_footer_section = $( '.control-section.open' ).attr( 'id' ).indexOf( '_hb_' ) || $( '.control-section.open' ).attr( 'id' ).indexOf( '_fb_' ) ? true : false;
is_hidden_section_content = $( '.control-section.open' ).hasClass( 'control-section-sydney-section-hidden' ) ? true : false;
is_header_builder_section = $( '.control-section.open' ).attr( 'id' ) === 'sub-accordion-section-sydney_section_hb_wrapper' ? true : false;
is_header_builder_component_section = $( '.control-section.open' ).attr( 'id' ).indexOf( 'sydney_section_hb_component_' ) !== -1 ? true : false;
is_footer_builder_section = $( '.control-section.open' ).attr( 'id' ) === 'sub-accordion-section-sydney_section_fb_wrapper' ? true : false;
is_footer_builder_component_section = $( '.control-section.open' ).attr( 'id' ).indexOf( 'sydney_section_fb_component_' ) !== -1 ? true : false;
// Pre-tag the builder's panel pane so core exits to the main interface
// in ONE animation: when the section collapses, core sees the panel's
// skip-transition class, collapses the panel itself in the same cycle,
// and transitions the section pane directly against the root pane
// (see Section.onChangeExpanded / _animateChangeExpanded in core).
// This must happen before the click, hence mouseover/focus.
if ( is_header_builder_section ) {
sydneyTagBuilderPanelForExit( 'sydney_panel_header', true );
}
if ( is_footer_builder_section ) {
sydneyTagBuilderPanelForExit( 'sydney_panel_footer', true );
}
} );
// Hover/focus without a click: undo the exit pre-tagging. A lingering
// skip-transition class is dangerous — any section collapse inside a
// skip-tagged panel makes core collapse the whole panel.
$( document ).on( 'mouseleave focusout', '.customize-section-back', function() {
sydneyTagBuilderPanelForExit( 'sydney_panel_header', false );
sydneyTagBuilderPanelForExit( 'sydney_panel_footer', false );
} );
function sydneyTagBuilderPanelForExit( panelId, tag ) {
var panel = wp.customize.panel( panelId );
if ( typeof panel === 'undefined' ) {
return;
}
panel.contentContainer.toggleClass( 'skip-transition', tag && panel.expanded() );
}
// Collapse a panel only after the section pane's slide-out transition has
// finished. Core collapses the section itself when the back button is
// clicked; starting the panel collapse while that animation is still
// running is a race that can leave the customizer pane blank. The section
// state is already false by the time we run, so a collapse completeCallback
// would fire immediately — we have to wait for the transition itself.
function sydneyCollapsePanelAfterSection( sectionId, panelId ) {
var section = wp.customize.section( sectionId );
var panel = wp.customize.panel( panelId );
if ( typeof section === 'undefined' || typeof panel === 'undefined' ) {
return;
}
var container = section.contentContainer;
var done = false;
function finish() {
if ( done ) {
return;
}
done = true;
container.off( 'transitionend', onTransitionEnd );
panel.collapse();
}
function onTransitionEnd( e ) {
// Ignore transitions bubbling up from children of the pane.
if ( e.target === container[ 0 ] ) {
finish();
}
}
container.on( 'transitionend', onTransitionEnd );
// Fallback: core's pane transition is 180ms; if transitionend never
// fires (e.g. reduced motion), still return to the main interface.
setTimeout( finish, 400 );
}
// Enter the builders straight from the main interface in ONE animation:
// replicate core's autoExpandSoleSection choreography (panel pane
// pre-tagged with current-panel + skip-transition) so the wrapper section
// expands directly against the root pane instead of sliding through the
// panel pane first.
var sydney_builder_wrappers = {
'sydney_section_hb_wrapper': 'sydney_panel_header',
'sydney_section_fb_wrapper': 'sydney_panel_footer'
};
$.each( sydney_builder_wrappers, function( sectionId, panelId ) {
wp.customize.section( sectionId, function( section ) {
var originalExpand = section.expand;
section.expand = function( params ) {
var panel = wp.customize.panel( panelId );
if ( typeof panel !== 'undefined' && ! panel.expanded() ) {
// Mirror the sibling collapse core performs on the normal
// panel-expand path we are skipping.
wp.customize.section.each( function( other ) {
if ( other.panel() !== panelId ) {
other.collapse( { duration: 0 } );
}
} );
wp.customize.panel.each( function( otherPanel ) {
if ( otherPanel.id !== panelId ) {
otherPanel.collapse( { duration: 0 } );
}
} );
// With current-panel pre-added, the panel expands without its
// own pane animation; the section then animates against the
// root pane (skip-transition, see _animateChangeExpanded).
panel.contentContainer.addClass( 'current-panel skip-transition' );
panel.contentContainer.closest( '.wp-full-overlay' ).addClass( 'in-sub-panel' );
panel.expand();
wp.customize.state( 'expandedPanel' ).set( panel );
// The tag must not outlive the expand animation: any section
// collapse inside a skip-tagged panel makes core collapse the
// whole panel. Exiting re-tags on back-button hover instead.
params = params || {};
var userCompleteCallback = params.completeCallback;
params.completeCallback = function() {
panel.contentContainer.removeClass( 'skip-transition' );
if ( userCompleteCallback ) {
userCompleteCallback();
}
};
}
return originalExpand.call( section, params );
};
} );
} );
// If hidden section content is active, focus on the previous section (from global variable)
$( document ).on( 'click keydown', '.customize-section-back', function(e){
if( e.keyCode && e.keyCode !== 13 && e.keyCode !== 27 ) {
return false;
}
// Enhanced logic for header panel navigation
// back button should return to main customizer instead of header panel sections
var current_panel = wp.customize.state('expandedPanel').get();
var current_section = wp.customize.state('expandedSection').get();
var $publishSettings = $('#sub-accordion-section-publish_settings');
var isPublishSettingsOpen = $publishSettings.hasClass('open');
// If publish settings is open and we're in header panel, close publish settings and collapse header panel
if(
isPublishSettingsOpen &&
current_panel &&
(
current_panel.id === 'sydney_panel_header' ||
current_panel.id === 'sydney_panel_footer'
)
) {
// Prevent the default behavior
e.preventDefault();
e.stopPropagation();
// Close the publish settings section first
wp.customize.section('publish_settings').collapse();
// Then collapse the header panel to return to main customizer
wp.customize.panel( 'sydney_panel_header' ).collapse();
// Reset flags and return early
is_any_header_footer_section = false;
is_header_builder_section = false;
is_header_builder_component_section = false;
is_footer_builder_section = false;
is_footer_builder_component_section = false;
is_hidden_section_content = false;
return false;
}
if( is_header_builder_section ) {
wp.customize.section( 'sydney_section_hb_wrapper' ).collapse();
sydneyCollapsePanelAfterSection( 'sydney_section_hb_wrapper', 'sydney_panel_header' );
}
if( is_footer_builder_section ) {
wp.customize.section( 'sydney_section_fb_wrapper' ).collapse();
sydneyCollapsePanelAfterSection( 'sydney_section_fb_wrapper', 'sydney_panel_footer' );
}
if( ! is_any_header_footer_section && ! is_footer_builder_component_section && ! is_header_builder_component_section && is_hidden_section_content && previous_section !== '' ) {
if ( typeof wp.customize.section( previous_section ) !== 'undefined' ) {
wp.customize.section( previous_section ).focus();
}
}
is_any_header_footer_section = false;
is_header_builder_section = false;
is_header_builder_component_section = false;
is_footer_builder_section = false;
is_footer_builder_component_section = false;
is_hidden_section_content = false;
} );
});
//Add spacing for CPT panels
jQuery( document ).ready(function($) {
var panels = $('li[id^="accordion-panel-sydney_panel_cpt_"]');
panels.first().css( 'margin-top', '10px' );
panels.last().css( 'margin-bottom', '10px' );
} );
jQuery( document ).ready( function() {
/* === Checkbox Multiple Control === */
jQuery( '.customize-control-checkbox-multiple input[type="checkbox"]' ).on(
'change',
function() {
checkbox_values = jQuery( this ).parents( '.customize-control' ).find( 'input[type="checkbox"]:checked' ).map(
function() {
return this.value;
}
).get().join( ',' );
jQuery( this ).parents( '.customize-control' ).find( 'input[type="hidden"]' ).val( checkbox_values ).trigger( 'change' );
}
);
} ); // jQuery( document ).ready
/* Typography */
jQuery(document).ready(function ($) {
"use strict";
var sydneyFontsCatalog = null;
var sydneyFontsRequest = null;
// One catalog request per customizer session, shared by all typography controls.
function sydneyFetchFontsCatalog() {
if (!sydneyFontsRequest) {
sydneyFontsRequest = $.ajax({
url: syd_data.fonts_rest_url,
method: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('X-WP-Nonce', syd_data.rest_nonce);
}
}).then(function (list) {
sydneyFontsCatalog = list;
return list;
});
}
return sydneyFontsRequest;
}
// Build the family select2 from the fetched catalog: saved font pre-selected,
// "(default)" entry prepended when the saved font is not in the catalog.
function sydneyPopulateFamilySelect($select, catalog) {
if ($select.data('sydney-populated')) {
return;
}
$select.data('sydney-populated', true);
var saved = $select.val();
var savedInCatalog = false;
var data = [];
$.each(catalog, function (i, font) {
if (font.family === saved) {
savedInCatalog = true;
}
data.push({ id: font.family, text: font.family });
});
if (saved && !savedInCatalog) {
data.unshift({ id: saved, text: saved + ' (default)' });
}
if ($select.hasClass('select2-hidden-accessible')) {
$select.select2('destroy');
}
$select.empty();
$select.select2({ data: data });
// Restore the selection in the UI without firing our change handlers.
$select.val(saved).trigger('change.select2');
}
function normalisePrimary(value) {
return 'regular' === value ? '400' : value;
}
function getFontVariants(fontFamily) {
if (!sydneyFontsCatalog) {
return null;
}
for (var i = 0; i < sydneyFontsCatalog.length; i++) {
if (sydneyFontsCatalog[i].family === fontFamily) {
return sydneyFontsCatalog[i];
}
}
return null;
}
function rebuildExtras($extras, variants, primaryValue, previouslyPicked) {
var primaryNormalised = normalisePrimary(primaryValue);
$extras.empty();
$.each(variants, function (i, variant) {
var variantNormalised = normalisePrimary(variant);
if (variantNormalised === primaryNormalised) {
return;
}
var isSelected = $.inArray(variant, previouslyPicked) !== -1 ||
$.inArray(variantNormalised, previouslyPicked) !== -1;
var $option = $('<option></option>').val(variant).html(variant);
if (isSelected) {
$option.attr('selected', 'selected');
}
$extras.append($option);
});
// Refresh select2 to reflect the new options.
if ($extras.hasClass('select2-hidden-accessible')) {
$extras.trigger('change.select2');
}
}
// Init Select2 on the family selector (renders the saved font only until the
// catalog arrives).
$('.google-fonts-list').each(function () {
if (!$(this).hasClass('select2-hidden-accessible')) {
$(this).select2();
}
});
// Init Select2 (multi) on the extras selector.
$('.google-fonts-extraweights-style').each(function () {
if (!$(this).hasClass('select2-hidden-accessible')) {
$(this).select2({
multiple: true,
placeholder: '',
width: '100%'
});
}
});
// Prefetch when a section containing a typography control is first expanded,
// then populate that control's family dropdowns.
wp.customize.bind('ready', function () {
wp.customize.control.each(function (control) {
if ('sydney-google_fonts' !== control.params.type) {
return;
}
var sectionId = control.section();
if (!sectionId) {
return;
}
wp.customize.section(sectionId, function (section) {
var prefetch = function (expanded) {
if (!expanded) {
return;
}
sydneyFetchFontsCatalog().then(function (catalog) {
control.container.find('.google-fonts-list').each(function () {
sydneyPopulateFamilySelect($(this), catalog);
});
});
};
prefetch(section.expanded());
section.expanded.bind(prefetch);
});
});
});
// Fallback trigger + loading state: opening the dropdown before the catalog
// arrived starts/awaits the fetch and reopens once populated.
$(document).on('select2:opening', '.google-fonts-list', function () {
var $select = $(this);
if ($select.data('sydney-populated') || $select.data('sydney-loading')) {
return;
}
$select.data('sydney-loading', true);
$select.append($('<option></option>').prop('disabled', true).text(syd_data.loading_fonts_text));
sydneyFetchFontsCatalog().then(function (catalog) {
var select2Instance = $select.data('select2');
var wasOpen = select2Instance && select2Instance.isOpen();
sydneyPopulateFamilySelect($select, catalog);
if (wasOpen) {
$select.select2('open');
}
});
});
// Family change: rebuild primary + extras, update category. (Delegated: works
// for controls rendered at any time.)
$(document).on('change', '.google-fonts-list', function () {
var $container = $(this).closest('.google_fonts_select_control');
var $primary = $container.find('.google-fonts-regularweight-style');
var $extras = $container.find('.google-fonts-extraweights-style');
var selectedFont = $(this).val();
var font = getFontVariants(selectedFont);
if (!font) {
return;
}
// Remember previously picked extras so we can preserve them when possible.
var previousExtras = $extras.val() || [];
// Rebuild primary dropdown (all variants — italics belong here too).
$primary.empty();
$.each(font.variants, function (i, variant) {
$primary.append($('<option></option>').val(variant).html(variant));
});
// Pick a sensible default for the primary.
if ($primary.find('option[value="regular"]').length > 0) {
$primary.val('regular');
} else if ($primary.find('option[value="400"]').length > 0) {
$primary.val('400');
} else if ($primary.find('option[value="300"]').length > 0) {
$primary.val('300');
}
// Rebuild extras dropdown, preserving previously-picked variants that still exist.
rebuildExtras($extras, font.variants, $primary.val(), previousExtras);
// Update category.
$container.find('.google-fonts-category').val(font.category);
sydneyGetAllSelects($container);
});
// Primary change: rebuild extras so the new primary is excluded and the
// previous primary becomes selectable again. Awaits the catalog so a weight
// change made before any dropdown was opened still rebuilds correctly.
$(document).on('change', '.google-fonts-regularweight-style', function () {
var $this = $(this);
var $container = $this.closest('.google_fonts_select_control');
var $extras = $container.find('.google-fonts-extraweights-style');
var $family = $container.find('.google-fonts-list');
sydneyFetchFontsCatalog().then(function () {
var font = getFontVariants($family.val());
if (!font) {
return;
}
var previousExtras = $extras.val() || [];
rebuildExtras($extras, font.variants, $this.val(), previousExtras);
sydneyGetAllSelects($container);
});
});
// Catch-all sync: any change inside the control writes the JSON payload.
$(document).on('change', '.google_fonts_select_control select', function () {
sydneyGetAllSelects($(this).closest('.google_fonts_select_control'));
});
function sydneyGetAllSelects($element) {
var extras = $element.find('.google-fonts-extraweights-style').val();
if (!extras) {
extras = [];
}
var selectedFont = {
font: $element.find('.google-fonts-list').val(),
regularweight: $element.find('.google-fonts-regularweight-style').val(),
extraweights: extras,
category: $element.find('.google-fonts-category').val()
};
// Important! Make sure to trigger change event so Customizer knows it has to save the field.
$element.find('.customize-control-google-font-selection').val(JSON.stringify(selectedFont)).trigger('change');
}
});
jQuery(document).ready(function ($) {
"use strict";
let clickFlag = false;
$(document).on('click', '.sydney-devices-preview button', function () {
if (clickFlag) {
clickFlag = false;
return false;
}
clickFlag = true;
// Determine the selected device based on class name
let device = $(this).hasClass('preview-desktop')
? 'desktop'
: $(this).hasClass('preview-tablet')
? 'tablet'
: 'mobile';
// Update preview classes
$('.sydney-devices-preview')
.find('.preview-desktop, .preview-tablet, .preview-mobile')
.removeClass('active')
.end()
.find('.preview-' + device)
.addClass('active');
// Update font-size classes
$('.font-size-desktop, .font-size-tablet, .font-size-mobile')
.removeClass('active')
.filter('.font-size-' + device)
.addClass('active');
// Update responsive control classes
$('.responsive-control-desktop, .responsive-control-tablet, .responsive-control-mobile')
.removeClass('active')
.filter('.responsive-control-' + device)
.addClass('active');
// Trigger the corresponding device button in the footer overlay
$('.wp-full-overlay-footer .devices button[data-device="' + device + '"]').trigger('click');
});
$(' .wp-full-overlay-footer .devices button ').on('click', function () {
if (clickFlag) {
clickFlag = false;
return false;
}
var device = $(this).attr('data-device');
$('.control-section.open .sydney-devices-preview').find('.preview-' + device).trigger('click');
});
});
/**
* Repeater
*/
jQuery(document).ready(function ($) {
"use strict"; // Update the values for all our input fields and initialise the sortable repeater
$('.sydney-sortable_repeater_control').each(function () {
// If there is an existing customizer value, populate our rows
var defaultValuesArray = $(this).find('.customize-control-sortable-repeater').val().split(',');
var numRepeaterItems = defaultValuesArray.length;
if (numRepeaterItems > 0) {
// Add the first item to our existing input field
$(this).find('.repeater-input').val(defaultValuesArray[0]); // Create a new row for each new value
if (numRepeaterItems > 1) {
var i;
for (i = 1; i < numRepeaterItems; ++i) {
sydneyAppendRow($(this), defaultValuesArray[i]);
}
}
}
}); // Make our Repeater fields sortable
$(this).find('.sydney-sortable_repeater.sortable').sortable({
update: function update(event, ui) {
sydneyGetAllInputs($(this).parent());
}
}); // Remove item starting from it's parent element
$('.sydney-sortable_repeater.sortable').on('click', '.customize-control-sortable-repeater-delete', function (event) {
event.preventDefault();
var numItems = $(this).parent().parent().find('.repeater').length;
if (numItems > 1) {
$(this).parent().slideUp('fast', function () {
var parentContainer = $(this).parent().parent();
$(this).remove();
sydneyGetAllInputs(parentContainer);
});
} else {
$(this).parent().find('.repeater-input').val('');
sydneyGetAllInputs($(this).parent().parent().parent());
}
}); // Add new item
$('.customize-control-sortable-repeater-add').click(function (event) {
event.preventDefault();
sydneyAppendRow($(this).parent());
sydneyGetAllInputs($(this).parent());
}); // Refresh our hidden field if any fields change
$('.sydney-sortable_repeater.sortable').change(function () {
sydneyGetAllInputs($(this).parent());
}); // Add https:// to the start of the URL if it doesn't have it
$('.sydney-sortable_repeater.sortable').on('blur', '.repeater-input', function () {
var url = $(this);
var val = url.val();
if (val && !val.match(/^.+:\/\/.*/)) {
// Important! Make sure to trigger change event so Customizer knows it has to save the field
url.val('https://' + val).trigger('change');
}
}); // Append a new row to our list of elements
function sydneyAppendRow($element) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
var newRow = '<div class="repeater" style="display:none"><input type="text" value="' + defaultValue + '" class="repeater-input" placeholder="https://" /><span class="dashicons dashicons-menu"></span><a class="customize-control-sortable-repeater-delete" href="#"><span class="dashicons dashicons-no-alt"></span></a></div>';
$element.find('.sortable').append(newRow);
$element.find('.sortable').find('.repeater:last').slideDown('slow', function () {
$(this).find('input').focus();
});
} // Get the values from the repeater input fields and add to our hidden field
function sydneyGetAllInputs($element) {
var inputValues = $element.find('.repeater-input').map(function () {
return $(this).val();
}).toArray(); // Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)
$element.find('.customize-control-sortable-repeater').val(inputValues); // Important! Make sure to trigger change event so Customizer knows it has to save the field
$element.find('.customize-control-sortable-repeater').trigger('change');
}
});
/**
* Alpha color picker
*/
/* Color Control */
jQuery(document).ready(function ($) {
if ('undefined' === typeof Pickr) {
return;
}
// Populate dropdowns already in the DOM at boot (PHP-rendered controls).
// Converted controls populate in their ready() when they render.
$('.global-colors-dropdown').each(function () {
wp.customize.sydneyPopulateGlobalDropdown($(this));
});
// Select a global color from the dropdown (delegated: dropdowns render on section expand)
$(document).on('click', '.global-colors-dropdown .global-color', function () {
var $this = $(this);
var element = $this.parent().data('element');
var $globalInput = $this.parent().next('.sydney-connected-global');
//add active class to dashicon
$this.parent().prev('.dashicons').addClass('active');
//add active class
$this.toggleClass('active').siblings().removeClass('active');
if ( $this.hasClass('active') ) {
$globalInput.val($this.data('global-setting'));
sydneyChangeElementColors(element, $this.data('color'));
} else {
$globalInput.val('');
$this.parent().prev('.dashicons').removeClass('active');
}
$globalInput.trigger('change');
});
//toggle the swatches
$(document).on('click', '.sydney-global-control .dashicons-admin-site-alt3', function () {
$(this).next('.global-colors-dropdown').toggleClass('show');
//close other swatches
$('.global-colors-dropdown').not($(this).next('.global-colors-dropdown')).removeClass('show');
});
//close the swatches when clicking outside
$(document).on('click', function (e) {
if ( !$(e.target).closest('.sydney-global-control').length ) {
$('.global-colors-dropdown').removeClass('show');
}
});
// Lazy Pickr init (delegated: swatches render on section expand)
$(document).on('click', '.sydney-color-control .sydney-color-picker', function () {
var $colorPicker = $(this);
if ($colorPicker.data('pickr')) {
return;
}
var $colorControl = $colorPicker.closest('.sydney-color-control');
var $colorInput = $colorControl.find('.sydney-color-input');
var customizeControl = wp.customize($colorInput.data('customize-setting-link'));
var pickrSeedColor = $colorPicker.data('display-color') || $colorInput.val() || '';
var pickr = new Pickr({
el: $colorPicker.get(0),
container: 'body',
theme: 'sydney',
default: pickrSeedColor,
//swatches: [],
position: 'bottom-end',
appClass: 'sydney-pcr-app',
sliders: 'h',
useAsButton: true,
components: {
hue: true,
preview: true,
opacity: true,
interaction: {
input: true,
clear: true,
},
},
i18n: {
'btn:clear': 'Default',
},
});
pickr.on('change', function (color) {
var colorCode;
if (color.a === 1) {
pickr.setColorRepresentation('HEX');
colorCode = color.toHEXA().toString(0);
} else {
pickr.setColorRepresentation('RGBA');
colorCode = color.toRGBA().toString(0);
}
$colorPicker.css({ 'background-color': colorCode });
$colorInput.val(colorCode);
customizeControl.set(colorCode);
});
// Disconnect global if manually changed
pickr.on('change', function (color, source) {
if ( 'slider' === source ) {
$colorPicker.parent().prev('.sydney-global-control').find('.dashicons').removeClass('active');
$colorPicker.parent().prev('.sydney-global-control').find('.sydney-connected-global').val('').trigger('change');
$colorPicker.parent().prev('.sydney-global-control').find('.global-color').removeClass('active');
}
});
pickr.on('clear', function () {
var defaultColor = $colorPicker.data('default-color');
if (defaultColor) {
pickr.setColor(defaultColor);
} else {
$colorPicker.css({ 'background-color': 'white' });
$colorInput.val('');
customizeControl.set('');
}
});
$colorPicker.data('pickr', pickr);
setTimeout(function () {
pickr.show();
});
});
});
/**
* Tab control
*/
jQuery(document).ready(function ($) {
"use strict";
$('.customize-control-sydney-tab-control').each(function () {
$(this).parent().find('li').not('.section-meta').not('.customize-control-sydney-tab-control').addClass('sydney-hide-control');
var generals = $(this).find('.control-tab-general').data('connected');
$.each(generals, function (i, v) {
$(v).removeClass('sydney-hide-control'); //show
});
$(this).find('.control-tab').on('click', function () {
var visibles = $(this).data('connected');
$(this).addClass('active');
$(this).siblings().removeClass('active');
$(this).parent().parent().parent().find('li').not('.section-meta').not('.customize-control-sydney-tab-control').addClass('sydney-hide-control');
$.each(visibles, function (i, v) {
$(v).removeClass('sydney-hide-control'); //show
});
});
});
});
/**
* TinyMCE control
*/
jQuery(document).ready(function ($) {
"use strict";
$('.customize-control-tinymce-editor').each(function () {
// Get the toolbar strings that were passed from the PHP Class
var tinyMCEToolbar1String = _wpCustomizeSettings.controls[$(this).attr('id')].sydneytb1;
var tinyMCEToolbar2String = _wpCustomizeSettings.controls[$(this).attr('id')].sydneytb2;
var tinyMCEMediaButtons = _wpCustomizeSettings.controls[$(this).attr('id')].sydneytmb;
wp.editor.initialize($(this).attr('id'), {
tinymce: {
wpautop: true,
toolbar1: tinyMCEToolbar1String,
toolbar2: tinyMCEToolbar2String
},
quicktags: true,
mediaButtons: true
});
});
$(document).on('tinymce-editor-init', function (event, editor) {
editor.on('change', function (e) {
tinyMCE.triggerSave();
$('#' + editor.id).trigger('change');
});
});
});
/**
* Footer widget areas links
*/
jQuery(document).ready(function ($) {
// Value-driven (was a DOM read of the footer_widget_areas control, which
// no longer has DOM at boot now that radio-images render on section expand).
function toggleLinks(val) {
if ('3' === val || 'col3-bigleft' === val || 'col3-bigright' === val) {
$('.footer-widget-area-link-1, .footer-widget-area-link-2, .footer-widget-area-link-3').show();
$('.footer-widget-area-link-4').hide();
} else if ('4' === val || 'col4-bigleft' === val || 'col4-bigright' === val) {
$('.footer-widget-area-link-1, .footer-widget-area-link-2, .footer-widget-area-link-3, .footer-widget-area-link-4').show();
} else if ('2' === val || 'col2-bigleft' === val || 'col2-bigright' === val) {
$('.footer-widget-area-link-1, .footer-widget-area-link-2').show();
$('.footer-widget-area-link-4, .footer-widget-area-link-3').hide();
} else if ('1' === val) {
$('.footer-widget-area-link-1').show();
$('.footer-widget-area-link-4, .footer-widget-area-link-2, .footer-widget-area-link-3').hide();
} else {
$('.footer-widget-area-link-1, .footer-widget-area-link-2, .footer-widget-area-link-3, .footer-widget-area-link-4').hide();
}
}
wp.customize('footer_widget_areas', function (setting) {
toggleLinks(setting.get());
setting.bind(toggleLinks);
});
});
/**
* Palettes
*/
wp.customize('color_palettes', function (control) {
var palettes = jQuery('#customize-control-color_palettes').find('.radio-buttons').data('palettes');
control.bind(function () {
var palette = control.get(); //Color 1 Button color, Link color
var elements1 = ['custom_color1', 'scrolltop_bg_color', 'button_background_color', 'button_border_color', 'color_link_default'];
for (var _i = 0, _elements = elements1; _i < _elements.length; _i++) {
var element = _elements[_i];
wp.customize(element).set(palettes[palette][0]);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', palettes[palette][0]);
} //Color 2 Hover color for - Button, Headings, Titles, Text links, Nav links
var elements2 = ['custom_color2', 'footer_widgets_links_hover_color', 'scrolltop_bg_color_hover', 'button_background_color_hover', 'button_border_color_hover', 'color_link_hover'];
for (var _i2 = 0, _elements2 = elements2; _i2 < _elements2.length; _i2++) {
var _element = _elements2[_i2];
wp.customize(_element).set(palettes[palette][1]);
jQuery('#customize-control-' + _element).find('.wp-color-result').css('background-color', palettes[palette][1]);
} //Color 3 Heading (1-6), Small text, Nav links, Site title,
var elements3 = ['single_post_title_color', 'custom_color3', 'main_header_submenu_color', 'offcanvas_menu_color', 'mobile_header_color', 'footer_widgets_title_color', 'single_product_title_color', 'color_forms_text', 'shop_product_product_title', 'loop_post_meta_color', 'loop_post_title_color', 'main_header_color', 'site_title_color', 'site_description_color', 'color_heading_1', 'color_heading_2', 'color_heading_3', 'color_heading_4', 'color_heading_5', 'color_heading_6'];
for (var _i3 = 0, _elements3 = elements3; _i3 < _elements3.length; _i3++) {
var _element2 = _elements3[_i3];
wp.customize(_element2).set(palettes[palette][2]);
jQuery('#customize-control-' + _element2).find('.wp-color-result').css('background-color', palettes[palette][2]);
} //Color 4 Paragraph, Paragraph small, Breadcrums, Icons
var elements4 = ['custom_color4', 'footer_widgets_links_color', 'footer_widgets_text_color', 'color_body_text', 'footer_credits_text_color', 'color_forms_placeholder'];
for (var _i4 = 0, _elements4 = elements4; _i4 < _elements4.length; _i4++) {
var _element3 = _elements4[_i4];
wp.customize(_element3).set(palettes[palette][3]);
jQuery('#customize-control-' + _element3).find('.wp-color-result').css('background-color', palettes[palette][3]);
} //Color 5 Input, tag borders
var elements5 = ['custom_color5', 'color_forms_borders'];
for (var _i5 = 0, _elements5 = elements5; _i5 < _elements5.length; _i5++) {
var _element4 = _elements5[_i5];
wp.customize(_element4).set(palettes[palette][4]);
jQuery('#customize-control-' + _element4).find('.wp-color-result').css('background-color', palettes[palette][4]);
} //Color 6 Footer background, Subtle backgrounds
var elements6 = ['custom_color6', 'footer_widgets_background', 'footer_credits_background', 'content_cards_background'];
for (var _i6 = 0, _elements6 = elements6; _i6 < _elements6.length; _i6++) {
var _element5 = _elements6[_i6];
wp.customize(_element5).set(palettes[palette][5]);
jQuery('#customize-control-' + _element5).find('.wp-color-result').css('background-color', palettes[palette][5]);
} //Color 7 Default background, Text on dark BG
var elements7 = ['custom_color7', 'background_color', 'button_color', 'button_color_hover', 'scrolltop_color', 'scrolltop_color_hover', 'color_forms_background'];
for (var _i7 = 0, _elements7 = elements7; _i7 < _elements7.length; _i7++) {
var _element6 = _elements7[_i7];
wp.customize(_element6).set(palettes[palette][6]);
jQuery('#customize-control-' + _element6).find('.wp-color-result').css('background-color', palettes[palette][6]);
} //Color 8 header background
var elements8 = ['custom_color8', 'main_header_submenu_background', 'main_header_background', 'main_header_bottom_background', 'mobile_header_background', 'offcanvas_menu_background'];
for (var _i8 = 0, _elements8 = elements8; _i8 < _elements8.length; _i8++) {
var _element7 = _elements8[_i8];
wp.customize(_element7).set(palettes[palette][7]);
jQuery('#customize-control-' + _element7).find('.wp-color-result').css('background-color', palettes[palette][7]);
}
});
});
/**
* Custom palette
*/
wp.customize.bind('ready', function () {
wp.customize('custom_color1', function (control) {
control.bind(function (value) {
var elements1 = ['scrolltop_bg_color', 'button_background_color', 'button_border_color', 'color_link_default'];
for (var _i9 = 0, _elements9 = elements1; _i9 < _elements9.length; _i9++) {
var element = _elements9[_i9];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color2', function (control) {
control.bind(function (value) {
var elements2 = ['footer_widgets_links_hover_color', 'scrolltop_bg_color_hover', 'button_background_color_hover', 'button_border_color_hover', 'color_link_hover'];
for (var _i10 = 0, _elements10 = elements2; _i10 < _elements10.length; _i10++) {
var element = _elements10[_i10];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color3', function (control) {
control.bind(function (value) {
var elements3 = ['main_header_submenu_color', 'offcanvas_menu_color', 'mobile_header_color', 'footer_widgets_title_color', 'single_product_title_color', 'color_forms_text', 'shop_product_product_title', 'loop_post_meta_color', 'loop_post_title_color', 'main_header_color', 'site_title_color', 'site_description_color', 'color_heading_1', 'color_heading_2', 'color_heading_3', 'color_heading_4', 'color_heading_5', 'color_heading_6'];
for (var _i11 = 0, _elements11 = elements3; _i11 < _elements11.length; _i11++) {
var element = _elements11[_i11];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color4', function (control) {
control.bind(function (value) {
var elements4 = ['footer_widgets_links_color', 'footer_widgets_text_color', 'color_body_text', 'footer_credits_text_color', 'color_forms_placeholder'];
for (var _i12 = 0, _elements12 = elements4; _i12 < _elements12.length; _i12++) {
var element = _elements12[_i12];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color5', function (control) {
control.bind(function (value) {
var elements5 = ['color_forms_borders'];
for (var _i13 = 0, _elements13 = elements5; _i13 < _elements13.length; _i13++) {
var element = _elements13[_i13];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color6', function (control) {
control.bind(function (value) {
var elements6 = ['footer_widgets_background', 'footer_credits_background', 'content_cards_background'];
for (var _i14 = 0, _elements14 = elements6; _i14 < _elements14.length; _i14++) {
var element = _elements14[_i14];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color7', function (control) {
control.bind(function (value) {
var elements7 = ['background_color', 'button_color', 'button_color_hover', 'scrolltop_color', 'scrolltop_color_hover', 'color_forms_background'];
for (var _i15 = 0, _elements15 = elements7; _i15 < _elements15.length; _i15++) {
var element = _elements15[_i15];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
wp.customize('custom_color8', function (control) {
control.bind(function (value) {
var elements8 = ['main_header_submenu_background', 'main_header_background', 'main_header_bottom_background', 'mobile_header_background', 'offcanvas_menu_background'];
for (var _i16 = 0, _elements16 = elements8; _i16 < _elements16.length; _i16++) {
var element = _elements16[_i16];
wp.customize(element).set(value);
jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
}
});
});
});
/**
* Move color picker text field in popup
*/
jQuery(document).ready(function ($) {
$('.wp-picker-input-wrap').each(function () {
$(this).prependTo($(this).next('.wp-picker-holder'));
});
});
/**
* Transform palettes radio into dropdown
*/
jQuery(document).ready(function ($) {
var saved = $('.saved-palette');
$('.saved-palette').on('click', function () {
$('.palette-radio-buttons').toggleClass('open');
});
$('.palette-radio-buttons').find('.palette').on('click', function () {
saved.empty();
$('.palette-radio-buttons').removeClass('open');
var clone = $(this).parent().clone();
clone.unwrap().appendTo(saved).find('input').remove();
});
});
/**
* Accordion control
*/
jQuery(document).ready(function ($) {
var Sydney_Accordion = {
init: function init() {
this.firstTime = true;
if (!this.initialized) {
this.events();
}
this.initialized = true;
},
events: function events() {
var self = this; // Toggle accordion
$(document).on('click', '.sydney-accordion-title', function () {
var $this = $(this);
if ($(this).hasClass('expanded')) {
self.showOrHide($(this), 'hide');
$(this).removeClass('expanded').addClass('collapse');
setTimeout(function () {
$this.removeClass('collapse');
}, 300);
}
if (!$(this).hasClass('collapse')) {
// Open one accordion item per time
$('.sydney-accordion-item').addClass('sydney-accordion-hide');
$('.sydney-accordion-title').removeClass('expanded'); // Show accordion content
self.showOrHide($(this), 'show');
$this.addClass('expanded');
}
}); // Mount the accordion when enter in the section (with accordions inside)
// Also used to collapse all accordions when navigating between others tabs
$(document).on('click', '.control-section', function (e) {
var $section = $('.control-section.open');
if (self.firstTime && $section.find('.sydney-accordion-title').length) {
$section.find('.sydney-accordion-title').each(function () {
self.showOrHide($(this), 'hide');
$(this).removeClass('expanded');
self.firstTime = false;
});
}
}); // Reset the first time
$(document).on('click', '.customize-section-back', function () {
self.firstTime = true;
});
return this;
},
showOrHide: function showOrHide($this, status) {
var current = '';
current = $this.closest('.customize-control').next();
var elements = [];
if (current.attr('id') == 'customize-control-' + $this.data('until')) {
elements.push(current[0].id);
} else {
while (current.attr('id') != 'customize-control-' + $this.data('until')) {
elements.push(current[0].id);
current = current.next();
}
}
if (elements.length >= 1) {
elements.push(current[0].id);
}
for (var i = 0; i < elements.length; i++) {
// Identify accordion items
$('#' + elements[i]).addClass('sydney-accordion-item active'); // Hide or show the accordion content
if (status == 'hide') {
$('#' + elements[i]).addClass('sydney-accordion-hide');
} else {
$('#' + elements[i]).removeClass('sydney-accordion-hide');
} // Identify first accordion item
if (i == 0) {
$('#' + elements[i]).addClass('sydney-accordion-first-item');
} // Identify last accordion item
if (i == elements.length - 1 && elements.length > 1 || elements.length == 1) {
$('#' + elements[i]).addClass('sydney-accordion-last-item');
}
}
return this;
}
};
$(document).ready(function () {
Sydney_Accordion.init();
});
});
/**
* Controls a11y
*/
jQuery(document).ready(function ($) {
"use strict";
// Delegated: toggle control DOM is rendered on section expand
$(document).on('keydown', '.customize-control-sydney-toggle-control label', function (event) {
var enterPressed = (event.key === 'Enter' || event.keyCode === 13);
if (!enterPressed) {
return;
}
$( this ).click();
});
// Delegated: radio-buttons control DOM is rendered on section expand
$(document).on('keydown', '.customize-control-sydney-radio-buttons label', function (event) {
var enterPressed = (event.key === 'Enter' || event.keyCode === 13);
if (!enterPressed) {
return;
}
$( this ).click();
});
});
/**
* Display Conditions Control
*/
jQuery(document).ready(function ($) {
$(document).on('sydney-display-conditions-select2-initalize', function (event, item) {
var $item = $(item);
var $control = $item.closest('.sydney-display-conditions-control');
var $typeSelectWrap = $item.find('.sydney-display-conditions-select2-type');
var $typeSelect = $typeSelectWrap.find('select');
var $conditionSelectWrap = $item.find('.sydney-display-conditions-select2-condition');
var $conditionSelect = $conditionSelectWrap.find('select');
var $idSelectWrap = $item.find('.sydney-display-conditions-select2-id');
var $idSelect = $idSelectWrap.find('select');
$typeSelect.select2({
width: '100%',
minimumResultsForSearch: -1
});
$typeSelect.on('select2:select', function (event) {
$typeSelectWrap.attr('data-type', event.params.data.id);
});
$conditionSelect.select2({
width: '100%'
});
$conditionSelect.on('select2:select', function (event) {
var $element = $(event.params.data.element);
if ($element.data('ajax')) {
$idSelectWrap.removeClass('hidden');
} else {
$idSelectWrap.addClass('hidden');
}
$idSelect.val(null).trigger('change');
});
var isAjaxSelected = $conditionSelect.find(':selected').data('ajax');
if (isAjaxSelected) {
$idSelectWrap.removeClass('hidden');
}
$idSelect.select2({
width: '100%',
placeholder: '',
allowClear: true,
minimumInputLength: 1,
ajax: {
url: ajaxurl,
dataType: 'json',
delay: 250,
cache: true,
data: function data(params) {
return {
action: 'sydney_display_conditions_select_ajax',
term: params.term,
nonce: syd_data.ajax_nonce,
source: $conditionSelect.val()
};
},
processResults: function processResults(response, params) {
if (response.success) {
return {
results: response.data
};
}
return {};
}
}
});
});
$(document).on('click', '.sydney-display-conditions-modal-toggle', function (event) {
event.preventDefault();
var $button = $(this);
var template = wp.template('sydney-display-conditions-template');
var $control = $button.closest('.sydney-display-conditions-control');
var $modal = $control.find('.sydney-display-conditions-modal');
if (!$modal.data('initialized')) {
$control.append(template($control.data('condition-settings')));
var $items = $control.find('.sydney-display-conditions-modal-content-list-item').not('.hidden');
if ($items.length) {
$items.each(function () {
$(document).trigger('sydney-display-conditions-select2-initalize', this);
});
}
$modal = $control.find('.sydney-display-conditions-modal');
$modal.data('initialized', true);
$modal.addClass('open');
} else {
$modal.toggleClass('open');
}
});
$(document).on('click', '.sydney-display-conditions-modal', function (event) {
event.preventDefault();
var $modal = $(this);
if ($(event.target).is($modal)) {
$modal.removeClass('open');
}
});
$(document).on('click', '.sydney-display-conditions-modal-add', function (event) {
event.preventDefault();
var $button = $(this);
var $control = $button.closest('.sydney-display-conditions-control');
var $modal = $control.find('.sydney-display-conditions-modal');
var $list = $modal.find('.sydney-display-conditions-modal-content-list');
var $item = $modal.find('.sydney-display-conditions-modal-content-list-item').first().clone();
var conditionGroup = $button.data('condition-group');
$item.removeClass('hidden');
$item.find('.sydney-display-conditions-select2-condition').not('[data-condition-group="' + conditionGroup + '"]').remove();
$list.append($item);
$(document).trigger('sydney-display-conditions-select2-initalize', $item);
});
$(document).on('click', '.sydney-display-conditions-modal-remove', function (event) {
event.preventDefault();
var $item = $(this).closest('.sydney-display-conditions-modal-content-list-item');
$item.remove();
});
$(document).on('click', '.sydney-display-conditions-modal-save', function (event) {
event.preventDefault();
var data = [];
var $button = $(this);
var $control = $button.closest('.sydney-display-conditions-control');
var $modal = $control.find('.sydney-display-conditions-modal');
var $textarea = $control.find('.sydney-display-conditions-textarea');
var $items = $modal.find('.sydney-display-conditions-modal-content-list-item').not('.hidden');
$items.each(function () {
var $item = $(this);
data.push({
type: $item.find('select[name="type"]').val(),
condition: $item.find('select[name="condition"]').val(),
id: $item.find('select[name="id"]').val()
});
});
$textarea.val(JSON.stringify(data)).trigger('change');
});
});
//activate/deactivate header settings
jQuery(document).ready(function ($) {
var sticky_controls = [ 'header_divider_1', 'main_header_settings_title', 'header_container', 'enable_sticky_header', 'sticky_header_type', 'transparent_header' ];
var menu_pos = [ 'main_header_menu_position' ];
wp.customize('header_layout_desktop', function (value) {
value.bind(function (newval) {
$.each(sticky_controls, function (index, setting) {
var control = wp.customize.control(setting);
if (control) {
if (newval === 'header_layout_6' || newval === 'header_layout_7') {
control.deactivate();
} else {
control.activate();
}
}
});
});
value.bind(function (newval) {
$.each(menu_pos, function (index, setting) {
if (newval === 'header_layout_2' ) {
wp.customize.control(setting).activate();
} else {
wp.customize.control(setting).deactivate();
}
});
});
value.bind(function (newval) {
if (newval === 'header_layout_1' || newval === 'header_layout_2' ) {
wp.customize.control('header_components_l1').activate();
} else {
wp.customize.control('header_components_l1').deactivate();
}
});
value.bind(function (newval) {
if (newval === 'header_layout_3' ) {
wp.customize.control('header_components_l3left').activate();
wp.customize.control('header_components_l3right').activate();
} else {
wp.customize.control('header_components_l3left').deactivate();
wp.customize.control('header_components_l3right').deactivate();
}
} );
value.bind(function (newval) {
if (newval === 'header_layout_4' ) {
wp.customize.control('header_components_l4top').activate();
wp.customize.control('header_components_l4bottom').activate();
} else {
wp.customize.control('header_components_l4top').deactivate();
wp.customize.control('header_components_l4bottom').deactivate();
}
} );
value.bind(function (newval) {
if (newval === 'header_layout_5' ) {
wp.customize.control('header_components_l5topleft').activate();
wp.customize.control('header_components_l5topright').activate();
wp.customize.control('header_components_l5bottom').activate();
} else {
wp.customize.control('header_components_l5topleft').deactivate();
wp.customize.control('header_components_l5topright').deactivate();
wp.customize.control('header_components_l5bottom').deactivate();
}
} );
});
} );
wp.customize('enable_sticky_header', function (value) {
value.bind(function (newval) {
if (newval === true) {
wp.customize.control('sticky_header_type').activate();
wp.customize.control('sydney_section_hb_wrapper__header_builder_sticky_row').activate();
wp.customize.control('enable_sticky_mobile_header_hb').activate();
} else {
wp.customize.control('sticky_header_type').deactivate();
wp.customize.control('sydney_section_hb_wrapper__header_builder_sticky_row').deactivate();
wp.customize.control('enable_sticky_mobile_header_hb').deactivate();
}
});
} );
//Activate menu typography options without refresh
jQuery(document).ready(function ($) {
wp.customize('enable_top_menu_typography', function (value) {
var controls = ['sydney_menu_font', 'menu_items_text_transform', 'sydney_menu_font_size', 'sydney_header_menu_adobe_font'];
value.bind(function (newval) {
if (newval === true) {
$.each(controls, function (index, setting) {
wp.customize.control(setting).activate();
});
} else {
$.each(controls, function (index, setting) {
wp.customize.control(setting).deactivate();
});
}
});
} );
});
//Activate blog columns without refresh
jQuery(document).ready(function ($) {
wp.customize('blog_layout', function (value) {
value.bind(function (newval) {
if (newval === 'layout3' || newval === 'layout5' || newval === 'layout7' ) {
wp.customize.control('archives_grid_columns').activate();
} else {
wp.customize.control('archives_grid_columns').deactivate();
}
} );
value.bind(function (newval) {
if (newval === 'layout4' ) {
wp.customize.control('archive_list_image_placement').activate();
} else {
wp.customize.control('archive_list_image_placement').deactivate();
}
} );
value.bind(function (newval) {
if (newval === 'layout4' || newval === 'layout6' ) {
wp.customize.control('archives_list_vertical_alignment').activate();
wp.customize.control('archive_featured_image_size').activate();
} else {
wp.customize.control('archives_list_vertical_alignment').deactivate();
wp.customize.control('archive_featured_image_size').deactivate();
}
} );
} );
} );
//Upsell in the general panel
jQuery(document).ready(function ($) {
var hasLocalized = (typeof window.syd_data !== 'undefined' && typeof window.syd_data.customizer_upgrade_link_with_utm_content_markup === 'string');
var baseUpgrade = hasLocalized ? decodeURIComponent(window.syd_data.customizer_upgrade_link_with_utm_content_markup) : '';
var generalFeaturesUrl = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'general_panel_features') + '#features' : 'https://athemes.com/sydney-upgrade/#features?utm_source=theme_customizer_general_panel&utm_medium=sydney_customizer&utm_campaign=Sydney';
var generalButtonUrl = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'general_panel_button') : 'https://athemes.com/sydney-upgrade/?utm_source=theme_customizer_general_panel&utm_medium=sydney_customizer&utm_campaign=Sydney';
var upsell = $('<div class="sydney-upsell-feature-wrapper" style="margin:5px 15px 15px;">' +
'<h3 style="max-width:100%;"><em>Take your site to the next level with Sydney Pro!</em></h3><p>You’ll get access to:</p>' +
'<ul class="sydney-upsell-features">' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Templates Builder</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Breadcrumbs</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Unlimited Sidebars</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Modal Popup</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Live Chat module</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Offcanvas Content</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Mailchimp support</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span><a target="_blank" href="' + generalFeaturesUrl + '">…and many more premium features</a></li>' +
'</ul><p><a href="' + generalButtonUrl + '" role="button" class="button-secondary deep-upsell-button button" target="_blank">Upgrade to Sydney Pro</a></p></div>')
upsell.appendTo('#sub-accordion-panel-sydney_panel_general');
var wooFeaturesUrl = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'woocommerce_features') + '#features' : 'https://athemes.com/sydney-upgrade/#features?utm_source=theme_customizer_woocommerce&utm_medium=sydney_customizer&utm_campaign=Sydney';
var wooButtonUrl = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'woocommerce_button') : 'https://athemes.com/sydney-upgrade/?utm_source=theme_customizer_woocommerce&utm_medium=sydney_customizer&utm_campaign=Sydney';
var upsellWoo = $('<div class="sydney-upsell-feature-wrapper" style="margin:5px 15px 15px;">' +
'<h3><em>Take your store to the next level with Sydney Pro!</em></h3>' +
'<p>You’ll get access to:</p>' +
'<ul class="sydney-upsell-features">' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Wishlist</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Product Swatch</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Product Gallery Layouts</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Multistep checkout</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Single sticky add to cart</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Shop header styles</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Product tab styles</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>More Shop pagination types</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Advanced reviews</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Extra single product elements</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Extra shop sidebar layouts</li>' +
'<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>AJAX product search</li>' +
'<a target="_blank" href="' + wooFeaturesUrl + '">…and many more premium features</a>' +
'</ul><p><a href="' + wooButtonUrl + '" role="button" class="button-secondary deep-upsell-button button" target="_blank">Upgrade Now</a></p></div>')
upsellWoo.appendTo('#sub-accordion-panel-woocommerce');
} );
/**
* Custom palette
*/
var sydneyChangeElementColors = function (element, color, palette) {
var $setting = jQuery('[data-control-id="' + element + '"]');
if ($setting.length) {
if (palette) {
var index = palette.indexOf(color);
if (palette[index]) {
color = palette[index];
}
}
var $picker = $setting.find('.sydney-color-picker');
if ($picker.data('pickr')) {
$picker.data('pickr').setColor(color);
} else {
$picker.css('background-color', color);
wp.customize(element).set(color);
}
} else {
// Control not rendered yet (deferred embed): update the setting directly;
// the swatch renders from live values when its section opens.
if (typeof wp.customize(element) !== 'undefined') {
wp.customize(element).set(color);
}
}
};
/**
* Global colors
*/
wp.customize.bind('ready', function () {
for (let i = 1; i <= 9; i++) {
wp.customize('global_color_' + i, function (control) {
control.bind(function (value) {
// Connected elements: derived from the global_* settings themselves,
// not from rendered inputs (controls may not be embedded yet).
wp.customize.each(function (setting) {
if (0 !== setting.id.indexOf('global_') || /^global_color_\d+$/.test(setting.id)) {
return;
}
if (setting.get() !== 'global_color_' + i) {
return;
}
var element = setting.id.replace('global_', '');
if (typeof wp.customize(element) !== 'undefined') {
sydneyChangeElementColors(element, value);
}
});
// Update global color dropdown (rendered ones only; unrendered
// dropdowns populate fresh from settings when their control embeds)
jQuery('.global-colors-dropdown').each(function () {
var $dropdown = jQuery(this);
$dropdown.find('.global-color').each(function () {
var $item = jQuery(this);
if ($item.data('global-setting') === 'global_color_' + i) {
$item.data('color', value);
$item.find('.color-circle').css('background-color', value);
$item.find('.color-value').text(value);
}
} );
} );
});
});
}
/**
* Reconcile color swatches with their connected global color on load.
*
* The PHP control renders the resolved global color, but core linkElements
* re-syncs the text input to the literal setting value once the control is
* embedded (sections embed controls lazily, on expand). Update the display
* only (swatch background + data-display-color attribute, which seeds the
* Pickr default on first open) — never touch the input value or call .set(),
* which would dirty the changeset on plain load or re-save the resolved hex
* as the literal mod if Pickr is opened afterwards.
*/
wp.customize.control.each(function (control) {
control.deferred.embedded.done(function () {
control.container.find('.sydney-connected-global').each(function () {
var slot = jQuery(this).val();
if (!slot || 0 !== slot.indexOf('global_color_')) {
return;
}
var element = jQuery(this).data('customize-setting-link').replace('global_', '');
if (typeof wp.customize(slot) === 'undefined' || typeof wp.customize(element) === 'undefined') {
return;
}
var resolved = wp.customize(slot)();
if (!resolved || String(resolved).toLowerCase() === String(wp.customize(element)()).toLowerCase()) {
return;
}
var $colorControl = jQuery(this).closest('.color-options').find('.sydney-color-control[data-control-id="' + element + '"]');
var $picker = $colorControl.find('.sydney-color-picker');
$picker.css('background-color', resolved);
// Update the data attribute so Pickr seeds from the correct resolved
// colour on first open, without writing into the input (which holds the
// literal mod and must not be overwritten here).
$picker.data('display-color', resolved);
});
});
});
});
/**
* Child controls for sortables
*/
jQuery(document).ready(function($) {
var config = syd_data.sortable_config;
// Show arrow icon, Hide all controls
$.each(config, function(key, subConfig) {
if ( !$('#customize-control-' + key).length ) {
return;
}
$.each(subConfig, function(subKey, value) {
$.each(value.controls, function(index, control) {
$('#customize-control-' + key + ' .kirki-sortable-item[data-value="' + subKey + '"]').find('.toggle-options').show();
var $control = $('#customize-control-' + control);
if ($control.length) {
$control.addClass('sortable-child-hidden');
$control.css('position', 'absolute');
}
});
});
});
// Toggle controls on click
$('.kirki-sortable-item .toggle-options').click(function() {
var $sortableItem = $(this).parent();
var dataValue = $sortableItem.data('value');
$sortableItem.toggleClass('sortable-opened');
if ($sortableItem.hasClass('invisible')) {
return;
}
//Get the distance from the top of the container
var container = $sortableItem.closest('.customize-pane-child');
var sortableItemHeight = $sortableItem.outerHeight();
var sortableItemOffset = $sortableItem.get(0).offsetTop;
var containerOffset = container.get(0).offsetTop;
var distanceTop = sortableItemOffset - containerOffset + sortableItemHeight + 1;
$(this).toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');
$.each(config, function(key, subConfig) {
if ( !$sortableItem.parents( '.customize-control' ).attr('id').includes(key) ) {
return;
}
$.each(subConfig, function(subKey, value) {
if (dataValue !== subKey) {
return;
}
var $firstControl = $('#customize-control-' + value.controls[0]);
var isToggled = $firstControl.hasClass('sortable-child-toggled');
$('.customize-control.sortable-child-toggled').each(function() {
$(this).removeClass('sortable-child-toggled');
$(this).addClass('sortable-child-hidden');
});
var prevTotalHeight = 0; // Total height of previous controls
$.each(value.controls, function(index, control) {
var $control = $('#customize-control-' + control);
var $prevControl = $control.prev();
if (!isToggled) {
$control.addClass('sortable-child-toggled');
$control.removeClass('sortable-child-hidden');
if (index === 0) {
$control.addClass('first-control');
$control.css( {
'top': distanceTop + 'px',
'right': '25px',
} );
} else {
prevTotalHeight += $prevControl.outerHeight();
$control.css( {
'top': distanceTop + prevTotalHeight + 'px',
'right': '25px',
} );
//exceptions
if ( control === 'header_search_field_style' ) {
$control.css( {
'top': distanceTop + prevTotalHeight - $prevControl.outerHeight() + 'px',
} );
}
}
if (index === value.controls.length - 1) {
$control.addClass('last-control');
}
}
});
});
});
});
$(document).on('click mousedown', function(e) {
if ( $(e.target).hasClass('sortable-opened') ) {
if ( $(e.target).hasClass('invisible') ) {
return;
}
$(e.target).removeClass('sortable-opened');
$(e.target).find('.toggle-options').toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');
$('.customize-control.sortable-child-toggled').each(function() {
$(this).removeClass('sortable-child-toggled');
$(this).addClass('sortable-child-hidden');
});
}
});
});
/* Dimensions Control */
(function ($) {
/**
* Base class for JS-templated controls: empty container at boot, rendered
* from their Underscore template when the containing section is first expanded.
*/
wp.customize.SydneyDeferredControl = wp.customize.Control.extend({
embed: function () {
var control = this,
sectionId = control.section();
if (!sectionId) {
return;
}
wp.customize.section(sectionId, function (section) {
if (section.expanded() || wp.customize.settings.autofocus.control === control.id) {
control.actuallyEmbed();
} else {
section.expanded.bind(function (expanded) {
if (expanded) {
control.actuallyEmbed();
}
});
}
});
},
actuallyEmbed: function () {
var control = this;
if ('resolved' === control.deferred.embedded.state()) {
return;
}
control.renderContent();
control.deferred.embedded.resolve();
},
focus: function (args) {
this.actuallyEmbed();
wp.customize.Control.prototype.focus.call(this, args);
}
});
wp.customize.controlConstructor['sydney-toggle-control'] = wp.customize.SydneyDeferredControl;
wp.customize.controlConstructor['sydney-dimensions-control'] = wp.customize.SydneyDeferredControl;
wp.customize.controlConstructor['sydney-radio-buttons'] = wp.customize.SydneyDeferredControl;
wp.customize.controlConstructor['sydney-responsive-slider'] = wp.customize.SydneyDeferredControl;
wp.customize.controlConstructor['sydney-radio-image'] = wp.customize.SydneyDeferredControl.extend({
// jQuery UI buttonset must re-run per control once its DOM exists
// (was inline <script> per instance in the PHP-rendered markup).
ready: function () {
this.container.find('.sydney-radio-images-wrapper').each(function () {
jQuery(this).buttonset();
jQuery(this).find('label').removeClass('ui-button');
});
}
});
/**
* Render a section's deferred controls BEFORE core starts the expand
* animation. Core's pane handler is bound first on section.expanded, so
* without this it measures and slides in a still-empty pane and the
* controls visibly pop in mid-transition. Rendering here happens in the
* same click task, just ahead of the state change — the boot-time
* deferral win is untouched.
*/
var sydneyOriginalSectionExpand = wp.customize.Section.prototype.expand;
wp.customize.Section.prototype.expand = function ( params ) {
var section = this;
if ( ! section.expanded() ) {
_.each( section.controls(), function ( control ) {
if ( 'function' === typeof control.actuallyEmbed ) {
control.actuallyEmbed();
}
} );
}
return sydneyOriginalSectionExpand.call( section, params );
};
/**
* Global color swatches for the connected-global dropdowns.
* Settings-based (the palette control's DOM is not available at boot
* once controls render lazily).
*/
wp.customize.sydneyGetGlobalSwatches = function () {
var colors = [];
for (var i = 1; i <= 9; i++) {
var setting = wp.customize('global_color_' + i);
if (setting) {
colors.push(String(setting.get()).toLowerCase());
}
}
return colors;
};
wp.customize.sydneyPopulateGlobalDropdown = function ($dropdown) {
if ($dropdown.data('populated')) {
return;
}
$dropdown.data('populated', true);
var colors = wp.customize.sydneyGetGlobalSwatches();
var connected = $dropdown.next('.sydney-connected-global').val();
jQuery.each(colors, function (index, value) {
$dropdown.append('<div class="global-color" data-global-setting="global_color_' + (index + 1) + '" data-color="' + value + '"><span style="display:flex;align-items:center;"><span class="color-circle" style="background-color:' + value + '"></span>Global color ' + (index + 1) + '</span><span class="color-value">' + value + '</span></div>');
if (connected == 'global_color_' + (index + 1)) {
$dropdown.find('.global-color').eq(index).addClass('active');
$dropdown.prev('.dashicons').addClass('active');
}
});
};
wp.customize.controlConstructor['sydney-color-group-control'] = wp.customize.SydneyDeferredControl;
wp.customize.controlConstructor['sydney-multicolor-control'] = wp.customize.SydneyDeferredControl;
wp.customize.controlConstructor['sydney-alpha-color'] = wp.customize.SydneyDeferredControl.extend({
ready: function () {
this.container.find('.global-colors-dropdown').each(function () {
wp.customize.sydneyPopulateGlobalDropdown(jQuery(this));
});
}
});
const Sydney_Dimensions_Control = {
init: function () {
this.events();
},
// Events (delegated: control DOM is rendered on section expand)
events: function () {
$(document).on('input', '.sydney-dimensions-control .sydney-dimensions-input', this.setDimensionValue.bind(this));
$(document).on('change', '.sydney-dimensions-control .sydney-dimensions-unit', this.unitSelectHandler.bind(this));
$(document).on('click', '.sydney-dimensions-control .sydney-dimensions-link-btn', this.toggleLinkValues.bind(this));
},
// Change dimension
setDimensionValue: function (e) {
const
$inputToSave = $(e.target).closest('.sydney-dimensions-inputs').find('.sydney-dimensions-value'),
value = this.getDimensionValue(e.target);
$inputToSave.val(value).trigger('change');
},
// Mount value
getDimensionValue: function (input) {
const
deviceType = $(input).closest('.sydney-dimensions-inputs').data('device-type'),
inputs = $(input).closest('.sydney-dimensions-inputs').find('.sydney-dimensions-input');
let value = {
unit: 'px',
linked: false,
top: '',
right: '',
bottom: '',
left: '',
};
// Unit value
value['unit'] = $(input).closest('.sydney-dimensions-control').find('.sydney-dimensions-units[data-device-type="' + deviceType + '"] .sydney-dimensions-unit').val();
// Linked toggle
value['linked'] = $(input).closest('.sydney-dimensions-control').find('.sydney-dimensions-link-values[data-device-type="' + deviceType + '"]').hasClass('linked');
// Values
if (!value['linked']) {
inputs.each(function () {
const side = $(this).data('side'),
val = $(this).val();
value[side] = val;
});
} else {
const val = $(input).val();
value['top'] = val;
value['right'] = val;
value['bottom'] = val;
value['left'] = val;
inputs.each(function () {
$(this).val(val);
});
}
return JSON.stringify(value);
},
unitSelectHandler: function (e) {
const
$this = $(e.target),
deviceType = $(e.target).closest('.sydney-dimensions-units').data('device-type');
// Trigger change in the first input to update the value
$this.closest('.sydney-dimensions-control').find('.sydney-dimensions-inputs[data-device-type="' + deviceType + '"] .sydney-dimensions-input-wrapper:first-child .sydney-dimensions-input').trigger('change');
},
toggleLinkValues: function (e) {
e.preventDefault();
const
$this = $(e.target),
deviceType = $(e.target).closest('.sydney-dimensions-link-values').data('device-type');
$this.closest('.sydney-dimensions-link-values').toggleClass('linked');
// Trigger change in the first input to update the value
$this.closest('.sydney-dimensions-control').find('.sydney-dimensions-inputs[data-device-type="' + deviceType + '"] .sydney-dimensions-input-wrapper:first-child .sydney-dimensions-input').trigger('change');
}
}
$(document).ready(function () {
Sydney_Dimensions_Control.init();
});
})(jQuery);