Skip to content

Commit

Permalink
Allow clicking on files in file/file_list to bring up modal and allow…
Browse files Browse the repository at this point in the history 
… manipulation
  • Loading branch information
@jtsternberg
jtsternberg committed Feb 9, 2015
1 parent 5cec8e5 commit 10c1f1b
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 57 deletions.
19 changes: 13 additions & 6 deletions css/cmb2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -514,7 +514,14 @@ span.cmb2-metabox-description {
top: 10px;
}

/* line 396, sass/partials/_main_wrap.scss */
/* line 394, sass/partials/_main_wrap.scss */

.cmb2-media-status .img-status img,
.cmb2-media-status .file-status > span {
cursor: pointer;
}

/* line 400, sass/partials/_main_wrap.scss */

.cmb-type-file-list .cmb2-media-status .img-status {
clear: none;
Expand All @@ -523,7 +530,7 @@ span.cmb2-metabox-description {
width: auto;
}

/* line 403, sass/partials/_main_wrap.scss */
/* line 407, sass/partials/_main_wrap.scss */

.cmb-attach-list li {
clear: both;
Expand All @@ -532,21 +539,21 @@ span.cmb2-metabox-description {
width: 100%;
}

/* line 409, sass/partials/_main_wrap.scss */
/* line 413, sass/partials/_main_wrap.scss */

.cmb-attach-list li img {
cursor: move;
float: left;
margin-right: 10px;
}

/* line 416, sass/partials/_main_wrap.scss */
/* line 420, sass/partials/_main_wrap.scss */

.cmb2-remove-wrapper {
margin: 0;
}

/* line 420, sass/partials/_main_wrap.scss */
/* line 424, sass/partials/_main_wrap.scss */

.child-cmb2 .cmb-th {
text-align: left;
Expand Down Expand Up @@ -2898,7 +2905,7 @@ Sidebar Placement Adjustments
padding-top: .4em;
}

/* line 425, sass/partials/_main_wrap.scss */
/* line 429, sass/partials/_main_wrap.scss */

.cmb-th,
.cmb-td,
Expand Down
2 changes: 1 addition & 1 deletion css/cmb2.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/cmb2.min.css
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions css/sass/partials/_main_wrap.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,6 +391,10 @@ span.cmb2-metabox-description {
}
}

.img-status img, .file-status > span {
cursor: pointer;
}

}

