323 lines
10 KiB
JavaScript
323 lines
10 KiB
JavaScript
/**
|
|
* Astra Addon Common functions
|
|
*
|
|
* @package Astra Addon
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/**
|
|
* Convert HEX to RGBA
|
|
*
|
|
* @param {string} hex HEX color code.
|
|
* @param {number} alpha Alpha number for RGBA.
|
|
* @return {string} Return RGBA or RGB.
|
|
*/
|
|
function astra_hex2rgba( hex, alpha ) {
|
|
|
|
hex = hex.replace( '#', '' );
|
|
var r = g = b = '';
|
|
|
|
if ( hex.length == 3 ) {
|
|
r = get_hexdec( hex.substring( 0, 1 ) + hex.substring( 0, 1 ) );
|
|
g = get_hexdec( hex.substring( 1, 1 ) + hex.substring( 1, 1 ) );
|
|
b = get_hexdec( hex.substring( 2, 1 ) + hex.substring( 2, 1 ) );
|
|
} else {
|
|
r = get_hexdec( hex.substring( 0, 2 ) );
|
|
g = get_hexdec( hex.substring( 2, 4 ) );
|
|
b = get_hexdec( hex.substring( 4, 6 ) );
|
|
}
|
|
|
|
var rgb = r + ',' + g + ',' + b;
|
|
|
|
if ( '' == alpha ) {
|
|
return 'rgb(' + rgb + ')';
|
|
} else {
|
|
alpha = parseFloat( alpha );
|
|
|
|
return 'rgba(' + rgb + ',' + alpha + ')';
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* Check the color is HEX or not
|
|
*
|
|
* @param {string} hex | rgba | rgb HEX | RGBA | RGB color code.
|
|
* @return {bool} Return true | false.
|
|
*/
|
|
function astraIsHexColor( string ){
|
|
isHex = false;
|
|
regexp = /^[0-9a-fA-F]+$/;
|
|
|
|
if ( regexp.test( string ) ) {
|
|
isHex = true;
|
|
}
|
|
return isHex;
|
|
}
|
|
|
|
/**
|
|
* Trim A From RGBA color scheme.
|
|
*
|
|
* @param {string} rgba | rgb RGBA | RGB color code.
|
|
* @return {string} Return string
|
|
*/
|
|
function astraTrimAlpha( string ) {
|
|
return string.replace(/^\s+|\s+$/gm,'');
|
|
}
|
|
|
|
/**
|
|
* Convert RGBA to HEX
|
|
*
|
|
* @param {string} hex | rgba | rgb HEX | RGBA | RGB color code.
|
|
* @return {string} Return HEX color.
|
|
*/
|
|
function astraRgbaToHex( string ) {
|
|
if ( '' !== string ) {
|
|
if ( ! astraIsHexColor( string.replace( '#', '' ) ) ) {
|
|
|
|
var parts = string.substring(string.indexOf("(")).split(","),
|
|
r = parseInt(astraTrimAlpha(parts[0].substring(1)), 10),
|
|
g = parseInt(astraTrimAlpha(parts[1]), 10),
|
|
b = parseInt(astraTrimAlpha(parts[2]), 10),
|
|
a = parseFloat(astraTrimAlpha(parts[3].substring(0, parts[3].length - 1))).toFixed(2);
|
|
// Explicitly converted 'a' to a number before multiplication
|
|
string = ('#' + r.toString(16) + g.toString(16) + b.toString(16) + (Math.round(Number(a) * 255)).toString(16).padStart(2, '0'));
|
|
}
|
|
}
|
|
return string;
|
|
}
|
|
|
|
/**
|
|
* Apply CSS for the element
|
|
*/
|
|
function astra_color_responsive_css( addon, control, css_property, selector ) {
|
|
|
|
wp.customize( control, function( value ) {
|
|
value.bind( function( value ) {
|
|
if ( value.desktop || value.mobile || value.tablet ) {
|
|
// Remove <style> first!
|
|
control = control.replace( '[', '-' );
|
|
control = control.replace( ']', '' );
|
|
jQuery( 'style#' + control + '-' + addon ).remove();
|
|
|
|
var DeskVal = '',
|
|
TabletFontVal = '',
|
|
MobileVal = '';
|
|
|
|
if ( '' != value.desktop ) {
|
|
DeskVal = css_property + ': ' + value.desktop;
|
|
}
|
|
if ( '' != value.tablet ) {
|
|
TabletFontVal = css_property + ': ' + value.tablet;
|
|
}
|
|
if ( '' != value.mobile ) {
|
|
MobileVal = css_property + ': ' + value.mobile;
|
|
}
|
|
|
|
// Concat and append new <style>.
|
|
jQuery( 'head' ).append(
|
|
'<style id="' + control + '-' + addon + '">'
|
|
+ selector + ' { ' + DeskVal + ' }'
|
|
+ '@media (max-width: 768px) {' + selector + ' { ' + TabletFontVal + ' } }'
|
|
+ '@media (max-width: 544px) {' + selector + ' { ' + MobileVal + ' } }'
|
|
+ '</style>'
|
|
);
|
|
|
|
} else {
|
|
jQuery( 'style#' + control + '-' + addon ).remove();
|
|
}
|
|
|
|
} );
|
|
} );
|
|
}
|
|
|
|
/**
|
|
* Apply CSS for the element
|
|
*/
|
|
function astra_apply_responsive_background_css( control, selector, device, singleColorSelector, addon ) {
|
|
wp.customize( control, function( value ) {
|
|
value.bind( function( bg_obj ) {
|
|
|
|
addon = addon || '';
|
|
singleColorSelector = singleColorSelector || '';
|
|
|
|
addon = ( addon ) ? addon : 'header';
|
|
|
|
control = control.replace( '[', '-' );
|
|
control = control.replace( ']', '' );
|
|
|
|
if( '' === bg_obj[device] || undefined === bg_obj[device] ){
|
|
return;
|
|
}
|
|
|
|
var gen_bg_css = '';
|
|
var bg_img = bg_obj[device]['background-image'];
|
|
var bg_tab_img = bg_obj['tablet']['background-image'];
|
|
var bg_desk_img = bg_obj['desktop']['background-image'];
|
|
var bg_color = bg_obj[device]['background-color'];
|
|
var tablet_css = ( bg_obj['tablet']['background-image'] ) ? true : false;
|
|
var desktop_css = ( bg_obj['desktop']['background-image'] ) ? true : false;
|
|
|
|
if( undefined !== bg_obj[device]['background-type'] && '' !== bg_obj[device]['background-type'] ) {
|
|
|
|
if ( ( 'color' === bg_obj[device]['background-type'] ) ) {
|
|
|
|
if ( '' !== bg_img && '' !== bg_color && undefined !== bg_color && 'unset' !== bg_color ) {
|
|
|
|
gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_img + ');';
|
|
} else if ( 'mobile' === device ) {
|
|
if ( desktop_css ) {
|
|
|
|
gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_desk_img + ');';
|
|
} else if ( tablet_css ) {
|
|
|
|
gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_tab_img + ');';
|
|
} else {
|
|
gen_bg_css = 'background-color: ' + bg_color + ';';
|
|
gen_bg_css += 'background-image: none;';
|
|
}
|
|
|
|
} else if ( 'tablet' === device ) {
|
|
|
|
if ( desktop_css ) {
|
|
|
|
gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_desk_img + ');';
|
|
} else {
|
|
gen_bg_css = 'background-color: ' + bg_color + ';';
|
|
gen_bg_css += 'background-image: none;';
|
|
}
|
|
|
|
|
|
} else if ( undefined === bg_img || '' === bg_img ) {
|
|
|
|
gen_bg_css = 'background-color: ' + bg_color + ';';
|
|
gen_bg_css += 'background-image: none;';
|
|
}
|
|
} else if ( 'image' === bg_obj[device]['background-type'] ) {
|
|
if ( '' !== bg_img ) {
|
|
if ( 'overlay-type' in bg_obj[device] && 'none' !== bg_obj[device]['overlay-type'] ) {
|
|
let overlay_color = 'overlay-color' in bg_obj[device] ? bg_obj[device]['overlay-color'] : '';
|
|
let overlay_opacity = 'overlay-opacity' in bg_obj[device] ? bg_obj[device]['overlay-opacity'] : '';
|
|
let overlay_gradient = 'overlay-gradient' in bg_obj[device] ? bg_obj[device]['overlay-gradient'] : '';
|
|
if ( 'classic' === bg_obj[device]['overlay-type'] && '' !== overlay_color ) {
|
|
if ( '' !== overlay_opacity ) {
|
|
wp.customize.preview.send( 'refresh' );
|
|
return;
|
|
}
|
|
gen_bg_css = 'background-image: linear-gradient(to right, ' + overlay_color + ', ' + overlay_color + '), url(' + bg_img + ');';
|
|
} else if ( 'gradient' === bg_obj[device]['overlay-type'] && '' !== overlay_gradient ) {
|
|
gen_bg_css = 'background-image: ' + overlay_gradient + ', url(' + bg_img + ');';
|
|
} else {
|
|
gen_bg_css = 'background-image: url(' + bg_img + ');';
|
|
}
|
|
} else {
|
|
gen_bg_css = 'background-image: url(' + bg_img + ');';
|
|
}
|
|
}
|
|
} else if ( 'gradient' === bg_obj[device]['background-type'] ) {
|
|
if ( '' !== bg_color && 'unset' !== bg_color ) {
|
|
gen_bg_css = 'background-image: ' + bg_color + ';';
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( '' !== bg_img ) {
|
|
|
|
gen_bg_css += 'background-repeat: ' + bg_obj[device]['background-repeat'] + ';';
|
|
gen_bg_css += 'background-position: ' + bg_obj[device]['background-position'] + ';';
|
|
gen_bg_css += 'background-size: ' + bg_obj[device]['background-size'] + ';';
|
|
gen_bg_css += 'background-attachment: ' + bg_obj[device]['background-attachment'] + ';';
|
|
}
|
|
|
|
// Remove old.
|
|
jQuery( 'style#' + control + '-' + device + '-' + addon ).remove();
|
|
|
|
|
|
if ( 'desktop' == device ) {
|
|
var dynamicStyle = '<style id="' + control + '-' + device + '-' + addon + '">'
|
|
+ selector + ' { ' + gen_bg_css + ' }'
|
|
+ '</style>'
|
|
}
|
|
if ( 'tablet' == device ) {
|
|
var dynamicStyle = '<style id="' + control + '-' + device + '-' + addon + '">'
|
|
+ '@media (max-width: 768px) {' + selector + ' { ' + gen_bg_css + ' } }'
|
|
+ '</style>'
|
|
}
|
|
if ( 'mobile' == device ) {
|
|
var dynamicStyle = '<style id="' + control + '-' + device + '-' + addon + '">'
|
|
+ '@media (max-width: 544px) {' + selector + ' { ' + gen_bg_css + ' } }'
|
|
+ '</style>'
|
|
}
|
|
|
|
// Concat and append new <style>.
|
|
jQuery( 'head' ).append(
|
|
dynamicStyle
|
|
);
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Generate responsive background_obj CSS
|
|
*/
|
|
function astra_responsive_background_obj_css( wp_customize, bg_obj, ctrl_name, style, device ) {
|
|
|
|
if( '' === bg_obj[device] || undefined === bg_obj[device] ){
|
|
return;
|
|
}
|
|
|
|
var gen_bg_css = '';
|
|
var bg_img = bg_obj[device]['background-image'];
|
|
var bg_color = bg_obj[device]['background-color'];
|
|
|
|
if ( '' !== bg_img && '' !== bg_color ) {
|
|
if ( undefined !== bg_color ) {
|
|
gen_bg_css = 'background-image: linear-gradient(to right, ' + bg_color + ', ' + bg_color + '), url(' + bg_img + ');';
|
|
}
|
|
} else if ( '' !== bg_img ) {
|
|
gen_bg_css = 'background-image: url(' + bg_img + ');';
|
|
} else if ( '' !== bg_color ) {
|
|
gen_bg_css = 'background-color: ' + bg_color + ';';
|
|
// gen_bg_css += 'background-image: none;';
|
|
}
|
|
|
|
if ( '' !== bg_img ) {
|
|
|
|
gen_bg_css += 'background-repeat: ' + bg_obj[device]['background-repeat'] + ';';
|
|
gen_bg_css += 'background-position: ' + bg_obj[device]['background-position'] + ';';
|
|
gen_bg_css += 'background-size: ' + bg_obj[device]['background-size'] + ';';
|
|
gen_bg_css += 'background-attachment: ' + bg_obj[device]['background-attachment'] + ';';
|
|
} else {
|
|
gen_bg_css += 'background-image: none;';
|
|
}
|
|
|
|
if ( 'desktop' == device ) {
|
|
var dynamicStyle = style.replace( "{{css}}", gen_bg_css );
|
|
}
|
|
if ( 'tablet' == device ) {
|
|
var dynamicStyle = '@media (max-width: 768px) {' + style.replace( "{{css}}", gen_bg_css ) + '};';
|
|
}
|
|
if ( 'mobile' == device ) {
|
|
var dynamicStyle = '@media (max-width: 544px) {' + style.replace( "{{css}}", gen_bg_css ) + '};';
|
|
}
|
|
|
|
astra_add_dynamic_css( ctrl_name +'-'+ device, dynamicStyle );
|
|
}
|
|
|
|
/**
|
|
* Customizer refresh for empty value for all responsive empty color or background image
|
|
*/
|
|
function astra_responsive_background_obj_refresh( bg_obj ) {
|
|
if ( undefined !== bg_obj['desktop'] && undefined !== bg_obj['tablet'] && undefined !== bg_obj['mobile'] ) {
|
|
if (
|
|
( '' === bg_obj['desktop']['background-color'] )
|
|
&&
|
|
( '' === bg_obj['tablet']['background-color'] )
|
|
&&
|
|
( '' === bg_obj['mobile']['background-color'] )
|
|
) {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
}
|
|
}
|