Vue.component( 'jet-engine-shortcode-generator', { name: 'jet-engine-shortcode-generator', template: '#jet-engine-shortcode-generator', data: function() { const { sources, object_fields: objectFields, source_args: sourceArgs, meta_fields: metaFields, options_pages: optionsPages, callbacks, cb_args: cbArgs, context_list: contextList, labels, shortcode_types: shortcodeTypes, tag_type: tagType, } = window.JetEngineDashboardConfig.shortode_generator; return { sources, objectFields, sourceArgs, metaFields, optionsPages, callbacks, cbArgs, contextList, labels, shortcodeTypes, tagType, shortcode: '[jet_engine_data ]', controls: {}, showCopyShortcode: undefined !== navigator.clipboard && undefined !== navigator.clipboard.writeText, attrs: { shortcode_types: 'jet_engine_data', tag_type: 'selfclosed', }, copied: false, }; }, created: function() { const addControl = (name, config) => this.addControl(name, config); if ( 1 < this.shortcodeTypes.length ) { addControl( 'shortcode_types', { label: this.labels.shortcode_types.label, description: this.labels.shortcode_types.description, type: 'select', default: 'jet_engine_data', options: this.shortcodeTypes, } ); } const conditionJetEngineData = { 'shortcode_types': 'jet_engine_data', }; addControl( 'dynamic_field_source', { label: this.labels.dynamic_field_source.label, type: 'select', default: 'object', options: this.sources, condition: conditionJetEngineData, } ); addControl( 'dynamic_field_post_object', { label: this.labels.dynamic_field_post_object.label, type: 'select', default: 'post_title', groups: this.objectFields, condition: { ...conditionJetEngineData, 'dynamic_field_source': 'object', }, } ); addControl( 'dynamic_field_wp_excerpt', { label: this.labels.dynamic_field_wp_excerpt.label, type: 'switcher', default: '', condition: { ...conditionJetEngineData, 'dynamic_field_source': 'object', 'dynamic_field_post_object': 'post_excerpt', }, } ); addControl( 'dynamic_excerpt_more', { label: this.labels.dynamic_excerpt_more.label, type: 'text', default: '...', condition: { ...conditionJetEngineData, 'dynamic_field_source': 'object', 'dynamic_field_post_object': 'post_excerpt', }, } ); addControl( 'dynamic_excerpt_length', { label: this.labels.dynamic_excerpt_length.label, type: 'text', default: 0, condition: { ...conditionJetEngineData, 'dynamic_field_source': 'object', 'dynamic_field_post_object': 'post_excerpt', }, } ); addControl( 'dynamic_field_post_meta', { label: this.labels.dynamic_field_post_meta.label, type: 'select', default: '', groups: this.metaFields, condition: { ...conditionJetEngineData, 'dynamic_field_source': 'meta', }, } ); addControl( 'dynamic_field_option', { label: this.labels.dynamic_field_option.label, type: 'select', default: '', groups: this.optionsPages, condition: { ...conditionJetEngineData, 'dynamic_field_source': 'options_page', }, } ); addControl( 'dynamic_field_var_name', { label: this.labels.dynamic_field_var_name.label, type: 'text', default: '', condition: { ...conditionJetEngineData, 'dynamic_field_source': 'query_var', }, } ); if ( this.sourceArgs && this.sourceArgs.length ) { for (var i = 0; i < this.sourceArgs.length; i++) { addControl( this.sourceArgs[ i ].name, this.sourceArgs[ i ].data ); } } addControl( 'dynamic_field_post_meta_custom', { label: this.labels.dynamic_field_post_meta_custom.label, type: 'text', default: '', description: this.labels.dynamic_field_post_meta_custom.description, condition: { ...conditionJetEngineData, 'dynamic_field_source!': [ 'query_var', 'options_page', 'relations_hierarchy' ], }, } ); addControl( 'hide_if_empty', { label: this.labels.hide_if_empty.label, type: 'switcher', default: '', condition: conditionJetEngineData, } ); addControl( 'field_fallback', { label: this.labels.field_fallback.label, type: 'text', default: '', condition: { ...conditionJetEngineData, 'hide_if_empty': false, }, } ); addControl( 'dynamic_field_filter', { label: this.labels.dynamic_field_filter.label, type: 'switcher', default: '', condition: conditionJetEngineData, } ); const repeaterFields = {}; repeaterFields.filter_callback = { label: this.labels.filter_callback.label, type: 'select', default: '', options: this.callbacks, condition: conditionJetEngineData, }; for ( const [ fieldName, fieldData ] of Object.entries( this.cbArgs ) ) { repeaterFields[ fieldName ] = fieldData; } addControl( 'filter_callbacks', { label: 'Applied Callbacks', type: 'repeater', title: 'filter_callback', fields: repeaterFields, condition: { ...conditionJetEngineData, 'dynamic_field_filter': 'yes', }, } ); this.$set( this.attrs, 'filter_callbacks', [] ); addControl( 'dynamic_field_custom', { label: this.labels.dynamic_field_custom.label, type: 'switcher', default: '', condition: conditionJetEngineData, } ); addControl( 'dynamic_field_format', { label: this.labels.dynamic_field_format.label, type: 'textarea', default: '%s', description: this.labels.dynamic_field_format.description, condition: { ...conditionJetEngineData, 'dynamic_field_custom': 'yes', }, } ); addControl( 'object_context', { label: this.labels.object_context.label, type: 'select', default: 'default_object', options: this.contextList, condition: conditionJetEngineData, } ); addControl( 'tag_type', { label: this.labels.tag_type.label, description: this.labels.tag_type.description, type: 'select', default: 'selfclosed', options: this.tagType, condition: { 'shortcode_types!': 'jet_engine_data', }, } ); window.JetPlugins.hooks.doAction( 'jetEngine.shortcodeGenerator.controls', addControl, this ); }, computed: { generatedShortcode: function() { let isEnclosing = false; let currentTag = this.attrs.shortcode_types || 'jet_engine_data'; var result = '[' + currentTag; const attrsToParse = []; for ( const attr in this.attrs ) { if ( ! this.isVisible( this.controls[ attr ] ) ) { continue; } let value = this.attrs[ attr ]; if ( 'shortcode_types' === attr ) { continue; } if ( 'tag_type' === attr ) { if ( 'enclosed' === value ) { isEnclosing = true; } continue; } if ( value === this.controls[ attr ].default ) { continue; } if ( value instanceof Array ) { let toString = []; for ( var i = 0; i < value.length; i++ ) { if ( ! value[ i ] || 'object' !== typeof value[ i ] || Array.isArray( value[ i ] ) ) { toString.push( value[ i ] ); if ( ! attrsToParse.includes( attr ) ) { attrsToParse.push( attr ); } continue; } let row = { ...value[ i ] }; if ( undefined !== row._id ) { delete row._id; } if ( undefined !== row.collapsed ) { delete row.collapsed; } for ( const prop in row ) { let field = this.controls[ attr ].fields[ prop ] if ( ! this.isRepeaterFieldVisible( field, row ) ) { delete row[ prop ]; } } row = new URLSearchParams( row ); toString.push( '{' + row.toString() + '}' ); } value = toString.join( ',' ); } else { value = JSON.stringify( value ); } result += ' ' + attr + '=' + value; } if ( attrsToParse.length ) { result += ' _parse_attrs=' + attrsToParse.join( ',' ); } result += ']'; if ( isEnclosing ) { result += 'Add your content here...[/' + currentTag + ']'; } return result; }, }, methods: { addControl: function( name, data ) { const preparedControls = this.getPreparedControls( { [name]: data } ); for ( var i = 0; i < preparedControls.length; i++ ) { this.$set( this.controls, preparedControls[ i ].name, preparedControls[ i ] ); } }, addNewItem: function( event, props, parent, control, callback ) { props = props || []; var field = {}; for ( const prop in control.fields ) { if ( control.fields[ prop ].default ) { field[ prop ] = control.fields[ prop ].default; } } field._id = Math.round( Math.random() * 1000000 ); field.collapsed = false; parent.push( field ); if ( callback && 'function' === typeof callback ) { callback( field, parent ); } }, deleteItemProp: function( id, key, parent ) { let index = this.searchByID( id, parent ); if ( false === index ) { return; } let field = parent[ index ]; delete field[ key ]; parent.splice( index, 1, field ); }, setItemProp: function( id, key, value, parent ) { let index = this.searchByID( id, parent ); if ( false === index ) { return; } let field = parent[ index ]; field[ key ] = value; parent.splice( index, 1, field ); }, cloneItem: function( index, id, parent, callback ) { let field = JSON.parse( JSON.stringify( parent[ index ] ) ); field.collapsed = false; field._id = Math.round( Math.random() * 1000000 ); parent.splice( index + 1, 0, field ); if ( callback && 'function' === typeof callback ) { callback( field, parent, id ); } }, deleteItem: function( index, id, parent, callback ) { index = this.searchByID( id, parent ); if ( false === index ) { return; } parent.splice( index, 1 ); if ( callback && 'function' === typeof callback ) { callback( id, index, parent ); } }, isCollapsed: function( parent ) { if ( undefined === parent.collapsed || true === parent.collapsed ) { return true; } else { return false; } }, searchByID: function( id, list ) { for ( var i = 0; i < list.length; i++ ) { if ( id == list[ i ]._id ) { return i; } } return false; }, getPreparedControls: function( inputControls ) { controls = []; for ( const controlID in inputControls ) { let control = inputControls[ controlID ]; let optionsList = []; let type = control.type; let label = control.label; let description = control.description || ''; let defaultVal = control.default; let groupsList = []; let condition = control.condition || {}; let fields = false; let title = false; let multiple = false; let inputType = 'text'; switch ( control.type ) { case 'text': type = 'cx-vui-input'; break; case 'number': type = 'cx-vui-input'; inputType = 'number'; break; case 'textarea': type = 'cx-vui-textarea'; break; case 'switcher': type = 'cx-vui-switcher'; if ( 'yes' === defaultVal || 'true' === defaultVal ) { defaultVal = true; } else { defaultVal = false; } break; case 'repeater': type = 'repeater'; title = control.title; fields = control.fields; break; case 'select': type = 'cx-vui-select'; if ( control.groups ) { groupsList = this.prepareGroupsList(control.groups); } else { optionsList = this.prepareOptionsList(control.options); } break; case 'select2': type = 'cx-vui-f-select'; multiple = control.multiple; optionsList = this.prepareOptionsList(control.options); break; } if ( undefined === this.attrs[ controlID ] ) { this.$set( this.attrs, controlID, defaultVal ); } controls.push( { type, name: controlID, label, description, default: defaultVal, optionsList, multiple, groupsList, condition, fields, title: control.title, inputType, } ); } return controls; }, prepareGroupsList: function(groups) { const groupsList = []; for ( var i = 0; i < groups.length; i++) { let group = groups[ i ]; let groupOptions = []; if ( group.options ) { groupOptions = this.prepareOptionsList(group.options); } else if ( group.values ) { for ( var j = 0; j < group.values.length; j++ ) { groupOptions.push( group.values[ j ] ); } } groupsList.push( { label: group.label, options: groupOptions, } ); } return groupsList; }, prepareOptionsList: function(options) { const optionsList = []; for ( const optionValue in options ) { if ( options[optionValue] && options[optionValue].value !== undefined ) { optionsList.push( { value: options[ optionValue ].value, label: options[ optionValue ].label, } ); } else { optionsList.push( { value: optionValue, label: options[ optionValue ], } ); } } return optionsList; }, copyShortcodeToClipboard: function() { var self = this; navigator.clipboard.writeText( this.generatedShortcode ).then( function() { // clipboard successfully set self.copied = true; setTimeout( function() { self.copied = false; }, 2000 ); }, function() { // clipboard write failed } ); }, isVisible: function( control ) { if ( ! control ) { return false; } if ( ! control.condition ) { return true; } else { return this.checkCondition( control.condition, this.attrs ); } }, isRepeaterFieldVisible: function( control, item ) { let res = false; if ( ! control ) { return false; } if ( ! control.condition ) { res = true; } else { res = this.checkCondition( control.condition, item ); } return res; }, checkCondition: function( condition, attrs ) { let checkResult = true; condition = condition || {}; for ( const [ fieldName, check ] of Object.entries( condition ) ) { let isExcl = fieldName.includes( '!' ); let valToCheck = check; if ( 'yes' === check ) { valToCheck = true; } if ( 'no' === check ) { valToCheck = false; } if ( isExcl ) { let rFieldName = fieldName.replace( '!', '' ); if ( valToCheck && valToCheck.length && 'string' !== typeof valToCheck ) { if ( valToCheck.includes( attrs[ rFieldName ] ) || valToCheck.includes( this.attrs[ rFieldName ] ) ) { checkResult = false; } } else { if ( valToCheck == attrs[ rFieldName ] || valToCheck == this.attrs[ rFieldName ] ) { checkResult = false; } } } else { if ( valToCheck && valToCheck.length && 'string' !== typeof valToCheck ) { if ( ! valToCheck.includes( attrs[ fieldName ] ) && ! valToCheck.includes( this.attrs[ fieldName ] ) ) { checkResult = false; } } else { if ( valToCheck != attrs[ fieldName ] && valToCheck != this.attrs[ fieldName ] ) { checkResult = false; } } } } return checkResult; } }, } );