File Editor

Directories:

.. (Back)

Files:

Create New File

Edit File: typography.js

;(function($) {

"use strict";

// Typography control
	wp.customize.controlConstructor[ 'sinatra-typography' ] = wp.customize.Control.extend({
		
		ready: function() {
			"use strict";

var control = this,
				setting = control.setting.get(),
				populated = false,
				$font_family,
				value,
				popup_content = control.container.find( '.popup-content' );

control.container.find( '#font-family-' + control.params.id ).select2();
			control.container.find( '#font-subsets-' + control.params.id ).select2();

control.update_font_subsets_field( setting['font-family'] );
			
			control.container.on( 'change', '#font-family-' + control.params.id, function(){
				control.update_font_weight_field( $(this).val() );
				control.update_font_subsets_field( $(this).val() );
			});

// Update value.
			control.container.on( 'change', '[data-option]', function(){
				control.update_value();
			});

// Range controls.
			control.container.find( '.sinatra-range-wrapper' ).each( function() {
				var $this = $(this);

$this.rangeControl({
					id:         control.params.id + '-' + $this.data('option-id'),
					option:     $this.data('option-id'),
					unit:       control.params.units[ $this.data('option-id') ],
					value:      setting[ $this.data('options-id') ],
					responsive: control.params.responsive,
					change: function() {
						control.update_value();
					}
				});
			});

// Populate font-family field
			control.container.on( 'select2:opening', '#font-family-' + control.params.id, function() {
				control.populate_font_family_field();
				control.container.off( 'select2:opening', '#font-family-' + control.params.id );
			});

// Populate font-weight field.
			control.container.on( 'mousedown', '[data-option="font-weight"]', function(){
				control.update_font_weight_field( control.container.find( '#font-family-' + control.params.id ).val() );
				control.container.off( 'mousedown', '[data-option="font-weight"]' );
			});

// Populate font-subsets field.
			control.container.on( 'select2:opening', '#font-subsets-' + control.params.id, function() {
				control.update_font_subsets_field( control.container.find( '#font-family-' + control.params.id ).val() );
				control.container.off( 'mousedown', '[data-option="font-subsets"]' );
			});

// Advanced panel.
			control.container.find( '.popup-link' ).on( 'click', function(){

popup_content.toggleClass( 'hidden' );

$(this).toggleClass( 'active' );
				$(this).siblings( '.reset-defaults' ).toggleClass( 'active' );

// Close the panel on outside click.
				$( 'body' ).on( 'click', outside_click_close );
			});

// Reset options.
			control.container.find( '.reset-defaults' ).on( 'click', function(){
				
				var selectFields = [ 'font-weight', 'font-style', 'text-transform', 'text-decoration' ],
					rangeFields = [ 'font-size', 'line-height', 'letter-spacing' ];

if ( 'font-family' in control.params.display ) {
					control.populate_font_family_field();
					control.container.find( '#font-family-' + control.params.id ).val( control.params.default[ 'font-family' ] ).trigger( 'change' );
				}

selectFields.forEach( (item) => {
					if ( item in control.params.display ) {
						control.container.find( '[data-option="' + item + '"]' ).val( control.params.default[ item ] ).trigger( 'change' );
					}
				});

rangeFields.forEach( (item) => {
					control.container.find( '[data-option-id="' + item + '"]' ).find( '.sinatra-reset-range' ).click();
				});
			});

var outside_click_close = function(e) {

if ( ! $( e.target ).closest( '.select2-container' ).length &&
					 ! $( e.target ).closest( '.customize-save-button-wrapper' ).length && 
					 ! $( e.target ).closest( '.reset-defaults' ).length &&
					 ! control.container.has( $( e.target ).closest( '.popup-link' ) ).length && 
					 ! control.container.has( $( e.target ).closest( '.popup-content' ) ).length && 
					 ! popup_content.hasClass( 'hidden' ) ) {
					popup_content.addClass( 'hidden' );
					control.container.find( '.popup-link' ).removeClass( 'active' );
					control.container.find( '.reset-defaults' ).removeClass( 'active' );
					$( 'body' ).off( 'click', outside_click_close );
				}
			};
		},

// Update value.
		update_value: function(){

var self = this,
			    value = {},
			    option;

self.container.find( '[data-option]' ).each( function(){

option = $(this).data('option');
				
				if ( 'font-size-unit' === option || 'line-height-unit' === option || 'letter-spacing-unit' === option ) {
					value[ option ] = $(this).is( ':checked' ) ? $(this).val() : value[ option ];
				} else {
					value[ option ] = $(this).val();
				}
			});

self.setting.set( value );
		},

// Populate available font weights for given font family.
		update_font_weight_field: function( font_family ) {

var self     = this,
				options  = '',
				selected = '',
				setting  = self.setting.get();

if ( 'inherit' === font_family ) {
				selected = ' selected="selected"';
			}

options += '<option value="inherit"' + selected + '>' + self.params.l10n.inherit + '</option>';

if ( 'inherit' === font_family || 'default' === font_family ) {

var default_weights = [ '100', '200', '300','400','500', '600', '700', '800', '900' ];

$.each( default_weights, function( index, variant ){

if ( variant === setting['font-weight'] ) {
						selected = ' selected="selected"';
					} else {
						selected = '';
					}

options += '<option value="' + variant + '"' + selected + '>' + self.params.l10n.weights[ variant ] + '</option>';

});
			} else {

$.each( sinatra_typography_vars.fonts, function( group_id, group ){

if ( 'undefined' !== typeof group.fonts[ font_family ] ) {
						
						$.each( group.fonts[ font_family ].variants, function( index, variant ){

if ( variant === setting['font-weight'] ) {
								selected = ' selected="selected"';
							} else {
								selected = '';
							}

options += '<option value="' + variant + '"' + selected + '>' + self.params.l10n.weights[ variant ] + '</option>';

});
						return;
					}
				});
			}

self.container.find( '.sinatra-typography-font-weight' ).find( 'select' ).html( options );
		},

// Populate available font subsets for given font family.
		update_font_subsets_field: function( font_family ) {

var self     = this,
				options  = '',
				selected = '',
				setting  = self.setting.get(),
				field    = self.container.find( '.sinatra-typography-font-subsets' );

if ( 'default' === font_family || 'inherit' === font_family ) {
				field.hide();
				return;
			}

$.each( sinatra_typography_vars.fonts, function( group_id, group ){

if ( 'undefined' !== typeof group.fonts[ font_family ] ) {

if ( 'system_fonts' === group_id || 'standard_fonts' === group_id ) {
						field.hide();
					} else {
						field.show();
					}

$.each( group.fonts[ font_family ].subsets, function( index, subsets ){

selected = '';

if ( setting['font-subsets'] && -1 !== setting['font-subsets'].indexOf( subsets ) || 'latin' === subsets ) {
							selected = ' selected="selected"';
						}

options += '<option value="' + subsets + '"' + selected + '>' + subsets + '</option>';
					});
					return;
				}
			});

field.find( 'select' ).html( options );
		},

// Populate available font families.
		populate_font_family_field: function(e){

var self     = this,
				options  = '',
				selected = '',
				setting  = self.setting.get();

selected = 'inherit' === setting['font-family'] ? ' selected="selected"' : '';
			options += '<option value="inherit"' + selected + '>' + self.params.l10n.inherit + '</option>';

selected = 'default' === setting['font-family'] ? ' selected="selected"' : '';
			options += '<option value="default"' + selected + '>' + self.params.l10n.default + '</option>';

$.each( sinatra_typography_vars.fonts, function( group_id, group ){

options += '<optgroup label="' + group.name + '">';

$.each( group.fonts, function( font, font_options ) {

if ( font === setting['font-family'] ) {
						selected = ' selected="selected"';
					} else {
						selected = '';
					}

options += '<option value="' + font + '"' + selected + '>' + font + '</option>';
				});

options += '</optgroup>';
			});

self.container.find( '#font-family-' + self.params.id ).html( options );
		},
	});

})(jQuery);

File Editor

Directories:

Files:

Create New File

Edit File: typography.js

Rename File