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

90 lines
1.8 KiB
JavaScript
Raw Normal View History

/*globals _, Backbone */
/**
* wp.media.view.Button
*
* @class
* @augments wp.media.View
* @augments wp.Backbone.View
* @augments Backbone.View
*/
var View = require( './view.js' ),
Button;
Button = View.extend({
tagName: 'a',
className: 'media-button',
attributes: { href: '#' },
events: {
'click': 'click'
},
defaults: {
text: '',
style: '',
size: 'large',
disabled: false
},
initialize: function() {
/**
* Create a model with the provided `defaults`.
*
* @member {Backbone.Model}
*/
this.model = new Backbone.Model( this.defaults );
// If any of the `options` have a key from `defaults`, apply its
// value to the `model` and remove it from the `options object.
_.each( this.defaults, function( def, key ) {
var value = this.options[ key ];
if ( _.isUndefined( value ) ) {
return;
}
this.model.set( key, value );
delete this.options[ key ];
}, this );
this.listenTo( this.model, 'change', this.render );
},
/**
* @returns {wp.media.view.Button} Returns itself to allow chaining
*/
render: function() {
var classes = [ 'button', this.className ],
model = this.model.toJSON();
if ( model.style ) {
classes.push( 'button-' + model.style );
}
if ( model.size ) {
classes.push( 'button-' + model.size );
}
classes = _.uniq( classes.concat( this.options.classes ) );
this.el.className = classes.join(' ');
this.$el.attr( 'disabled', model.disabled );
this.$el.text( this.model.get('text') );
return this;
},
/**
* @param {Object} event
*/
click: function( event ) {
if ( '#' === this.attributes.href ) {
event.preventDefault();
}
if ( this.options.click && ! this.model.get('disabled') ) {
this.options.click.apply( this, arguments );
}
}
});
module.exports = Button;