/home/crealab/pueblito.brainware.com.co/wp-content/plugins/jet-popup/assets/js/jet-popup-admin.js
( 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( `<a id="jet-popup-import-trigger" href="#" class="page-title-action">${ window.JetPopupLibraryConfig.labels.importButtonLabel }</a>` );
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: '',
onDateValueStart: '',
onDateTimeValueStart: '',
onDateValueEnd: '',
onDateTimeValueEnd: '',
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;
},
onDateValueStart: function ( curr ) {
this.settings['jet_popup_start_date_and_time'] = curr + ' ' + this.onDateTimeValueStart;
},
onDateTimeValueStart: function ( curr ) {
let currTime = curr.length ? curr : '00:00';
this.settings['jet_popup_start_date_and_time'] = this.onDateValueStart + ' ' + currTime;
},
onDateValueEnd: function ( curr ) {
this.settings['jet_popup_end_date_and_time'] = curr + ' ' + this.onDateTimeValueEnd;
},
onDateTimeValueEnd: function ( curr ) {
let currTime = curr.length ? curr : '00:00';
this.settings['jet_popup_end_date_and_time'] = this.onDateValueEnd + ' ' + 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] || '';
}
if ( settings.hasOwnProperty( 'jet_popup_start_date_and_time' ) ) {
let dateTimeDataStart = settings.jet_popup_start_date_and_time.split( ' ' );
this.onDateValueStart = dateTimeDataStart[0] || '';
this.onDateTimeValueStart = dateTimeDataStart[1] || '';
}
if ( settings.hasOwnProperty( 'jet_popup_end_date_and_time' ) ) {
let dateTimeDataEnd = settings.jet_popup_end_date_and_time.split( ' ' );
this.onDateValueEnd = dateTimeDataEnd[0] || '';
this.onDateTimeValueEnd = dateTimeDataEnd[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 ) );