PluginProbe
Bricksable for Bricks Builder / 1.3.0
Bricksable for Bricks Builder v1.3.0
1.2.9 1.3.0 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 1.4.1 1.4.2 1.4.3 1.4.31 1.4.32 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 All 132 releases
bricksable / includes / elements / element-text-notation.php

element-text-notation.php in Bricksable for Bricks Builder 1.3.0, at includes/elements/element-text-notation.php

564 lines 18.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 if ( ! defined( 'ABSPATH' ) ) {
4 exit; // Exit if accessed directly.
5 }
6
7 class Bricksable_Text_Notation extends \Bricks\Element {
8 public $category = 'bricksable';
9 public $name = 'ba-text-notation';
10 public $icon = 'ti-text';
11 public $scripts = array( 'bricksableTextNotation' );
12
13 public function get_label() {
14 return esc_html__( 'Text Notation', 'bricksable' );
15 }
16 public function set_control_groups() {
17 $this->control_groups['wrapper'] = array(
18 'title' => esc_html__( 'Wrapper / Tag', 'bricksable' ),
19 'tab' => 'content',
20 );
21 $this->control_groups['text'] = array(
22 'title' => esc_html__( 'Content', 'bricksable' ),
23 'tab' => 'content',
24 );
25 $this->control_groups['notation_settings'] = array(
26 'title' => esc_html__( 'Notation Settings', 'bricksable' ),
27 'tab' => 'content',
28 );
29 $this->control_groups['prefix_style'] = array(
30 'title' => esc_html__( 'Prefix Style', 'bricksable' ),
31 'tab' => 'style',
32 );
33 $this->control_groups['notation_style'] = array(
34 'title' => esc_html__( 'Notation Style', 'bricksable' ),
35 'tab' => 'style',
36 );
37 $this->control_groups['suffix_style'] = array(
38 'title' => esc_html__( 'Suffix Style', 'bricksable' ),
39 'tab' => 'style',
40 );
41 }
42 public function set_controls() {
43 $this->controls['_typography']['css'][0]['selector'] = '.ba-text-notation-wrapper-tag';
44 $this->controls['wrapper_tag'] = array(
45 'tab' => 'content',
46 'group' => 'wrapper',
47 'label' => esc_html__( 'Wrapper Tag', 'bricksable' ),
48 'type' => 'select',
49 'options' => array(
50 'h1' => esc_html__( 'Heading 1 (h1)', 'bricksable' ),
51 'h2' => esc_html__( 'Heading 2 (h2)', 'bricksable' ),
52 'h3' => esc_html__( 'Heading 3 (h3)', 'bricksable' ),
53 'h4' => esc_html__( 'Heading 4 (h4)', 'bricksable' ),
54 'h5' => esc_html__( 'Heading 5 (h5)', 'bricksable' ),
55 'h6' => esc_html__( 'Heading 6 (h6)', 'bricksable' ),
56 'div' => esc_html__( 'Division (div)', 'bricksable' ),
57 'p' => esc_html__( 'Paragraph (p)', 'bricksable' ),
58 'span' => esc_html__( 'Span (span)', 'bricksable' ),
59 ),
60 'clearable' => false,
61 'pasteStyles' => false,
62 'default' => 'p',
63 'description' => esc_html__( 'The main wrapper tag.', 'bricksable' ),
64 );
65 $this->controls['notation_tag'] = array(
66 'tab' => 'content',
67 'group' => 'text',
68 'label' => esc_html__( 'Notation Tag', 'bricksable' ),
69 'type' => 'select',
70 'options' => array(
71 'h1' => esc_html__( 'Heading 1 (h1)', 'bricksable' ),
72 'h2' => esc_html__( 'Heading 2 (h2)', 'bricksable' ),
73 'h3' => esc_html__( 'Heading 3 (h3)', 'bricksable' ),
74 'h4' => esc_html__( 'Heading 4 (h4)', 'bricksable' ),
75 'h5' => esc_html__( 'Heading 5 (h5)', 'bricksable' ),
76 'h6' => esc_html__( 'Heading 6 (h6)', 'bricksable' ),
77 'div' => esc_html__( 'Division (div)', 'bricksable' ),
78 'p' => esc_html__( 'Paragraph (p)', 'bricksable' ),
79 'span' => esc_html__( 'Span (span)', 'bricksable' ),
80 ),
81 'clearable' => false,
82 'pasteStyles' => false,
83 'default' => 'span',
84 );
85
86 $this->controls['prefix'] = array(
87 'tab' => 'content',
88 'group' => 'text',
89 'label' => esc_html__( 'Prefix', 'bricksable' ),
90 'type' => 'textarea',
91 'default' => 'Hand drawn ',
92 'hasDynamicData' => 'text',
93 );
94
95 $this->controls['suffix'] = array(
96 'tab' => 'content',
97 'group' => 'text',
98 'label' => esc_html__( 'Suffix', 'bricksable' ),
99 'type' => 'textarea',
100 'default' => ' look and feel!',
101 'hasDynamicData' => 'text',
102 );
103
104 $this->controls['text'] = array(
105 'tab' => 'content',
106 'group' => 'text',
107 'label' => esc_html__( 'Notation Text', 'bricksable' ),
108 'type' => 'textarea',
109 'default' => esc_html__( 'Notation', 'bricksable' ),
110 'placeholder' => esc_html__( 'Here goes my notation ..', 'bricksable' ),
111 'hasDynamicData' => 'text',
112 );
113 // Notation.
114 $this->controls['notation_type'] = array(
115 'tab' => 'content',
116 'group' => 'notation_settings',
117 'label' => esc_html__( 'Type', 'bricksable' ),
118 'type' => 'select',
119 'options' => array(
120 'underline' => esc_html__( 'Underline', 'bricksable' ),
121 'box' => esc_html__( 'Box', 'bricksable' ),
122 'circle' => esc_html__( 'circle', 'bricksable' ),
123 'highlight' => esc_html__( 'Highlight', 'bricksable' ),
124 'strike-through' => esc_html__( 'Strike through', 'bricksable' ),
125 'crossed-off' => esc_html__( 'Crossed-off', 'bricksable' ),
126 'bracket' => esc_html__( 'Bracket', 'bricksable' ),
127 ),
128 'default' => 'highlight',
129 'placeholder' => esc_html__( 'Highlight', 'bricksable' ),
130 );
131 $this->controls['notation_bracket'] = array(
132 'tab' => 'content',
133 'group' => 'notation_settings',
134 'label' => esc_html__( 'Bracket Type', 'bricksable' ),
135 'type' => 'select',
136 'options' => array(
137 'right' => esc_html__( 'Right', 'bricksable' ),
138 'left' => esc_html__( 'Left', 'bricksable' ),
139 'left-right' => esc_html__( 'Left & Right', 'bricksable' ),
140 'top' => esc_html__( 'Top', 'bricksable' ),
141 'bottom' => esc_html__( 'Bottom', 'bricksable' ),
142 'top-bottom' => esc_html__( 'Top & Bottom', 'bricksable' ),
143 ),
144 'default' => 'left-right',
145 'required' => array( 'notation_type', '=', 'bracket' ),
146 );
147 $this->controls['notation_duration'] = array(
148 'tab' => 'content',
149 'group' => 'notation_settings',
150 'label' => esc_html__( 'Animation Duration', 'bricksable' ),
151 'type' => 'slider',
152 'units' => array(
153 'ms' => array(
154 'min' => 200,
155 'max' => 5000,
156 'step' => 1,
157 ),
158 ),
159 'default' => '800ms',
160 'placeholder' => esc_html__( '800', 'bricksable' ),
161 'description' => esc_html__( 'Duration of the animation in milliseconds. Default is 800ms.', 'bricksable' ),
162 );
163 $this->controls['notation_color'] = array(
164 'tab' => 'content',
165 'group' => 'notation_settings',
166 'label' => esc_html__( 'Text color', 'bricksable' ),
167 'type' => 'color',
168 'inline' => true,
169 'small' => true,
170 'default' => array(
171 'hex' => '#FFD54F',
172 ),
173 'pasteStyles' => false,
174 'description' => esc_html__( 'Define the annotation color.', 'bricksable' ),
175 );
176 $this->controls['notation_stroke_width'] = array(
177 'tab' => 'content',
178 'group' => 'notation_settings',
179 'label' => esc_html__( 'Stroke Width', 'bricksable' ),
180 'type' => 'slider',
181 'unitless' => true,
182 'min' => 1,
183 'max' => 10,
184 'step' => '1',
185 'default' => '3',
186 'placeholder' => esc_html__( '3', 'bricksable' ),
187 );
188 $this->controls['notation_iterations'] = array(
189 'tab' => 'content',
190 'group' => 'notation_settings',
191 'label' => esc_html__( 'Iterations', 'bricksable' ),
192 'type' => 'slider',
193 'unitless' => true,
194 'min' => 1,
195 'max' => 10,
196 'step' => '1',
197 'default' => '2',
198 'placeholder' => esc_html__( '2', 'bricksable' ),
199 'description' => esc_html__(
200 'By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.',
201 'bricksable'
202 ),
203 );
204
205 $this->controls['prefixTypography'] = array(
206 'tab' => 'style',
207 'group' => 'prefix_style',
208 'label' => esc_html__( 'Prefix Typography', 'bricksable' ),
209 'type' => 'typography',
210 'css' => array(
211 array(
212 'property' => 'font',
213 'selector' => '.prefix',
214 ),
215 ),
216 'inline' => true,
217 'small' => true,
218 'required' => array( 'prefix', '!=', '' ),
219 );
220 $this->controls['prefixSeparator'] = array(
221 'tab' => 'style',
222 'group' => 'prefix_style',
223 'label' => esc_html__( 'Styling', 'bricksable' ),
224 'type' => 'separator',
225 'required' => array( 'prefix', '!=', '' ),
226 );
227 $this->controls['prefixMargin'] = array(
228 'tab' => 'style',
229 'group' => 'prefix_style',
230 'label' => esc_html__( 'Margin', 'bricksable' ),
231 'type' => 'dimensions',
232 'css' => array(
233 array(
234 'property' => 'margin',
235 'selector' => '.prefix',
236 ),
237 ),
238 'required' => array( 'prefix', '!=', '' ),
239 );
240 $this->controls['prefixPadding'] = array(
241 'tab' => 'style',
242 'group' => 'prefix_style',
243 'label' => esc_html__( 'Padding', 'bricksable' ),
244 'type' => 'dimensions',
245 'css' => array(
246 array(
247 'property' => 'padding',
248 'selector' => '.prefix',
249 ),
250 ),
251 'required' => array( 'prefix', '!=', '' ),
252 );
253 $this->controls['prefixDisplay'] = array(
254 'tab' => 'style',
255 'group' => 'prefix_style',
256 'label' => esc_html__( 'Display', 'bricksable' ),
257 'type' => 'select',
258 'options' => array(
259 'inline-block' => esc_html__( 'Inline block', 'bricksable' ),
260 'block' => esc_html__( 'Block', 'bricksable' ),
261 ),
262 'css' => array(
263 array(
264 'property' => 'display',
265 'selector' => '.prefix',
266 ),
267 ),
268 'default' => 'inline-block',
269 'required' => array( 'prefix', '!=', '' ),
270 );
271 $this->controls['prefix_Border'] = array(
272 'tab' => 'style',
273 'group' => 'prefix_style',
274 'label' => esc_html__( 'Border', 'bricksable' ),
275 'type' => 'border',
276 'css' => array(
277 array(
278 'property' => 'border',
279 'selector' => '.prefix',
280 ),
281 ),
282 'inline' => true,
283 'small' => true,
284 'required' => array( 'prefix', '!=', '' ),
285 );
286 $this->controls['prefix_BoxShadow'] = array(
287 'tab' => 'style',
288 'group' => 'prefix_style',
289 'label' => esc_html__( 'Box shadow', 'bricksable' ),
290 'type' => 'box-shadow',
291 'css' => array(
292 array(
293 'property' => 'box-shadow',
294 'selector' => '.prefix',
295 ),
296 ),
297 'inline' => true,
298 'small' => true,
299 'required' => array( 'prefix', '!=', '' ),
300 );
301 $this->controls['prefix_background'] = array(
302 'tab' => 'style',
303 'group' => 'prefix_style',
304 'label' => esc_html__( 'Background Color', 'bricksable' ),
305 'type' => 'color',
306 'inline' => true,
307 'css' => array(
308 array(
309 'property' => 'background-color',
310 'selector' => '.prefix',
311 ),
312 ),
313 'required' => array( 'prefix', '!=', '' ),
314 );
315
316 $this->controls['notationTypography'] = array(
317 'tab' => 'style',
318 'group' => 'notation_style',
319 'label' => esc_html__( 'Notation Typography', 'bricksable' ),
320 'type' => 'typography',
321 'css' => array(
322 array(
323 'property' => 'font',
324 'selector' => '.ba-text-notation-wrapper',
325 ),
326 ),
327 'inline' => true,
328 'small' => true,
329 'required' => array( 'text', '!=', '' ),
330 );
331 $this->controls['notationSeparator'] = array(
332 'tab' => 'style',
333 'group' => 'notation_style',
334 'label' => esc_html__( 'Styling', 'bricksable' ),
335 'type' => 'separator',
336 'required' => array( 'text', '!=', '' ),
337 );
338 $this->controls['notationadding'] = array(
339 'tab' => 'style',
340 'group' => 'notation_style',
341 'label' => esc_html__( 'Padding', 'bricksable' ),
342 'type' => 'dimensions',
343 'css' => array(
344 array(
345 'property' => 'padding',
346 'selector' => '.ba-text-notation-inner',
347 ),
348 ),
349 'required' => array( 'text', '!=', '' ),
350 );
351 $this->controls['notationDisplay'] = array(
352 'tab' => 'style',
353 'group' => 'notation_style',
354 'label' => esc_html__( 'Display', 'bricksable' ),
355 'type' => 'select',
356 'options' => array(
357 'inline-block' => esc_html__( 'Inline block', 'bricksable' ),
358 'block' => esc_html__( 'Block', 'bricksable' ),
359 ),
360 'css' => array(
361 array(
362 'property' => 'display',
363 'selector' => '.ba-text-notation-wrapper',
364 ),
365 ),
366 'default' => 'inline-block',
367 'required' => array( 'text', '!=', '' ),
368 );
369
370 $this->controls['suffixTypography'] = array(
371 'tab' => 'style',
372 'group' => 'suffix_style',
373 'label' => esc_html__( 'Suffix Typography', 'bricksable' ),
374 'type' => 'typography',
375 'css' => array(
376 array(
377 'property' => 'font',
378 'selector' => '.suffix',
379 ),
380 ),
381 'inline' => true,
382 'small' => true,
383 'required' => array( 'suffix', '!=', '' ),
384 );
385 $this->controls['suffixSeparator'] = array(
386 'tab' => 'style',
387 'group' => 'suffix_style',
388 'label' => esc_html__( 'Styling', 'bricksable' ),
389 'type' => 'separator',
390 'required' => array( 'suffix', '!=', '' ),
391 );
392 $this->controls['suffixMargin'] = array(
393 'tab' => 'style',
394 'group' => 'suffix_style',
395 'label' => esc_html__( 'Margin', 'bricksable' ),
396 'type' => 'dimensions',
397 'css' => array(
398 array(
399 'property' => 'margin',
400 'selector' => '.suffix',
401 ),
402 ),
403 'required' => array( 'suffix', '!=', '' ),
404 );
405 $this->controls['suffixPadding'] = array(
406 'tab' => 'style',
407 'group' => 'suffix_style',
408 'label' => esc_html__( 'Padding', 'bricksable' ),
409 'type' => 'dimensions',
410 'css' => array(
411 array(
412 'property' => 'padding',
413 'selector' => '.suffix',
414 ),
415 ),
416 'required' => array( 'suffix', '!=', '' ),
417 );
418 $this->controls['suffixDisplay'] = array(
419 'tab' => 'style',
420 'group' => 'suffix_style',
421 'label' => esc_html__( 'Display', 'bricksable' ),
422 'type' => 'select',
423 'options' => array(
424 'inline-block' => esc_html__( 'Inline block', 'bricksable' ),
425 'block' => esc_html__( 'Block', 'bricksable' ),
426 ),
427 'css' => array(
428 array(
429 'property' => 'display',
430 'selector' => '.suffix',
431 ),
432 ),
433 'default' => 'inline-block',
434 'required' => array( 'suffix', '!=', '' ),
435 );
436 $this->controls['suffix_Border'] = array(
437 'tab' => 'style',
438 'group' => 'suffix_style',
439 'label' => esc_html__( 'Border', 'bricksable' ),
440 'type' => 'border',
441 'css' => array(
442 array(
443 'property' => 'border',
444 'selector' => '.suffix',
445 ),
446 ),
447 'inline' => true,
448 'small' => true,
449 'required' => array( 'suffix', '!=', '' ),
450 );
451 $this->controls['suffix_BoxShadow'] = array(
452 'tab' => 'style',
453 'group' => 'suffix_style',
454 'label' => esc_html__( 'Box shadow', 'bricksable' ),
455 'type' => 'box-shadow',
456 'css' => array(
457 array(
458 'property' => 'box-shadow',
459 'selector' => '.suffix',
460 ),
461 ),
462 'inline' => true,
463 'small' => true,
464 'required' => array( 'suffix', '!=', '' ),
465 );
466 $this->controls['suffix_background'] = array(
467 'tab' => 'style',
468 'group' => 'suffix_style',
469 'label' => esc_html__( 'Background Color', 'bricksable' ),
470 'type' => 'color',
471 'inline' => true,
472 'css' => array(
473 array(
474 'property' => 'background-color',
475 'selector' => '.suffix',
476 ),
477 ),
478 'required' => array( 'suffix', '!=', '' ),
479 );
480 }
481
482 public function enqueue_scripts() {
483 if ( '' === get_option( 'bricksable_combine_minify_js' ) || false === get_option( 'bricksable_combine_minify_js' ) ) {
484 wp_enqueue_script( 'ba-text-notation' );
485 wp_localize_script(
486 'ba-text-notation',
487 'BricksabletextNotationData',
488 array(
489 'textNotationInstances' => array(),
490 )
491 );
492 }
493 }
494 public function render() {
495 $settings = $this->settings;
496
497 $notation_tag = isset( $settings['notation_tag'] ) ? esc_html( $settings['notation_tag'] ) : 'h3';
498
499 $notation_color = isset( $settings['notation_color']['rgb'] ) ? esc_attr( $settings['notation_color']['rgb'] ) : esc_attr( $settings['notation_color']['hex'] );
500 $notation_bracket = isset( $settings['notation_bracket'] ) ? $settings['notation_bracket'] : array( 'left', 'right' );
501
502 switch ( $notation_bracket ) {
503 case 'left':
504 $notation_bracket = 'left';
505 break;
506 case 'right':
507 $notation_bracket = 'right';
508 break;
509 case 'top':
510 $notation_bracket = 'top';
511 break;
512 case 'bottom':
513 $notation_bracket = 'bottom';
514 break;
515 case 'top-bottom':
516 $notation_bracket = array( 'top', 'bottom' );
517 break;
518 default:
519 $notation_bracket = array( 'left', 'right' );
520 }
521
522 $notation_options = array(
523 'type' => isset( $settings['notation_type'] ) ? esc_attr( $settings['notation_type'] ) : 'underline',
524 'animationDuration' => isset( $settings['notation_duration'] ) ? intval( $settings['notation_duration'] ) : 800,
525 'color' => isset( $settings['notation_color'] ) ? $notation_color : '#ff5722',
526 'strokeWidth' => isset( $settings['notation_stroke_width'] ) ? intval( $settings['notation_stroke_width'] ) : 3,
527 'iterations' => isset( $settings['notation_iterations'] ) ? intval( $settings['notation_iterations'] ) : 1,
528 'brackets' => $notation_bracket,
529 );
530
531 $wrapper_tag = isset( $settings['wrapper_tag'] ) ? esc_html( $settings['wrapper_tag'] ) : 'p';
532 $this->set_attribute( 'notation_wrapper', $wrapper_tag );
533 $this->set_attribute( 'notation_wrapper', 'class', 'ba-text-notation-wrapper-tag' );
534 $this->set_attribute( 'notation_text', $notation_tag );
535 $this->set_attribute( 'notation_text', 'class', 'ba-text-notation-wrapper' );
536 $this->set_attribute( 'notation_text', 'data-ba-bricks-text-notation-options', wp_json_encode( $notation_options ) );
537
538 // Render.
539 //phpcs:ignore
540 echo '<' . $this->render_attributes( 'notation_wrapper' ) . '>';
541
542 if ( isset( $settings['prefix'] ) ) {
543 ?>
544 <span class="prefix"><?php echo esc_html( $settings['prefix'] ); ?></span>
545 <?php
546 }
547
548 $output = '<' . $this->render_attributes( 'notation_text' ) . '>';
549 $output .= '<span class="ba-text-notation-inner">' . $settings['text'] . '</span>';
550 $output .= '</' . $notation_tag . '>';
551
552 //phpcs:ignore
553 echo $output;
554
555 if ( isset( $settings['suffix'] ) ) {
556 ?>
557 <span class="suffix"><?php echo esc_html( $settings['suffix'] ); ?></span>
558 <?php
559 }
560 echo '</' . esc_attr( $wrapper_tag ) . '>';
561
562 }
563 }
564