// Extend etCorePortability since it is declared by localization.
window.etCore.portability = $.extend( etCorePortability, {
boot: function( $instance ) {
var $customizeHeader = $( '#customize-header-actions' );
var $customizePortability = $( '.et-core-customize-controls-close' );
// Moved portability button into customizer header
if ( $customizeHeader.length && $customizePortability.length ) {
$customizeHeader.append( $customizePortability );
$( '[data-et-core-portability]' ).each( function() {
$this.listen( $( this ) );
// Release unecessary cache.
etCorePortability = null;
listen: function( $el ) {
$el.find( '[data-et-core-portability-export]' ).click( function( e ) {
if ( ! $this.actionsDisabled() ) {
$el.find( '.et-core-portability-export-form input[type="text"]' ).on( 'keydown', function( e ) {
if ( 13 === e.keyCode ) {
$el.find( '[data-et-core-portability-export]' ).click();
// Portability populate import.
$el.find( '.et-core-portability-import-form input[type="file"]' ).on( 'change', function( e ) {
$this.populateImport( $( this ).get( 0 ).files[0] );
$el.find( '.et-core-portability-import' ).click( function( e ) {
if ( ! $this.actionsDisabled() ) {
$el.find( '.et-core-portability-import-form button' ).click( function( e ) {
$this.instance( 'input[type="file"]' ).trigger( 'click' );
$el.find( '[data-et-core-portability-cancel]' ).click( function( e ) {
validateImportFile: function( file, noOutput ) {
if ( undefined !== file && 'undefined' != typeof file.name && 'undefined' != typeof file.type && 'json' == file.name.split( '.' ).slice( -1 )[0] ) {
etCore.modalContent( '<p>' + this.text.invalideFile + '</p>', false, 3000, '#et-core-portability-import' );
populateImport: function( file ) {
if ( ! this.validateImportFile( file ) ) {
$( '.et-core-portability-import-placeholder' ).text( file.name );
import: function(noBackup) {
var file = $this.instance('input[type="file"]').get(0).files[0];
if (undefined === window.FormData) {
etCore.modalContent('<p>' + this.text.browserSupport + '</p>', false, 3000, '#et-core-portability-import');
if (!$this.validateImportFile(file)) {
$this.addProgressBar( $this.text.importing );
if ( $this.instance( '[name="et-core-portability-import-backup"]' ).is( ':checked' ) && ! noBackup ) {
$( $this ).on( 'exported', function() {
var includeGlobalPresets = $this.instance('[name="et-core-portability-import-include-global-presets"]').is(':checked');
action: 'et_core_portability_import',
include_global_presets: includeGlobalPresets,
nonce: $this.nonces.import
}, function( response ) {
etCore.modalContent( '<div class="et-core-loader et-core-loader-success"></div>', false, 3000, '#et-core-portability-import' );
$( document ).delay( 3000 ).queue( function() {
etCore.modalContent( '<div class="et-core-loader"></div>', false, false, '#et-core-portability-import' );
$( this ).dequeue().delay( 2000 ).queue( function() {
// Save post content for individual content.
if ( 'undefined' !== typeof response.data.postContent ) {
var save = $( '#save-action #save-post' );
if ( save.length === 0 ) {
save = $( '#publishing-action input[type="submit"]' );
if ( 'undefined' !== typeof window.tinyMCE && window.tinyMCE.get( 'content' ) && ! window.tinyMCE.get( 'content' ).isHidden() ) {
var editor = window.tinyMCE.get( 'content' );
editor.setContent( $.trim( response.data.postContent ), { format: 'html' } );
$( '#content' ).val( $.trim( response.data.postContent ) );
window.onbeforeunload = function() {
$( 'body' ).fadeOut( 500 );
$( 'body' ).fadeOut( 500, function() {
// Remove confirmation popup before relocation.
$( window ).unbind( 'beforeunload' );
window.location = window.location.href.replace(/reset\=true\&|\&reset\=true/,'');
export: function( backup ) {
progressBarMessages = backup ? $this.text.backuping : $this.text.exporting;
// Include selected posts.
if ( $this.instance( '[name="et-core-portability-posts"]' ).is( ':checked' ) ) {
$( '#posts-filter [name="post[]"]:checked:enabled' ).each( function() {
posts[this.id] = this.value;
// do not proceed and display error message if no Items selected
if ( $.isEmptyObject( posts ) ) {
etCore.modalContent( '<div class="et-core-loader et-core-loader-fail"></div><h3>' + $this.text.noItemsSelected + '</h3>', false, true, '#' + $this.instance( '.ui-tabs-panel:visible' ).attr( 'id' ) );
$this.addProgressBar( progressBarMessages );
if ( 'undefined' !== typeof window.tinyMCE && window.tinyMCE.get( 'content' ) && ! window.tinyMCE.get( 'content' ).isHidden() ) {
content = window.tinyMCE.get( 'content' ).getContent();
} else if ( $( 'textarea#content' ).length > 0 ) {
content = $( 'textarea#content' ).val();
if ( false !== content ) {
content = content.replace( /^([^\[]*){1}/, '' );
content = content.replace( /([^\]]*)$/, '' );
var applyGlobalPresets = $this.instance( '[name="et-core-portability-apply-presets"]' ).is( ':checked' );
action: 'et_core_portability_export',
selection: $.isEmptyObject( posts ) ? false : JSON.stringify( posts ),
apply_global_presets: applyGlobalPresets,
nonce: $this.nonces.export
}, function( response ) {
var time = ' ' + new Date().toJSON().replace( 'T', ' ' ).replace( ':', 'h' ).substring( 0, 16 ),
downloadURL = $this.instance( '[data-et-core-portability-export]' ).data( 'et-core-portability-export' ),
'timestamp': response.data.timestamp,
'name': encodeURIComponent( $this.instance( '.et-core-portability-export-form input' ).val() + ( backup ? time : '' ) ),
$.each( query, function( key, value ) {
downloadURL = downloadURL + '&' + key + '=' + value;
// Remove confirmation popup before relocation.
$( window ).unbind( 'beforeunload' );
window.location.assign( encodeURI( downloadURL ) );
etCore.modalContent( '<div class="et-core-loader et-core-loader-success"></div>', false, 3000, '#et-core-portability-export' );
$( $this ).trigger( 'exported' );
exportFB: function( exportUrl, postId, content, fileName, importFile, page, timestamp, progress = 0, estimation = 1 ) {
// Trigger event which updates VB-UI's progress bar
window.et_fb_export_progress = progress;
window.et_fb_export_estimation = estimation;
var exportEvent = document.createEvent('Event');
exportEvent.initEvent('et_fb_layout_export_in_progress', true, true);
window.dispatchEvent(exportEvent);
page = typeof page === 'undefined' ? 1 : page;
action: 'et_core_portability_export',
content: content.shortcode,
global_presets: content.global_presets,
timestamp: timestamp !== undefined ? timestamp : 0,
nonce: $this.nonces.export,
success: function( response ) {
var errorEvent = document.createEvent( 'Event' );
errorEvent.initEvent( 'et_fb_layout_export_error', true, true );
// The error is unknown but most of the time it would be cased by the server max size being exceeded.
if ( 'string' === typeof response && '0' === response ) {
window.et_fb_export_layout_message = $this.text.maxSizeExceeded;
window.dispatchEvent( errorEvent );
// Memory size set on server is exhausted.
else if ( 'string' === typeof response && response.toLowerCase().indexOf( 'memory size' ) >= 0 ) {
window.et_fb_export_layout_message = $this.text.memoryExhausted;
window.dispatchEvent( errorEvent );
else if ( 'undefined' !== typeof response.page ) {
var updatedProgress = Math.ceil((response.page * 100) / response.total_pages);
var updatedEstimation = Math.ceil(((response.total_pages - response.page) * 6) / 60);
// If progress param isn't empty, updated progress should continue from it
// because before exportFB(), shortcode should've been prepared via another
const remainingProgress = (100 - progress) / 100;
updatedProgress = (updatedProgress * remainingProgress) + progress;
// Update global variables
window.et_fb_export_progress = updatedProgress;
window.et_fb_export_estimation = updatedEstimation;
// Dispatch event to trigger UI update
window.dispatchEvent(exportEvent);
} else if ( 'undefined' !== typeof response.data && 'undefined' !== typeof response.data.message ) {
window.et_fb_export_layout_message = $this.text[response.data.message];
window.dispatchEvent( errorEvent );
var time = ' ' + new Date().toJSON().replace( 'T', ' ' ).replace( ':', 'h' ).substring( 0, 16 ),
'timestamp': response.data.timestamp,
'name': '' !== fileName ? fileName : encodeURIComponent( time ),
$.each( query, function( key, value ) {
downloadURL = downloadURL + '&' + key + '=' + value;
// Remove confirmation popup before relocation.
$( window ).unbind( 'beforeunload' );
// Update progress bar's global variables
window.et_fb_export_progress = 100;
window.et_fb_export_estimation = 0;
// Dispatch event to trigger UI update
window.dispatchEvent(exportEvent);
window.location.assign( encodeURI( downloadURL ) );
// perform import if needed
if ( typeof importFile !== 'undefined' ) {
$this.importFB( importFile, postId );
var event = document.createEvent( 'Event' );
event.initEvent( 'et_fb_layout_export_finished', true, true );
// trigger event to communicate with FB
window.dispatchEvent( event );
importFB: function(file, postId, options) {
var errorEvent = document.createEvent( 'Event' );
window.et_fb_import_progress = 0;
window.et_fb_import_estimation = 1;
errorEvent.initEvent( 'et_fb_layout_import_error', true, true );
if ( undefined === window.FormData ) {
window.et_fb_import_layout_message = this.text.browserSupport;
window.dispatchEvent( errorEvent );
if ( ! $this.validateImportFile( file, true ) ) {
window.et_fb_import_layout_message = this.text.invalideFile;
window.dispatchEvent( errorEvent );
if ('undefined' === typeof options) {
var fileSize = Math.ceil( ( file.size / ( 1024 * 1024 ) ).toFixed( 2 ) ),
formData = new FormData(),
action: 'et_core_portability_import',
include_global_presets: options.includeGlobalPresets,
nonce: $this.nonces.import,
replace: options.replace ? '1' : '0',
* Max size set on server is exceeded.
* 0 indicating "unlimited" according to php specs
* https://www.php.net/manual/en/ini.core.php#ini.post-max-size
( 0 > $this.postMaxSize && fileSize >= $this.postMaxSize )
|| ( 0 > $this.uploadMaxSize && fileSize >= $this.uploadMaxSize )
window.et_fb_import_layout_message = this.text.maxSizeExceeded;
window.dispatchEvent( errorEvent );
$.each(requestData, function(name, value) {
// Explicitly set the file name.
// Otherwise it'll be set to 'Blob' in case of Blob type, but we need actual filename here.
formData.append('file', value, value.name);
formData.append(name, value);
var importFBAjax = function( importData ) {
success: function( response ) {
var event = document.createEvent( 'Event' );
event.initEvent( 'et_fb_layout_import_in_progress', true, true );
if ( ! response.success && 'undefined' !== typeof response.data && 'undefined' !== typeof response.data.message && 'undefined' !== typeof $this.text[ response.data.message ] ) {
window.et_fb_import_layout_message = $this.text[ response.data.message ];
window.dispatchEvent( errorEvent );
// The error is unknown but most of the time it would be cased by the server max size being exceeded.
else if ( 'string' === typeof response && ('0' === response || '' === response) ) {
window.et_fb_import_layout_message = $this.text.maxSizeExceeded;
window.dispatchEvent( errorEvent );
// Memory size set on server is exhausted.
else if ( 'string' === typeof response && response.toLowerCase().indexOf( 'memory size' ) >= 0 ) {
window.et_fb_import_layout_message = $this.text.memoryExhausted;
window.dispatchEvent( errorEvent );
else if ( 'undefined' !== typeof response.page && 'undefined' !== typeof response.total_pages ) {
var progress = Math.ceil( ( response.page * 100 ) / response.total_pages );
var estimation = Math.ceil( ( ( response.total_pages - response.page ) * 6 ) / 60 );
window.et_fb_import_progress = progress;
window.et_fb_import_estimation = estimation;
var nextImportData = importData;
nextImportData.append( 'page', ( parseInt(response.page) + 1 ) );
nextImportData.append( 'timestamp', response.timestamp );
nextImportData.append( 'file', null );
importFBAjax( nextImportData );
// trigger event to communicate with FB
window.dispatchEvent( event );
window.et_fb_import_progress = 100;
window.et_fb_import_estimation = 0;
// trigger event to communicate with FB