Block Animations, Motion & Scroll Effects – Ghost Kit / 2.25.0

Block Animations, Motion & Scroll Effects – Ghost Kit v2.25.0

ghostkit / gutenberg / components / typography / index.js

index.js in Block Animations, Motion & Scroll Effects – Ghost Kit 2.25.0, at gutenberg/components/typography/index.js

443 lines 13.6 KB

Raw Download Zip

1	/**
2	* Internal dependencies
3	*/
4	import Select from '../select';
5	import InputDrag from '../input-drag';
6	import getIcon from '../../utils/get-icon';
7	import ApplyFilters from '../apply-filters';
8
9	/**
10	* WordPress dependencies
11	*/
12	const { Component } = wp.element;
13
14	const { Tooltip, DropdownMenu, MenuGroup, MenuItem, ExternalLink } = wp.components;
15
16	const { __ } = wp.i18n;
17
18	const { applyFilters } = wp.hooks;
19
20	const { GHOSTKIT } = window;
21
22	/**
23	* Get Default Font
24	* @param {string} fontFamily - Current Font.
25	* @return {*} - Current font or default label if font is empty.
26	*/
27	function getDefaultFont(fontFamily) {
28	return fontFamily === '' ? __('Default Site Font', 'ghostkit') : fontFamily;
29	}
30
31	/**
32	* Go over each fonts.
33	*
34	* @param {string} category - Font Family Category.
35	* @return {*[]} - Fonts List.
36	*/
37	function getFonts(category = 'google-fonts') {
38	const { fonts } = GHOSTKIT;
39
40	const fontList = [];
41
42	Object.keys(fonts).forEach((fontFamilyCategory) => {
43	Object.keys(fonts[fontFamilyCategory].fonts).forEach((fontKey) => {
44	const fontData = fonts[fontFamilyCategory].fonts[fontKey];
45	let fontValue = fontData.name;
46
47	if (fontFamilyCategory === 'default') {
48	fontValue = '';
49	}
50
51	if (category === fontFamilyCategory \|\| fontFamilyCategory === 'default') {
52	fontList.push({
53	value: fontValue,
54	label: fontData.label \|\| fontData.name,
55	fontFamilyCategory,
56	});
57	}
58	});
59	});
60
61	return fontList;
62	}
63
64	/**
65	* Get Weight Label.
66	*
67	* @param {string} weight - Weight Value.
68	* @return {string} - Weight Label.
69	*/
70	function getFontWeightLabel(weight) {
71	let label = '';
72
73	switch (weight) {
74	case '':
75	label = __('Default', 'ghostkit');
76	break;
77	case '100':
78	label = __('Thin', 'ghostkit');
79	break;
80	case '100i':
81	label = __('Thin Italic', 'ghostkit');
82	break;
83	case '200':
84	label = __('Extra Light', 'ghostkit');
85	break;
86	case '200i':
87	label = __('Extra Light Italic', 'ghostkit');
88	break;
89	case '300':
90	label = __('Light', 'ghostkit');
91	break;
92	case '300i':
93	label = __('Light Italic', 'ghostkit');
94	break;
95	case '400':
96	label = __('Regular', 'ghostkit');
97	break;
98	case '400i':
99	label = __('Regular Italic', 'ghostkit');
100	break;
101	case '500':
102	label = __('Medium', 'ghostkit');
103	break;
104	case '500i':
105	label = __('Medium Italic', 'ghostkit');
106	break;
107	case '600':
108	label = __('Semi Bold', 'ghostkit');
109	break;
110	case '600i':
111	label = __('Semi Bold Italic', 'ghostkit');
112	break;
113	case '700':
114	label = __('Bold', 'ghostkit');
115	break;
116	case '700i':
117	label = __('Bold Italic', 'ghostkit');
118	break;
119	case '800':
120	label = __('Extra Bold', 'ghostkit');
121	break;
122	case '800i':
123	label = __('Extra Bold Italic', 'ghostkit');
124	break;
125	case '900':
126	label = __('Black', 'ghostkit');
127	break;
128	case '900i':
129	label = __('Black Italic', 'ghostkit');
130	break;
131	// no default
132	}
133
134	return label;
135	}
136
137	/**
138	* Get all font widths.
139	*
140	* @param {string} font - search font.
141	* @param {string} fontFamilyCategory - font fontFamilyCategory.
142	* @return {Array} - all font widths.
143	*/
144	function getFontWeights(font, fontFamilyCategory) {
145	const { fonts } = GHOSTKIT;
146
147	const fontWeights = [];
148
149	if (
150	font !== '' &&
151	fontFamilyCategory !== '' &&
152	typeof font !== 'undefined' &&
153	typeof fontFamilyCategory !== 'undefined' &&
154	typeof fonts[fontFamilyCategory] !== 'undefined'
155	) {
156	Object.keys(fonts[fontFamilyCategory].fonts).forEach((fontKey) => {
157	if (fonts[fontFamilyCategory].fonts[fontKey].name === font) {
158	Object.keys(fonts[fontFamilyCategory].fonts[fontKey].widths).forEach((widthKey) => {
159	const width = fonts[fontFamilyCategory].fonts[fontKey].widths[widthKey];
160	fontWeights.push({ value: width, label: getFontWeightLabel(width) });
161	});
162	}
163	});
164	}
165
166	return fontWeights;
167	}
168
169	/**
170	* Component Class
171	*/
172	export default class Typography extends Component {
173	render() {
174	const { fontFamilyCategory } = this.props;
175
176	const {
177	onChange,
178	placeholders,
179	label,
180	fontFamily,
181	fontWeight,
182	fontSize,
183	lineHeight,
184	letterSpacing,
185	childOf,
186	fontWeights = getFontWeights(getDefaultFont(fontFamily), fontFamilyCategory),
187	} = this.props;
188
189	const fontsIcon = `icon-typography-${
190	fontFamilyCategory === 'default' ? 'google-fonts' : fontFamilyCategory
191	}`;
192	const allowFontSelectors = applyFilters(
193	'ghostkit.typography.allow.fonts',
194	fontFamilyCategory !== 'adobe-fonts' && fontFamilyCategory !== 'custom-fonts',
195	fontFamilyCategory
196	);
197	const fontFamilyValue = {
198	value: fontFamily,
199	label: getDefaultFont(fontFamily),
200	fontFamilyCategory,
201	};
202	const fontWeightValue = { value: fontWeight, label: getFontWeightLabel(fontWeight) };
203	const fontSizeValue = typeof fontSize === 'undefined' ? '' : fontSize;
204	let fontFamilies;
205
206	if (fontFamilyCategory === 'default') {
207	fontFamilies = getFonts('google-fonts');
208	} else {
209	fontFamilies = getFonts(fontFamilyCategory);
210	}
211
212	// Find actual label.
213	if (fontFamilyValue.value) {
214	fontFamilies.forEach((familyData) => {
215	if (fontFamilyValue.value === familyData.value) {
216	fontFamilyValue.label = familyData.label;
217	}
218	});
219	}
220
221	return (
222	<div
223	className={`ghostkit-typography${
224	childOf ? ` ghostkit-typography-child ghostkit-typography-child-of-${childOf}` : ''
225	}`}
226	>
227	<h4>{label}</h4>
228	<div className="ghostkit-control-typography">
229	{typeof fontFamilyCategory !== 'undefined' ? (
230	<DropdownMenu
231	icon={getIcon(fontsIcon, false)}
232	label={__('Font Family Category', 'ghostkit')}
233	popoverProps={{
234	position: 'bottom right',
235	}}
236	menuProps={{
237	className: 'ghostkit-typography-font-category-control-menu',
238	}}
239	toggleProps={{
240	className: 'ghostkit-typography-font-category-control-toggle',
241	}}
242	hasArrowIndicator
243	>
244	{({ onClose }) => (
245	<MenuGroup>
246	<MenuItem
247	icon={getIcon('icon-typography-google-fonts', false)}
248	onClick={() => {
249	onChange({
250	fontFamilyCategory: 'google-fonts',
251	fontFamily: '',
252	fontWeight: '',
253	});
254	onClose();
255	}}
256	>
257	{__('Google Fonts', 'ghostkit')}
258	</MenuItem>
259	<MenuItem
260	icon={getIcon('icon-typography-adobe-fonts', false)}
261	onClick={() => {
262	onChange({
263	fontFamilyCategory: 'adobe-fonts',
264	fontFamily: '',
265	fontWeight: '',
266	});
267	onClose();
268	}}
269	>
270	{__('Adobe Fonts', 'ghostkit')}
271	<span className="ghostkit-typography-badge-pro">
272	{__('PRO', 'ghostkit')}
273	</span>
274	</MenuItem>
275	<MenuItem
276	icon={getIcon('icon-typography-custom-fonts', false)}
277	onClick={() => {
278	onChange({
279	fontFamilyCategory: 'custom-fonts',
280	fontFamily: '',
281	fontWeight: '',
282	});
283	onClose();
284	}}
285	>
286	{__('Custom Fonts', 'ghostkit')}
287	<span className="ghostkit-typography-badge-pro">
288	{__('PRO', 'ghostkit')}
289	</span>
290	</MenuItem>
291	</MenuGroup>
292	)}
293	</DropdownMenu>
294	) : (
295	''
296	)}
297	<ApplyFilters name="ghostkit.typography.fontFamilySelector.info" props={this.props}>
298	{fontFamilyCategory === 'adobe-fonts' ? (
299	<div className="ghostkit-typography-information-control ghostkit-typography-font-control">
300	{__(
301	'Adobe Fonts available for Pro users only. Read more about Ghost Kit Pro plugin here - ',
302	'ghostkit'
303	)}
304	<ExternalLink href="https://ghostkit.io/pricing/?utm_source=plugin&utm_medium=settings&utm_campaign=adobe_fonts&utm_content=2.25.0">
305	https://ghostkit.io/pricing/
306	</ExternalLink>
307	</div>
308	) : (
309	''
310	)}
311	{fontFamilyCategory === 'custom-fonts' ? (
312	<div className="ghostkit-typography-information-control ghostkit-typography-font-control">
313	{__(
314	'Custom Fonts available for Pro users only. Read more about Ghost Kit Pro plugin here - ',
315	'ghostkit'
316	)}
317	<ExternalLink href="https://ghostkit.io/pricing/?utm_source=plugin&utm_medium=settings&utm_campaign=custom_fonts&utm_content=2.25.0">
318	https://ghostkit.io/pricing/
319	</ExternalLink>
320	</div>
321	) : (
322	''
323	)}
324	</ApplyFilters>
325	{typeof fontFamily !== 'undefined' && allowFontSelectors ? (
326	<div className="ghostkit-typography-font-control">
327	<Tooltip text={__('Font Family', 'ghostkit')}>
328	<div>
329	<Select
330	value={fontFamilyValue}
331	onChange={(opt) => {
332	onChange({
333	fontFamily: opt && opt.value ? opt.value : '',
334	fontWeight: opt && opt.value ? '400' : '',
335	});
336	}}
337	options={fontFamilies}
338	placeholder={__('--- Select Font Family ---', 'ghostkit')}
339	className="ghostkit-typography-font-selector"
340	menuPosition="fixed"
341	/>
342	</div>
343	</Tooltip>
344	</div>
345	) : (
346	''
347	)}
348	{typeof fontWeight !== 'undefined' && allowFontSelectors ? (
349	<div className="ghostkit-typography-weight-control">
350	<Tooltip text={__('Font Weight', 'ghostkit')}>
351	<div>
352	<Select
353	value={fontWeightValue}
354	onChange={(opt) => {
355	onChange({
356	fontWeight: opt && opt.value ? opt.value : '',
357	});
358	}}
359	options={fontWeights}
360	placeholder={__('--- Select Weight ---', 'ghostkit')}
361	className="ghostkit-typography-weight-selector"
362	classNamePrefix="ghostkit-typography-weight-selector"
363	menuPosition="fixed"
364	/>
365	</div>
366	</Tooltip>
367	</div>
368	) : (
369	''
370	)}
371	{typeof fontSize !== 'undefined' ? (
372	<div className="ghostkit-typography-size-control">
373	<Tooltip text={__('Font Size', 'ghostkit')}>
374	<div>
375	<InputDrag
376	value={fontSizeValue}
377	placeholder={placeholders['font-size']}
378	onChange={(value) => {
379	onChange({
380	fontSize: value,
381	});
382	}}
383	autoComplete="off"
384	icon={getIcon('icon-typography-font-size')}
385	defaultUnit="px"
386	/>
387	</div>
388	</Tooltip>
389	</div>
390	) : (
391	''
392	)}
393	{typeof lineHeight !== 'undefined' ? (
394	<div className="ghostkit-typography-line-control">
395	<Tooltip text={__('Line Height', 'ghostkit')}>
396	<div>
397	<InputDrag
398	value={lineHeight}
399	placeholder={placeholders['line-height']}
400	onChange={(value) => {
401	onChange({
402	lineHeight: value,
403	});
404	}}
405	autoComplete="off"
406	icon={getIcon('icon-typography-line-height')}
407	step={0.1}
408	/>
409	</div>
410	</Tooltip>
411	</div>
412	) : (
413	''
414	)}
415	{typeof letterSpacing !== 'undefined' ? (
416	<div className="ghostkit-typography-letter-control">
417	<Tooltip text={__('Letter Spacing', 'ghostkit')}>
418	<div>
419	<InputDrag
420	value={letterSpacing}
421	placeholder={placeholders['letter-spacing']}
422	onChange={(value) => {
423	onChange({
424	letterSpacing: value,
425	});
426	}}
427	autoComplete="off"
428	icon={getIcon('icon-typography-letter-spacing')}
429	defaultUnit="em"
430	step={0.01}
431	/>
432	</div>
433	</Tooltip>
434	</div>
435	) : (
436	''
437	)}
438	</div>
439	</div>
440	);
441	}
442	}
443