| @@ -1,0 +1,335 @@ | ||
| 1 | +<?php | |
| 2 | +namespace ABlocks\Controls; | |
| 3 | + | |
| 4 | +if ( ! defined( 'ABSPATH' ) ) { | |
| 5 | + exit; | |
| 6 | +} | |
| 7 | + | |
| 8 | +use ABlocks\Classes\ControlBaseAbstract; | |
| 9 | +use ABlocks\Controls\Color; | |
| 10 | + | |
| 11 | +class Border extends ControlBaseAbstract { | |
| 12 | + public static function get_attribute_default_value( $is_responsive = false ) { | |
| 13 | + | |
| 14 | + if ( $is_responsive ) { | |
| 15 | + return array( | |
| 16 | + 'borderStyle' => 'default', | |
| 17 | + 'borderStyleH' => 'default', | |
| 18 | + // border color | |
| 19 | + 'borderColor' => '', | |
| 20 | + // border color - Hover | |
| 21 | + 'borderColorH' => '', | |
| 22 | + // width | |
| 23 | + 'isLinkedWidth' => true, | |
| 24 | + 'isLinkedWidthTablet' => true, | |
| 25 | + 'isLinkedWidthMobile' => true, | |
| 26 | + 'commonWidth' => '', | |
| 27 | + 'commonWidthTablet' => '', | |
| 28 | + 'commonWidthMobile' => '', | |
| 29 | + 'topWidth' => '', | |
| 30 | + 'rightWidth' => '', | |
| 31 | + 'bottomWidth' => '', | |
| 32 | + 'leftWidth' => '', | |
| 33 | + 'topWidthTablet' => '', | |
| 34 | + 'rightWidthTablet' => '', | |
| 35 | + 'bottomWidthTablet' => '', | |
| 36 | + 'leftWidthTablet' => '', | |
| 37 | + 'topWidthMobile' => '', | |
| 38 | + 'rightWidthMobile' => '', | |
| 39 | + 'bottomWidthMobile' => '', | |
| 40 | + 'leftWidthMobile' => '', | |
| 41 | + 'unitWidth' => 'px', | |
| 42 | + 'unitWidthTablet' => '', | |
| 43 | + 'unitWidthMobile' => '', | |
| 44 | + 'isLinkedWidthH' => true, | |
| 45 | + 'isLinkedWidthHTablet' => true, | |
| 46 | + 'isLinkedWidthHMobile' => true, | |
| 47 | + // Width Hover | |
| 48 | + 'commonWidthH' => '', | |
| 49 | + 'commonWidthHTablet' => '', | |
| 50 | + 'commonWidthHMobile' => '', | |
| 51 | + 'topWidthH' => '', | |
| 52 | + 'rightWidthH' => '', | |
| 53 | + 'bottomWidthH' => '', | |
| 54 | + 'leftWidthH' => '', | |
| 55 | + 'topWidthHTablet' => '', | |
| 56 | + 'rightWidthHTablet' => '', | |
| 57 | + 'bottomWidthHTablet' => '', | |
| 58 | + 'leftWidthHTablet' => '', | |
| 59 | + 'topWidthHMobile' => '', | |
| 60 | + 'rightWidthHMobile' => '', | |
| 61 | + 'bottomWidthHMobile' => '', | |
| 62 | + 'leftWidthHMobile' => '', | |
| 63 | + 'unitWidthH' => 'px', | |
| 64 | + 'unitWidthHTablet' => '', | |
| 65 | + 'unitWidthHMobile' => '', | |
| 66 | + // Radius | |
| 67 | + 'isLinkedRadius' => true, | |
| 68 | + 'isLinkedRadiusTablet' => true, | |
| 69 | + 'isLinkedRadiusMobile' => true, | |
| 70 | + 'commonRadius' => '', | |
| 71 | + 'commonRadiusTablet' => '', | |
| 72 | + 'commonRadiusMobile' => '', | |
| 73 | + 'topRadius' => '', | |
| 74 | + 'rightRadius' => '', | |
| 75 | + 'bottomRadius' => '', | |
| 76 | + 'leftRadius' => '', | |
| 77 | + 'topRadiusTablet' => '', | |
| 78 | + 'rightRadiusTablet' => '', | |
| 79 | + 'bottomRadiusTablet' => '', | |
| 80 | + 'leftRadiusTablet' => '', | |
| 81 | + 'topRadiusMobile' => '', | |
| 82 | + 'rightRadiusMobile' => '', | |
| 83 | + 'bottomRadiusMobile' => '', | |
| 84 | + 'leftRadiusMobile' => '', | |
| 85 | + 'unitRadius' => 'px', | |
| 86 | + 'unitRadiusTablet' => '', | |
| 87 | + 'unitRadiusMobile' => '', | |
| 88 | + // Radius Hover | |
| 89 | + 'isLinkedRadiusH' => true, | |
| 90 | + 'isLinkedRadiusHTablet' => true, | |
| 91 | + 'isLinkedRadiusHMobile' => true, | |
| 92 | + 'commonRadiusH' => '', | |
| 93 | + 'commonRadiusHTablet' => '', | |
| 94 | + 'commonRadiusHMobile' => '', | |
| 95 | + 'topRadiusH' => '', | |
| 96 | + 'rightRadiusH' => '', | |
| 97 | + 'bottomRadiusH' => '', | |
| 98 | + 'leftRadiusH' => '', | |
| 99 | + 'topRadiusHTablet' => '', | |
| 100 | + 'rightRadiusHTablet' => '', | |
| 101 | + 'bottomRadiusHTablet' => '', | |
| 102 | + 'leftRadiusHTablet' => '', | |
| 103 | + 'topRadiusHMobile' => '', | |
| 104 | + 'rightRadiusHMobile' => '', | |
| 105 | + 'bottomRadiusHMobile' => '', | |
| 106 | + 'leftRadiusHMobile' => '', | |
| 107 | + 'unitRadiusH' => 'px', | |
| 108 | + 'unitRadiusHTablet' => '', | |
| 109 | + 'unitRadiusHMobile' => '', | |
| 110 | + 'transitionDuration' => '' | |
| 111 | + ); | |
| 112 | + }//end if | |
| 113 | + return [ | |
| 114 | + 'borderStyle' => 'default', | |
| 115 | + 'borderStyleH' => 'default', | |
| 116 | + // border color | |
| 117 | + 'borderColor' => '', | |
| 118 | + // border color - Hover | |
| 119 | + 'borderColorH' => '', | |
| 120 | + // border width - Normal | |
| 121 | + 'isLinkedWidth' => true, | |
| 122 | + 'isLinkedWidthTablet' => true, | |
| 123 | + 'isLinkedWidthMobile' => true, | |
| 124 | + 'commonWidth' => '', | |
| 125 | + 'topWidth' => '', | |
| 126 | + 'rightWidth' => '', | |
| 127 | + 'bottomWidth' => '', | |
| 128 | + 'leftWidth' => '', | |
| 129 | + 'unitWidth' => 'px', | |
| 130 | + | |
| 131 | + // border width - Hover | |
| 132 | + 'isLinkedWidthH' => true, | |
| 133 | + 'isLinkedWidthHTablet' => true, | |
| 134 | + 'isLinkedWidthHMobile' => true, | |
| 135 | + 'commonWidthH' => '', | |
| 136 | + 'topWidthH' => '', | |
| 137 | + 'rightWidthH' => '', | |
| 138 | + 'bottomWidthH' => '', | |
| 139 | + 'leftWidthH' => '', | |
| 140 | + 'unitWidthH' => 'px', | |
| 141 | + | |
| 142 | + // border Radius | |
| 143 | + 'isLinkedRadius' => true, | |
| 144 | + 'commonRadius' => '', | |
| 145 | + 'topRadius' => '', | |
| 146 | + 'rightRadius' => '', | |
| 147 | + 'bottomRadius' => '', | |
| 148 | + 'leftRadius' => '', | |
| 149 | + 'unitRadius' => 'px', | |
| 150 | + | |
| 151 | + // border RadiusH - Hover | |
| 152 | + 'isLinkedRadiusH' => true, | |
| 153 | + 'isLinkedRadiusHTablet' => true, | |
| 154 | + 'isLinkedRadiusHMobile' => true, | |
| 155 | + 'commonRadiusH' => '', | |
| 156 | + 'topRadiusH' => '', | |
| 157 | + 'leftRadiusH' => '', | |
| 158 | + 'unitRadiusH' => 'px', | |
| 159 | + 'transitionDuration' => '', | |
| 160 | + ]; | |
| 161 | + } | |
| 162 | + | |
| 163 | + public static function get_attribute( $attributeName, $isResponsive = false ) { | |
| 164 | + $attribute_value = self::get_attribute_default_value( $isResponsive ); | |
| 165 | + if ( $isResponsive ) { | |
| 166 | + return [ | |
| 167 | + $attributeName => [ | |
| 168 | + 'type' => 'object', | |
| 169 | + 'default' => $attribute_value | |
| 170 | + ] | |
| 171 | + ]; | |
| 172 | + } | |
| 173 | + return [ | |
| 174 | + $attributeName => [ | |
| 175 | + 'type' => 'object', | |
| 176 | + 'default' => $attribute_value | |
| 177 | + ] | |
| 178 | + ]; | |
| 179 | + } | |
| 180 | + public static function get_css( $attribute_value, $property = '', $device = '' ) { | |
| 181 | + $value = wp_parse_args( $attribute_value, self::responsive_defaults() ); | |
| 182 | + $css = []; | |
| 183 | + | |
| 184 | + // Separate handling of width units | |
| 185 | + // Resolved from the full value so a custom breakpoint's own unit key | |
| 186 | + // takes part; for Tablet/Mobile this reads the same three keys as before. | |
| 187 | + if ( $device ) { | |
| 188 | + $widthUnit = \ABlocks\Helper::get_responsive_value( $value, 'unitWidth', $device ); | |
| 189 | + } else { | |
| 190 | + $widthUnit = $value['unitWidth']; | |
| 191 | + } | |
| 192 | + | |
| 193 | + // Handle width. Read every device-suffixed member through device_member(): | |
| 194 | + // a custom breakpoint (or the generator's value-less probe suffix) has no | |
| 195 | + // key of its own in the control's defaults, and indexing it directly is | |
| 196 | + // what produced "Undefined array key …" notices on every page. | |
| 197 | + if ( self::device_member( $value, 'isLinkedWidth', $device ) ) { | |
| 198 | + $commonWidth = self::device_member( $value, 'commonWidth', $device ); | |
| 199 | + if ( '' !== $commonWidth ) { | |
| 200 | + $css['border-width'] = $commonWidth . $widthUnit; | |
| 201 | + } | |
| 202 | + } else { | |
| 203 | + $topWidth = self::device_member( $value, 'topWidth', $device ); | |
| 204 | + $rightWidth = self::device_member( $value, 'rightWidth', $device ); | |
| 205 | + $bottomWidth = self::device_member( $value, 'bottomWidth', $device ); | |
| 206 | + $leftWidth = self::device_member( $value, 'leftWidth', $device ); | |
| 207 | + | |
| 208 | + // Only emit border-width when at least one side was actually set — | |
| 209 | + // otherwise every unlinked border produced "border-width:0px 0px 0px 0px". | |
| 210 | + $has_width = '' !== $topWidth || '' !== $rightWidth || '' !== $bottomWidth || '' !== $leftWidth; | |
| 211 | + if ( $has_width ) { | |
| 212 | + $topWidth = ! empty( $topWidth ) ? $topWidth : 0; | |
| 213 | + $rightWidth = ! empty( $rightWidth ) ? $rightWidth : 0; | |
| 214 | + $bottomWidth = ! empty( $bottomWidth ) ? $bottomWidth : 0; | |
| 215 | + $leftWidth = ! empty( $leftWidth ) ? $leftWidth : 0; | |
| 216 | + | |
| 217 | + $borderWidth = $topWidth . $widthUnit . ' ' . $rightWidth . $widthUnit . ' ' . $bottomWidth . $widthUnit . ' ' . $leftWidth . $widthUnit; | |
| 218 | + | |
| 219 | + $css['border-width'] = $borderWidth; | |
| 220 | + } | |
| 221 | + }//end if | |
| 222 | + | |
| 223 | + // Handle border style and color | |
| 224 | + if ( '' !== $value['borderStyle'] && 'default' !== $value['borderStyle'] ) { | |
| 225 | + $css['border-style'] = $value['borderStyle']; | |
| 226 | + } | |
| 227 | + if ( '' !== $value['borderColor'] ) { | |
| 228 | + $css['border-color'] = Color::get_css( $value['borderColor'] ); | |
| 229 | + } | |
| 230 | + | |
| 231 | + // Separate handling of radius units | |
| 232 | + if ( $device ) { | |
| 233 | + $radiusUnit = \ABlocks\Helper::get_responsive_value( $value, 'unitRadius', $device ); | |
| 234 | + } else { | |
| 235 | + $radiusUnit = $value['unitRadius']; | |
| 236 | + } | |
| 237 | + | |
| 238 | + // Handle radius | |
| 239 | + if ( self::device_member( $value, 'isLinkedRadius', $device ) ) { | |
| 240 | + $commonRadius = self::device_member( $value, 'commonRadius', $device ); | |
| 241 | + if ( '' !== $commonRadius ) { | |
| 242 | + $css['border-radius'] = $commonRadius . $radiusUnit; | |
| 243 | + } | |
| 244 | + } else { | |
| 245 | + $corners = [ | |
| 246 | + 'topRadius' => 'border-top-left-radius', | |
| 247 | + 'rightRadius' => 'border-top-right-radius', | |
| 248 | + 'bottomRadius' => 'border-bottom-right-radius', | |
| 249 | + 'leftRadius' => 'border-bottom-left-radius', | |
| 250 | + ]; | |
| 251 | + foreach ( $corners as $member => $property_name ) { | |
| 252 | + $corner = self::device_member( $value, $member, $device ); | |
| 253 | + if ( '' !== $corner ) { | |
| 254 | + $css[ $property_name ] = $corner . $radiusUnit; | |
| 255 | + } | |
| 256 | + } | |
| 257 | + } | |
| 258 | + | |
| 259 | + // Handle transition duration | |
| 260 | + if ( self::has_value( $value['transitionDuration'] ) ) { | |
| 261 | + $css['transition'] = "border {$value['transitionDuration']}s, border-radius {$value['transitionDuration']}s"; | |
| 262 | + } | |
| 263 | + | |
| 264 | + return $css; | |
| 265 | + } | |
| 266 | + | |
| 267 | + public static function get_hover_css( $attribute_value, $property = '', $device = '' ) { | |
| 268 | + $value = wp_parse_args( $attribute_value, self::get_attribute_default_value( true ) ); // avoid Undefined error | |
| 269 | + $css = []; | |
| 270 | + | |
| 271 | + // Handle width units based on device | |
| 272 | + $widthUnit = self::get_unit( [ | |
| 273 | + 'unit' => $value['unitWidthH'], | |
| 274 | + 'unitTablet' => $value['unitWidthHTablet'], | |
| 275 | + 'unitMobile' => $value['unitWidthHMobile'], | |
| 276 | + ], $device ); | |
| 277 | + | |
| 278 | + if ( ! empty( $value['borderStyleH'] ) && 'default' !== $value['borderStyleH'] ) { | |
| 279 | + // Handle hover width | |
| 280 | + if ( ! empty( $value[ 'isLinkedWidthH' . $device ] ) ) { | |
| 281 | + $commonWidthH = self::device_member( $value, 'commonWidthH', $device ); | |
| 282 | + if ( '' !== $commonWidthH ) { | |
| 283 | + $css['border-width'] = $commonWidthH . $widthUnit; | |
| 284 | + } | |
| 285 | + } else { | |
| 286 | + $topWidth = ! empty( $value[ 'topWidthH' . $device ] ) ? $value[ 'topWidthH' . $device ] : 0; | |
| 287 | + $rightWidth = ! empty( $value[ 'rightWidthH' . $device ] ) ? $value[ 'rightWidthH' . $device ] : 0; | |
| 288 | + $bottomWidth = ! empty( $value[ 'bottomWidthH' . $device ] ) ? $value[ 'bottomWidthH' . $device ] : 0; | |
| 289 | + $leftWidth = ! empty( $value[ 'leftWidthH' . $device ] ) ? $value[ 'leftWidthH' . $device ] : 0; | |
| 290 | + | |
| 291 | + $css['border-width'] = $topWidth . $widthUnit . ' ' . $rightWidth . $widthUnit . ' ' . $bottomWidth . $widthUnit . ' ' . $leftWidth . $widthUnit; | |
| 292 | + } | |
| 293 | + | |
| 294 | + // Handle hover border color | |
| 295 | + if ( ! empty( $value['borderColorH'] ) ) { | |
| 296 | + $css['border-color'] = Color::get_css( $value['borderColorH'] ); | |
| 297 | + } | |
| 298 | + }//end if | |
| 299 | + | |
| 300 | + // Handle hover border style | |
| 301 | + if ( ! empty( $value['borderStyleH'] ) && 'default' !== $value['borderStyleH'] ) { | |
| 302 | + $css['border-style'] = $value['borderStyleH']; | |
| 303 | + } | |
| 304 | + | |
| 305 | + // Handle radius units based on device | |
| 306 | + $radiusUnit = self::get_unit( [ | |
| 307 | + 'unit' => $value['unitRadiusH'], | |
| 308 | + 'unitTablet' => $value['unitRadiusHTablet'], | |
| 309 | + 'unitMobile' => $value['unitRadiusHMobile'], | |
| 310 | + ], $device ); | |
| 311 | + | |
| 312 | + // Handle hover border radius | |
| 313 | + if ( ! empty( $value[ 'isLinkedRadiusH' . $device ] ) ) { | |
| 314 | + if ( '' !== ( $value[ 'commonRadiusH' . $device ] ?? '' ) ) { | |
| 315 | + $css['border-radius'] = $value[ 'commonRadiusH' . $device ] . $radiusUnit; | |
| 316 | + } | |
| 317 | + } else { | |
| 318 | + if ( isset( $value[ 'topRadiusH' . $device ] ) && '' !== $value[ 'topRadiusH' . $device ] ) { | |
| 319 | + $css['border-top-left-radius'] = $value[ 'topRadiusH' . $device ] . $radiusUnit; | |
| 320 | + } | |
| 321 | + if ( isset( $value[ 'rightRadiusH' . $device ] ) && '' !== $value[ 'rightRadiusH' . $device ] ) { | |
| 322 | + $css['border-top-right-radius'] = $value[ 'rightRadiusH' . $device ] . $radiusUnit; | |
| 323 | + } | |
| 324 | + if ( isset( $value[ 'bottomRadiusH' . $device ] ) && '' !== $value[ 'bottomRadiusH' . $device ] ) { | |
| 325 | + $css['border-bottom-right-radius'] = $value[ 'bottomRadiusH' . $device ] . $radiusUnit; | |
| 326 | + } | |
| 327 | + if ( isset( $value[ 'leftRadiusH' . $device ] ) && '' !== $value[ 'leftRadiusH' . $device ] ) { | |
| 328 | + $css['border-bottom-left-radius'] = $value[ 'leftRadiusH' . $device ] . $radiusUnit; | |
| 329 | + } | |
| 330 | + } | |
| 331 | + | |
| 332 | + return $css; | |
| 333 | + | |
| 334 | + } | |
| 335 | +} | |
