%PDF-
%PDF-
Mini Shell
Mini Shell
/* global ogf_font_variants, ogf_font_array, ajaxurl, fontsReset, location */
( function( api ) {
api.controlConstructor[ 'ogf-typography' ] = api.Control.extend(
{
ready: function() {
const control = this;
const controlClass = '.customize-control-ogf-typography';
const footerActions = jQuery( '#customize-footer-actions' );
// Do stuff when device icons are clicked
jQuery( control.selector + ' .ogf-device-controls > div' ).on( 'click', function( event ) {
var device = jQuery( this ).data( 'option' );
wp.customize.previewedDevice.set( device );
jQuery( controlClass + ' .ogf-device-controls div' ).each( function() {
var _this = jQuery( this );
if ( device === _this.attr( 'data-option' ) ) {
_this.addClass( 'selected' );
_this.siblings().removeClass( 'selected' );
}
} );
});
// Set the selected devices in our control when the Customizer devices are clicked
footerActions.find( '.devices button' ).on( 'click', function() {
var device = jQuery( this ).data( 'device' );
jQuery( controlClass + ' .ogf-device-controls div' ).each( function() {
var _this = jQuery( this );
if ( device === _this.attr( 'data-option' ) ) {
_this.addClass( 'selected' );
_this.siblings().removeClass( 'selected' );
}
} );
});
// Load the Google Font for the preview.
function addGoogleFont( fontName ) {
const font = ogf_font_array[ fontName ];
const weights = jQuery.map(
font.v,
function( value, key ) {
return key;
}
);
const weightsURL = weights.join( ',' );
const fontURL = font.f.replace( / /g, '+' ) + ':' + weightsURL;
wp.customize.previewer.send( 'olympusFontURL', '<link href=\'https://fonts.googleapis.com/css?family=' + fontURL + '\' rel=\'stylesheet\' type=\'text/css\'>' );
}
function isSystemFont( fontID ) {
if ( fontID.indexOf( 'sf-' ) !== -1 ) {
return true;
}
return false;
}
function isTypekitFont( fontID ) {
if ( fontID.indexOf( 'tk-' ) !== -1 ) {
return true;
}
return false;
}
function isCustomFont( fontID ) {
if ( fontID.indexOf( 'cf-' ) !== -1 ) {
return true;
}
return false;
}
// Load the font-weights for the newly selected font.
control.container.on(
'change',
'.typography-font-family select',
function() {
const value = jQuery( this ).val();
control.settings.family.set( value );
const weightsSelect = jQuery( '.typography-font-weight select' );
if ( value === 'default' || isSystemFont( value ) || isCustomFont( value ) ) {
const defaultWeights = {
0: "- Default -",
100: "Thin",
200: "Extra Light",
300: "Light",
400: "Normal",
500: "Medium",
600: "SemiBold",
700: "Bold",
800: "Extra Bold",
900: "Black",
}
// replace the 'Font Weight' select field values.
weightsSelect.empty();
jQuery.each(
defaultWeights,
function( key, val ) {
weightsSelect.append(
jQuery( '<option></option>' )
.attr( 'value', key ).text( val )
);
}
);
} else if ( isTypekitFont( value ) ) {
const font = ogf_typekit_fonts[ value ];
const newWeights = font.variants;
newWeights.unshift("0");
// remove variants the font doesn't support.
var finalWeights = new Object();
newWeights.forEach( function(i) {
finalWeights[i] = ogf_font_variants[i];
});
const weightsSelect = jQuery( '.typography-font-weight select' );
weightsSelect.empty();
jQuery.each(
finalWeights,
function( key, val ) {
weightsSelect.append(
jQuery( '<option></option>' )
.attr( 'value', key ).text( val )
);
}
);
} else {
// Add Google Font enqueue to head of customizer.
addGoogleFont( value );
const font = ogf_font_array[ value ];
const newWeights = font.v;
newWeights[0] = "0";
// remove variants the font doesn't support.
var finalWeights = new Object();
Object.keys(newWeights).forEach( function(val, i) {
if ( ! val.endsWith('0i') ) {
finalWeights[val] = ogf_font_variants[val];
}
});
// replace the 'Font Weight' select field values.
const weightsSelect = jQuery( '.typography-font-weight select' );
weightsSelect.empty();
jQuery.each(
finalWeights,
function( key, val ) {
weightsSelect.append(
jQuery( '<option></option>' )
.attr( 'value', key ).text( val )
);
}
);
}
}
);
// Show advanced settings.
control.container.on(
'click',
'.advanced-button',
function() {
jQuery( this ).toggleClass( 'open' );
jQuery( this ).parent().next( '.advanced-settings-wrapper' ).toggleClass( 'show' );
}
);
// Initialize the wpColorPicker.
const picker = this.container.find( '.typography-font-color .color-picker-hex' );
picker.wpColorPicker(
{
width : 225,
change: function() {
setTimeout(
function() {
control.settings.color.set( picker.val() );
},
100
);
},
clear: function() {
control.settings.color.set( picker.val() );
},
}
);
// Initialize chosen.js
jQuery( '.ogf-select', control.container ).chosen( { width: '85%' } );
// Set our slider defaults and initialise the slider
jQuery( '.slider-custom-control' ).each( function() {
const sliderValue = jQuery( this ).find( '.customize-control-slider-value' ).val();
const newSlider = jQuery( this ).find( '.slider' );
const sliderMinValue = parseFloat( newSlider.attr( 'slider-min-value' ) );
const sliderMaxValue = parseFloat( newSlider.attr( 'slider-max-value' ) );
const sliderStepValue = parseFloat( newSlider.attr( 'slider-step-value' ) );
newSlider.slider( {
value: sliderValue,
min: sliderMinValue,
max: sliderMaxValue,
step: sliderStepValue,
slide: function() {
// Important! When slider stops moving make sure to trigger change event so Customizer knows it has to save the field
jQuery( this ).parent().find( '.customize-control-slider-value' ).trigger( 'change' );
},
} );
} );
// Change the value of the input field as the slider is moved
jQuery( '.slider' ).on( 'slide', function( event, ui ) {
jQuery( this ).parent().find( '.customize-control-slider-value' ).val( ui.value );
} );
// Reset slider and input field back to the default value
jQuery( '.slider-reset' ).on( 'click', function() {
const resetValue = jQuery( this ).attr( 'slider-reset-value' );
jQuery( this ).parent().find( '.customize-control-slider-value' ).val( resetValue );
jQuery( this ).parent().find( '.customize-control-slider-value' ).trigger( 'change' );
jQuery( this ).parent().find( '.slider' ).slider( 'value', resetValue );
} );
// Update slider if the input field loses focus as it's most likely changed
jQuery( '.customize-control-slider-value' ).blur( function() {
let resetValue = jQuery( this ).val();
const slider = jQuery( this ).parent().find( '.slider' );
const sliderMinValue = parseInt( slider.attr( 'slider-min-value' ) );
const sliderMaxValue = parseInt( slider.attr( 'slider-max-value' ) );
// Make sure our manual input value doesn't exceed the minimum & maxmium values
if ( resetValue < sliderMinValue ) {
resetValue = sliderMinValue;
jQuery( this ).val( resetValue );
}
if ( resetValue > sliderMaxValue ) {
resetValue = sliderMaxValue;
jQuery( this ).val( resetValue );
}
jQuery( this ).parent().find( '.slider' ).slider( 'value', resetValue );
} );
},
/**
* Embed the control in the document.
*
* Override the embed() method to do nothing,
* so that the control isn't embedded on load,
* unless the containing section is already expanded.
*
*/
embed: function() {
const control = this;
const sectionId = control.section();
if ( ! sectionId ) {
return;
}
wp.customize.section( sectionId, function( section ) {
section.expanded.bind( function( expanded ) {
if ( expanded ) {
control.actuallyEmbed();
}
} );
} );
},
/**
* Deferred embedding of control when actually
*
* This function is called in Section.onChangeExpanded() so the control
* will only get embedded when the Section is first expanded.
*/
actuallyEmbed: function() {
const control = this;
if ( 'resolved' === control.deferred.embedded.state() ) {
return;
}
control.renderContent();
control.deferred.embedded.resolve(); // This triggers control.ready().
},
}
);
wp.customize.control( 'ogf_reset_fonts', function( control ) {
control.container.find( '.button' ).on( 'click', function( event ) {
event.preventDefault();
const data = {
wp_customize: 'on',
action: 'customizer_reset',
security: fontsReset.nonce,
};
const confirmReset = confirm( fontsReset.confirm );
if ( ! confirmReset ) {
return;
}
jQuery( this ).attr( 'disabled', 'disabled' );
jQuery.post( ajaxurl, data, function( result ) {
wp.customize.state( 'saved' ).set( true );
location.reload();
} );
} );
} );
wp.customize.control( 'ogf_clear_cache', function( control ) {
control.container.find( '.button' ).on( 'click', function( event ) {
event.preventDefault();
console.log('clicked clear cache');
const data = {
wp_customize: 'on',
action: 'customizer_clear_cache',
security: clearCache.nonce,
};
jQuery( this ).attr( 'disabled', 'disabled' );
jQuery.post( ajaxurl, data, function( result ) {
wp.customize.state( 'saved' ).set( true );
alert('Cache successfully cleared.');
location.reload();
} );
} );
} );
}( wp.customize ) );
/* === Checkbox Multiple Control === */
jQuery( document ).ready( function() {
jQuery( '.customize-multiple-checkbox-control input[type="checkbox"]' ).on( 'change',
function() {
const checkboxValues = jQuery( this ).parents( '.customize-control' ).find( 'input[type="checkbox"]:checked' ).map(
function() {
return this.value;
}
).get().join( ',' );
jQuery( this ).parents( '.customize-control' ).find( 'input[type="hidden"]' ).val( checkboxValues ).trigger( 'change' );
}
);
} );
/* === Optimization Controls === */
jQuery( document ).ready( function() {
jQuery( '#_customize-input-ogf_host_locally, #_customize-input-ogf_preloading, #_customize-input-ogf_removal, #_customize-input-ogf_rewrite' ).attr( 'disabled', 'true' );
} );
/* === Multiple Fonts Control === */
( function( api ) {
api.controlConstructor[ 'ogf-typography-multiselect' ] = api.Control.extend( {
ready: function() {
const control = this;
// Initialize chosen.js
jQuery( '.ogf-select', control.container ).chosen( { width: '85%' } );
jQuery( 'select', control.container ).on('change',
function() {
let selectValue = jQuery( this ).val();
selectValue = ( null === selectValue ) ? [] : selectValue;
control.setting.set( selectValue );
}
);
},
} );
}( wp.customize ) );
Zerion Mini Shell 1.0