social-icons.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor social icons widget.
  8. *
  9. * Elementor widget that displays icons to social pages like Facebook and Twitter.
  10. *
  11. * @since 1.0.0
  12. */
  13. class Widget_Social_Icons extends Widget_Base {
  14. /**
  15. * Get widget name.
  16. *
  17. * Retrieve social icons 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 'social-icons';
  26. }
  27. /**
  28. * Get widget title.
  29. *
  30. * Retrieve social icons 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 __( 'Social Icons', 'elementor' );
  39. }
  40. /**
  41. * Get widget icon.
  42. *
  43. * Retrieve social icons 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-social-icons';
  52. }
  53. /**
  54. * Get widget keywords.
  55. *
  56. * Retrieve the list of keywords the widget belongs to.
  57. *
  58. * @since 2.1.0
  59. * @access public
  60. *
  61. * @return array Widget keywords.
  62. */
  63. public function get_keywords() {
  64. return [ 'social', 'icon', 'link' ];
  65. }
  66. /**
  67. * Register social icons widget controls.
  68. *
  69. * Adds different input fields to allow the user to change and customize the widget settings.
  70. *
  71. * @since 1.0.0
  72. * @access protected
  73. */
  74. protected function _register_controls() {
  75. $this->start_controls_section(
  76. 'section_social_icon',
  77. [
  78. 'label' => __( 'Social Icons', 'elementor' ),
  79. ]
  80. );
  81. $repeater = new Repeater();
  82. $repeater->add_control(
  83. 'social',
  84. [
  85. 'label' => __( 'Icon', 'elementor' ),
  86. 'type' => Controls_Manager::ICON,
  87. 'label_block' => true,
  88. 'default' => 'fa fa-wordpress',
  89. 'include' => [
  90. 'fa fa-android',
  91. 'fa fa-apple',
  92. 'fa fa-behance',
  93. 'fa fa-bitbucket',
  94. 'fa fa-codepen',
  95. 'fa fa-delicious',
  96. 'fa fa-digg',
  97. 'fa fa-dribbble',
  98. 'fa fa-envelope',
  99. 'fa fa-facebook',
  100. 'fa fa-flickr',
  101. 'fa fa-foursquare',
  102. 'fa fa-github',
  103. 'fa fa-google-plus',
  104. 'fa fa-houzz',
  105. 'fa fa-instagram',
  106. 'fa fa-jsfiddle',
  107. 'fa fa-linkedin',
  108. 'fa fa-medium',
  109. 'fa fa-meetup',
  110. 'fa fa-mixcloud',
  111. 'fa fa-odnoklassniki',
  112. 'fa fa-pinterest',
  113. 'fa fa-product-hunt',
  114. 'fa fa-reddit',
  115. 'fa fa-rss',
  116. 'fa fa-shopping-cart',
  117. 'fa fa-skype',
  118. 'fa fa-slideshare',
  119. 'fa fa-snapchat',
  120. 'fa fa-soundcloud',
  121. 'fa fa-spotify',
  122. 'fa fa-stack-overflow',
  123. 'fa fa-steam',
  124. 'fa fa-stumbleupon',
  125. 'fa fa-telegram',
  126. 'fa fa-thumb-tack',
  127. 'fa fa-tripadvisor',
  128. 'fa fa-tumblr',
  129. 'fa fa-twitch',
  130. 'fa fa-twitter',
  131. 'fa fa-vimeo',
  132. 'fa fa-vk',
  133. 'fa fa-weibo',
  134. 'fa fa-weixin',
  135. 'fa fa-whatsapp',
  136. 'fa fa-wordpress',
  137. 'fa fa-xing',
  138. 'fa fa-yelp',
  139. 'fa fa-youtube',
  140. 'fa fa-500px',
  141. ],
  142. ]
  143. );
  144. $repeater->add_control(
  145. 'link',
  146. [
  147. 'label' => __( 'Link', 'elementor' ),
  148. 'type' => Controls_Manager::URL,
  149. 'label_block' => true,
  150. 'default' => [
  151. 'is_external' => 'true',
  152. ],
  153. 'placeholder' => __( 'https://your-link.com', 'elementor' ),
  154. ]
  155. );
  156. $this->add_control(
  157. 'social_icon_list',
  158. [
  159. 'label' => __( 'Social Icons', 'elementor' ),
  160. 'type' => Controls_Manager::REPEATER,
  161. 'fields' => $repeater->get_controls(),
  162. 'default' => [
  163. [
  164. 'social' => 'fa fa-facebook',
  165. ],
  166. [
  167. 'social' => 'fa fa-twitter',
  168. ],
  169. [
  170. 'social' => 'fa fa-google-plus',
  171. ],
  172. ],
  173. 'title_field' => '<i class="{{ social }}"></i> {{{ social.replace( \'fa fa-\', \'\' ).replace( \'-\', \' \' ).replace( /\b\w/g, function( letter ){ return letter.toUpperCase() } ) }}}',
  174. ]
  175. );
  176. $this->add_control(
  177. 'shape',
  178. [
  179. 'label' => __( 'Shape', 'elementor' ),
  180. 'type' => Controls_Manager::SELECT,
  181. 'default' => 'rounded',
  182. 'options' => [
  183. 'rounded' => __( 'Rounded', 'elementor' ),
  184. 'square' => __( 'Square', 'elementor' ),
  185. 'circle' => __( 'Circle', 'elementor' ),
  186. ],
  187. 'prefix_class' => 'elementor-shape-',
  188. ]
  189. );
  190. $this->add_responsive_control(
  191. 'align',
  192. [
  193. 'label' => __( 'Alignment', 'elementor' ),
  194. 'type' => Controls_Manager::CHOOSE,
  195. 'options' => [
  196. 'left' => [
  197. 'title' => __( 'Left', 'elementor' ),
  198. 'icon' => 'fa fa-align-left',
  199. ],
  200. 'center' => [
  201. 'title' => __( 'Center', 'elementor' ),
  202. 'icon' => 'fa fa-align-center',
  203. ],
  204. 'right' => [
  205. 'title' => __( 'Right', 'elementor' ),
  206. 'icon' => 'fa fa-align-right',
  207. ],
  208. ],
  209. 'default' => 'center',
  210. 'selectors' => [
  211. '{{WRAPPER}}' => 'text-align: {{VALUE}};',
  212. ],
  213. ]
  214. );
  215. $this->add_control(
  216. 'view',
  217. [
  218. 'label' => __( 'View', 'elementor' ),
  219. 'type' => Controls_Manager::HIDDEN,
  220. 'default' => 'traditional',
  221. ]
  222. );
  223. $this->end_controls_section();
  224. $this->start_controls_section(
  225. 'section_social_style',
  226. [
  227. 'label' => __( 'Icon', 'elementor' ),
  228. 'tab' => Controls_Manager::TAB_STYLE,
  229. ]
  230. );
  231. $this->add_control(
  232. 'icon_color',
  233. [
  234. 'label' => __( 'Color', 'elementor' ),
  235. 'type' => Controls_Manager::SELECT,
  236. 'default' => 'default',
  237. 'options' => [
  238. 'default' => __( 'Official Color', 'elementor' ),
  239. 'custom' => __( 'Custom', 'elementor' ),
  240. ],
  241. ]
  242. );
  243. $this->add_control(
  244. 'icon_primary_color',
  245. [
  246. 'label' => __( 'Primary Color', 'elementor' ),
  247. 'type' => Controls_Manager::COLOR,
  248. 'condition' => [
  249. 'icon_color' => 'custom',
  250. ],
  251. 'selectors' => [
  252. '{{WRAPPER}} .elementor-social-icon:not(:hover)' => 'background-color: {{VALUE}};',
  253. ],
  254. ]
  255. );
  256. $this->add_control(
  257. 'icon_secondary_color',
  258. [
  259. 'label' => __( 'Secondary Color', 'elementor' ),
  260. 'type' => Controls_Manager::COLOR,
  261. 'condition' => [
  262. 'icon_color' => 'custom',
  263. ],
  264. 'selectors' => [
  265. '{{WRAPPER}} .elementor-social-icon:not(:hover) i' => 'color: {{VALUE}};',
  266. ],
  267. ]
  268. );
  269. $this->add_responsive_control(
  270. 'icon_size',
  271. [
  272. 'label' => __( 'Size', 'elementor' ),
  273. 'type' => Controls_Manager::SLIDER,
  274. 'range' => [
  275. 'px' => [
  276. 'min' => 6,
  277. 'max' => 300,
  278. ],
  279. ],
  280. 'selectors' => [
  281. '{{WRAPPER}} .elementor-social-icon' => 'font-size: {{SIZE}}{{UNIT}};',
  282. ],
  283. ]
  284. );
  285. $this->add_responsive_control(
  286. 'icon_padding',
  287. [
  288. 'label' => __( 'Padding', 'elementor' ),
  289. 'type' => Controls_Manager::SLIDER,
  290. 'selectors' => [
  291. '{{WRAPPER}} .elementor-social-icon' => 'padding: {{SIZE}}{{UNIT}};',
  292. ],
  293. 'default' => [
  294. 'unit' => 'em',
  295. ],
  296. 'tablet_default' => [
  297. 'unit' => 'em',
  298. ],
  299. 'mobile_default' => [
  300. 'unit' => 'em',
  301. ],
  302. 'range' => [
  303. 'em' => [
  304. 'min' => 0,
  305. 'max' => 5,
  306. ],
  307. ],
  308. ]
  309. );
  310. $icon_spacing = is_rtl() ? 'margin-left: {{SIZE}}{{UNIT}};' : 'margin-right: {{SIZE}}{{UNIT}};';
  311. $this->add_responsive_control(
  312. 'icon_spacing',
  313. [
  314. 'label' => __( 'Spacing', 'elementor' ),
  315. 'type' => Controls_Manager::SLIDER,
  316. 'range' => [
  317. 'px' => [
  318. 'min' => 0,
  319. 'max' => 100,
  320. ],
  321. ],
  322. 'selectors' => [
  323. '{{WRAPPER}} .elementor-social-icon:not(:last-child)' => $icon_spacing,
  324. ],
  325. ]
  326. );
  327. $this->add_group_control(
  328. Group_Control_Border::get_type(),
  329. [
  330. 'name' => 'image_border', // We know this mistake - TODO: 'icon_border' (for hover control condition also)
  331. 'selector' => '{{WRAPPER}} .elementor-social-icon',
  332. 'separator' => 'before',
  333. ]
  334. );
  335. $this->add_control(
  336. 'border_radius',
  337. [
  338. 'label' => __( 'Border Radius', 'elementor' ),
  339. 'type' => Controls_Manager::DIMENSIONS,
  340. 'size_units' => [ 'px', '%' ],
  341. 'selectors' => [
  342. '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  343. ],
  344. ]
  345. );
  346. $this->end_controls_section();
  347. $this->start_controls_section(
  348. 'section_social_hover',
  349. [
  350. 'label' => __( 'Icon Hover', 'elementor' ),
  351. 'tab' => Controls_Manager::TAB_STYLE,
  352. ]
  353. );
  354. $this->add_control(
  355. 'hover_primary_color',
  356. [
  357. 'label' => __( 'Primary Color', 'elementor' ),
  358. 'type' => Controls_Manager::COLOR,
  359. 'default' => '',
  360. 'condition' => [
  361. 'icon_color' => 'custom',
  362. ],
  363. 'selectors' => [
  364. '{{WRAPPER}} .elementor-social-icon:hover' => 'background-color: {{VALUE}};',
  365. ],
  366. ]
  367. );
  368. $this->add_control(
  369. 'hover_secondary_color',
  370. [
  371. 'label' => __( 'Secondary Color', 'elementor' ),
  372. 'type' => Controls_Manager::COLOR,
  373. 'default' => '',
  374. 'condition' => [
  375. 'icon_color' => 'custom',
  376. ],
  377. 'selectors' => [
  378. '{{WRAPPER}} .elementor-social-icon:hover i' => 'color: {{VALUE}};',
  379. ],
  380. ]
  381. );
  382. $this->add_control(
  383. 'hover_border_color',
  384. [
  385. 'label' => __( 'Border Color', 'elementor' ),
  386. 'type' => Controls_Manager::COLOR,
  387. 'default' => '',
  388. 'condition' => [
  389. 'image_border_border!' => '',
  390. ],
  391. 'selectors' => [
  392. '{{WRAPPER}} .elementor-social-icon:hover' => 'border-color: {{VALUE}};',
  393. ],
  394. ]
  395. );
  396. $this->add_control(
  397. 'hover_animation',
  398. [
  399. 'label' => __( 'Hover Animation', 'elementor' ),
  400. 'type' => Controls_Manager::HOVER_ANIMATION,
  401. ]
  402. );
  403. $this->end_controls_section();
  404. }
  405. /**
  406. * Render social icons widget output on the frontend.
  407. *
  408. * Written in PHP and used to generate the final HTML.
  409. *
  410. * @since 1.0.0
  411. * @access protected
  412. */
  413. protected function render() {
  414. $settings = $this->get_settings_for_display();
  415. $class_animation = '';
  416. if ( ! empty( $settings['hover_animation'] ) ) {
  417. $class_animation = ' elementor-animation-' . $settings['hover_animation'];
  418. }
  419. ?>
  420. <div class="elementor-social-icons-wrapper">
  421. <?php
  422. foreach ( $settings['social_icon_list'] as $index => $item ) {
  423. $social = str_replace( 'fa fa-', '', $item['social'] );
  424. $link_key = 'link_' . $index;
  425. $this->add_render_attribute( $link_key, 'href', $item['link']['url'] );
  426. if ( $item['link']['is_external'] ) {
  427. $this->add_render_attribute( $link_key, 'target', '_blank' );
  428. }
  429. if ( $item['link']['nofollow'] ) {
  430. $this->add_render_attribute( $link_key, 'rel', 'nofollow' );
  431. }
  432. ?>
  433. <a class="elementor-icon elementor-social-icon elementor-social-icon-<?php echo $social . $class_animation; ?>" <?php echo $this->get_render_attribute_string( $link_key ); ?>>
  434. <span class="elementor-screen-only"><?php echo ucwords( $social ); ?></span>
  435. <i class="<?php echo $item['social']; ?>"></i>
  436. </a>
  437. <?php } ?>
  438. </div>
  439. <?php
  440. }
  441. /**
  442. * Render social icons widget output in the editor.
  443. *
  444. * Written as a Backbone JavaScript template and used to generate the live preview.
  445. *
  446. * @since 1.0.0
  447. * @access protected
  448. */
  449. protected function _content_template() {
  450. ?>
  451. <div class="elementor-social-icons-wrapper">
  452. <# _.each( settings.social_icon_list, function( item ) {
  453. var link = item.link ? item.link.url : '',
  454. social = item.social.replace( 'fa fa-', '' ); #>
  455. <a class="elementor-icon elementor-social-icon elementor-social-icon-{{ social }} elementor-animation-{{ settings.hover_animation }}" href="{{ link }}">
  456. <span class="elementor-screen-only">{{{ social }}}</span>
  457. <i class="{{ item.social }}"></i>
  458. </a>
  459. <# } ); #>
  460. </div>
  461. <?php
  462. }
  463. }