progress.php 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor progress widget.
  8. *
  9. * Elementor widget that displays an escalating progress bar.
  10. *
  11. * @since 1.0.0
  12. */
  13. class Widget_Progress extends Widget_Base {
  14. /**
  15. * Get widget name.
  16. *
  17. * Retrieve progress 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 'progress';
  26. }
  27. /**
  28. * Get widget title.
  29. *
  30. * Retrieve progress 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 __( 'Progress Bar', 'elementor' );
  39. }
  40. /**
  41. * Get widget icon.
  42. *
  43. * Retrieve progress 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-skill-bar';
  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 [ 'progress', 'bar' ];
  65. }
  66. /**
  67. * Register progress 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_progress',
  77. [
  78. 'label' => __( 'Progress Bar', 'elementor' ),
  79. ]
  80. );
  81. $this->add_control(
  82. 'title',
  83. [
  84. 'label' => __( 'Title', 'elementor' ),
  85. 'type' => Controls_Manager::TEXT,
  86. 'dynamic' => [
  87. 'active' => true,
  88. ],
  89. 'placeholder' => __( 'Enter your title', 'elementor' ),
  90. 'default' => __( 'My Skill', 'elementor' ),
  91. 'label_block' => true,
  92. ]
  93. );
  94. $this->add_control(
  95. 'progress_type',
  96. [
  97. 'label' => __( 'Type', 'elementor' ),
  98. 'type' => Controls_Manager::SELECT,
  99. 'default' => '',
  100. 'options' => [
  101. '' => __( 'Default', 'elementor' ),
  102. 'info' => __( 'Info', 'elementor' ),
  103. 'success' => __( 'Success', 'elementor' ),
  104. 'warning' => __( 'Warning', 'elementor' ),
  105. 'danger' => __( 'Danger', 'elementor' ),
  106. ],
  107. ]
  108. );
  109. $this->add_control(
  110. 'percent',
  111. [
  112. 'label' => __( 'Percentage', 'elementor' ),
  113. 'type' => Controls_Manager::SLIDER,
  114. 'default' => [
  115. 'size' => 50,
  116. 'unit' => '%',
  117. ],
  118. 'label_block' => true,
  119. ]
  120. );
  121. $this->add_control( 'display_percentage', [
  122. 'label' => __( 'Display Percentage', 'elementor' ),
  123. 'type' => Controls_Manager::SELECT,
  124. 'default' => 'show',
  125. 'options' => [
  126. 'show' => __( 'Show', 'elementor' ),
  127. 'hide' => __( 'Hide', 'elementor' ),
  128. ],
  129. ] );
  130. $this->add_control(
  131. 'inner_text',
  132. [
  133. 'label' => __( 'Inner Text', 'elementor' ),
  134. 'type' => Controls_Manager::TEXT,
  135. 'dynamic' => [
  136. 'active' => true,
  137. ],
  138. 'placeholder' => __( 'e.g. Web Designer', 'elementor' ),
  139. 'default' => __( 'Web Designer', 'elementor' ),
  140. 'label_block' => true,
  141. ]
  142. );
  143. $this->add_control(
  144. 'view',
  145. [
  146. 'label' => __( 'View', 'elementor' ),
  147. 'type' => Controls_Manager::HIDDEN,
  148. 'default' => 'traditional',
  149. ]
  150. );
  151. $this->end_controls_section();
  152. $this->start_controls_section(
  153. 'section_progress_style',
  154. [
  155. 'label' => __( 'Progress Bar', 'elementor' ),
  156. 'tab' => Controls_Manager::TAB_STYLE,
  157. ]
  158. );
  159. $this->add_control(
  160. 'bar_color',
  161. [
  162. 'label' => __( 'Color', 'elementor' ),
  163. 'type' => Controls_Manager::COLOR,
  164. 'scheme' => [
  165. 'type' => Scheme_Color::get_type(),
  166. 'value' => Scheme_Color::COLOR_1,
  167. ],
  168. 'selectors' => [
  169. '{{WRAPPER}} .elementor-progress-wrapper .elementor-progress-bar' => 'background-color: {{VALUE}};',
  170. ],
  171. ]
  172. );
  173. $this->add_control(
  174. 'bar_bg_color',
  175. [
  176. 'label' => __( 'Background Color', 'elementor' ),
  177. 'type' => Controls_Manager::COLOR,
  178. 'selectors' => [
  179. '{{WRAPPER}} .elementor-progress-wrapper' => 'background-color: {{VALUE}};',
  180. ],
  181. ]
  182. );
  183. $this->add_control(
  184. 'bar_inline_color',
  185. [
  186. 'label' => __( 'Inner Text Color', 'elementor' ),
  187. 'type' => Controls_Manager::COLOR,
  188. 'selectors' => [
  189. '{{WRAPPER}} .elementor-progress-bar' => 'color: {{VALUE}};',
  190. ],
  191. ]
  192. );
  193. $this->end_controls_section();
  194. $this->start_controls_section(
  195. 'section_title',
  196. [
  197. 'label' => __( 'Title Style', 'elementor' ),
  198. 'tab' => Controls_Manager::TAB_STYLE,
  199. ]
  200. );
  201. $this->add_control(
  202. 'title_color',
  203. [
  204. 'label' => __( 'Text Color', 'elementor' ),
  205. 'type' => Controls_Manager::COLOR,
  206. 'selectors' => [
  207. '{{WRAPPER}} .elementor-title' => 'color: {{VALUE}};',
  208. ],
  209. 'scheme' => [
  210. 'type' => Scheme_Color::get_type(),
  211. 'value' => Scheme_Color::COLOR_1,
  212. ],
  213. ]
  214. );
  215. $this->add_group_control(
  216. Group_Control_Typography::get_type(),
  217. [
  218. 'name' => 'typography',
  219. 'selector' => '{{WRAPPER}} .elementor-title',
  220. 'scheme' => Scheme_Typography::TYPOGRAPHY_3,
  221. ]
  222. );
  223. $this->end_controls_section();
  224. }
  225. /**
  226. * Render progress widget output on the frontend.
  227. *
  228. * Written in PHP and used to generate the final HTML.
  229. *
  230. * @since 1.0.0
  231. * @access protected
  232. */
  233. protected function render() {
  234. $settings = $this->get_settings_for_display();
  235. $this->add_render_attribute( 'wrapper', [
  236. 'class' => 'elementor-progress-wrapper',
  237. 'role' => 'progressbar',
  238. 'aria-valuemin' => '0',
  239. 'aria-valuemax' => '100',
  240. 'aria-valuenow' => $settings['percent']['size'],
  241. 'aria-valuetext' => $settings['inner_text'],
  242. ] );
  243. if ( ! empty( $settings['progress_type'] ) ) {
  244. $this->add_render_attribute( 'wrapper', 'class', 'progress-' . $settings['progress_type'] );
  245. }
  246. $this->add_render_attribute( 'progress-bar', [
  247. 'class' => 'elementor-progress-bar',
  248. 'data-max' => $settings['percent']['size'],
  249. ] );
  250. $this->add_render_attribute( 'inner_text', [
  251. 'class' => 'elementor-progress-text',
  252. ] );
  253. $this->add_inline_editing_attributes( 'inner_text' );
  254. if ( ! empty( $settings['title'] ) ) { ?>
  255. <span class="elementor-title"><?php echo $settings['title']; ?></span>
  256. <?php } ?>
  257. <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
  258. <div <?php echo $this->get_render_attribute_string( 'progress-bar' ); ?>>
  259. <span <?php echo $this->get_render_attribute_string( 'inner_text' ); ?>><?php echo $settings['inner_text']; ?></span>
  260. <?php if ( 'hide' !== $settings['display_percentage'] ) { ?>
  261. <span class="elementor-progress-percentage"><?php echo $settings['percent']['size']; ?>%</span>
  262. <?php } ?>
  263. </div>
  264. </div>
  265. <?php
  266. }
  267. /**
  268. * Render progress widget output in the editor.
  269. *
  270. * Written as a Backbone JavaScript template and used to generate the live preview.
  271. *
  272. * @since 1.0.0
  273. * @access protected
  274. */
  275. protected function _content_template() {
  276. ?>
  277. <#
  278. view.addRenderAttribute( 'progressWrapper', {
  279. 'class': [ 'elementor-progress-wrapper', 'progress-' + settings.progress_type ],
  280. 'role': 'progressbar',
  281. 'aria-valuemin': '0',
  282. 'aria-valuemax': '100',
  283. 'aria-valuenow': settings.percent.size,
  284. 'aria-valuetext': settings.inner_text
  285. } );
  286. view.addRenderAttribute( 'inner_text', {
  287. 'class': 'elementor-progress-text'
  288. } );
  289. view.addInlineEditingAttributes( 'inner_text' );
  290. #>
  291. <# if ( settings.title ) { #>
  292. <span class="elementor-title">{{{ settings.title }}}</span><#
  293. } #>
  294. <div {{{ view.getRenderAttributeString( 'progressWrapper' ) }}}>
  295. <div class="elementor-progress-bar" data-max="{{ settings.percent.size }}">
  296. <span {{{ view.getRenderAttributeString( 'inner_text' ) }}}>{{{ settings.inner_text }}}</span>
  297. <# if ( 'hide' !== settings.display_percentage ) { #>
  298. <span class="elementor-progress-percentage">{{{ settings.percent.size }}}%</span>
  299. <# } #>
  300. </div>
  301. </div>
  302. <?php
  303. }
  304. }