common.php 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor common widget.
  8. *
  9. * Elementor base widget that gives you all the advanced options of the basic
  10. * widget.
  11. *
  12. * @since 1.0.0
  13. */
  14. class Widget_Common extends Widget_Base {
  15. /**
  16. * Get widget name.
  17. *
  18. * Retrieve common 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 'common';
  27. }
  28. /**
  29. * Show in panel.
  30. *
  31. * Whether to show the common widget in the panel or not.
  32. *
  33. * @since 1.0.0
  34. * @access public
  35. *
  36. * @return bool Whether to show the widget in the panel.
  37. */
  38. public function show_in_panel() {
  39. return false;
  40. }
  41. /**
  42. * Register common widget controls.
  43. *
  44. * Adds different input fields to allow the user to change and customize the widget settings.
  45. *
  46. * @since 1.0.0
  47. * @access protected
  48. */
  49. protected function _register_controls() {
  50. $this->start_controls_section(
  51. '_section_style',
  52. [
  53. 'label' => __( 'Advanced', 'elementor' ),
  54. 'tab' => Controls_Manager::TAB_ADVANCED,
  55. ]
  56. );
  57. $this->add_control(
  58. '_title',
  59. [
  60. 'label' => __( 'Title', 'elementor' ),
  61. 'type' => Controls_Manager::HIDDEN,
  62. 'render_type' => 'none',
  63. ]
  64. );
  65. $this->add_responsive_control(
  66. '_margin',
  67. [
  68. 'label' => __( 'Margin', 'elementor' ),
  69. 'type' => Controls_Manager::DIMENSIONS,
  70. 'size_units' => [ 'px', '%' ],
  71. 'selectors' => [
  72. '{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  73. ],
  74. ]
  75. );
  76. $this->add_responsive_control(
  77. '_padding',
  78. [
  79. 'label' => __( 'Padding', 'elementor' ),
  80. 'type' => Controls_Manager::DIMENSIONS,
  81. 'size_units' => [ 'px', 'em', '%' ],
  82. 'selectors' => [
  83. '{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  84. ],
  85. ]
  86. );
  87. $this->add_control(
  88. '_z_index',
  89. [
  90. 'label' => __( 'Z-Index', 'elementor' ),
  91. 'type' => Controls_Manager::NUMBER,
  92. 'min' => 0,
  93. 'selectors' => [
  94. '{{WRAPPER}}' => 'z-index: {{VALUE}};',
  95. ],
  96. 'label_block' => false,
  97. ]
  98. );
  99. $this->add_control(
  100. '_animation',
  101. [
  102. 'label' => __( 'Entrance Animation', 'elementor' ),
  103. 'type' => Controls_Manager::ANIMATION,
  104. 'default' => '',
  105. 'prefix_class' => 'animated ',
  106. 'label_block' => false,
  107. 'frontend_available' => true,
  108. ]
  109. );
  110. $this->add_control(
  111. 'animation_duration',
  112. [
  113. 'label' => __( 'Animation Duration', 'elementor' ),
  114. 'type' => Controls_Manager::SELECT,
  115. 'default' => '',
  116. 'options' => [
  117. 'slow' => __( 'Slow', 'elementor' ),
  118. '' => __( 'Normal', 'elementor' ),
  119. 'fast' => __( 'Fast', 'elementor' ),
  120. ],
  121. 'prefix_class' => 'animated-',
  122. 'condition' => [
  123. '_animation!' => '',
  124. ],
  125. ]
  126. );
  127. $this->add_control(
  128. '_animation_delay',
  129. [
  130. 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
  131. 'type' => Controls_Manager::NUMBER,
  132. 'default' => '',
  133. 'min' => 0,
  134. 'step' => 100,
  135. 'condition' => [
  136. '_animation!' => '',
  137. ],
  138. 'render_type' => 'none',
  139. 'frontend_available' => true,
  140. ]
  141. );
  142. $this->add_control(
  143. '_element_id',
  144. [
  145. 'label' => __( 'CSS ID', 'elementor' ),
  146. 'type' => Controls_Manager::TEXT,
  147. 'default' => '',
  148. 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
  149. 'label_block' => false,
  150. 'style_transfer' => false,
  151. ]
  152. );
  153. $this->add_control(
  154. '_css_classes',
  155. [
  156. 'label' => __( 'CSS Classes', 'elementor' ),
  157. 'type' => Controls_Manager::TEXT,
  158. 'default' => '',
  159. 'prefix_class' => '',
  160. 'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
  161. 'label_block' => false,
  162. ]
  163. );
  164. $this->end_controls_section();
  165. $this->start_controls_section(
  166. '_section_background',
  167. [
  168. 'label' => __( 'Background', 'elementor' ),
  169. 'tab' => Controls_Manager::TAB_ADVANCED,
  170. ]
  171. );
  172. $this->start_controls_tabs( '_tabs_background' );
  173. $this->start_controls_tab(
  174. '_tab_background_normal',
  175. [
  176. 'label' => __( 'Normal', 'elementor' ),
  177. ]
  178. );
  179. $this->add_group_control(
  180. Group_Control_Background::get_type(),
  181. [
  182. 'name' => '_background',
  183. 'selector' => '{{WRAPPER}} > .elementor-widget-container',
  184. ]
  185. );
  186. $this->end_controls_tab();
  187. $this->start_controls_tab(
  188. '_tab_background_hover',
  189. [
  190. 'label' => __( 'Hover', 'elementor' ),
  191. ]
  192. );
  193. $this->add_group_control(
  194. Group_Control_Background::get_type(),
  195. [
  196. 'name' => '_background_hover',
  197. 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
  198. ]
  199. );
  200. $this->add_control(
  201. '_background_hover_transition',
  202. [
  203. 'label' => __( 'Transition Duration', 'elementor' ),
  204. 'type' => Controls_Manager::SLIDER,
  205. 'range' => [
  206. 'px' => [
  207. 'max' => 3,
  208. 'step' => 0.1,
  209. ],
  210. ],
  211. 'render_type' => 'ui',
  212. 'separator' => 'before',
  213. ]
  214. );
  215. $this->end_controls_tab();
  216. $this->end_controls_tabs();
  217. $this->end_controls_section();
  218. $this->start_controls_section(
  219. '_section_border',
  220. [
  221. 'label' => __( 'Border', 'elementor' ),
  222. 'tab' => Controls_Manager::TAB_ADVANCED,
  223. ]
  224. );
  225. $this->start_controls_tabs( '_tabs_border' );
  226. $this->start_controls_tab(
  227. '_tab_border_normal',
  228. [
  229. 'label' => __( 'Normal', 'elementor' ),
  230. ]
  231. );
  232. $this->add_group_control(
  233. Group_Control_Border::get_type(),
  234. [
  235. 'name' => '_border',
  236. 'selector' => '{{WRAPPER}} > .elementor-widget-container',
  237. ]
  238. );
  239. $this->add_control(
  240. '_border_radius',
  241. [
  242. 'label' => __( 'Border Radius', 'elementor' ),
  243. 'type' => Controls_Manager::DIMENSIONS,
  244. 'size_units' => [ 'px', '%' ],
  245. 'selectors' => [
  246. '{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  247. ],
  248. ]
  249. );
  250. $this->add_group_control(
  251. Group_Control_Box_Shadow::get_type(),
  252. [
  253. 'name' => '_box_shadow',
  254. 'selector' => '{{WRAPPER}} > .elementor-widget-container',
  255. ]
  256. );
  257. $this->end_controls_tab();
  258. $this->start_controls_tab(
  259. '_tab_border_hover',
  260. [
  261. 'label' => __( 'Hover', 'elementor' ),
  262. ]
  263. );
  264. $this->add_group_control(
  265. Group_Control_Border::get_type(),
  266. [
  267. 'name' => '_border_hover',
  268. 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
  269. ]
  270. );
  271. $this->add_control(
  272. '_border_radius_hover',
  273. [
  274. 'label' => __( 'Border Radius', 'elementor' ),
  275. 'type' => Controls_Manager::DIMENSIONS,
  276. 'size_units' => [ 'px', '%' ],
  277. 'selectors' => [
  278. '{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  279. ],
  280. ]
  281. );
  282. $this->add_group_control(
  283. Group_Control_Box_Shadow::get_type(),
  284. [
  285. 'name' => '_box_shadow_hover',
  286. 'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
  287. ]
  288. );
  289. $this->add_control(
  290. '_border_hover_transition',
  291. [
  292. 'label' => __( 'Transition Duration', 'elementor' ),
  293. 'type' => Controls_Manager::SLIDER,
  294. 'separator' => 'before',
  295. 'range' => [
  296. 'px' => [
  297. 'max' => 3,
  298. 'step' => 0.1,
  299. ],
  300. ],
  301. 'selectors' => [
  302. '{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
  303. ],
  304. ]
  305. );
  306. $this->end_controls_tab();
  307. $this->end_controls_tabs();
  308. $this->end_controls_section();
  309. $this->start_controls_section(
  310. '_section_responsive',
  311. [
  312. 'label' => __( 'Responsive', 'elementor' ),
  313. 'tab' => Controls_Manager::TAB_ADVANCED,
  314. ]
  315. );
  316. $this->add_control(
  317. 'responsive_description',
  318. [
  319. 'raw' => __( 'Attention: The display settings (show/hide for mobile, tablet or desktop) will only take effect once you are on the preview or live page, and not while you\'re in editing mode in Elementor.', 'elementor' ),
  320. 'type' => Controls_Manager::RAW_HTML,
  321. 'content_classes' => 'elementor-descriptor',
  322. ]
  323. );
  324. $this->add_control(
  325. 'hide_desktop',
  326. [
  327. 'label' => __( 'Hide On Desktop', 'elementor' ),
  328. 'type' => Controls_Manager::SWITCHER,
  329. 'default' => '',
  330. 'prefix_class' => 'elementor-',
  331. 'label_on' => 'Hide',
  332. 'label_off' => 'Show',
  333. 'return_value' => 'hidden-desktop',
  334. ]
  335. );
  336. $this->add_control(
  337. 'hide_tablet',
  338. [
  339. 'label' => __( 'Hide On Tablet', 'elementor' ),
  340. 'type' => Controls_Manager::SWITCHER,
  341. 'default' => '',
  342. 'prefix_class' => 'elementor-',
  343. 'label_on' => 'Hide',
  344. 'label_off' => 'Show',
  345. 'return_value' => 'hidden-tablet',
  346. ]
  347. );
  348. $this->add_control(
  349. 'hide_mobile',
  350. [
  351. 'label' => __( 'Hide On Mobile', 'elementor' ),
  352. 'type' => Controls_Manager::SWITCHER,
  353. 'default' => '',
  354. 'prefix_class' => 'elementor-',
  355. 'label_on' => 'Hide',
  356. 'label_off' => 'Show',
  357. 'return_value' => 'hidden-phone',
  358. ]
  359. );
  360. $this->end_controls_section();
  361. Plugin::$instance->controls_manager->add_custom_css_controls( $this );
  362. }
  363. }