(function($){
$scope = {};
AstraImageCommon = {
images: {},
image: {},
action: '',
offset: 0,
loadingStatus: true,
config: {
q : '',
lang : 'en',
image_type : 'all',
orientation : 'all',
category : '',
min_width : 0,
min_height : 0,
colors : '',
editors_choice : false,
safesearch : true,
order : 'popular',
page : $( 'body' ).data( 'page' ),
per_page : 30,
callback : '',
pretty : true
},
canSave: false,
infiniteLoad: false,
uploader: {},
file: {},
frame: {},
isPreview: false,
apiStatus: true,
id : '',
isValidating: false,
scopeSet: false,
init: function() {
this._bind();
},
/**
* Binds events for the Astra Sites.
*
* @since 1.0.0
* @access private
* @method _bind
*/
_bind: function() {
// Triggers.
$( document ).on( "ast-image__refresh", AstraImageCommon._initImages );
$( document ).on( "ast-image__set-scope", AstraImageCommon._setScope );
$( document ).on( "click", ".ast-image__list-img-overlay", AstraImageCommon._preview );
$( document ).on( "click", ".ast-image__go-back-text", AstraImageCommon._goBack );
$( document ).on( "click", ".ast-image__save", AstraImageCommon._save );
$( document ).on( "click", ".ast-image__filter-safesearch input", AstraImageCommon._filter );
$( document ).on( "change", ".ast-image__filter select", AstraImageCommon._filter );
$( document ).on( "click", ".ast-image__edit-api", AstraImageCommon._editAPI );
$( document ).on( "click", ".ast-image__browse-images", AstraImageCommon._browse );
$( document ).on( "click", ".ast-image__download-icon", AstraImageCommon._saveFromScreen );
},
_saveFromScreen: function() {
let saveIcon = $(this);
let source = saveIcon.closest('.ast-image__list-img-overlay');
saveIcon.addClass( 'installing' );
AstraImageCommon.image = {
'largeImageURL': source.data( 'img-url' ),
'tags' : source.find( 'span:first-child' ).html(),
'id' : source.data( 'img-id' ),
};
AstraImageCommon._saveAjax( function ( data ) {
if ( undefined == data.data ) {
return;
}
astraImages.saved_images = data.data['updated-saved-images'];
wp.media.view.AstraAttachmentsBrowser.object.photoUploadComplete( data.data );
saveIcon.text( 'Done' );
saveIcon.removeClass( 'installing' );
AstraImageCommon._empty();
} );
},
_browse: function() {
$scope.find( '.ast-image__search' ).trigger( 'keyup' );
},
_editAPI: function( event ) {
event.stopPropagation();
wp.media.view.AstraAttachmentsBrowser.images = [];
$scope.find( '.ast-image__loader-wrap' ).show();
$scope.find( '.ast-image__skeleton' ).html( '' );
$scope.find( '.ast-image__skeleton' ).attr( 'style', '' );
$scope.find( '.ast-image__search' ).trigger( 'keyup' );
$scope.find( '.ast-image__loader-wrap' ).hide();
},
_filter: function() {
let safesearch = $scope.find( '.ast-image__filter-safesearch input:checked' ).length ? true : false;
let category = $scope.find( '.ast-image__filter-category select' ).val();
let orientation = $scope.find( '.ast-image__filter-orientation select' ).val();
let order = $scope.find( '.ast-image__filter-order select' ).val();
AstraImageCommon.config.safesearch = safesearch;
AstraImageCommon.config.orientation = orientation;
AstraImageCommon.config.category = category;
AstraImageCommon.config.order = order;
$scope.find( '.ast-image__search' ).trigger( 'keyup' );
$scope.find( '.ast-image__loader-wrap' ).show();
},
_save: function() {
if ( ! AstraImageCommon.canSave ) {
return;
}
let thisBtn = $( this )
if ( thisBtn.data( 'import-status' ) ) {
return;
}
thisBtn.removeClass( 'updating-message' );
thisBtn.text( astraImages.downloading );
thisBtn.addClass( 'installing' );
AstraImageCommon.canSave = false;
AstraImageCommon._saveAjax( function ( data ) {
if ( undefined == data.data ) {
return;
}
astraImages.saved_images = data.data['updated-saved-images'];
wp.media.view.AstraAttachmentsBrowser.object.photoUploadComplete( data.data );
thisBtn.text( 'Done' );
thisBtn.removeClass( 'installing' );
AstraImageCommon._empty();
} );
},
_saveAjax: function( callback ) {
// Work with JSON page here
$.ajax({
url: astraImages.ajaxurl,
type: 'POST',
dataType: 'json',
data: {
'action' : 'astra-sites-create-image',
'url' : AstraImageCommon.image.largeImageURL,
'name' : AstraImageCommon.image.tags,
'id' : AstraImageCommon.image.id,
'_ajax_nonce' : astraImages._ajax_nonce,
},
})
.fail(function( jqXHR ){
console.log( jqXHR );
})
.done( callback );
},
_empty: function() {
AstraImageCommon.image = {};
AstraImageCommon.canSave = false;
AstraImageCommon.uploader = {};
AstraImageCommon.file = {};
AstraImageCommon.isPreview = false;
},
_goBack: function() {
AstraImageCommon._empty();
$( document ).trigger( 'ast-image__refresh' );
$scope.find( '.ast-image__skeleton' ).show();
$scope.removeClass( 'preview-mode' );
$scope.find( '.ast-attachments-search-wrap' ).children().show();
$scope.find( '.ast-image__go-back' ).remove();
$scope.find( '.ast-image__save-wrap' ).remove();
$scope.find( '.ast-image__preview-skeleton' ).hide();
$scope.find( '.ast-image__preview-skeleton' ).html( '' );
let wrapHeight = ( AstraImageCommon.offset - 210 );
$scope.find( '.ast-image__skeleton-inner-wrap' ).css( 'height', wrapHeight );
},
_preview: function(event) {
if( event && event.target.classList.contains( 'ast-image__download-icon' ) ) {
return;
}
AstraImageCommon.isPreview = true;
let height = ( AstraImageCommon.offset - 190 );
$scope.find( '.ast-image__skeleton-inner-wrap' ).css( 'height', height );
setTimeout( function() {
$scope.find( '.ast-image__loader-wrap' ).hide();
}, 200 );
AstraImageCommon.image = {
'largeImageURL': $( this ).data( 'img-url' ),
'tags' : $( this ).find( 'span:first-child' ).html(),
'id' : $( this ).data( 'img-id' ),
};
let preview = wp.template( 'ast-image-single' );
let single_html = preview( AstraImageCommon.image );
let save_btn = wp.template( 'ast-image-save' );
let single_btn = save_btn( AstraImageCommon.image );
let wrapHeight = $scope.find( '.ast-image__skeleton-inner-wrap' ).outerHeight();
wrapHeight = ( wrapHeight - 60 );
$scope.find( '.ast-image__skeleton' ).hide();
$scope.addClass( 'preview-mode' );
$scope.find( '.ast-attachments-search-wrap' ).children().hide();
$scope.find( '.ast-image__search-wrap' ).before( $( '#tmpl-ast-image-go-back' ).text() );
$scope.find( '.ast-image__search-wrap' ).after( single_btn );
$scope.find( '.ast-image__preview-skeleton' ).html( single_html );
$scope.find( '.ast-image__preview-skeleton' ).show();
$scope.find( '.single-site-preview' ).css( 'max-height', wrapHeight );
AstraImageCommon.canSave = true;
},
_setScope: function() {
AstraImageCommon.frame = wp.media.view.AstraAttachmentsBrowser.object.$el.closest( '.media-frame' );
$scope = AstraImageCommon.frame.find( '.ast-attachments-browser' );
if ( undefined == $scope ) {
return;
}
$( 'body' ).data( 'page', 1 );
let skeleton = $( '#tmpl-ast-image-skeleton' ).text();
$scope.append( skeleton );
let pixabay_filter = wp.template( 'ast-image-filters' );
if ( ! $scope.find( '.ast-image__filter-wrap' ).length ) {
$scope.find( '.ast-attachments-search-wrap' ).append( pixabay_filter() );
}
AstraImageCommon.offset = AstraImageCommon.frame.outerHeight();
let wrapHeight = ( AstraImageCommon.offset - 210 );
$scope.find( '.ast-image__skeleton-inner-wrap' ).css( 'height', wrapHeight );
$scope.find( '.ast-image__search' ).trigger( 'keyup' );
$scope.find( '.ast-image__loader-wrap' ).show();
$scope.find( '.ast-image__skeleton-inner-wrap' ).scroll( AstraImageCommon._loadMore );
AstraImageCommon.scopeSet = true;
},
_initImages: function() {
let loop = wp.template( 'ast-image-list' );
let list_html = loop( wp.media.view.AstraAttachmentsBrowser.images );
let container = document.querySelector( '.ast-image__skeleton' );
$scope.find( '.ast-image__loader-wrap' ).show();
if ( AstraImageCommon.infiniteLoad ) {
AstraImageCommon.images.push( wp.media.view.AstraAttachmentsBrowser.images );
$scope.find( '.ast-image__skeleton' ).append( list_html );
} else {
AstraImageCommon.images = wp.media.view.AstraAttachmentsBrowser.images;
$scope.find( '.ast-image__skeleton' ).html( list_html );
}
AstraImageCommon.loadingStatus = true;
if ( $scope.find( '.ast-image__list-wrap' ).length ) {
imagesLoaded( container, function() {
$scope.find( '.ast-image__list-wrap' ).each( function( index ) {
$( this ).removeClass( 'loading' );
$( this ).addClass( 'loaded' );
} );
$scope.find( '.ast-image__loader-wrap' ).hide();
});
} else {
$scope.find( '.ast-image__loader-wrap' ).hide();
}
},
_loadMore: function() {
if( AstraImageCommon.isPreview ) {
return;
}
let page = $( 'body' ).data( 'page' );
page = ( undefined == page ) ? 2 : ( page + 1 );
if ( undefined != $scope.find( '.ast-image__list-wrap:last' ).offset() ) {
if( ( $( window ).scrollTop() + AstraImageCommon.offset ) >= ( $scope.find( '.ast-image__list-wrap:last' ).offset().top ) ) {
if ( AstraImageCommon.loadingStatus ) {
$scope.find( '.ast-image__loader-wrap' ).show();
AstraImageCommon.loadingStatus = false;
AstraImageCommon.infiniteLoad = true;
AstraImageCommon.config.page = page;
$( 'body' ).data( 'page', page );
$scope.find( '.ast-image__search' ).trigger( 'infinite' );
}
}
}
},
};
/**
* Initialize AstraImageCommon
*/
$( function(){
AstraImageCommon.init();
});
})(jQuery);