1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
<?php
/**
* Class SiteOrigin_Panels_Css_Builder
*
* Use for building CSS for a page.
*/
class SiteOrigin_Panels_Css_Builder {
private $css;
function __construct() {
$this->css = array();
}
/**
* Add some general CSS.
*
* @param string $selector
* @param array $attributes
* @param int $resolution The pixel resolution that this applies to
*/
public function add_css( $selector, $attributes, $resolution = 1920 ) {
$attribute_string = array();
foreach ( $attributes as $k => $v ) {
if( is_array( $v ) ) {
for( $i = 0; $i < count( $v ); $i++ ) {
if ( ! strlen( (string) $v[ $i ] ) ) continue;
$attribute_string[] = esc_html( $k ) . ':' . esc_html( $v[ $i ] );
}
}
else {
if ( ! strlen( (string) $v ) ) continue;
$attribute_string[] = esc_html( $k ) . ':' . esc_html( $v );
}
}
$attribute_string = implode( ';', $attribute_string );
// Add everything we need to the CSS selector
if ( empty( $this->css[ $resolution ] ) ) {
$this->css[ $resolution ] = array();
}
if ( empty( $this->css[ $resolution ][ $attribute_string ] ) ) {
$this->css[ $resolution ][ $attribute_string ] = array();
}
$this->css[ $resolution ][ $attribute_string ][] = $selector;
}
/**
* Add CSS that applies to a row or group of rows.
*
* @param int $li The layout ID. If false, then the CSS applies to all layouts.
* @param int|bool|string $ri The row index. If false, then the CSS applies to all rows.
* @param string $sub_selector A sub selector if we need one.
* @param array $attributes An array of attributes.
* @param int $resolution The pixel resolution that this applies to
* @param bool $specify_layout Sometimes for CSS specificity, we need to include the layout ID.
*/
public function add_row_css( $li, $ri = false, $sub_selector = '', $attributes = array(), $resolution = 1920, $specify_layout = false ) {
$selector = array();
// Special case of `> .panel-row-style` sub_selector
if ( $ri === false ) {
// This applies to all rows
$selector[] = '#pl-' . $li;
$selector[] = '.panel-grid';
} else {
// This applies to a specific row
if ( $specify_layout ) {
$selector[] = '#pl-' . $li;
}
if ( is_string( $ri ) ) {
$selector[] = '#' . $ri;
} else {
$selector[] = '#pg-' . $li . '-' . $ri;
}
}
$selector = implode( ' ', $selector );
$selector = $this->add_sub_selector( $selector, $sub_selector );
// Add this to the CSS array
$this->add_css( $selector, $attributes, $resolution );
}
/**
* Add cell specific CSS
*
* @param int $li The layout ID. If false, then the CSS applies to all layouts.
* @param int|bool $ri The row index. If false, then the CSS applies to all rows.
* @param int|bool $ci The cell index. If false, then the CSS applies to all rows.
* @param string $sub_selector A sub selector if we need one.
* @param array $attributes An array of attributes.
* @param int $resolution The pixel resolution that this applies to
* @param bool $specify_layout Sometimes for CSS specificity, we need to include the layout ID.
*/
public function add_cell_css( $li, $ri = false, $ci = false, $sub_selector = '', $attributes = array(), $resolution = 1920, $specify_layout = false ) {
$selector_parts = array();
if ( $ri === false && $ci === false ) {
// This applies to all cells in the layout
$selector_parts[] = '#pl-' . $li;
$selector_parts[] = '.panel-grid-cell';
} elseif ( $ri !== false && $ci === false ) {
// This applies to all cells in a row
$sel = '';
if ( $specify_layout ) {
$sel = '#pl-' . $li . ' ';
}
$sel .= is_string( $ri ) ? ( '#' . $ri ) : '#pg-' . $li . '-' . $ri;
// If row styles are set, there's a row style wrapper between the row and the cell, so we need to include
// the selector for both. This is a somewhat hacky fix, but trying to prevent further breakage in existing
// layouts.
$sel_with_style = ', ' . $sel . ' > .panel-row-style';
$sel .= ' > .panel-grid-cell';
$sel_with_style .= ' > .panel-grid-cell';
$selector_parts[] = $sel;
$selector_parts[] = $sel_with_style;
} elseif ( $ri !== false && $ci !== false ) {
// This applies to a specific cell
if ( $specify_layout ) {
$selector_parts[] = '#pl-' . $li;
}
$selector_parts[] = '#pgc-' . $li . '-' . $ri . '-' . $ci;
}
$selector = implode( ' ', $selector_parts );
if ( ! empty( $sub_selector ) ) {
$selector = $this->add_sub_selector( $selector, $sub_selector );
}
// Add this to the CSS array
$this->add_css( $selector, $attributes, $resolution );
}
/**
* Add widget specific CSS
*
* @param int $li The layout ID. If false, then the CSS applies to all layouts.
* @param int|bool $ri The row index. If false, then the CSS applies to all rows.
* @param int|bool $ci The cell index. If false, then the CSS applies to all rows.
* @param int|bool $wi The widget index. If false, then CSS applies to all widgets.
* @param string $sub_selector A sub selector if we need one.
* @param array $attributes An array of attributes.
* @param int $resolution The pixel resolution that this applies to
* @param bool $specify_layout Sometimes for CSS specificity, we need to include the layout ID.
*/
public function add_widget_css( $li, $ri = false, $ci = false, $wi = false, $sub_selector, $attributes = array(), $resolution = 1920, $specify_layout = false ) {
$selector = array();
if ( $ri === false && $ci === false && $wi === false ) {
// This applies to all widgets in the layout
$selector[] = '#pl-' . $li;
$selector[] = '.so-panel';
} else if ( $ri !== false && $ci === false && $wi === false ) {
// This applies to all widgets in a row
if ( $specify_layout ) {
$selector[] = '#pl-' . $li;
}
$selector[] = is_string( $ri ) ? ( '#' . $ri ) : '#pg-' . $li . '-' . $ri;
$selector[] = '.so-panel';
} else if ( $ri !== false && $ci !== false && $wi === false ) {
if ( $specify_layout ) {
$selector[] = '#pl-' . $li;
}
$selector[] = '#pgc-' . $li . '-' . $ri . '-' . $ci;
$selector[] = '.so-panel';
} else {
// This applies to a specific widget
if ( $specify_layout ) {
$selector[] = '#pl-' . $li;
}
$selector[] = '#panel-' . $li . '-' . $ri . '-' . $ci . '-' . $wi;
}
$selector = implode( ' ', $selector );
$selector = $this->add_sub_selector( $selector, $sub_selector );
// Add this to the CSS array
$this->add_css( $selector, $attributes, $resolution );
}
/**
* Add a sub selector to the main selector
*
* @param string $selector
* @param string|array $sub_selector
*
* @return string
*/
private function add_sub_selector( $selector, $sub_selector ){
$return = array();
if( ! empty( $sub_selector ) ) {
if( ! is_array( $sub_selector ) ) $sub_selector = array( $sub_selector );
foreach( $sub_selector as $sub ) {
$return[] = $selector . $sub;
}
}
else {
$return = array( $selector );
}
return implode( ', ', $return );
}
/**
* Gets the CSS for this particular layout.
*/
public function get_css() {
// Build actual CSS from the array
$css_text = '';
krsort( $this->css );
foreach ( $this->css as $res => $def ) {
if( strpos( $res, ':' ) !== false ) {
list( $max_res, $min_res ) = explode( ':', $res, 2 );
}
else {
$min_res = false;
$max_res = $res;
}
if ( empty( $def ) ) {
continue;
}
if ( $max_res === '' && $min_res > 0 ) {
$css_text .= '@media (min-width:' . intval( $min_res ) . 'px) {';
} elseif ( $max_res < 1920 ) {
$css_text .= '@media (max-width:' . intval( $max_res ) . 'px)';
if ( ! empty( $min_res ) ) {
$css_text .= ' and (min-width:' . intval( $min_res ) . 'px) ';
}
$css_text .= '{ ';
}
foreach ( $def as $property => $selector ) {
$selector = array_unique( $selector );
$css_text .= implode( ' , ', $selector ) . ' { ' . $property . ' } ';
}
if ( ( $max_res === '' && $min_res > 0 ) || $max_res < 1920 ) {
$css_text .= ' } ';
}
}
return $css_text;
}
}
|