0x1998 - MANAGER
Düzenlenen Dosya: fields.js
Vue.component( 'jet-meta-field-options', { name: 'jet-meta-field-options', template: '#jet-meta-field-options', props: { value: { type: Array, default: function() { return []; }, }, field: { type: Object, default: function() { return {}; }, }, }, data() { return { options: [] }; }, created() { this.options = [ ...this.value ]; }, watch: { options: { handler: function( val ) { this.$emit( 'input', val ); }, deep: true, }, }, methods: { setOptionProp: function( optionIndex, key, value ) { var options = [ ...this.options ]; if ( 'is_checked' === key && ( 'radio' === this.field.type || ( 'select' === this.field.type && ! this.field.is_multiple ) ) ) { for ( var i = 0; i < options.length; i++ ) { if ( options[ i ].is_checked ) { options[ i ].is_checked = false; } } } options[ optionIndex ][ key ] = value; this.options = [ ...options ]; //this.$emit( 'input', this.options ); }, getOptionSubtitle: function( option ) { var result = option.key; if ( option.is_checked ) { result += ' (checked)'; } return result; }, cloneOption: function( optionIndex ) { var option = this.options[ optionIndex ], newOption = { key: option.key + '_copy', value: option.value + '(Copy)', id: this.getRandomID(), }; this.options.splice( optionIndex + 1, 0, newOption ); //this.$emit( 'input', this.options ); }, deleteOption: function( optionIndex ) { this.options.splice( optionIndex, 1 ); //this.$emit( 'input', this.options ); }, addNewFieldOption: function( $event, index ) { var option = { key: '', value: '', collapsed: false, id: this.getRandomID(), }; this.options.push( option ); //this.$emit( 'input', this.options ); }, getRandomID: function() { return Math.floor( Math.random() * 8999 ) + 1000; }, isCollapsed: function( object ) { if ( undefined === object.collapsed || true === object.collapsed ) { return true; } else { return false; } }, } } ); Vue.component( 'jet-meta-field', { name: 'jet-meta-field', template: '#jet-meta-field', props: { value: { type: Object, default: function() { return {}; }, }, hideOptions: { type: Array, default: function() { return []; }, }, fieldTypes: { type: Array, default: function() { return []; }, }, fieldsNames: { type: Array, default: function() { return []; }, }, disabledFields: { type: Array, default: function() { return []; } }, slugDelimiter: { type: String, default: function() { return '_'; }, }, index: { type: Number, default: 0, }, reservedNames: { type: Array, default: function() { return []; }, } }, data() { return { field: {}, glossariesList: JetEngineFieldsConfig.glossaries, queriesList: JetEngineFieldsConfig.queries, allowedSources: JetEngineFieldsConfig.allowed_sources, postTypes: JetEngineFieldsConfig.post_types, i18n: JetEngineFieldsConfig.i18n, quickEditSupports: JetEngineFieldsConfig.quick_edit_supports, iconsLibraries: JetEngineFieldsConfig.icons_libraries, fieldError: false, }; }, created() { this.field = { ...this.value }; // Ensure options_source migrated correctly if ( ! this.field.options_source ) { if ( this.field.options_from_glossary ) { this.field.options_source = 'glossary'; } else { this.field.options_source = 'manual'; } } // Ensure options_source migrated correctly for repeater fields if ( 'repeater' === this.field.type ) { for ( var i = 0; i < this.field['repeater-fields'].length; i++ ) { if ( ! this.field['repeater-fields'][ i ].options_source ) { if ( this.field['repeater-fields'][ i ].options_from_glossary ) { this.field['repeater-fields'][ i ].options_source = 'glossary'; } else { this.field['repeater-fields'][ i ].options_source = 'manual'; } } } } }, computed: { repeaterFieldTypes: function() { var skipTypes = [ 'repeater', 'html' ]; return this.fieldTypes.filter( function( field ) { return ! skipTypes.includes( field.value ) && ! field.skip_repeater; } ); }, }, methods: { setFieldProp: function( key, value ) { this.$set( this.field, key, value ); this.$emit( 'input', this.field ); }, getFilteredFieldConditions: function( conditions, fieldOption ) { return window.JetPlugins.hooks.applyFilters( 'jetEngine.metaFields.fieldConditions', conditions, fieldOption, this.field, this ); }, getFilteredObjectTypes: function( objectTypes ) { return window.JetPlugins.hooks.applyFilters( 'jetEngine.metaFields.allowedObjectTypes', objectTypes, this.field, this ); }, getFilteredFieldTypes: function( fieldTypes ) { return window.JetPlugins.hooks.applyFilters( 'jetEngine.metaFields.allowedFieldTypes', fieldTypes, this.field, this ); }, preSetFieldName: function() { if ( ! this.field.name && this.field.title ) { this.sanitizeFieldName(); } }, sanitizeFieldName: function() { var names = this.fieldsNames; var regex = /\s+/g; var name = this.field.name || this.field.title; name = name.toLowerCase().replace( regex, this.slugDelimiter ); name = window.JetEngineTools.maybeCyrToLatin( name ); names.splice( this.index, 1 ); if ( -1 !== names.indexOf( name ) ) { name = name + '_' + Math.floor( Math.random() * Math.floor( 999 ) ); } if ( this.reservedNames && this.reservedNames.length && this.reservedNames.includes( name ) ) { this.fieldError = true; this.$CXNotice.add( { message: `'${name}' is reserved for internal use. Please rename this field`, type: 'error', duration: 8000, } ); return; } this.$set( this.field, 'name', name ); }, preSetRepeaterFieldName: function( repeaterFieldIndex ) { var repeaterField = this.field['repeater-fields'][ repeaterFieldIndex ]; if ( ! repeaterField.name && repeaterField.title ) { repeaterField.name = repeaterField.title; this.field['repeater-fields'].splice( repeaterFieldIndex, 1, repeaterField ); this.sanitizeRepeaterFieldName( repeaterFieldIndex ); } }, sanitizeRepeaterFieldName: function( repeaterFieldIndex ) { var repeaterField = this.field['repeater-fields'][ repeaterFieldIndex ], needModifyName = false; var regex = /\s+/g; repeaterField.name = repeaterField.name.toLowerCase().replace( regex, this.slugDelimiter ); repeaterField.name = window.JetEngineTools.maybeCyrToLatin( repeaterField.name ); for ( var i = 0; i < this.field['repeater-fields'].length; i++ ) { if ( i === repeaterFieldIndex ) { continue; } if ( this.field['repeater-fields'][i].name === repeaterField.name ) { needModifyName = true; break; } } if ( needModifyName ) { repeaterField.name = repeaterField.name + '_' + Math.floor( Math.random() * Math.floor( 999 ) ); } this.field['repeater-fields'].splice( repeaterFieldIndex, 1, repeaterField ); this.$emit( 'input', this.field ); }, setRepeaterFieldProp: function( repeaterFieldIndex, key, value ) { var repeaterField = this.field['repeater-fields'][ repeaterFieldIndex ]; repeaterField[ key ] = value; this.field['repeater-fields'].splice( repeaterFieldIndex, 1, repeaterField ); this.$emit( 'input', this.field ); }, cloneRepeaterField: function( childIndex ) { var newField = { ...this.field['repeater-fields'][ childIndex ] }; newField.title = newField.title + ' (Copy)'; newField.name = newField.name + '_copy'; newField.id = this.getRandomID(); this.field['repeater-fields'].splice( childIndex + 1, 0, newField ); this.$emit( 'input', this.field ); }, deleteRepeaterField: function( childIndex ) { // Maybe clear a `Title Field` value. this.maybeClearRepeaterTitleField( childIndex ); // Remove conditions dependency this.deleteRepeaterConditionsDependency( this.field['repeater-fields'][ childIndex ].name ); this.field['repeater-fields'].splice( childIndex, 1 ); this.$emit( 'input', this.field ); }, addNewRepeaterField: function( $event ) { var rField = { title: '', name: '', type: 'text', options_source: 'manual', collapsed: false, id: this.getRandomID(), }; if ( ! this.field['repeater-fields'] ) { this.field['repeater-fields'] = []; } this.field['repeater-fields'].push( rField ); this.$emit( 'input', this.field ) }, addNewRepeaterFieldOption: function( $event, rIndex, index ) { var option = { key: '', value: '', collapsed: false, id: this.getRandomID(), }; if ( ! this.fieldsList[ index ]['repeater-fields'][ rIndex ].options ) { this.$set( this.fieldsList[ index ]['repeater-fields'][ rIndex ], 'options', [] ); } this.fieldsList[ index ]['repeater-fields'][ rIndex ].options.push( option ); //this.onInput(); }, cloneRepeaterFieldOption: function( optionIndex, rFieldIndex ) { var field = this.fieldsList[ fieldIndex ]['repeater-fields'][ rFieldIndex ], option = field.options[ optionIndex ], newOption = { key: option.key + '_copy', value: option.value + '(Copy)', id: this.getRandomID(), }; field.options.splice( optionIndex + 1, 0, newOption ); this.fieldsList[ fieldIndex ]['repeater-fields'].splice( rFieldIndex, 1, field ); //this.onInput(); }, deleteRepeaterFieldOption: function( optionIndex, rFieldIndex, fieldIndex ) { this.fieldsList[ fieldIndex ]['repeater-fields'][ rFieldIndex ].options.splice( optionIndex, 1 ); }, setRepeaterFieldOptionProp: function( fieldIndex, rFieldIndex, optionIndex, key, value ) { var field = this.fieldsList[ fieldIndex ]['repeater-fields'][ rFieldIndex ], option = field.options[ optionIndex ]; if ( 'is_checked' === key && ( 'radio' === field.type || ( 'select' === field.type && ! field.is_multiple ) ) ) { for ( var i = 0; i < field.options.length; i++ ) { if ( field.options[ i ].is_checked ) { field.options[ i ].is_checked = false; } } } option[ key ] = value; field.options.splice( optionIndex, 1, option ); this.fieldsList[ fieldIndex ]['repeater-fields'].splice( rFieldIndex, 1, field ); //this.onInput(); }, getRepeaterTitleFields: function() { var allowedTypes = [ 'text', 'textarea', 'radio', 'select', 'posts' ], titleFieldsList = [], repeaterFields; if ( 'field' !== this.field.object_type || 'repeater' !== this.field.type ) { return titleFieldsList; } titleFieldsList.push( { value: '', label: this.i18n.select_field, } ); if ( undefined === this.field['repeater-fields'] ) { return titleFieldsList; } repeaterFields = this.field['repeater-fields']; if ( ! repeaterFields.length ) { return titleFieldsList; } for ( var i = 0; i < repeaterFields.length; i++ ) { if ( -1 === allowedTypes.indexOf( repeaterFields[i].type ) ) { continue; } titleFieldsList.push( { value: repeaterFields[i].name, label: repeaterFields[i].title, } ); } return titleFieldsList; }, maybeClearRepeaterTitleField: function( childIndex ) { if ( this.field.repeater_title_field === this.field['repeater-fields'][ childIndex ].name ) { this.field.repeater_title_field = ''; } }, deleteRepeaterConditionsDependency: function( fieldName ) { for ( var i = 0; i < this.field['repeater-fields'].length; i++ ) { if ( undefined === this.field['repeater-fields'][i].conditions ) { continue; } if ( ! this.field['repeater-fields'][i].conditions.length ) { continue; } for ( var j = 0; j < this.field['repeater-fields'][i].conditions.length; j++ ) { if ( fieldName !== this.field['repeater-fields'][i].conditions[j].field ) { continue; } this.field['repeater-fields'][i].conditions.splice( j, 1 ); } } }, showCondition: function( field ) { var result = true, objectType = field.object_type ? field.object_type : 'field'; if ( -1 !== this.disabledFields.indexOf( 'conditional_logic' ) ) { result = false; } else if ( 'endpoint' === objectType ) { result = false; } else if ( 'field' === objectType && 'html' === field.type ) { result = false; } return window.JetPlugins.hooks.applyFilters( 'jetEngine.metaFields.showConditionsEditor', result, field ); }, showConditionPopup: function() { this.$emit( 'show-condition-popup' ); }, showRepeaterConditionPopup: function( rFieldIndex ) { this.$emit( 'show-repeater-condition-popup', rFieldIndex ); }, hasConditions: function( object ) { return object.conditional_logic && object.conditions && object.conditions.length; }, getRepeaterFields: function( repeater ) { let fields = []; if ( ! Array.isArray( repeater?.['repeater-fields'] ) ) { return fields; } for ( const field of repeater['repeater-fields'] ) { fields.push( field.name ); } return fields; }, repeaterFieldConditionsInvalid( object, repeater ) { if ( ! this.hasConditions( object ) ) { return false; } if ( ! Array.isArray( object?.conditions ) ) { return false; } const rFields = this.getRepeaterFields( repeater ); for ( const condition of object.conditions ) { if ( ! rFields.includes( condition.field ) || condition.field === object.name ) { return true; } } return false; }, getRandomID: function() { return Math.floor( Math.random() * 8999 ) + 1000; }, isCollapsed: function( object ) { if ( undefined === object.collapsed || true === object.collapsed ) { return true; } else { return false; } }, } } ); Vue.component( 'jet-meta-fields', { name: 'jet-meta-fields', template: '#jet-meta-fields', props: { value: { type: Array, default: function() { return []; }, }, hideOptions: { type: Array, default: function() { return []; }, }, slugDelimiter: { type: String, default: function() { return '_'; }, }, reservedNames: { type: Array, default: function() { return []; }, }, fieldValidationCallback: { type: Function, default: null, }, }, data: function() { return { fieldsList: this.value, fieldTypes: JetEngineFieldsConfig.field_types, allowedFieldTypes: JetEngineFieldsConfig.allowed_types, postTypes: JetEngineFieldsConfig.post_types, blockTitle: JetEngineFieldsConfig.title, buttonLabel: JetEngineFieldsConfig.button, disabledFields: JetEngineFieldsConfig.disabled, i18n: JetEngineFieldsConfig.i18n, currentConditionIndex: null, currentConditionRepIndex: null, currentConditionField: null, isVisibleConditionPopup: false, }; }, created: function() { if ( this.allowedFieldTypes ) { const fields = this.fieldTypes.filter( ( item ) => { return this.allowedFieldTypes.includes( item.value ); } ); this.fieldTypes = fields; } }, watch: { value: function( val ) { var openedTab = false; for ( var i = 0; i < val.length; i++ ) { switch ( val[i].object_type ) { case 'field': val[i].isNested = openedTab; break; case 'tab': case 'accordion': openedTab = true; val[i].isNested = false; break; case 'endpoint': openedTab = false; val[i].isNested = false; break; } } this.fieldsList = val; }, fieldsList: { handler: function( val ) { this.$emit( 'input', val ); }, deep: true, }, }, computed: { fieldsNames: function() { var result = []; for ( var i = 0; i < this.fieldsList.length; i++ ) { result.push( this.fieldsList[i].name ); } return result; }, }, methods: { fieldIsValid: function( field, returnType ) { returnType = returnType || 'bool'; if ( this.fieldValidationCallback ) { try { this.fieldValidationCallback( field ); } catch( e ) { if ( 'error' === returnType ) { return e; } else { return false; } } } return true; }, onInput: function() { this.$emit( 'input', this.fieldsList ); }, isFieldCollapsed: function( fieldID ) { if ( ! this.$refs[ 'field' + fieldID ] ) { return false; } else { return this.$refs[ 'field' + fieldID ][0].isCollapsed; } }, getFieldSubtitle: function( field ) { var result = field.name + ' ('; if ( 'field' === field.object_type ) { result += field.type; } else { result += field.object_type; } result += ')'; return result; }, addNewField: function( event ) { var field = { title: '', name: '', object_type: 'field', width: '100%', options: [], 'repeater-fields': [], type: 'text', collapsed: false, id: this.getRandomID(), }; this.fieldsList.push( field ); }, cloneField: function( index ) { var newField = JSON.parse( JSON.stringify( this.fieldsList[index] ) ); newField.title = newField.title + ' (Copy)'; newField.name = newField.name + '_copy'; newField.id = this.getRandomID(); this.fieldsList.splice( index + 1, 0, newField ); }, deleteField: function( index ) { // Remove conditions dependency this.deleteConditionsDependency( this.fieldsList[index].name ); this.fieldsList.splice( index, 1 ); }, showCondition: function( field ) { var result = true; if ( -1 !== this.disabledFields.indexOf( 'conditional_logic' ) ) { result = false; } else if ( 'endpoint' === field.object_type ) { result = false; } else if ( 'field' === field.object_type && 'html' === field.type ) { result = false; } return window.JetPlugins.hooks.applyFilters( 'jetEngine.metaFields.showConditionsEditor', result, field ); }, showConditionPopup: function( fieldIndex, rFieldIndex ) { rFieldIndex = undefined !== rFieldIndex ? rFieldIndex : null; this.currentConditionIndex = fieldIndex; this.currentConditionRepIndex = rFieldIndex; this.currentConditionField = null !== rFieldIndex ? this.fieldsList[ fieldIndex ]['repeater-fields'][ rFieldIndex ] : this.fieldsList[ fieldIndex ]; this.isVisibleConditionPopup = true; }, hideConditionPopup: function() { this.currentConditionIndex = null; this.currentConditionRepIndex = null; this.currentConditionField = null; this.isVisibleConditionPopup = false; }, hasConditions: function( object ) { return object.conditional_logic && object.conditions && object.conditions.length; }, conditionsInvalid( object ) { if ( ! this.hasConditions( object ) ) { return false; } if ( ! Array.isArray( object?.conditions ) ) { return false; } for ( const condition of object.conditions ) { if ( ! this.fieldsNames.includes( condition.field ) || condition.field === object.name ) { return true; } } return false; }, setConditionsFieldProps: function( fieldIndex, rFieldIndex, valueObj ) { var field = this.fieldsList[ fieldIndex ]; if ( null !== rFieldIndex ) { var repeaterField = field['repeater-fields'][ rFieldIndex ]; repeaterField.conditional_logic = valueObj.isEnabled; repeaterField.conditions = valueObj.conditions; repeaterField.conditional_relation = valueObj.relation; field['repeater-fields'].splice( rFieldIndex, 1, repeaterField ); } else { field.conditional_logic = valueObj.isEnabled; field.conditions = valueObj.conditions; field.conditional_relation = valueObj.relation; } this.fieldsList.splice( fieldIndex, 1, field ); }, deleteConditionsDependency: function( fieldName ) { for ( var i = 0; i < this.fieldsList.length; i++ ) { if ( 'field' !== this.fieldsList[i].object_type ) { continue; } if ( undefined === this.fieldsList[i].conditions ) { continue; } if ( !this.fieldsList[i].conditions.length ) { continue; } for ( var j = 0; j < this.fieldsList[i].conditions.length; j++ ) { if ( fieldName !== this.fieldsList[i].conditions[j].field ) { continue; } this.fieldsList[i].conditions.splice( j, 1 ); } } }, isCollapsed: function( object ) { if ( undefined === object.collapsed || true === object.collapsed ) { return true; } else { return false; } }, isNestedField: function( field ) { if ( undefined !== field.isNested && field.isNested ) { return true; } return false; }, getRandomID: function() { return Math.floor( Math.random() * 8999 ) + 1000; }, }, } ); window.JetPlugins.hooks.addFilter( 'jetEngine.metaFields.fieldConditions', 'jetWCFields', ( conditions, fieldName, field, fields ) => { return conditions; } );
geri dön