/**
* Script for the customizer tabs control interactions.
*
* @author ThemeIsle
*/
/* global wp */
wp.customize.controlConstructor['interface-tabs'] = wp.customize.Control.extend(
{
ready() {
// Switch tab based on customizer partial edit links.
wp.customize.previewer.bind('tab-previewer-edit', function (data) {
jQuery(data.selector).trigger('click');
});
wp.customize.previewer.bind('focus-control', function (data) {
/**
* This timeout is here because in firefox this happens before customizer animation of changing panels.
* After it change panels with the input focused, the customizer was moved to right 12px. We have to make sure
* that the customizer animation of changing panels in customizer is done before focusing the input.
*/
setTimeout(function () {
const control = wp.customize.control(data);
if (typeof control !== 'undefined') {
wp.customize.control(data).focus();
}
}, 100);
});
wp.customize.previewer.bind('focus-section', function (data) {
/**
* This timeout is here because in firefox this happens before customizer animation of changing panels.
* After it change panels with the input focused, the customizer was moved to right 12px. We have to make sure
* that the customizer animation of changing panels in customizer is done before focusing the input.
*/
setTimeout(function () {
wp.customize.section(data).focus();
}, 100);
});
wp.customize.previewer.bind('ready', function () {
const parts = window.location.search.substr(1).split('&');
const $_GET = {};
for (let i = 0; i < parts.length; i++) {
const temp = parts[i].split('=');
$_GET[decodeURIComponent(temp[0])] = decodeURIComponent(
temp[1]
);
}
if (
typeof $_GET['autofocus[control]'] !== 'undefined' &&
$_GET['autofocus[control]'] !== ''
) {
jQuery('li[id^="customize-control-sidebars_widgets"]').on(
'DOMNodeInserted',
function () {
jQuery(
'.neve-customizer-tab > label.' +
$_GET['autofocus[control]']
).trigger('click');
}
);
}
});
const self = this;
/**
* Run JS on load.
*/
wp.customize.bind('ready', function () {
self.init();
self.handleClick();
});
},
init() {
const control = this;
const section = control.section();
control.hideAllControls(section);
const tab = control.params.controls.general
? 'general'
: control.params.controls.layout
? 'layout'
: control.params.controls.style
? 'style'
: Object.keys(control.params.controls)[0];
const controlsToShow = control.params.controls[tab];
let allControls = [];
for (const controlName in controlsToShow) {
if (controlsToShow.hasOwnProperty(controlName)) {
if (
jQuery.isEmptyObject(controlsToShow[controlName]) ===
false &&
typeof wp.customize.control(controlName) !== 'undefined'
) {
const subTabValue =
wp.customize.control(controlName).setting._value;
allControls = allControls.concat(
controlsToShow[controlName][subTabValue]
);
}
allControls.push(controlName);
}
}
control.showControls(allControls, section);
},
hideAllControls(section) {
const controls = wp.customize.section(section).controls();
const tabControl = this.id;
for (const i in controls) {
const controlId = controls[i].id;
if (controlId === 'widgets') {
const sectionContainer =
wp.customize.section(section).container;
jQuery(sectionContainer)
.children('li[class*="widget"]')
.css('display', 'none')
.addClass('tab-hidden');
} else if (controlId !== tabControl) {
const selector = wp.customize.control(controlId).selector;
jQuery(selector).addClass('tab-hidden');
}
}
},
handleClick() {
const control = this;
const section = control.section();
const container = control.container;
jQuery(container)
.find('.neve-customizer-tab')
.on('click', function () {
jQuery(this)
.parent()
.find('.neve-customizer-tab')
.removeClass('active');
jQuery(this).addClass('active');
control.hideAllControls(section);
const tab = jQuery(this).data('tab');
const controlsToShow = control.params.controls[tab];
let allControls = [];
for (const controlName in controlsToShow) {
if (
jQuery.isEmptyObject(
controlsToShow[controlName]
) === false &&
typeof wp.customize.control(controlName) !==
'undefined'
) {
const subTabValue =
wp.customize.control(controlName).setting
._value;
allControls = allControls.concat(
controlsToShow[controlName][subTabValue]
);
}
allControls.push(controlName);
}
control.showControls(allControls, section);
});
},
showControls(controls, section) {
for (const i in controls) {
const controlName = controls[i];
if (
controlName === 'widgets' ||
controlName.indexOf('sidebars_widgets') !== -1
) {
const sectionContainer =
wp.customize.section(section).container;
jQuery(sectionContainer)
.children('li[class*="widget"]')
.css('display', 'list-item');
return;
}
if (typeof wp.customize.control(controlName) !== 'undefined') {
const selector = wp.customize.control(controlName).selector;
jQuery(selector).removeClass('tab-hidden');
}
}
},
}
);