Start Theme Repo
This commit is contained in:
420
assets/treville-pro/js/customize-preview.js
Normal file
420
assets/treville-pro/js/customize-preview.js
Normal file
@@ -0,0 +1,420 @@
|
||||
/**
|
||||
* Customizer JS
|
||||
*
|
||||
* Reloads changes on Theme Customizer Preview asynchronously for better usability
|
||||
*
|
||||
* @package Treville Pro
|
||||
*/
|
||||
|
||||
( function( $ ) {
|
||||
|
||||
/* Author Bio checkbox */
|
||||
wp.customize( 'romhackplaza_theme_options[author_bio]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( false === newval ) {
|
||||
hideElement( '.single-post .type-post .entry-author' );
|
||||
} else {
|
||||
showElement( '.single-post .type-post .entry-author' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Primary Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[primary_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--primary-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Secondary Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[secondary_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--secondary-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Tertiary Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[tertiary_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--tertiary-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Accent Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[accent_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--accent-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Highlight Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[highlight_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--highlight-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Light Gray Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[light_gray_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--light-gray-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Gray Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[gray_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--gray-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Dark Gray Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[dark_gray_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--dark-gray-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Header Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[header_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var text_color, hover_color, border_color;
|
||||
|
||||
if( isColorLight( newval ) ) {
|
||||
text_color = '#151515';
|
||||
hover_color = 'rgba(0, 0, 0, 0.5)';
|
||||
border_color = 'rgba(0, 0, 0, 0.1)';
|
||||
} else {
|
||||
text_color = '#fff';
|
||||
hover_color = 'rgba(255, 255, 255, 0.5)';
|
||||
border_color = 'rgba(255, 255, 255, 0.1)';
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--header-background-color', newval );
|
||||
document.documentElement.style.setProperty( '--header-text-color', text_color );
|
||||
document.documentElement.style.setProperty( '--site-title-color', text_color );
|
||||
document.documentElement.style.setProperty( '--site-title-hover-color', hover_color );
|
||||
document.documentElement.style.setProperty( '--top-navi-color', text_color );
|
||||
document.documentElement.style.setProperty( '--top-navi-hover-color', hover_color );
|
||||
document.documentElement.style.setProperty( '--top-navi-border-color', border_color );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Main Navigation Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[navi_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var text_color, hover_color, border_color;
|
||||
|
||||
if( isColorDark( newval ) ) {
|
||||
text_color = '#fff';
|
||||
hover_color = 'rgba(255, 255, 255, 0.5)';
|
||||
border_color = 'rgba(255, 255, 255, 0.2)';
|
||||
} else {
|
||||
text_color = '#454545';
|
||||
hover_color = 'rgba(0, 0, 0, 0.5)';
|
||||
border_color = 'rgba(0, 0, 0, 0.2)';
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--navi-background-color', newval );
|
||||
document.documentElement.style.setProperty( '--navi-color', text_color );
|
||||
document.documentElement.style.setProperty( '--navi-hover-color', hover_color );
|
||||
document.documentElement.style.setProperty( '--navi-border-color', border_color );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Link Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[link_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--link-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Link Color Hover Option */
|
||||
wp.customize( 'romhackplaza_theme_options[link_hover_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--link-hover-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Button Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[button_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var text_color;
|
||||
|
||||
if( isColorLight( newval ) ) {
|
||||
text_color = '#151515';
|
||||
} else {
|
||||
text_color = '#fff';
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--button-color', newval );
|
||||
document.documentElement.style.setProperty( '--button-text-color', text_color );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Button Color Hover Option */
|
||||
wp.customize( 'romhackplaza_theme_options[button_hover_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var text_color;
|
||||
|
||||
if( isColorLight( newval ) ) {
|
||||
text_color = '#151515';
|
||||
} else {
|
||||
text_color = '#fff';
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--button-hover-color', newval );
|
||||
document.documentElement.style.setProperty( '--button-hover-text-color', text_color );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Title Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[title_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--title-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Title Hover Option */
|
||||
wp.customize( 'romhackplaza_theme_options[title_hover_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--title-hover-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Border Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[border_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--content-border-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Widget Title Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[widget_title_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
document.documentElement.style.setProperty( '--widget-title-color', newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Footer Widgets Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[footer_widgets_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var title_color, text_color, link_color, link_hover_color, border_color;
|
||||
|
||||
if( isColorLight( newval ) ) {
|
||||
title_color = 'rgba(0, 0, 0, 0.025)';
|
||||
text_color = '#151515';
|
||||
link_color = '#151515';
|
||||
link_hover_color = 'rgba(0, 0, 0, 0.5)';
|
||||
border_color = 'rgba(0, 0, 0, 0.05)';
|
||||
} else {
|
||||
title_color = 'rgba(255, 255, 255, 0.025)';
|
||||
text_color = '#fff';
|
||||
link_color = 'rgba(255, 255, 255, 0.5)';
|
||||
link_hover_color = '#fff';
|
||||
border_color = 'rgba(255, 255, 255, 0.05)';
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--footer-widgets-background-color', newval );
|
||||
document.documentElement.style.setProperty( '--footer-widgets-title-color', title_color );
|
||||
document.documentElement.style.setProperty( '--footer-widgets-text-color', text_color );
|
||||
document.documentElement.style.setProperty( '--footer-widgets-link-color', link_color );
|
||||
document.documentElement.style.setProperty( '--footer-widgets-link-hover-color', link_hover_color );
|
||||
document.documentElement.style.setProperty( '--footer-widgets-border-color', border_color );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Footer Color Option */
|
||||
wp.customize( 'romhackplaza_theme_options[footer_color]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var text_color, link_color, link_hover_color;
|
||||
|
||||
if( isColorLight( newval ) ) {
|
||||
text_color = 'rgba(0, 0, 0, 0.6)';
|
||||
link_color = '#151515';
|
||||
link_hover_color = 'rgba(0, 0, 0, 0.6)';
|
||||
} else {
|
||||
text_color = '#ddd';
|
||||
link_color = '#fff';
|
||||
link_hover_color = 'rgba(255, 255, 255, 0.5)';
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--footer-background-color', newval );
|
||||
document.documentElement.style.setProperty( '--footer-text-color', text_color );
|
||||
document.documentElement.style.setProperty( '--footer-link-color', link_color );
|
||||
document.documentElement.style.setProperty( '--footer-link-hover-color', link_hover_color );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Text Font */
|
||||
wp.customize( 'romhackplaza_theme_options[text_font]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
|
||||
// Load Font in Customizer.
|
||||
loadCustomFont( newval, 'text-font' );
|
||||
|
||||
// Set Font.
|
||||
var systemFont = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
|
||||
var newFont = newval === 'SystemFontStack' ? systemFont : newval;
|
||||
|
||||
// Set CSS.
|
||||
document.documentElement.style.setProperty( '--text-font', newFont );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Title Font */
|
||||
wp.customize( 'romhackplaza_theme_options[title_font]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
|
||||
// Load Font in Customizer.
|
||||
loadCustomFont( newval, 'title-font' );
|
||||
|
||||
// Set Font.
|
||||
var systemFont = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
|
||||
var newFont = newval === 'SystemFontStack' ? systemFont : newval;
|
||||
|
||||
// Set CSS.
|
||||
document.documentElement.style.setProperty( '--title-font', newFont );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Title Font Weight */
|
||||
wp.customize( 'romhackplaza_theme_options[title_is_bold]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var fontWeight = newval ? 'bold' : 'normal';
|
||||
document.documentElement.style.setProperty( '--title-font-weight', fontWeight );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Title Text Transform */
|
||||
wp.customize( 'romhackplaza_theme_options[title_is_uppercase]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var textTransform = newval ? 'uppercase' : 'none';
|
||||
document.documentElement.style.setProperty( '--title-text-transform', textTransform );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Navi Font */
|
||||
wp.customize( 'romhackplaza_theme_options[navi_font]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
|
||||
// Load Font in Customizer.
|
||||
loadCustomFont( newval, 'navi-font' );
|
||||
|
||||
// Set Font.
|
||||
var systemFont = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
|
||||
var newFont = newval === 'SystemFontStack' ? systemFont : newval;
|
||||
|
||||
// Set CSS.
|
||||
document.documentElement.style.setProperty( '--navi-font', newFont );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Navi Font Weight */
|
||||
wp.customize( 'romhackplaza_theme_options[navi_is_bold]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var fontWeight = newval ? 'bold' : 'normal';
|
||||
document.documentElement.style.setProperty( '--navi-font-weight', fontWeight );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Navi Text Transform */
|
||||
wp.customize( 'romhackplaza_theme_options[navi_is_uppercase]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var textTransform = newval ? 'uppercase' : 'none';
|
||||
document.documentElement.style.setProperty( '--navi-text-transform', textTransform );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Widget Title Font */
|
||||
wp.customize( 'romhackplaza_theme_options[widget_title_font]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
|
||||
// Load Font in Customizer.
|
||||
loadCustomFont( newval, 'widget-title-font' );
|
||||
|
||||
// Set Font.
|
||||
var systemFont = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
|
||||
var newFont = newval === 'SystemFontStack' ? systemFont : newval;
|
||||
|
||||
// Set CSS.
|
||||
document.documentElement.style.setProperty( '--widget-title-font', newFont );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Widget Title Font Weight */
|
||||
wp.customize( 'romhackplaza_theme_options[widget_title_is_bold]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var fontWeight = newval ? 'bold' : 'normal';
|
||||
document.documentElement.style.setProperty( '--widget-title-font-weight', fontWeight );
|
||||
} );
|
||||
} );
|
||||
|
||||
/* Widget Title Text Transform */
|
||||
wp.customize( 'romhackplaza_theme_options[widget_title_is_uppercase]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var textTransform = newval ? 'uppercase' : 'none';
|
||||
document.documentElement.style.setProperty( '--widget-title-text-transform', textTransform );
|
||||
} );
|
||||
} );
|
||||
|
||||
function hideElement( element ) {
|
||||
$( element ).css({
|
||||
clip: 'rect(1px, 1px, 1px, 1px)',
|
||||
position: 'absolute',
|
||||
width: '1px',
|
||||
height: '1px',
|
||||
overflow: 'hidden'
|
||||
});
|
||||
}
|
||||
|
||||
function showElement( element ) {
|
||||
$( element ).css({
|
||||
clip: 'auto',
|
||||
position: 'relative',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
overflow: 'visible'
|
||||
});
|
||||
}
|
||||
|
||||
function hexdec( hexString ) {
|
||||
hexString = ( hexString + '' ).replace( /[^a-f0-9]/gi, '' );
|
||||
return parseInt( hexString, 16 );
|
||||
}
|
||||
|
||||
function getColorBrightness( hexColor ) {
|
||||
|
||||
// Remove # string.
|
||||
hexColor = hexColor.replace( '#', '' );
|
||||
|
||||
// Convert into RGB.
|
||||
var r = hexdec( hexColor.substring( 0, 2 ) );
|
||||
var g = hexdec( hexColor.substring( 2, 4 ) );
|
||||
var b = hexdec( hexColor.substring( 4, 6 ) );
|
||||
|
||||
return ( ( ( r * 299 ) + ( g * 587 ) + ( b * 114 ) ) / 1000 );
|
||||
}
|
||||
|
||||
function isColorLight( hexColor ) {
|
||||
return ( getColorBrightness( hexColor ) > 130 );
|
||||
}
|
||||
|
||||
function isColorDark( hexColor ) {
|
||||
return ( getColorBrightness( hexColor ) <= 130 );
|
||||
}
|
||||
|
||||
function loadCustomFont( font, type ) {
|
||||
var fontFile = font.split( " " ).join( "+" );
|
||||
var fontFileURL = "https://fonts.googleapis.com/css?family=" + fontFile + ":400,700";
|
||||
|
||||
var fontStylesheet = "<link id='treville-pro-custom-" + type + "' href='" + fontFileURL + "' rel='stylesheet' type='text/css'>";
|
||||
var checkLink = $( "head" ).find( "#treville-pro-custom-" + type ).length;
|
||||
|
||||
if (checkLink > 0) {
|
||||
$( "head" ).find( "#treville-pro-custom-" + type ).remove();
|
||||
}
|
||||
$( "head" ).append( fontStylesheet );
|
||||
}
|
||||
|
||||
} )( jQuery );
|
||||
Reference in New Issue
Block a user