nudesign/media_magick

View on GitHub
app/assets/javascripts/media_magick/plupload_it.js

Summary

Maintainability
A
3 hrs
Test Coverage
//= require moxie
//= require plupload.dev

// optional, but recommended. it sets generic settings like flash url, etc.
//= require plupload.settings

// optional, only if you want to use the jquery integration
//= require jquery.plupload.queue

(function($) {

  $.fn.pluploadIt = function (options) {

    var settings = $.extend({
      browse_button:        'pickAttachments', // triggers modal to select files
      container:            'attachmentUploader',
      drop_element:         'dropAttachments',
      flash_swf_url:        '/assets/plupload.flash.swf',
      max_file_size:        '10mb',
      queue_element:        'attachmentQueue',
      resize:               false,
      runtimes:             'gears,html5,flash,browserplus,html4',
      silverlight_xap_url:  '/assets/plupload.silverlight.xap',
      target_list:          'loadedAttachments',
      unique_names:         false,
      upload_button:        'uploadAttachments',
      url:                  '/upload'
    }, options);

    return this.each(function() {

      var $container = $(this);
      settings.container = $container.attr('id');
      var modelAndRelation = $container.data('model').replace(/::/g,'-') + "-" + $container.data('relation');

      // setup unique ids from classes
      $container.find('.' + settings.browse_button).attr('id', settings.container + '-' + settings.browse_button);
      $container.find('.' + settings.drop_element).attr('id', settings.container + '-' + settings.drop_element);
      $container.find('.' + settings.queue_element).attr('id', settings.container + '-' + settings.queue_element);
      $container.find('.' + settings.target_list).attr('id', settings.container + '-' + settings.target_list);
      $container.find('.' + settings.upload_button).attr('id', settings.container + '-' + settings.upload_button);

      var uploader = new plupload.Uploader({
        browse_button:        settings.container + '-' + settings.browse_button,
        container:            settings.container,
        drop_element:         settings.container + '-' + settings.drop_element,
        flash_swf_url:        settings.flash_swf_url,
        max_file_size:        settings.max_file_size,
        multipart_params: {
          id:                 $container.data('id'),
          relation:           $container.data('relation'),
          model:              $container.data('model'),
          partial:            $container.data('partial') === undefined ? '' : $container.data('partial'),
          loader_partial:     $container.data('loader-partial') === undefined ? '' : $container.data('loader-partial'),
          embedded_in_model:  $container.data('embedded-in-model') === undefined ? '' : $container.data('embedded-in-model'),
          embedded_in_id:     $container.data('embedded-in-id') === undefined ? '' : $container.data('embedded-in-id')
        },
        resize:               settings.resize,
        runtimes:             settings.runtimes,
        silverlight_xap_url:  settings.silverlight_xap_url,
        unique_names:         settings.unique_names,
        url:                  settings.url
      });

      uploader.bind('Init', function(up, params) {
        if ($('#' + settings.container + '-runtimeInfo').length > 0) $('#' + settings.container + '-runtimeInfo').text("Current runtime: " + params.runtime);
      });

      $('#' + settings.container + '-' + settings.upload_button).click(function(e) {
        uploader.start();
        e.preventDefault();
      });

      uploader.init();

      (function (container, queue_element, target_list) {
        uploader.bind('FilesAdded', function(up, files) {
          $.each(files, function(i, file) {
            $('#' + container + '-' + queue_element).append(
              '<li id="' + file.id + '" class="attachment">' +
              file.name + ' (' + plupload.formatSize(file.size) + ') <span class="status"></span>' +
              '</li>'
            ).find("li:last").append(
              $('<a href="javascript://" class="remove btn btn-mini">x</a>').bind('click', function () {
                uploader.removeFile(file);
                $(this).parent().remove();
              })
            );
          });

          up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('UploadProgress', function(up, file) {
          $('#' + file.id + " span.status").html(file.percent + "%");
        });

        uploader.bind('Error', function(up, err) {
          $('#' + container + '-' + queue_element).append("<li class='attachment error'>Error: " + err.code +
          ", Message: " + err.message +
          (err.file ? ", File: " + err.file.name : "") +
          "</li>");

          up.refresh(); // Reposition Flash/Silverlight
        });

        uploader.bind('FileUploaded', function(up, file, response) {
          $('#' + file.id).addClass('completed');
          $('#' + file.id + " span.status").html("100%");
          $("#" + modelAndRelation + '-' + target_list).append(response.response);
        });
      })(settings.container, settings.queue_element, settings.target_list);

    });

  };
})(jQuery);

$(function() {
  // video upload (youtube/vimeo)
  $('body').on('click', '.attachmentVideoUploader a.attachmentVideoUploaderButton', function(){
    var $container  = $(this).parent(".attachmentVideoUploader");
    var $attachment = $(this).parents('.attachment');
    var $videoField = $container.find(".attachmentVideoUploaderField");
    var modelAndRelation = $container.data('model').replace(/::/g,'-') + "-" + $container.data('relation');

    $.ajax({
      type: 'POST',
      url: '/upload',
      data: {
        model: $container.data('model'),
        id: $container.data('id'),
        relation: $container.data('relation'),
        relation_id: $attachment.data('id'),
        embedded_in_model: $container.data('embedded-in-model'),
        embedded_in_id: $container.data('embedded-in-id'),
        partial: $container.data('partial') === undefined ? '' : $container.data('partial'),
        video: $videoField.val()
      },
      success: function(data) {
        $('#' + modelAndRelation + '-loadedAttachments').append(data);
        $videoField.val("");
      }
    });
  });

  // attachment removal
  $('body').on('click', '.loadedAttachments a.remove', function() {
    var confirmation_message = $(this).data("confirmation");
    var answer = confirm(confirmation_message);

    if(answer) {
      var $container  = $(this).parents('.loadedAttachments');
      var $attachment = $(this).parents('.attachment');

      $.ajax({
        type: 'DELETE',
        url: '/remove',
        data: {
          model: $container.data('model'),
          id: $container.data('id'),
          relation: $container.data('relation'),
          relation_id: $attachment.data('id'),
          embedded_in_model: $container.data('embedded-in-model'),
          embedded_in_id: $container.data('embedded-in-id')
        },
        success: function(data) {
          $attachment.remove();
        }
      });
    }
  });
});