function RemoveAction(parent){this.parent=parent;this.removeButton=jQuery('');this.removeButton.attr('class','removeIcon');this.removeButton.append(jQuery('x'));this.removeButton.on('click',function(event){event.preventDefault();var item=jQuery(this).parent(),root=item.closest('.customize-control-multi-image'),input=root.find('input.multi-images-control-input'),urls=[];item.remove();jQuery(root).find('.thumbnail').each(function(index,el){urls.push(jQuery(this).data('src'))});input.val(urls.reverse()).trigger('change');input.trigger('updateThumbnails',{urls:urls})});this.parent.append(this.removeButton)} function MultiImageControl(root){this.root=root;this.store=root.find('input.multi-images-control-input');this.uploadButtton=root.find('.multi-images-upload');this.removeButton=root.find('.multi-images-remove');this.thumbnails=root.find('ul.thumbnails');this.start=function(){this.uploadButtton.on('click',function(evt){var file_frame,store=jQuery(this).closest('.customize-control-multi-image').find('input.multi-images-control-input');evt.preventDefault();if(file_frame){file_frame.open();return} file_frame=wp.media.frames.file_frame=wp.media({title:jQuery(this).data('uploader_title'),button:jQuery(this).data('uploader_button_text'),multiple:!0,library:{type:'image'}});file_frame.on('select',function(evt){var selected=file_frame.state().get('selection').toJSON(),urls=[];for(var i=selected.length-1;i>=0;i--){urls.push(selected[i].url)} store.val(urls).trigger('change');store.trigger('updateThumbnails',{urls:urls})});file_frame.open()});this.removeButton.on('click',function(evt){var root,thumbnails,store,selected,urls=[];root=jQuery(this).closest('.customize-control-multi-image');thumbnails=root.find('.thumbnails');store=root.find('input.multi-images-control-input');evt.preventDefault();selected=thumbnails.find('.thumbnail.selected');if(selected.length===0){urls=''}else{thumbnails.find('.thumbnail:not(.selected)').each(function(){urls.push(jQuery(this).data('src'))})} store.val(urls).trigger('change');store.trigger('updateThumbnails',{urls:urls})});this.removeButton.on('updateLabelAndVisibility',function(evt){var button,thumbnails,thumbs,selected,count;button=jQuery(this);thumbnails=button.closest('.customize-control-multi-image').find('.thumbnails');thumbs=thumbnails.find('.thumbnail');if(thumbs.length===0){button.hide();return} button.show();selected=thumbnails.find('.thumbnail.selected');count=selected.length;if(count===0){button.text('Remove all images')}else if(count===1){button.text('Remove the image')}else if(count>=2){button.text('Remove '+count+' images')}});this.store.on('updateThumbnails',function(evt,args){var root,thumbnails,urls=args.urls;root=jQuery(this).closest('.customize-control-multi-image');thumbnails=root.find('.thumbnails');thumbnails.empty();for(var i=urls.length-1;i>=0;i--){var li=jQuery('
  • ');li.attr('style','background-image:url('+urls[i]+');');li.attr('class','thumbnail');li.attr('data-src',urls[i]);thumbnails.append(li)} root.find('.multi-images-remove').trigger('updateLabelAndVisibility')});this.thumbnails.sortable({items:'> li',axis:'y',opacity:0.6,distance:3,cursor:'move',delay:150,tolerance:'pointer',update:function(evt,ui){var t=jQuery(this),urls=[],input;jQuery(t.find('li')).each(function(){var li=jQuery(this);urls.push(li.data('src'));li.removeClass('no-list')});input=t.closest('.customize-control-multi-image').find('input.multi-images-control-input');input.val(urls).trigger('change');t.sortable('refreshPositions')},start:function(evt,ui){var thumbnails=jQuery(this);thumbnails.find('li').each(function(){jQuery(this).addClass('no-list')});thumbnails.closest('.customize-control-multi-image').find('.multi-images-remove').trigger('updateLabelAndVisibility')}}).disableSelection();jQuery('.customize-control-multi-image .thumbnails').on('click','.thumbnail',function(){var li=jQuery(this),removeButton=li.closest('.customize-control-multi-image').find('.multi-images-remove').first();li.toggleClass('selected');if(li.hasClass('selected')){new RemoveAction(li)}else{li.empty()} removeButton.trigger('updateLabelAndVisibility')});this.removeButton.trigger('updateLabelAndVisibility')}} jQuery(document).ready(function($){"use strict";$(".customize-control-multi-image").each(function(){new MultiImageControl($(this)).start()})})