Skip to:
Content

BuddyPress.org

Ticket #7226: 7226-06.patch

File 7226-06.patch, 9.6 KB (added by hnla, 3 years ago)

Updates for BP_Button class, new element type, improved data attr parsing and rendering.

  • src/bp-core/classes/class-bp-button.php

     
    3333 *                                          Default: ''.
    3434 *     @type string      $wrapper_class     Optional. DOM class of the button wrapper
    3535 *                                          element. Default: ''.
     36 *     @type string      $li_class          Optional: Available if $wrapper set to ul & li elements created
     37 *                                          Default: ''.
     38 *     @type string      $element           Optional. The type of element to use e.g 'anchor', 'button', 'input'
     39 *                                          Default: 'anchor'.
     40 *     @type string      $element_type      Optional. Set the button type i.e like input types
     41 *                                          Defaults to 'button' [type="button"] can be 'submit' [type="submit"]
     42 *     @type string      $name              Button/input 'name' value - if type == 'submit' || 'reset.
     43 *     @type string      $value             Button/input 'value' value - if type == 'submit' || 'reset'.
    3644 *     @type string      $link_href         Optional. Destination link of the button.
    3745 *                                          Default: ''.
     46 *     @type string      $data_attr         Optional. Allow data attributtes to be set. e.g 'data-bp-buttons=""'
     47 *                                          Takes an array of key/value pairs to allow for multiple attrs.
     48 *                                          Default: ''.
    3849 *     @type string      $link_class        Optional. DOM class of the button. Default: ''.
    3950 *     @type string      $link_id           Optional. DOM ID of the button. Default: ''.
    4051 *     @type string      $link_rel          Optional. DOM 'rel' attribute of the button.
     
    8293        /**
    8394         * The type of DOM element to use for a wrapper.
    8495         *
    85          * @var string|bool 'div', 'span', 'p', 'li', or false for no wrapper.
     96         * @var string|bool 'div', 'li',  'p', 'span' or false for no wrapper.
    8697         */
    8798        public $wrapper = 'div';
    8899
     
    100111         */
    101112        public $wrapper_id = '';
    102113
     114        /**
     115         * The DOM class of li child elements the wrapper as a ul.
     116         *
     117         * @var string
     118         */
     119
     120        public $li_class = '';
     121
    103122        /** Button ****************************************************************/
    104123
    105124        /**
     125        * The node element type type i.e. a true '<button>', '<a>' or '<input />':
     126        * 'button', 'anchor', 'input'
     127        *
     128        * @var string
     129        */
     130        public $element = 'anchor';
     131
     132        /**
     133        * The button/input elements type i.e. 'submit', 'button', 'reset'.
     134        *
     135        *
     136        * @var string
     137        */
     138        public $element_type = 'button';
     139
     140        /**
     141        * The button/input elements name attr i.e. 'name=""'.
     142        *
     143        *
     144        * @var string
     145        */
     146        public $name = '';
     147
     148        /**
     149        * The button/input elements value attr i.e. 'value=""'.
     150        *
     151        *
     152        * @var string
     153        */
     154        public $value = '';
     155
     156
     157        /**
    106158         * The destination link of the button.
    107159         *
    108160         * @var string
     
    138190        public $link_title = '';
    139191
    140192        /**
     193         * Data attributes.
     194                * Takes an array of key/value pairs to loop over.
     195         *
     196         * @var array
     197         */
     198        public $data_attr = '';
     199
     200        /**
    141201         * The contents of the button link.
    142202         *
    143203         * @var string
     
    164224                $r = wp_parse_args( $args, get_class_vars( __CLASS__ ) );
    165225
    166226                // Required button properties.
    167                 $this->id                = $r['id'];
     227                $this->id                = esc_attr( $r['id'] );
    168228                $this->component         = $r['component'];
    169229                $this->must_be_logged_in = (bool) $r['must_be_logged_in'];
    170230                $this->block_self        = (bool) $r['block_self'];
    171                 $this->wrapper           = $r['wrapper'];
     231                $this->wrapper           = esc_attr( $r['wrapper'] ) ;
    172232
    173233                // $id and $component are required
    174234                if ( empty( $r['id'] ) || empty( $r['component'] ) )
     
    202262                // Wrapper properties.
    203263                if ( false !== $this->wrapper ) {
    204264
     265                /**
     266                        * Currently BP does not provide for a wrapping group element, templates
     267                        * would need to provide the  parent wrapper in the template if li
     268                        * specified as wrapper.
     269                        */
     270
     271                /**
     272                        * If 'li' is set for $wrapper we'll create
     273                        * & add class tokens if args not empty.
     274                        */
     275                        if( 'li' == $this->wrapper ) {
     276                                if( !empty( $r['li_class'] ) ) $this->li_class = ' class="' . esc_attr( $r['li_class'] ) . '"';
     277                        }
     278
    205279                        // Wrapper ID.
    206280                        if ( !empty( $r['wrapper_id'] ) ) {
    207                                 $this->wrapper_id    = ' id="' . $r['wrapper_id'] . '"';
     281                                $this->wrapper_id  = ' id="' . esc_attr( $r['wrapper_id'] ) . '"';
    208282                        }
    209283
    210284                        // Wrapper class.
    211                         if ( !empty( $r['wrapper_class'] ) ) {
    212                                 $this->wrapper_class = ' class="generic-button ' . $r['wrapper_class'] . '"';
     285                        if ( !empty( $r['wrapper_class'] ) && 'li' !== $this->wrapper ) {
     286                                $this->wrapper_class = ' class="generic-button ' . esc_attr( $r['wrapper_class'] ) . '"';
     287                        } elseif( 'li' == $this->wrapper ) {
     288                                                if( !empty( $r['li_class'] ) ) $this->wrapper_class = ' class="generic-button ' . esc_attr( $r['li_class'] ) . '"';
    213289                        } else {
    214290                                $this->wrapper_class = ' class="generic-button"';
    215291                        }
    216292
    217293                        // Set before and after.
    218                         $before = '<' . $r['wrapper'] . $this->wrapper_class . $this->wrapper_id . '>';
    219                         $after  = '</' . $r['wrapper'] . '>';
     294                        // Include 'li' elements if wrapper = 'ul'
     295                        $before = '<'  . $this->wrapper . $this->wrapper_class . $this->wrapper_id . '>';
     296                        $after  = '</' . $this->wrapper . '>';
    220297
    221298                // No wrapper.
    222299                } else {
     
    223300                        $before = $after = '';
    224301                }
    225302
    226                 // Link properties.
    227                 if ( !empty( $r['link_id']    ) ) $this->link_id    = ' id="' .    $r['link_id']    . '"';
    228                 if ( !empty( $r['link_href']  ) ) $this->link_href  = ' href="' .  $r['link_href']  . '"';
    229                 if ( !empty( $r['link_title'] ) ) $this->link_title = ' title="' . $r['link_title'] . '"';
    230                 if ( !empty( $r['link_rel']   ) ) $this->link_rel   = ' rel="' .   $r['link_rel']   . '"';
    231                 if ( !empty( $r['link_class'] ) ) $this->link_class = ' class="' . $r['link_class'] . '"';
    232                 if ( !empty( $r['link_text']  ) ) $this->link_text  =              $r['link_text'];
     303                // Link/Button/input  attributes.
     304                //if ( !empty( $r['element']    ) ) $this->element    =
     305                if ( 'button' == $r['element'] || 'input' == $r['element'] ) {
     306                        if ( !empty( $r['element_type'] ) ) $this->element_type = ' type="' . esc_attr( $r['element_type'] ) . '"';
     307                        if( 'submit' == $r['element_type'] || 'reset' == $r['element_type'] ) {
     308                                if ( !empty( $r['name']  ) ) $this->name  = ' name="'  . esc_attr( $r['name'] )  . '"';
     309                                if ( !empty( $r['value'] ) ) $this->value = ' value="' . esc_attr( $r['value'] ) . '"';
     310                        }
     311                }
    233312
     313                if ( !empty( $r['link_id']    ) ) $this->link_id    = ' id="'    .   esc_attr( $r['link_id'] )   . '"';
     314                // No href if we're a button please!
     315                if ( !empty( $r['link_href']  ) ) $this->link_href  = ' href="'  .   esc_url(  $r['link_href'] )  . '"';
     316                if ( !empty( $r['link_title'] ) ) $this->link_title = ' title="' .   esc_attr( $r['link_title'] ) . '"';
     317                if ( !empty( $r['link_rel']   ) ) $this->link_rel   = ' rel="'   .   esc_attr( $r['link_rel'] )   . '"';
     318                if ( !empty( $r['link_class'] ) ) $this->link_class = ' class="' .   esc_attr( $r['link_class'] ) . '"';
     319                if ( !empty( $r['link_text']  ) && 'input' !== $r['element'] ) $this->link_text  = esc_html( $r['link_text'] );
     320
     321                /**
     322                * Build data attr to display
     323                * loop over $r['data_attr'] & build as many data-foo="bar" instances as array pairs found
     324                */
     325
     326                if ( !empty( $r['data_attr'] ) ) {
     327
     328                        $data_attr = $r['data_attr'];
     329                        foreach ($data_attr as $key => $value) {
     330                        $this->data_attr .= 'data-' . sanitize_key( $key ) . '="' . esc_attr( $value ) . '"';
     331                        }
     332
     333                } else {
     334                        $this->data_attr = '';
     335                }
     336
     337                // The wrapper element
     338
     339                // The element tag: e.g '<a', '<button'
     340
     341                if ( 'button' == $r['element'] || 'input' == $r['element'] ) {
     342
     343                        // If the element type is submit we'll build the button/input form controls attr here
     344                        if( 'submit' == $r['element_type'] ) {
     345                                $element_controls = $this->name . $this->value ;
     346                        } else {
     347                                $element_controls = '';
     348                        }
     349
     350                        if ( 'button' == $r['element'] ){
     351                                        $before_element = '<button ' . $this->element_type . $element_controls;
     352                                        $after_element  = '</button>';
     353                        } elseif( 'input' == $r['element'] ) {
     354                                        $before_element = '<input ' . $this->element_type . $element_controls;
     355                                        $after_element  = '';
     356                        }
     357
     358
     359                } else {
     360                        $before_element = '<a ' . $this->link_href;
     361                        $after_element  = '</a>';
     362                }
     363
    234364                // Build the button.
    235                 $this->contents = $before . '<a'. $this->link_href . $this->link_title . $this->link_id . $this->link_rel . $this->link_class . '>' . $this->link_text . '</a>' . $after;
     365                // attr here can be applicable/common to anchors or button elements
     366                $this->contents = $before . $before_element . $this->link_title . $this->link_id . $this->link_rel . $this->data_attr . $this->link_class . '>' . $this->link_text . $after_element . $after;
    236367
    237368                /**
    238369                 * Filters the button based on class parameters.
     
    246377                 * @param BP_Button $this     Current BP_Button instance.
    247378                 * @param string    $before   HTML appended before the actual button.
    248379                 * @param string    $after    HTML appended after the actual button.
     380                 * @param string    $before_element  Actual items opening element.
     381                 * @param string    $after_element   Actual items closing element  .
    249382                 */
    250                 $this->contents = apply_filters( 'bp_button_' . $this->component . '_' . $this->id, $this->contents, $this, $before, $after );
     383                $this->contents = apply_filters( 'bp_button_' . $this->component . '_' . $this->id, $this->contents, $this, $before, $after, $before_element, $after_element );
    251384        }
    252385
    253386        /**