index.php — Kubio AI Page Builder 2.8.3

kubio / build / block-library / blocks / heading / index.php

kubio / build / block-library / blocks / heading Last commit date

block.json 3 years ago index.php 1 year ago

index.php

202 lines

1	<?php
2
3
4	namespace Kubio\Blocks;
5
6	use Kubio\AssetsDependencyInjector;
7	use Kubio\Core\Blocks\BlockBase;
8	use Kubio\Core\LodashBasic;
9	use Kubio\Core\Registry;
10
11	class HeadingBlock extends BlockBase {
12
13	const TEXT = 'text';
14	const SVG = 'svgShape';
15
16	public function mapPropsToElements() {
17
18	$headingType = $this->getProp( 'level', $this->getAttribute( 'headerType', 2 ) );
19
20	$tagName = esc_attr( "h$headingType" );
21	$fancyHtml = $this->getFancyHtml();
22	return array(
23	self::TEXT => array(
24	'tag' => $tagName,
25	'innerHTML' => $fancyHtml,
26	),
27	);
28	}
29
30
31	public function getFancyHtml() {
32	$params = $this->getFancyParameters();
33	$fancy = LodashBasic::get( $params, 'fancy' );
34	$content = $this->getBlockInnerHtml();
35	$typeStyle = LodashBasic::get( $fancy, 'typeStyle' );
36	$typeAnimation = LodashBasic::get( $fancy, 'typeAnimation' );
37	$fancyWord = LodashBasic::get( $fancy, 'fancyWord' );
38
39	if ( ! $typeStyle \|\| $typeStyle === 'none' \|\| ! $fancyWord ) {
40	return $content;
41	}
42	$fancyHtml = '';
43	if ( $typeStyle === 'highlighted' ) {
44	$fancyHtml = $this->getHighlightHeading( $fancy );
45	} else {
46	if ( $typeAnimation !== 'type' ) {
47	$fancyHtml = $this->getRotatingHeading( $fancy );
48	} else {
49	$fancyHtml = $this->getRotatingTypeHeading( $fancy );
50	}
51	}
52
53	$fancyHtml = preg_replace( "/\r\|\t/i", '', $fancyHtml );
54	$fancyRegex = sprintf( '/%s/i', preg_quote( $fancyWord ) );
55	$htmlContent = preg_replace( $fancyRegex, $fancyHtml, $content );
56
57	if ( $typeAnimation === 'type' ) {
58	AssetsDependencyInjector::injectKubioScriptDependencies( 'typed' );
59	}
60
61	return $htmlContent;
62	}
63
64	public function getFancyParameters() {
65	return array(
66	'fancy' => $content = $this->getProp( 'fancy' ),
67	'content' => $this->getBlockInnerHtml(),
68	);
69	}
70
71	public function getHighlightHeading( $fancy ) {
72	$fancy_word = LodashBasic::get( $fancy, 'fancyWord' );
73	$bringToFront = LodashBasic::get( $fancy, 'bringToFront' );
74	$typeShape = LodashBasic::get( $fancy, 'typeShape' );
75	$classes = array( 'text-animation-fancy' );
76	if ( $bringToFront ) {
77	$classes[] = 'bring-to-front';
78	}
79
80	$svgList = $this->getFancySvgList();
81	$svg = LodashBasic::get( $svgList, $typeShape );
82	ob_start();
83
84	?>
85	<span class="fancy-title-headline d-inline-flex">
86	<span class="text-wrapper-fancy">
87	<span class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
88	<?php echo wp_kses_post( $fancy_word ); ?>
89	</span>
90	<?php
91	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
92	echo $svg;
93	?>
94	</span>
95	</span>
96	<?php
97
98	$htmlContent = str_replace( "\n", '', ob_get_clean() );
99
100	return $htmlContent;
101	}
102
103	public function getFancySvgList() {
104	return array(
105	'circle' =>
106	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M325,18C228.7-8.3,118.5,8.3,78,21C22.4,38.4,4.6,54.6,5.6,77.6c1.4,32.4,52.2,54,142.6,63.7 c66.2,7.1,212.2,7.5,273.5-8.3c64.4-16.6,104.3-57.6,33.8-98.2C386.7-4.9,179.4-1.4,126.3,20.7"/></svg>',
107	'curly' =>
108	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M3,146.1c17.1-8.8,33.5-17.8,51.4-17.8c15.6,0,17.1,18.1,30.2,18.1c22.9,0,36-18.6,53.9-18.6 c17.1,0,21.3,18.5,37.5,18.5c21.3,0,31.8-18.6,49-18.6c22.1,0,18.8,18.8,36.8,18.8c18.8,0,37.5-18.6,49-18.6c20.4,0,17.1,19,36.8,19 c22.9,0,36.8-20.6,54.7-18.6c17.7,1.4,7.1,19.5,33.5,18.8c17.1,0,47.2-6.5,61.1-15.6"></path></svg>',
109	'underline' =>
110	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2.2,87.6,11.8,87.3,25.7"></path></svg>',
111	'double' =>
112	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M8.4,143.1c14.2-8,97.6-8.8,200.6-9.2c122.3-0.4,287.5,7.2,287.5,7.2"></path><path d="M8,19.4c72.3-5.3,162-7.8,216-7.8c54,0,136.2,0,267,7.8"></path></svg>',
113	'double-underline' =>
114	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M5,125.4c30.5-3.8,137.9-7.6,177.3-7.6c117.2,0,252.2,4.7,312.7,7.6"></path><path d="M26.9,143.8c55.1-6.1,126-6.3,162.2-6.1c46.5,0.2,203.9,3.2,268.9,6.4"></path></svg>',
115	'underline-zigzag' =>
116	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M9.3,127.3c49.3-3,150.7-7.6,199.7-7.4c121.9,0.4,189.9,0.4,282.3,7.2C380.1,129.6,181.2,130.6,70,139 c82.6-2.9,254.2-1,335.9,1.3c-56,1.4-137.2-0.3-197.1,9"></path></svg>',
117	'diagonal' =>
118	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M13.5,15.5c131,13.7,289.3,55.5,475,125.5"></path></svg>',
119	'strikethrough' =>
120	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M3,75h493.5"></path></svg>',
121	'x' =>
122	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none"><path d="M497.4,23.9C301.6,40,155.9,80.6,4,144.4"></path><path d="M14.1,27.6c204.5,20.3,393.8,74,467.3,111.7"></path></svg>',
123
124	);
125	}
126
127	public function getRotatingHeading( $fancy ) {
128	$duration = LodashBasic::get( $fancy, 'animationDuration.value' );
129	$animation = LodashBasic::get( $fancy, 'typeAnimation' );
130	$rotating_html = $this->getRotatingHtml( $fancy );
131	ob_start();
132
133	?>
134	<span data-kubio-component="fancy-title"
135	data-animation-duration="<?php echo esc_attr( $duration ); ?>"
136	data-type-animation="<?php echo esc_attr( $animation ); ?>"
137	>
138	<span class='ah-headline <?php echo esc_attr( $animation ); ?>'>
139	<span style="position: relative" class="ah-words-wrapper">
140	<?php echo wp_kses_post( $rotating_html ); ?>
141	</span>
142	</span>
143	</span>
144	<?php
145	$htmlContent = str_replace( "\n", '', ob_get_clean() );
146
147	return $htmlContent;
148	}
149
150	public function getRotatingHtml( $fancy ) {
151	$fancy_rotating_words = LodashBasic::get( $fancy, 'fancyRotatingWords' );
152	$fancy_rotating_words = explode( "\n", $fancy_rotating_words );
153	$fancy_word = LodashBasic::get( $fancy, 'fancyWord' );
154	$fancy_rotating_words[] = $fancy_word;
155	$rotating_content = array_map(
156	function ( $word, $index ) {
157	$modified_word = str_replace( ' ', ' ', $word );
158	ob_start();
159	?>
160	<b class="<?php echo ( $index === 0 ? 'is-visible' : '' ); ?>">
161	<?php echo wp_kses_post( $modified_word ); ?>
162	</b>
163	<?php
164	return str_replace( "\n", '', ob_get_clean() );
165	},
166	$fancy_rotating_words,
167	array_keys( $fancy_rotating_words )
168	);
169
170	return implode( '', $rotating_content );
171	}
172
173	public function getRotatingTypeHeading( $fancy ) {
174
175	$animationDuration = LodashBasic::get( $fancy, 'animationDuration.value' );
176	$typeAnimationDurationIn = LodashBasic::get( $fancy, 'type.animationDuration.in.value' );
177	$typeAnimationDurationOut = LodashBasic::get( $fancy, 'type.animationDuration.out.value' );
178	$typeAnimation = LodashBasic::get( $fancy, 'typeAnimation' );
179	$fancy_word = LodashBasic::get( $fancy, 'fancyWord' );
180	$fancy_rotating_words = LodashBasic::get( $fancy, 'fancyRotatingWords' );
181	ob_start();
182
183	?>
184	<span data-kubio-component="fancy-title"
185	data-animation-duration="<?php echo esc_attr( $animationDuration ); ?>"
186	data-type-animation-duration-in="<?php echo esc_attr( $typeAnimationDurationIn ); ?>"
187	data-type-animation-duration-out="<?php echo esc_attr( $typeAnimationDurationOut ); ?>"
188	data-type-animation="<?php echo esc_attr( $typeAnimation ); ?>"
189	data-word="<?php echo esc_attr( $fancy_word ); ?>"
190	data-rotating-words="<?php echo esc_attr( $fancy_rotating_words ); ?>"
191	data-animation-type="true">
192
193	<?php echo wp_kses_post( $fancy_word ); ?>
194	</span>
195	<?php
196	$htmlContent = ob_get_clean();
197	return $htmlContent;
198	}
199	}
200
201	Registry::registerBlock( __DIR__, HeadingBlock::class );
202