Skip to content

Commit

Permalink
Move file/file_list field html concatenation to use wp.template under…
Browse files Browse the repository at this point in the history 
…score templates
  • Loading branch information
@jtsternberg
jtsternberg committed Feb 15, 2017
1 parent f75dab7 commit 5efe601
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 50 deletions.
35 changes: 35 additions & 0 deletions includes/CMB2_JS.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ public static function enqueue() {
// if file/file_list
if ( isset( $dependencies['media-editor'] ) ) {
wp_enqueue_media();
self::output_js_templates();
}

// if timepicker
Expand Down Expand Up @@ -161,4 +162,38 @@ protected static function localize( $debug ) {
wp_localize_script( self::$handle, self::$js_variable, apply_filters( 'cmb2_localized_data', $l10n ) );
}

/**
* Outputs the underscore Javascript templates used for the file/file_list attachment fields.
* @since 2.2.4
* @return void
*/
protected static function output_js_templates() {
?>
<script type="text/html" id="tmpl-cmb2-single-image">
<div class="img-status cmb2-media-item">
<img width="{{ data.sizeWidth }}" height="{{ data.sizeHeight }}" src="{{ data.sizeUrl }}" class="cmb-file-field-image" alt="{{ data.filename }}" title="{{ data.filename }}" />
<p><a href="#" class="cmb2-remove-file-button" rel="{{ data.mediaField }}">{{ data.stringRemoveImage }}</a></p>
</div>
</script>
<script type="text/html" id="tmpl-cmb2-single-file">
<div class="file-status cmb2-media-item">
<span>{{ data.stringFile }} <strong>{{ data.filename }}</strong></span>&nbsp;&nbsp; (<a href="{{ data.url }}" target="_blank" rel="external">{{ data.stringDownload }}</a> / <a href="#" class="cmb2-remove-file-button" rel="{{ data.mediaField }}">{{ data.stringRemoveFile }}</a>)
</div>
</script>
<script type="text/html" id="tmpl-cmb2-list-image">
<li class="img-status cmb2-media-item">
<img width="{{ data.sizeWidth }}" height="{{ data.sizeHeight }}" src="{{ data.sizeUrl }}" class="cmb-file_list-field-image" alt="{{ data.filename }}">
<p><a href="#" class="cmb2-remove-file-button" rel="{{ data.mediaField }}[{{ data.id }}]">{{ data.stringRemoveImage }}</a></p>
<input type="hidden" id="filelist-{{ data.id }}" data-id="{{ data.id }}" name="{{ data.mediaFieldName }}[{{ data.id }}]" value="{{ data.url }}">
</li>
</script>
<script type="text/html" id="tmpl-cmb2-list-file">
<li class="file-status cmb2-media-item">
<span>{{ data.stringFile }} <strong>{{ data.filename }}</strong></span>&nbsp;&nbsp; (<a href="{{ data.url }}" target="_blank" rel="external">{{ data.stringDownload }}</a> / <a href="#" class="cmb2-remove-file-button" rel="{{ data.mediaField }}[{{ data.id }}]">{{ data.stringRemoveFile }}</a>)
<input type="hidden" id="filelist-{{ data.id }}" data-id="{{ data.id }}" name="{{ data.mediaFieldName }}[{{ data.id }}]" value="{{ data.url }}">
</li>
</script>
<?php
}

}
95 changes: 52 additions & 43 deletions js/cmb2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,9 @@ window.CMB2 = window.CMB2 || {};
return;
}

var mediaItem, attachment, modal, media;
var modal, media, handlers;

handlers = cmb.mediaHandlers;
media = cmb.media;
media.field = formfield;
media.$field = $id( media.field );
Expand All @@ -190,7 +191,6 @@ window.CMB2 = window.CMB2 || {};
media.fieldName = media.$field.attr('name');
media.isList = isList;


