(function( $, exportConfig, presetsConfig ) { 'use strict'; Vue.component( 'jet-engine-skins-presets', { template: '#jet_engine_skins_presets', data: function() { return { isActive: false, loading: false, currentPreset: false, presets: presetsConfig, successDialog: false, successMessage: false, }; }, methods: { importPreset: function( preset ) { var self = this; self.loading = true; self.currentPreset = preset; jQuery.ajax({ url: window.ajaxurl, type: 'POST', dataType: 'json', data: { action: 'jet_engine_import_preset', preset: self.currentPreset, _nonce: window.JetEngineDashboardConfig._nonce, }, }).done(function() { self.successMessage = self.getPresetMsg( self.currentPreset ); self.loading = false; self.currentPreset = false; self.successDialog = true; }).fail(function() { self.loading = false; self.currentPreset = false; }); }, isLoading: function( preset ) { return this.loading && preset === this.currentPreset; }, getPresetMsg: function( preset ) { var presetData = this.presets[ preset ]; return presetData.success_msg; }, missDeps: function( preset ) { var presetData = this.presets[ preset ], activeModules = []; if ( window.JetEngineDashboardConfig.active_modules && window.JetEngineDashboardConfig.active_modules.length ) { activeModules = window.JetEngineDashboardConfig.active_modules; } if ( ! presetData || ! presetData.deps || ! presetData.deps.length ) { return false; } for ( var i = 0; i < presetData.deps.length; i++ ) { var depsModule = presetData.deps[ i ]; if ( 0 > activeModules.indexOf( depsModule ) ) { return true; } } return false; }, getDeps: function( preset ) { var presetData = this.presets[preset], internalModules = window.JetEngineDashboardConfig.internal_modules, externalModules = window.JetEngineDashboardConfig.external_modules, allModules = internalModules.concat( externalModules ), result = []; if ( ! presetData || ! presetData.deps || ! presetData.deps.length ) { return null; } for ( var i = 0; i < allModules.length; i++ ) { var module = allModules[ i ]; if ( 0 <= presetData.deps.indexOf( module.value ) ) { result.push( module.label ); } } return result.join( ', ' ); }, isDisabled: function( preset ) { if ( this.missDeps( preset ) ) { return true; } else { return this.loading && preset !== this.currentPreset; } } } } ); Vue.component( 'jet-engine-skin-export', { template: '#jet_engine_skin_export', data: function() { return { isActive: false, postTypes: exportConfig.post_types, taxonomies: exportConfig.taxonomies, metaBoxes: exportConfig.meta_boxes, relations: exportConfig.relations, optionsPages: exportConfig.options_pages, listingItems: exportConfig.listing_items, componentsList: exportConfig.components, glossariesList: exportConfig.glossaries, queriesList: exportConfig.queries, skin: exportConfig.skin_vars, }; }, methods: { serialize: function( object, prefix ) { var str = [], prop; for ( prop in object ) { if ( object.hasOwnProperty( prop ) ) { var key = prefix ? prefix + "[" + prop + "]" : prop, val = object[ prop ]; if ( val && typeof val === "object" ) { val = this.serialize( val, key ); } else { val = encodeURIComponent( key ) + "=" + encodeURIComponent( val ); } str.push( val ); } } return str.join( "&" ); }, goToExport: function() { window.location = exportConfig.base_url + "&" + this.serialize( this.skin ); } } } ); Vue.component( 'jet-engine-skin-import', { template: '#jet_engine_skin_import', data: function() { return { isActive: false, isLoading: false, readyToImport: false, file: null, error: null, log: false, showPopup: false, existingPostTypes: [], existingTaxonomies: [], }; }, methods: { prepareToImport: function( e ) { var file; if ( ! e.target.files ) { this.readyToImport = false; return; } file = e.target.files[0]; if ( 'application/json' !== file.type ) { this.readyToImport = false; return; } this.file = file; this.readyToImport = true; }, logItems: function( items ) { return items.join( ", " ); }, validateImport: function() { var self = this, formData, xhr; self.isLoading = true; formData = new FormData(); formData.append( '_skin', self.file ); formData.append( 'action', 'jet_engine_validate_skin' ); formData.append( '_nonce', window.JetEngineDashboardConfig._nonce ); xhr = new XMLHttpRequest(); xhr.open( 'POST', ajaxurl, true ); xhr.onload = function( e, r ) { if ( xhr.status == 200 ) { var response = e.currentTarget.response; response = JSON.parse( response ); if ( ! response.success ) { return; } else { if ( ! Object.keys( response.data || {} ).length ) { self.processImport(); return; } else { self.existingPostTypes = response.data?.post_types?.items ?? []; self.existingTaxonomies = response.data?.taxonomies?.items ?? []; self.existingPostTypes.map( function( item ) { return item.action ??= 'copy'; } ); self.existingTaxonomies.map( function( item ) { return item.action ??= 'copy'; } ); self.showPopup = true; } self.isLoading = false; } } else { self.error = xhr.status; } }; xhr.send( formData ); }, setAction: function( value, type, index ) { this[ type ][index]['action'] = value; }, newImport: function() { this.log = false; this.readyToImport = false; this.isLoading = false; this.existingPostTypes = []; this.existingTaxonomies = []; }, closePopup: function() { self.showPopup = false; self.isLoading = false; }, processImport: function() { var self = this, formData, xhr; self.isLoading = true; formData = new FormData(); formData.append( '_skin', self.file ); formData.append( 'action', 'jet_engine_import_skin' ); formData.append( '_nonce', window.JetEngineDashboardConfig._nonce ); formData.append( 'duplicates', JSON.stringify( { 'post_types': self.existingPostTypes, 'taxonomies': self.existingTaxonomies, } ), ); xhr = new XMLHttpRequest(); xhr.open( 'POST', ajaxurl, true ); xhr.onload = function( e, r ) { if ( xhr.status == 200 ) { var response = e.currentTarget.response; response = JSON.parse( response ); if ( ! response.success ) { self.error = response.data; return; } else { self.log = response.data; } } else { self.error = xhr.status; } }; xhr.send( formData ); } } } ); })( jQuery, window.JetEngineExportConfig, window.JetEnginePresetsConfig );