How to call custom jQuery plugins into the customizer controls

Question

I never tried to use the theme customizer, somehow I don't find that thing good. But recently I tried it, and stuck into this matter.

I extended the Class WP_Customize_Control to made my own <select multiple="multiple"> control, and it's working fine.

Now I want to trigger the select2 jQuery plugin to that particular control so that I can assure good UX using the field.

But I failed. :(

<?php
function wpse20170307_customize_preview_js() {
    wp_enqueue_style( 'select2', get_template_directory_uri() .'/libs/select2/select2.min.css', array(), '4.0.3', 'all' );
    wp_register_script( 'select2', get_template_directory_uri() .'/libs/select2/select2.min.js', array( 'customize-preview' ), '4.0.3', true );

    wp_enqueue_script( 'my_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview', 'select2' ), '1.0.0', true );
}

add_action( 'customize_preview_init', 'wpse20170307_customize_preview_js' );

This action hook isn't enqueuing the necessary plugin scripts or styles either. So putting code like:

$('.customize-control-multiple-select select').addClass('some');

isn't working at all.

I tried enqueuing select2 using wp_enqueue_scripts and using to put the above code into customizer.js, but I failed again.

With the customizer called, using the "View Page Source", I found no such select2 things anywhere, but the select2 is properly enqueued with wp_enqueue_scripts in the main site.

Is there any way or how can I do so?

Update - 2017-03-12

With the help of Weston Ruter, I managed to become close to a solution. Here's what I got so far:

public $type = 'multiple_select';

And enqueued a JS file like below:

wp_enqueue_script( 'project-customizer-inject', get_template_directory_uri() . '/assets/js/project-customizer-inject.js', array( 'customize-controls', 'select2' ), '1.0.0', true );

And in this file:

// Set up select2 control in this.container...
console.log(control);
control.id = id;
console.log(id); // id is not defined
//control.select2(); // function select2 not found
//id.select2(); // not working, as id is not set

console.log(control); returned:

Issue is, I'm not that good at JavaScripts. So, I cannot get through the object I got with controls. And select2 plugin cannot be found within that ready: function() {}.

Answer 1

First, in order to enqueue JS in the customizer controls, you need to use the customize_controls_enqueue_scripts action. This is different than the action used to enqueue scripts into the customizer preview, which is what themes normally do via customize_preview_init or wp_enqueue_scripts. So in your snippet above, replace customize_preview_init with customize_controls_enqueue_scripts.

Secondly, in order to extend a control in the customizer you need to wait for the control to be initialized. Controls may be added and removed dynamically in the course of a customizer session, so you cannot just query the DOM once the page is ready. Your custom control should implement a corresponding JS wp.customize.Control subclass that is responsible for setting up Select2. For example, if you have:

class My_Select2_Control extends WP_Customize_Control {
    public $type = 'my_select2';
    /* ... */
}

Then you should have a JS file that also contains:

wp.customize.controlConstructor.my_select2 = wp.customize.Control.extend( {
    ready: function() {
        var control = this;
        wp.customize.Control.prototype.ready.call( control );
        // Set up select2 control in this.container...
    }
} );

Enqueue this file at customize_controls_enqueue_scripts with customize-controls and select2 as its script dependencies.