multi-image-control.js (4601B)
1 (function (root, CP_Customizer) { 2 3 var itemTemplate = _.template( 4 '<div class="cp-multi-image-item attachment-media-view attachment-media-view-image ">' + 5 ' <div class="thumbnail thumbnail-image">' + 6 ' <img id="<%= id %>-thumb" class="attachment-thumb" src="<%= value %>" draggable="false" alt=""> ' + 7 ' </div>' + 8 ' <div class="actions">' + 9 ' <input type="hidden" value="<%= value %>" id="<%= id %>" />' + 10 ' <span title="<%= cpMultiImageTexts.changeTitle %>" class="open-right section-icon" onClick=\'CP_Customizer.openMediaBrowser("image", jQuery("#<%= id %>"))\'></span>' + 11 ' <% if(showRemove){ %>' + 12 ' <span data-action="remove" title="<%= cpMultiImageTexts.deleteTitle %>" class="item-remove"></span>' + 13 ' <% } %>' + 14 ' </div>' + 15 ' <script>' + 16 ' jQuery("#<%= id %>").change(function(){' + 17 ' jQuery(\'#<%= id %>-thumb\').attr(\'src\',this.value);' + 18 ' });' + 19 ' </script>' + 20 '</div>' 21 ); 22 23 function getManagerData($manager) { 24 return $manager.find('input[type="hidden"]').map(function () { 25 return this.value 26 }).toArray(); 27 } 28 29 30 function setManagerData($manager, data) { 31 $manager.empty(); 32 33 for (var i = 0; i < data.length; i++) { 34 $manager.append( 35 itemTemplate({ 36 "id": _.uniqueId("cp-multi-image-item-"), 37 "value": data[i], 38 "showRemove": data.length > parseInt($manager.data().min) 39 }) 40 ); 41 } 42 43 if ($manager.data().max < 0 || $manager.data().max > data.length) { 44 $manager.append('' + 45 '<div class="add-new-container">' + 46 ' <button type="button" data-action="add-new-item" class="button upload-button control-focus" >' + cpMultiImageTexts.addImage + '</button> ' + 47 '</div>'); 48 } 49 50 51 } 52 53 function getManager($item) { 54 $item = jQuery($item); 55 if ($item.is('[data-type="cp-multi-image-manager"]')) { 56 return $item; 57 } else { 58 return $item.closest('[data-type="cp-multi-image-manager"]'); 59 } 60 } 61 62 63 jQuery(document).ready(function ($) { 64 $(document).on('change', '[data-type="cp-multi-image-manager"] input[type="hidden"]', function () { 65 var $manager = getManager(this); 66 var setting = $manager.attr('data-customize-setting-link'); 67 root.CP_Customizer.setMod(setting, getManagerData($manager)); 68 }); 69 $(document).on('click', '[data-type="cp-multi-image-manager"] [data-action="add-new-item"]', function () { 70 var $manager = getManager(this); 71 var setting = _.clone($manager.attr('data-customize-setting-link')); 72 var data = wp.customize(setting).get(); 73 data.push(''); 74 setManagerData($manager, data); 75 root.CP_Customizer.setMod(setting, data); 76 }); 77 78 $(document).on('click', '[data-type="cp-multi-image-manager"] [data-action="remove"]', function () { 79 var $manager = getManager(this); 80 var setting = $manager.attr('data-customize-setting-link'); 81 var data = _.clone(wp.customize(setting).get()); 82 var index = $(this).closest('.attachment-media-view').index(); 83 data.splice(index, 1); 84 setManagerData($manager, data); 85 root.CP_Customizer.setMod(setting, data); 86 }); 87 88 }); 89 90 CP_Customizer.bind(CP_Customizer.events.PREVIEW_LOADED, function () { 91 jQuery('[data-type="cp-multi-image-manager"]').each(function () { 92 var $manager = getManager(this); 93 var setting = $manager.attr('data-customize-setting-link'); 94 wp.customize(setting).bind(function (data) { 95 setManagerData($manager, data); 96 }); 97 98 var data = wp.customize(setting).get(); 99 100 if (!data || !data.length) { 101 data = ["", ""]; 102 } else { 103 if (data.length === 1) { 104 data.push(""); 105 } 106 } 107 108 setManagerData($manager, data); 109 }); 110 }); 111 })(window, window.CP_Customizer);