Skip to content

Commit

Permalink
Reformat JS code for media.
Browse files Browse the repository at this point in the history
  • Loading branch information
Anh committed Nov 18, 2015
1 parent acfe5c0 commit 274ba95
Showing 1 changed file with 113 additions and 91 deletions.
204 changes: 113 additions & 91 deletions js/media.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,49 @@ jQuery( function ( $ )
'use strict';

var views = rwmb.views = rwmb.views || {},
MediaField,MediaList, MediaItem, ImageField, ImageList, ImageItem, MediaButton, MediaStatus, UploadButton;
MediaField, MediaList, MediaItem, ImageField, ImageList, ImageItem, MediaButton, MediaStatus, UploadButton;

MediaList = views.MediaList = Backbone.View.extend( {
tagName: 'ul',
className: 'rwmb-media-list',
createItemView: function( options ){
tagName : 'ul',
className : 'rwmb-media-list',
createItemView: function ( options )
{
return new MediaItem( options );
},

addItemView: function( item ){
this.itemViews[item.cid] = this.createItemView( { model: item, collection: this.collection, props: this.props } );
this.$el.append( this.itemViews[item.cid].el );

addItemView: function ( item )
{
this.itemViews[item.cid] = this.createItemView( {
model : item,
collection: this.collection,
props : this.props
} );
this.$el.append( this.itemViews[item.cid].el );
},

render: function(){

render: function ()
{
this.$el.empty();
this.collection.each( this.addItemView );
},

initialize: function( options ) {

initialize: function ( options )
{
var that = this;
this.itemViews = {};
this.props = options.props;

this.listenTo( this.collection, 'add', this.addItemView );

this.listenTo( this.collection, 'remove', function( item, collection ) {
this.listenTo( this.collection, 'remove', function ( item, collection )
{
if ( this.itemViews[item.cid] )
{
this.itemViews[item.cid].remove();
delete this.itemViews[item.cid];
}
} );

//Sort media using sortable
this.$el.sortable( {
stop : function ( event, ui )
Expand All @@ -60,57 +69,61 @@ jQuery( function ( $ )
},
delay: 150
} );

this.render();
}
} );

ImageList = views.ImageList = MediaList.extend( {
createItemView: function( options ){
createItemView: function ( options )
{
return new ImageItem( options );
},
}
} );

MediaField = views.MediaField = Backbone.View.extend( {
events : {
'destroy' : function(){
if( this.forceDelete ) {
_.each( _.clone( this.collection.models ), function( model ) {
events: {
destroy: function ()
{
if ( this.forceDelete )
{
_.each( _.clone( this.collection.models ), function ( model )
{
model.destroy();
});
} );
}
}
},

initialize: function ( options )
{
var that = this;
this.input = $( options.input );
this.values = this.input.val().split( ',' );
this.props = this.$el.data();

//Create collection
this.collection = new wp.media.model.Attachments();

//Render
this.render();

//Update input
this.listenTo( this.collection, 'add remove reset', _.debounce( function ()
{
var ids = this.collection.pluck( 'id' );
this.input.val( ids.join( ',' ) );
var ids = that.collection.pluck( 'id' );
that.input.val( ids.join( ',' ) );
}, 500 ) );

//Limit max files
this.listenTo( this.collection, 'add', function( item, collection )
this.listenTo( this.collection, 'add', function ( item, collection )
{
if ( this.props.maxFiles > 0 && this.collection.length > this.props.maxFiles )
{
this.collection.pop();
}
} );

//Load initial media
if ( !_.isEmpty( this.values ) )
{
Expand All @@ -125,90 +138,94 @@ jQuery( function ( $ )
this.collection.more();
}
},

render: function() {

render: function ()
{
//Empty then add parts
this.$el.empty();
this.$el.append( new MediaList( { collection: this.collection, props: this.props } ).el );
this.$el.append( new MediaButton( { collection: this.collection, props: this.props } ).el );
this.$el.append( new MediaStatus( { collection: this.collection, props: this.props } ).el );
}
} );

ImageField = views.ImageField = MediaField.extend( {
render: function() {
render: function ()
{
this.$el.empty();
this.$el.append( new ImageList( { collection: this.collection, props: this.props } ).el );
this.$el.append( new MediaButton( { collection: this.collection, props: this.props } ).el );
this.$el.append( new MediaStatus( { collection: this.collection, props: this.props } ).el );
}
}
} );

MediaStatus = views.MediaStatus = Backbone.View.extend( {
tagName: 'span',
className: 'rwmb-media-status',
template: wp.template( 'rwmb-media-status' ),
initialize: function( options )
tagName : 'span',
className : 'rwmb-media-status',
template : wp.template( 'rwmb-media-status' ),
initialize: function ( options )
{
this.props = options.props;
this.listenTo( this.collection, 'add remove reset', this.render );
this.render();
this.render();
},

render: function(){

render: function ()
{
var data = {
items: this.collection.length,
items : this.collection.length,
maxFiles: this.props.maxFiles
};
};
this.$el.html( this.template( data ) );
}
} );

MediaButton = views.MediaButton = Backbone.View.extend( {
className: 'rwmb-add-media button',
tagName: 'a',
template: wp.template( 'rwmb-add-media' ),
events:
{
'click': function(){
tagName : 'a',
template : wp.template( 'rwmb-add-media' ),
events : {
click: function ()
{
var models = this.collection.models;

// Destroy the previous collection frame.
if ( this._frame )
{
this.stopListening( this._frame );
this._frame.dispose();
}

this._frame = wp.media( {
className: 'media-frame rwmb-media-frame',
multiple : true,
title : 'Select Media',
editing: true,
editing : true,
library : {
type : this.props.mimeType,
type: this.props.mimeType
}
} );

this.listenTo( this._frame, 'select', function ()
{
var selection = this._frame.state().get( 'selection' );
this.collection.add( selection.models );
} );

this._frame.open();
},
},
render: function()
}
},
render : function ()
{
this.$el.html( this.template( {} ) );
return this;
},
initialize: function( options )

initialize: function ( options )
{
this.props = options.props;
this.listenTo( this.collection, 'add remove reset', function(){
this.listenTo( this.collection, 'add remove reset', function ()
{
if ( this.props.maxFiles > 0 && this.collection.length >= this.props.maxFiles )
{
this.$el.hide();
Expand All @@ -218,16 +235,17 @@ jQuery( function ( $ )
this.$el.show();
}
} );

this.render();
}
} );

UploadButton = views.UploadButton = Backbone.View.extend( {
initialize: function( options )
initialize: function ( options )
{
this.props = options.props;
this.listenTo( this.collection, 'add remove reset', function(){
this.listenTo( this.collection, 'add remove reset', function ()
{
if ( this.props.maxFiles > 0 && this.collection.length >= this.props.maxFiles )
{
this.$el.hide();
Expand All @@ -239,17 +257,18 @@ jQuery( function ( $ )
} );
}
} );

MediaItem = views.MediaItem = Backbone.View.extend( {
tagName : 'li',
className: 'rwmb-media-item',
className : 'rwmb-media-item',
template : wp.template( 'rwmb-media-item' ),
initialize: function ( options )
{
this.props = options.props;
this.render();
this.$el.data( 'cid', this.model.cid );
this.listenTo( this.model, 'destroy', function( model ) {
this.listenTo( this.model, 'destroy', function ( model )
{
this.collection.remove( this.model );
} );
},
Expand All @@ -258,10 +277,11 @@ jQuery( function ( $ )
'click .rwmb-remove-media': function ( e )
{
this.collection.remove( this.model );
if( this.props.forceDelete ) {
this.model.destroy();
if ( this.props.forceDelete )
{
this.model.destroy();
}

return false;
}
},
Expand All @@ -273,10 +293,10 @@ jQuery( function ( $ )
return this;
}
} );

ImageItem = views.ImageItem = MediaItem.extend( {
className: 'rwmb-image-item',
template : wp.template( 'rwmb-image-item' ),
template : wp.template( 'rwmb-image-item' )
} );

/**
Expand All @@ -285,23 +305,25 @@ jQuery( function ( $ )
*/
function initMediaField()
{
new MediaField( { input: this, el: $( this ).siblings( 'div.rwmb-media-view' )} );
new MediaField( { input: this, el: $( this ).siblings( 'div.rwmb-media-view' ) } );
}

function initImageField()
{
new ImageField( { input: this, el: $( this ).siblings( 'div.rwmb-media-view' )} );
new ImageField( { input: this, el: $( this ).siblings( 'div.rwmb-media-view' ) } );
}

$( ':input.rwmb-media' ).each( initMediaField );
$( '.rwmb-input' ).on( 'clone', ':input.rwmb-media', initMediaField );
$( '.rwmb-input' ).on( 'remove', '.rwmb-media-clone', function(){
$( this ).find( 'div.rwmb-media-view' ).trigger( 'destroy' );
} );

$( ':input.rwmb-image-advanced' ).each( initImageField );
$( '.rwmb-input' ).on( 'clone', ':input.rwmb-image-advanced', initImageField );
$( '.rwmb-input' ).on( 'remove', '.rwmb-image_advanced-clone', function(){
$( this ).find( 'div.rwmb-media-view' ).trigger( 'destroy' );
} );
$( '.rwmb-input' )
.on( 'clone', ':input.rwmb-media', initMediaField )
.on( 'remove', '.rwmb-media-clone', function ()
{
$( this ).find( 'div.rwmb-media-view' ).trigger( 'destroy' );
} )
.on( 'clone', ':input.rwmb-image-advanced', initImageField )
.on( 'remove', '.rwmb-image_advanced-clone', function ()
{
$( this ).find( 'div.rwmb-media-view' ).trigger( 'destroy' );
} );
} );

0 comments on commit 274ba95

Please sign in to comment.