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
}