Advertisement
cipher87

Button with aria-label

Mar 24th, 2021
820
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 18.78 KB | None | 0 0
  1. <?php
  2. /**
  3.  * Button
  4.  *
  5.  * Displays a colored button that links to any url of your choice
  6.  * Based on: 4.8.1
  7.  * Thread: https://kriesi.at/support/topic/add-aria-label-to-post-slider/
  8.  */
  9. if ( ! defined( 'ABSPATH' ) ) {  exit;  }    // Exit if accessed directly
  10.  
  11.  
  12. if ( ! class_exists( 'avia_sc_button' ) )
  13. {
  14.     class avia_sc_button extends aviaShortcodeTemplate
  15.     {
  16.         /**
  17.          * Create the config array for the shortcode button
  18.          */
  19.         function shortcode_insert_button()
  20.         {
  21.             $this->config['version']        = '1.0';
  22.             $this->config['self_closing']   = 'yes';
  23.             $this->config['base_element']   = 'yes';
  24.  
  25.             $this->config['name']           = __( 'Button', 'avia_framework' );
  26.             $this->config['tab']            = __( 'Content Elements', 'avia_framework' );
  27.             $this->config['icon']           = AviaBuilder::$path['imagesURL'] . 'sc-button.png';
  28.             $this->config['order']          = 85;
  29.             $this->config['target']         = 'avia-target-insert';
  30.             $this->config['shortcode']      = 'av_button';
  31.             $this->config['tooltip']        = __( 'Creates a colored button', 'avia_framework' );
  32.             $this->config['tinyMCE']        = array( 'tiny_always' => true );
  33.             $this->config['preview']        = true;
  34.             $this->config['id_name']        = 'id';
  35.             $this->config['id_show']        = 'yes';
  36.             $this->config['aria_label']     = 'yes'; // added
  37.         }
  38.  
  39.  
  40.         function extra_assets()
  41.         {
  42.             //load css
  43.             wp_enqueue_style( 'avia-module-button', AviaBuilder::$path['pluginUrlRoot'] . 'avia-shortcodes/buttons/buttons.css', array( 'avia-layout' ), false );
  44.         }
  45.  
  46.         /**
  47.          * Popup Elements
  48.          *
  49.          * If this function is defined in a child class the element automatically gets an edit button, that, when pressed
  50.          * opens a modal window that allows to edit the element properties
  51.          *
  52.          * @return void
  53.          */
  54.         function popup_elements()
  55.         {
  56.             $this->elements = array(
  57.                
  58.                 array(
  59.                         'type'  => 'tab_container',
  60.                         'nodescription' => true
  61.                     ),
  62.                        
  63.                 array(
  64.                         'type'  => 'tab',
  65.                         'name'  => __( 'Content', 'avia_framework' ),
  66.                         'nodescription' => true
  67.                     ),
  68.                    
  69.                     array(
  70.                             'type'          => 'template',
  71.                             'template_id'   => 'toggle_container',
  72.                             'templates_include' => array(
  73.                                                     $this->popup_key( 'content_button' ),
  74.                                                     $this->popup_key( 'content_link' )
  75.                                                 ),
  76.                             'nodescription' => true
  77.                         ),
  78.                
  79.                 array(
  80.                         'type'  => 'tab_close',
  81.                         'nodescription' => true
  82.                     ),
  83.  
  84.                 array(
  85.                         'type'  => 'tab',
  86.                         'name'  => __( 'Styling', 'avia_framework' ),
  87.                         'nodescription' => true
  88.                     ),
  89.                
  90.                     array(
  91.                             'type'          => 'template',
  92.                             'template_id'   => 'toggle_container',
  93.                             'templates_include' => array(
  94.                                                     $this->popup_key( 'styling_appearance' ),
  95.                                                     $this->popup_key( 'styling_colors' )
  96.                                                 ),
  97.                             'nodescription' => true
  98.                         ),
  99.                
  100.                 array(
  101.                         'type'  => 'tab_close',
  102.                         'nodescription' => true
  103.                     ),
  104.                
  105.                 array(
  106.                         'type'  => 'tab',
  107.                         'name'  => __( 'Advanced', 'avia_framework' ),
  108.                         'nodescription' => true
  109.                     ),
  110.                
  111.                     array(
  112.                             'type'  => 'toggle_container',
  113.                             'nodescription' => true
  114.                         ),
  115.                
  116.                         array( 
  117.                                 'type'          => 'template',
  118.                                 'template_id'   => 'screen_options_toggle',
  119.                                 'lockable'      => true
  120.                             ),
  121.                
  122.                         array( 
  123.                                 'type'          => 'template',
  124.                                 'template_id'   => 'developer_options_toggle',
  125.                                 'args'          => array( 'sc' => $this )
  126.                             ),
  127.                
  128.                     array(
  129.                             'type'  => 'toggle_container_close',
  130.                             'nodescription' => true
  131.                         ),
  132.                
  133.                 array(
  134.                         'type'  => 'tab_close',
  135.                         'nodescription' => true
  136.                     ),
  137.                
  138.                 array( 
  139.                         'type'          => 'template',
  140.                         'template_id'   => 'element_template_selection_tab',
  141.                         'args'          => array( 'sc'  => $this )
  142.                     ),
  143.  
  144.                 array(
  145.                         'type'  => 'tab_container_close',
  146.                         'nodescription' => true
  147.                     )
  148.                    
  149.                        
  150.                 );
  151.  
  152.         }
  153.  
  154.         /**
  155.          * Create and register templates for easier maintainance
  156.          *
  157.          * @since 4.6.4
  158.          */
  159.         protected function register_dynamic_templates()
  160.         {
  161.            
  162.             /**
  163.              * Content Tab
  164.              * ===========
  165.              */
  166.            
  167.             $c = array(
  168.                         array(
  169.                             'name'  => __( 'Button Label', 'avia_framework' ),
  170.                             'desc'  => __( 'This is the text that appears on your button.', 'avia_framework' ),
  171.                             'id'    => 'label',
  172.                             'type'  => 'input',
  173.                             'std'   => __( 'Click me', 'avia_framework' ),
  174.                             'lockable'  => true
  175.                         ),
  176.                
  177.                         array(
  178.                             'name'  => __( 'Show Button Icon', 'avia_framework' ),
  179.                             'desc'  => __( 'Should an icon be displayed at the left or right side of the button', 'avia_framework' ),
  180.                             'id'    => 'icon_select',
  181.                             'type'  => 'select',
  182.                             'std'   => 'yes',
  183.                             'lockable'  => true,
  184.                             'subtype'   => array(
  185.                                                 __( 'No Icon', 'avia_framework' )                   => 'no',
  186.                                                 __( 'Display icon to the left', 'avia_framework' )  => 'yes' , 
  187.                                                 __( 'Display icon to the right', 'avia_framework' ) => 'yes-right-icon',
  188.                                             )
  189.                         ),
  190.                
  191.                         array( 
  192.                             'name'  => __( 'Button Icon', 'avia_framework' ),
  193.                             'desc'  => __( 'Select an icon for your Button below', 'avia_framework' ),
  194.                             'id'    => 'icon',
  195.                             'type'  => 'iconfont',
  196.                             'std'   => '',
  197.                             'lockable'  => true,
  198.                             'locked'    => array( 'icon', 'font' ),
  199.                             'required'  => array( 'icon_select', 'not_empty_and', 'no' )
  200.                             ),
  201.                
  202.                         array( 
  203.                             'name'  => __( 'Icon Visibility', 'avia_framework' ),
  204.                             'desc'  => __( 'Check to only display icon on hover', 'avia_framework' ),
  205.                             'id'    => 'icon_hover',
  206.                             'type'  => 'checkbox',
  207.                             'std'   => '',
  208.                             'lockable'  => true,
  209.                             'required'  => array( 'icon_select', 'not_empty_and', 'no' )
  210.                         )
  211.                
  212.                 );
  213.            
  214.             $template = array(
  215.                             array( 
  216.                                 'type'          => 'template',
  217.                                 'template_id'   => 'toggle',
  218.                                 'title'         => __( 'Button', 'avia_framework' ),
  219.                                 'content'       => $c
  220.                             ),
  221.                     );
  222.            
  223.            
  224.             AviaPopupTemplates()->register_dynamic_template( $this->popup_key( 'content_button' ), $template );
  225.            
  226.             $c = array(
  227.                         array( 
  228.                             'type'          => 'template',
  229.                             'template_id'   => 'linkpicker_toggle',
  230.                             'name'          => __( 'Button Link?', 'avia_framework' ),
  231.                             'desc'          => __( 'Where should your button link to?', 'avia_framework' ),
  232.                             'subtypes'      => array( 'manually', 'single', 'taxonomy' ),
  233.                             'target_id'     => 'link_target',
  234.                             'lockable'      => true
  235.                         ),
  236.    
  237.                 );
  238.            
  239.             AviaPopupTemplates()->register_dynamic_template( $this->popup_key( 'content_link' ), $c );
  240.            
  241.             /**
  242.              * Styling Tab
  243.              * ===========
  244.              */
  245.            
  246.             $c = array(
  247.                         array( 
  248.                             'name'  => __( 'Button Size', 'avia_framework' ),
  249.                             'desc'  => __( 'Choose the size of your button here.', 'avia_framework' ),
  250.                             'id'    => 'size',
  251.                             'type'  => 'select',
  252.                             'std'   => 'small',
  253.                             'lockable'  => true,
  254.                             'subtype'   => array(
  255.                                                 __( 'Small', 'avia_framework' )     => 'small',
  256.                                                 __( 'Medium', 'avia_framework' )    => 'medium',
  257.                                                 __( 'Large', 'avia_framework' )     => 'large',
  258.                                                 __( 'X Large', 'avia_framework' )   => 'x-large'
  259.                                             )
  260.                         ),
  261.                            
  262.                         array( 
  263.                             'name'  => __( 'Button Position', 'avia_framework' ),
  264.                             'desc'  => __( 'Choose the alignment of your button here', 'avia_framework' ),
  265.                             'id'    => 'position',
  266.                             'type'  => 'select',
  267.                             'std'   => 'center',
  268.                             'lockable'  => true,
  269.                             'subtype'   => array(
  270.                                                 __( 'Align Left', 'avia_framework' )    => 'left',
  271.                                                 __( 'Align Center', 'avia_framework' )  => 'center',
  272.                                                 __( 'Align Right', 'avia_framework' )   => 'right',
  273.                                             ),
  274.                             'required'  => array( 'size', 'not', 'fullwidth' )
  275.                         ),
  276.                
  277.                         array( 
  278.                             'name'  => __( 'Button Label Display', 'avia_framework' ),
  279.                             'desc'  => __( 'Select how to display the label', 'avia_framework' ),
  280.                             'id'    => 'label_display',
  281.                             'type'  => 'select',
  282.                             'std'   => '',
  283.                             'lockable'  => true,
  284.                             'subtype'   => array(
  285.                                                 __( 'Always display', 'avia_framework' )    => '', 
  286.                                                 __( 'Display on hover', 'avia_framework' )  => 'av-button-label-on-hover',
  287.                                             )
  288.                         ),
  289.                    
  290.                         array( 
  291.                             'name'      => __( 'Button Title Attribute', 'avia_framework' ),
  292.                             'desc'      => __( 'Add a title attribute for this button.', 'avia_framework' ),
  293.                             'id'        => 'title_attr',
  294.                             'type'      => 'input',
  295.                             'std'       => '',
  296.                             'required'  => array( 'label_display', 'equals', '' )
  297.                         ),
  298.                    
  299.                
  300.                 );
  301.            
  302.             $template = array(
  303.                             array( 
  304.                                 'type'          => 'template',
  305.                                 'template_id'   => 'toggle',
  306.                                 'title'         => __( 'Appearance', 'avia_framework' ),
  307.                                 'content'       => $c
  308.                             ),
  309.                     );
  310.            
  311.             AviaPopupTemplates()->register_dynamic_template( $this->popup_key( 'styling_appearance' ), $template );
  312.            
  313.             $c = array(
  314.                
  315.                         array( 
  316.                             'name'  => __( 'Button Colors Selection', 'avia_framework' ),
  317.                             'desc'  => __( 'Select the available options for button colors. Switching to advanced options for already existing buttons you need to set all options (color settings from basic options are ignored).', 'avia_framework' ),
  318.                             'id'    => 'color_options',
  319.                             'type'  => 'select',
  320.                             'std'   => '',
  321.                             'lockable'  => true,
  322.                             'subtype'   => array(
  323.                                                 __( 'Basic options only', 'avia_framework' )    => '', 
  324.                                                 __( 'Advanced options', 'avia_framework' )      => 'color_options_advanced',
  325.                                             )
  326.                         ),
  327.                
  328.                         array( 
  329.                             'type'          => 'template',
  330.                             'template_id'   => 'named_colors',
  331.                             'custom'        => true,
  332.                             'lockable'      => true,
  333.                             'required'      => array( 'color_options', 'equals', '' )
  334.                         ),
  335.                
  336.                         array( 
  337.                             'name'  => __( 'Custom Background Color', 'avia_framework' ),
  338.                             'desc'  => __( 'Select a custom background color for your button here', 'avia_framework' ),
  339.                             'id'    => 'custom_bg',
  340.                             'type'  => 'colorpicker',
  341.                             'std'   => '#444444',
  342.                             'lockable'  => true,
  343.                             'required'  => array( 'color', 'equals', 'custom' )
  344.                         ), 
  345.                        
  346.                         array(
  347.                             'name'  => __( 'Custom Font Color', 'avia_framework' ),
  348.                             'desc'  => __( 'Select a custom font color for your button here', 'avia_framework' ),
  349.                             'id'    => 'custom_font',
  350.                             'type'  => 'colorpicker',
  351.                             'std'   => '#ffffff',
  352.                             'lockable'  => true,
  353.                             'required'  => array( 'color', 'equals', 'custom')
  354.                         ),
  355.                
  356.                         array( 
  357.                             'type'          => 'template',
  358.                             'template_id'   => 'button_colors',
  359.                             'color_id'      => 'btn_color',
  360.                             'custom_id'     => 'btn_custom',
  361.                             'lockable'      => true,
  362.                             'required'      => array( 'color_options', 'not', '' )
  363.                         )
  364.                
  365.                 );
  366.            
  367.             $template = array(
  368.                             array( 
  369.                                 'type'          => 'template',
  370.                                 'template_id'   => 'toggle',
  371.                                 'title'         => __( 'Colors', 'avia_framework' ),
  372.                                 'content'       => $c
  373.                             ),
  374.                     );
  375.            
  376.             AviaPopupTemplates()->register_dynamic_template( $this->popup_key( 'styling_colors' ), $template );
  377.            
  378.         }
  379.  
  380.  
  381.         /**
  382.          * Editor Element - this function defines the visual appearance of an element on the AviaBuilder Canvas
  383.          * Most common usage is to define some markup in the $params['innerHtml'] which is then inserted into the drag and drop container
  384.          * Less often used: $params['data'] to add data attributes, $params['class'] to modify the className
  385.          *
  386.          *
  387.          * @param array $params         this array holds the default values for $content and $args.
  388.          * @return array                the return array usually holds an innerHtml key that holds item specific markup.
  389.          */
  390.         function editor_element( $params )
  391.         {
  392.             /**
  393.              * Fix a bug in 4.7 and 4.7.1 renaming option id (no longer backwards comp.) - can be removed in a future version again
  394.              */
  395.             if( isset( $params['args']['linktarget'] ) )
  396.             {
  397.                 $params['args']['link_target'] = $params['args']['linktarget'];
  398.             }
  399.            
  400.             $default = array();
  401.             $locked = array();
  402.             $attr = $params['args'];
  403.             Avia_Element_Templates()->set_locked_attributes( $attr, $this, $this->config['shortcode'], $default, $locked );
  404.            
  405.             extract( av_backend_icon( array( 'args' => $attr ) ) ); // creates $font and $display_char if the icon was passed as param 'icon' and the font as 'font'
  406.  
  407.             $inner  = "<div class='avia_button_box avia_hidden_bg_box avia_textblock avia_textblock_style' data-update_element_template='yes'>";
  408.             $inner .=       '<div ' . $this->class_by_arguments_lockable( 'icon_select, color, size, position', $attr, $locked ) . '>';
  409.             $inner .=           '<span ' . $this->class_by_arguments_lockable( 'font', $font, $locked ) . '>';
  410.             $inner .=               '<span ' . $this->update_option_lockable( array( 'icon', 'icon_fakeArg' ), $locked ) . " class='avia_button_icon avia_button_icon_left'>{$display_char}</span>";
  411.             $inner .=           '</span> ';
  412.             $inner .=           '<span ' . $this->update_option_lockable( 'label', $locked ) . " class='avia_iconbox_title' >{$attr['label']}</span> ";
  413.             $inner .=           '<span ' . $this->class_by_arguments_lockable( 'font', $font, $locked ) . '>';
  414.             $inner .=               '<span ' . $this->update_option_lockable( array( 'icon', 'icon_fakeArg' ), $locked ) . " class='avia_button_icon avia_button_icon_right'>{$display_char}</span>";
  415.             $inner .=           '</span>';
  416.             $inner .=       '</div>';
  417.             $inner .= '</div>';
  418.  
  419.             $params['innerHtml'] = $inner;
  420.             $params['content'] = null;
  421.             $params['class'] = '';
  422.  
  423.             return $params;
  424.         }
  425.  
  426.         /**
  427.          * Frontend Shortcode Handler
  428.          *
  429.          * @param array $atts array of attributes
  430.          * @param string $content text within enclosing form of shortcode element
  431.          * @param string $shortcodename the shortcode found, when == callback name
  432.          * @return string $output returns the modified html string
  433.          */
  434.         function shortcode_handler( $atts, $content = '', $shortcodename = '', $meta = '' )
  435.         {
  436.             /**
  437.              * Fix a bug in 4.7 and 4.7.1 renaming option id (no longer backwards comp.) - can be removed in a future version again
  438.              */
  439.             if( isset( $atts['linktarget'] ) )
  440.             {
  441.                 $atts['link_target'] = $atts['linktarget'];
  442.             }
  443.            
  444.             $default = array(
  445.                         'label'         => 'Click me',
  446.                         'link'          => '',
  447.                         'link_target'   => '',
  448.                         'color'         => 'theme-color',
  449.                         'custom_bg'     => '#444444',
  450.                         'custom_font'   => '#ffffff',
  451.                         'size'          => 'small',
  452.                         'position'      => 'center',
  453.                         'icon_select'   => 'yes',
  454.                         'icon'          => '',
  455.                         'font'          => '',
  456.                         'icon_hover'    => '',
  457.                         'label_display' => '',
  458.                         'title_attr'    => '',
  459.  
  460.                         'color_options'         => '',      //  added 4.7.5.1
  461.                         'btn_color_bg'          => 'theme-color',          
  462.                         'btn_color_bg_hover'    => 'theme-color',
  463.                         'btn_color_font'        => 'custom',
  464.                         'btn_custom_bg'         => '#444444',
  465.                         'btn_custom_bg_hover'   => '#444444',
  466.                         'btn_custom_font'       => '#ffffff',
  467. //                      'btn_color_font_hover'  => '#ffffff',
  468. //                      'btn_custom_font_hover' => '#ffffff'
  469.  
  470.                     );
  471.            
  472.             $locked = array();
  473.             Avia_Element_Templates()->set_locked_attributes( $atts, $this, $shortcodename, $default, $locked, $content );
  474.             Avia_Element_Templates()->add_template_class( $meta, $atts, $default );
  475.  
  476.             $aria_label = ! empty( $atts['aria_label'] ) ? " aria-label='{$atts['aria_label']}' " : ''; // added
  477.            
  478.             extract( AviaHelper::av_mobile_sizes( $atts, $default ) ); //return $av_font_classes, $av_title_font_classes and $av_display_classes
  479.  
  480.             $atts = shortcode_atts( $default, $atts, $this->config['shortcode'] );
  481.            
  482.             if( $atts['icon_select'] == 'yes' )
  483.             {
  484.                 $atts['icon_select'] = 'yes-left-icon';
  485.             }
  486.  
  487.             $style = '';
  488.             $style_hover = '';
  489.             $data = '';
  490.             $background_hover = '';
  491.            
  492.             $display_char = av_icon( $atts['icon'], $atts['font'] );
  493.             $extraClass = $atts['icon_hover'] ? 'av-icon-on-hover' : '';
  494.            
  495.             if( '' == $atts['color_options'] )
  496.             {
  497.                 if( $atts['color'] == 'custom' )
  498.                 {
  499.                     $style .= AviaHelper::style_string( $atts, 'custom_bg', 'background-color' );
  500.                     $style .= AviaHelper::style_string( $atts, 'custom_bg', 'border-color' );
  501.                     $style .= AviaHelper::style_string( $atts, 'custom_font', 'color' );
  502.                 }
  503.                 else
  504.                 {
  505.                     $extraClass .= ' ' . $this->class_by_arguments( 'color', $atts, true );
  506.                 }
  507.             }
  508.             else        //  color_options_advanced - added 4.7.5.1
  509.             {
  510.                 if( 'custom' == $atts['btn_color_bg'] )
  511.                 {
  512.                     $style .= AviaHelper::style_string( $atts, 'btn_custom_bg', 'background-color' );
  513.                     $style .= AviaHelper::style_string( $atts, 'btn_custom_bg', 'border-color' );
  514.                 }
  515.                 else
  516.                 {
  517.                     $extraClass .= ' avia-color-' . $atts['btn_color_bg'] . ' ';
  518.                 }
  519.                
  520.                 if( 'custom' == $atts['btn_color_font'] )
  521.                 {
  522.                     $style .= AviaHelper::style_string( $atts, 'btn_custom_font', 'color' );
  523.                 }
  524.                 else
  525.                 {
  526.                     $extraClass .= ' avia-font-color-' . $atts['btn_color_font'];
  527.                 }
  528.                
  529.                 if( 'custom' == $atts['btn_color_bg_hover'] )
  530.                 {
  531.                     $style_hover = "style='background-color:{$atts['btn_custom_bg_hover']};'";
  532.                 }
  533.                
  534.                 $background_hover = "<span class='avia_button_background avia-button avia-color-" . $atts['btn_color_bg_hover'] . "' {$style_hover}></span>";
  535.             }
  536.            
  537.             $style = AviaHelper::style_string( $style );
  538.            
  539.             if( ! empty( $atts['label_display'] ) && $atts['label_display'] == 'av-button-label-on-hover' )
  540.             {
  541.                 $extraClass .= ' av-button-label-on-hover ';
  542.                 $data = 'data-avia-tooltip="' . htmlspecialchars( $atts['label'] ) . '"';
  543.                 $atts['label'] = '';
  544.             }
  545.  
  546.             if( empty( $atts['label'] ) )
  547.             {
  548.                 $extraClass .= ' av-button-notext ';
  549.             }
  550.  
  551.             $blank = AviaHelper::get_link_target( $atts['link_target'] );
  552.             $link = AviaHelper::get_url( $atts['link'] );
  553.             $link = ( ( $link == 'http://' ) || ( $link == 'manually' ) ) ? '' : $link;
  554.  
  555.             $title_attr = ! empty( $atts['title_attr'] ) && empty( $atts['label_display'] ) ? 'title="' . esc_attr( $atts['title_attr'] ) . '"' : '';
  556.  
  557.             $content_html = '';
  558.            
  559.             if( 'yes-left-icon' == $atts['icon_select'] )
  560.             {
  561.                 $content_html .= "<span class='avia_button_icon avia_button_icon_left ' {$display_char}></span>";
  562.             }
  563.            
  564.             $content_html .= "<span class='avia_iconbox_title' >{$atts['label']}</span>";
  565.            
  566.             if( 'yes-right-icon' == $atts['icon_select'] )
  567.             {
  568.                 $content_html .= "<span class='avia_button_icon avia_button_icon_right' {$display_char}></span>";
  569.             }
  570.  
  571.             $output  = '';
  572.             $output .=  "<a href='{$link}' {$data} class='avia-button {$extraClass} {$av_display_classes} " . $this->class_by_arguments( 'icon_select, size, position', $atts, true ) . "' {$blank} {$style} {$aria_label}>"; // tweaked
  573.             $output .=      $content_html;
  574.             $output .=      $background_hover;
  575.             $output .=  '</a>';
  576.  
  577.             $output =  "<div {$meta['custom_el_id']} class='avia-button-wrap avia-button-{$atts['position']} {$meta['el_class']}' {$title_attr}>{$output}</div>";
  578.  
  579.             return $output;
  580.         }
  581.            
  582.     }
  583. }
  584.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement