( function( $ ) {
"use strict";
$( document ).ready( function() {
window['owpDemoImport'].init();
} );
window['owpDemoImport'] = {
importData: {},
allowPopupClosing: true,
init: function() {
var that = this;
// Search functionality.
$( '.owp-search-input' ).on( 'keyup', function() {
if ( 0 < $( this ).val().length ) {
// Hide all items.
$( '.owp-demo-wrap .themes' ).find( '.theme-wrap' ).hide();
// Show just the ones that have a match on the import name.
$( '.owp-demo-wrap .themes' ).find( '.theme-wrap[data-name*="' + $( this ).val().toLowerCase() + '"]' ).show();
} else {
$( '.owp-demo-wrap .themes' ).find( '.theme-wrap' ).show();
}
} );
// Prevent the popup from showing when the live preview button
$( '.owp-demo-wrap .theme-actions a.button' ).on( 'click', function( e ) {
e.stopPropagation();
} );
// Get demo data
$( '.owp-open-popup' ).click( function( e ) {
if( $( e.target ).hasClass( 'owp-live-preview' ) ) {
return;
}
e.preventDefault();
// Vars
var $selected_demo = $( this ).data( 'demo-id' ),
$demo_type = $( this ).data( 'demo-type' ),
$loading_icon = $( '.preview-' + $selected_demo ),
$disable_preview = $( '.preview-all-' + $selected_demo );
$loading_icon.show();
$disable_preview.show();
that.getDemoData( $selected_demo, $demo_type );
} );
$( document ).on( 'click' , '.install-now', this.installNow );
$( document ).on( 'click' , '.activate-now', this.activatePlugins );
$( document ).on( 'wp-plugin-install-success' , this.installSuccess );
$( document ).on( 'wp-plugin-installing' , this.pluginInstalling );
$( document ).on( 'wp-plugin-install-error' , this.installError );
// Elementor
$( '.owp-elementor-link' ).on( 'click', function( e ) {
e.preventDefault();
$( this ).parent().addClass( 'active' );
$( '.owp-gutenberg-link' ).parent().removeClass( 'active' );
$( '.owp-navigation .elementor-demos' ).show();
$( '.owp-navigation .gutenberg-demos' ).hide();
$( '.owp-demo-wrap .themes.elementor-items' ).show();
$( '.owp-demo-wrap .themes.gutenberg-items' ).hide();
} );
// Gutenberg
$( '.owp-gutenberg-link' ).on( 'click', function( e ) {
e.preventDefault();
$( this ).parent().addClass( 'active' );
$( '.owp-elementor-link' ).parent().removeClass( 'active' );
$( '.owp-navigation .gutenberg-demos' ).show();
$( '.owp-navigation .elementor-demos' ).hide();
$( '.owp-demo-wrap .themes.gutenberg-items' ).show();
$( '.owp-demo-wrap .themes.elementor-items' ).hide();
} );
// Filter for Elementor demos
this.categoriesFilter( '.elementor-items', '.elementor-demos' );
// Filter for Gutenberg demos
this.categoriesFilter( '.gutenberg-items', '.gutenberg-demos' );
},
// Category filter for Elementor demos
categoriesFilter: function( items, link ) {
// Cache selector to all items
var $items = $( '.owp-demo-wrap .themes' + items ).find( '.theme-wrap' ),
fadeoutClass = 'owp-is-fadeout',
fadeinClass = 'owp-is-fadein',
animationDuration = 200;
// Hide all items.
var fadeOut = function () {
var dfd = $.Deferred();
$items.addClass( fadeoutClass );
setTimeout( function() {
$items.removeClass( fadeoutClass ).hide();
dfd.resolve();
}, animationDuration );
return dfd.promise();
};
var fadeIn = function ( category, dfd ) {
var filter = category ? '[data-categories*="' + category + '"]' : 'div';
if ( 'all' === category ) {
filter = 'div';
}
$items.filter( filter ).show().addClass( 'owp-is-fadein' );
setTimeout( function() {
$items.removeClass( fadeinClass );
dfd.resolve();
}, animationDuration );
};
var animate = function ( category ) {
var dfd = $.Deferred();
var promise = fadeOut();
promise.done( function () {
fadeIn( category, dfd );
} );
return dfd;
};
$( link + ' .owp-navigation-link' ).on( 'click', function( event ) {
event.preventDefault();
// Remove 'active' class from the previous nav list items.
$( this ).parent().siblings().removeClass( 'active' );
// Add the 'active' class to this nav list item.
$( this ).parent().addClass( 'active' );
var category = this.hash.slice(1);
// show/hide the right items, based on category selected
var $container = $( '.owp-demo-wrap .themes' + items );
$container.css( 'min-width', $container.outerHeight() );
var promise = animate( category );
promise.done( function () {
$container.removeAttr( 'style' );
} );
} );
},
// Get demo data.
getDemoData: function( demo_name, demo_type ) {
var that = this;
// Get import data
$.ajax( {
url: owpDemos.ajaxurl,
type: 'get',
data: {
action: 'owp_ajax_get_import_data',
demo_name: demo_name,
demo_type: demo_type,
security: owpDemos.owp_import_data_nonce
},
complete: function( data ) {
that.importData = $.parseJSON( data.responseText );
}
} );
// Run the import
$.ajax( {
url: owpDemos.ajaxurl,
type: 'get',
data: {
action : 'owp_ajax_get_demo_data',
demo_name: demo_name,
demo_type: demo_type,
demo_data_nonce: owpDemos.demo_data_nonce
},
complete: function( data ) {
that.runPopup( data );
// Vars
var $loading_icon = $( '.preview-' + demo_name ),
$disable_preview = $( '.preview-all-' + demo_name );
// Hide loader
$loading_icon.hide();
$disable_preview.hide();
}
} );
},
// Run popup.
runPopup: function( data ) {
var that = this
var innerWidth = $( 'html' ).innerWidth();
$( 'html' ).css( 'overflow', 'hidden' );
var hiddenInnerWidth = $( 'html' ).innerWidth();
$( 'html' ).css( 'margin-right', hiddenInnerWidth - innerWidth );
// Show popup
$( '#owp-demo-popup-wrap' ).fadeIn();
$( data.responseText ).appendTo( $( '#owp-demo-popup-content' ) );
// Close popup
$( '.owp-demo-popup-close, .owp-demo-popup-overlay' ).on( 'click', function( e ) {
e.preventDefault();
if ( that.allowPopupClosing === true ) {
that.closePopup();
}
} );
// Display the step two
$( '.owp-plugins-next' ).on( 'click', function( e ) {
e.preventDefault();
// Hide step one
$( '#owp-demo-plugins' ).hide();
// Display step two
$( '#owp-demo-import-form' ).show();
} );
// if clicked on import data button
$( '#owp-demo-import-form' ).submit( function( e ) {
e.preventDefault();
// Vars
var demo = $( this ).find( '[name="owp_import_demo"]' ).val(),
demoType = $( this ).find( '[name="owp_import_demo"]' ).data( 'demo-type' ),
nonce = $( this ).find( '[name="owp_import_demo_data_nonce"]' ).val(),
contentToImport = [];
// Check what need to be imported
$( this ).find( 'input[type="checkbox"]' ).each( function() {
if ( $( this ).is( ':checked' ) === true ) {
contentToImport.push( $( this ).attr( 'name' ) );
}
} );
// Hide the checkboxes and show the loader
$( this ).hide();
$( '.owp-loader' ).show();
// Start importing the content
that.importContent( {
demo: demo,
demoType: demoType,
nonce: nonce,
contentToImport: contentToImport,
isXML: $( '#owp_import_xml' ).is( ':checked' )
} );
} );
},
// importing the content.
importContent: function( importData ) {
var that = this,
currentContent,
importingLimit,
timerStart = Date.now(),
ajaxData = {
owp_import_demo: importData.demo,
owp_import_demo_type: importData.demoType,
owp_import_demo_data_nonce: importData.nonce
};
this.allowPopupClosing = false;
$( '.owp-demo-popup-close' ).fadeOut();
// When all the selected content has been imported
if ( importData.contentToImport.length === 0 ) {
// Show the imported screen after 1 second
setTimeout( function() {
$( '.owp-loader' ).hide();
$( '.owp-last' ).show();
}, 1000 );
// Notify the server that the importing process is complete
$.ajax( {
url: owpDemos.ajaxurl,
type: 'post',
data: {
action: 'owp_after_import',
owp_import_demo: importData.demo,
owp_import_demo_type: importData.demoType,
owp_import_demo_data_nonce: importData.nonce,
owp_import_is_xml: importData.isXML
},
complete: function( data ) {}
} );
this.allowPopupClosing = true;
$( '.owp-demo-popup-close' ).fadeIn();
return;
}
// Check the content that was selected to be imported.
for ( var key in this.importData ) {
// Check if the current item in the iteration is in the list of importable content
var contentIndex = $.inArray( this.importData[ key ][ 'input_name' ], importData.contentToImport );
// If it is:
if ( contentIndex !== -1 ) {
// Get a reference to the current content
currentContent = key;
// Remove the current content from the list of remaining importable content
importData.contentToImport.splice( contentIndex, 1 );
// Get the AJAX action name that corresponds to the current content
ajaxData.action = this.importData[ key ]['action'];
// After an item is found get out of the loop and execute the rest of the function
break;
}
}
// Tell the user which content is currently being imported
$( '.owp-import-status' ).append( '<p class="owp-importing">' + this.importData[ currentContent ]['loader'] + '</p>' );
// Tell the server to import the current content
var ajaxRequest = $.ajax( {
url: owpDemos.ajaxurl,
type: 'post',
data: ajaxData,
complete: function( data ) {
clearTimeout( importingLimit );
// Indicates if the importing of the content can continue
var continueProcess = true;
// Check if the importing of the content was successful or if there was any error
if ( data.status === 500 || data.status === 502 || data.status === 503 ) {
$( '.owp-importing' )
.addClass( 'owp-importing-failed' )
.removeClass( 'owp-importing' )
.text( owpDemos.content_importing_error + ' '+ data.status );
} else if ( data.responseText.indexOf( 'successful import' ) !== -1 ) {
$( '.owp-importing' ).addClass( 'owp-imported' ).removeClass( 'owp-importing' );
} else {
var errors = $.parseJSON( data.responseText ),
errorMessage = '';
// Iterate through the list of errors
for ( var error in errors ) {
errorMessage += errors[ error ];
// If there was an error with the importing of the XML file, stop the process
if ( error === 'xml_import_error' ) {
continueProcess = false;
}
}
// Display the error message
$( '.owp-importing' )
.addClass( 'owp-importing-failed' )
.removeClass( 'owp-importing' )
.text( errorMessage );
that.allowPopupClosing = true;
$( '.owp-demo-popup-close' ).fadeIn();
}
// Continue with the loading only if an important error was not encountered
if ( continueProcess === true ) {
// Load the next content in the list
that.importContent( importData );
}
}
} );
// Set a time limit of 15 minutes for the importing process.
importingLimit = setTimeout( function() {
// Abort the AJAX request
ajaxRequest.abort();
// Allow the popup to be closed
that.allowPopupClosing = true;
$( '.owp-demo-popup-close' ).fadeIn();
$( '.owp-importing' )
.addClass( 'owp-importing-failed' )
.removeClass( 'owp-importing' )
.text( owpDemos.content_importing_error );
}, 15 * 60 * 1000 );
},
// Close demo popup.
closePopup: function() {
$( 'html' ).css( {
'overflow': '',
'margin-right': ''
} );
// Hide loader
$( '.preview-icon' ).hide();
$( '.preview-all' ).hide();
// Hide demo popup
$( '#owp-demo-popup-wrap' ).fadeOut();
// Remove content in the popup
setTimeout( function() {
$( '#owp-demo-popup-content' ).html( '' );
}, 600);
},
// Install required plugins.
installNow: function( e ) {
e.preventDefault();
// Vars
var $button = $( e.target ),
$document = $( document );
if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) {
return;
}
if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) {
wp.updates.requestFilesystemCredentials( e );
$document.on( 'credential-modal-cancel', function() {
var $message = $( '.install-now.updating-message' );
$message
.removeClass( 'updating-message' )
.text( wp.updates.l10n.installNow );
wp.a11y.speak( wp.updates.l10n.updateCancel, 'polite' );
} );
}
wp.updates.installPlugin( {
slug: $button.data( 'slug' )
} );
},
// Activate required plugins.
activatePlugins: function( e ) {
e.preventDefault();
// Vars
var $button = $( e.target ),
$init = $button.data( 'init' ),
$slug = $button.data( 'slug' );
if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) {
return;
}
$button.addClass( 'updating-message button-primary' ).html( owpDemos.button_activating );
$.ajax( {
url: owpDemos.ajaxurl,
type: 'POST',
data: {
action : 'owp_ajax_required_plugins_activate',
_wpnonce: owpDemos.demo_plugins_activate_nonce,
init : $init,
},
} ).done( function( result ) {
if ( result.success ) {
$button.removeClass( 'button-primary install-now activate-now updating-message' )
.attr( 'disabled', 'disabled' )
.addClass( 'disabled' )
.text( owpDemos.button_active );
}
} );
},
// Install success.
installSuccess: function( e, response ) {
e.preventDefault();
var $message = $( '.owp-plugin-' + response.slug ).find( '.button' );
// Transform the 'Install' button into an 'Activate' button.
var $init = $message.data('init');
$message.removeClass( 'install-now installed button-disabled updated-message' )
.addClass( 'updating-message' )
.html( owpDemos.button_activating );
// WordPress adds "Activate" button after waiting for 1000ms. So we will run our activation after that.
setTimeout( function() {
$.ajax( {
url: owpDemos.ajaxurl,
type: 'POST',
data: {
action : 'owp_ajax_required_plugins_activate',
_wpnonce: owpDemos.demo_plugins_activate_nonce,
init : $init,
},
} ).done( function( result ) {
if ( result.success ) {
$message.removeClass( 'button-primary install-now activate-now updating-message' )
.attr( 'disabled', 'disabled' )
.addClass( 'disabled' )
.text( owpDemos.button_active );
} else {
$message.removeClass( 'updating-message' );
}
} );
}, 1200 );
},
// Plugin installing.
pluginInstalling: function( e, args ) {
e.preventDefault();
var $card = $( '.owp-plugin-' + args.slug ),
$button = $card.find( '.button' );
$button.addClass( 'updating-message' );
},
// Plugin install error.
installError: function( e, response ) {
e.preventDefault();
var $card = $( '.owp-plugin-' + response.slug );
$card.removeClass( 'button-primary' ).addClass( 'disabled' ).html( wp.updates.l10n.installFailedShort );
}
};
} ) ( jQuery ); |