divider.php (32312B)
1 <?php 2 namespace Elementor; 3 4 if ( ! defined( 'ABSPATH' ) ) { 5 exit; // Exit if accessed directly. 6 } 7 8 use Elementor\Core\Kits\Documents\Tabs\Global_Colors; 9 use Elementor\Core\Kits\Documents\Tabs\Global_Typography; 10 11 /** 12 * Elementor divider widget. 13 * 14 * Elementor widget that displays a line that divides different elements in the 15 * page. 16 * 17 * @since 1.0.0 18 */ 19 class Widget_Divider extends Widget_Base { 20 21 /** 22 * Get widget name. 23 * 24 * Retrieve divider widget name. 25 * 26 * @since 1.0.0 27 * @access public 28 * 29 * @return string Widget name. 30 */ 31 public function get_name() { 32 return 'divider'; 33 } 34 35 /** 36 * Get widget title. 37 * 38 * Retrieve divider widget title. 39 * 40 * @since 1.0.0 41 * @access public 42 * 43 * @return string Widget title. 44 */ 45 public function get_title() { 46 return esc_html__( 'Divider', 'elementor' ); 47 } 48 49 /** 50 * Get widget icon. 51 * 52 * Retrieve divider widget icon. 53 * 54 * @since 1.0.0 55 * @access public 56 * 57 * @return string Widget icon. 58 */ 59 public function get_icon() { 60 return 'eicon-divider'; 61 } 62 63 /** 64 * Get widget categories. 65 * 66 * Retrieve the list of categories the divider widget belongs to. 67 * 68 * Used to determine where to display the widget in the editor. 69 * 70 * @since 2.0.0 71 * @access public 72 * 73 * @return array Widget categories. 74 */ 75 public function get_categories() { 76 return [ 'basic' ]; 77 } 78 79 /** 80 * Get widget keywords. 81 * 82 * Retrieve the list of keywords the widget belongs to. 83 * 84 * @since 2.1.0 85 * @access public 86 * 87 * @return array Widget keywords. 88 */ 89 public function get_keywords() { 90 return [ 'divider', 'hr', 'line', 'border' ]; 91 } 92 93 private static function get_additional_styles() { 94 static $additional_styles = null; 95 96 if ( null !== $additional_styles ) { 97 return $additional_styles; 98 } 99 $additional_styles = []; 100 /** 101 * Additional Styles. 102 * 103 * Filters the styles used by Elementor to add additional divider styles. 104 * 105 * @since 2.7.0 106 * 107 * @param array $additional_styles Additional Elementor divider styles. 108 */ 109 $additional_styles = apply_filters( 'elementor/divider/styles/additional_styles', $additional_styles ); 110 return $additional_styles; 111 } 112 113 private function get_separator_styles() { 114 return array_merge( 115 self::get_additional_styles(), 116 [ 117 'curly' => [ 118 'label' => _x( 'Curly', 'shapes', 'elementor' ), 119 'shape' => '<path d="M0,21c3.3,0,8.3-0.9,15.7-7.1c6.6-5.4,4.4-9.3,2.4-10.3c-3.4-1.8-7.7,1.3-7.3,8.8C11.2,20,17.1,21,24,21"/>', 120 'preserve_aspect_ratio' => false, 121 'supports_amount' => true, 122 'round' => false, 123 'group' => 'line', 124 ], 125 'curved' => [ 126 'label' => _x( 'Curved', 'shapes', 'elementor' ), 127 'shape' => '<path d="M0,6c6,0,6,13,12,13S18,6,24,6"/>', 128 'preserve_aspect_ratio' => false, 129 'supports_amount' => true, 130 'round' => false, 131 'group' => 'line', 132 ], 133 'multiple' => [ 134 'label' => _x( 'Multiple', 'shapes', 'elementor' ), 135 'shape' => '<path d="M24,8v12H0V8H24z M24,4v1H0V4H24z"/>', 136 'preserve_aspect_ratio' => false, 137 'supports_amount' => false, 138 'round' => false, 139 'group' => 'pattern', 140 ], 141 'slashes' => [ 142 'label' => _x( 'Slashes', 'shapes', 'elementor' ), 143 'shape' => '<g transform="translate(-12.000000, 0)"><path d="M28,0L10,18"/><path d="M18,0L0,18"/><path d="M48,0L30,18"/><path d="M38,0L20,18"/></g>', 144 'preserve_aspect_ratio' => false, 145 'supports_amount' => true, 146 'round' => false, 147 'view_box' => '0 0 20 16', 148 'group' => 'line', 149 ], 150 'squared' => [ 151 'label' => _x( 'Squared', 'shapes', 'elementor' ), 152 'shape' => '<polyline points="0,6 6,6 6,18 18,18 18,6 24,6 "/>', 153 'preserve_aspect_ratio' => false, 154 'supports_amount' => true, 155 'round' => false, 156 'group' => 'line', 157 ], 158 'wavy' => [ 159 'label' => _x( 'Wavy', 'shapes', 'elementor' ), 160 'shape' => '<path d="M0,6c6,0,0.9,11.1,6.9,11.1S18,6,24,6"/>', 161 'preserve_aspect_ratio' => false, 162 'supports_amount' => true, 163 'round' => false, 164 'group' => 'line', 165 ], 166 'zigzag' => [ 167 'label' => _x( 'Zigzag', 'shapes', 'elementor' ), 168 'shape' => '<polyline points="0,18 12,6 24,18 "/>', 169 'preserve_aspect_ratio' => false, 170 'supports_amount' => true, 171 'round' => false, 172 'group' => 'line', 173 ], 174 'arrows' => [ 175 'label' => _x( 'Arrows', 'shapes', 'elementor' ), 176 'shape' => '<path d="M14.2,4c0.3,0,0.5,0.1,0.7,0.3l7.9,7.2c0.2,0.2,0.3,0.4,0.3,0.7s-0.1,0.5-0.3,0.7l-7.9,7.2c-0.2,0.2-0.4,0.3-0.7,0.3s-0.5-0.1-0.7-0.3s-0.3-0.4-0.3-0.7l0-2.9l-11.5,0c-0.4,0-0.7-0.3-0.7-0.7V9.4C1,9,1.3,8.7,1.7,8.7l11.5,0l0-3.6c0-0.3,0.1-0.5,0.3-0.7S13.9,4,14.2,4z"/>', 177 'preserve_aspect_ratio' => true, 178 'supports_amount' => true, 179 'round' => true, 180 'group' => 'pattern', 181 ], 182 'pluses' => [ 183 'label' => _x( 'Pluses', 'shapes', 'elementor' ), 184 'shape' => '<path d="M21.4,9.6h-7.1V2.6c0-0.9-0.7-1.6-1.6-1.6h-1.6c-0.9,0-1.6,0.7-1.6,1.6v7.1H2.6C1.7,9.6,1,10.3,1,11.2v1.6c0,0.9,0.7,1.6,1.6,1.6h7.1v7.1c0,0.9,0.7,1.6,1.6,1.6h1.6c0.9,0,1.6-0.7,1.6-1.6v-7.1h7.1c0.9,0,1.6-0.7,1.6-1.6v-1.6C23,10.3,22.3,9.6,21.4,9.6z"/>', 185 'preserve_aspect_ratio' => true, 186 'supports_amount' => true, 187 'round' => false, 188 'group' => 'pattern', 189 ], 190 'rhombus' => [ 191 'label' => _x( 'Rhombus', 'shapes', 'elementor' ), 192 'shape' => '<path d="M12.7,2.3c-0.4-0.4-1.1-0.4-1.5,0l-8,9.1c-0.3,0.4-0.3,0.9,0,1.2l8,9.1c0.4,0.4,1.1,0.4,1.5,0l8-9.1c0.3-0.4,0.3-0.9,0-1.2L12.7,2.3z"/>', 193 'preserve_aspect_ratio' => false, 194 'supports_amount' => true, 195 'round' => false, 196 'group' => 'pattern', 197 ], 198 'parallelogram' => [ 199 'label' => _x( 'Parallelogram', 'shapes', 'elementor' ), 200 'shape' => '<polygon points="9.4,2 24,2 14.6,21.6 0,21.6"/>', 201 'preserve_aspect_ratio' => false, 202 'supports_amount' => true, 203 'round' => false, 204 'group' => 'pattern', 205 ], 206 'rectangles' => [ 207 'label' => _x( 'Rectangles', 'shapes', 'elementor' ), 208 'shape' => '<rect x="15" y="0" width="30" height="30"/>', 209 'preserve_aspect_ratio' => false, 210 'supports_amount' => true, 211 'round' => true, 212 'group' => 'pattern', 213 'view_box' => '0 0 60 30', 214 ], 215 'dots_tribal' => [ 216 'label' => _x( 'Dots', 'shapes', 'elementor' ), 217 'shape' => '<path d="M3,10.2c2.6,0,2.6,2,2.6,3.2S4.4,16.5,3,16.5s-3-1.4-3-3.2S0.4,10.2,3,10.2z M18.8,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.2-1.4-3.2-3.2S17,10.2,18.8,10.2z M34.6,10.2c1.5,0,2.6,1.4,2.6,3.2s-0.5,3.2-1.9,3.2c-1.5,0-3.4-1.4-3.4-3.2S33.1,10.2,34.6,10.2z M50.5,10.2c1.7,0,3.2,1.4,3.2,3.2s-1.4,3.2-3.2,3.2c-1.7,0-3.3-0.9-3.3-2.6S48.7,10.2,50.5,10.2z M66.2,10.2c1.5,0,3.4,1.4,3.4,3.2s-1.9,3.2-3.4,3.2c-1.5,0-2.6-0.4-2.6-2.1S64.8,10.2,66.2,10.2z M82.2,10.2c1.7,0.8,2.6,1.4,2.6,3.2s-0.1,3.2-1.6,3.2c-1.5,0-3.7-1.4-3.7-3.2S80.5,9.4,82.2,10.2zM98.6,10.2c1.5,0,2.6,0.4,2.6,2.1s-1.2,4.2-2.6,4.2c-1.5,0-3.7-0.4-3.7-2.1S97.1,10.2,98.6,10.2z M113.4,10.2c1.2,0,2.2,0.9,2.2,3.2s-0.1,3.2-1.3,3.2s-3.1-1.4-3.1-3.2S112.2,10.2,113.4,10.2z"/>', 218 'preserve_aspect_ratio' => true, 219 'supports_amount' => false, 220 'round' => false, 221 'group' => 'tribal', 222 'view_box' => '0 0 126 26', 223 ], 224 'trees_2_tribal' => [ 225 'label' => _x( 'Fir Tree', 'shapes', 'elementor' ), 226 'shape' => '<path d="M111.9,18.3v3.4H109v-3.4H111.9z M90.8,18.3v3.4H88v-3.4H90.8z M69.8,18.3v3.4h-2.9v-3.4H69.8z M48.8,18.3v3.4h-2.9v-3.4H48.8z M27.7,18.3v3.4h-2.9v-3.4H27.7z M6.7,18.3v3.4H3.8v-3.4H6.7z M46.4,4l4.3,4.8l-1.8,0l3.5,4.4l-2.2-0.1l3,3.3l-11,0.4l3.6-3.8l-2.9-0.1l3.1-4.2l-1.9,0L46.4,4z M111.4,4l2.4,4.8l-1.8,0l3.5,4.4l-2.5-0.1l3.3,3.3h-11l3.1-3.4l-2.5-0.1l3.1-4.2l-1.9,0L111.4,4z M89.9,4l2.9,4.8l-1.9,0l3.2,4.2l-2.5,0l3.5,3.5l-11-0.4l3-3.1l-2.4,0L88,8.8l-1.9,0L89.9,4z M68.6,4l3,4.4l-1.9,0.1l3.4,4.1l-2.7,0.1l3.8,3.7H63.8l2.9-3.6l-2.9,0.1L67,8.7l-2,0.1L68.6,4z M26.5,4l3,4.4l-1.9,0.1l3.7,4.7l-2.5-0.1l3.3,3.3H21l3.1-3.4l-2.5-0.1l3.2-4.3l-2,0.1L26.5,4z M4.9,4l3.7,4.8l-1.5,0l3.1,4.2L7.6,13l3.4,3.4H0l3-3.3l-2.3,0.1l3.5-4.4l-2.3,0L4.9,4z"/>', 227 'preserve_aspect_ratio' => true, 228 'supports_amount' => false, 229 'round' => false, 230 'group' => 'tribal', 231 'view_box' => '0 0 126 26', 232 ], 233 'rounds_tribal' => [ 234 'label' => _x( 'Half Rounds', 'shapes', 'elementor' ), 235 'shape' => '<path d="M11.9,15.9L11.9,15.9L0,16c-0.2-3.7,1.5-5.7,4.9-6C10,9.6,12.4,14.2,11.9,15.9zM26.9,15.9L26.9,15.9L15,16c0.5-3.7,2.5-5.7,5.9-6C26,9.6,27.4,14.2,26.9,15.9z M37.1,10c3.4,0.3,5.1,2.3,4.9,6H30.1C29.5,14.4,31.9,9.6,37.1,10z M57,15.9L57,15.9L45,16c0-3.4,1.6-5.4,4.9-5.9C54.8,9.3,57.4,14.2,57,15.9z M71.9,15.9L71.9,15.9L60,16c-0.2-3.7,1.5-5.7,4.9-6C70,9.6,72.4,14.2,71.9,15.9z M82.2,10c3.4,0.3,5,2.3,4.8,6H75.3C74,13,77.1,9.6,82.2,10zM101.9,15.9L101.9,15.9L90,16c-0.2-3.7,1.5-5.7,4.9-6C100,9.6,102.4,14.2,101.9,15.9z M112.1,10.1c2.7,0.5,4.3,2.5,4.9,5.9h-11.9l0,0C104.5,14.4,108,9.3,112.1,10.1z"/>', 236 'preserve_aspect_ratio' => true, 237 'supports_amount' => false, 238 'round' => false, 239 'group' => 'tribal', 240 'view_box' => '0 0 120 26', 241 ], 242 'leaves_tribal' => [ 243 'label' => _x( 'Leaves', 'shapes', 'elementor' ), 244 'shape' => '<path d="M3,1.5C5,4.9,6,8.8,6,13s-1.7,8.1-5,11.5C0.3,21.1,0,17.2,0,13S1,4.9,3,1.5z M16,1.5c2,3.4,3,7.3,3,11.5s-1,8.1-3,11.5c-2-4.1-3-8.3-3-12.5S14,4.3,16,1.5z M29,1.5c2,4.8,3,9.3,3,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S27,4.9,29,1.5z M41.1,1.5C43.7,4.9,45,8.8,45,13s-1,8.1-3,11.5c-2-3.4-3-7.3-3-11.5S39.7,4.9,41.1,1.5zM55,1.5c2,2.8,3,6.3,3,10.5s-1.3,8.4-4,12.5c-1.3-3.4-2-7.3-2-11.5S53,4.9,55,1.5z M68,1.5c2,3.4,3,7.3,3,11.5s-0.7,8.1-2,11.5c-2.7-4.8-4-9.3-4-13.5S66,3.6,68,1.5z M82,1.5c1.3,4.8,2,9.3,2,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S79.3,4.9,82,1.5z M94,1.5c2,3.4,3,7.3,3,11.5s-1.3,8.1-4,11.5c-1.3-1.4-2-4.3-2-8.5S92,6.9,94,1.5z M107,1.5c2,2.1,3,5.3,3,9.5s-0.7,8.7-2,13.5c-2.7-3.4-4-7.3-4-11.5S105,4.9,107,1.5z"/>', 245 'preserve_aspect_ratio' => true, 246 'supports_amount' => false, 247 'round' => false, 248 'group' => 'tribal', 249 'view_box' => '0 0 117 26', 250 ], 251 'stripes_tribal' => [ 252 'label' => _x( 'Stripes', 'shapes', 'elementor' ), 253 'shape' => '<path d="M54,1.6V26h-9V2.5L54,1.6z M69,1.6v23.3L60,26V1.6H69z M24,1.6v23.5l-9-0.6V1.6H24z M30,0l9,0.7v24.5h-9V0z M9,2.5v22H0V3.7L9,2.5z M75,1.6l9,0.9v22h-9V1.6z M99,2.7v21.7h-9V3.8L99,2.7z M114,3.8v20.7l-9-0.5V3.8L114,3.8z"/>', 254 'preserve_aspect_ratio' => true, 255 'supports_amount' => false, 256 'round' => false, 257 'group' => 'tribal', 258 'view_box' => '0 0 120 26', 259 ], 260 'squares_tribal' => [ 261 'label' => _x( 'Squares', 'shapes', 'elementor' ), 262 'shape' => '<path d="M46.8,7.8v11.5L36,18.6V7.8H46.8z M82.4,7.8L84,18.6l-12,0.7L70.4,7.8H82.4z M0,7.8l12,0.9v9.9H1.3L0,7.8z M30,7.8v10.8H19L18,7.8H30z M63.7,7.8L66,18.6H54V9.5L63.7,7.8z M89.8,7L102,7.8v10.8H91.2L89.8,7zM108,7.8l12,0.9v8.9l-12,1V7.8z"/>', 263 'preserve_aspect_ratio' => true, 264 'supports_amount' => false, 265 'round' => false, 266 'group' => 'tribal', 267 'view_box' => '0 0 126 26', 268 ], 269 'trees_tribal' => [ 270 'label' => _x( 'Trees', 'shapes', 'elementor' ), 271 'shape' => '<path d="M6.4,2l4.2,5.7H7.7v2.7l3.8,5.2l-3.8,0v7.8H4.8v-7.8H0l4.8-5.2V7.7H1.1L6.4,2z M25.6,2L31,7.7h-3.7v2.7l4.8,5.2h-4.8v7.8h-2.8v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L25.6,2z M47.5,2l4.2,5.7h-3.3v2.7l3.8,5.2l-3.8,0l0.4,7.8h-2.8v-7.8H41l4.8-5.2V7.7h-3.7L47.5,2z M66.2,2l5.4,5.7h-3.7v2.7l4.8,5.2h-4.8v7.8H65v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L66.2,2zM87.4,2l4.8,5.7h-2.9v3.1l3.8,4.8l-3.8,0v7.8h-2.8v-7.8h-4.8l4.8-4.8V7.7h-3.7L87.4,2z M107.3,2l5.4,5.7h-3.7v2.7l4.8,5.2h-4.8v7.8H106v-7.8l-3.8,0l3.8-5.2V7.7h-2.9L107.3,2z"/>', 272 'preserve_aspect_ratio' => true, 273 'supports_amount' => false, 274 'round' => false, 275 'group' => 'tribal', 276 'view_box' => '0 0 123 26', 277 ], 278 'planes_tribal' => [ 279 'label' => _x( 'Tribal', 'shapes', 'elementor' ), 280 'shape' => '<path d="M29.6,10.3l2.1,2.2l-3.6,3.3h7v2.9h-7l3.6,3.5l-2.1,1.7l-5.2-5.2h-5.8v-2.9h5.8L29.6,10.3z M70.9,9.6l2.1,1.7l-3.6,3.5h7v2.9h-7l3.6,3.3l-2.1,2.2l-5.2-5.5h-5.8v-2.9h5.8L70.9,9.6z M111.5,9.6l2.1,1.7l-3.6,3.5h7v2.9h-7l3.6,3.3l-2.1,2.2l-5.2-5.5h-5.8v-2.9h5.8L111.5,9.6z M50.2,2.7l2.1,1.7l-3.6,3.5h7v2.9h-7l3.6,3.3l-2.1,2.2L45,10.7h-5.8V7.9H45L50.2,2.7z M11,2l2.1,1.7L9.6,7.2h7V10h-7l3.6,3.3L11,15.5L5.8,10H0V7.2h5.8L11,2z M91.5,2l2.1,2.2l-3.6,3.3h7v2.9h-7l3.6,3.5l-2.1,1.7l-5.2-5.2h-5.8V7.5h5.8L91.5,2z"/>', 281 'preserve_aspect_ratio' => true, 282 'supports_amount' => false, 283 'round' => false, 284 'group' => 'tribal', 285 'view_box' => '0 0 121 26', 286 ], 287 'x_tribal' => [ 288 'label' => _x( 'X', 'shapes', 'elementor' ), 289 'shape' => '<path d="M10.7,6l2.5,2.6l-4,4.3l4,5.4l-2.5,1.9l-4.5-5.2l-3.9,4.2L0.7,17L4,13.1L0,8.6l2.3-1.3l3.9,3.9L10.7,6z M23.9,6.6l4.2,4.5L32,7.2l2.3,1.3l-4,4.5l3.2,3.9L32,19.1l-3.9-3.3l-4.5,4.3l-2.5-1.9l4.4-5.1l-4.2-3.9L23.9,6.6zM73.5,6L76,8.6l-4,4.3l4,5.4l-2.5,1.9l-4.5-5.2l-3.9,4.2L63.5,17l4.1-4.7L63.5,8l2.3-1.3l4.1,3.6L73.5,6z M94,6l2.5,2.6l-4,4.3l4,5.4L94,20.1l-3.9-5l-3.9,4.2L84,17l3.2-3.9L84,8.6l2.3-1.3l3.2,3.9L94,6z M106.9,6l4.5,5.1l3.9-3.9l2.3,1.3l-4,4.5l3.2,3.9l-1.6,2.1l-3.9-4.2l-4.5,5.2l-2.5-1.9l4-5.4l-4-4.3L106.9,6z M53.1,6l2.5,2.6l-4,4.3l4,4.6l-2.5,1.9l-4.5-4.5l-3.5,4.5L43.1,17l3.2-3.9l-4-4.5l2.3-1.3l3.9,3.9L53.1,6z"/>', 290 'preserve_aspect_ratio' => true, 291 'supports_amount' => false, 292 'round' => false, 293 'group' => 'tribal', 294 'view_box' => '0 0 126 26', 295 ], 296 'zigzag_tribal' => [ 297 'label' => _x( 'Zigzag', 'shapes', 'elementor' ), 298 'shape' => '<polygon points="0,14.4 0,21 11.5,12.4 21.3,20 30.4,11.1 40.3,20 51,12.4 60.6,20 69.6,11.1 79.3,20 90.1,12.4 99.6,20 109.7,11.1 120,21 120,14.4 109.7,5 99.6,13 90.1,5 79.3,14.5 71,5.7 60.6,12.4 51,5 40.3,14.5 31.1,5 21.3,13 11.5,5 "/>', 299 'preserve_aspect_ratio' => true, 300 'supports_amount' => false, 301 'round' => false, 302 'group' => 'tribal', 303 'view_box' => '0 0 120 26', 304 ], 305 ] 306 ); 307 } 308 309 private function filter_styles_by( $array, $key, $value ) { 310 return array_filter( $array, function( $style ) use ( $key, $value ) { 311 return $value === $style[ $key ]; 312 } ); 313 } 314 315 private function get_options_by_groups( $styles, $group = false ) { 316 $groups = [ 317 'line' => [ 318 'label' => esc_html__( 'Line', 'elementor' ), 319 'options' => [ 320 'solid' => esc_html__( 'Solid', 'elementor' ), 321 'double' => esc_html__( 'Double', 'elementor' ), 322 'dotted' => esc_html__( 'Dotted', 'elementor' ), 323 'dashed' => esc_html__( 'Dashed', 'elementor' ), 324 ], 325 ], 326 ]; 327 foreach ( $styles as $key => $style ) { 328 if ( ! isset( $groups[ $style['group'] ] ) ) { 329 $groups[ $style['group'] ] = [ 330 'label' => ucwords( str_replace( '_', '', $style['group'] ) ), 331 'options' => [], 332 ]; 333 } 334 $groups[ $style['group'] ]['options'][ $key ] = $style['label']; 335 } 336 337 if ( $group && isset( $groups[ $group ] ) ) { 338 return $groups[ $group ]; 339 } 340 return $groups; 341 } 342 343 /** 344 * Register divider widget controls. 345 * 346 * Adds different input fields to allow the user to change and customize the widget settings. 347 * 348 * @since 3.1.0 349 * @access protected 350 */ 351 protected function register_controls() { 352 $styles = $this->get_separator_styles(); 353 $this->start_controls_section( 354 'section_divider', 355 [ 356 'label' => esc_html__( 'Divider', 'elementor' ), 357 ] 358 ); 359 360 $this->add_control( 361 'style', 362 [ 363 'label' => esc_html__( 'Style', 'elementor' ), 364 'type' => Controls_Manager::SELECT, 365 'groups' => array_values( $this->get_options_by_groups( $styles ) ), 366 'render_type' => 'template', 367 'default' => 'solid', 368 'selectors' => [ 369 '{{WRAPPER}}' => '--divider-border-style: {{VALUE}}', 370 ], 371 ] 372 ); 373 374 $this->add_control( 375 'separator_type', 376 [ 377 'type' => Controls_Manager::HIDDEN, 378 'default' => 'pattern', 379 'prefix_class' => 'elementor-widget-divider--separator-type-', 380 'condition' => [ 381 'style!' => [ 382 '', 383 'solid', 384 'double', 385 'dotted', 386 'dashed', 387 ], 388 ], 389 'render_type' => 'template', 390 ] 391 ); 392 393 $this->add_control( 394 'pattern_spacing_flag', 395 [ 396 'type' => Controls_Manager::HIDDEN, 397 'default' => 'no-spacing', 398 'prefix_class' => 'elementor-widget-divider--', 399 'condition' => [ 400 'style' => array_keys( $this->filter_styles_by( $styles, 'supports_amount', false ) ), 401 ], 402 'render_type' => 'template', 403 ] 404 ); 405 406 $this->add_control( 407 'pattern_round_flag', 408 [ 409 'type' => Controls_Manager::HIDDEN, 410 'default' => 'bg-round', 411 'prefix_class' => 'elementor-widget-divider--', 412 'condition' => [ 413 'style' => array_keys( $this->filter_styles_by( $styles, 'round', true ) ), 414 ], 415 ] 416 ); 417 418 $this->add_responsive_control( 419 'width', 420 [ 421 'label' => esc_html__( 'Width', 'elementor' ), 422 'type' => Controls_Manager::SLIDER, 423 'size_units' => [ '%', 'px' ], 424 'range' => [ 425 'px' => [ 426 'max' => 1000, 427 ], 428 ], 429 'default' => [ 430 'size' => 100, 431 'unit' => '%', 432 ], 433 'tablet_default' => [ 434 'unit' => '%', 435 ], 436 'mobile_default' => [ 437 'unit' => '%', 438 ], 439 'selectors' => [ 440 '{{WRAPPER}} .elementor-divider-separator' => 'width: {{SIZE}}{{UNIT}};', 441 ], 442 ] 443 ); 444 445 $this->add_responsive_control( 446 'align', 447 [ 448 'label' => esc_html__( 'Alignment', 'elementor' ), 449 'type' => Controls_Manager::CHOOSE, 450 'options' => [ 451 'left' => [ 452 'title' => esc_html__( 'Left', 'elementor' ), 453 'icon' => 'eicon-text-align-left', 454 ], 455 'center' => [ 456 'title' => esc_html__( 'Center', 'elementor' ), 457 'icon' => 'eicon-text-align-center', 458 ], 459 'right' => [ 460 'title' => esc_html__( 'Right', 'elementor' ), 461 'icon' => 'eicon-text-align-right', 462 ], 463 ], 464 'selectors' => [ 465 '{{WRAPPER}} .elementor-divider' => 'text-align: {{VALUE}}', 466 '{{WRAPPER}} .elementor-divider-separator' => 'margin: 0 auto; margin-{{VALUE}}: 0', 467 ], 468 ] 469 ); 470 471 $this->add_control( 472 'look', 473 [ 474 'label' => esc_html__( 'Add Element', 'elementor' ), 475 'type' => Controls_Manager::CHOOSE, 476 'default' => 'line', 477 'options' => [ 478 'line' => [ 479 'title' => esc_html__( 'None', 'elementor' ), 480 'icon' => 'eicon-ban', 481 ], 482 'line_text' => [ 483 'title' => esc_html__( 'Text', 'elementor' ), 484 'icon' => 'eicon-t-letter-bold', 485 ], 486 'line_icon' => [ 487 'title' => esc_html__( 'Icon', 'elementor' ), 488 'icon' => 'eicon-star', 489 ], 490 ], 491 'separator' => 'before', 492 'prefix_class' => 'elementor-widget-divider--view-', 493 'toggle' => false, 494 'render_type' => 'template', 495 ] 496 ); 497 498 $this->add_control( 499 'view', 500 [ 501 'label' => esc_html__( 'View', 'elementor' ), 502 'type' => Controls_Manager::HIDDEN, 503 'default' => 'traditional', 504 ] 505 ); 506 507 $this->add_control( 508 'text', 509 [ 510 'label' => esc_html__( 'Text', 'elementor' ), 511 'type' => Controls_Manager::TEXT, 512 'condition' => [ 513 'look' => 'line_text', 514 ], 515 'default' => esc_html__( 'Divider', 'elementor' ), 516 'dynamic' => [ 517 'active' => true, 518 ], 519 ] 520 ); 521 522 $this->add_control( 523 'html_tag', 524 [ 525 'label' => esc_html__( 'HTML Tag', 'elementor' ), 526 'type' => Controls_Manager::SELECT, 527 'condition' => [ 528 'look' => 'line_text', 529 ], 530 'options' => [ 531 'h1' => 'H1', 532 'h2' => 'H2', 533 'h3' => 'H3', 534 'h4' => 'H4', 535 'h5' => 'H5', 536 'h6' => 'H6', 537 'div' => 'div', 538 'span' => 'span', 539 'p' => 'p', 540 ], 541 'default' => 'span', 542 ] 543 ); 544 545 $this->add_control( 546 'icon', 547 [ 548 'label' => esc_html__( 'Icon', 'elementor' ), 549 'type' => Controls_Manager::ICONS, 550 'default' => [ 551 'value' => 'fas fa-star', 552 'library' => 'fa-solid', 553 ], 554 'condition' => [ 555 'look' => 'line_icon', 556 ], 557 ] 558 ); 559 560 $this->end_controls_section(); 561 562 $this->start_controls_section( 563 'section_divider_style', 564 [ 565 'label' => esc_html__( 'Divider', 'elementor' ), 566 'tab' => Controls_Manager::TAB_STYLE, 567 'condition' => [ 568 'style!' => 'none', 569 ], 570 ] 571 ); 572 573 $this->add_control( 574 'color', 575 [ 576 'label' => esc_html__( 'Color', 'elementor' ), 577 'type' => Controls_Manager::COLOR, 578 'global' => [ 579 'default' => Global_Colors::COLOR_SECONDARY, 580 ], 581 'default' => '#000', 582 'render_type' => 'template', 583 'selectors' => [ 584 '{{WRAPPER}}' => '--divider-color: {{VALUE}}', 585 ], 586 ] 587 ); 588 589 $this->add_control( 590 'weight', 591 [ 592 'label' => esc_html__( 'Weight', 'elementor' ), 593 'type' => Controls_Manager::SLIDER, 594 'default' => [ 595 'size' => 1, 596 ], 597 'range' => [ 598 'px' => [ 599 'min' => 1, 600 'max' => 10, 601 'step' => 0.1, 602 ], 603 ], 604 'render_type' => 'template', 605 'condition' => [ 606 'style' => array_keys( $this->get_options_by_groups( $styles, 'line' )['options'] ), 607 ], 608 'selectors' => [ 609 '{{WRAPPER}}' => '--divider-border-width: {{SIZE}}{{UNIT}}', 610 ], 611 ] 612 ); 613 614 $this->add_control( 615 'pattern_height', 616 [ 617 'label' => esc_html__( 'Size', 'elementor' ), 618 'type' => Controls_Manager::SLIDER, 619 'selectors' => [ 620 '{{WRAPPER}}' => '--divider-pattern-height: {{SIZE}}{{UNIT}}', 621 ], 622 'default' => [ 623 'size' => 20, 624 ], 625 'range' => [ 626 'px' => [ 627 'step' => 0.1, 628 ], 629 ], 630 'condition' => [ 631 'style!' => [ 632 '', 633 'solid', 634 'double', 635 'dotted', 636 'dashed', 637 ], 638 ], 639 ] 640 ); 641 642 $this->add_control( 643 'pattern_size', 644 [ 645 'label' => esc_html__( 'Amount', 'elementor' ), 646 'type' => Controls_Manager::SLIDER, 647 'size_units' => [ '%', 'px' ], 648 'selectors' => [ 649 '{{WRAPPER}}' => '--divider-pattern-size: {{SIZE}}{{UNIT}}', 650 ], 651 'default' => [ 652 'size' => 20, 653 ], 654 'range' => [ 655 'px' => [ 656 'step' => 0.1, 657 ], 658 '%' => [ 659 'step' => 0.01, 660 ], 661 ], 662 'condition' => [ 663 'style!' => array_merge( array_keys( $this->filter_styles_by( $styles, 'supports_amount', false ) ), [ 664 '', 665 'solid', 666 'double', 667 'dotted', 668 'dashed', 669 ] ), 670 ], 671 ] 672 ); 673 674 $this->add_responsive_control( 675 'gap', 676 [ 677 'label' => esc_html__( 'Gap', 'elementor' ), 678 'type' => Controls_Manager::SLIDER, 679 'default' => [ 680 'size' => 15, 681 ], 682 'range' => [ 683 'px' => [ 684 'min' => 2, 685 'max' => 50, 686 ], 687 ], 688 'selectors' => [ 689 '{{WRAPPER}} .elementor-divider' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};', 690 ], 691 'separator' => 'before', 692 ] 693 ); 694 695 $this->end_controls_section(); 696 697 $this->start_controls_section( 698 'section_text_style', 699 [ 700 'label' => esc_html__( 'Text', 'elementor' ), 701 'tab' => Controls_Manager::TAB_STYLE, 702 'condition' => [ 703 'look' => 'line_text', 704 ], 705 ] 706 ); 707 708 $this->add_control( 709 'text_color', 710 [ 711 'label' => esc_html__( 'Color', 'elementor' ), 712 'type' => Controls_Manager::COLOR, 713 'global' => [ 714 'default' => Global_Colors::COLOR_SECONDARY, 715 ], 716 'selectors' => [ 717 '{{WRAPPER}} .elementor-divider__text' => 'color: {{VALUE}}', 718 ], 719 ] 720 ); 721 722 $this->add_group_control( 723 Group_Control_Typography::get_type(), 724 [ 725 'name' => 'typography', 726 'global' => [ 727 'default' => Global_Typography::TYPOGRAPHY_SECONDARY, 728 ], 729 'selector' => '{{WRAPPER}} .elementor-divider__text', 730 ] 731 ); 732 733 $this->add_control( 734 'text_align', 735 [ 736 'label' => esc_html__( 'Position', 'elementor' ), 737 'type' => Controls_Manager::CHOOSE, 738 'options' => [ 739 'left' => [ 740 'title' => esc_html__( 'Left', 'elementor' ), 741 'icon' => 'eicon-h-align-left', 742 ], 743 'center' => [ 744 'title' => esc_html__( 'Center', 'elementor' ), 745 'icon' => 'eicon-h-align-center', 746 ], 747 'right' => [ 748 'title' => esc_html__( 'Right', 'elementor' ), 749 'icon' => 'eicon-h-align-right', 750 ], 751 ], 752 'default' => 'center', 753 'prefix_class' => 'elementor-widget-divider--element-align-', 754 ] 755 ); 756 757 $this->add_responsive_control( 758 'text_spacing', 759 [ 760 'label' => esc_html__( 'Spacing', 'elementor' ), 761 'type' => Controls_Manager::SLIDER, 762 'range' => [ 763 'px' => [ 764 'min' => 0, 765 'max' => 50, 766 ], 767 ], 768 'selectors' => [ 769 '{{WRAPPER}}' => '--divider-element-spacing: {{SIZE}}{{UNIT}};', 770 ], 771 ] 772 ); 773 774 $this->end_controls_section(); 775 776 $this->start_controls_section( 777 'section_icon_style', 778 [ 779 'label' => esc_html__( 'Icon', 'elementor' ), 780 'tab' => Controls_Manager::TAB_STYLE, 781 'condition' => [ 782 'look' => 'line_icon', 783 ], 784 ] 785 ); 786 787 $this->add_control( 788 'icon_view', 789 [ 790 'label' => esc_html__( 'View', 'elementor' ), 791 'type' => Controls_Manager::SELECT, 792 'options' => [ 793 'default' => esc_html__( 'Default', 'elementor' ), 794 'stacked' => esc_html__( 'Stacked', 'elementor' ), 795 'framed' => esc_html__( 'Framed', 'elementor' ), 796 ], 797 'default' => 'default', 798 'prefix_class' => 'elementor-view-', 799 ] 800 ); 801 802 $this->add_responsive_control( 803 'icon_size', 804 [ 805 'label' => esc_html__( 'Size', 'elementor' ), 806 'type' => Controls_Manager::SLIDER, 807 'range' => [ 808 'px' => [ 809 'min' => 6, 810 'max' => 300, 811 ], 812 ], 813 'selectors' => [ 814 '{{WRAPPER}}' => '--divider-icon-size: {{SIZE}}{{UNIT}};', 815 ], 816 ] 817 ); 818 819 $this->add_control( 820 'icon_padding', 821 [ 822 'label' => esc_html__( 'Padding', 'elementor' ), 823 'type' => Controls_Manager::SLIDER, 824 'selectors' => [ 825 '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};', 826 ], 827 'range' => [ 828 'em' => [ 829 'min' => 0, 830 'max' => 5, 831 ], 832 ], 833 'condition' => [ 834 'icon_view!' => 'default', 835 ], 836 ] 837 ); 838 839 $this->add_control( 840 'primary_color', 841 [ 842 'label' => esc_html__( 'Primary Color', 'elementor' ), 843 'type' => Controls_Manager::COLOR, 844 'default' => '', 845 'selectors' => [ 846 '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};', 847 '{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'color: {{VALUE}}; border-color: {{VALUE}};', 848 '{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon svg' => 'fill: {{VALUE}};', 849 ], 850 'global' => [ 851 'default' => Global_Colors::COLOR_SECONDARY, 852 ], 853 ] 854 ); 855 856 $this->add_control( 857 'secondary_color', 858 [ 859 'label' => esc_html__( 'Secondary Color', 'elementor' ), 860 'type' => Controls_Manager::COLOR, 861 'default' => '', 862 'condition' => [ 863 'icon_view!' => 'default', 864 ], 865 'selectors' => [ 866 '{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};', 867 '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'color: {{VALUE}};', 868 '{{WRAPPER}}.elementor-view-stacked .elementor-icon svg' => 'fill: {{VALUE}};', 869 ], 870 ] 871 ); 872 873 $this->add_control( 874 'icon_align', 875 [ 876 'label' => esc_html__( 'Position', 'elementor' ), 877 'type' => Controls_Manager::CHOOSE, 878 'options' => [ 879 'left' => [ 880 'title' => esc_html__( 'Left', 'elementor' ), 881 'icon' => 'eicon-h-align-left', 882 ], 883 'center' => [ 884 'title' => esc_html__( 'Center', 'elementor' ), 885 'icon' => 'eicon-h-align-center', 886 ], 887 'right' => [ 888 'title' => esc_html__( 'Right', 'elementor' ), 889 'icon' => 'eicon-h-align-right', 890 ], 891 ], 892 'default' => 'center', 893 'prefix_class' => 'elementor-widget-divider--element-align-', 894 ] 895 ); 896 897 $this->add_responsive_control( 898 'icon_spacing', 899 [ 900 'label' => esc_html__( 'Spacing', 'elementor' ), 901 'type' => Controls_Manager::SLIDER, 902 'range' => [ 903 'px' => [ 904 'min' => 0, 905 'max' => 50, 906 ], 907 ], 908 'selectors' => [ 909 '{{WRAPPER}}' => '--divider-element-spacing: {{SIZE}}{{UNIT}}', 910 ], 911 ] 912 ); 913 914 $this->add_responsive_control( 915 'rotate', 916 [ 917 'label' => esc_html__( 'Rotate', 'elementor' ), 918 'type' => Controls_Manager::SLIDER, 919 'size_units' => [ 'deg' ], 920 'default' => [ 921 'size' => 0, 922 'unit' => 'deg', 923 ], 924 'tablet_default' => [ 925 'unit' => 'deg', 926 ], 927 'mobile_default' => [ 928 'unit' => 'deg', 929 ], 930 'selectors' => [ 931 '{{WRAPPER}} .elementor-icon i, {{WRAPPER}} .elementor-icon svg' => 'transform: rotate({{SIZE}}{{UNIT}})', 932 ], 933 ] 934 ); 935 936 $this->add_control( 937 'icon_border_width', 938 [ 939 'label' => esc_html__( 'Border Width', 'elementor' ), 940 'type' => Controls_Manager::SLIDER, 941 'selectors' => [ 942 '{{WRAPPER}} .elementor-icon' => 'border-width: {{SIZE}}{{UNIT}}', 943 ], 944 'condition' => [ 945 'icon_view' => 'framed', 946 ], 947 ] 948 ); 949 950 $this->add_control( 951 'border_radius', 952 [ 953 'label' => esc_html__( 'Border Radius', 'elementor' ), 954 'type' => Controls_Manager::SLIDER, 955 'size_units' => [ 'px', '%' ], 956 'selectors' => [ 957 '{{WRAPPER}} .elementor-icon' => 'border-radius: {{SIZE}}{{UNIT}}', 958 ], 959 'condition' => [ 960 'icon_view!' => 'default', 961 ], 962 ] 963 ); 964 965 $this->end_controls_section(); 966 } 967 968 /** 969 * Build SVG 970 * 971 * Build SVG element markup based on the widgets settings. 972 * 973 * @return string - An SVG element. 974 * 975 * @since 2.7.0 976 * @access private 977 */ 978 private function build_svg() { 979 $settings = $this->get_settings_for_display(); 980 981 if ( 'pattern' !== $settings['separator_type'] || empty( $settings['style'] ) ) { 982 return ''; 983 } 984 985 $svg_shapes = $this->get_separator_styles(); 986 987 $selected_pattern = $svg_shapes[ $settings['style'] ]; 988 $preserve_aspect_ratio = $selected_pattern['preserve_aspect_ratio'] ? 'xMidYMid meet' : 'none'; 989 $view_box = isset( $selected_pattern['view_box'] ) ? $selected_pattern['view_box'] : '0 0 24 24'; 990 991 $attr = [ 992 'preserveAspectRatio' => $preserve_aspect_ratio, 993 'overflow' => 'visible', 994 'height' => '100%', 995 'viewBox' => $view_box, 996 ]; 997 998 if ( 'line' !== $selected_pattern['group'] ) { 999 $attr['fill'] = 'black'; 1000 $attr['stroke'] = 'none'; 1001 } else { 1002 $attr['fill'] = 'none'; 1003 $attr['stroke'] = 'black'; 1004 $attr['stroke-width'] = $settings['weight']['size']; 1005 $attr['stroke-linecap'] = 'square'; 1006 $attr['stroke-miterlimit'] = '10'; 1007 } 1008 1009 $this->add_render_attribute( 'svg', $attr ); 1010 1011 $pattern_attribute_string = $this->get_render_attribute_string( 'svg' ); 1012 $shape = $selected_pattern['shape']; 1013 1014 return '<svg xmlns="http://www.w3.org/2000/svg" ' . $pattern_attribute_string . '>' . $shape . '</svg>'; 1015 } 1016 1017 public function svg_to_data_uri( $svg ) { 1018 return str_replace( 1019 [ '<', '>', '"', '#' ], 1020 [ '%3C', '%3E', "'", '%23' ], 1021 $svg 1022 ); 1023 } 1024 1025 /** 1026 * Render divider widget output on the frontend. 1027 * 1028 * Written in PHP and used to generate the final HTML. 1029 * 1030 * @since 1.0.0 1031 * @access protected 1032 */ 1033 protected function render() { 1034 $settings = $this->get_settings_for_display(); 1035 $svg_code = $this->build_svg(); 1036 $has_icon = 'line_icon' === ( $settings['look'] ) && ! empty( $settings['icon'] ); 1037 $has_text = 'line_text' === ( $settings['look'] ) && ! empty( $settings['text'] ); 1038 1039 $this->add_render_attribute( 'wrapper', 'class', 'elementor-divider' ); 1040 1041 if ( ! empty( $svg_code ) ) { 1042 $this->add_render_attribute( 'wrapper', 'style', '--divider-pattern-url: url("data:image/svg+xml,' . $this->svg_to_data_uri( $svg_code ) . '");' ); 1043 } 1044 1045 ?> 1046 <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>> 1047 <span class="elementor-divider-separator"> 1048 <?php if ( $has_icon ) : ?> 1049 <div class="elementor-icon elementor-divider__element"> 1050 <?php 1051 Icons_Manager::render_icon( $settings['icon'], [ 1052 'aria-hidden' => 'true', 1053 ] ); 1054 ?></div> 1055 <?php elseif ( $has_text ) : 1056 $this->add_inline_editing_attributes( 'text' ); 1057 $this->add_render_attribute( 'text', [ 'class' => [ 'elementor-divider__text', 'elementor-divider__element' ] ] ); 1058 ?> 1059 <<?php Utils::print_validated_html_tag( $settings['html_tag'] ); ?> <?php $this->print_render_attribute_string( 'text' ); ?>> 1060 <?php 1061 // PHPCS - the main text of a widget should not be escaped. 1062 echo $settings['text']; // phpcs:ignore WordPress.Security.EscapeOutput ?> 1063 </<?php Utils::print_validated_html_tag( $settings['html_tag'] ); ?>> 1064 <?php endif; ?> 1065 </span> 1066 </div> 1067 <?php 1068 } 1069 }