editor.scss
7 years ago
font-typography.js
7 years ago
fontloader.js
7 years ago
index.js
7 years ago
inline-styles.js
7 years ago
font-typography.js
110 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | const { __ } = wp.i18n |
| 5 | |
| 6 | const { |
| 7 | SelectControl |
| 8 | } = wp.components |
| 9 | |
| 10 | // Extend component |
| 11 | const { Component, Fragment } = wp.element |
| 12 | |
| 13 | /** |
| 14 | * Internal dependencies |
| 15 | */ |
| 16 | import map from "lodash/map" |
| 17 | // import googleFonts from "./fonts" |
| 18 | import Select from "react-select" |
| 19 | |
| 20 | function FontFamilyControl( props ) { |
| 21 | |
| 22 | const fonts = [ |
| 23 | { value: "", label: __( "Default" ), weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 24 | { value: "Arial", label: "Arial", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 25 | { value: "Arial Black", label: "Arial Black", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 26 | { value: "Comic Sans MS", label: "Comic Sans MS", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 27 | { value: "Helvetica", label: "Helvetica", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 28 | { value: "Times New Roman", label: "Times New Roman", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 29 | { value: "Georgia", label: "Georgia", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 30 | { value: "Verdana", label: "Verdana", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 31 | { value: "Geneva", label: "Geneva", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 32 | { value: "sans-serif", label: "Sans Serif", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 33 | { value: "Trebuchet MS", label: "Trebuchet MS", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 34 | { value: "Palatino Linotype", label: "Palatino Linotype", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 35 | { value: "Book Antiqua", label: "Book Antiqua", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 36 | { value: "Lucida Console", label: "Lucida Console", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 37 | { value: "Lucida sans unicode", label: "Lucida sans unicode", weight: [ "100", "200", "300", "400", "500", "600", "700", "800", "900" ], google: false }, |
| 38 | ] |
| 39 | |
| 40 | let fontWeight = "" |
| 41 | let fontSubset = "" |
| 42 | |
| 43 | // check if the font is a system font and then apply the font weight accordingly. |
| 44 | if ( fontWeight === "" ) { |
| 45 | fontWeight = fonts[0].weight |
| 46 | } |
| 47 | |
| 48 | const fontWeightObj = [] |
| 49 | |
| 50 | fontWeight.forEach(function(item) { |
| 51 | fontWeightObj.push( |
| 52 | { value: item, label: item } |
| 53 | ) |
| 54 | }) |
| 55 | |
| 56 | const fontSubsetObj = [] |
| 57 | |
| 58 | if( typeof fontSubset == "object" ) { |
| 59 | fontSubset.forEach(function(item) { |
| 60 | fontSubsetObj.push( |
| 61 | { value: item, label: item } |
| 62 | ) |
| 63 | }) |
| 64 | } |
| 65 | |
| 66 | const onFontfamilyChange = ( value ) => { |
| 67 | const { fontFamily, fontWeight, fontSubset } = props |
| 68 | props.setAttributes( { [ fontFamily.label ]: value.label } ) |
| 69 | onFontChange( fontWeight, fontSubset, value.label ) |
| 70 | } |
| 71 | |
| 72 | const onFontChange = ( fontWeight, fontSubset, fontFamily ) => { |
| 73 | |
| 74 | |
| 75 | } |
| 76 | |
| 77 | return ( |
| 78 | <div className="uag-typography-font-family-options"> |
| 79 | <label class="uag-typography-font-family-label">{ __( "Font Family" ) }</label> |
| 80 | <Select |
| 81 | options={ fonts } |
| 82 | value={ { value: props.fontFamily.value, label: props.fontFamily.value, weight: fontWeightObj } } |
| 83 | isMulti={ false } |
| 84 | maxMenuHeight={ 300 } |
| 85 | onChange={ onFontfamilyChange } |
| 86 | className="react-select-container" |
| 87 | classNamePrefix="react-select" |
| 88 | /> |
| 89 | <SelectControl |
| 90 | label={ __( "Font Weight" ) } |
| 91 | value={ props.fontWeight.value } |
| 92 | onChange={ ( value ) => props.setAttributes( { [ props.fontWeight.label ]: value } ) } |
| 93 | options={ |
| 94 | fontWeightObj |
| 95 | } |
| 96 | /> |
| 97 | <SelectControl |
| 98 | label={ __( "Font Subset" ) } |
| 99 | value={ props.fontSubset.value } |
| 100 | onChange={ ( value ) => props.setAttributes( { [ props.fontSubset.label ]: value } ) } |
| 101 | options={ |
| 102 | fontSubsetObj |
| 103 | } |
| 104 | /> |
| 105 | </div> |
| 106 | ) |
| 107 | } |
| 108 | |
| 109 | export default FontFamilyControl |
| 110 |