198 lines
4.0 KiB
JavaScript
198 lines
4.0 KiB
JavaScript
(function($, undefined){
|
|
|
|
var Field = acf.Field.extend({
|
|
|
|
type: 'image',
|
|
|
|
$control: function(){
|
|
return this.$('.acf-image-uploader');
|
|
},
|
|
|
|
$input: function(){
|
|
return this.$('input[type="hidden"]');
|
|
},
|
|
|
|
events: {
|
|
'click a[data-name="add"]': 'onClickAdd',
|
|
'click a[data-name="edit"]': 'onClickEdit',
|
|
'click a[data-name="remove"]': 'onClickRemove',
|
|
'change input[type="file"]': 'onChange'
|
|
},
|
|
|
|
initialize: function(){
|
|
|
|
// add attribute to form
|
|
if( this.get('uploader') === 'basic' ) {
|
|
this.$el.closest('form').attr('enctype', 'multipart/form-data');
|
|
}
|
|
},
|
|
|
|
validateAttachment: function( attachment ){
|
|
|
|
// defaults
|
|
attachment = attachment || {};
|
|
|
|
// WP attachment
|
|
if( attachment.id !== undefined ) {
|
|
attachment = attachment.attributes;
|
|
}
|
|
|
|
// args
|
|
attachment = acf.parseArgs(attachment, {
|
|
url: '',
|
|
alt: '',
|
|
title: '',
|
|
caption: '',
|
|
description: '',
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
|
|
// preview size
|
|
var url = acf.isget(attachment, 'sizes', this.get('preview_size'), 'url');
|
|
if( url !== null ) {
|
|
attachment.url = url;
|
|
}
|
|
|
|
// return
|
|
return attachment;
|
|
},
|
|
|
|
render: function( attachment ){
|
|
|
|
// vars
|
|
attachment = this.validateAttachment( attachment );
|
|
|
|
// update image
|
|
this.$('img').attr({
|
|
src: attachment.url,
|
|
alt: attachment.alt,
|
|
title: attachment.title
|
|
});
|
|
|
|
// vars
|
|
var val = attachment.id || '';
|
|
|
|
// update val
|
|
this.val( val );
|
|
|
|
// update class
|
|
if( val ) {
|
|
this.$control().addClass('has-value');
|
|
} else {
|
|
this.$control().removeClass('has-value');
|
|
}
|
|
},
|
|
|
|
// create a new repeater row and render value
|
|
append: function( attachment, parent ){
|
|
|
|
// create function to find next available field within parent
|
|
var getNext = function( field, parent ){
|
|
|
|
// find existing file fields within parent
|
|
var fields = acf.getFields({
|
|
key: field.get('key'),
|
|
parent: parent.$el
|
|
});
|
|
|
|
// find the first field with no value
|
|
for( var i = 0; i < fields.length; i++ ) {
|
|
if( !fields[i].val() ) {
|
|
return fields[i];
|
|
}
|
|
}
|
|
|
|
// return
|
|
return false;
|
|
}
|
|
|
|
// find existing file fields within parent
|
|
var field = getNext( this, parent );
|
|
|
|
// add new row if no available field
|
|
if( !field ) {
|
|
parent.$('.acf-button:last').trigger('click');
|
|
field = getNext( this, parent );
|
|
}
|
|
|
|
// render
|
|
if( field ) {
|
|
field.render( attachment );
|
|
}
|
|
},
|
|
|
|
selectAttachment: function(){
|
|
|
|
// vars
|
|
var parent = this.parent();
|
|
var multiple = (parent && parent.get('type') === 'repeater');
|
|
|
|
// new frame
|
|
var frame = acf.newMediaPopup({
|
|
mode: 'select',
|
|
type: 'image',
|
|
title: acf.__('Select Image'),
|
|
field: this.get('key'),
|
|
multiple: multiple,
|
|
library: this.get('library'),
|
|
allowedTypes: this.get('mime_types'),
|
|
select: $.proxy(function( attachment, i ) {
|
|
if( i > 0 ) {
|
|
this.append( attachment, parent );
|
|
} else {
|
|
this.render( attachment );
|
|
}
|
|
}, this)
|
|
});
|
|
},
|
|
|
|
editAttachment: function(){
|
|
|
|
// vars
|
|
var val = this.val();
|
|
|
|
// bail early if no val
|
|
if( !val ) return;
|
|
|
|
// popup
|
|
var frame = acf.newMediaPopup({
|
|
mode: 'edit',
|
|
title: acf.__('Edit Image'),
|
|
button: acf.__('Update Image'),
|
|
attachment: val,
|
|
field: this.get('key'),
|
|
select: $.proxy(function( attachment, i ) {
|
|
this.render( attachment );
|
|
}, this)
|
|
});
|
|
},
|
|
|
|
removeAttachment: function(){
|
|
this.render( false );
|
|
},
|
|
|
|
onClickAdd: function( e, $el ){
|
|
this.selectAttachment();
|
|
},
|
|
|
|
onClickEdit: function( e, $el ){
|
|
this.editAttachment();
|
|
},
|
|
|
|
onClickRemove: function( e, $el ){
|
|
this.removeAttachment();
|
|
},
|
|
|
|
onChange: function( e, $el ){
|
|
var $hiddenInput = this.$input();
|
|
|
|
acf.getFileInputData($el, function( data ){
|
|
$hiddenInput.val( $.param(data) );
|
|
});
|
|
}
|
|
});
|
|
|
|
acf.registerFieldType( Field );
|
|
|
|
})(jQuery); |