You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
551 lines
17 KiB
JavaScript
551 lines
17 KiB
JavaScript
/* <![CDATA[ */
|
|
var clearpath = ePanelSettings.clearpath;
|
|
|
|
jQuery(function($){
|
|
var editors = [];
|
|
var caps = ePanelSettings.allowedCaps;
|
|
|
|
function addEditorInstance(codeEditor, $element, config) {
|
|
if (!$element || $element.length === 0) {
|
|
return;
|
|
}
|
|
var instance = codeEditor.initialize( $element , {
|
|
codemirror: config,
|
|
} );
|
|
if (instance && instance.codemirror) {
|
|
editors.push(instance.codemirror);
|
|
}
|
|
}
|
|
|
|
// Add library buttons in code mirror editor.
|
|
function addLibraryButtons($codeMirrorWrap) {
|
|
var libraryBtnsHTML =
|
|
'<ul class="et-code-snippets-library-btns-wrap">' +
|
|
(caps.addLibrary ?
|
|
'<li class="et-code-snippets-btn snippet-add">' +
|
|
'<span class="add"></span>' +
|
|
'</li>' : '') +
|
|
(caps.saveLibrary ?
|
|
'<li class="et-code-snippets-btn snippet-save">' +
|
|
'<span class="save"></span>' +
|
|
'</li>' : '') +
|
|
(caps.portability ?
|
|
'<li class="et-code-snippets-btn snippet-portability">' +
|
|
'<span class="portability"></span>' +
|
|
'</li>' : '') +
|
|
'</ul>'
|
|
;
|
|
|
|
$codeMirrorWrap.prepend(libraryBtnsHTML);
|
|
}
|
|
|
|
// Extract the context form code mirror textarea.
|
|
function getCodeSnippetsContext(element) {
|
|
var areaForCSS = $(element).parents('.CodeMirror-wrap').siblings('textarea[id*=\'_custom_css\']');
|
|
|
|
return areaForCSS.length ? 'code_css' : 'code_html';
|
|
}
|
|
|
|
// Get the Code Mirror textarea id.
|
|
function getCodeMirrorId(element) {
|
|
var codeArea = $(element).parents('.CodeMirror').siblings('textarea');
|
|
|
|
return codeArea.attr('id');
|
|
}
|
|
|
|
// Add library buttons click event listeners.
|
|
function addLibraryButtonsClickEvent() {
|
|
$codeSnippetsBtnsWrap = $('.et-code-snippets-library-btns-wrap');
|
|
|
|
if ($codeSnippetsBtnsWrap.length) {
|
|
$codeSnippetsBtnsWrap.find('.add').parent().click(function(e) {
|
|
$(window).trigger('et_epanel_code_snippets_open_add_modal', [getCodeSnippetsContext(e.target), getCodeMirrorId(e.target)]);
|
|
});
|
|
|
|
$codeSnippetsBtnsWrap.find('.save').parent().click(function(e) {
|
|
$(window).trigger('et_epanel_code_snippets_open_save_modal', [getCodeSnippetsContext(e.target), getCodeMirrorId(e.target)]);
|
|
});
|
|
|
|
$codeSnippetsBtnsWrap.find('.portability').parent().click(function(e) {
|
|
$(window).trigger('et_epanel_code_snippets_open_portability_modal', [getCodeSnippetsContext(e.target), getCodeMirrorId(e.target)]);
|
|
});
|
|
}
|
|
}
|
|
|
|
// 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, {
|
|
theme: 'et',
|
|
});
|
|
var configHTML = $.extend({}, configCSS, {
|
|
mode: 'htmlmixed',
|
|
});
|
|
|
|
if ($('#divi_custom_css').length > 0) {
|
|
// Divi Theme
|
|
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) {
|
|
// Extra Theme
|
|
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);
|
|
}
|
|
|
|
// Code snippets area.
|
|
var $codeMirrorWrap = $('#epanel-content').find('.CodeMirror-wrap');
|
|
var isSnippetAllowed = caps.addLibrary || caps.saveLibrary || caps.portability;
|
|
|
|
if ($codeMirrorWrap.length && isSnippetAllowed) {
|
|
addLibraryButtons($codeMirrorWrap);
|
|
addLibraryButtonsClickEvent();
|
|
}
|
|
}
|
|
|
|
var $palette_inputs = $( '.et_color_palette_main_input' );
|
|
|
|
$('#epanel-content,#epanel-content > div').tabs({
|
|
fx: {
|
|
opacity: 'toggle',
|
|
duration:'fast'
|
|
},
|
|
selected: 0,
|
|
activate: function( event, ui ) {
|
|
$epanel = $('#epanel');
|
|
|
|
if ( $epanel.hasClass('onload') ) {
|
|
$epanel.removeClass('onload');
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.et-box-description').on('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').on('click', function() {
|
|
et_pb_close_modal($('#custom-lbox'));
|
|
});
|
|
});
|
|
|
|
$('.et-defaults-button.epanel-reset').on('click', function(e) {
|
|
e.preventDefault();
|
|
$(".reset-popup-overlay, .defaults-hover").addClass('active');
|
|
|
|
et_pb_center_modal( $( '.defaults-hover' ) );
|
|
});
|
|
|
|
$('.et-defaults-button.epanel-save').on('click', function(e) {
|
|
e.preventDefault();
|
|
var preferences = {
|
|
modalType: 'save',
|
|
sidebarLabel: ePanelSettings.i18n['Theme Option'],
|
|
builtFor: ePanelSettings?.currentTheme ?? 'Divi',
|
|
};
|
|
|
|
$(window).trigger('et_theme-options_container_ready', [preferences]);
|
|
});
|
|
|
|
$('.et-defaults-button.epanel-add').on('click', function(e) {
|
|
e.preventDefault();
|
|
var preferences = {
|
|
modalType: 'add',
|
|
sidebarLabel: ePanelSettings.i18n['Theme Option'],
|
|
builtFor: ePanelSettings?.currentTheme ?? 'Divi',
|
|
};
|
|
|
|
$(window).trigger('et_theme-options_container_ready', [preferences]);
|
|
});
|
|
|
|
$('.no').on('click', function() {
|
|
et_pb_close_modal( $( '.reset-popup-overlay' ), 'no_remove' );
|
|
|
|
//clean the modal classes when animation complete
|
|
setTimeout( function() {
|
|
$( '.reset-popup-overlay, .defaults-hover' ).removeClass( 'active et_pb_modal_closing' );
|
|
}, 600 );
|
|
});
|
|
|
|
// ":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 UI
|
|
$('.yes_no_button').each(function() {
|
|
var $checkbox = $(this);
|
|
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' ) ) {
|
|
$checkbox
|
|
.parent()
|
|
.addClass( state )
|
|
.next()
|
|
.addClass( 'et_pb_clear_static_css' )
|
|
.on( 'click', function() {
|
|
epanel_clear_static_css( false, true );
|
|
});
|
|
|
|
if ( ! value ) {
|
|
$checkbox.parents('.et-epanel-box').next().hide();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_dynamic_css' === $checkbox.attr( 'id' ) || 'extra_dynamic_css' === $checkbox.attr( 'id' ) ) {
|
|
if ( ! value ) {
|
|
$checkbox.parents('.et-epanel-box').next().hide();
|
|
$checkbox.parents('.et-epanel-box').next().next().hide();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_enable_jquery_body' === $checkbox.attr( 'id' ) || 'extra_enable_jquery_body' === $checkbox.attr( 'id' ) ) {
|
|
if ( ! value ) {
|
|
$checkbox.parents('.et-epanel-box').next().hide();
|
|
$checkbox.parents('.et-epanel-box').next().next().hide();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_google_fonts_inline' === $checkbox.attr( 'id' ) || 'extra_google_fonts_inline' === $checkbox.attr( 'id' ) ) {
|
|
if ( ! value ) {
|
|
$checkbox.parents('.et-epanel-box').next().hide();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_critical_css' === $checkbox.attr( 'id' ) || 'extra_critical_css' === $checkbox.attr( 'id' ) ) {
|
|
if ( ! value ) {
|
|
$checkbox.parents('.et-epanel-box').next().hide();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
$('.et-box-content').on( 'click', '.et_pb_yes_no_button', function(e){
|
|
e.preventDefault();
|
|
// Fix for nested .et-box-content triggering checkboxes multiple times.
|
|
e.stopPropagation();
|
|
|
|
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();
|
|
} else {
|
|
$box_content.parent().next().show();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_dynamic_css' === $checkbox.attr( 'id' ) || 'extra_dynamic_css' === $checkbox.attr( 'id' ) ) {
|
|
if ( $checkbox.is( ':checked' ) ) {
|
|
$box_content.parent().next().hide();
|
|
$box_content.parent().next().next().hide();
|
|
} else {
|
|
$box_content.parent().next().show();
|
|
$box_content.parent().next().next().show();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_enable_jquery_body' === $checkbox.attr( 'id' ) || 'extra_enable_jquery_body' === $checkbox.attr( 'id' ) ) {
|
|
if ( $checkbox.is( ':checked' ) ) {
|
|
$box_content.parent().next().hide();
|
|
$box_content.parent().next().next().hide();
|
|
} else {
|
|
$box_content.parent().next().show();
|
|
$box_content.parent().next().next().show();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_google_fonts_inline' === $checkbox.attr( 'id' ) || 'divi_google_fonts_inline' === $checkbox.attr( 'id' ) ) {
|
|
if ( $checkbox.is( ':checked' ) ) {
|
|
$box_content.parent().next().hide();
|
|
} else {
|
|
$box_content.parent().next().show();
|
|
}
|
|
}
|
|
|
|
if ( 'divi_critical_css' === $checkbox.attr( 'id' ) || 'extra_critical_css' === $checkbox.attr( 'id' ) ) {
|
|
if ( $checkbox.is( ':checked' ) ) {
|
|
$box_content.parent().next().hide();
|
|
} else {
|
|
$box_content.parent().next().show();
|
|
}
|
|
}
|
|
|
|
$state.toggleClass('et_pb_on_state et_pb_off_state');
|
|
|
|
if ( $checkbox.is(':checked' ) ) {
|
|
$checkbox.prop('checked', false);
|
|
} else {
|
|
$checkbox.prop('checked', true);
|
|
}
|
|
|
|
});
|
|
|
|
var $save_message = $("#epanel-ajax-saving");
|
|
|
|
$('#epanel-save-top').on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
$('#epanel-save').trigger('click');
|
|
})
|
|
|
|
$('#epanel-save').on('click', function() {
|
|
epanel_save( false, true );
|
|
return false;
|
|
});
|
|
|
|
function epanel_save( callback, message ) {
|
|
|
|
// If CodeMirror is used
|
|
if (editors.length > 0) {
|
|
$.each(editors, function(i, editor) {
|
|
if (editor.save) {
|
|
// Make sure we store changes into original textarea
|
|
editor.save();
|
|
}
|
|
})
|
|
}
|
|
|
|
var options_fromform = $('#main_options_form').formSerialize(),
|
|
add_nonce = '&_ajax_nonce='+ePanelSettings.epanel_nonce;
|
|
|
|
options_fromform += add_nonce;
|
|
|
|
$.ajax({
|
|
type: "POST",
|
|
url: ajaxurl,
|
|
data: options_fromform,
|
|
beforeSend: function ( xhr ){
|
|
if ( message ) {
|
|
$save_message.removeAttr('class').fadeIn('fast');
|
|
}
|
|
},
|
|
success: function(response){
|
|
if ( message ) {
|
|
$save_message.addClass('success-animation');
|
|
|
|
setTimeout(function(){
|
|
$save_message.fadeOut();
|
|
},500);
|
|
}
|
|
|
|
if ( 'function' === typeof callback ) {
|
|
callback();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function epanel_clear_static_css( callback, message ) {
|
|
var data = {
|
|
action: 'et_core_page_resource_clear',
|
|
et_owner: 'all',
|
|
et_post_id: 'all',
|
|
clear_page_resources_nonce: ePanelSettings.et_core_nonces.clear_page_resources_nonce,
|
|
};
|
|
|
|
$.ajax( {
|
|
type: "POST",
|
|
url: ajaxurl,
|
|
data: data,
|
|
beforeSend: function ( xhr ) {
|
|
if ( message ) {
|
|
$save_message.removeAttr( 'class' ).fadeIn( 'fast' );
|
|
}
|
|
},
|
|
success: function ( response ) {
|
|
if ( message ) {
|
|
$save_message.addClass( 'success-animation' );
|
|
|
|
setTimeout( function () {
|
|
$save_message.fadeOut();
|
|
}, 500 );
|
|
}
|
|
|
|
if ( 'function' === typeof callback ) {
|
|
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
|
|
setTimeout( function() {
|
|
if ( 'no_remove' !== no_overlay_remove ) {
|
|
$modal_container.remove();
|
|
}
|
|
}, 600 );
|
|
}
|
|
|
|
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({
|
|
hide : false,
|
|
default : $(this).data( 'default-color' ),
|
|
width: 313,
|
|
palettes : false,
|
|
change : function( event, ui ) {
|
|
var $input = $(this);
|
|
var data_index = $input.attr('data-index');
|
|
var $preview = $palette_wrapper.find('.colorpalette-item-' + data_index + ' .color');
|
|
var color = ui.color.toString();
|
|
|
|
$input.val( color );
|
|
$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){
|
|
e.preventDefault();
|
|
|
|
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();
|
|
var modal_height_adjustment = (0 - (modal_height / 2)) + 'px';
|
|
|
|
$modal.css({
|
|
top : '50%',
|
|
bottom : 'auto',
|
|
marginTop : modal_height_adjustment
|
|
});
|
|
}
|
|
|
|
/* eslint-disable prefer-arrow-callback, space-before-blocks */
|
|
$(window).on('et_epanel_code_snippets_open_add_modal', (event, context, codeMirrorId) => {
|
|
// Used for the App and Modal container.
|
|
$('body').first().append('<div id="et-code-snippets-container" class="snippets-modals-portal"></div>');
|
|
|
|
var preferences = {
|
|
containerId: 'et-code-snippets-container',
|
|
context,
|
|
codeMirrorId,
|
|
modalType: 'add',
|
|
sidebarLabel: 'code_html' === context ? ePanelSettings.i18n['Code Snippet'] : '',
|
|
};
|
|
var container = window.document;
|
|
|
|
$(window).trigger('et_code_snippets_container_ready', [preferences, container]);
|
|
});
|
|
/* eslint-enable */
|
|
|
|
/* eslint-disable prefer-arrow-callback, space-before-blocks */
|
|
$(window).on('et_epanel_code_snippets_open_save_modal', (event, context, codeMirrorId) => {
|
|
// Used for the App and Modal container.
|
|
$('body').first().append('<div id="et-code-snippets-container" class="snippets-modals-portal"></div>');
|
|
|
|
var editor = jQuery(`#${codeMirrorId}`).next('.CodeMirror')[0].CodeMirror;
|
|
var content = editor.getValue();
|
|
|
|
if ('' === content) {
|
|
return;
|
|
}
|
|
|
|
var preferences = {
|
|
containerId: 'et-code-snippets-container',
|
|
context,
|
|
codeMirrorId,
|
|
modalType: 'save',
|
|
content: content,
|
|
selectedContent: editor.getSelection()
|
|
};
|
|
var container = window.document;
|
|
|
|
$(window).trigger('et_code_snippets_container_ready', [preferences, container]);
|
|
});
|
|
/* eslint-enable */
|
|
|
|
/* eslint-disable prefer-arrow-callback, space-before-blocks */
|
|
$(window).on('et_epanel_code_snippets_open_portability_modal', (event, context, codeMirrorId) => {
|
|
// Used for the App and Modal container.
|
|
$('body').first().append('<div id="et-code-snippets-container" class="snippets-modals-portal"></div>');
|
|
|
|
var editor = jQuery(`#${codeMirrorId}`).next('.CodeMirror')[0].CodeMirror;
|
|
|
|
var preferences = {
|
|
containerId: 'et-code-snippets-container',
|
|
context,
|
|
codeMirrorId,
|
|
modalType: 'portability',
|
|
content: editor.getValue()
|
|
};
|
|
var container = window.document;
|
|
|
|
$(window).trigger('et_code_snippets_container_ready', [preferences, container]);
|
|
});
|
|
|
|
$(document).on('mouseover', '.et-code-snippets-btn.snippet-save', function() {
|
|
var codeMirrorId = getCodeMirrorId(this);
|
|
var editor = jQuery(`#${codeMirrorId}`).next('.CodeMirror')[0].CodeMirror;
|
|
var content = editor.getValue();
|
|
|
|
if ('' === content) {
|
|
$(this).addClass('et-code-snippets-btn--disabled');
|
|
} else {
|
|
$(this).removeClass('et-code-snippets-btn--disabled');
|
|
}
|
|
});
|
|
});
|
|
/* ]]> */
|