File: /home/assotraipi/www/wp-content/plugins/styles/classes/styles-font-menu/js/styles-font-menu.js
jQuery( document ).ready( function( $ ){
// Add Google Fonts and Chosen to select elements
$('select.sfm').stylesFontMenu();
});
(function( $, google_fonts, standard_fonts ) {
/**
* Build Google Fonts option list only once
*/
var standard_options = "<optgroup label='Standard Fonts'>",
google_options = "<optgroup class='google-fonts' label='Google Fonts'>",
google_styles = '<style>',
is_readme = ( $('#styles-font-menu-readme').length > 0 ),
i;
for ( i=0; i < standard_fonts.fonts.length; i++ ){
standard_options += "<option class='sf " + standard_fonts.fonts[i].classname + "' value='" + JSON.stringify( standard_fonts.fonts[i] ) + "'>" + standard_fonts.fonts[i].name + "</option>";
}
for ( i=0; i < google_fonts.fonts.length; i++ ){
// Don't show if no preview
if ( !is_readme && undefined === google_fonts.fonts[i].png_url ) {
continue;
}
google_options += "<option class='gf " + google_fonts.fonts[i].classname + "' value='" + JSON.stringify( google_fonts.fonts[i] ) + "'>" + google_fonts.fonts[i].name + "</option>";
google_styles += ".sfm ." + google_fonts.fonts[i].classname + " { background-image: url(" + google_fonts.fonts[i].png_url + "); }\r";
}
standard_options += "</optgroup>";
google_options += "</optgroup>";
google_styles += "</style>";
$('head').append( google_styles );
/**
* Define jQuery plugin to act on and attach to select elements
*/
$.stylesFontMenu = function(element, options) {
var plugin = this,
$element = $(element);
/**
* Default settings. Override by passing object to stylesFontMenu()
*/
var defaults = {
"chosen_settings": {
"allow_single_deselect": true,
"inherit_select_classes": true,
"width": "280px"
}
};
plugin.settings = {};
plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
plugin.populate_google_fonts();
plugin.set_selected_option();
$element.chosen( plugin.settings.chosen_settings );
};
plugin.populate_google_fonts = function() {
$element
.append( standard_options )
.append( google_options )
.each( function(){
// If a selected option is set in <option data-selected="XXX">, select it.
// @todo Not sure why this is here. Carried over from old Styles text selector. Check back when connecting to database.
var selected = $(this).data('selected');
$(this).find( 'option[value="' + selected + '"]' ).attr('selected', 'selected');
} );
};
plugin.set_selected_option = function() {
var value = JSON.stringify( $element.data( 'selected' ) );
$element.find('option').each( function(){
if ( value == $(this).val() ) {
$(this).attr('selected', 'selected');
}
});
};
plugin.preview_font_change = function( $target_elements ) {
// Clear font-family if nothing selected
if ( '' === $element.val() ) {
$target_elements.css('font-family', '');
return true;
}
// Convert JSON string value to JSON object
var font = JSON.parse( $element.val() );
plugin.maybe_add_at_import_to_head( font );
// Update font-family
$target_elements.css('font-family', font.family );
};
plugin.maybe_add_at_import_to_head = function( font ) {
// Add @import to <head> if needed
if ( undefined !== font.import_family ) {
var atImport = google_fonts.import_template.replace( '@import_family@', font.import_family );
$( '<style>' ).append( atImport ).appendTo( 'head' );
}
};
plugin.init();
};
/**
* Attach this plugin instance to the target elements
* Access later with $('select.styles-font-menu').data('stylesFontMenu');
*/
$.fn.stylesFontMenu = function(options) {
return this.each(function() {
if (undefined === $(this).data('stylesFontMenu')) {
var plugin = new $.stylesFontMenu(this, options);
$(this).data('stylesFontMenu', plugin);
}
});
};
})( jQuery, styles_google_options, styles_standard_fonts );