aristath/kirki

<?php
/**
 * Customizer Control: sortable.
 *
 * @package   kirki-framework/control-sortable
 * @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
 * @license   https://opensource.org/licenses/MIT
 * @since     1.0
 */

namespace Kirki\Control;

use Kirki\URL;
use Kirki\Control\Base;

/**
 * Sortable control (uses checkboxes).
 */
class Sortable extends Base {

    /**
     * The control type.
     *
     * @access public
     * @since 1.0
     * @var string
     */
    public $type = 'kirki-sortable';

    /**
     * The version. Used in scripts & styles for cache-busting.
     *
     * @static
     * @access public
     * @since 1.0
     * @var string
     */
    public static $control_ver = '1.0';

    /**
     * Enqueue control related scripts/styles.
     *
     * @access public
     * @since 1.0
     * @return void
     */
    public function enqueue() {
        parent::enqueue();

        // Enqueue the script.
        wp_enqueue_script( 'kirki-control-sortable', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base' ], self::$control_ver, false );

        // Enqueue the style.
        wp_enqueue_style( 'kirki-control-sortable-style', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.css' ), [], self::$control_ver );
    }

    /**
     * An Underscore (JS) template for this control's content (but not its container).
     *
     * Class variables for this control class are available in the `data` JS object;
     * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
     *
     * @see WP_Customize_Control::print_template()
     *
     * @access protected
     * @since 1.0
     * @return void
     */
    protected function content_template() {
        ?>
        <label class='kirki-sortable'>
            <span class="customize-control-title">
                {{{ data.label }}}
            </span>
            <# if ( data.description ) { #>
                <span class="description customize-control-description">{{{ data.description }}}</span>
            <# } #>

            <ul class="sortable">
                <# _.each( data.value, function( choiceID ) { #>
                    <# if ( data.choices[ choiceID ] ) { #>
                        <li {{{ data.inputAttrs }}} class='kirki-sortable-item' data-value='{{ choiceID }}'>
                            <i class='dashicons dashicons-menu'></i>
                            <i class="dashicons dashicons-visibility visibility"></i>
                            {{{ data.choices[ choiceID ] }}}
                        </li>
                    <# } #>
                <# }); #>
                <# _.each( data.choices, function( choiceLabel, choiceID ) { #>
                    <# if ( -1 === data.value.indexOf( choiceID ) ) { #>
                        <li {{{ data.inputAttrs }}} class='kirki-sortable-item invisible' data-value='{{ choiceID }}'>
                            <i class='dashicons dashicons-menu'></i>
                            <i class="dashicons dashicons-visibility visibility"></i>
                            {{{ data.choices[ choiceID ] }}}
                        </li>
                    <# } #>
                <# }); #>
            </ul>
        </label>
        <?php
    }
}