alert.php (9032B)
1 <?php 2 namespace Elementor; 3 4 use Elementor\Core\Kits\Documents\Tabs\Global_Typography; 5 6 if ( ! defined( 'ABSPATH' ) ) { 7 exit; // Exit if accessed directly. 8 } 9 10 /** 11 * Elementor alert widget. 12 * 13 * Elementor widget that displays a collapsible display of content in an toggle 14 * style, allowing the user to open multiple items. 15 * 16 * @since 1.0.0 17 */ 18 class Widget_Alert extends Widget_Base { 19 20 /** 21 * Get widget name. 22 * 23 * Retrieve alert widget name. 24 * 25 * @since 1.0.0 26 * @access public 27 * 28 * @return string Widget name. 29 */ 30 public function get_name() { 31 return 'alert'; 32 } 33 34 /** 35 * Get widget title. 36 * 37 * Retrieve alert widget title. 38 * 39 * @since 1.0.0 40 * @access public 41 * 42 * @return string Widget title. 43 */ 44 public function get_title() { 45 return esc_html__( 'Alert', 'elementor' ); 46 } 47 48 /** 49 * Get widget icon. 50 * 51 * Retrieve alert widget icon. 52 * 53 * @since 1.0.0 54 * @access public 55 * 56 * @return string Widget icon. 57 */ 58 public function get_icon() { 59 return 'eicon-alert'; 60 } 61 62 /** 63 * Get widget keywords. 64 * 65 * Retrieve the list of keywords the widget belongs to. 66 * 67 * @since 2.1.0 68 * @access public 69 * 70 * @return array Widget keywords. 71 */ 72 public function get_keywords() { 73 return [ 'alert', 'notice', 'message' ]; 74 } 75 76 /** 77 * Register alert widget controls. 78 * 79 * Adds different input fields to allow the user to change and customize the widget settings. 80 * 81 * @since 3.1.0 82 * @access protected 83 */ 84 protected function register_controls() { 85 $this->start_controls_section( 86 'section_alert', 87 [ 88 'label' => esc_html__( 'Alert', 'elementor' ), 89 ] 90 ); 91 92 $this->add_control( 93 'alert_type', 94 [ 95 'label' => esc_html__( 'Type', 'elementor' ), 96 'type' => Controls_Manager::SELECT, 97 'default' => 'info', 98 'options' => [ 99 'info' => esc_html__( 'Info', 'elementor' ), 100 'success' => esc_html__( 'Success', 'elementor' ), 101 'warning' => esc_html__( 'Warning', 'elementor' ), 102 'danger' => esc_html__( 'Danger', 'elementor' ), 103 ], 104 'style_transfer' => true, 105 ] 106 ); 107 108 $this->add_control( 109 'alert_title', 110 [ 111 'label' => esc_html__( 'Title & Description', 'elementor' ), 112 'type' => Controls_Manager::TEXT, 113 'placeholder' => esc_html__( 'Enter your title', 'elementor' ), 114 'default' => esc_html__( 'This is an Alert', 'elementor' ), 115 'label_block' => true, 116 'dynamic' => [ 117 'active' => true, 118 ], 119 ] 120 ); 121 122 $this->add_control( 123 'alert_description', 124 [ 125 'label' => esc_html__( 'Content', 'elementor' ), 126 'type' => Controls_Manager::TEXTAREA, 127 'placeholder' => esc_html__( 'Enter your description', 'elementor' ), 128 'default' => esc_html__( 'I am a description. Click the edit button to change this text.', 'elementor' ), 129 'separator' => 'none', 130 'show_label' => false, 131 'dynamic' => [ 132 'active' => true, 133 ], 134 ] 135 ); 136 137 $this->add_control( 138 'show_dismiss', 139 [ 140 'label' => esc_html__( 'Dismiss Button', 'elementor' ), 141 'type' => Controls_Manager::SELECT, 142 'default' => 'show', 143 'options' => [ 144 'show' => esc_html__( 'Show', 'elementor' ), 145 'hide' => esc_html__( 'Hide', 'elementor' ), 146 ], 147 ] 148 ); 149 150 $this->add_control( 151 'view', 152 [ 153 'label' => esc_html__( 'View', 'elementor' ), 154 'type' => Controls_Manager::HIDDEN, 155 'default' => 'traditional', 156 ] 157 ); 158 159 $this->end_controls_section(); 160 161 $this->start_controls_section( 162 'section_type', 163 [ 164 'label' => esc_html__( 'Alert', 'elementor' ), 165 'tab' => Controls_Manager::TAB_STYLE, 166 ] 167 ); 168 169 $this->add_control( 170 'background', 171 [ 172 'label' => esc_html__( 'Background Color', 'elementor' ), 173 'type' => Controls_Manager::COLOR, 174 'selectors' => [ 175 '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};', 176 ], 177 ] 178 ); 179 180 $this->add_control( 181 'border_color', 182 [ 183 'label' => esc_html__( 'Border Color', 'elementor' ), 184 'type' => Controls_Manager::COLOR, 185 'selectors' => [ 186 '{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};', 187 ], 188 ] 189 ); 190 191 $this->add_control( 192 'border_left-width', 193 [ 194 'label' => esc_html__( 'Left Border Width', 'elementor' ), 195 'type' => Controls_Manager::SLIDER, 196 'range' => [ 197 'px' => [ 198 'min' => 0, 199 'max' => 100, 200 ], 201 ], 202 'selectors' => [ 203 '{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};', 204 ], 205 ] 206 ); 207 208 $this->end_controls_section(); 209 210 $this->start_controls_section( 211 'section_title', 212 [ 213 'label' => esc_html__( 'Title', 'elementor' ), 214 'tab' => Controls_Manager::TAB_STYLE, 215 ] 216 ); 217 218 $this->add_control( 219 'title_color', 220 [ 221 'label' => esc_html__( 'Text Color', 'elementor' ), 222 'type' => Controls_Manager::COLOR, 223 'selectors' => [ 224 '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};', 225 ], 226 ] 227 ); 228 229 $this->add_group_control( 230 Group_Control_Typography::get_type(), 231 [ 232 'name' => 'alert_title', 233 'selector' => '{{WRAPPER}} .elementor-alert-title', 234 'global' => [ 235 'default' => Global_Typography::TYPOGRAPHY_PRIMARY, 236 ], 237 ] 238 ); 239 240 $this->add_group_control( 241 Group_Control_Text_Shadow::get_type(), 242 [ 243 'name' => 'title_shadow', 244 'selector' => '{{WRAPPER}} .elementor-alert-title', 245 ] 246 ); 247 248 $this->end_controls_section(); 249 250 $this->start_controls_section( 251 'section_description', 252 [ 253 'label' => esc_html__( 'Description', 'elementor' ), 254 'tab' => Controls_Manager::TAB_STYLE, 255 ] 256 ); 257 258 $this->add_control( 259 'description_color', 260 [ 261 'label' => esc_html__( 'Text Color', 'elementor' ), 262 'type' => Controls_Manager::COLOR, 263 'selectors' => [ 264 '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};', 265 ], 266 ] 267 ); 268 269 $this->add_group_control( 270 Group_Control_Typography::get_type(), 271 [ 272 'name' => 'alert_description', 273 'selector' => '{{WRAPPER}} .elementor-alert-description', 274 'global' => [ 275 'default' => Global_Typography::TYPOGRAPHY_TEXT, 276 ], 277 ] 278 ); 279 280 $this->add_group_control( 281 Group_Control_Text_Shadow::get_type(), 282 [ 283 'name' => 'description_shadow', 284 'selector' => '{{WRAPPER}} .elementor-alert-description', 285 ] 286 ); 287 288 $this->end_controls_section(); 289 290 } 291 292 /** 293 * Render alert widget output on the frontend. 294 * 295 * Written in PHP and used to generate the final HTML. 296 * 297 * @since 1.0.0 298 * @access protected 299 */ 300 protected function render() { 301 $settings = $this->get_settings_for_display(); 302 303 if ( Utils::is_empty( $settings['alert_title'] ) ) { 304 return; 305 } 306 307 if ( ! empty( $settings['alert_type'] ) ) { 308 $this->add_render_attribute( 'wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type'] ); 309 } 310 311 $this->add_render_attribute( 'wrapper', 'role', 'alert' ); 312 313 $this->add_render_attribute( 'alert_title', 'class', 'elementor-alert-title' ); 314 315 $this->add_inline_editing_attributes( 'alert_title', 'none' ); 316 ?> 317 <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>> 318 <span <?php $this->print_render_attribute_string( 'alert_title' ); ?>><?php $this->print_unescaped_setting( 'alert_title' ); ?></span> 319 <?php 320 if ( ! Utils::is_empty( $settings['alert_description'] ) ) : 321 $this->add_render_attribute( 'alert_description', 'class', 'elementor-alert-description' ); 322 323 $this->add_inline_editing_attributes( 'alert_description' ); 324 ?> 325 <span <?php $this->print_render_attribute_string( 'alert_description' ); ?>><?php $this->print_unescaped_setting( 'alert_description' ); ?></span> 326 <?php endif; ?> 327 <?php if ( 'show' === $settings['show_dismiss'] ) : ?> 328 <button type="button" class="elementor-alert-dismiss"> 329 <span aria-hidden="true">×</span> 330 <span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss alert', 'elementor' ); ?></span> 331 </button> 332 <?php endif; ?> 333 </div> 334 <?php 335 } 336 337 /** 338 * Render alert widget output in the editor. 339 * 340 * Written as a Backbone JavaScript template and used to generate the live preview. 341 * 342 * @since 2.9.0 343 * @access protected 344 */ 345 protected function content_template() { 346 ?> 347 <# if ( settings.alert_title ) { 348 view.addRenderAttribute( { 349 alert_title: { class: 'elementor-alert-title' }, 350 alert_description: { class: 'elementor-alert-description' } 351 } ); 352 353 view.addInlineEditingAttributes( 'alert_title', 'none' ); 354 view.addInlineEditingAttributes( 'alert_description' ); 355 #> 356 <div class="elementor-alert elementor-alert-{{ settings.alert_type }}" role="alert"> 357 <span {{{ view.getRenderAttributeString( 'alert_title' ) }}}>{{{ settings.alert_title }}}</span> 358 <span {{{ view.getRenderAttributeString( 'alert_description' ) }}}>{{{ settings.alert_description }}}</span> 359 <# if ( 'show' === settings.show_dismiss ) { #> 360 <button type="button" class="elementor-alert-dismiss"> 361 <span aria-hidden="true">×</span> 362 <span class="elementor-screen-only"><?php echo esc_html__( 'Dismiss alert', 'elementor' ); ?></span> 363 </button> 364 <# } #> 365 </div> 366 <# } #> 367 <?php 368 } 369 }