File: /home/eliteafr/datapro/wp-content/themes/hestia/assets/js/admin/src/customizer-controls.js
/**
* File customizer-controls.js
*
* The file for generic customizer controls.
*
* @package Hestia
*/
/* global imageObject */
/**
* Check if we have a sale event and try to add a banner to the WP Customizer.
*
* The position of the banner is right before the "Themes" section.
*
* @returns {undefined}
*/
function tryAddSaleBanner () {
if (typeof window.hestiaSaleEvents === 'undefined' || typeof window.hestiaSaleEvents.customizerBannerUrl === 'undefined' || ! window.hestiaSaleEvents.customizerBannerUrl ) {
return;
}
var sectionStart = document.querySelector('#accordion-section-themes');
if ( ! sectionStart ) {
return;
}
var saleLink = document.createElement('a');
saleLink.href = window.hestiaSaleEvents.customizerBannerStoreUrl;
saleLink.target = '_blank';
var bannerImg = document.createElement('img');
bannerImg.src = window.hestiaSaleEvents.customizerBannerUrl;
bannerImg.style.width = '100%'; // Make sure the image is responsive.
saleLink.appendChild(bannerImg);
sectionStart.parentNode.insertBefore(saleLink, sectionStart.nextSibling);
}
/**
* Attempts to add a lock icon to the specified HTML element.
*
* @param {string} elementId - The ID of the target element where the lock icon should be added.
* @param {string} elementSuffix - A suffix to be appended to the element ID for identifying the lock icon element.
*/
function tryAddLockIcon( elementId, elementSuffix) {
var hasIcon = jQuery( '#' + elementId );
if ( hasIcon.length === 0 ) {
jQuery( '#' + elementId + elementSuffix )
.addClass( 'customize-locked-control' )
.find('input:checkbox')
.attr( 'readonly', true )
.next( 'label' )
.replaceWith( function(index, labelHtml) {
return jQuery(this).text().trim() + ' <span class="dashicons dashicons-lock"></span>';
} );
}
}
function toggleControls( isChecked ) {
var $controls = jQuery('#customize-control-hestia_top_bar_alignment, #customize-control-hestia_link_to_top_menu, #customize-control-hestia_link_to_top_widgets');
if ( isChecked ) {
$controls.addClass( 'customize-locked-control' );
} else {
$controls.removeClass( 'customize-locked-control' );
}
}
jQuery( document ).ready(
function () {
'use strict';
jQuery.aboutBackground = {
init: function () {
this.updateBackgroundControl();
this.updateBackgroundControlBuffer();
this.focusMenu();
this.updateEditorLink();
this.scrollToTop();
},
updateBackgroundControl: function () {
wp.customize(
'page_on_front', function( value ) {
value.bind(
function( newval ) {
jQuery.ajax({
type: 'POST',
data: {
action: 'update_image_buffer',
pid: newval,
nonce: imageObject.imagenonce
},
url: imageObject.ajaxurl,
success: function (result) {
var image = result.data;
var html;
if (image !== '' && image !== 'undefined') {
html = '<label for="hestia_feature_thumbnail-button">' +
'<span class="customize-control-title">About background</span>' +
'</label>' +
'<div class="attachment-media-view attachment-media-view-image landscape">' +
'<div class="thumbnail thumbnail-image">' +
'<img class="attachment-thumb" src="' + image + '" draggable="false" alt=""> ' +
'</div>' +
'<div class="actions">' +
'<button type="button" class="button remove-button">Remove</button>' +
'<button type="button" class="button upload-button control-focus" id="hestia_feature_thumbnail-button">Change Image</button> ' +
'<div style="clear:both"></div>' +
'</div>' +
'</div>';
} else {
html = '<label class="customize-control-title" for="customize-media-control-button-105">About background</label>' +
'<div class="customize-control-notifications-container" style="display: none;"><ul></ul></div>' +
'<div class="attachment-media-view">\n' +
'<div class="placeholder">' +
'No image selected' +
'</div>' +
'<div class="actions">' +
'<button type="button" class="button default-button">Default</button>' +
'<button type="button" class="button upload-button" id="customize-media-control-button-105">Select image</button>' +
'</div>' +
'</div>';
}
wp.customize.control( 'hestia_feature_thumbnail' ).container['0'].innerHTML = html;
wp.customize.instance( 'hestia_feature_thumbnail' ).previewer.refresh();
}
});
}
);
}
);
},
updateBackgroundControlBuffer: function () {
/**
* Update the buffer for about background.
*/
wp.customize( 'hestia_feature_thumbnail', function ( value ) {
value.bind( function ( newval ) {
jQuery.ajax({
type: 'POST',
url: imageObject.ajaxurl,
data: {
action: 'update_image_buffer',
value: newval,
nonce: imageObject.imagenonce,
}
});
});
});
},
/**
* Focus menu when the user clicks on customizer shortcut of the menu.
*/
focusMenu: function () {
wp.customize.previewer.bind(
'trigger-focus-menu', function() {
wp.customize.section( 'menu_locations' ).focus();
}
);
},
updateEditorLink: function () {
wp.customize(
'page_on_front', function( value ) {
value.bind(
function( newval ) {
if( typeof wp.customize.control( 'hestia_shortcut_editor' ) !== 'undefined' ){
var newLink = wp.customize.control( 'hestia_shortcut_editor' ).container['0'].innerHTML .replace(/(post=).*?(&)/,'$1' + newval + '$2');
wp.customize.control( 'hestia_shortcut_editor' ).container['0'].innerHTML = newLink;
}
}
);
}
);
},
/**
* Scroll to top feature
*/
scrollToTop: function () {
wp.customize( 'hestia_scroll_to_top_offset', function ( value ) {
value.bind( function ( newval ) {
var showScrollToTop = 0;
jQuery( window ).on( 'scroll', function () {
console.log(newval);
var y_scroll_pos = window.pageYOffset;
var headerElement = jQuery( '.page-header' );
var scroll_pos_test = 0;
if ( headerElement.length > 0 ) {
scroll_pos_test = headerElement.height();
} else {
headerElement = jQuery( '.container' );
scroll_pos_test = headerElement.offset().top - jQuery( '.navbar' ).height();
scroll_pos_test = scroll_pos_test > 0 ? scroll_pos_test : 0;
}
scroll_pos_test += newval;
if ( y_scroll_pos >= scroll_pos_test && showScrollToTop === 0 ) {
jQuery( '.hestia-scroll-to-top' ).addClass( 'hestia-fade' );
showScrollToTop = 1;
}
if ( y_scroll_pos <= scroll_pos_test && showScrollToTop === 1 ) {
jQuery( '.hestia-scroll-to-top' ).removeClass( 'hestia-fade' );
showScrollToTop = 0;
}
} );
jQuery( '.hestia-scroll-to-top' ).on( 'click', function () {
window.scroll( {
top: 0,
behavior: 'smooth'
} );
} );
} );
} );
},
};
jQuery.aboutBackground.init();
wp.customize(
'hestia_team_content', function ( value ) {
value.bind(
function () {
var authors_values;
var result = '';
if ( jQuery.isFunction( wp.customize._value.hestia_authors_on_blog ) ) {
authors_values = wp.customize._value.hestia_authors_on_blog();
}
jQuery( '#customize-control-hestia_team_content .customizer-repeater-general-control-repeater-container' ).each(
function () {
var title = jQuery( this ).find( '.customizer-repeater-title-control' ).val();
var id = jQuery( this ).find( '.social-repeater-box-id' ).val();
if ( typeof (title) !== 'undefined' && title !== '' && typeof (id) !== 'undefined' && id !== '' ) {
result += '<option value="' + id + '" ';
if ( authors_values && authors_values !== 'undefined' ) {
if ( authors_values.indexOf( id ) !== -1 ) {
result += 'selected';
}
}
result += '>' + title + '</option>';
}
}
);
jQuery( '#customize-control-hestia_authors_on_blog .repeater-multiselect-team' ).html( result );
}
);
}
);
/* Move controls to Widgets sections. Used for sidebar placeholders */
if ( typeof wp.customize.control( 'hestia_placeholder_sidebar_1' ) !== 'undefined' ) {
wp.customize.control( 'hestia_placeholder_sidebar_1' ).section( 'sidebar-widgets-sidebar-1' );
}
if ( typeof wp.customize.control( 'hestia_placeholder_sidebar_woocommerce' ) !== 'undefined' ) {
wp.customize.control( 'hestia_placeholder_sidebar_woocommerce' ).section( 'sidebar-widgets-sidebar-woocommerce' );
}
jQuery(document).on( 'click', '.quick-links a', function(e) {
e.preventDefault();
e.stopPropagation();
var control = jQuery( this ).data( 'control-focus' );
if ( control ){
wp.customize.control( control ).focus();
jQuery( 'label.' + control ).click();
}
var section = jQuery( this ).data( 'section-focus' );
if( section ){
wp.customize.section( section ).focus();
}
} );
jQuery( '.focus-customizer-header-image' ).on( 'click', function ( e ) {
e.preventDefault();
wp.customize.section( 'header_image' ).focus();
} );
/**
* Toggle section user clicks on customizer shortcut.
*/
var customize = wp.customize;
if( typeof customize !== 'undefined' && customize.hasOwnProperty('previewer') ) {
customize.previewer.bind(
'hestia-customize-disable-section', function ( data ) {
jQuery( '[data-customize-setting-link=' + data + ']' ).trigger( 'click' );
}
);
customize.previewer.bind(
'hestia-customize-focus-control', function ( data ) {
wp.customize.control( data ).focus();
}
);
}
// Toggle visibility of Header Video notice when active state change.
customize.control( 'header_video', function( headerVideoControl ) {
headerVideoControl.deferred.embedded.done( function() {
var toggleNotice = function() {
var section = customize.section( headerVideoControl.section() ), noticeCode = 'video_header_not_available';
section.notifications.remove( noticeCode );
};
toggleNotice();
headerVideoControl.active.bind( toggleNotice );
} );
} );
// Open navigation panel.
wp.customize.section( 'hestia_navigation' ).expanded.bind( function ( isExpanded ) {
if ( isExpanded ) {
// Lock minicart option.
tryAddLockIcon( 'customize-control-hestia_cart_icon', '_status' );
// Lock mobile menu option.
tryAddLockIcon( 'customize-control-hestia_mobile_menu_icon', '_status' );
}
} );
// Choose cart icon.
wp.customize.control( 'hestia_cart_icon', function( control ) {
control.container.on( 'change', 'input:radio', function() {
if ( 'code' === jQuery( this ).val() ) {
jQuery( '#customize-control-hestia_cart_custom_icon' ).addClass( 'hestia-show-custom-icon' );
} else {
jQuery( '#customize-control-hestia_cart_custom_icon' ).removeClass( 'hestia-show-custom-icon' );
}
} );
jQuery( 'input:radio:checked', control.container ).trigger( 'change' );
} );
// Toggle cart icon.
wp.customize.control( 'hestia_cart_icon_status', function( control ) {
control.container.on( 'change', 'input:checkbox', function() {
if ( jQuery( this ).is( ':checked' ) ) {
jQuery( '#customize-control-hestia_cart_icon' ).fadeIn( 'show' );
} else {
jQuery( '#customize-control-hestia_cart_icon' ).fadeOut();
}
} );
jQuery( 'input:checkbox:checked', control.container ).trigger( 'change' );
} );
wp.customize.control( 'hestia_top_bar_hide', function( control ) {
wp.customize.section('hestia_top_bar', function( section ) {
section.expanded.bind(function( isExpanded ) {
if ( isExpanded ) {
var isChecked = control.container.find('input:checkbox').is(':checked');
toggleControls( isChecked );
}
});
});
control.container.on( 'change', 'input:checkbox', function() {
var isChecked = jQuery(this).is(':checked');
toggleControls( isChecked );
});
});
wp.customize.control( 'hestia_navbar_transparent', function( control ) {
wp.customize.section('hestia_navigation', function( section ) {
section.expanded.bind(function( isExpanded ) {
if ( isExpanded ) {
if ( control.container.find('input:checkbox').is(':checked') ) {
wp.customize.control('hestia_link_to_add_icon').container.show();
} else {
wp.customize.control('hestia_link_to_add_icon').container.hide();
}
}
});
});
control.container.on( 'change', 'input:checkbox', function() {
if ( jQuery(this).is(':checked') ) {
wp.customize.control('hestia_link_to_add_icon').container.show();
} else {
wp.customize.control('hestia_link_to_add_icon').container.hide();
}
});
});
tryAddSaleBanner();
}
);