var clearpath = ePanelSettings.clearpath;
jQuery(document).ready(function($){
function addEditorInstance(codeEditor, $element, config) {
if (!$element || $element.length === 0) {
var instance = codeEditor.initialize( $element , {
if (instance && instance.codemirror) {
editors.push(instance.codemirror);
// Use WP 4.9 CodeMirror Editor for Custom CSS
var codeEditor = window.wp && window.wp.codeEditor;
if (codeEditor && codeEditor.initialize && codeEditor.defaultSettings && codeEditor.defaultSettings.codemirror) {
// User ET CodeMirror theme
var configCSS = $.extend({}, codeEditor.defaultSettings.codemirror, {
var configHTML = $.extend({}, configCSS, {
if ($('#divi_custom_css').length > 0) {
addEditorInstance(codeEditor, $('#divi_custom_css'), configCSS);
addEditorInstance(codeEditor, $('#divi_integration_head'), configHTML);
addEditorInstance(codeEditor, $('#divi_integration_body'), configHTML);
addEditorInstance(codeEditor, $('#divi_integration_single_top'), configHTML);
addEditorInstance(codeEditor, $('#divi_integration_single_bottom'), configHTML);
} else if ($('#extra_custom_css').length > 0) {
addEditorInstance(codeEditor, $('#extra_custom_css'), configCSS);
addEditorInstance(codeEditor, $('#extra_integration_head'), configHTML);
addEditorInstance(codeEditor, $('#extra_integration_body'), configHTML);
addEditorInstance(codeEditor, $('#extra_integration_single_top'), configHTML);
addEditorInstance(codeEditor, $('#extra_integration_single_bottom'), configHTML);
var $palette_inputs = $( '.et_color_palette_main_input' );
$('#epanel-content,#epanel-content > div').tabs({
activate: function( event, ui ) {
if ( $epanel.hasClass('onload') ) {
$epanel.removeClass('onload');
$(".et-box-description").click(function(){
var descheading = $(this).parent('.et-epanel-box').find(".et-box-title h3").html();
var desctext = $(this).parent('.et-epanel-box').find(".et-box-title .et-box-descr").html();
$('body').append("<div id='custom-lbox'><div class='et-box-desc'><div class='et-box-desc-top'>"+ ePanelSettings.help_label +"</div><div class='et-box-desc-content'><h3>"+descheading+"</h3>"+desctext+"<div class='et-lightbox-close'></div> </div> <div class='et-box-desc-bottom'></div> </div></div>");
et_pb_center_modal( $( '.et-box-desc' ) );
$( '.et-lightbox-close' ).click( function() {
et_pb_close_modal( $( '#custom-lbox' ) );
$(".et-defaults-button.epanel-reset").click(function(e) {
$(".reset-popup-overlay, .defaults-hover").addClass('active');
et_pb_center_modal( $( '.defaults-hover' ) );
$( '.no' ).click( function() {
et_pb_close_modal( $( '.reset-popup-overlay' ), 'no_remove' );
//clean the modal classes when animation complete
$( '.reset-popup-overlay, .defaults-hover' ).removeClass( 'active et_pb_modal_closing' );
// ":not([safari])" is desirable but not necessary selector
// ":not([safari])" is desirable but not necessary selector
$('#epanel input:checkbox:not([safari]):not(.yes_no_button)').checkbox();
$('#epanel input[safari]:checkbox:not(.yes_no_button)').checkbox({cls:'jquery-safari-checkbox'});
$('#epanel input:radio:not(.yes_no_button)').checkbox();
$('.yes_no_button').each(function() {
var value = $checkbox.is(':checked');
var state = value ? 'et_pb_on_state' : 'et_pb_off_state';
var $template = $($('#epanel-yes-no-button-template').html()).find('.et_pb_yes_no_button').addClass(state);
$checkbox.hide().after($template);
if ( 'et_pb_static_css_file' === $checkbox.attr( 'id' ) ) {
.addClass( 'et_pb_clear_static_css' )
.on( 'click', function() {
epanel_clear_static_css( false, true );
$checkbox.parents('.et-epanel-box').next().hide();
$('.et-box-content').on( 'click', '.et_pb_yes_no_button', function(e){
// Fix for nested .et-box-content triggering checkboxes multiple times.
var $click_area = $(this),
$box_content = $click_area.closest('.et-box-content'),
$checkbox = $box_content.find('input[type="checkbox"]'),
$state = $box_content.find('.et_pb_yes_no_button');
if ( $state.parent().next().hasClass( 'et_pb_clear_static_css' ) ) {
$state = $state.add( $state.parent() );
if ( $checkbox.is( ':checked' ) ) {
$box_content.parent().next().hide();
$box_content.parent().next().show();
$state.toggleClass('et_pb_on_state et_pb_off_state');
if ( $checkbox.is(':checked' ) ) {
$checkbox.prop('checked', false);
$checkbox.prop('checked', true);
var $save_message = $("#epanel-ajax-saving");
$('#epanel-save-top').click(function(e){
$('#epanel-save').trigger('click');
$('#epanel-save').click(function(){
epanel_save( false, true );
function epanel_save( callback, message ) {
if (editors.length > 0) {
$.each(editors, function(i, editor) {
// Make sure we store changes into original textarea
var options_fromform = $('#main_options_form').formSerialize(),
add_nonce = '&_ajax_nonce='+ePanelSettings.epanel_nonce;
options_fromform += add_nonce;
beforeSend: function ( xhr ){
$save_message.removeAttr('class').fadeIn('fast');
success: function(response){
$save_message.addClass('success-animation');
if ( $.isFunction( callback ) ) {
function epanel_clear_static_css( callback, message ) {
action: 'et_core_page_resource_clear',
clear_page_resources_nonce: ePanelSettings.et_core_nonces.clear_page_resources_nonce,
beforeSend: function ( xhr ) {
$save_message.removeAttr( 'class' ).fadeIn( 'fast' );
success: function ( response ) {
$save_message.addClass( 'success-animation' );
setTimeout( function () {
if ( $.isFunction( callback ) ) {
function et_pb_close_modal( $overlay, no_overlay_remove ) {
var $modal_container = $overlay;
// add class to apply the closing animation to modal
$modal_container.addClass( 'et_pb_modal_closing' );
//remove the modal with overlay when animation complete
if ( 'no_remove' !== no_overlay_remove ) {
$modal_container.remove();
if ( $palette_inputs.length ) {
$palette_inputs.each( function() {
var $this_input = $( this ),
$palette_wrapper = $this_input.closest( '.et-box-content' ),
$colorpalette_colorpickers = $palette_wrapper.find( '.input-colorpalette-colorpicker' ),
colorpalette_colorpicker_index = 0,
saved_palette = $this_input.val().split('|');
$colorpalette_colorpickers.each( function(){
var $colorpalette_colorpicker = $(this),
colorpalette_colorpicker_color = saved_palette[ colorpalette_colorpicker_index ];
$colorpalette_colorpicker.val( colorpalette_colorpicker_color ).wpColorPicker({
default : $(this).data( 'default-color' ),
change : function( event, ui ) {
var data_index = $input.attr('data-index');
var $preview = $palette_wrapper.find('.colorpalette-item-' + data_index + ' .color');
var color = ui.color.toString();
$preview.css({ 'backgroundColor' : color });
saved_palette[ data_index - 1 ] = color;
$this_input.val( saved_palette.join( '|' ) );
$colorpalette_colorpicker.trigger( 'change' );
colorpalette_colorpicker_index++;
$palette_wrapper.on( 'click', '.colorpalette-item', function(e){
var $colorpalette_item = $(this),
data_index = $colorpalette_item.attr('data-index');
// Hide other colorpalette colorpicker
$palette_wrapper.find( '.colorpalette-colorpicker' ).removeClass( 'active' );
// Display selected colorpalette colorpicker
$palette_wrapper.find( '.colorpalette-colorpicker[data-index="' + data_index + '"]' ).addClass( 'active' );
if ( typeof etCore !== 'undefined' && typeof etCore.portability !== 'undefined' ) {
// Portability integration.
etCore.portability.save = function( callback ) {
epanel_save( callback, false );
function et_pb_center_modal( $modal ) {
var modal_height = $modal.outerHeight(),
modal_height_adjustment = 0 - ( modal_height / 2 );
marginTop : modal_height_adjustment