WordPress/wp-includes/js/media/views/settings.js

122 lines
3.0 KiB
JavaScript

/*globals _, Backbone */
/**
* wp.media.view.Settings
*
* @class
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
var View = require( './view.js' ),
$ = Backbone.$,
Settings;
Settings = View.extend({
events: {
'click button': 'updateHandler',
'change input': 'updateHandler',
'change select': 'updateHandler',
'change textarea': 'updateHandler'
},
initialize: function() {
this.model = this.model || new Backbone.Model();
this.listenTo( this.model, 'change', this.updateChanges );
},
prepare: function() {
return _.defaults({
model: this.model.toJSON()
}, this.options );
},
/**
* @returns {wp.media.view.Settings} Returns itself to allow chaining
*/
render: function() {
View.prototype.render.apply( this, arguments );
// Select the correct values.
_( this.model.attributes ).chain().keys().each( this.update, this );
return this;
},
/**
* @param {string} key
*/
update: function( key ) {
var value = this.model.get( key ),
$setting = this.$('[data-setting="' + key + '"]'),
$buttons, $value;
// Bail if we didn't find a matching setting.
if ( ! $setting.length ) {
return;
}
// Attempt to determine how the setting is rendered and update
// the selected value.
// Handle dropdowns.
if ( $setting.is('select') ) {
$value = $setting.find('[value="' + value + '"]');
if ( $value.length ) {
$setting.find('option').prop( 'selected', false );
$value.prop( 'selected', true );
} else {
// If we can't find the desired value, record what *is* selected.
this.model.set( key, $setting.find(':selected').val() );
}
// Handle button groups.
} else if ( $setting.hasClass('button-group') ) {
$buttons = $setting.find('button').removeClass('active');
$buttons.filter( '[value="' + value + '"]' ).addClass('active');
// Handle text inputs and textareas.
} else if ( $setting.is('input[type="text"], textarea') ) {
if ( ! $setting.is(':focus') ) {
$setting.val( value );
}
// Handle checkboxes.
} else if ( $setting.is('input[type="checkbox"]') ) {
$setting.prop( 'checked', !! value && 'false' !== value );
}
},
/**
* @param {Object} event
*/
updateHandler: function( event ) {
var $setting = $( event.target ).closest('[data-setting]'),
value = event.target.value,
userSetting;
event.preventDefault();
if ( ! $setting.length ) {
return;
}
// Use the correct value for checkboxes.
if ( $setting.is('input[type="checkbox"]') ) {
value = $setting[0].checked;
}
// Update the corresponding setting.
this.model.set( $setting.data('setting'), value );
// If the setting has a corresponding user setting,
// update that as well.
if ( userSetting = $setting.data('userSetting') ) {
window.setUserSetting( userSetting, value );
}
},
updateChanges: function( model ) {
if ( model.hasChanged() ) {
_( model.changed ).chain().keys().each( this.update, this );
}
}
});
module.exports = Settings;