public static function createUploaderScript() { if (!self::$firstLoad) { return; } self::$firstLoad = false; ?> <script> jQuery(document).ready(function($){ "use strict"; $('.tf-upload .thumbnail').find('img').parent().addClass('has-value').find(':before').css({'opacity':'0'}); function tfUploadOptionCenterImage($this) { var _preview = $this.parents('.tf-upload').find('.thumbnail'); $this.css({ 'marginTop': ( _preview.height() - $this.height() ) / 2, 'marginLeft': ( _preview.width() - $this.width() ) / 2 }).show(); } // Calculate display offset of preview image on load. $('.tf-upload .thumbnail img').load(function() { tfUploadOptionCenterImage($(this)); }).each(function(){ // Sometimes the load event might not trigger due to cache. if(this.complete) { $(this).trigger('load'); }; }); // In the theme customizer, the load event above doesn't work because of the accordion, // the image's height & width are detected as 0. We bind to the opening of an accordion // and adjust the image placement from there. var tfUploadAccordionSections = []; $('.tf-upload').each(function() { var $accordion = $(this).parents('.control-section.accordion-section'); if ( $accordion.length > 0 ) { if ( $.inArray( $accordion, tfUploadAccordionSections ) == -1 ) { tfUploadAccordionSections.push($accordion); } } }); $.each( tfUploadAccordionSections, function() { var $title = $(this).find('.accordion-section-title:eq(0)'); // Just opening the section. $title.click(function() { var $accordion = $(this).parents('.control-section.accordion-section'); if ( ! $accordion.is('.open') ) { $accordion.find('.tf-upload .thumbnail img').each(function() { var $this = $(this); setTimeout(function() { tfUploadOptionCenterImage($this); }, 1); }); } }); }); // Remove the image when the remove link is clicked. $('body').on('click', '.tf-upload i.remove', function(event) { event.preventDefault(); var _input = $(this).parents('.tf-upload').find('input'); var _preview = $(this).parents('.tf-upload').find('div.thumbnail'); _preview.removeClass('has-value').find('img').remove().end().find('i').remove(); _input.val('').trigger('change'); return false; }); // Open the upload media lightbox when the upload button is clicked. $('body').on('click', '.tf-upload .thumbnail, .tf-upload img', function(event) { event.preventDefault(); // If we have a smaller image, users can click on the thumbnail. if ( $(this).is('.thumbnail') ) { if ( $(this).parents('.tf-upload').find('img').length != 0 ) { $(this).parents('.tf-upload').find('img').trigger('click'); return true; } } var _input = $(this).parents('.tf-upload').find('input'); var _preview = $(this).parents('.tf-upload').find('div.thumbnail'); var _remove = $(this).siblings('.tf-upload-image-remove'); // Uploader frame properties. var frame = wp.media({ title: '<?php esc_html_e('Select Image', TF_I18NDOMAIN); ?> ', multiple: false, library: { type: 'image' }, button : { text : '<?php esc_html_e('Use image', TF_I18NDOMAIN); ?> ' } }); // Get the url when done. frame.on('select', function() { var selection = frame.state().get('selection'); selection.each(function(attachment) { // if ( typeof attachment.attributes.sizes === 'undefined' ) { // return; // } if ( _input.length > 0 ) { _input.val(attachment.id); } if ( _preview.length > 0 ) { // remove current preview if ( _preview.find('img').length > 0 ) { _preview.find('img').remove(); } if ( _preview.find('i.remove').length > 0 ) { _preview.find('i.remove').remove(); } // Get the preview image. if ( typeof attachment.attributes.sizes != 'undefined' ) { var image = attachment.attributes.sizes.full; if ( typeof attachment.attributes.sizes.thumbnail != 'undefined' ) { image = attachment.attributes.sizes.thumbnail; } var url = image.url; var marginTop = ( _preview.height() - image.height ) / 2; var marginLeft = ( _preview.width() - image.width ) / 2; var filename = ''; } else { var url = attachment.attributes.url; var marginTop = ( _preview.height() - 64 ) / 2; var marginLeft = ( _preview.width() - 48 ) / 2; var filename = attachment.attributes.filename; } $("<img src='" + url + "'/>").appendTo(_preview); $("<i class='dashicons dashicons-no-alt remove'></i>").prependTo(_preview); } // We need to trigger a change so that WP would detect that we changed the value. // Or else the save button won't be enabled. _input.trigger('change'); _remove.show(); $('.tf-upload .thumbnail').find('img').parent().addClass('has-value').find(':before').css({'opacity':'0'}); }); frame.off('select'); }); // Open the uploader. frame.open(); return false; }); }); </script> <?php }
public static function createUploaderScript() { if (!self::$firstLoad) { return; } self::$firstLoad = false; ?> <script> jQuery(document).ready(function($){ "use strict"; // open the upload media when the image is clicked $('body').on('click', '.tf-theme-customizer.thumbnail img, .tf-image-preview.thumbnail img', function(event) { event.preventDefault(); $(this).parent().siblings('p').find('button.tf-upload-image, button.tf-upload-image').trigger('click'); $(this).parent().siblings('button.tf-upload-image').trigger('click'); }); // remove the image when the remove link is clicked $('.tf-upload-image-remove').click(function(event) { event.preventDefault(); var _input = $(this).siblings('input[type="text"]'); if ( _input.length == 0 ) { // be careful with this since different placements of the input may render this invalid _input = $(this).parent().siblings('input[type="text"]'); } var _preview = $(this).siblings('div.thumbnail'); if ( _preview.length == 0 ) { _preview = $(this).parent().siblings('div.thumbnail'); } _input.val(''); _preview.html(''); // we need to trigger a change so that WP would detect that we changed the value // or else the save button won't be enabled _input.trigger('change'); $(this).hide(); return false; }); // open the upload media lightbox when the upload button is clicked $('button.tf-upload-image').click(function(event) { event.preventDefault(); var _input = $(this).siblings('input[type="text"]'); if ( _input.length == 0 ) { // be careful with this since different placements of the input may render this invalid _input = $(this).parent().siblings('input[type="text"]'); } var _preview = $(this).siblings('div.thumbnail'); if ( _preview.length == 0 ) { _preview = $(this).parent().siblings('div.thumbnail'); } var _remove = $(this).siblings('.tf-upload-image-remove'); // uploader frame properties var frame = wp.media({ title: "Select Image", multiple: false, library: { type: 'image' }, button : { text : 'Use image' } }); // get the url when done frame.on('select', function() { var selection = frame.state().get('selection'); selection.each(function(attachment) { if ( _input.length > 0 ) { _input.val(attachment.attributes.url); } if ( _preview.length > 0 ) { _preview.html("<img src='" + attachment.attributes.url + "'/>") // _preview.html("<img src='" + attachment.attributes.sizes.thumbnail.url + "'/>") } // we need to trigger a change so that WP would detect that we changed the value // or else the save button won't be enabled _input.trigger('change'); _remove.show(); }); frame.off('select'); }); // open the uploader frame.open(); return false; }); }); </script> <?php }