(function($){ $(document).ajaxComplete(function(){ setItemsPositions(); }); $(document).ready(function(){ setItemsPositions(); // add image(s) $('body').on('click', '.media-input', function(e){ e.preventDefault(); media_input_btn = $(this); var selectionResult = {}; // load IDs added before var ids = (media_input_btn.next('input').val()) ? JSON.parse(media_input_btn.next('input').val()) : []; var image = wp.media({ title: amadeo_wi_l10n.add_images, multiple: true }).open() .on('select', function(e){ var selection = image.state().get('selection'); selection.map(function(attachment){ attachment = attachment.toJSON(); var index = ids.indexOf(parseInt(attachment.id)); if(index == -1){ selectionResult[attachment.id] = { 'id' : attachment.id, 'url' : attachment.url, 'alt' : attachment.alt, 'title' : attachment.title }; ids.push(attachment.id); } }); // add IDs of selected images media_input_btn.siblings('input.ids').val(JSON.stringify(ids)); // set id and name instance for ajax request instanceData = { 'id' : media_input_btn.siblings('input.instance-id').val(), 'name' : media_input_btn.siblings('input.instance-name').val() }; // render new fields for selected images amadeoImageWidgetAJAX(selectionResult, media_input_btn.closest('.widget-content').find('.amadeo-widget-image'), instanceData); }); }); // delete image $('body').on('click', '.image-preview .remove-btn', function(e){ media_remove_btn = $(this); idsInput = media_remove_btn.parents('.widget-content').find('.ids-input-container input'); var ids = (idsInput.val()) ? JSON.parse(idsInput.val()) : []; var index = ids.indexOf(parseInt(media_remove_btn.attr('attr-remove-id'))); if(index > -1){ ids.splice(index, 1); } idsInput.val(JSON.stringify(ids)); media_remove_btn.parent('.image-preview').remove(); }); }); function amadeoImageWidgetAJAX(imageData, receiver, instanceData){ $.ajax({ url : amadeo_wi_l10n.ajax_url, type : 'post', data : { action : 'amadeoImageWidgetAJAX', imageData : imageData, instanceData : instanceData }, success : function(response){ receiver.html(receiver.html() + response); } }); } function setItemsPositions(){ $('.amadeo-widget-image').sortable({ placeholder : "ui-state-highlight", update : function(){ positions = []; $(this).find('.ui-state-default').each(function(){ positions.push(parseInt($(this).attr('data-id'))); }); $(this).closest('.widget-content').find('input.ids').val(JSON.stringify(positions)); } }); $('.amadeo-widget-image').disableSelection(); } })(jQuery);