.cmb-type-file-list .cmb2-media-status .img-status {
Expand Down
86 changes: 67 additions & 19 deletions js/cmb2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ window.CMB2 = (function(window, document, $, undefined){
// Media/file management
.on( 'click', '.cmb-multicheck-toggle', cmb.toggleCheckBoxes )
.on( 'click', '.cmb2-upload-button', cmb.handleMedia )
.on( 'click', '.cmb-attach-list li, .cmb2-media-status .img-status img, .cmb2-media-status .file-status > span', cmb.handleFileClick )
.on( 'click', '.cmb2-remove-file-button', cmb.handleRemoveMedia )
// Repeatable content
.on( 'click', '.cmb-add-group-row', cmb.addGroupRow )
Expand Down Expand Up @@ -141,31 +142,36 @@ window.CMB2 = (function(window, document, $, undefined){
};

cmb.handleMedia = function( evt ) {
evt.preventDefault();

var $el = $( this );
cmb.attach_id = false;

cmb._handleMedia( $el.prev('input.cmb2-upload-file').attr('id'), $el.hasClass( 'cmb2-upload-list' ) );
};

cmb._handleMedia = function( formfield, isList ) {

if ( ! wp ) {
return;
}

evt.preventDefault();

var $metabox = cmb.metabox();
var $self = $(this);
cmb.formfield = $self.prev('input').attr('id');
cmb.formfield = formfield;
var $formfield = $id( cmb.formfield );
var previewSize = $formfield.data( 'previewsize' );
var formName = $formfield.attr('name');
var uploadStatus = true;
var attachment = true;
var isList = $self.hasClass( 'cmb2-upload-list' );

// If this field's media frame already exists, reopen it.
if ( cmb.formfield in cmb.file_frames ) {
cmb.file_frames[cmb.formfield].open();
cmb.file_frames[ cmb.formfield ].open();
return;
}

// Create the media frame.
cmb.file_frames[cmb.formfield] = wp.media.frames.file_frame = wp.media({
cmb.file_frames[ cmb.formfield ] = wp.media({
title: $metabox.find('label[for=' + cmb.formfield + ']').text(),
button: {
text: l10n.strings.upload_file
Expand All @@ -174,7 +180,7 @@ window.CMB2 = (function(window, document, $, undefined){
});

var handlers = {
list : function( selection ) {
list : function( selection, returnIt ) {
// Get all of our selected files
attachment = selection.toJSON();

Expand Down Expand Up @@ -209,10 +215,15 @@ window.CMB2 = (function(window, document, $, undefined){
fileGroup.push( uploadStatus );
});

// Append each item from our fileGroup array to .cmb2-media-status
$( fileGroup ).each( function() {
$formfield.siblings('.cmb2-media-status').slideDown().append(this);
});
if ( ! returnIt ) {
// Append each item from our fileGroup array to .cmb2-media-status
$( fileGroup ).each( function() {
$formfield.siblings('.cmb2-media-status').slideDown().append(this);
});
} else {
return fileGroup;
}

},
single : function( selection ) {
// Only get one file from the uploader
Expand All @@ -235,17 +246,54 @@ window.CMB2 = (function(window, document, $, undefined){
}
};

// When an file is selected, run a callback.
cmb.file_frames[cmb.formfield].on( 'select', function() {
var selection = cmb.file_frames[cmb.formfield].state().get('selection');
var type = isList ? 'list' : 'single';
handlers[type]( selection );
});
// When a file is selected, run a callback.
cmb.file_frames[ cmb.formfield ]
.on( 'select', function() {
var selection = cmb.file_frames[ cmb.formfield ].state().get('selection');
var type = isList ? 'list' : 'single';

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

return;
}

handlers[type]( selection );
})
.on( 'open', function() {
if ( ! cmb.attach_id ) {
return;
}
var selection = cmb.file_frames[ cmb.formfield ].state().get('selection');
var attach = wp.media.attachment( cmb.attach_id ); // get attachment with id
attach.fetch();
selection.set( attach ? [ attach ] : [] );
});

// Finally, open the modal
cmb.file_frames[cmb.formfield].open();
cmb.file_frames[ cmb.formfield ].open();
};

cmb.handleFileClick = function( evt ) {

if ( ! wp ) {
return;
}

evt.preventDefault();

var $el = $( this );
var $td = $el.closest( '.cmb-td' );
var isList = $td.find( '.cmb2-upload-button' ).hasClass( 'cmb2-upload-list' );
cmb.attach_id = isList ? $el.find( 'input[type="hidden"]' ).data( 'id' ) : $td.find( '.cmb2-upload-file-id' ).val();

if ( cmb.attach_id ) {
cmb.log( 'handleFileClick cmb.attach_id', cmb.attach_id );
cmb._handleMedia( $td.find( 'input.cmb2-upload-file' ).attr('id'), isList, cmb.attach_id );
}
};


cmb.handleRemoveMedia = function( evt ) {
evt.preventDefault();
var $self = $(this);
Expand Down
2 changes: 1 addition & 1 deletion js/cmb2.min.js
View file

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions languages/cmb2.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
# This file is distributed under the same license as the CMB2 package.
msgid ""
msgstr ""
"Project-Id-Version: CMB2 2.0.1\n"
"Project-Id-Version: CMB2 2.0.2\n"
"Report-Msgid-Bugs-To: http://wordpress.org/support/plugin/cmb2\n"
"POT-Creation-Date: 2015-01-30 15:31:40+00:00\n"
"POT-Creation-Date: 2015-02-08 05:08:48+00:00\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"PO-Revision-Date: 2015-1-30 15:31+300\n"
"PO-Revision-Date: 2015-2-8 5:8+300\n"
"Last-Translator: WebDevStudios [email protected]\n"
"Language-Team: WebDevStudios [email protected]\n"
"X-Generator: grunt-wp-i18n 0.4.9\n"
Expand Down Expand Up @@ -281,7 +281,7 @@ msgstr ""
msgid "Please Try Again"
msgstr ""

#: includes/CMB2_Ajax.php:133 tests/test-cmb-types.php:763
#: includes/CMB2_Ajax.php:133 tests/test-cmb-types.php:771
msgid "Remove Embed"
msgstr ""

Expand All @@ -305,41 +305,41 @@ msgstr ""
msgid "All"
msgstr ""

#: includes/CMB2_Types.php:290
#: includes/CMB2_Types.php:292
msgid "Add Row"
msgstr ""

#: includes/CMB2_Types.php:349 includes/CMB2_Types.php:806
#: includes/CMB2_Types.php:883 includes/CMB2_hookup.php:180
#: includes/CMB2_Types.php:351 includes/CMB2_Types.php:810
#: includes/CMB2_Types.php:887 includes/CMB2_hookup.php:180
#: tests/test-cmb-types.php:147 tests/test-cmb-types.php:155
#: tests/test-cmb-types.php:712 tests/test-cmb-types.php:737
#: tests/test-cmb-types.php:719 tests/test-cmb-types.php:745
msgid "Remove"
msgstr ""

#: includes/CMB2_Types.php:684 includes/CMB2_Types.php:732
#: includes/CMB2_Types.php:686 includes/CMB2_Types.php:734
msgid "No terms"
msgstr ""

#: includes/CMB2_Types.php:776 includes/CMB2_Types.php:831
#: tests/test-cmb-types.php:688 tests/test-cmb-types.php:714
#: tests/test-cmb-types.php:724 tests/test-cmb-types.php:739
#: includes/CMB2_Types.php:778 includes/CMB2_Types.php:835
#: tests/test-cmb-types.php:688 tests/test-cmb-types.php:721
#: tests/test-cmb-types.php:732 tests/test-cmb-types.php:747
msgid "Add or Upload File"
msgstr ""

#: includes/CMB2_Types.php:797 includes/CMB2_Types.php:878
#: includes/CMB2_Types.php:801 includes/CMB2_Types.php:882
#: includes/CMB2_hookup.php:179
msgid "Remove Image"
msgstr ""

#: includes/CMB2_Types.php:806 includes/CMB2_Types.php:883
#: includes/CMB2_hookup.php:181 tests/test-cmb-types.php:713
#: tests/test-cmb-types.php:738
#: includes/CMB2_Types.php:810 includes/CMB2_Types.php:887
#: includes/CMB2_hookup.php:181 tests/test-cmb-types.php:720
#: tests/test-cmb-types.php:746
msgid "File:"
msgstr ""

#: includes/CMB2_Types.php:806 includes/CMB2_Types.php:883
#: includes/CMB2_hookup.php:182 tests/test-cmb-types.php:711
#: tests/test-cmb-types.php:736
#: includes/CMB2_Types.php:810 includes/CMB2_Types.php:887
#: includes/CMB2_hookup.php:182 tests/test-cmb-types.php:718
#: tests/test-cmb-types.php:744
msgid "Download"
msgstr ""

Expand Down
12 changes: 2 additions & 10 deletions tests/test-cmb-types.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -704,14 +704,7 @@ public function test_file_list_field_after_value_update() {
) );

$this->assertHTMLstringsAreEqual(
sprintf( '
<input type="hidden" class="cmb2-upload-file cmb2-upload-list" name="field_test_field" id="field_test_field" value="" size="45" data-previewsize=\'[50,50]\'/>
<input type="button" class="cmb2-upload-button button cmb2-upload-list" name="" id="" value="%7$s"/>
<p class="cmb2-metabox-description">This is a description</p>
<ul id="field_test_field-status" class="cmb2-media-status cmb-attach-list">
<li class="file-status"><span>%6$s <strong>?attachment_id=%1$d</strong></span>&nbsp;&nbsp; (<a href="%3$s/?attachment_id=%1$d" target="_blank" rel="external">%4$s</a> / <a href="#" class="cmb2-remove-file-button">%5$s</a>)<input type="hidden" name="field_test_field[%1$d]" id="filelist-%1$d" value="%3$s/?attachment_id=%1$d" data-id=\'%1$d\'/></li>
<li class="file-status"><span>%6$s <strong>?attachment_id=%2$d</strong></span>&nbsp;&nbsp; (<a href="%3$s/?attachment_id=%2$d" target="_blank" rel="external">%4$s</a> / <a href="#" class="cmb2-remove-file-button">%5$s</a>)<input type="hidden" name="field_test_field[%2$d]" id="filelist-%2$d" value="%3$s/?attachment_id=%2$d" data-id=\'%2$d\'/></li>
</ul>',
sprintf( '<input type="hidden" class="cmb2-upload-file cmb2-upload-list" name="field_test_field" id="field_test_field" value="" size="45" data-previewsize=\'[50,50]\'/><input type="button" class="cmb2-upload-button button cmb2-upload-list" name="" id="" value="%7$s"/><p class="cmb2-metabox-description">This is a description</p><ul id="field_test_field-status" class="cmb2-media-status cmb-attach-list"><li class="file-status"><span>%6$s <strong>?attachment_id=%1$d</strong></span>&nbsp;&nbsp; (<a href="%3$s/?attachment_id=%1$d" target="_blank" rel="external">%4$s</a> / <a href="#" class="cmb2-remove-file-button">%5$s</a>)<input type="hidden" name="field_test_field[%1$d]" id="filelist-%1$d" value="%3$s/?attachment_id=%1$d" data-id=\'%1$d\'/></li><li class="file-status"><span>%6$s <strong>?attachment_id=%2$d</strong></span>&nbsp;&nbsp; (<a href="%3$s/?attachment_id=%2$d" target="_blank" rel="external">%4$s</a> / <a href="#" class="cmb2-remove-file-button">%5$s</a>)<input type="hidden" name="field_test_field[%2$d]" id="filelist-%2$d" value="%3$s/?attachment_id=%2$d" data-id=\'%2$d\'/></li></ul>',
$this->attachment_id,
$this->attachment_id2,
site_url(),
Expand All @@ -728,8 +721,7 @@ public function test_file_list_field_after_value_update() {

public function test_file_field() {
$this->assertHTMLstringsAreEqual(
'<input type="text" class="cmb2-upload-file regular-text" name="field_test_field" id="field_test_field" value="" size="45" data-previewsize=\'[199,199]\'/>
<input class="cmb2-upload-button button" type="button" value="'. __( 'Add or Upload File', 'cmb2' ) .'" /><p class="cmb2-metabox-description">This is a description</p><input type="hidden" class="cmb2-upload-file-id" name="field_test_field_id" id="field_test_field_id" value="0"/><div id="field_test_field_id-status" class="cmb2-media-status"></div>',
'<input type="text" class="cmb2-upload-file regular-text" name="field_test_field" id="field_test_field" value="" size="45" data-previewsize=\'[199,199]\'/><input class="cmb2-upload-button button" type="button" value="'. __( 'Add or Upload File', 'cmb2' ) .'" /><p class="cmb2-metabox-description">This is a description</p><input type="hidden" class="cmb2-upload-file-id" name="field_test_field_id" id="field_test_field_id" value="0"/><div id="field_test_field_id-status" class="cmb2-media-status"></div>',
$this->capture_render( array( $this->get_field_type_object( array( 'type' => 'file', 'preview_size' => array( 199, 199 ) ) ), 'render' ) )
);
}
Expand Down

0 comments on commit 10c1f1b

Please sign in to comment.