class-redux-spacing.php (15353B)
1 <?php 2 /** 3 * Spacing Field 4 * 5 * @package Redux Framework/Fields 6 * @author Dovy Paukstys & Kevin Provance (kprovance) 7 * @version 4.0.0 8 */ 9 10 defined( 'ABSPATH' ) || exit; 11 12 if ( ! class_exists( 'Redux_Spacing', false ) ) { 13 14 /** 15 * Class Redux_Spacing 16 */ 17 class Redux_Spacing extends Redux_Field { 18 19 /** 20 * Set field a value defaults. 21 */ 22 public function set_defaults() { 23 $defaults = array( 24 'units' => 'px', 25 'mode' => 'padding', 26 'top' => true, 27 'bottom' => true, 28 'all' => false, 29 'left' => true, 30 'right' => true, 31 'units_extended' => false, 32 'display_units' => true, 33 ); 34 35 $this->field = wp_parse_args( $this->field, $defaults ); 36 37 // Set default values. 38 $defaults = array( 39 'top' => '', 40 'right' => '', 41 'bottom' => '', 42 'left' => '', 43 'units' => '', 44 ); 45 46 $this->value = wp_parse_args( $this->value, $defaults ); 47 } 48 49 /** 50 * Field Render Function. 51 * Takes the vars and outputs the HTML for the field in the settings 52 * 53 * @since ReduxFramework 1.0.0 54 */ 55 public function render() { 56 /* 57 * Acceptable values checks. If the passed variable doesn't pass muster, we unset them 58 * and reset them with default values to avoid errors. 59 */ 60 61 $unit_arr = Redux_Helpers::$array_units; 62 63 $unit_check = $unit_arr; 64 $unit_check[] = false; 65 66 // If units field has a value but is not an acceptable value, unset the variable. 67 if ( ! Redux_Helpers::array_in_array( $this->field['units'], $unit_check ) ) { 68 $this->field['units'] = 'px'; 69 } 70 71 // If there is a default unit value but is not an accepted value, unset the variable. 72 if ( ! Redux_Helpers::array_in_array( $this->value['units'], $unit_check ) ) { 73 $this->value['units'] = 'px'; 74 } 75 76 if ( false === $this->field['units'] ) { 77 '' === $this->value['units']; 78 } 79 80 if ( ! in_array( $this->field['mode'], array( 'margin', 'padding' ), true ) ) { 81 if ( 'absolute' === $this->field['mode'] ) { 82 $this->field['mode'] = ''; 83 } else { 84 $this->field['mode'] = 'padding'; 85 } 86 } 87 88 $value = array( 89 'top' => isset( $this->value[ $this->field['mode'] . '-top' ] ) ? filter_var( $this->value[ $this->field['mode'] . '-top' ], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ) : filter_var( $this->value['top'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ), 90 'right' => isset( $this->value[ $this->field['mode'] . '-right' ] ) ? filter_var( $this->value[ $this->field['mode'] . '-right' ], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ) : filter_var( $this->value['right'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ), 91 'bottom' => isset( $this->value[ $this->field['mode'] . '-bottom' ] ) ? filter_var( $this->value[ $this->field['mode'] . '-bottom' ], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ) : filter_var( $this->value['bottom'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ), 92 'left' => isset( $this->value[ $this->field['mode'] . '-left' ] ) ? filter_var( $this->value[ $this->field['mode'] . '-left' ], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ) : filter_var( $this->value['left'], FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION ), 93 ); 94 95 // if field units has a value and is NOT an array, then evaluate as needed. 96 if ( ! is_array( $this->field['units'] ) ) { 97 98 // If units fields has a value and is not empty but units value does not then make units value the field value. 99 if ( '' === $this->value['units'] && ( '' !== $this->field['units'] || false === $this->field['units'] ) ) { 100 $this->value['units'] = $this->field['units']; 101 102 // If units field does NOT have a value and units value does NOT have a value, set both to blank (default?). 103 } elseif ( '' === $this->field['units'] && '' === $this->value['units'] ) { 104 $this->field['units'] = 'px'; 105 $this->value['units'] = 'px'; 106 107 // If units field has NO value but units value does, then set unit field to value field. 108 } elseif ( '' === $this->field['units'] && '' !== $this->value['units'] ) { 109 $this->field['units'] = $this->value['units']; 110 111 // if unit value is set and unit value doesn't equal unit field (coz who knows why) 112 // then set unit value to unit field. 113 } elseif ( '' !== $this->value['units'] && $this->field['units'] !== $this->value['units'] ) { 114 $this->value['units'] = $this->field['units']; 115 } 116 117 // do stuff based on unit field NOT set as an array. 118 // phpcs:ignore Generic.CodeAnalysis.EmptyStatement 119 } elseif ( ! empty( $this->field['units'] ) && is_array( $this->field['units'] ) ) { 120 // nothing to do here, but I'm leaving the construct just in case I have to debug this again. 121 } 122 123 if ( '' !== $this->field['units'] ) { 124 $value['units'] = $this->value['units']; 125 } 126 127 $this->value = $value; 128 129 if ( '' !== $this->field['mode'] ) { 130 $this->field['mode'] = $this->field['mode'] . '-'; 131 } 132 133 if ( isset( $this->field['select2'] ) ) { 134 $this->field['select2'] = wp_parse_args( $this->field['select2'], $this->select2_config ); 135 } else { 136 $this->field['select2'] = $this->select2_config; 137 } 138 139 $this->field['select2'] = Redux_Functions::sanitize_camel_case_array_keys( $this->field['select2'] ); 140 141 $select2_data = Redux_Functions::create_data_string( $this->field['select2'] ); 142 143 echo '<input 144 type="hidden" 145 name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] ) . '[units]" 146 class="field-units" value="' . esc_attr( $this->value['units'] ) . '">'; 147 148 if ( true === $this->field['all'] ) { 149 $this->field['top'] = true; 150 $this->field['right'] = true; 151 $this->field['bottom'] = true; 152 $this->field['left'] = true; 153 154 $this->value['bottom'] = $this->value['top']; 155 $this->value['left'] = $this->value['top']; 156 $this->value['right'] = $this->value['top']; 157 158 echo '<div class="field-spacing-input input-prepend"> 159 <span class="add-on"> 160 <i class="el el-fullscreen icon-large"></i> 161 </span> 162 <input 163 type="text" 164 class="redux-spacing-all redux-spacing-input mini ' . esc_attr( $this->field['class'] ) . '" 165 placeholder="' . esc_html__( 'All', 'redux-framework' ) . '" 166 rel="' . esc_attr( $this->field['id'] ) . '-all" 167 value="' . esc_attr( $this->value['top'] ) . '" 168 > 169 </div>'; 170 } 171 172 if ( true === $this->field['top'] ) { 173 echo '<input 174 type="hidden" 175 class="redux-spacing-value" 176 id="' . esc_attr( $this->field['id'] ) . '-top" 177 name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] . '[' . $this->field['mode'] ) . 'top]" 178 value="' . esc_attr( $this->value['top'] ) . ( ! empty( $this->value['top'] ) ? esc_attr( $this->value['units'] ) : '' ) . '" 179 >'; 180 } 181 182 if ( true === $this->field['right'] ) { 183 echo '<input 184 type="hidden" 185 class="redux-spacing-value" 186 id="' . esc_attr( $this->field['id'] ) . '-right" 187 name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] . '[' . $this->field['mode'] ) . 'right]" 188 value="' . esc_attr( $this->value['right'] ) . ( ! empty( $this->value['right'] ) ? esc_attr( $this->value['units'] ) : '' ) . '" 189 >'; 190 } 191 192 if ( true === $this->field['bottom'] ) { 193 echo '<input 194 type="hidden" 195 class="redux-spacing-value" 196 id="' . esc_attr( $this->field['id'] ) . '-bottom" 197 name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] . '[' . $this->field['mode'] ) . 'bottom]" 198 value="' . esc_attr( $this->value['bottom'] ) . ( ! empty( $this->value['bottom'] ) ? esc_attr( $this->value['units'] ) : '' ) . '" 199 >'; 200 } 201 202 if ( true === $this->field['left'] ) { 203 echo '<input 204 type="hidden" 205 class="redux-spacing-value" 206 id="' . esc_attr( $this->field['id'] ) . '-left" 207 name="' . esc_attr( $this->field['name'] . $this->field['name_suffix'] . '[' . $this->field['mode'] ) . 'left]" 208 value="' . esc_attr( $this->value['left'] ) . ( ! empty( $this->value['left'] ) ? esc_attr( $this->value['units'] ) : '' ) . '" 209 >'; 210 } 211 212 if ( false === $this->field['all'] ) { 213 /** 214 * Top 215 * */ 216 if ( true === $this->field['top'] ) { 217 echo '<div class="field-spacing-input input-prepend"> 218 <span class="add-on"> 219 <i class="el el-arrow-up icon-large"></i> 220 </span> 221 <input type="text" 222 class="redux-spacing-top redux-spacing-input mini ' . esc_attr( $this->field['class'] ) . '" 223 placeholder="' . esc_html__( 'Top', 'redux-framework' ) . '" 224 rel="' . esc_attr( $this->field['id'] ) . '-top" 225 value="' . esc_attr( $this->value['top'] ) . '"/> 226 </div>'; 227 } 228 229 /** 230 * Right 231 * */ 232 if ( true === $this->field['right'] ) { 233 echo '<div class="field-spacing-input input-prepend"> 234 <span class="add-on"> 235 <i class="el el-arrow-right icon-large"></i> 236 </span> 237 <input type="text" 238 class="redux-spacing-right redux-spacing-input mini ' . esc_attr( $this->field['class'] ) . '" 239 placeholder="' . esc_html__( 'Right', 'redux-framework' ) . '" 240 rel="' . esc_attr( $this->field['id'] ) . '-right" 241 value="' . esc_attr( $this->value['right'] ) . '"/> 242 </div>'; 243 } 244 245 /** 246 * Bottom 247 * */ 248 if ( true === $this->field['bottom'] ) { 249 echo '<div class="field-spacing-input input-prepend"> 250 <span class="add-on"> 251 <i class="el el-arrow-down icon-large"></i> 252 </span> 253 <input type="text" 254 class="redux-spacing-bottom redux-spacing-input mini ' . esc_attr( $this->field['class'] ) . '" 255 placeholder="' . esc_html__( 'Bottom', 'redux-framework' ) . '" 256 rel="' . esc_attr( $this->field['id'] ) . '-bottom" 257 value="' . esc_attr( $this->value['bottom'] ) . '"> 258 </div>'; 259 } 260 261 /** 262 * Left 263 * */ 264 if ( true === $this->field['left'] ) { 265 echo '<div class="field-spacing-input input-prepend"> 266 <span class="add-on"> 267 <i class="el el-arrow-left icon-large"></i> 268 </span> 269 <input type="text" 270 class="redux-spacing-left redux-spacing-input mini ' . esc_attr( $this->field['class'] ) . '" 271 placeholder="' . esc_html__( 'Left', 'redux-framework' ) . '" 272 rel="' . esc_attr( $this->field['id'] ) . '-left" 273 value="' . esc_attr( $this->value['left'] ) . '"/> 274 </div>'; 275 } 276 } 277 278 /** 279 * Units 280 * */ 281 if ( false !== $this->field['units'] && true === $this->field['display_units'] ) { 282 echo '<div class="select_wrapper spacing-units" original-title="' . esc_html__( 'Units', 'redux-framework' ) . '">'; 283 echo '<select data-placeholder="' . esc_html__( 'Units', 'redux-framework' ) . '" class="redux-spacing redux-spacing-units select ' . esc_attr( $this->field['class'] ) . '" original-title="' . esc_html__( 'Units', 'redux-framework' ) . '" id="' . esc_attr( $this->field['id'] ) . '_units"' . esc_attr( $select2_data ) . '>'; 284 285 if ( $this->field['units_extended'] ) { 286 $test_units = $unit_arr; 287 } else { 288 $test_units = array( 'px', 'em', 'pt', 'rem', '%' ); 289 } 290 291 if ( '' !== $this->field['units'] || is_array( $this->field['units'] ) ) { 292 $test_units = $this->field['units']; 293 } 294 295 echo '<option></option>'; 296 297 if ( ! is_array( $this->field['units'] ) ) { 298 echo '<option value="' . esc_attr( $this->field['units'] ) . '" selected="selected">' . esc_attr( $this->field['units'] ) . '</option>'; 299 } else { 300 foreach ( $test_units as $a_unit ) { 301 echo '<option value="' . esc_attr( $a_unit ) . '" ' . selected( $this->value['units'], $a_unit, false ) . '>' . esc_html( $a_unit ) . '</option>'; 302 } 303 } 304 305 echo '</select></div>'; 306 } 307 } 308 309 /** 310 * Enqueue Function. 311 * If this field requires any scripts, or css define this function and register/enqueue the scripts/css 312 * 313 * @since ReduxFramework 1.0.0 314 */ 315 public function enqueue() { 316 wp_enqueue_style( 'select2-css' ); 317 318 wp_enqueue_script( 319 'redux-field-spacing-js', 320 Redux_Core::$url . 'inc/fields/spacing/redux-spacing' . Redux_Functions::is_min() . '.js', 321 array( 'jquery', 'select2-js', 'redux-js' ), 322 $this->timestamp, 323 true 324 ); 325 326 if ( $this->parent->args['dev_mode'] ) { 327 wp_enqueue_style( 328 'redux-field-spacing-css', 329 Redux_Core::$url . 'inc/fields/spacing/redux-spacing.css', 330 array(), 331 $this->timestamp 332 ); 333 } 334 } 335 336 /** 337 * Compile CSS data for output. 338 * 339 * @param string $data CSS data. 340 * 341 * @return string|void 342 */ 343 public function css_style( $data ) { 344 $style = ''; 345 if ( ! isset( $this->field ) ) { 346 return; 347 } 348 349 if ( ! in_array( $this->field['mode'], array( 'padding', 'absolute', 'margin' ), true ) ) { 350 $this->field['mode'] = 'padding'; 351 } 352 353 $mode = ( 'absolute' !== $this->field['mode'] ) ? $this->field['mode'] : ''; 354 $units = $data['units'] ?? ''; 355 356 foreach ( $data as $key => $value ) { 357 if ( 'units' === $key ) { 358 continue; 359 } 360 $the_units = $units; 361 362 // Strip off any alpha for is_numeric test - kp. 363 $num_no_alpha = preg_replace( '/[^\d.-]/', '', $value ); 364 if ( empty( $the_units ) ) { 365 $the_units = str_replace( $num_no_alpha, '', $value ); 366 } 367 368 // Output if it's a numeric entry. 369 if ( isset( $value ) && is_numeric( $num_no_alpha ) ) { 370 $style .= $key . ':' . $num_no_alpha . $the_units . ';'; 371 } 372 } 373 374 return $style; 375 } 376 377 /** 378 * Enable output_variables to be generated. 379 * 380 * @since 4.0.3 381 * @return void 382 */ 383 public function output_variables() { 384 // No code needed, just defining the method is enough. 385 } 386 } 387 } 388 389 class_alias( 'Redux_Spacing', 'ReduxFramework_Spacing' );