| 1 |
<?php |
| 2 |
namespace YayMail\Elements; |
| 3 |
|
| 4 |
use YayMail\Abstracts\BaseElement; |
| 5 |
use YayMail\Utils\SingletonTrait; |
| 6 |
|
| 7 |
/** |
| 8 |
* Column Elements |
| 9 |
*/ |
| 10 |
class ColumnLayout extends BaseElement { |
| 11 |
|
| 12 |
use SingletonTrait; |
| 13 |
|
| 14 |
protected static $type = 'column_layout'; |
| 15 |
|
| 16 |
public $available_email_ids = [ YAYMAIL_ALL_EMAILS ]; |
| 17 |
|
| 18 |
public static function get_data( $amount = 1, $attributes = [] ) { |
| 19 |
return [ |
| 20 |
'id' => uniqid(), |
| 21 |
'type' => self::$type, |
| 22 |
'name' => self::get_name( $amount ), |
| 23 |
'icon' => self::get_icon( $amount ), |
| 24 |
'group' => 'general', |
| 25 |
'available' => true, |
| 26 |
'position' => 150, |
| 27 |
'children' => isset( $attributes['children'] ) ? $attributes['children'] : self::get_nested_columns( $amount ), |
| 28 |
'data' => [ |
| 29 |
'amount_of_columns' => [ |
| 30 |
'value_path' => 'amount_of_columns', |
| 31 |
'default_value' => $amount, |
| 32 |
], |
| 33 |
'column_width' => [ |
| 34 |
'value_path' => 'column_width', |
| 35 |
'component' => 1 == $amount ? '' : 'ColumnWidth', |
| 36 |
'title' => __( 'Column width (%)', 'yaymail' ), |
| 37 |
'default_value' => [], |
| 38 |
// Trick to bypass checking value_path |
| 39 |
], |
| 40 |
'column_spacing' => [ |
| 41 |
'value_path' => 'column_spacing', |
| 42 |
'component' => 'Dimension', |
| 43 |
'title' => __( 'Column spacing', 'yaymail' ), |
| 44 |
'default_value' => isset( $attributes['column_spacing'] ) ? $attributes['column_spacing'] : '0', |
| 45 |
'min' => 0, |
| 46 |
'max' => 100, |
| 47 |
'type' => 'style', |
| 48 |
], |
| 49 |
'responsive_on_mobile' => [ |
| 50 |
'value_path' => 'responsive_on_mobile', |
| 51 |
'component' => 'Switcher', |
| 52 |
'title' => __( 'Responsive on mobile', 'yaymail' ), |
| 53 |
'default_value' => isset( $attributes['responsive_on_mobile'] ) ? (bool) $attributes['responsive_on_mobile'] : false, |
| 54 |
'type' => 'content', |
| 55 |
], |
| 56 |
'vertical_align' => [ |
| 57 |
'value_path' => 'vertical_align', |
| 58 |
'component' => 'Selector', |
| 59 |
'title' => __( 'Vertical align', 'yaymail' ), |
| 60 |
'default_value' => isset( $attributes['vertical_align'] ) ? $attributes['vertical_align'] : 'top', |
| 61 |
'options' => [ |
| 62 |
[ |
| 63 |
'label' => __( 'Top', 'yaymail' ), |
| 64 |
'value' => 'top', |
| 65 |
], |
| 66 |
[ |
| 67 |
'label' => __( 'Middle', 'yaymail' ), |
| 68 |
'value' => 'middle', |
| 69 |
], |
| 70 |
[ |
| 71 |
'label' => __( 'Bottom', 'yaymail' ), |
| 72 |
'value' => 'bottom', |
| 73 |
], |
| 74 |
], |
| 75 |
'type' => 'style', |
| 76 |
], |
| 77 |
'container_setting_breaker' => [ |
| 78 |
'component' => 'LineBreaker', |
| 79 |
], |
| 80 |
'container_setting_group_definition' => [ |
| 81 |
'component' => 'GroupDefinition', |
| 82 |
'title' => __( 'Container layout settings', 'yaymail' ), |
| 83 |
'description' => __( 'Handle container layout settings', 'yaymail' ), |
| 84 |
], |
| 85 |
'padding' => [ |
| 86 |
'value_path' => 'padding', |
| 87 |
'component' => 'Spacing', |
| 88 |
'title' => __( 'Padding', 'yaymail' ), |
| 89 |
'default_value' => isset( $attributes['padding'] ) ? $attributes['padding'] : [ |
| 90 |
'top' => '15', |
| 91 |
'right' => '0', |
| 92 |
'bottom' => '15', |
| 93 |
'left' => '0', |
| 94 |
], |
| 95 |
'type' => 'style', |
| 96 |
], |
| 97 |
'border_radius' => [ |
| 98 |
'value_path' => 'border_radius', |
| 99 |
'component' => 'BorderRadius', |
| 100 |
'title' => __( 'Border radius', 'yaymail' ), |
| 101 |
'default_value' => [ |
| 102 |
'top_left' => isset( $attributes['border_radius']['top_left'] ) ? $attributes['border_radius']['top_left'] : '0', |
| 103 |
'top_right' => isset( $attributes['border_radius']['top_right'] ) ? $attributes['border_radius']['top_right'] : '0', |
| 104 |
'bottom_left' => isset( $attributes['border_radius']['bottom_left'] ) ? $attributes['border_radius']['bottom_left'] : '0', |
| 105 |
'bottom_right' => isset( $attributes['border_radius']['bottom_right'] ) ? $attributes['border_radius']['bottom_right'] : '0', |
| 106 |
], |
| 107 |
'type' => 'style', |
| 108 |
], |
| 109 |
'background_color' => [ |
| 110 |
'value_path' => 'background_color', |
| 111 |
'component' => 'Color', |
| 112 |
'title' => __( 'Background color', 'yaymail' ), |
| 113 |
'default_value' => isset( $attributes['background_color'] ) ? $attributes['background_color'] : '#fff', |
| 114 |
'type' => 'style', |
| 115 |
], |
| 116 |
'background_image' => [ |
| 117 |
'value_path' => 'background_image', |
| 118 |
'component' => 'BackgroundImage', |
| 119 |
'title' => __( 'Background image', 'yaymail' ), |
| 120 |
'default_value' => isset( $attributes['background_image'] ) ? $attributes['background_image'] : [ |
| 121 |
'url' => '', |
| 122 |
'position' => 'default', |
| 123 |
'x_position' => 0, |
| 124 |
'y_position' => 0, |
| 125 |
'repeat' => 'default', |
| 126 |
'size' => 'default', |
| 127 |
], |
| 128 |
'type' => 'style', |
| 129 |
], |
| 130 |
'inner_setting_breaker' => [ |
| 131 |
'component' => 'LineBreaker', |
| 132 |
], |
| 133 |
'inner_setting_group_definition' => [ |
| 134 |
'component' => 'GroupDefinition', |
| 135 |
'title' => __( 'Inner layout settings', 'yaymail' ), |
| 136 |
'description' => __( 'Handle inner layout settings', 'yaymail' ), |
| 137 |
], |
| 138 |
'inner_border_radius' => [ |
| 139 |
'value_path' => 'inner_border_radius', |
| 140 |
'component' => 'BorderRadius', |
| 141 |
'title' => __( 'Inner border radius', 'yaymail' ), |
| 142 |
'default_value' => [ |
| 143 |
'top_left' => isset( $attributes['inner_border_radius']['top_left'] ) ? $attributes['inner_border_radius']['top_left'] : '0', |
| 144 |
'top_right' => isset( $attributes['inner_border_radius']['top_right'] ) ? $attributes['inner_border_radius']['top_right'] : '0', |
| 145 |
'bottom_left' => isset( $attributes['inner_border_radius']['bottom_left'] ) ? $attributes['inner_border_radius']['bottom_left'] : '0', |
| 146 |
'bottom_right' => isset( $attributes['inner_border_radius']['bottom_right'] ) ? $attributes['inner_border_radius']['bottom_right'] : '0', |
| 147 |
], |
| 148 |
'type' => 'style', |
| 149 |
], |
| 150 |
'inner_background_color' => [ |
| 151 |
'value_path' => 'inner_background_color', |
| 152 |
'component' => 'Color', |
| 153 |
'title' => __( 'Inner background color', 'yaymail' ), |
| 154 |
'default_value' => isset( $attributes['inner_background_color'] ) ? $attributes['inner_background_color'] : '#ffffff00', |
| 155 |
'type' => 'style', |
| 156 |
], |
| 157 |
], |
| 158 |
]; |
| 159 |
} |
| 160 |
|
| 161 |
private static function get_nested_columns( $amount ) { |
| 162 |
if ( ! isset( $amount ) || $amount <= 0 ) { |
| 163 |
return []; |
| 164 |
} |
| 165 |
$width = 100 / $amount; |
| 166 |
|
| 167 |
$nested_columms = []; |
| 168 |
for ( $i = 0; $i < $amount; $i++ ) { |
| 169 |
array_push( |
| 170 |
$nested_columms, |
| 171 |
Column::get_data( $width ) |
| 172 |
); |
| 173 |
} |
| 174 |
|
| 175 |
return $nested_columms; |
| 176 |
} |
| 177 |
|
| 178 |
private static function get_name( $amount ) { |
| 179 |
$column_names = [ |
| 180 |
1 => __( 'One Column', 'yaymail' ), |
| 181 |
2 => __( 'Two Columns', 'yaymail' ), |
| 182 |
3 => __( 'Three Columns', 'yaymail' ), |
| 183 |
4 => __( 'Four Columns', 'yaymail' ), |
| 184 |
]; |
| 185 |
|
| 186 |
return isset( $column_names[ $amount ] ) ? $column_names[ $amount ] : 'Column'; |
| 187 |
} |
| 188 |
|
| 189 |
private static function get_icon( $amount ) { |
| 190 |
$icons = [ |
| 191 |
1 => '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 20 20"> |
| 192 |
<path d="M18.75,1.25v17.5H1.25V1.25h17.5M19,1H1v18h18V1h0Z"/> |
| 193 |
<rect x="8.4" y="1.94" width="3.2" height="16.12"/> |
| 194 |
</svg>', |
| 195 |
2 => '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 20 20"> |
| 196 |
<path d="M18.75,1.25v17.5H1.25V1.25h17.5M19,1H1v18h18V1h0Z"/> |
| 197 |
<rect x="2.12" y="1.94" width="7.2" height="16.12"/> |
| 198 |
<rect x="10.66" y="1.94" width="7.2" height="16.12"/> |
| 199 |
</svg>', |
| 200 |
3 => '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 20 20"> |
| 201 |
<path d="M18.75,1.25v17.5H1.25V1.25h17.5M19,1H1v18h18V1h0Z"/> |
| 202 |
<rect x="2.07" y="1.94" width="4.36" height="16.12"/> |
| 203 |
<rect x="7.79" y="1.94" width="4.36" height="16.12"/> |
| 204 |
<rect x="13.51" y="1.94" width="4.36" height="16.12"/> |
| 205 |
</svg>', |
| 206 |
4 => '<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 20 20"> |
| 207 |
<path d="M18.75,1.25v17.5H1.25V1.25h17.5M19,1H1v18h18V1h0Z"/> |
| 208 |
<rect x="2.07" y="1.94" width="3.2" height="16.12"/> |
| 209 |
<rect x="6.26" y="1.94" width="3.2" height="16.12"/> |
| 210 |
<rect x="10.46" y="1.94" width="3.2" height="16.12"/> |
| 211 |
<rect x="14.66" y="1.94" width="3.2" height="16.12"/> |
| 212 |
</svg>', |
| 213 |
]; |
| 214 |
|
| 215 |
return isset( $icons[ $amount ] ) ? $icons[ $amount ] : $icons[1]; |
| 216 |
} |
| 217 |
} |
| 218 |
|
