0x1998 - MANAGER

Düzenlenen Dosya: shortcode-generator.js

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;

}
	},
} );

geri dön