398 lines
11 KiB
JavaScript
398 lines
11 KiB
JavaScript
/* global fusionBuilderConfig, FusionPageBuilderApp, fusionBuilderText, FusionPageBuilderEvents, ajaxurl */
|
|
var FusionPageBuilder = FusionPageBuilder || {};
|
|
|
|
( function() {
|
|
|
|
FusionPageBuilder.Website = FusionPageBuilder.Studio.extend( {
|
|
|
|
/**
|
|
* Init.
|
|
*
|
|
* @since 3.5
|
|
* @return {void}
|
|
*/
|
|
initialize: function() {
|
|
this.websiteData = false;
|
|
this.websiteRequest = false;
|
|
this.layoutIsLoading = false;
|
|
this.mediaImportKeys = [];
|
|
this.state = {
|
|
current: '',
|
|
title: '',
|
|
nextCat: ''
|
|
};
|
|
},
|
|
|
|
/**
|
|
* Gets the webfonts via AJAX.
|
|
*
|
|
* @since 3.5
|
|
* @return {void}
|
|
*/
|
|
getWebsiteData: function() {
|
|
var self = this;
|
|
|
|
if ( self.websiteData && self.websiteData ) {
|
|
return;
|
|
}
|
|
|
|
if ( false !== self.websiteRequest ) {
|
|
return self.websiteRequest;
|
|
}
|
|
return jQuery.post( fusionBuilderConfig.ajaxurl, { action: 'awb_load_websites', load_website_data: true, fusion_load_nonce: fusionBuilderConfig.fusion_load_nonce }, function( data ) {
|
|
if ( ! _.isNull( data ) ) {
|
|
self.websiteData = data;
|
|
}
|
|
}, 'json' );
|
|
},
|
|
|
|
/**
|
|
* Init filter sidebar.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} sidebar - The sidebar elements.
|
|
* @return {void}
|
|
*/
|
|
initFilter: function( $sidebar ) {
|
|
var timeouts = [],
|
|
self = this,
|
|
$container = jQuery( '#fusion-builder-layouts-demos' );
|
|
|
|
$sidebar.find( 'li' ).off();
|
|
|
|
$sidebar.find( 'li' ).on( 'click', function() {
|
|
var $studioImports = jQuery( this ).closest( '.studio-wrapper' ).find( '.studio-imports' ),
|
|
$templates = $studioImports.find( 'li' ),
|
|
slug = jQuery( this ).attr( 'data-slug' ),
|
|
counter = 1,
|
|
order = [],
|
|
$showTemplates = [],
|
|
i;
|
|
|
|
// Don't do filtering for active filter.
|
|
if ( jQuery( this ).hasClass( 'current' ) ) {
|
|
return false;
|
|
}
|
|
|
|
// Clear all timeouts to prevent animations still running.
|
|
jQuery.each( timeouts, function( index, value ) {
|
|
clearTimeout( value );
|
|
} );
|
|
|
|
// Hide detail demo.
|
|
if ( ! $studioImports.next().hasClass( 'hidden' ) ) {
|
|
$studioImports.removeClass( 'hidden' ).next().addClass( 'hidden' ).find( '.demo-' + self.state.current ).addClass( 'hidden' );
|
|
}
|
|
|
|
// Remove current from active.
|
|
$sidebar.find( 'li.current' ).removeClass( 'current' );
|
|
|
|
// Hide all templates.
|
|
$templates.css( { display: 'none' } ).addClass( 'hidden' );
|
|
|
|
// Fade correct templates in.
|
|
$templates.each( function() {
|
|
var $template = jQuery( this );
|
|
if ( 'undefined' === typeof $template.data( 'slug' ) ) {
|
|
return true;
|
|
}
|
|
|
|
if ( 'all' === slug || -1 !== $template.data( 'slug' ).indexOf( slug ) ) {
|
|
$template.css( { display: 'inline-block' } );
|
|
$showTemplates.push( $template );
|
|
}
|
|
} );
|
|
|
|
setTimeout( function() {
|
|
jQuery.each( $showTemplates, function() {
|
|
var $template = jQuery( this ),
|
|
position = $template.position();
|
|
|
|
// Loop afer all have been added to get position.
|
|
position.$el = $template;
|
|
order.push( position );
|
|
} );
|
|
|
|
// Sort top to bottom.
|
|
order.sort( self.SortByTop );
|
|
|
|
// Reveal top to bottom.
|
|
for ( i = 0; i < order.length; i++ ) {
|
|
timeouts.push(
|
|
self.doSetTimeout( i, order, counter )
|
|
);
|
|
counter++;
|
|
}
|
|
}, 50 );
|
|
|
|
// Add current to show it is active.
|
|
jQuery( this ).addClass( 'current' );
|
|
} );
|
|
|
|
$container.find( '#awb_sites_search_demos' ).on( 'change paste keyup', _.debounce( function( ) {
|
|
var demoPageLink = jQuery( this ).val(),
|
|
demoPage,
|
|
parentDemo;
|
|
|
|
demoPageLink = demoPageLink.replace( 'https://', '' ).replace( 'http://', '' );
|
|
if ( '/' !== demoPageLink[ demoPageLink.length - 1 ] && ! _.isEmpty( demoPageLink ) ) {
|
|
demoPageLink += '/';
|
|
}
|
|
|
|
demoPage = $container.find( 'li[data-page-link="' + demoPageLink + '"]' );
|
|
parentDemo = demoPage.closest( '.awb-page-item' );
|
|
|
|
if ( demoPage.length ) {
|
|
if ( $container.find( '.site-details' ).hasClass( 'hidden' ) ) {
|
|
$container.find( '.site-details' ).removeClass( 'hidden' ).prev().addClass( 'hidden' );
|
|
}
|
|
demoPage.removeClass( 'hidden' ).siblings().addClass( 'hidden' );
|
|
|
|
self.state.current = parentDemo.data( 'website_id' );
|
|
self.state.title = parentDemo.data( 'website_title' );
|
|
parentDemo.removeClass( 'hidden' ).siblings().addClass( 'hidden' );
|
|
self.updateDetailHeader( $container );
|
|
}
|
|
|
|
}, 100 ) );
|
|
},
|
|
|
|
/**
|
|
* Init Import Demo.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} sidebar - The sidebar elements.
|
|
* @return {void}
|
|
*/
|
|
initImport: function( $container ) {
|
|
var self = this;
|
|
|
|
// Demo on Click.
|
|
$container.find( '.studio-imports > li' ).on( 'click', function( event ) {
|
|
event.preventDefault();
|
|
self.state.current = jQuery( this ).data( 'website_id' );
|
|
self.state.title = jQuery( this ).data( 'website_title' );
|
|
jQuery( this ).closest( '.studio-imports' ).addClass( 'hidden' )
|
|
.next().removeClass( 'hidden' ).find( '.demo-' + self.state.current ).removeClass( 'hidden' )
|
|
.find( 'li.hidden' ).removeClass( 'hidden' );
|
|
|
|
self.updateDetailHeader( $container );
|
|
} ).end().find( '.awb-sites-back-js' ).on( 'click', function( event ) {
|
|
event.preventDefault();
|
|
jQuery( this ).closest( '.site-details' ).find( '.demo-' + self.state.current ).addClass( 'hidden' )
|
|
.end().closest( '.site-details' ).addClass( 'hidden' ).prev().removeClass( 'hidden' );
|
|
} ).end().find( '.awb-sites-import-js' ).on( 'click', this.loadDemoPage.bind( this ) )
|
|
.end().find( '.awb-sites-next-js' ).on( 'click', function( event ) {
|
|
event.preventDefault();
|
|
$container.find( 'aside li[data-slug="' + self.state.nextCat + '"]' ).trigger( 'click' );
|
|
} );
|
|
|
|
},
|
|
|
|
/**
|
|
* Update Detail Header.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} container - The container elements.
|
|
* @return {void}
|
|
*/
|
|
updateDetailHeader: function( $container ) {
|
|
this.state.nextCat = $container.find( 'aside ul > li.current' ).next().data( 'slug' );
|
|
$container.find( '.awb-sites-title' ).html( this.state.title );
|
|
if ( this.state.nextCat && this.websiteData.tags[ this.state.nextCat ] ) {
|
|
$container.find( '.awb-sites-next-js' ).removeClass( 'vs-hidden' ).html( this.websiteData.tags[ this.state.nextCat ].name );
|
|
} else {
|
|
$container.find( '.awb-sites-next-js' ).addClass( 'vs-hidden' );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Import Website Demo Page.
|
|
*
|
|
* @since 3.5
|
|
* @param {Object} event - event object.
|
|
* @return {void}
|
|
*/
|
|
loadDemoPage: function( event ) {
|
|
var self = this,
|
|
demoName,
|
|
postId,
|
|
pageId;
|
|
|
|
if ( event ) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
if ( true === this.layoutIsLoading ) {
|
|
return;
|
|
}
|
|
|
|
this.layoutIsLoading = true;
|
|
|
|
demoName = jQuery( event.currentTarget ).data( 'demo-name' );
|
|
postId = jQuery( event.currentTarget ).data( 'post-id' );
|
|
pageId = jQuery( event.currentTarget ).data( 'page-id' );
|
|
|
|
jQuery.ajax( {
|
|
type: 'POST',
|
|
url: fusionBuilderConfig.ajaxurl,
|
|
data: {
|
|
action: 'awb_load_websites_page',
|
|
fusion_load_nonce: fusionBuilderConfig.fusion_load_nonce,
|
|
page_id: pageId,
|
|
demo_name: demoName,
|
|
post_id: postId
|
|
},
|
|
beforeSend: function() {
|
|
FusionPageBuilderEvents.trigger( 'fusion-show-loader' );
|
|
|
|
jQuery( 'body' ).removeClass( 'fusion_builder_inner_row_no_scroll' );
|
|
jQuery( '.fusion_builder_modal_inner_row_overlay' ).remove();
|
|
jQuery( '#fusion-builder-layouts' ).hide();
|
|
|
|
jQuery( '#fusion-loader .awb-studio-import-status' ).html( fusionBuilderText.demo_importing_content );
|
|
|
|
}
|
|
} )
|
|
.done( function( data ) {
|
|
var dataObj,
|
|
i,
|
|
promises = [],
|
|
dfd = jQuery.Deferred(), // Master deferred.
|
|
dfdNext = dfd; // Next deferred in the chain.
|
|
|
|
dataObj = JSON.parse( data );
|
|
|
|
if ( ! dataObj.success ) {
|
|
self.layoutIsLoading = false;
|
|
alert( fusionBuilderText.api_error_text ); // eslint-disable-line no-alert
|
|
FusionPageBuilderEvents.trigger( 'fusion-hide-loader' );
|
|
return;
|
|
}
|
|
|
|
dfd.resolve();
|
|
|
|
// Reset array.
|
|
self.mediaImportKeys = [];
|
|
|
|
// We have the content, let's check for assets.
|
|
// Filter out empty properties (now those are empty arrays).
|
|
if ( 'object' === typeof dataObj.avada_media ) {
|
|
Object.keys( dataObj.avada_media ).forEach( function( key ) {
|
|
// We expect and object.
|
|
if ( 'object' === typeof dataObj.avada_media[ key ] && ! Array.isArray( dataObj.avada_media[ key ] ) ) {
|
|
self.mediaImportKeys.push( key );
|
|
}
|
|
} );
|
|
}
|
|
|
|
// Import media if needed.
|
|
if ( 0 < self.mediaImportKeys.length ) {
|
|
|
|
// Set first AJAX response as initial data.
|
|
self.setImportData( dataObj );
|
|
|
|
for ( i = 0; i < self.mediaImportKeys.length; i++ ) {
|
|
|
|
// IIFE to freeze the value of i.
|
|
( function( k ) { // eslint-disable-line no-loop-func
|
|
|
|
dfdNext = dfdNext.then( function() {
|
|
return self.importMedia( self.getImportData(), self.mediaImportKeys[ k ] );
|
|
} );
|
|
|
|
promises.push( dfdNext );
|
|
}( i ) );
|
|
|
|
}
|
|
|
|
jQuery.when.apply( null, promises ).then(
|
|
function() {
|
|
self.setPageContent( dataObj, self.getImportData().post_content );
|
|
|
|
FusionPageBuilderEvents.trigger( 'fusion-hide-loader' );
|
|
|
|
self.resetImportData();
|
|
},
|
|
function() {
|
|
|
|
jQuery( '#fusion-loader .awb-studio-import-status' ).html( fusionBuilderText.demo_importing_content_failed );
|
|
|
|
FusionPageBuilderEvents.trigger( 'fusion-hide-loader' );
|
|
|
|
self.resetImportData();
|
|
}
|
|
);
|
|
} else {
|
|
self.setPageContent( dataObj, dataObj.post_content );
|
|
FusionPageBuilderEvents.trigger( 'fusion-hide-loader' );
|
|
}
|
|
} );
|
|
},
|
|
|
|
/**
|
|
* Imports post's media.
|
|
*
|
|
* @param {object} postData
|
|
* @return promise
|
|
*/
|
|
importMedia: function( postData, mediaKey ) {
|
|
var self = this;
|
|
|
|
let mediaKeyLabel = mediaKey;
|
|
if ( 'multiple_images' === mediaKey ) {
|
|
mediaKeyLabel = 'Images';
|
|
}
|
|
jQuery( '#fusion-loader .awb-studio-import-status' ).html( fusionBuilderText.demo_importing_media + ' ' + mediaKeyLabel.replace( '_', ' ' ) );
|
|
|
|
return jQuery.ajax( {
|
|
type: 'POST',
|
|
url: ajaxurl,
|
|
dataType: 'JSON',
|
|
data: {
|
|
action: 'awb_studio_import_media',
|
|
data: {
|
|
mediaImportKey: mediaKey,
|
|
postData: postData
|
|
},
|
|
fusion_load_nonce: FusionPageBuilderApp.fusion_load_nonce
|
|
},
|
|
success: function( data ) {
|
|
self.setImportData( data );
|
|
}
|
|
} );
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {Object} dataObj
|
|
* @param {String} newContent
|
|
*/
|
|
setPageContent: function( dataObj, newContent ) {
|
|
var meta;
|
|
|
|
// New layout loaded
|
|
FusionPageBuilderApp.layoutLoaded();
|
|
|
|
// Set page template
|
|
if ( 'undefined' !== typeof dataObj.page_template ) {
|
|
jQuery( '#page_template' ).val( dataObj.page_template );
|
|
}
|
|
|
|
meta = dataObj.meta;
|
|
|
|
// Set page options
|
|
_.each( meta, function( value, name ) {
|
|
jQuery( '#' + name ).val( value ).trigger( 'change' );
|
|
} );
|
|
|
|
// Create new builder layout.
|
|
FusionPageBuilderApp.clearBuilderLayout();
|
|
FusionPageBuilderApp.createBuilderLayout( newContent );
|
|
|
|
this.layoutIsLoading = false;
|
|
}
|
|
} );
|
|
|
|
}( jQuery ) );
|