| 1 |
( function( $ ) { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
var optionPrefix = 'cool_timeline_settings'; |
| 5 |
var fontRequests = {}; |
| 6 |
var fieldCache = {}; |
| 7 |
|
| 8 |
function getField( selector ) { |
| 9 |
if ( ! fieldCache[ selector ] ) { |
| 10 |
fieldCache[ selector ] = $( selector ); |
| 11 |
} |
| 12 |
|
| 13 |
return fieldCache[ selector ]; |
| 14 |
} |
| 15 |
|
| 16 |
function option( key, fallback ) { |
| 17 |
var $field = getField( '[name="' + optionPrefix + '[' + key + ']"]' ); |
| 18 |
var value = ''; |
| 19 |
|
| 20 |
if ( $field.is( ':radio' ) ) { |
| 21 |
value = $field.filter( ':checked' ).val(); |
| 22 |
} else if ( $field.length ) { |
| 23 |
value = $field.val(); |
| 24 |
} |
| 25 |
|
| 26 |
return value === undefined || value === null || value === '' ? fallback : value; |
| 27 |
} |
| 28 |
|
| 29 |
function typographyOption( group, key, fallback ) { |
| 30 |
var $field = getField( '[name="' + optionPrefix + '[' + group + '][' + key + ']"]' ); |
| 31 |
var value = $field.length ? $field.val() : ''; |
| 32 |
|
| 33 |
return value === undefined || value === null || value === '' ? fallback : value; |
| 34 |
} |
| 35 |
|
| 36 |
function requestGoogleFont( family, weight ) { |
| 37 |
var request; |
| 38 |
|
| 39 |
if ( ! family || fontRequests[ family + weight ] || typeof window.WebFont !== 'object' ) { |
| 40 |
return; |
| 41 |
} |
| 42 |
|
| 43 |
request = family + ( weight ? ':' + weight : '' ); |
| 44 |
fontRequests[ family + weight ] = true; |
| 45 |
window.WebFont.load( { google: { families: [ request ] } } ); |
| 46 |
} |
| 47 |
|
| 48 |
function applyTypography( $elements, group, defaults ) { |
| 49 |
var family = typographyOption( group, 'font-family', defaults.family ); |
| 50 |
var backup = typographyOption( group, 'backup-font-family', defaults.backup ); |
| 51 |
var weight = typographyOption( group, 'font-weight', defaults.weight ); |
| 52 |
var style = typographyOption( group, 'font-style', 'normal' ); |
| 53 |
var size = typographyOption( group, 'font-size', defaults.size ); |
| 54 |
var lineHeight = typographyOption( group, 'line-height', defaults.lineHeight ); |
| 55 |
var textTransform = typographyOption( group, 'text-transform', '' ); |
| 56 |
var letterSpacing = typographyOption( group, 'letter-spacing', '' ); |
| 57 |
var textAlign = typographyOption( group, 'text-align', '' ); |
| 58 |
var unit = typographyOption( group, 'unit', 'px' ); |
| 59 |
var fontStack = family; |
| 60 |
var styles; |
| 61 |
|
| 62 |
if ( backup ) { |
| 63 |
fontStack += ', ' + backup; |
| 64 |
} |
| 65 |
|
| 66 |
// CSF "Default" stores an empty string — treat that as none so a prior |
| 67 |
// lowercase/uppercase choice does not stick on the live preview. |
| 68 |
styles = { |
| 69 |
'font-family': fontStack, |
| 70 |
'font-size': size ? size + unit : '', |
| 71 |
'font-style': style, |
| 72 |
'font-weight': weight, |
| 73 |
'line-height': lineHeight ? lineHeight + unit : '', |
| 74 |
'text-transform': textTransform || 'none', |
| 75 |
'letter-spacing': letterSpacing !== '' ? letterSpacing + unit : '', |
| 76 |
'text-align': textAlign || '' |
| 77 |
}; |
| 78 |
|
| 79 |
$elements.css( styles ); |
| 80 |
|
| 81 |
if ( typographyOption( group, 'type', '' ) === 'google' ) { |
| 82 |
requestGoogleFont( family, weight ); |
| 83 |
} |
| 84 |
} |
| 85 |
|
| 86 |
function updatePreview() { |
| 87 |
var $previews = $( '.ctl-settings-preview' ).filter( ':visible' ); |
| 88 |
var circleColor; |
| 89 |
|
| 90 |
if ( ! $previews.length ) { |
| 91 |
return; |
| 92 |
} |
| 93 |
|
| 94 |
// Free Style Settings expose a smaller color set — map what exists, keep Pro-like defaults for the rest. |
| 95 |
circleColor = option( 'circle_border_color', '#38aab7' ); |
| 96 |
|
| 97 |
$previews.each( function() { |
| 98 |
var $preview = $( this ); |
| 99 |
var startsFromRight = option( 'first_story_position', 'right' ) === 'right'; |
| 100 |
|
| 101 |
$preview.toggleClass( 'ctl-settings-preview--starts-right', startsFromRight ); |
| 102 |
|
| 103 |
this.style.setProperty( '--ctl-preview-background', option( 'content_bg_color', '#ffffff' ) ); |
| 104 |
this.style.setProperty( '--ctl-preview-content', '#666666' ); |
| 105 |
this.style.setProperty( '--ctl-preview-caption', '#ffffff' ); |
| 106 |
this.style.setProperty( '--ctl-preview-title', '#ffffff' ); |
| 107 |
this.style.setProperty( '--ctl-preview-year-background', circleColor ); |
| 108 |
this.style.setProperty( '--ctl-preview-year-color', '#ffffff' ); |
| 109 |
this.style.setProperty( '--ctl-preview-line', option( 'line_color', '#025149' ) ); |
| 110 |
this.style.setProperty( '--ctl-preview-line-fill', circleColor ); |
| 111 |
this.style.setProperty( '--ctl-preview-first', option( 'first_post', '#29b246' ) ); |
| 112 |
this.style.setProperty( '--ctl-preview-second', option( 'second_post', '#ce792f' ) ); |
| 113 |
/* Dates follow alternating story colors (same as front-end .ctl-label-big). */ |
| 114 |
this.style.setProperty( '--ctl-preview-date', option( 'first_post', '#29b246' ) ); |
| 115 |
this.style.setProperty( '--ctl-preview-read-more-radius', '10px' ); |
| 116 |
|
| 117 |
applyTypography( $preview.find( '.ctl-settings-preview__date' ), 'ctl_date_typo', { |
| 118 |
family: 'Maven Pro', backup: 'sans-serif', weight: '700', size: '21', lineHeight: '' |
| 119 |
} ); |
| 120 |
applyTypography( $preview.find( '.ctl-settings-preview__card h4' ), 'post_title_typo', { |
| 121 |
family: 'Maven Pro', backup: 'sans-serif', weight: '700', size: '20', lineHeight: '' |
| 122 |
} ); |
| 123 |
applyTypography( $preview.find( '.ctl-settings-preview__content' ), 'post_content_typo', { |
| 124 |
family: 'Maven Pro', backup: 'sans-serif', weight: '400', size: '16', lineHeight: '' |
| 125 |
} ); |
| 126 |
applyTypography( $preview.find( '.ctl-settings-preview__caption' ), 'post_content_typo', { |
| 127 |
family: 'Maven Pro', backup: 'sans-serif', weight: '400', size: '16', lineHeight: '' |
| 128 |
} ); |
| 129 |
} ); |
| 130 |
} |
| 131 |
|
| 132 |
function scheduleUpdate() { |
| 133 |
if ( scheduleUpdate.pending ) { |
| 134 |
return; |
| 135 |
} |
| 136 |
|
| 137 |
scheduleUpdate.pending = true; |
| 138 |
window.requestAnimationFrame( function() { |
| 139 |
scheduleUpdate.pending = false; |
| 140 |
updatePreview(); |
| 141 |
} ); |
| 142 |
} |
| 143 |
|
| 144 |
$( function() { |
| 145 |
if ( ! $( '.ctl-settings-preview' ).length ) { |
| 146 |
return; |
| 147 |
} |
| 148 |
|
| 149 |
updatePreview(); |
| 150 |
$( '#csf-form' ).on( 'input change', ':input', scheduleUpdate ); |
| 151 |
|
| 152 |
$( document ).on( 'click', '.wp-color-result, .wp-picker-clear, .wp-picker-default', function() { |
| 153 |
window.setTimeout( scheduleUpdate, 0 ); |
| 154 |
} ); |
| 155 |
|
| 156 |
$( window ).on( 'hashchange csf.hashchange', function() { |
| 157 |
window.setTimeout( scheduleUpdate, 0 ); |
| 158 |
} ); |
| 159 |
} ); |
| 160 |
}( jQuery ) ); |
| 161 |
|
