After making the control a little more interactive I will go on to make the user experience (venturing into deep mud here) a little more comfortable: I’d like theme users accessing the theme customization panel and using the multiple images control to be able to sort the selected/uploaded images in a click and drag fashion. The code is on GitHub for both the control, its script and the accompanying styles can be found on GitHub.
Making the images sortable
Relying on jQuery UI sortable interaction I will queue the plugin in the MultiImageControl::enqueue method among the control script requirements
public function enqueue()
{
wp_enqueue_media();
$jsPath = TADLIBS_ASSETS_URL . '/js/multi-image.js';
wp_enqueue_script('mutli-image-control', Script::suffix($jsPath), array('jquery', 'jquery-ui-sortable'));
$cssPath = TADLIBS_ASSETS_URL . '/css/multi-image.css';
wp_enqueue_style('mutli-image-control', Script::suffix($cssPath));
}
and will then call the sortable method in the script to activate the interaction
// make the images sortable
jQuery('.customize-control-multi-image .thumbnails').sortable({
items: '> li',
axis: 'y',
opacity: 0.6,
distance: 3,
cursor: 'move',
delay: 150,
tolerance: 'pointer',
update: function(evt, ui) {
var t = $(this),
urls = [],
input;
jQuery(t.find('li')).each(function() {
urls.push($(this).data('src'));
});
input = $(t.data('store'));
input.val(urls).trigger('change');
t.sortable('refreshPositions');
}
}).disableSelection();
Aside for some settings, found in the sortable API documentation, I will use the update function to fetch the new list of urls, store it into the hidden input value attribute, and trigger the change to allow the theme user to save his/her changes to the image order.
Gotchas
The sorting effect was very slow and un-responsive at first and my finding was, using Chrome Developer Tools, that the CSS box-shadow property was the responsible. I’ve removed it and it now works way better.
Next iteration
I, as a user, expect to be able to cherry pick the images to be removed from the list and will add the function next.