Sid Gifari File Manager Pro v10.0.3

✏️ Editing: edit-attribute-field.js Writable

var Backbone     = require('backbone'),
	sui          = require('sui-utils/sui'),
	$            = require('jquery');

var editAttributeField = Backbone.View.extend( {

tagName: "div",

events: {
		'input  input':                  'inputChanged',
		'input  textarea':               'inputChanged',
		'change select':                 'inputChanged',
		'change input[type="radio"]':    'inputChanged',
		'change input[type="checkbox"]': 'inputChanged'
	},

render: function() {

var data = jQuery.extend( {
			id: 'shortcode-ui-' + this.model.get( 'attr' ) + '-' + this.model.cid,
		}, this.model.toJSON() );

// Convert meta JSON to attribute string.
		var _meta = [];
		for ( var key in data.meta ) {

// Boolean attributes can only require attribute key, not value.
			if ( 'boolean' === typeof( data.meta[ key ] ) ) {

// Only set truthy boolean attributes.
				if ( data.meta[ key ] ) {
					_meta.push( _.escape( key ) );
				}

} else {

_meta.push( _.escape( key ) + '="' + _.escape( data.meta[ key ] ) + '"' );

}

data.meta = _meta.join( ' ' );

// Ensure options are formatted correctly.
		if ( 'options' in data ) {
			data.options = this.parseOptions( data.options );
		}

// Ensure default value for select field.
		if ( 'select' === data.type && '' === this.model.get( 'value' ) && ! _.findWhere( data.options, { value: '' } ) ) {
			var firstVisibleOption = _.first( data.options );
			if ( firstVisibleOption && 'undefined' !== typeof firstVisibleOption.value ) {
				this.setValue( firstVisibleOption.value );
				data.value = firstVisibleOption.value;
			}
		}

this.$el.html( this.template( data ) );
		this.triggerCallbacks();

return this;
	},

/**
	 * Input Changed Update Callback.
	 *
	 * If the input field that has changed is for content or a valid attribute,
	 * then it should update the model. If a callback function is registered
	 * for this attribute, it should be called as well.
	 */
	inputChanged: function( e ) {

var $el;

if ( this.model.get( 'attr' ) ) {
			$el = this.$el.find( '[name="' + this.model.get( 'attr' ) + '"]' );
		} else {
			$el = this.$el.find( '[name="inner_content"]' );
		}

if ( 'radio' === this.model.attributes.type ) {
			this.setValue( $el.filter(':checked').first().val() );
		} else if ( 'checkbox' === this.model.attributes.type ) {
			this.setValue( $el.is( ':checked' ) );
		}  else if ( 'range' === this.model.attributes.type ) {
			var rangeId =  '#' + e.target.id + '_indicator';
			var rangeValue = e.target.value;
			document.querySelector( rangeId ).value = rangeValue;
			this.setValue( $el.val() );
		} else {
			this.setValue( $el.val() );
		}

this.triggerCallbacks();
	},

getValue: function() {
		return this.model.get( 'value' );
	},

setValue: function( val ) {
		this.model.set( 'value', val );
	},

triggerCallbacks: function() {

var shortcodeName = this.shortcode.attributes.shortcode_tag,
			attributeName = this.model.get( 'attr' ),
			hookName      = [ shortcodeName, attributeName ].join( '.' ),
			changed       = this.model.changed,
			collection    = _.flatten( _.values( this.views.parent.views._views ) ),
			shortcode     = this.shortcode;

/*
		 * Action run when an attribute value changes on a shortcode
		 *
		 * Called as `{shortcodeName}.{attributeName}`.
		 *
		 * @param changed (object)
		 *           The update, ie. { "changed": "newValue" }
		 * @param viewModels (array)
		 *           The collections of views (editAttributeFields)
		 *                         which make up this shortcode UI form
		 * @param shortcode (object)
		 *           Reference to the shortcode model which this attribute belongs to.
		 */
		wp.shortcake.hooks.doAction( hookName, changed, collection, shortcode );

/**
	 * Parse Options to ensure they use the correct format.
	 *
	 * Backwards compatability for non-array options.
	 * Using objects was sub-optimal because properties don't have an order.
	 */
	parseOptions: function( options ) {

if ( ! Array.isArray( options ) ) {
			var _options = [];
			_.each( Object.keys( options ), function( key ) {
				_options.push( { value: key, label: options[ key ] } );
			} );
			options = _options;
		} else {
			options = options.map( function( option ) {
				if ( 'object' !== typeof option ) {
					option = { value: option, label: option };
				}
				return option;
			} );
		}

return options;

}

}, {

/**
	 * Get an attribute field from a shortcode by name.
	 *
	 * Usage: `sui.views.editAttributeField.getField( collection, 'title')`
	 *
	 * @param array collection of editAttributeFields
	 * @param string attribute name
	 * @return editAttributeField The view corresponding to the matching field
	 */
	getField: function( collection, attr ) {
		return _.find( collection,
			function( viewModel ) {
				return attr === viewModel.model.get('attr');
			}
		);
	}
});

sui.views.editAttributeField = editAttributeField;
module.exports = editAttributeField;

📁 File Manager Pro

📁 File Manager Pro