PluginProbe ʕ •ᴥ•ʔ
JetFormBuilder — Dynamic Blocks Form Builder / 2.1.5
JetFormBuilder — Dynamic Blocks Form Builder v2.1.5
3.6.3.1 3.6.3 3.6.2.2 3.6.2.1 3.6.2 3.6.1.1 3.6.1 3.6.0.1 trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 1.4.2 1.4.3 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 2.0.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.1.0 2.1.1 2.1.10 2.1.11 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 3.0.0 3.0.0.1 3.0.0.2 3.0.0.3 3.0.1 3.0.1.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.0.1 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 3.1.6 3.1.7 3.1.8 3.1.9 3.2.0 3.2.1 3.2.2 3.2.3 3.3.0 3.3.1 3.3.2 3.3.3 3.3.3.1 3.3.4 3.3.4.1 3.3.4.2 3.4.0 3.4.1 3.4.2 3.4.3 3.4.4 3.4.5 3.4.5.1 3.4.5.2 3.4.6 3.4.7 3.4.7.1 3.5.0 3.5.1 3.5.1.1 3.5.1.2 3.5.2 3.5.2.1 3.5.3 3.5.4 3.5.5 3.5.6 3.5.6.1 3.5.6.2 3.5.6.3 3.6.0
jetformbuilder / includes / blocks / modules / general-style.php
jetformbuilder / includes / blocks / modules Last commit date
fields-errors 3 years ago base-module.php 3 years ago general-style-functions.php 3 years ago general-style.php 3 years ago
general-style.php
605 lines
1 <?php
2
3
4 namespace Jet_Form_Builder\Blocks\Modules;
5
6 use JET_SM\Gutenberg\Controls_Manager;
7
8 /**
9 * @property Controls_Manager controls_manager
10 *
11 * Trait General_Style
12 * @package Jet_Form_Builder\Blocks\Modules
13 */
14 trait General_Style {
15
16 use General_Style_Functions;
17
18 public function general_style_manager_options() {
19 $this->maybe_add_controls_type( 'wrap' );
20 $this->maybe_add_controls_type( 'input' );
21 $this->maybe_add_controls_type( 'label' );
22 $this->maybe_add_controls_type( 'required' );
23 $this->maybe_add_controls_type( 'description' );
24 }
25
26 public function general_css_scheme() {
27 return array(
28 'wrap' => $this->get_field_wrap(),
29 'label' => $this->get_label_selector(),
30 'input' => $this->get_field_input(),
31 'required' => $this->get_required_selector(),
32 'description' => $this->get_description_selector(),
33 );
34 }
35
36 public function general_controls_callbacks() {
37 return array(
38 'wrap' => array( $this, 'add_content_controls' ),
39 'label' => array( $this, 'add_label_controls' ),
40 'input' => array( $this, 'add_input_controls' ),
41 'required' => array( $this, 'add_required_mark_controls' ),
42 'description' => array( $this, 'add_description_controls' ),
43 );
44 }
45
46 public function general_style_unregister() {
47 return array( 'input' );
48 }
49
50 public function get_label_selector() {
51 return '__label.%1$s__label.%1$s__label';
52 }
53
54 public function get_required_selector() {
55 return '__label span.%1$s__required.%1$s__required.%1$s__required';
56 }
57
58 public function get_description_selector() {
59 return '__desc.%1$s__desc.%1$s__desc';
60 }
61
62 public function get_field_wrap() {
63 return '-row.%1$s-row.%1$s-row.%1$s-row';
64 }
65
66 public function get_field_input() {
67 return '-row.%1$s-row.%1$s-row input';
68 }
69
70
71 public function general_style_attributes() {
72 return array(
73 'label_margin' => array(
74 'type' => 'object',
75 ),
76 'label_padding' => array(
77 'type' => 'object',
78 ),
79 'label_typography' => array(
80 'type' => 'object',
81 ),
82 'label_color' => array(
83 'type' => 'object',
84 ),
85 'label_border' => array(
86 'type' => 'object',
87 ),
88 'label_alignment' => array(
89 'type' => 'object',
90 ),
91 'label_background_color' => array(
92 'type' => 'object',
93 ),
94 'description_margin' => array(
95 'type' => 'object',
96 ),
97 'description_padding' => array(
98 'type' => 'object',
99 ),
100 'description_typography' => array(
101 'type' => 'object',
102 ),
103 'description_color' => array(
104 'type' => 'object',
105 ),
106 'description_background_color' => array(
107 'type' => 'object',
108 ),
109 'description_border' => array(
110 'type' => 'object',
111 ),
112 'description_alignment' => array(
113 'type' => 'object',
114 ),
115 'required_color' => array(
116 'type' => 'object',
117 ),
118 'required_background_color' => array(
119 'type' => 'object',
120 ),
121 'required_typography' => array(
122 'type' => 'object',
123 ),
124 );
125 }
126
127 public function _get_default_control( $selector ) {
128 return array(
129 'padding' => array(
130 'type' => 'dimensions',
131 'label' => __( 'Padding', 'jet-form-builder' ),
132 'units' => array( 'px', '%' ),
133 'css_selector' => array(
134 $selector => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};',
135 ),
136 ),
137 'margin' => array(
138 'type' => 'dimensions',
139 'label' => __( 'Margin', 'jet-form-builder' ),
140 'units' => array( 'px', '%' ),
141 'css_selector' => array(
142 $selector => 'margin: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};',
143 ),
144 ),
145 );
146 }
147
148 public function add_margin_padding( $selector, $control_options, $responsive = array() ) {
149 foreach ( $control_options as $type => $options ) {
150 $options = $this->merge_controls_or_add_id( $this->_get_default_control( $selector )[ $type ], $options );
151
152 if ( in_array( $type, $responsive ) ) {
153 $this->controls_manager->add_responsive_control( $options );
154 } else {
155 $this->controls_manager->add_control( $options );
156 }
157 }
158 }
159
160 public function merge_controls_or_add_id( $control, $options ) {
161 if ( is_array( $options ) ) {
162 return array_merge( $control, $options );
163
164 } elseif ( is_string( $options ) ) {
165
166 $control['id'] = $options;
167
168 return $control;
169 }
170 }
171
172
173 private function add_content_controls() {
174 $this->controls_manager->start_section(
175 'style_controls',
176 array(
177 'id' => 'content_style',
178 'title' => __( 'Content', 'jet-form-builder' ),
179 )
180 );
181
182 $this->add_margin_padding(
183 $this->selector( 'wrap' ),
184 array(
185 'margin' => array(
186 'id' => 'field_margin',
187 'separator' => 'after',
188 ),
189 'padding' => array(
190 'id' => 'field_padding',
191 'separator' => 'after',
192 ),
193 ),
194 array( 'padding', 'margin' )
195 );
196
197 $this->controls_manager->add_control(
198 array(
199 'id' => 'field_alignment',
200 'type' => 'choose',
201 'label' => __( 'Alignment', 'jet-form-builder' ),
202 'separator' => 'after',
203 'options' => array(
204 'left' => array(
205 'shortcut' => __( 'Left', 'jet-form-builder' ),
206 'icon' => 'dashicons-editor-alignleft',
207 ),
208 'center' => array(
209 'shortcut' => __( 'Center', 'jet-form-builder' ),
210 'icon' => 'dashicons-editor-aligncenter',
211 ),
212 'right' => array(
213 'shortcut' => __( 'Right', 'jet-form-builder' ),
214 'icon' => 'dashicons-editor-alignright',
215 ),
216 ),
217 'css_selector' => array(
218 $this->selector( 'wrap' ) => 'text-align: {{VALUE}};',
219 ),
220 )
221 );
222
223 $this->controls_manager->add_control(
224 array(
225 'id' => 'field_border',
226 'type' => 'border',
227 'label' => __( 'Border', 'jet-form-builder' ),
228 'separator' => 'after',
229 'css_selector' => array(
230 $this->selector( 'wrap' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
231 ),
232 )
233 );
234
235 $this->controls_manager->add_control(
236 array(
237 'id' => 'field_background_color',
238 'type' => 'color-picker',
239 'label' => __( 'Background Color', 'jet-form-builder' ),
240 'css_selector' => array(
241 $this->selector( 'wrap' ) => 'background-color: {{VALUE}}',
242 ),
243 )
244 );
245
246 $this->controls_manager->end_section();
247 }
248
249 private function add_label_controls() {
250 $this->controls_manager->start_section(
251 'style_controls',
252 array(
253 'id' => 'label_style',
254 'title' => __( 'Label', 'jet-form-builder' ),
255 )
256 );
257
258 $this->add_margin_padding(
259 $this->selector( 'label' ),
260 array(
261 'margin' => array(
262 'id' => 'label_margin',
263 'separator' => 'after',
264 ),
265 'padding' => array(
266 'id' => 'label_padding',
267 'separator' => 'after',
268 ),
269 )
270 );
271
272 $this->controls_manager->add_control(
273 array(
274 'id' => 'label_alignment',
275 'type' => 'choose',
276 'label' => __( 'Alignment', 'jet-form-builder' ),
277 'separator' => 'after',
278 'options' => array(
279 'left' => array(
280 'shortcut' => __( 'Left', 'jet-form-builder' ),
281 'icon' => 'dashicons-editor-alignleft',
282 ),
283 'center' => array(
284 'shortcut' => __( 'Center', 'jet-form-builder' ),
285 'icon' => 'dashicons-editor-aligncenter',
286 ),
287 'right' => array(
288 'shortcut' => __( 'Right', 'jet-form-builder' ),
289 'icon' => 'dashicons-editor-alignright',
290 ),
291 ),
292 'css_selector' => array(
293 $this->selector( 'label' ) => 'text-align: {{VALUE}};',
294 ),
295 )
296 );
297
298 $this->controls_manager->add_control(
299 array(
300 'id' => 'label_typography',
301 'type' => 'typography',
302 'separator' => 'after',
303 'css_selector' => array(
304 $this->selector( 'label' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
305 ),
306 )
307 );
308
309 $this->controls_manager->add_control(
310 array(
311 'id' => 'label_border',
312 'type' => 'border',
313 'label' => __( 'Border', 'jet-form-builder' ),
314 'separator' => 'after',
315 'css_selector' => array(
316 $this->selector( 'label' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
317 ),
318 )
319 );
320
321 $this->controls_manager->add_control(
322 array(
323 'id' => 'label_color',
324 'type' => 'color-picker',
325 'separator' => 'after',
326 'label' => __( 'Text Color', 'jet-form-builder' ),
327 'css_selector' => array(
328 $this->selector( 'label' ) => 'color: {{VALUE}}',
329 ),
330 )
331 );
332
333 $this->controls_manager->add_control(
334 array(
335 'id' => 'label_background_color',
336 'type' => 'color-picker',
337 'label' => __( 'Background Color', 'jet-form-builder' ),
338 'css_selector' => array(
339 $this->selector( 'label' ) => 'background-color: {{VALUE}}',
340 ),
341 )
342 );
343
344 $this->controls_manager->end_section();
345 }
346
347 private function add_description_controls() {
348 $this->controls_manager->start_section(
349 'style_controls',
350 array(
351 'id' => 'description_style',
352 'title' => __( 'Description', 'jet-form-builder' ),
353 /*
354 'condition' => array(
355 'desc' => true
356 ),*/
357 )
358 );
359
360 $this->add_margin_padding(
361 $this->selector( 'description' ),
362 array(
363 'margin' => array(
364 'id' => 'description_margin',
365 'separator' => 'after',
366 ),
367 'padding' => array(
368 'id' => 'description_padding',
369 'separator' => 'after',
370 ),
371 )
372 );
373
374 $this->controls_manager->add_control(
375 array(
376 'id' => 'description_alignment',
377 'type' => 'choose',
378 'label' => __( 'Alignment', 'jet-form-builder' ),
379 'separator' => 'after',
380 'options' => array(
381 'left' => array(
382 'shortcut' => __( 'Left', 'jet-form-builder' ),
383 'icon' => 'dashicons-editor-alignleft',
384 ),
385 'center' => array(
386 'shortcut' => __( 'Center', 'jet-form-builder' ),
387 'icon' => 'dashicons-editor-aligncenter',
388 ),
389 'right' => array(
390 'shortcut' => __( 'Right', 'jet-form-builder' ),
391 'icon' => 'dashicons-editor-alignright',
392 ),
393 ),
394 'css_selector' => array(
395 $this->selector( 'description' ) => 'text-align: {{VALUE}};',
396 ),
397 )
398 );
399
400 $this->controls_manager->add_control(
401 array(
402 'id' => 'description_border',
403 'type' => 'border',
404 'label' => __( 'Border', 'jet-form-builder' ),
405 'separator' => 'after',
406 'css_selector' => array(
407 $this->selector( 'description' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
408 ),
409 )
410 );
411
412 $this->controls_manager->add_control(
413 array(
414 'id' => 'description_typography',
415 'type' => 'typography',
416 'separator' => 'after',
417 'css_selector' => array(
418 $this->selector( 'description' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
419 ),
420 )
421 );
422
423 $this->controls_manager->add_control(
424 array(
425 'id' => 'description_color',
426 'type' => 'color-picker',
427 'separator' => 'after',
428 'label' => __( 'Text Color', 'jet-form-builder' ),
429 'css_selector' => array(
430 $this->selector( 'description' ) => 'color: {{VALUE}}',
431 ),
432 )
433 );
434
435 $this->controls_manager->add_control(
436 array(
437 'id' => 'description_background_color',
438 'type' => 'color-picker',
439 'label' => __( 'Background Color', 'jet-form-builder' ),
440 'css_selector' => array(
441 $this->selector( 'description' ) => 'background-color: {{VALUE}}',
442 ),
443 )
444 );
445
446 $this->controls_manager->end_section();
447 }
448
449 private function add_required_mark_controls() {
450 $this->controls_manager->start_section(
451 'style_controls',
452 array(
453 'id' => 'required_style',
454 'title' => __( 'Required Mark', 'jet-form-builder' ),
455 )
456 );
457
458 $this->controls_manager->add_control(
459 array(
460 'id' => 'required_typography',
461
462 'disable_line_height' => true,
463 'disable_family' => true,
464 'disable_transform' => true,
465 'disable_style' => true,
466 'disable_decoration' => true,
467 'disable_letter_spacing' => true,
468 'separator' => 'after',
469 'type' => 'typography',
470 'css_selector' => array(
471 $this->selector( 'required' ) => 'font-weight: {{WEIGHT}}; font-size: {{SIZE}}{{S_UNIT}};',
472 ),
473 )
474 );
475
476 $this->controls_manager->add_control(
477 array(
478 'id' => 'required_color',
479 'type' => 'color-picker',
480 'separator' => 'after',
481 'label' => __( 'Text Color', 'jet-form-builder' ),
482 'css_selector' => array(
483 $this->selector( 'required' ) => 'color: {{VALUE}}',
484 ),
485 )
486 );
487
488 $this->controls_manager->add_control(
489 array(
490 'id' => 'required_background_color',
491 'type' => 'color-picker',
492 'label' => __( 'Background Color', 'jet-form-builder' ),
493 'css_selector' => array(
494 $this->selector( 'required' ) => 'background-color: {{VALUE}}',
495 ),
496 )
497 );
498
499 $this->controls_manager->end_section();
500 }
501
502 private function add_input_controls() {
503 $this->controls_manager->start_section(
504 'style_controls',
505 array(
506 'id' => 'input_style',
507 'title' => __( 'Field', 'jet-form-builder' ),
508 )
509 );
510
511 $this->add_margin_padding(
512 $this->selector( 'input' ),
513 array(
514 'margin' => array(
515 'id' => 'input_margin',
516 'separator' => 'after',
517 ),
518 'padding' => array(
519 'id' => 'input_padding',
520 'separator' => 'after',
521 ),
522 )
523 );
524
525 $this->controls_manager->add_control(
526 $this->merge_controls_or_add_id(
527 array(
528 'id' => 'input_alignment',
529 'type' => 'choose',
530 'label' => __( 'Alignment', 'jet-form-builder' ),
531 'separator' => 'after',
532 'options' => array(
533 'left' => array(
534 'shortcut' => __( 'Left', 'jet-form-builder' ),
535 'icon' => 'dashicons-editor-alignleft',
536 ),
537 'center' => array(
538 'shortcut' => __( 'Center', 'jet-form-builder' ),
539 'icon' => 'dashicons-editor-aligncenter',
540 ),
541 'right' => array(
542 'shortcut' => __( 'Right', 'jet-form-builder' ),
543 'icon' => 'dashicons-editor-alignright',
544 ),
545 ),
546 'css_selector' => array(
547 $this->selector( 'input' ) => 'text-align: {{VALUE}};',
548 ),
549 ),
550 $this->get_additional_styles( 'input_alignment' )
551 )
552 );
553
554 $this->controls_manager->add_control(
555 array(
556 'id' => 'input_typography',
557 'type' => 'typography',
558 'separator' => 'after',
559 'css_selector' => array(
560 $this->selector( 'input' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
561 ),
562 )
563 );
564
565 $this->controls_manager->add_control(
566 array(
567 'id' => 'input_border',
568 'type' => 'border',
569 'label' => __( 'Border', 'jet-form-builder' ),
570 'separator' => 'after',
571 'css_selector' => array(
572 $this->selector( 'input' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
573 ),
574 )
575 );
576
577 $this->controls_manager->add_control(
578 array(
579 'id' => 'input_color',
580 'type' => 'color-picker',
581 'separator' => 'after',
582 'label' => __( 'Text Color', 'jet-form-builder' ),
583 'css_selector' => array(
584 $this->selector( 'input' ) => 'color: {{VALUE}}',
585 ),
586 )
587 );
588
589 $this->controls_manager->add_control(
590 array(
591 'id' => 'input_background_color',
592 'type' => 'color-picker',
593 'label' => __( 'Background Color', 'jet-form-builder' ),
594 'css_selector' => array(
595 $this->selector( 'input' ) => 'background-color: {{VALUE}}',
596 ),
597 )
598 );
599
600 $this->controls_manager->end_section();
601 }
602
603
604 }
605