divider.php 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor divider widget.
  8. *
  9. * Elementor widget that displays a line that divides different elements in the
  10. * page.
  11. *
  12. * @since 1.0.0
  13. */
  14. class Widget_Divider extends Widget_Base {
  15. /**
  16. * Get widget name.
  17. *
  18. * Retrieve divider widget name.
  19. *
  20. * @since 1.0.0
  21. * @access public
  22. *
  23. * @return string Widget name.
  24. */
  25. public function get_name() {
  26. return 'divider';
  27. }
  28. /**
  29. * Get widget title.
  30. *
  31. * Retrieve divider widget title.
  32. *
  33. * @since 1.0.0
  34. * @access public
  35. *
  36. * @return string Widget title.
  37. */
  38. public function get_title() {
  39. return __( 'Divider', 'elementor' );
  40. }
  41. /**
  42. * Get widget icon.
  43. *
  44. * Retrieve divider widget icon.
  45. *
  46. * @since 1.0.0
  47. * @access public
  48. *
  49. * @return string Widget icon.
  50. */
  51. public function get_icon() {
  52. return 'eicon-divider';
  53. }
  54. /**
  55. * Get widget categories.
  56. *
  57. * Retrieve the list of categories the divider widget belongs to.
  58. *
  59. * Used to determine where to display the widget in the editor.
  60. *
  61. * @since 2.0.0
  62. * @access public
  63. *
  64. * @return array Widget categories.
  65. */
  66. public function get_categories() {
  67. return [ 'basic' ];
  68. }
  69. /**
  70. * Get widget keywords.
  71. *
  72. * Retrieve the list of keywords the widget belongs to.
  73. *
  74. * @since 2.1.0
  75. * @access public
  76. *
  77. * @return array Widget keywords.
  78. */
  79. public function get_keywords() {
  80. return [ 'divider', 'hr', 'line', 'border' ];
  81. }
  82. /**
  83. * Register divider widget controls.
  84. *
  85. * Adds different input fields to allow the user to change and customize the widget settings.
  86. *
  87. * @since 1.0.0
  88. * @access protected
  89. */
  90. protected function _register_controls() {
  91. $this->start_controls_section(
  92. 'section_divider',
  93. [
  94. 'label' => __( 'Divider', 'elementor' ),
  95. ]
  96. );
  97. $this->add_control(
  98. 'style',
  99. [
  100. 'label' => __( 'Style', 'elementor' ),
  101. 'type' => Controls_Manager::SELECT,
  102. 'options' => [
  103. 'solid' => __( 'Solid', 'elementor' ),
  104. 'double' => __( 'Double', 'elementor' ),
  105. 'dotted' => __( 'Dotted', 'elementor' ),
  106. 'dashed' => __( 'Dashed', 'elementor' ),
  107. ],
  108. 'default' => 'solid',
  109. 'selectors' => [
  110. '{{WRAPPER}} .elementor-divider-separator' => 'border-top-style: {{VALUE}};',
  111. ],
  112. ]
  113. );
  114. $this->add_control(
  115. 'weight',
  116. [
  117. 'label' => __( 'Weight', 'elementor' ),
  118. 'type' => Controls_Manager::SLIDER,
  119. 'default' => [
  120. 'size' => 1,
  121. ],
  122. 'range' => [
  123. 'px' => [
  124. 'min' => 1,
  125. 'max' => 10,
  126. ],
  127. ],
  128. 'selectors' => [
  129. '{{WRAPPER}} .elementor-divider-separator' => 'border-top-width: {{SIZE}}{{UNIT}};',
  130. ],
  131. ]
  132. );
  133. $this->add_control(
  134. 'color',
  135. [
  136. 'label' => __( 'Color', 'elementor' ),
  137. 'type' => Controls_Manager::COLOR,
  138. 'default' => '',
  139. 'scheme' => [
  140. 'type' => Scheme_Color::get_type(),
  141. 'value' => Scheme_Color::COLOR_3,
  142. ],
  143. 'selectors' => [
  144. '{{WRAPPER}} .elementor-divider-separator' => 'border-top-color: {{VALUE}};',
  145. ],
  146. ]
  147. );
  148. $this->add_responsive_control(
  149. 'width',
  150. [
  151. 'label' => __( 'Width', 'elementor' ),
  152. 'type' => Controls_Manager::SLIDER,
  153. 'size_units' => [ '%', 'px' ],
  154. 'range' => [
  155. 'px' => [
  156. 'max' => 1000,
  157. ],
  158. ],
  159. 'default' => [
  160. 'size' => 100,
  161. 'unit' => '%',
  162. ],
  163. 'tablet_default' => [
  164. 'unit' => '%',
  165. ],
  166. 'mobile_default' => [
  167. 'unit' => '%',
  168. ],
  169. 'selectors' => [
  170. '{{WRAPPER}} .elementor-divider-separator' => 'width: {{SIZE}}{{UNIT}};',
  171. ],
  172. ]
  173. );
  174. $this->add_responsive_control(
  175. 'align',
  176. [
  177. 'label' => __( 'Alignment', 'elementor' ),
  178. 'type' => Controls_Manager::CHOOSE,
  179. 'options' => [
  180. 'left' => [
  181. 'title' => __( 'Left', 'elementor' ),
  182. 'icon' => 'fa fa-align-left',
  183. ],
  184. 'center' => [
  185. 'title' => __( 'Center', 'elementor' ),
  186. 'icon' => 'fa fa-align-center',
  187. ],
  188. 'right' => [
  189. 'title' => __( 'Right', 'elementor' ),
  190. 'icon' => 'fa fa-align-right',
  191. ],
  192. ],
  193. 'default' => '',
  194. 'selectors' => [
  195. '{{WRAPPER}} .elementor-divider' => 'text-align: {{VALUE}};',
  196. ],
  197. ]
  198. );
  199. $this->add_responsive_control(
  200. 'gap',
  201. [
  202. 'label' => __( 'Gap', 'elementor' ),
  203. 'type' => Controls_Manager::SLIDER,
  204. 'default' => [
  205. 'size' => 15,
  206. ],
  207. 'range' => [
  208. 'px' => [
  209. 'min' => 2,
  210. 'max' => 50,
  211. ],
  212. ],
  213. 'selectors' => [
  214. '{{WRAPPER}} .elementor-divider' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};',
  215. ],
  216. ]
  217. );
  218. $this->add_control(
  219. 'view',
  220. [
  221. 'label' => __( 'View', 'elementor' ),
  222. 'type' => Controls_Manager::HIDDEN,
  223. 'default' => 'traditional',
  224. ]
  225. );
  226. $this->end_controls_section();
  227. }
  228. /**
  229. * Render divider widget output on the frontend.
  230. *
  231. * Written in PHP and used to generate the final HTML.
  232. *
  233. * @since 1.0.0
  234. * @access protected
  235. */
  236. protected function render() {
  237. ?>
  238. <div class="elementor-divider">
  239. <span class="elementor-divider-separator"></span>
  240. </div>
  241. <?php
  242. }
  243. /**
  244. * Render divider widget output in the editor.
  245. *
  246. * Written as a Backbone JavaScript template and used to generate the live preview.
  247. *
  248. * @since 1.0.0
  249. * @access protected
  250. */
  251. protected function _content_template() {
  252. ?>
  253. <div class="elementor-divider">
  254. <span class="elementor-divider-separator"></span>
  255. </div>
  256. <?php
  257. }
  258. }