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

Block Animations, Motion & Scroll Effects – Ghost Kit v3.3.2

ghostkit / gutenberg / components / typography / index.js

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

491 lines 12.0 KB

Raw Download Zip

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