PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.14.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.14.0
2.14.0 2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 All 81 releases
ablocks / includes / blocks / svg-draw / block.php

block.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder 2.14.0, at includes/blocks/svg-draw/block.php

172 lines 7.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace ABlocks\Blocks\SvgDraw;
3
4 if ( ! defined( 'ABSPATH' ) ) {
5 exit;
6 }
7
8 use ABlocks\Classes\BlockBaseAbstract;
9 use ABlocks\Classes\CssGenerator;
10 use ABlocks\Classes\CssGeneratorV2;
11 use ABlocks\Controls\Dimensions;
12 use ABlocks\Controls\Icon;
13 use ABlocks\Controls\Color;
14
15 class Block extends BlockBaseAbstract {
16 protected $block_name = 'svg-draw';
17
18 public function build_css_v1( $attributes ) {
19 $css_generator = new CssGenerator( $attributes, $this->block_name );
20
21 // Generate wrapper CSS start
22 $css_generator->add_class_styles(
23 '{{WRAPPER}} .ablocks-block-container',
24 $this->get_wrapper_css( $attributes ),
25 $this->get_wrapper_css( $attributes, 'Tablet' ),
26 $this->get_wrapper_css( $attributes, 'Mobile' ),
27 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
28 );
29
30 // Icon Style
31 $css_generator->add_class_styles(
32 '{{WRAPPER}} .ablocks-icon-wrap',
33 Icon::get_wrapper_css( $attributes ),
34 Icon::get_wrapper_css( $attributes, 'Tablet' ),
35 Icon::get_wrapper_css( $attributes, 'Mobile' ),
36 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
37 );
38 $css_generator->add_class_styles(
39 '{{WRAPPER}} .ablocks-icon-wrap:hover',
40 Icon::get_wrapper_hover_css( $attributes ),
41 Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
42 Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
43 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
44 );
45 $css_generator->add_class_styles(
46 '{{WRAPPER}} svg > path',
47 $this->get_svg_css( $attributes ),
48 $this->get_svg_css( $attributes, 'Tablet' ),
49 $this->get_svg_css( $attributes, 'Mobile' ),
50 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_svg_css( $attributes, $device ); } )
51 );
52
53 $css_generator->add_class_styles(
54 '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
55 Icon::get_element_image_css( $attributes ),
56 Icon::get_element_image_css( $attributes, 'Tablet' ),
57 Icon::get_element_image_css( $attributes, 'Mobile' ),
58 );
59 $css_generator->add_class_styles(
60 '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
61 Icon::get_element_image_hover_css( $attributes ),
62 Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
63 Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
64 );
65 $css_generator->add_class_styles(
66 '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
67 Icon::get_element_css( $attributes ),
68 Icon::get_element_css( $attributes, 'Tablet' ),
69 Icon::get_element_css( $attributes, 'Mobile' ),
70 );
71 $css_generator->add_class_styles(
72 '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
73 Icon::get_element_image_hover_css( $attributes ),
74 Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
75 Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
76 );
77
78 return $css_generator->generate_css();
79 }
80 public function build_css_v2( $attributes ) {
81 $css_generator = new CssGenerator( $attributes, $this->block_name );
82
83 // Generate wrapper CSS start
84 $css_generator->add_class_styles(
85 '{{WRAPPER}}',
86 $this->get_wrapper_css( $attributes ),
87 $this->get_wrapper_css( $attributes, 'Tablet' ),
88 $this->get_wrapper_css( $attributes, 'Mobile' ),
89 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_wrapper_css( $attributes, $device ); } )
90 );
91
92 // Icon Style
93 $css_generator->add_class_styles(
94 '{{WRAPPER}} .ablocks-icon-wrap',
95 Icon::get_wrapper_css( $attributes ),
96 Icon::get_wrapper_css( $attributes, 'Tablet' ),
97 Icon::get_wrapper_css( $attributes, 'Mobile' ),
98 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_css( $attributes, $device ); } )
99 );
100 $css_generator->add_class_styles(
101 '{{WRAPPER}} .ablocks-icon-wrap:hover',
102 Icon::get_wrapper_hover_css( $attributes ),
103 Icon::get_wrapper_hover_css( $attributes, 'Tablet' ),
104 Icon::get_wrapper_hover_css( $attributes, 'Mobile' ),
105 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_wrapper_hover_css( $attributes, $device ); } )
106 );
107 $css_generator->add_class_styles(
108 '{{WRAPPER}} svg > path',
109 $this->get_svg_css( $attributes ),
110 $this->get_svg_css( $attributes, 'Tablet' ),
111 $this->get_svg_css( $attributes, 'Mobile' ),
112 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_svg_css( $attributes, $device ); } )
113 );
114
115 $css_generator->add_class_styles(
116 '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon',
117 Icon::get_element_image_css( $attributes ),
118 Icon::get_element_image_css( $attributes, 'Tablet' ),
119 Icon::get_element_image_css( $attributes, 'Mobile' ),
120 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_css( $attributes, $device ); } )
121 );
122 $css_generator->add_class_styles(
123 '{{WRAPPER}} .ablocks-icon-wrap img.ablocks-image-icon:hover',
124 Icon::get_element_image_hover_css( $attributes ),
125 Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
126 Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
127 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
128 );
129 $css_generator->add_class_styles(
130 '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon',
131 Icon::get_element_css( $attributes ),
132 Icon::get_element_css( $attributes, 'Tablet' ),
133 Icon::get_element_css( $attributes, 'Mobile' ),
134 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_css( $attributes, $device ); } )
135 );
136 $css_generator->add_class_styles(
137 '{{WRAPPER}} .ablocks-icon-wrap svg.ablocks-svg-icon:hover',
138 Icon::get_element_image_hover_css( $attributes ),
139 Icon::get_element_image_hover_css( $attributes, 'Tablet' ),
140 Icon::get_element_image_hover_css( $attributes, 'Mobile' ),
141 $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return Icon::get_element_image_hover_css( $attributes, $device ); } )
142 );
143
144 return $css_generator->generate_css();
145 }
146 public function build_css( $attributes ) {
147 if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
148 return $this->build_css_v2( $attributes );
149 }
150 return $this->build_css_v1( $attributes );
151 }
152
153 public function get_wrapper_css( $attributes, $device = '' ) {
154 $css = [];
155 $css['display'] = 'flex';
156 if ( ! empty( $attributes['alignment'][ 'value' . $device ] ) ) {
157 $css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
158 }
159 return $css;
160 }
161
162 public function get_svg_css( $attributes = [], $device = '' ) {
163 if ( ! empty( $attributes['duration'] ) ) {
164 $css['animation-duration'] = $attributes['duration'] . 's !important';
165 }
166 return array_merge(
167 [ 'stroke' => Color::get_css( isset( $attributes['svgDrawColor'] ) ? $attributes['svgDrawColor'] : '' ) ],
168 $css
169 );
170 }
171 }
172