­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ( function( $ ) { 'use strict'; Vue.config.devtools = true; var JetPopupLibraryAdminEventBus = new Vue(); var JetPopupAdmin = { popupLibraryInstance: null, init: function() { JetPopupAdmin.importInit(); if ( $( '#jet-popup-library-page')[0] ) { JetPopupAdmin.presetLibraryInit(); } if ( $( '#jet-popup-settings-page')[0] ) { JetPopupAdmin.settingPageInit(); } if ( $( '#jet-popup-library' )[0] ) { JetPopupAdmin.initPopupLibrary(); } $( document ).on( 'click.JetPopupEditConditions', '.jet-popup-conditions__edit-conditions', function ( event ) { let $this = $( this ), popupId = $this.data( 'popup-id' ); JetPopupAdmin.popupLibraryInstance.conditionsManagerPopupVisible = true; JetPopupAdmin.popupLibraryInstance.popupId = popupId; return false; } ); $( document ).on( 'click.JetPopupClearConditions', '.jet-popup-conditions__clear-conditions', function ( event ) { let $this = $( this ), popupId = $this.data( 'popup-id' ); JetPopupAdmin.popupLibraryInstance.popupId = popupId; JetPopupAdmin.popupLibraryInstance.clearConditions( popupId ); return false; } ); $( document ).on( 'click.JetPopupEditSettings', '.jet-popup-settings__edit-settings', function ( event ) { let $this = $( this ), popupId = $this.data( 'popup-id' ); JetPopupAdmin.popupLibraryInstance.settingsManagerPopupVisible = true; JetPopupAdmin.popupLibraryInstance.popupId = popupId; return false; } ); }, importInit: function() { if ( ! $( '#wpbody-content .page-title-action' )[0] ) { return false; } $( '#wpbody-content' ).find( '.page-title-action:last' ).after( `${ window.JetPopupLibraryConfig.labels.importButtonLabel }` ); let $newPopupButton = $( '.page-title-action[href*="post-new.php?post_type=jet-popup"]' ), $importButton = $( '#jet-popup-import-trigger' ); $newPopupButton.on( 'click', function( event ) { event.preventDefault(); JetPopupAdmin.popupLibraryInstance.createPopupVisible = true; } ); $importButton.on( 'click', function( event ) { event.preventDefault(); JetPopupAdmin.popupLibraryInstance.importPopupVisible = true; } ); }, presetLibraryInit: function() { Vue.config.devtools = true; Vue.component( 'preset-list', { template: '#preset-list-template', props: { presets: Array }, methods: { changePage: function( page ) { console.log(changePage); } } }); Vue.component( 'preset-item', { template: '#preset-item-template', props: { presetId: Number, title: String, thumbUrl: String, category: Array, categoryNames: Array, install: Number, required: Array, excerpt: String, details: Array, permalink: String, contentType: String }, data: function() { return { modalShow: false, } }, computed: { classList() { return [ 'jet-popup-library-page__item', `jet-popup-library-page__item--${ this.contentType }` ]; }, categoryName: function() { var name = 'None'; if ( 0 !== this.categoryNames.length ) { name = ''; this.categoryNames.forEach( function( item, i ) { name += item; } ); name = this.categoryNames.join( ', ' ); } return name; }, requiredPlugins: function() { var plugins = []; this.required.forEach( ( item, i ) => { if ( this.$root.requiredPluginData.hasOwnProperty( item ) ) { plugins.push( this.$root.requiredPluginData[item] ); } } ); return plugins; }, contentTypeIcon: function () { const contentTypeIcons = window.jetPopupData.contentTypeIcons, icon = contentTypeIcons.hasOwnProperty( this.contentType ) ? contentTypeIcons[ this.contentType ] : false; return icon; } }, methods: { openModal: function() { this.modalShow = true; eventBus.$emit( 'openIntallPopup', this.presetId ); }, } }); Vue.component( 'required-plugin', { template: '#required-plugin-template', props: { plugin: false, }, data: function() { return { actionPlugin: false, pluginActionStatus: false, actionPluginRequest: null, } }, computed: { classList() { return [ 'jet-popup-library-page__required-plugin-item', ]; }, pluginData: function() { if ( this.$root.requiredPluginData.hasOwnProperty( this.plugin ) ) { return this.$root.requiredPluginData[ this.plugin ]; } return false; }, pluginStatus: function() { return this.pluginData.status; }, installVisible: function() { if ( this.activateLicenseVisible ) { return false; } if ( ! this.pluginStatus.isInstalled ) { return true; } return false; }, activateVisible: function () { if ( this.activateLicenseVisible ) { return false; } if ( this.pluginStatus.isInstalled && ! this.pluginStatus.isActivated ) { return true; } return false; }, activateLicenseVisible: function () { if ( ! this.pluginData.license ) { return true; } return false; }, activatedLabelVisible: function () { if ( this.activateLicenseVisible ) { return false; } if ( this.pluginStatus.isInstalled && this.pluginStatus.isActivated ) { return true; } return false; } }, methods: { pluginAction: function ( action ) { this.actionPlugin = action; if ( 'activateLicense' === action ) { window.location.href = window.jetPopupData.licenseActivationLink; return false; } this.actionPluginRequest = jQuery.ajax( { type: 'POST', url: window.jetPopupData.ajaxUrl, dataType: 'json', data: { action: 'jet_plugin_action', data: { action: action, plugin: this.plugin, nonce: window.jetPopupData.pluginActionsNonce, } }, beforeSend: ( jqXHR, ajaxSettings ) => { if ( null !== this.actionPluginRequest ) { this.actionPluginRequest.abort(); } this.pluginActionStatus = true; }, success: ( response, textStatus, jqXHR ) => { this.pluginActionStatus = false; if ( 'success' === response.status ) { console.log(response.data); this.$CXNotice.add( { message: response.message, type: 'success', duration: 5000, } ); eventBus.$emit( 'updateRequiredPluginsData', this.plugin, response.data ); } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } } ); /*wp.apiFetch( { method: 'post', path: window.jetPopupData.pluginActionPath, data: { action: action, plugin_file: this.pluginData['plugin_file'], source: this.pluginData['source'], }, } ).then( ( response ) => { this.pluginActionStatus = false; console.log(response) if ( response.success ) { } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } );*/ } } }); Vue.component( 'presetlibrary', { template: '#preset-library-template', data: function() { return ({ spinnerShow: true, presetsLoaded: false, presetsLoadedError: false, categoriesLoaded: false, presetsData: [], categoryData: [], activeCategories: [], presetsLength: false, installPopupVisible: false, inactiveLicenseVisible: false, page: 1, perPage: 12, preset: false, filterBy: 'date', contentType: 'all', filterByOptions: [ { label: 'Date', value: 'date' }, { label: 'Name', value: 'name' }, { label: 'Popular', value: 'popular' }, ] }) }, mounted: function() { var libraryPresetsUrl = window.jetPopupData.libraryPresetsUrl, libraryPresetsCategoryUrl = window.jetPopupData.libraryPresetsCategoryUrl, categories = [], presets = [], vueInstance = this; axios.get( libraryPresetsUrl, { params: { content_type: this.contentTypes, } } ).then( function ( response ) { var data = response.data; if ( data.success ) { for ( var preset in data.presets ) { var presetData = data.presets[ preset ]; presets.push( { id: presetData['id'], title: presetData['title'], thumb: presetData['thumb'], category: presetData['category'], categoryNames: presetData['category_names'], order: presetData['order'], install: +presetData['install'], required: presetData['required'], excerpt: presetData['excerpt'], details: presetData['details'], permalink: presetData['permalink'], contentType: presetData['content_type'], } ); } vueInstance.presetsData = presets; vueInstance.spinnerShow = false; vueInstance.presetsLoaded = true; } else { vueInstance.spinnerShow = false; vueInstance.presetsLoadedError = true; } }).catch(function (error) { // handle error vueInstance.spinnerShow = false; vueInstance.presetsLoadedError = true; vueInstance.presetsData = []; }); axios.get( libraryPresetsCategoryUrl ).then( function ( response ) { var data = response.data; if ( data.success ) { for ( var category in data.categories ) { categories.push( { id: category, label: data.categories[category], state: false } ); } vueInstance.categoryData = categories; } vueInstance.categoriesLoaded = true; }).catch( function ( error ) { vueInstance.categoryData = []; }); // Bus Events eventBus.$on( 'openIntallPopup', function( presetId ) { vueInstance.preset = presetId; if ( 'true' === window.jetPopupData.pluginActivated ) { vueInstance.installPopupVisible = true; } else { vueInstance.inactiveLicenseVisible = true; } } ); }, computed: { presetList: function() { var currentCategories = [], currentPage = this.page, perPage = this.perPage, filteredData = []; filteredData = this.presetsData.filter( ( preset, index ) => { var flag = false; flag = this.categoryData.every( ( category ) => { return 'false' === category.state || false === category.state; } ); for ( var category in this.categoryData ) { if ( 'true' === this.categoryData[ category ]['state'] && preset.category.includes( this.categoryData[ category ]['id'] ) ) { flag = true; break; } } return flag; } ); filteredData = filteredData.filter( ( preset, index ) => { return preset.contentType === this.contentType || 'all' === this.contentType ; } ); this.presetsLength = filteredData.length; filteredData = filteredData.filter( ( preset, index ) => { var flag = false, left = ( currentPage - 1 ) * perPage, right = left + perPage; if ( index >= left && index < right ) { flag = true; } return flag; } ); return filteredData; }, categoryList: function () { return this.categoryData.filter( ( category ) => { return this.presetsData.some( function ( preset ) { return preset.category.includes( category.id ); } ); } ); }, isShowPagination: function() { return this.presetsLength > this.perPage; }, contentTypes: function () { const options = window.jetPopupData.contentTypeOptions || []; return options.map( ( item ) => { return item.value; } ); }, contentTypeOptions: function () { let allOption = [ { label: 'All', value: 'all', } ], contentTypeOptions = window.jetPopupData.contentTypeOptions || []; return [ ...allOption, ...contentTypeOptions ]; }, isContentTypeFilter: function() { return this.contentTypes.length > 1; }, presetRequiredPlugins: function() { if ( ! this.preset ) { return false; } const index = this.presetsData.findIndex( ( preset, index ) => { return preset.id === this.preset; } ); if ( -1 === index ) { return false; } const presetData = this.presetsData[ index ]; if ( ! presetData ) { return false; } const requiredPlugins = presetData.required; if ( 0 === requiredPlugins.length ) { return false; } return requiredPlugins; }, }, methods: { filterByCategory: function() { this.page = 1; }, filterByHandler: function() { this.page = 1; switch( this.filterBy ) { case 'date': this.presetsData.sort( function ( a, b ) { return a.order - b.order; }); break; case 'name': this.presetsData.sort( function ( a, b ) { var aTitle = a.title.toLowerCase(), bTitle = b.title.toLowerCase(); if ( aTitle > bTitle ) { return 1; } if ( aTitle < bTitle ) { return -1; } return 0; }); break; case 'popular': this.presetsData.sort( function ( a, b ) { return b.install - a.install; }); break; } }, contentTypeHandler: function ( type ) {}, changePage: function( page ) { this.page = page; }, createPopup: function() { window.location.href = window.jetPopupData.createPopupLink + '&preset=' + this.preset; }, activateLicense: function() { window.location.href = window.jetPopupData.licenseActivationLink; }, } }); var eventBus = new Vue(); var libraryPage = new Vue( { el: '#jet-popup-library-page', data: function () { return ( { requiredPluginData: window.jetPopupData.requiredPluginData || {} } ); }, mounted: function () { eventBus.$on( 'updateRequiredPluginsData', ( plugin, status ) => { this.requiredPluginData[ plugin ]['status'] = status; } ); }, } ); }, settingPageInit: function() { Vue.config.devtools = true; Vue.component( 'mailchimp-list-item', { template: '#mailchimp-list-item-template', props: { list: Object, apikey: String }, data: function() { return { mergeFieldsStatusLoading: false } }, computed: { isMergeFields: function() { return this.list.hasOwnProperty( 'mergeFields' ) && ! jQuery.isEmptyObject( this.list[ 'mergeFields' ] ) ? true : false; } }, methods: { getMergeFields: function() { var vueInstance = this; jQuery.ajax( { type: 'POST', url: ajaxurl, data: { 'action': 'get_mailchimp_list_merge_fields', 'apikey': this.apikey, 'listid': this.list.id }, beforeSend: function( jqXHR, ajaxSettings ) { vueInstance.mergeFieldsStatusLoading = true; }, error: function( data, jqXHR, ajaxSettings ) { }, success: function( data, textStatus, jqXHR ) { vueInstance.mergeFieldsStatusLoading = false; switch ( data.type ) { case 'success': vueInstance.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); eventBus.$emit( 'updateListMergeFields', data.request ); break; case 'error': vueInstance.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); } } }); Vue.component( 'settingsform', { template: '#settings-form-template', data: function() { return ( { saveStatusLoading: false, syncStatusLoading: false, mergeFieldsStatusLoading: false, collapse: 'mailChimpPanel', settingsData: { 'apikey': '' }, mailchimpAccountData: {}, mailchimpListsData: {} } ) }, computed: { isMailchimpAccountData: function() { return ! jQuery.isEmptyObject( this.mailchimpAccountData ) ? true : false; }, isMailchimpListsData: function() { return ! jQuery.isEmptyObject( this.mailchimpListsData ) ? true : false; } }, created: function() { var vueInstance = this, settings = window.jetPopupAdminData.settings, mailchimpApiData = window.jetPopupAdminData.mailchimpApiData; this.settingsData = settings; if ( mailchimpApiData.hasOwnProperty( settings['apikey'] ) ) { var user = mailchimpApiData[ settings['apikey'] ]; if ( user.hasOwnProperty( 'account' ) ) { var account = user.account; this.mailchimpAccountData = { account_id: account.account_id, username: account.username || '-', first_name: account.first_name || '-', last_name: account.last_name || '-', avatar_url: account.avatar_url }; } if ( user.hasOwnProperty( 'lists' ) ) { var lists = user.lists, tempLists = {}; if ( ! jQuery.isEmptyObject( lists ) ) { for ( var key in lists ) { var listInfo = lists[ key ]['info'], mergeFields = lists[ key ]['merge_fields'] || [], mergeFieldsTemp = {}; mergeFields.forEach( function( field, i, arr ) { mergeFieldsTemp[ field['tag'] ] = field['name']; } ); tempLists[ key ] = { id: listInfo.id, name: listInfo.name, memberCount: listInfo.stats.member_count, doubleOptin: listInfo.double_optin, dateCreated: listInfo.date_created, mergeFields: mergeFieldsTemp }; } } this.mailchimpListsData = tempLists; } } // Bus Events eventBus.$on( 'updateListMergeFields', function ( request ) { var listid = request.list_id, mergeFields = request.merge_fields, mergeFieldsTemp = {}; for ( key in mergeFields ) { var fieldData = mergeFields[ key ]; mergeFieldsTemp[ fieldData['tag'] ] = fieldData['name']; } Vue.set( vueInstance.mailchimpListsData[ listid ], 'mergeFields', mergeFieldsTemp ); }); }, methods: { mailchimpSync: function() { var vueInstance = this; jQuery.ajax( { type: 'POST', url: ajaxurl, data: { 'action': 'get_mailchimp_user_data', 'apikey': this.settingsData.apikey }, beforeSend: function( jqXHR, ajaxSettings ) { vueInstance.syncStatusLoading = true; }, error: function( jqXHR, ajaxSettings ) {}, success: function( data, textStatus, jqXHR ) { switch ( data.type ) { case 'success': var dataRequest = data.request; vueInstance.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); vueInstance.mailchimpAccountData = { account_id: dataRequest.account_id, username: dataRequest.username || '-', first_name: dataRequest.first_name || '-', last_name: dataRequest.last_name || '-', avatar_url: dataRequest.avatar_url }; vueInstance.mailchimpSyncLists(); break; case 'error': vueInstance.syncStatusLoading = false; vueInstance.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); }, mailchimpSyncLists: function() { var vueInstance = this; jQuery.ajax( { type: 'POST', url: ajaxurl, data: { 'action': 'get_mailchimp_lists', 'apikey': this.settingsData.apikey }, beforeSend: function( jqXHR, ajaxSettings ) { vueInstance.syncStatusLoading = true; }, error: function( jqXHR, ajaxSettings ) { }, success: function( data, textStatus, jqXHR ) { vueInstance.syncStatusLoading = false; switch ( data.type ) { case 'success': vueInstance.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); var request = data.request; if ( request.hasOwnProperty( 'lists' ) ) { var lists = request['lists'], tempLists = {}; for ( var key in lists ) { var listData = lists[ key ]; tempLists[ listData.id ] = { id: listData.id, name: listData.name, memberCount: listData.stats.member_count, doubleOptin: listData.double_optin, dateCreated: listData.date_created } } vueInstance.mailchimpListsData = tempLists; } break; case 'error': vueInstance.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); }, saveSettings: function() { var vueInstance = this, data = { 'action': 'jet_popup_save_settings', 'data': this.settingsData }; jQuery.ajax( { type: 'POST', url: ajaxurl, data: data, beforeSend: function( jqXHR, ajaxSettings ) { vueInstance.saveStatusLoading = true; }, error: function( data, jqXHR, ajaxSettings ) { }, success: function( data, textStatus, jqXHR ) { vueInstance.saveStatusLoading = false; switch ( data.type ) { case 'success': vueInstance.$CXNotice.add( { message: data.desc, type: 'success', duration: 3000, } ); break; case 'error': vueInstance.$CXNotice.add( { message: data.desc, type: 'error', duration: 3000, } ); break; } } } ); } } }); var eventBus = new Vue(); var settingsPage = new Vue( { el: '#jet-popup-settings-page', } ); }, initPopupLibrary: function() { Vue.component( 'jet-popup-library-conditions-item', { template: '#tmpl-jet-popup-library-conditions-item', props: { id: String, rawCondition: Object }, data: function() { return ( { сondition: this.rawCondition, requestLoading: false, remoteOptionsList: [], } ) }, created: function() {}, watch: { 'сondition.group': function( curr ) { if ( this.subGroupAvaliable ) { let subGroups = this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'], subGroupsKeys = Object.keys( subGroups ); if ( 0 !== subGroupsKeys.length ) { this.сondition.subGroup = subGroupsKeys[0]; switch ( this.subGroupValueControl.type ) { case 'f-select': case 'f-search-select': this.сondition.subGroupValue = []; break; default: this.сondition.subGroupValue = ''; break; } } this.remoteOptionsList = []; } }, 'сondition.subGroup': function( curr ) { if ( this.subGroupAvaliable ) { this.сondition.subGroupValue = ''; this.remoteOptionsList = []; } } }, computed: { groupVisible: function() { return true; }, subGroupVisible: function() { return 0 !== this.subGroupOptions.length ? true : false; }, subGroupValueVisible: function() { return this.subGroupValueControl ? true : false; }, subGroupValueControl: function() { if ( ! this.subGroupAvaliable ) { return false; } if ( ! this.$root.rawConditionsData.hasOwnProperty( this.сondition.group )) { return false; } if ( ! this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'].hasOwnProperty( this.сondition.subGroup )) { return false; } let subGroupData = this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'][ this.сondition.subGroup ]; return subGroupData.control; }, subGroupItemAction: function() { if ( ! this.subGroupAvaliable ) { return false; } if ( ! this.$root.rawConditionsData.hasOwnProperty( this.сondition.group )) { return false; } if ( ! this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'].hasOwnProperty( this.сondition.subGroup )) { return false; } let subGroupData = this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'][ this.сondition.subGroup ]; return subGroupData.action; }, isSearch: function () { return 'f-search-select' === this.subGroupValueControl.type ? true : false; }, groupOptions: function() { let groupList = [], groups = this.$root.rawConditionsData; for ( let group in groups ) { groupList.push( { value: group, label: groups[ group ]['label'] } ); } return groupList; }, subGroupAvaliable: function() { return this.$root.rawConditionsData[ this.сondition.group ].hasOwnProperty( 'sub-groups' ); }, subGroupOptions: function() { return this.$root.rawConditionsData[ this.сondition.group ]['options']; }, subGroupValueOptions: function() { let optionsList = []; if ( this.remoteOptionsList.length ) { return this.remoteOptionsList; } if ( ! this.subGroupAvaliable ) { return optionsList; } if ( ! this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'].hasOwnProperty( this.сondition.subGroup ) ) { return optionsList; } let subGroupData = this.$root.rawConditionsData[ this.сondition.group ]['sub-groups'][ this.сondition.subGroup ]; if ( subGroupData.options ) { return subGroupData.options; } if ( this.subGroupItemAction && ! this.isSearch ) { this.getRemoteItems(); } return optionsList; } }, methods: { deleteCondition: function() { JetPopupLibraryAdminEventBus.$emit( 'removeCondition', this.id ); }, remoteSearchHandler: function ( $query, $values ) { let requestData = Object.assign( {}, this.subGroupItemAction.params, { query: $query, values: $values, } ); return wp.apiFetch( { method: 'post', path: `/jet-popup/v2/${ this.subGroupItemAction.action }`, data: requestData, } ); }, onChangeRemoteOptionsHandler: function( options ) { this.remoteOptionsList = options; }, getRemoteItems: function( query = '' ) { let vueInstance = this; let requestData = this.subGroupItemAction.params; vueInstance.requestLoading = true; wp.apiFetch( { method: 'post', path: `/jet-popup/v2/${ this.subGroupItemAction.action }`, data: requestData, } ).then( function( response ) { vueInstance.requestLoading = false; vueInstance.$set( vueInstance.$root.rawConditionsData[ vueInstance.сondition.group ]['sub-groups'][ vueInstance.сondition.subGroup ], 'options', response ); } ); } }, } ); Vue.component( 'jet-popup-library-conditions-manager', { template: '#tmpl-jet-popup-library-conditions-manager', props: { popupId: Number }, data: function() { return ( { conditions: [], relationType: 'or', saveConditionsStatus: false, getConditionsStatus: false, } ) }, created: function() { var vueInstance = this; JetPopupLibraryAdminEventBus.$on( 'removeCondition', function ( id ) { let templateConditions = vueInstance.conditions; vueInstance.conditions = templateConditions.filter( function( condition ) { return condition['id'] !== id; } ); } ); this.getPopupConditions(); }, computed: { emptyConditions: function() { return ( 0 === this.conditions.length ) ? true : false; }, popupConditions: function() { return this.conditions; } }, methods: { addCondition: function() { var newCond = { id: this.$root.genetateUniqId(), include: 'true', group: 'entire', subGroup: 'entire', subGroupValue: '' }; this.conditions.unshift( newCond ); }, getPopupConditions: function () { this.getConditionsStatus = true; wp.apiFetch( { method: 'post', path: window.JetPopupLibraryConfig.getPopupConditionsPath, data: { popup_id: this.popupId, }, } ).then( ( response ) => { this.getConditionsStatus = false; if ( response.success ) { this.relationType = response.data.relationType; this.conditions = response.data.conditions; } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } ); }, closeConditionsManagerPopupHandler: function () { this.$root.conditionsManagerPopupVisible = false; }, saveConditions: function() { this.saveConditionsStatus = true; wp.apiFetch( { method: 'post', path: window.JetPopupLibraryConfig.updatePopupConditionsPath, data: { popup_id: this.popupId, conditions: this.conditions, relation_type: this.relationType, }, } ).then( ( response ) => { this.saveConditionsStatus = false; if ( response.success ) { this.closeConditionsManagerPopupHandler(); // Rerender verbose html $( `.jet-popup-conditions[data-popup-id="${ this.popupId }"] .jet-popup-conditions-list` ).html( response.data.verboseHtml ); this.$CXNotice.add( { message: response.message, type: 'success', duration: 5000, } ); } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } ); } } } ); Vue.component( 'jet-popup-library-create-popup-form', { template: '#tmpl-jet-popup-library-create-popup-form', data: function() { return ( { popupCreatingStatus: false, isPopupCreated: false, rawPresetsData: window.JetPopupLibraryConfig.presetsData || [], contentTypeOptions: window.JetPopupLibraryConfig.contentTypeOptions || [], newPopupData: { name: '', preset: false, contentType: window.JetPopupLibraryConfig.defaultContentType || 'default', } } ) }, computed: { presetsList: function () { return this.rawPresetsData.map( ( presetData) => { presetData.checked = presetData.id === this.newPopupData.preset; return presetData; } ); }, contentTypeOptionVisible: function () { return true; }, presetsListVisible: function () { let allowedMap = [ 'default', 'elementor' ]; return allowedMap.includes( this.newPopupData.contentType ); } }, methods: { closeCreatePopupHandler: function () { this.$root.createPopupVisible = false; }, choosePresetHandler: function ( preset ) { if ( preset !== this.newPopupData.preset ) { this.newPopupData.preset = preset; } else { this.newPopupData.preset = false; } }, createPopupHandler: function () { this.popupCreatingStatus = true; wp.apiFetch( { method: 'post', path: window.JetPopupLibraryConfig.createPopupPath, data: { preset: this.newPopupData.preset, contentType: this.newPopupData.contentType, name: this.newPopupData.name, }, } ).then( ( response ) => { if ( response.success ) { this.isPopupCreated = true; if ( response.data.redirect ) { setTimeout( () => { window.open( response.data.redirect, '_self' ).focus(); }, 2000 ); } this.$CXNotice.add( { message: response.message, type: 'success', duration: 5000, } ); } else { this.popupCreatingStatus = false; this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } ); } } } ); Vue.component( 'jet-popup-library-import-popup-form', { template: '#tmpl-jet-popup-library-import-popup-form', data: function() { return ( { importAction: window.JetPopupLibraryConfig.popupImportAction || false, } ) }, methods: { closeImportPopupHandler: function () { this.$root.importPopupVisible = false; }, } } ); Vue.component( 'jet-popup-library-settings-manager', { template: '#tmpl-jet-popup-library-settings-manager', props: { popupId: Number }, data: function() { return ( { settings: [], saveSettingsStatus: false, getSettingsStatus: false, debounceSavingInterval: null, onDateValue: '', onDateTimeValue: '', contentType: 'default', } ) }, watch: { onDateValue: function ( curr ) { this.settings['jet_popup_on_date_value'] = curr + ' ' + this.onDateTimeValue; }, onDateTimeValue: function ( curr ) { let currTime = curr.length ? curr : '00:00'; this.settings['jet_popup_on_date_value'] = this.onDateValue + ' ' + currTime; }, settings: { handler( options, prevOptions ) { if ( 0 === Object.keys( prevOptions ).length ) { return; } clearInterval( this.debounceSavingInterval ); //this.debounceSavingInterval = setTimeout( this.saveSettings, 1000 ); }, deep: true } }, created: function() { var vueInstance = this; this.getPopupSettings(); }, computed: { popupSettings: function() { return this.settings; }, animationTypeOptions: function () { return window.JetPopupLibraryConfig.popupAnimationTypeOptions || []; }, triggerTypeOptions: function () { return window.JetPopupLibraryConfig.popupOpenTriggerOptions || []; }, timeDelayTypeOptions: function () { return window.JetPopupLibraryConfig.popupTimeDelayOptions || []; }, triggerTypeCloseOptions: function () { return window.JetPopupLibraryConfig.popupCloseOptions || []; }, isCloseIconSettingVisible: function () { if ( 'elementor' === this.contentType ) { return false } return ( 'yes' === this.settings['use_close_button'] || true === this.settings['use_close_button'] ) ? true : false; } }, methods: { closeSettingsManagerPopupHandler: function () { this.$root.settingsManagerPopupVisible = false; }, getPopupSettings: function () { this.getSettingsStatus = true; wp.apiFetch( { method: 'post', path: window.JetPopupLibraryConfig.getPopupSettingsPath, data: { popup_id: this.popupId, }, } ).then( ( response ) => { this.getSettingsStatus = false; if ( response.success ) { let settings = response.data.settings; if ( settings.hasOwnProperty( 'jet_popup_on_date_value' ) ) { let dateTimeData = settings.jet_popup_on_date_value.split( ' ' ); this.onDateValue = dateTimeData[0] || ''; this.onDateTimeValue = dateTimeData[1] || ''; } this.settings = settings; this.contentType = response.data.contentType; } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } ); }, saveSettings: function() { this.saveSettingsStatus = true; //this.$root.savePopupSettingsStatus = true; wp.apiFetch( { method: 'post', path: window.JetPopupLibraryConfig.updatePopupSettingsPath, data: { popup_id: this.popupId, settings: this.settings, }, } ).then( ( response ) => { this.saveSettingsStatus = false; //this.$root.savePopupSettingsStatus = false; if ( response.success ) { // Rerender verbose html $( `.jet-popup-settings[data-popup-id="${ this.popupId }"] .jet-popup-settings-list` ).html( response.data.verboseHtml ); this.closeSettingsManagerPopupHandler(); /*this.$CXNotice.add( { message: response.message, type: 'success', duration: 5000, } );*/ } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } ); } } } ); this.popupLibraryInstance = new Vue( { el: '#jet-popup-library', data: { isMounted: false, getPopupConditionsStatus: false, conditionsManagerPopupVisible: false, createPopupVisible: false, importPopupVisible: false, settingsManagerPopupVisible: false, savePopupSettingsStatus: false, savePopupConditionsStatus: false, rawConditionsData: window.JetPopupLibraryConfig.rawConditionsData || [], popupId: 0, urlLibraryAction: false, urlPopupId: false }, mounted: function() { this.isMounted = true; const urlParams = new URLSearchParams( window.location.href ); this.urlLibraryAction = urlParams.get( 'library_action' ) || false; this.urlPopupId = +urlParams.get( 'popup_id' ) || false; if ( this.urlLibraryAction || this.urlPopupId ) { switch ( this.urlLibraryAction ) { case 'edit_conditions': this.popupId = this.urlPopupId; this.conditionsManagerPopupVisible = true; break; case 'edit_settings': this.popupId = this.urlPopupId; this.settingsManagerPopupVisible = true; break; case 'open_create_new_popup': this.createPopupVisible = true; break; } } }, computed: { itemClasses() { return [ 'jet-popup-library', this.isMounted ? 'is-mounted' : '', ]; }, progressStatus() { return this.savePopupSettingsStatus || this.savePopupConditionsStatus; } }, methods: { genetateUniqId: function() { return '_' + Math.random().toString(36).substr(2, 9); }, closeCreatePopupHandler: function () { this.createPopupVisible = false; }, closeImportPopupHandler: function () { this.importPopupVisible = false; }, closeConditionsManagerPopupHandler: function () { this.conditionsManagerPopupVisible = false; }, closeSettingsManagerPopupHandler: function () { this.settingsManagerPopupVisible = false; }, clearConditions: function( popupId ) { wp.apiFetch( { method: 'post', path: window.JetPopupLibraryConfig.updatePopupConditionsPath, data: { popup_id: popupId, conditions: [], relation_type: 'or', }, } ).then( ( response ) => { if ( response.success ) { console.log(this.popupId) console.log($( `.jet-popup-conditions[data-popup-id="${ this.popupId }"] .jet-popup-conditions-list` )) console.log(response.data.verboseHtml) // Rerender verbose html $( `.jet-popup-conditions[data-popup-id="${ this.popupId }"] .jet-popup-conditions-list` ).html( response.data.verboseHtml ); this.$CXNotice.add( { message: response.message, type: 'success', duration: 5000, } ); } else { this.$CXNotice.add( { message: response.message, type: 'error', duration: 5000, } ); } } ); } } } ); }, }; JetPopupAdmin.init(); }( jQuery ) );