(function ($) {
// Bind removing of file to selector elements
function plup_remove_item(selector) {
$(selector).bind('click', function(event) {
var parent = $(this).parent();
var parentsParent = parent.parent();
parent.remove();
parentsParent.trigger('formUpdated');
});
}
// Bind resize effect on title and alt fields on focus
function plup_resize_input(selector) {
var w = $(selector).outerWidth();
if (w < 300) {
$(selector).bind('focus', function(event) {
$(this).css('z-index', 10).animate({'width': '300px'}, 300);
});
$(selector).bind('blur', function(event) {
$(this).removeAttr('style');
});
}
}
Drupal.behaviors.plup = {
attach: function(context, settings) {
// Apply Plupload to each form element instance
$.each(settings.plup, function(plupName, plupInstance) {
var cid = plupInstance.container;
var id = '#' + cid;
// Apply setting only once
$(id).once('plup', function() {
/**
* Initial tasks
*/
$(id +' .plup-list').sortable(); // Activate sortable
$(id +'-plup-upload').hide(); // Hide upload button
var uploader = new plupload.Uploader(plupInstance); // Create Plupload instance
plup_remove_item(id +' .plup-remove-item'); // Bind remove functionality on existing images
plup_resize_input(id +' .plup-list > li > input.form-text'); // Bind resizing effect on existing inputs
/**
* Events
*/
// Initialization
uploader.bind('Init', function(up, params) {
// Nothing to do, just reminder of the presence for this event
});
// Starting upload
uploader.bind('Start', function(up, files) {
// Nothing to do, just reminder of the presence for this event
});
// Upload process state
uploader.bind('StateChanged', function(up) {
if (up.state == 2) {
$(id +' .plup-progress').progressbar(); // Activate progressbar
}
if (up.state == 1) {
$(id +' .plup-progress').progressbar('destroy'); // Destroy progressbar
$(id +'-plup-upload').hide(); // Hide upload button
$(id +' .plup-drag-info').show(); // Show info
}
})
// Files were added into queue(only CURRENTLY added files)
uploader.bind('FilesAdded', function(up, files) {
$(id +' .plup-drag-info').hide(); // Hide info
$(id +'-plup-upload').show(); // Show upload button
// Put files visually into queue
$.each(files, function(i, file) {
$(id +'-plup-filelist table').append('
' +
'
' + file.name + '
' +
'
' + plupload.formatSize(file.size) + '
' +
'
' +
'
' +
'
');
// Bind "remove" functionality to files added into queue
$(id +' #' + file.id + ' .plup-filelist-remove > a').bind('click', function(event) {
$('#' + file.id).remove();
up.removeFile(file);
});
});
up.refresh(); // Refresh for flash or silverlight
});
// File was removed from queue
// Doc states this ARE files but actually it IS a file
uploader.bind('FilesRemoved', function(up, file) {
// If there are not files in queue
if (up.files.length == 0) {
$(id +'-plup-upload').hide(); // Hide upload button
$(id +' .plup-drag-info').show(); // Show info
}
});
// File is being uploaded
uploader.bind('UploadProgress', function(up, file) {
// Refresh progressbar
$(id +' .plup-progress').progressbar({value: uploader.total.percent});
});
// Error event
uploader.bind('Error', function(up, err) {
$(id +' #' + err.file.id + ' > .plup-filelist-message').append('Error: ' + err.message + '');
up.refresh(); // Refresh for flash or silverlight
});
// Event after a file has been uploaded from queue
uploader.bind('FileUploaded', function(up, file, response) {
// Response is an object with response parameter so 2x response
var fileSaved = $.parseJSON(response.response);
var delta = $(id +' .plup-list li').length;
var name = plupName +'[' + delta + ']';
// Plupload has weird error handling behavior so we have to check for errors here
if (fileSaved.error_message) {
$(id +' #' + file.id + ' > .plup-filelist-message').append('Error: ' + fileSaved.error_message + '');
up.refresh(); // Refresh for flash or silverlight
return;
}
$(id +'-plup-filelist #' + file.id).remove(); // Remove uploaded file from queue
var title_field = plupInstance.title_field ? '' : '';
var alt_field = plupInstance.alt_field ? '' : '';
// Add image thumbnail into list of uploaded items
$(id +' .plup-list').append(
'
');
// Bind remove functionality to uploaded file
var new_element = $('input[name="'+ name +'[fid]"]');
var remove_element = $(new_element).siblings('.plup-remove-item');
plup_remove_item(remove_element);
// Bind resize effect to inputs of uploaded file
var text_element = $(new_element).siblings('input.form-text');
plup_resize_input(text_element);
// Tell Drupal that form has been updated
new_element.trigger('formUpdated');
});
// All fields from queue has been uploaded
uploader.bind('UploadComplete', function(up, files) {
$(id +' .plup-list').sortable('refresh'); // Refresh sortable
$(id +' .plup-drag-info').show(); // Show info
});
/**
* Additional tasks
*/
// Upload button functionality
$('#'+ plupInstance.upload).click(function(e) {
// Forbid uploading more than the allowed number of files, if set
if (plupInstance.max_files > 0) {
var uploaded = $(id +' .plup-list li').length;
var selected = $(id +'-plup-filelist td.plup-filelist-file').length;
var allowed = plupInstance.max_files - uploaded;
if ((selected + uploaded) > plupInstance.max_files) {
alert(Drupal.formatPlural(allowed, 'You can upload only 1 file.', 'You can upload only @count files.'));
return;
}
}
uploader.start();
e.preventDefault();
});
// Initialize Plupload
uploader.init();
// Change weight values for images when reordering using sortable
$(id +' .plup-list').bind('sortupdate', function(event, ui) {
$(this).find('li').each(function(index) {
$(this).find('input[name$="[weight]"]').val(index);
});
});
});
});
}
}
})(jQuery);