/* global jQuery, soWidgets */
( function( $ ) {
$(document).on( 'sowsetupformfield', '.siteorigin-widget-field-type-media', function(e) {
var $field = $( this );
var $media = $field.find('> .media-field-wrapper');
var $inputField = $field.find( '.siteorigin-widget-input' ).not('.media-fallback-external');
var $externalField = $field.find( '.media-fallback-external' );
if ( $media.data( 'initialized' ) ) {
return;
}
// Handle the media uploader
$media.find( '.media-upload-button' ).on( 'click', function( e ) {
e.preventDefault();
if( typeof wp.media === 'undefined' ) {
return;
}
var $$ = $(this);
var frame = $(this ).data('frame');
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return false;
}
// Create the media frame.
frame = wp.media( {
// Set the title of the modal.
title: $$.data('choose'),
// Tell the modal to show only images.
library: {
type: $$.data('library').split(',').map(function(v){ return v.trim(); })
},
// Customize the submit button.
button: {
// Set the text of the button.
text: $$.data('update'),
// Tell the button not to close the modal, since we're
// going to refresh the page when the image is selected.
close: false
}
} );
// If there's a selected image, highlight it.
frame.on( 'open', function() {
var selection = frame.state().get( 'selection' );
var selectedImage = $field.find( '.siteorigin-widget-input[type="hidden"]' ).val();
if ( selectedImage ) {
selection.add( wp.media.attachment( selectedImage ) );
}
} );
// Store the frame
$$.data('frame', frame);
// When an image is selected, run a callback.
frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = frame.state().get('selection').first().attributes;
$field.find('.current .thumbnail' ).attr( 'title', attachment.title );
$field.find('.current .title' ).html( attachment.title );
$inputField.val(attachment.id);
$inputField.trigger( 'change', { silent: true } );
var $thumbnail = $field.find( '.current .thumbnail' );
if(typeof attachment.sizes !== 'undefined'){
if(typeof attachment.sizes.thumbnail !== 'undefined'){
$thumbnail.attr('src', attachment.sizes.thumbnail.url).fadeIn();
}
else {
$thumbnail.attr('src', attachment.sizes.full.url).fadeIn();
}
}
else{
$thumbnail.attr('src', attachment.icon).fadeIn();
}
$field.find('.media-remove-button').removeClass('remove-hide').attr( 'tabindex', 0 );
frame.close();
} );
// Finally, open the modal.
frame.open();
});
$field.find( 'a.media-remove-button' )
.on( 'click', function( e ) {
e.preventDefault();
$inputField.val('');
$field.find('.current .title' ).empty();
$inputField.trigger( 'change', { silent: true } );
$field.find('.current .thumbnail' ).fadeOut('fast');
$(this).addClass( 'remove-hide' ).attr( 'tabindex', -1 );
} );
// Everything for the dialog
var dialog;
var reflowDialog = function() {
if( ! dialog ) return;
var results = dialog.find('.so-widgets-image-results');
if( results.length === 0 ) return;
var width = results.width(),
perRow = Math.floor( width / 276 ),
spare = ( width - perRow * 276 ),
resultWidth = spare / perRow + 260;
results.find( '.so-widgets-result-image' ).css( {
'width' : resultWidth + 'px',
'height' : resultWidth / 1.4 + 'px',
} );
};
$( window ).on( 'resize', reflowDialog );
var setupDialog = function(){
if( ! dialog ) {
// Create the dialog
dialog = $( $('#so-widgets-bundle-tpl-image-search-dialog').html().trim() ).appendTo( 'body' );
dialog.find( '.close' ).on( 'click keyup', function( e ) {
if ( e.type == 'keyup' && ! window.sowbForms.isEnter( e ) ) {
return;
}
dialog.hide();
} );
var results = dialog.find( '.so-widgets-image-results' );
var fetchImages = function( query, page ){
dialog.find( '.so-widgets-results-loading' ).fadeIn('fast');
dialog.find( '.so-widgets-results-loading strong' ).html(
dialog.find( '.so-widgets-results-loading strong' ).data( 'loading' )
);
dialog.find( '.so-widgets-results-more' ).hide();
$.get(
ajaxurl,
{
'action' : 'so_widgets_image_search',
'q' : query,
'page' : page,
'_sononce' : dialog.find('input[name="_sononce"]').val()
},
function( response ){
if( response.error ) {
alert( response.message );
return;
}
results.removeClass( 'so-loading' );
$.each( response.items, function( i, r ){
var result = $( $('#so-widgets-bundle-tpl-image-search-result').html().trim() )
.appendTo( results )
.addClass( 'source-' + r.source );
var img = result.find('.so-widgets-result-image');
// Preload the image
img.css( 'background-image', 'url(' + r.thumbnail + ')' );
img.data( 'thumbnail', r.thumbnail );
img.data( 'preview', r.preview );
if( r.url ) {
img.attr( {
'href': r.url,
'target': '_blank'
} );
}
if( r.full_url ) {
img.data( {
'full_url' : r.full_url,
'import_signature' : r.import_signature
} );
img.attr( 'href', r.full_url );
}
if( r.source === 'shutterstock' ) {
img.append( $('#so-widgets-bundle-tpl-image-search-result-sponsored').html() );
}
} );
if( page === 1 ) {
dialog.find('#so-widgets-image-search-suggestions ul').empty();
$.each( response.keywords, function( i, r ){
dialog.find('#so-widgets-image-search-suggestions').show();
dialog.find('#so-widgets-image-search-suggestions ul').append(
$('<li></li>') . append( $('<a href="#"></a>').html( r ).data( 'keyword', r ) )
);
} );
}
dialog.find( '.so-widgets-results-loading' ).fadeOut('fast');
reflowDialog();
dialog
.find( '.so-widgets-results-more' ).show()
.find( 'button' ).data( { 'query': query, 'page' : page+1 } );
}
);
};
// Setup the search
dialog.find( '#so-widgets-image-search-form' ).on( 'submit', function( e ) {
e.preventDefault();
// Perform the search
var q = dialog.find('.so-widgets-search-input').val();
results.empty();
if( q !== '' ) {
// Send the query to the server
fetchImages( q, 1 );
}
} );
// Clicking on the related search buttons
dialog.on( 'click', '.so-keywords-list a', function( e ) {
e.preventDefault();
var $$ = $( this ).trigger( 'blur' );
dialog.find('.so-widgets-search-input').val( $$.data( 'keyword' ) );
dialog.find( '#so-widgets-image-search-form' ).trigger( 'submit' );
} );
// Clicking on the more button
dialog.find( '.so-widgets-results-more button' ).on( 'click', function() {
var $$ = $(this);
fetchImages( $$.data( 'query' ), $$.data( 'page' ) );
} );
var hoverTimeout;
// Clicking on an image to import it
dialog.on( 'click', '.so-widgets-result-image', function( e ){
var $$ = $(this);
if( ! $$.data( 'full_url' ) ) {
return;
}
e.preventDefault();
if( confirm( dialog.data('confirm-import') ) ) {
dialog.addClass( 'so-widgets-importing' );
var postId = $( '#post_ID' ).val();
if( postId === null ) {
postId = '';
}
// Send the message to import the URL
$.get(
ajaxurl,
{
'action' : 'so_widgets_image_import',
'full_url' : $$.data( 'full_url' ),
'import_signature' : $$.data( 'import_signature' ),
'post_id' : postId,
'_sononce' : dialog.find('input[name="_sononce"]').val()
},
function( response ) {
dialog.find('#so-widgets-image-search-frame').removeClass( 'so-widgets-importing' );
if( response.error === false ) {
// This was a success
dialog.hide();
dialog.find( '.so-widgets-results-loading' ).hide();
$inputField.val( response.attachment_id ).trigger('change', { silent: true } );
$field.find('.current .thumbnail' ).attr('src', response.thumb ).fadeIn();
$field.find( '.media-remove-button' ).removeClass( 'remove-hide' ).attr( 'tabindex', 0 );
}
else {
alert( response.message );
dialog.find( '.so-widgets-results-loading' ).hide();
}
}
);
// Clear the dialog
dialog.find( '.so-widgets-results-loading' ).fadeIn('fast');
dialog.find( '.so-widgets-results-loading strong' ).html(
dialog.find( '.so-widgets-results-loading strong' ).data( 'importing' )
);
dialog.find( '.so-widgets-results-more' ).hide();
dialog.find('#so-widgets-image-search-frame').addClass( 'so-widgets-importing' );
}
} );
// Hovering over an image to preview it
var previewWindow = dialog.find('.so-widgets-preview-window');
dialog
.on( 'mouseenter', '.so-widgets-result-image', function(){
var $$ = $(this),
preview = $$.data('preview');
clearTimeout( hoverTimeout );
hoverTimeout = setTimeout( function(){
// Scale the preview sizes
var scalePreviewX = 1, scalePreviewY = 1;
if( preview[1] > $( window ).outerWidth() *0.33 ) {
scalePreviewX = $( window ).outerWidth() *0.33 / preview[1];
}
if( preview[2] > $( window ).outerHeight() *0.5 ) {
scalePreviewY = $( window ).outerHeight() *0.5 / preview[2];
}
var scalePreview = Math.min( scalePreviewX, scalePreviewY );
// Never upscale
if( scalePreview > 1 ) {
scalePreview = 1;
}
previewWindow.show()
.find('.so-widgets-preview-window-inside')
.css( {
'background-image' : 'url(' + $$.data('thumbnail') + ')',
'width' : preview[1] * scalePreview + 'px',
'height' : preview[2] * scalePreview + 'px',
} )
.append( $( '<img />' ).attr( 'src', preview[0] ) );
dialog.trigger('mousemove');
}, 1000 );
} )
.on( 'mouseleave', '.so-widgets-result-image', function(){
previewWindow.hide().find('img').remove();
clearTimeout( hoverTimeout );
} );
var lastX, lastY;
dialog.on( 'mousemove', function( e ){
if( e.clientX ) lastX = e.clientX;
if( e.clientY ) lastY = e.clientY;
if( previewWindow.is( ':visible' ) ) {
var ph = previewWindow.outerHeight(),
pw = previewWindow.outerWidth(),
wh = $( window ).outerHeight(),
ww = $( window ).outerWidth();
// Calculate the top position
var top = lastY - ph/2;
top = Math.max( top, 10 );
top = Math.min( top, wh - 10 - ph );
// Calculate the left position
var left = (lastX < ww/2) ? lastX + 15 : lastX - 15 - pw;
// Figure out where the preview needs to go
previewWindow.css({
'top': top + 'px',
'left': left + 'px',
});
}
} );
}
dialog.show();
dialog.find( '.so-widgets-search-input' ).trigger( 'focus' );
};
// Handle displaying the image search dialog
$media.find( '.find-image-button' ).on( 'click', function( e ) {
e.preventDefault();
setupDialog();
} );
$inputField.on( 'change', function( event, data ) {
if ( ! ( data && data.silent ) ) {
var newVal = $inputField.val();
if ( newVal) {
var $thumbnail = $field.find( '.current .thumbnail' );
var attachment = wp.media.attachment( newVal );
attachment.fetch().done( function () {
if ( attachment.has( 'sizes' ) ) {
var sizes = attachment.get( 'sizes' );
if ( typeof sizes.thumbnail !== 'undefined' ) {
$thumbnail.attr( 'src', sizes.thumbnail.url ).fadeIn();
}
else {
$thumbnail.attr( 'src', sizes.full.url ).fadeIn();
}
}
else {
$thumbnail.attr( 'src', attachment.get('icon') ).fadeIn();
}
$field.find( '.media-remove-button' ).removeClass( 'remove-hide' ).attr( 'tabindex', 0 );
} );
} else {
$field.find( 'a.media-remove-button' ).trigger( 'click' );
}
}
if ( typeof data == 'undefined' || ! data.external ) {
$externalField.trigger( 'change', { internal: true } );
}
} );
// Ensure both state both the media field and external field are kept up to date.
$externalField.on( 'change', function( event, data ) {
if (
// Prevent direct input on external triggering the internal field.
! $( event.currentTarget ).hasClass( 'media-fallback-external' ) &&
(
typeof data == 'undefined' || ! data.internal
)
) {
$inputField.trigger( 'change', { external: true } );
}
} );
$media.data( 'initialized', true );
});
} )( jQuery );