// If this field's media frame already exists, reopen it.
if ( media.field in media.frames ) {
return media.frames[ media.field ].open();
Expand All @@ -208,35 +208,27 @@ window.CMB2 = window.CMB2 || {};

cmb.trigger( 'cmb_media_modal_init', media );

cmb.mediaHandlers.list = function( selection, returnIt ) {
var data;
handlers.list = function( selection, returnIt ) {
var data, isImage, mediaItem;

// Setup our fileGroup array
var fileGroup = [];

if ( ! handlers.list.templates ) {
handlers.list.templates = {
image : wp.template( 'cmb2-list-image' ),
file : wp.template( 'cmb2-list-file' ),
};
}

// Loop through each attachment
selection.each( function( attachment ) {
if ( 'image' === attachment.get( 'type' ) ) {

// Set the correct image size data
data = cmb.mediaHandlers.getImageData.call( attachment, 50 ).toJSON();
isImage = 'image' === attachment.get( 'type' );

// Image preview
mediaItem = '<li class="img-status cmb2-media-item">'+
'<img width="'+ data.sizeWidth +'" height="'+ data.sizeHeight +'" src="'+ data.sizeUrl +'" class="cmb-file_list-field-image" alt="'+ data.filename +'">'+
'<p><a href="#" class="cmb2-remove-file-button" rel="'+ media.field +'['+ data.id +']">'+ l10n.strings.remove_image +'</a></p>'+
'<input type="hidden" id="filelist-'+ data.id +'" data-id="'+ data.id +'" name="'+ media.fieldName +'['+ data.id +']" value="' + data.url + '">'+
'</li>';
data = handlers.prepareData( attachment, isImage );

} else {
data = attachment.toJSON();

// Standard generic output if it's not an image.
mediaItem = '<li class="file-status cmb2-media-item"><span>'+ l10n.strings.file +' <strong>'+ data.filename +'</strong></span>&nbsp;&nbsp; (<a href="' + data.url + '" target="_blank" rel="external">'+ l10n.strings.download +'</a> / <a href="#" class="cmb2-remove-file-button" rel="'+ media.field +'['+ data.id +']">'+ l10n.strings.remove_file +'</a>)'+
'<input type="hidden" id="filelist-'+ data.id +'" data-id="'+ data.id +'" name="'+ media.fieldName +'['+ data.id +']" value="' + data.url + '">'+
'</li>';

}
// Image preview or standard generic output if it's not an image.
mediaItem = handlers.list.templates[ isImage ? 'image' : 'file' ]( data );

// Add our file to our fileGroup array
fileGroup.push( mediaItem );
Expand All @@ -251,34 +243,51 @@ window.CMB2 = window.CMB2 || {};

};

cmb.mediaHandlers.single = function( selection ) {
var data;
handlers.single = function( selection ) {
var attachment, isImage, data, mediaItem;

if ( ! handlers.single.templates ) {
handlers.single.templates = {
image : wp.template( 'cmb2-single-image' ),
file : wp.template( 'cmb2-single-file' ),
};
}

// Only get one file from the uploader
attachment = selection.first();

media.$field.val( attachment.get( 'url' ) );
$id( media.field +'_id' ).val( attachment.get( 'id' ) );

if ( 'image' === attachment.get( 'type' ) ) {
isImage = 'image' === attachment.get( 'type' );

// Set the correct image size data
data = cmb.mediaHandlers.getImageData.call( attachment, 350 ).toJSON();
data = handlers.prepareData( attachment, isImage );

// Image preview
mediaItem = '<div class="img-status cmb2-media-item"><img width="'+ data.sizeWidth +'" height="'+ data.sizeHeight +'" src="'+ data.sizeUrl +'" class="cmb-file-field-image" alt="'+ data.filename +'" title="'+ data.filename +'" /><p><a href="#" class="cmb2-remove-file-button" rel="' + media.field + '">'+ l10n.strings.remove_image +'</a></p></div>';
} else {
data = attachment.toJSON();
// Image preview or standard generic output if it's not an image.
mediaItem = handlers.single.templates[ isImage ? 'image' : 'file' ]( data );

// Standard generic output if it's not an image.
mediaItem = '<div class="file-status cmb2-media-item"><span>'+ l10n.strings.file +' <strong>'+ data.filename +'</strong></span>&nbsp;&nbsp; (<a href="'+ data.url +'" target="_blank" rel="external">'+ l10n.strings.download +'</a> / <a href="#" class="cmb2-remove-file-button" rel="'+ media.field +'">'+ l10n.strings.remove_file +'</a>)</div>';
// add/display our output
media.$field.siblings( '.cmb2-media-status' ).slideDown().html( mediaItem );
};

handlers.prepareData = function( data, image ) {
if ( image ) {
// Set the correct image size data
handlers.getImageData.call( data, 50 );
}

// add/display our output
media.$field.siblings('.cmb2-media-status').slideDown().html( mediaItem );
data = data.toJSON();
data.mediaField = media.field;
data.mediaFieldName = media.fieldName;
data.stringRemoveImage = l10n.strings.remove_image;
data.stringFile = l10n.strings.file;
data.stringDownload = l10n.strings.download;
data.stringRemoveFile = l10n.strings.remove_file;

return data;
};

cmb.mediaHandlers.getImageData = function( fallbackSize ) {
handlers.getImageData = function( fallbackSize ) {

// Preview size dimensions
var previewW = media.previewSize[0] || fallbackSize;
Expand Down Expand Up @@ -320,20 +329,20 @@ window.CMB2 = window.CMB2 || {};
return this;
};

cmb.mediaHandlers.selectFile = function() {
handlers.selectFile = function() {
var selection = modal.state().get( 'selection' );
var type = isList ? 'list' : 'single';

if ( cmb.attach_id && isList ) {
$( '[data-id="'+ cmb.attach_id +'"]' ).parents( 'li' ).replaceWith( cmb.mediaHandlers.list( selection, true ) );
$( '[data-id="'+ cmb.attach_id +'"]' ).parents( 'li' ).replaceWith( handlers.list( selection, true ) );
} else {
cmb.mediaHandlers[type]( selection );
handlers[type]( selection );
}

cmb.trigger( 'cmb_media_modal_select', selection, media );
};

cmb.mediaHandlers.openModal = function() {
handlers.openModal = function() {
var selection = modal.state().get( 'selection' );
var attach;

Expand All @@ -350,8 +359,8 @@ window.CMB2 = window.CMB2 || {};

// When a file is selected, run a callback.
modal
.on( 'select', cmb.mediaHandlers.selectFile )
.on( 'open', cmb.mediaHandlers.openModal );
.on( 'select', handlers.selectFile )
.on( 'open', handlers.openModal );

// Finally, open the modal
modal.open();
Expand Down
Loading

0 comments on commit 5efe601

Please sign in to comment.