icon.php 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor icon widget.
  8. *
  9. * Elementor widget that displays an icon from over 600+ icons.
  10. *
  11. * @since 1.0.0
  12. */
  13. class Widget_Icon extends Widget_Base {
  14. /**
  15. * Get widget name.
  16. *
  17. * Retrieve icon widget name.
  18. *
  19. * @since 1.0.0
  20. * @access public
  21. *
  22. * @return string Widget name.
  23. */
  24. public function get_name() {
  25. return 'icon';
  26. }
  27. /**
  28. * Get widget title.
  29. *
  30. * Retrieve icon widget title.
  31. *
  32. * @since 1.0.0
  33. * @access public
  34. *
  35. * @return string Widget title.
  36. */
  37. public function get_title() {
  38. return __( 'Icon', 'elementor' );
  39. }
  40. /**
  41. * Get widget icon.
  42. *
  43. * Retrieve icon widget icon.
  44. *
  45. * @since 1.0.0
  46. * @access public
  47. *
  48. * @return string Widget icon.
  49. */
  50. public function get_icon() {
  51. return 'eicon-favorite';
  52. }
  53. /**
  54. * Get widget categories.
  55. *
  56. * Retrieve the list of categories the icon widget belongs to.
  57. *
  58. * Used to determine where to display the widget in the editor.
  59. *
  60. * @since 2.0.0
  61. * @access public
  62. *
  63. * @return array Widget categories.
  64. */
  65. public function get_categories() {
  66. return [ 'basic' ];
  67. }
  68. /**
  69. * Get widget keywords.
  70. *
  71. * Retrieve the list of keywords the widget belongs to.
  72. *
  73. * @since 2.1.0
  74. * @access public
  75. *
  76. * @return array Widget keywords.
  77. */
  78. public function get_keywords() {
  79. return [ 'icon' ];
  80. }
  81. /**
  82. * Register icon widget controls.
  83. *
  84. * Adds different input fields to allow the user to change and customize the widget settings.
  85. *
  86. * @since 1.0.0
  87. * @access protected
  88. */
  89. protected function _register_controls() {
  90. $this->start_controls_section(
  91. 'section_icon',
  92. [
  93. 'label' => __( 'Icon', 'elementor' ),
  94. ]
  95. );
  96. $this->add_control(
  97. 'icon',
  98. [
  99. 'label' => __( 'Icon', 'elementor' ),
  100. 'type' => Controls_Manager::ICON,
  101. 'default' => 'fa fa-star',
  102. ]
  103. );
  104. $this->add_control(
  105. 'view',
  106. [
  107. 'label' => __( 'View', 'elementor' ),
  108. 'type' => Controls_Manager::SELECT,
  109. 'options' => [
  110. 'default' => __( 'Default', 'elementor' ),
  111. 'stacked' => __( 'Stacked', 'elementor' ),
  112. 'framed' => __( 'Framed', 'elementor' ),
  113. ],
  114. 'default' => 'default',
  115. 'prefix_class' => 'elementor-view-',
  116. ]
  117. );
  118. $this->add_control(
  119. 'shape',
  120. [
  121. 'label' => __( 'Shape', 'elementor' ),
  122. 'type' => Controls_Manager::SELECT,
  123. 'options' => [
  124. 'circle' => __( 'Circle', 'elementor' ),
  125. 'square' => __( 'Square', 'elementor' ),
  126. ],
  127. 'default' => 'circle',
  128. 'condition' => [
  129. 'view!' => 'default',
  130. ],
  131. 'prefix_class' => 'elementor-shape-',
  132. ]
  133. );
  134. $this->add_control(
  135. 'link',
  136. [
  137. 'label' => __( 'Link', 'elementor' ),
  138. 'type' => Controls_Manager::URL,
  139. 'dynamic' => [
  140. 'active' => true,
  141. ],
  142. 'placeholder' => __( 'https://your-link.com', 'elementor' ),
  143. ]
  144. );
  145. $this->add_responsive_control(
  146. 'align',
  147. [
  148. 'label' => __( 'Alignment', 'elementor' ),
  149. 'type' => Controls_Manager::CHOOSE,
  150. 'options' => [
  151. 'left' => [
  152. 'title' => __( 'Left', 'elementor' ),
  153. 'icon' => 'fa fa-align-left',
  154. ],
  155. 'center' => [
  156. 'title' => __( 'Center', 'elementor' ),
  157. 'icon' => 'fa fa-align-center',
  158. ],
  159. 'right' => [
  160. 'title' => __( 'Right', 'elementor' ),
  161. 'icon' => 'fa fa-align-right',
  162. ],
  163. ],
  164. 'default' => 'center',
  165. 'selectors' => [
  166. '{{WRAPPER}} .elementor-icon-wrapper' => 'text-align: {{VALUE}};',
  167. ],
  168. ]
  169. );
  170. $this->end_controls_section();
  171. $this->start_controls_section(
  172. 'section_style_icon',
  173. [
  174. 'label' => __( 'Icon', 'elementor' ),
  175. 'tab' => Controls_Manager::TAB_STYLE,
  176. ]
  177. );
  178. $this->start_controls_tabs( 'icon_colors' );
  179. $this->start_controls_tab(
  180. 'icon_colors_normal',
  181. [
  182. 'label' => __( 'Normal', 'elementor' ),
  183. ]
  184. );
  185. $this->add_control(
  186. 'primary_color',
  187. [
  188. 'label' => __( 'Primary Color', 'elementor' ),
  189. 'type' => Controls_Manager::COLOR,
  190. 'default' => '',
  191. 'selectors' => [
  192. '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
  193. '{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'color: {{VALUE}}; border-color: {{VALUE}};',
  194. ],
  195. 'scheme' => [
  196. 'type' => Scheme_Color::get_type(),
  197. 'value' => Scheme_Color::COLOR_1,
  198. ],
  199. ]
  200. );
  201. $this->add_control(
  202. 'secondary_color',
  203. [
  204. 'label' => __( 'Secondary Color', 'elementor' ),
  205. 'type' => Controls_Manager::COLOR,
  206. 'default' => '',
  207. 'condition' => [
  208. 'view!' => 'default',
  209. ],
  210. 'selectors' => [
  211. '{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
  212. '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'color: {{VALUE}};',
  213. ],
  214. ]
  215. );
  216. $this->end_controls_tab();
  217. $this->start_controls_tab(
  218. 'icon_colors_hover',
  219. [
  220. 'label' => __( 'Hover', 'elementor' ),
  221. ]
  222. );
  223. $this->add_control(
  224. 'hover_primary_color',
  225. [
  226. 'label' => __( 'Primary Color', 'elementor' ),
  227. 'type' => Controls_Manager::COLOR,
  228. 'default' => '',
  229. 'selectors' => [
  230. '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
  231. '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'color: {{VALUE}}; border-color: {{VALUE}};',
  232. ],
  233. ]
  234. );
  235. $this->add_control(
  236. 'hover_secondary_color',
  237. [
  238. 'label' => __( 'Secondary Color', 'elementor' ),
  239. 'type' => Controls_Manager::COLOR,
  240. 'default' => '',
  241. 'condition' => [
  242. 'view!' => 'default',
  243. ],
  244. 'selectors' => [
  245. '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
  246. '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'color: {{VALUE}};',
  247. ],
  248. ]
  249. );
  250. $this->add_control(
  251. 'hover_animation',
  252. [
  253. 'label' => __( 'Hover Animation', 'elementor' ),
  254. 'type' => Controls_Manager::HOVER_ANIMATION,
  255. ]
  256. );
  257. $this->end_controls_tab();
  258. $this->end_controls_tabs();
  259. $this->add_control(
  260. 'size',
  261. [
  262. 'label' => __( 'Size', 'elementor' ),
  263. 'type' => Controls_Manager::SLIDER,
  264. 'range' => [
  265. 'px' => [
  266. 'min' => 6,
  267. 'max' => 300,
  268. ],
  269. ],
  270. 'selectors' => [
  271. '{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
  272. ],
  273. ]
  274. );
  275. $this->add_control(
  276. 'icon_padding',
  277. [
  278. 'label' => __( 'Padding', 'elementor' ),
  279. 'type' => Controls_Manager::SLIDER,
  280. 'selectors' => [
  281. '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
  282. ],
  283. 'range' => [
  284. 'em' => [
  285. 'min' => 0,
  286. 'max' => 5,
  287. ],
  288. ],
  289. 'condition' => [
  290. 'view!' => 'default',
  291. ],
  292. ]
  293. );
  294. $this->add_control(
  295. 'rotate',
  296. [
  297. 'label' => __( 'Rotate', 'elementor' ),
  298. 'type' => Controls_Manager::SLIDER,
  299. 'default' => [
  300. 'size' => 0,
  301. 'unit' => 'deg',
  302. ],
  303. 'selectors' => [
  304. '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
  305. ],
  306. ]
  307. );
  308. $this->add_control(
  309. 'border_width',
  310. [
  311. 'label' => __( 'Border Width', 'elementor' ),
  312. 'type' => Controls_Manager::DIMENSIONS,
  313. 'selectors' => [
  314. '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  315. ],
  316. 'condition' => [
  317. 'view' => 'framed',
  318. ],
  319. ]
  320. );
  321. $this->add_control(
  322. 'border_radius',
  323. [
  324. 'label' => __( 'Border Radius', 'elementor' ),
  325. 'type' => Controls_Manager::DIMENSIONS,
  326. 'size_units' => [ 'px', '%' ],
  327. 'selectors' => [
  328. '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  329. ],
  330. 'condition' => [
  331. 'view!' => 'default',
  332. ],
  333. ]
  334. );
  335. $this->end_controls_section();
  336. }
  337. /**
  338. * Render icon widget output on the frontend.
  339. *
  340. * Written in PHP and used to generate the final HTML.
  341. *
  342. * @since 1.0.0
  343. * @access protected
  344. */
  345. protected function render() {
  346. $settings = $this->get_settings_for_display();
  347. $this->add_render_attribute( 'wrapper', 'class', 'elementor-icon-wrapper' );
  348. $this->add_render_attribute( 'icon-wrapper', 'class', 'elementor-icon' );
  349. if ( ! empty( $settings['hover_animation'] ) ) {
  350. $this->add_render_attribute( 'icon-wrapper', 'class', 'elementor-animation-' . $settings['hover_animation'] );
  351. }
  352. $icon_tag = 'div';
  353. if ( ! empty( $settings['link']['url'] ) ) {
  354. $this->add_render_attribute( 'icon-wrapper', 'href', $settings['link']['url'] );
  355. $icon_tag = 'a';
  356. if ( ! empty( $settings['link']['is_external'] ) ) {
  357. $this->add_render_attribute( 'icon-wrapper', 'target', '_blank' );
  358. }
  359. if ( $settings['link']['nofollow'] ) {
  360. $this->add_render_attribute( 'icon-wrapper', 'rel', 'nofollow' );
  361. }
  362. }
  363. if ( ! empty( $settings['icon'] ) ) {
  364. $this->add_render_attribute( 'icon', 'class', $settings['icon'] );
  365. $this->add_render_attribute( 'icon', 'aria-hidden', 'true' );
  366. }
  367. ?>
  368. <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
  369. <<?php echo $icon_tag . ' ' . $this->get_render_attribute_string( 'icon-wrapper' ); ?>>
  370. <i <?php echo $this->get_render_attribute_string( 'icon' ); ?>></i>
  371. </<?php echo $icon_tag; ?>>
  372. </div>
  373. <?php
  374. }
  375. /**
  376. * Render icon widget output in the editor.
  377. *
  378. * Written as a Backbone JavaScript template and used to generate the live preview.
  379. *
  380. * @since 1.0.0
  381. * @access protected
  382. */
  383. protected function _content_template() {
  384. ?>
  385. <# var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
  386. iconTag = link ? 'a' : 'div'; #>
  387. <div class="elementor-icon-wrapper">
  388. <{{{ iconTag }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}" {{{ link }}}>
  389. <i class="{{ settings.icon }}" aria-hidden="true"></i>
  390. </{{{ iconTag }}}>
  391. </div>
  392. <?php
  393. }
  394. }