alert.php 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor alert widget.
  8. *
  9. * Elementor widget that displays a collapsible display of content in an toggle
  10. * style, allowing the user to open multiple items.
  11. *
  12. * @since 1.0.0
  13. */
  14. class Widget_Alert extends Widget_Base {
  15. /**
  16. * Get widget name.
  17. *
  18. * Retrieve alert 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 'alert';
  27. }
  28. /**
  29. * Get widget title.
  30. *
  31. * Retrieve alert 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 __( 'Alert', 'elementor' );
  40. }
  41. /**
  42. * Get widget icon.
  43. *
  44. * Retrieve alert 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-alert';
  53. }
  54. /**
  55. * Get widget keywords.
  56. *
  57. * Retrieve the list of keywords the widget belongs to.
  58. *
  59. * @since 2.1.0
  60. * @access public
  61. *
  62. * @return array Widget keywords.
  63. */
  64. public function get_keywords() {
  65. return [ 'alert', 'notice', 'message' ];
  66. }
  67. /**
  68. * Register alert widget controls.
  69. *
  70. * Adds different input fields to allow the user to change and customize the widget settings.
  71. *
  72. * @since 1.0.0
  73. * @access protected
  74. */
  75. protected function _register_controls() {
  76. $this->start_controls_section(
  77. 'section_alert',
  78. [
  79. 'label' => __( 'Alert', 'elementor' ),
  80. ]
  81. );
  82. $this->add_control(
  83. 'alert_type',
  84. [
  85. 'label' => __( 'Type', 'elementor' ),
  86. 'type' => Controls_Manager::SELECT,
  87. 'default' => 'info',
  88. 'options' => [
  89. 'info' => __( 'Info', 'elementor' ),
  90. 'success' => __( 'Success', 'elementor' ),
  91. 'warning' => __( 'Warning', 'elementor' ),
  92. 'danger' => __( 'Danger', 'elementor' ),
  93. ],
  94. 'style_transfer' => true,
  95. ]
  96. );
  97. $this->add_control(
  98. 'alert_title',
  99. [
  100. 'label' => __( 'Title & Description', 'elementor' ),
  101. 'type' => Controls_Manager::TEXT,
  102. 'placeholder' => __( 'Enter your title', 'elementor' ),
  103. 'default' => __( 'This is an Alert', 'elementor' ),
  104. 'label_block' => true,
  105. ]
  106. );
  107. $this->add_control(
  108. 'alert_description',
  109. [
  110. 'label' => __( 'Content', 'elementor' ),
  111. 'type' => Controls_Manager::TEXTAREA,
  112. 'placeholder' => __( 'Enter your description', 'elementor' ),
  113. 'default' => __( 'I am a description. Click the edit button to change this text.', 'elementor' ),
  114. 'separator' => 'none',
  115. 'show_label' => false,
  116. ]
  117. );
  118. $this->add_control(
  119. 'show_dismiss',
  120. [
  121. 'label' => __( 'Dismiss Button', 'elementor' ),
  122. 'type' => Controls_Manager::SELECT,
  123. 'default' => 'show',
  124. 'options' => [
  125. 'show' => __( 'Show', 'elementor' ),
  126. 'hide' => __( 'Hide', 'elementor' ),
  127. ],
  128. ]
  129. );
  130. $this->add_control(
  131. 'view',
  132. [
  133. 'label' => __( 'View', 'elementor' ),
  134. 'type' => Controls_Manager::HIDDEN,
  135. 'default' => 'traditional',
  136. ]
  137. );
  138. $this->end_controls_section();
  139. $this->start_controls_section(
  140. 'section_type',
  141. [
  142. 'label' => __( 'Alert', 'elementor' ),
  143. 'tab' => Controls_Manager::TAB_STYLE,
  144. ]
  145. );
  146. $this->add_control(
  147. 'background',
  148. [
  149. 'label' => __( 'Background Color', 'elementor' ),
  150. 'type' => Controls_Manager::COLOR,
  151. 'selectors' => [
  152. '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};',
  153. ],
  154. ]
  155. );
  156. $this->add_control(
  157. 'border_color',
  158. [
  159. 'label' => __( 'Border Color', 'elementor' ),
  160. 'type' => Controls_Manager::COLOR,
  161. 'selectors' => [
  162. '{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};',
  163. ],
  164. ]
  165. );
  166. $this->add_control(
  167. 'border_left-width',
  168. [
  169. 'label' => __( 'Left Border Width', 'elementor' ),
  170. 'type' => Controls_Manager::SLIDER,
  171. 'range' => [
  172. 'px' => [
  173. 'min' => 0,
  174. 'max' => 100,
  175. ],
  176. ],
  177. 'selectors' => [
  178. '{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};',
  179. ],
  180. ]
  181. );
  182. $this->end_controls_section();
  183. $this->start_controls_section(
  184. 'section_title',
  185. [
  186. 'label' => __( 'Title', 'elementor' ),
  187. 'tab' => Controls_Manager::TAB_STYLE,
  188. ]
  189. );
  190. $this->add_control(
  191. 'title_color',
  192. [
  193. 'label' => __( 'Text Color', 'elementor' ),
  194. 'type' => Controls_Manager::COLOR,
  195. 'selectors' => [
  196. '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};',
  197. ],
  198. ]
  199. );
  200. $this->add_group_control(
  201. Group_Control_Typography::get_type(),
  202. [
  203. 'name' => 'alert_title',
  204. 'selector' => '{{WRAPPER}} .elementor-alert-title',
  205. 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
  206. ]
  207. );
  208. $this->end_controls_section();
  209. $this->start_controls_section(
  210. 'section_description',
  211. [
  212. 'label' => __( 'Description', 'elementor' ),
  213. 'tab' => Controls_Manager::TAB_STYLE,
  214. ]
  215. );
  216. $this->add_control(
  217. 'description_color',
  218. [
  219. 'label' => __( 'Text Color', 'elementor' ),
  220. 'type' => Controls_Manager::COLOR,
  221. 'selectors' => [
  222. '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};',
  223. ],
  224. ]
  225. );
  226. $this->add_group_control(
  227. Group_Control_Typography::get_type(),
  228. [
  229. 'name' => 'alert_description',
  230. 'selector' => '{{WRAPPER}} .elementor-alert-description',
  231. 'scheme' => Scheme_Typography::TYPOGRAPHY_3,
  232. ]
  233. );
  234. $this->end_controls_section();
  235. }
  236. /**
  237. * Render alert widget output on the frontend.
  238. *
  239. * Written in PHP and used to generate the final HTML.
  240. *
  241. * @since 1.0.0
  242. * @access protected
  243. */
  244. protected function render() {
  245. $settings = $this->get_settings_for_display();
  246. if ( empty( $settings['alert_title'] ) ) {
  247. return;
  248. }
  249. if ( ! empty( $settings['alert_type'] ) ) {
  250. $this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] );
  251. }
  252. $this->add_render_attribute( 'wrapper', 'role', 'alert' );
  253. $this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' );
  254. $this->add_inline_editing_attributes( 'alert_title', 'none' );
  255. ?>
  256. <div <?php echo $this->get_render_attribute_string( 'wrapper' ); ?>>
  257. <span <?php echo $this->get_render_attribute_string( 'alert_title' ); ?>><?php echo $settings['alert_title']; ?></span>
  258. <?php
  259. if ( ! empty( $settings['alert_description'] ) ) :
  260. $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' );
  261. $this->add_inline_editing_attributes( 'alert_description' );
  262. ?>
  263. <span <?php echo $this->get_render_attribute_string( 'alert_description' ); ?>><?php echo $settings['alert_description']; ?></span>
  264. <?php endif; ?>
  265. <?php if ( 'show' === $settings['show_dismiss'] ) : ?>
  266. <button type="button" class="elementor-alert-dismiss">
  267. <span aria-hidden="true">&times;</span>
  268. <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>
  269. </button>
  270. <?php endif; ?>
  271. </div>
  272. <?php
  273. }
  274. /**
  275. * Render alert widget output in the editor.
  276. *
  277. * Written as a Backbone JavaScript template and used to generate the live preview.
  278. *
  279. * @since 1.0.0
  280. * @access protected
  281. */
  282. protected function _content_template() {
  283. ?>
  284. <# if ( settings.alert_title ) {
  285. view.addRenderAttribute( {
  286. alert_title: { class: 'elementor-alert-title' },
  287. alert_description: { class: 'elementor-alert-description' }
  288. } );
  289. view.addInlineEditingAttributes( 'alert_title', 'none' );
  290. view.addInlineEditingAttributes( 'alert_description' );
  291. #>
  292. <div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert">
  293. <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span>
  294. <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span>
  295. <# if ( 'show' === settings.show_dismiss ) { #>
  296. <button type="button" class="elementor-alert-dismiss">
  297. <span aria-hidden="true">&times;</span>
  298. <span class="elementor-screen-only"><?php echo __( 'Dismiss alert', 'elementor' ); ?></span>
  299. </button>
  300. <# } #>
  301. </div>
  302. <# } #>
  303. <?php
  304. }
  305. }