File elements/tablist.php

  1   2   3   4   5   6   7   8   9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31  32  33  34  35  36  37  38  39  40  41  42  43  44  45  46  47  48  49  50  51  52  53  54  55  56  57  58  59  60  61  62  63  64  65  66  67  68  69  70  71  72  73  74  75  76  77  78  79  80  81  82  83  84  85  86  87  88  89  90  91  92  93  94  95  96  97  98  99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

<?php

namespace SIW\Elements;

use SIW\HTML;

/**
 * Class om een tablist te genereren
 * 
 * @copyright 2019 SIW Internationale Vrijwilligersprojecten
 * @since     3.0.0
 * 
 * @see       https://github.com/AcceDe-Web/tablist
 */
class Tablist {
    
    /**
     * Versienummer
     * 
     * @var string
     */
    const TABLIST_VERSION = '2.0.1';

    /**
     * Panes
     *
     * @var array
     */
    protected $panes=[];

    /**
     * Init
     */
    public function __construct() {
        $this->enqueue_styles();
        $this->enqueue_scripts();
    }

    /**
     * Voegt scripts toe
     */
    protected function enqueue_scripts() {
        wp_register_script( 'a11y-tablist', SIW_ASSETS_URL . 'modules/tablist/tablist.js', [], self::TABLIST_VERSION, true );
        wp_register_script( 'siw-tablist', SIW_ASSETS_URL . 'js/elements/siw-tablist.js', ['a11y-tablist'], SIW_PLUGIN_VERSION, true );
        wp_enqueue_script( 'siw-tablist');
    }

    /**
     * Voegt styles toe
     */
    protected function enqueue_styles() {
        wp_register_style( 'siw-tablist', SIW_ASSETS_URL . 'css/elements/siw-tablist.css', [], SIW_PLUGIN_VERSION );
        wp_enqueue_style( 'siw-tablist' );
    }

    /**
     * Genereert tablist
     *
     * @return string
     */
    public function generate() {
        $attributes = [
            'id'    => uniqid( 'siw-tablist-' ),
            'class' => ['siw-tablist'],
        ];
        return HTML::generate_tag( 'div', $attributes ) . $this->generate_panes() . '</div>' ;
    } 

    /**
     * Genereert panes voor tablist
     *
     * @return string
     * 
     * @todo generate_tag/generate_list gebruiken
     */
    protected function generate_panes() {
        $list = '<ul role="tablist">';
        $content = '';
        foreach ( $this->panes as $pane ) {
            $id = uniqid();

            if ( isset( $pane['show_button'] ) && true == $pane['show_button'] ) {
                $pane['content'] .= wpautop( HTML::generate_link( $pane['button_url'], $pane['button_text'], [ 'class' => 'kad-btn' ] ) );
            }

            $list .= sprintf( '<li role="tab" aria-controls="tab-%s">%s</li>', $id, $pane['title'] );
            $content .= sprintf( '<div role="tabpanel" id="tab-%s">%s</div>', $id, $pane['content'] );
        }

        $list .= '</ul>';

        return $list . $content;
    }

    /**
     * Voegt pane aan tablist toe
     *
     * @param string $title
     * @param string $content
     * @param bool $show_button
     * @param string $button_url
     * @param string $button_text
     */
    public function add_pane( string $title, string $content, bool $show_button = false, string $button_url = null, string $button_text = null ) {
        
        //Afbreken als content geen zichtbare inhoud bevat
        if ( 0 === strlen( trim( $content ) ) ) {
            return;
        }

        $this->panes[] = [
            'title'       => $title,
            'content'     => $content,
            'show_button' => $show_button,
            'button_url'  => $button_url,
            'button_text' => $button_text,
        ];
    }
}

Namespaces

Classes

Functions