| 1 |
/** |
| 2 |
* WordPress dependencies |
| 3 |
*/ |
| 4 |
import { __ } from '@wordpress/i18n'; |
| 5 |
import UAGSelectControl from '@Components/select-control'; |
| 6 |
import RangeTypographyControl from './range-typography'; |
| 7 |
import googleFonts from '@Controls/fonts'; |
| 8 |
import Select from 'react-select'; |
| 9 |
|
| 10 |
const { uag_select_font_globally , uag_load_select_font_globally } = uagb_blocks_info; |
| 11 |
|
| 12 |
function FontFamilyControl( props ) { |
| 13 |
|
| 14 |
const fonts = []; |
| 15 |
|
| 16 |
let fontWeight = ''; |
| 17 |
|
| 18 |
const customFonts = uagb_blocks_info.spectra_custom_fonts; |
| 19 |
|
| 20 |
//Push Google Fonts into stytem fonts object |
| 21 |
Object.keys( googleFonts ).map( ( k ) => { // eslint-disable-line array-callback-return |
| 22 |
fonts.push( { value: k, label: k, weight: googleFonts[ k ].weight } ); |
| 23 |
|
| 24 |
if ( k === props.fontFamily.value ) { |
| 25 |
fontWeight = googleFonts[ k ].weight; |
| 26 |
} |
| 27 |
} ); |
| 28 |
|
| 29 |
//Push custom Fonts into stytem fonts object. |
| 30 |
Object.keys( customFonts ).map( ( k ) => { // eslint-disable-line array-callback-return |
| 31 |
fonts.push( { value: k, label: k, weight: customFonts[ k ].weight } ); |
| 32 |
if ( k === props.fontFamily.value ) { |
| 33 |
fontWeight = customFonts[ k ].weight; |
| 34 |
} |
| 35 |
} ); |
| 36 |
|
| 37 |
// check if the font is a system font and then apply the font weight accordingly. |
| 38 |
if ( fontWeight === '' ) { |
| 39 |
fontWeight = fonts[ 0 ].weight; |
| 40 |
} |
| 41 |
|
| 42 |
const fontWeightObj = []; |
| 43 |
fontWeight.forEach( function ( item ) { |
| 44 |
fontWeightObj.push( { |
| 45 |
value: ( 'Default' === item ) ? '' : item, |
| 46 |
label: item, |
| 47 |
} ); |
| 48 |
} ); |
| 49 |
|
| 50 |
|
| 51 |
const onFontfamilyChange = ( value ) => { |
| 52 |
const font = value.value; |
| 53 |
const { loadGoogleFonts, fontFamily } = props; // eslint-disable-line no-shadow |
| 54 |
props.setAttributes( { [ fontFamily.label ]: font } ); |
| 55 |
onLoadGoogleFonts( loadGoogleFonts, font ); |
| 56 |
}; |
| 57 |
|
| 58 |
const onLoadGoogleFonts = ( loadGoogleFonts, fontFamily ) => { |
| 59 |
let value; |
| 60 |
|
| 61 |
if ( |
| 62 |
fontFamily !== '' && |
| 63 |
typeof googleFonts[ fontFamily ] !== 'object' |
| 64 |
) { |
| 65 |
value = false; |
| 66 |
} else { |
| 67 |
value = true; |
| 68 |
} |
| 69 |
|
| 70 |
props.setAttributes( { [ loadGoogleFonts.label ]: value } ); |
| 71 |
}; |
| 72 |
|
| 73 |
const gFonts = uag_load_select_font_globally === 'enabled' && uag_select_font_globally !== 0 ? uag_select_font_globally : fonts; |
| 74 |
|
| 75 |
const customSelectStyles = { |
| 76 |
container: ( provided ) => ( { |
| 77 |
...provided, |
| 78 |
width: '100%', |
| 79 |
} ), |
| 80 |
control: ( provided ) => ( { |
| 81 |
...provided, |
| 82 |
border: '1px solid #E6E7E9', |
| 83 |
boxShadow: 'none', |
| 84 |
height: '30px', |
| 85 |
minHeight: '30px', |
| 86 |
borderRadius: '3px', |
| 87 |
} ), |
| 88 |
placeholder: ( provided ) => ( { |
| 89 |
...provided, |
| 90 |
color: '#50575E', |
| 91 |
} ), |
| 92 |
menu: ( provided ) => ( { |
| 93 |
...provided, |
| 94 |
color: '#50575E', |
| 95 |
} ), |
| 96 |
singleValue: ( provided ) => ( { |
| 97 |
...provided, |
| 98 |
color: '#50575E', |
| 99 |
top: '50%', |
| 100 |
transform: 'translateY(-50%);', |
| 101 |
} ), |
| 102 |
indicatorSeparator: ( provided ) => ( { |
| 103 |
...provided, |
| 104 |
display: 'none', |
| 105 |
} ), |
| 106 |
dropdownIndicator: ( provided ) => ( { |
| 107 |
...provided, |
| 108 |
color: '#50575E', |
| 109 |
} ), |
| 110 |
valueContainer: ( provided ) => ( { |
| 111 |
...provided, |
| 112 |
height: '30px', |
| 113 |
padding: '0px 8px', |
| 114 |
} ), |
| 115 |
} |
| 116 |
|
| 117 |
let fontFamilyValue; |
| 118 |
//Push Google Fonts into stytem fonts object |
| 119 |
if ( gFonts ) { |
| 120 |
gFonts.map( ( font ) => { // eslint-disable-line array-callback-return |
| 121 |
|
| 122 |
if ( ! props.fontFamily.weight && font.value === props.fontFamily.value ) { |
| 123 |
fontFamilyValue = { ...props.fontFamily, weight: font.weight, label: font.value }; |
| 124 |
} |
| 125 |
} ); |
| 126 |
} |
| 127 |
|
| 128 |
let fontSize; |
| 129 |
const fontSizeStepsVal = ( 'em' === props.fontSizeType.value ? 0.1 : 1 ); // fractional value when unit is em. |
| 130 |
if ( true !== props.disableFontSize ) { |
| 131 |
fontSize = ( |
| 132 |
<RangeTypographyControl |
| 133 |
type={ props.fontSizeType } |
| 134 |
typeLabel={ props.fontSizeType.label } |
| 135 |
sizeMobile={ props.fontSizeMobile } |
| 136 |
sizeMobileLabel={ props.fontSizeMobile.label } |
| 137 |
sizeTablet={ props.fontSizeTablet } |
| 138 |
sizeTabletLabel={ props.fontSizeTablet.label } |
| 139 |
size={ props.fontSize } |
| 140 |
sizeLabel={ props.fontSize.label } |
| 141 |
sizeMobileText={ |
| 142 |
! props.fontSizeLabel |
| 143 |
? __( 'Font Size', 'ultimate-addons-for-gutenberg' ) |
| 144 |
: props.fontSizeLabel |
| 145 |
} |
| 146 |
sizeTabletText={ |
| 147 |
! props.fontSizeLabel |
| 148 |
? __( 'Font Size', 'ultimate-addons-for-gutenberg' ) |
| 149 |
: props.fontSizeLabel |
| 150 |
} |
| 151 |
sizeText={ |
| 152 |
! props.fontSizeLabel |
| 153 |
? __( 'Font Size', 'ultimate-addons-for-gutenberg' ) |
| 154 |
: props.fontSizeLabel |
| 155 |
} |
| 156 |
step={ fontSizeStepsVal } |
| 157 |
{ ...props } |
| 158 |
/> |
| 159 |
); |
| 160 |
} |
| 161 |
|
| 162 |
return ( |
| 163 |
<> |
| 164 |
{ /* Font Family */ } |
| 165 |
<div className="components-base-control uag-font-family-searchable-select__wrapper"> |
| 166 |
<label className="components-input-control__label" htmlFor="font-family">{ __( 'Font Family' ) }</label> |
| 167 |
<Select |
| 168 |
styles={ customSelectStyles } |
| 169 |
placeholder={ __( 'Default', 'ultimate-addons-for-gutenberg' ) } |
| 170 |
onChange={ onFontfamilyChange } |
| 171 |
options={ gFonts } |
| 172 |
value={ fontFamilyValue } |
| 173 |
defaultValue = { fontFamilyValue } |
| 174 |
isSearchable={true} |
| 175 |
className="uag-font-family-searchable-select" |
| 176 |
classNamePrefix="uag-font-family-select" |
| 177 |
/> |
| 178 |
</div> |
| 179 |
{ /* Font Size*/ } |
| 180 |
{ fontSize } |
| 181 |
{ /* Font Weitght */ } |
| 182 |
<UAGSelectControl |
| 183 |
label={ __( |
| 184 |
'Weight', |
| 185 |
'ultimate-addons-for-gutenberg' |
| 186 |
) } |
| 187 |
data={ { |
| 188 |
value: props.fontWeight.value, |
| 189 |
label: props.fontWeight.label, |
| 190 |
} } |
| 191 |
setAttributes={ props.setAttributes } |
| 192 |
options={ fontWeightObj } |
| 193 |
/> |
| 194 |
{ /* Font Style */ } |
| 195 |
{ props.fontStyle && |
| 196 |
<UAGSelectControl |
| 197 |
label={ __( |
| 198 |
'Style', |
| 199 |
'ultimate-addons-for-gutenberg' |
| 200 |
) } |
| 201 |
data={ { |
| 202 |
value: props.fontStyle.value, |
| 203 |
label: props.fontStyle.label, |
| 204 |
} } |
| 205 |
setAttributes={ props.setAttributes } |
| 206 |
options={ [ |
| 207 |
{ |
| 208 |
value: 'normal', |
| 209 |
label: __( |
| 210 |
'Default', |
| 211 |
'ultimate-addons-for-gutenberg' |
| 212 |
), |
| 213 |
}, |
| 214 |
{ |
| 215 |
value: 'italic', |
| 216 |
label: __( |
| 217 |
'Italic', |
| 218 |
'ultimate-addons-for-gutenberg' |
| 219 |
), |
| 220 |
}, |
| 221 |
{ |
| 222 |
value: 'oblique', |
| 223 |
label: __( |
| 224 |
'Oblique', |
| 225 |
'ultimate-addons-for-gutenberg' |
| 226 |
), |
| 227 |
}, |
| 228 |
] } |
| 229 |
/> |
| 230 |
} |
| 231 |
</> |
| 232 |
); |
| 233 |
} |
| 234 |
|
| 235 |
export default FontFamilyControl; |
| 236 |
|
