(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( '
  • ' + '
    ' + '' + title_field + alt_field + '' + '' + '' + '
  • '); // 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);