attachment_magick 0.1.0

data/test/dummy/public/javascripts/swfupload/handlers.js

@@ -0,0 +1,384 @@
+$(document).ready(function() {
+  attachmentMagick.startup();
+});
+
+var attachmentMagick = {
+  startup: function(){
+    this.elementKey       = $('#attachmentmagick_key');
+    this.data_attachment  = this.elementKey.attr('data_attachment');
+    this.data_partial     = $('#attachmentmagick_partial').attr('data-partial') || "";
+    this.elementSortable  = $(".attachmentSortable:first");
+
+    if ( $('#attachmentProgressContainer') ) { attachmentMagick.prepareImageUpload( this.data_attachment, this.data_partial ); }
+    $('.remove_image').live('click', function(){ attachmentMagick.removeImage( $(this) ); });
+    $('.video_upload').click(function(){ attachmentMagick.uploadVideo() });
+    $('.tiny_add_image').live('click', function(){ attachmentMagick.addImageToTiny( $(this) ); });
+    this.elementSortable.sortable({ update: function(event, ui){ attachmentMagick.updateImageList(); }});
+  },
+  removeImage: function(el){
+    var $attach_image = el.parents('.attachment_magick_image')
+    var $image        = $attach_image.find("img:first");
+    var image_id      = $attach_image.find("input[type='hidden']:first").val();
+    var url_path      = "/attachment_magick/images/"+image_id+"/"+this.data_attachment
+
+    $.ajax({
+      type: "DELETE",
+      url:  url_path,
+
+      success: function(data){
+        $image.fadeOut(250, function(){ $(this).parents('.attachment_magick_image').remove(); })
+      }
+    });
+  },
+  updateImageList: function(el){
+    var sort  = this.elementSortable.sortable('toArray');
+    var array = new Array();
+
+    for( var i = 0; i < sort.length; i++ ){ array.push( sort[i].split('_').pop() ); };
+
+    $.ajax({
+       type: "POST",
+       url: "/attachment_magick/images/update_sortable",
+       data: {images: array, data_attachment: this.data_attachment}
+     });
+  },
+  prepareImageUpload: function(data_attachment, data_partial){
+    var swfu = new SWFUpload({
+          upload_url :                  '/attachment_magick/images/',
+          post_params :                 { 'data_attachment' : data_attachment, 'data_partial' : data_partial },
+
+          file_size_limit:              '20 MB',
+          file_types:                   '*.jpg; *.png; *.gif; *.jpeg',
+          file_types_description:       'Images Files',
+          file_upload_limit :           0,
+
+          file_queue_error_handler:     fileQueueError,
+          file_dialog_complete_handler: fileDialogComplete,
+          upload_progress_handler:      uploadProgress,
+          upload_error_handler:         uploadError,
+          upload_success_handler:       uploadSuccess,
+          upload_complete_handler:      uploadComplete,
+
+          button_placeholder_id:        'attachmentButton',
+          button_width:                 160,
+          button_height:                16,
+          button_text :                 '<span class="button">BROWSE...</span>',
+          button_text_style:            '.button { font-family: Helvetica, Arial, sans-serif; font-size: 11pt; border:1px solid #000;} .buttonSmall { font-size: 10pt; }',
+          button_text_top_padding:      0,
+          button_text_left_padding:     0,
+          button_window_mode:           SWFUpload.WINDOW_MODE.TRANSPARENT,
+          button_cursor:                SWFUpload.CURSOR.HAND,
+
+          flash_url:                    '/javascripts/swfupload/swfupload.swf',
+          custom_settings:              { upload_target : 'attachmentProgressContainer' },
+          debug: false
+        });
+
+      return swfu;
+  },
+  uploadVideo: function(){
+    var $el         = $("#image_source");
+    var method      = 'post';
+    var form_action = '/attachment_magick/images';
+    var form_data   = $el.val();
+
+    if (form_data.trim() == "")
+      return false
+
+    $.ajax({
+      type: method,
+      url:  form_action,
+      data: {"source" : form_data, data_attachment: this.data_attachment, data_partial: this.data_partial},
+
+      success: function(data){
+        $('#'+attachmentMagick.elementKey.val()+"").append(data);
+        $el.attr('value', "");
+        attachmentMagick.updateImageList();
+      }
+    });
+  }
+}
+
+function fileQueueError(file, errorCode, message) {
+  try {
+    var imageName = "error.gif";
+    var errorName = "";
+    if (errorCode === SWFUpload.errorCode_QUEUE_LIMIT_EXCEEDED) {
+      errorName = "Muitos arquivos na fila ao mesmo tempo.";
+    }
+
+    if (errorName !== "") {
+      alert(errorName);
+      return;
+    }
+
+    switch (errorCode) {
+    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
+      imageName = "zerobyte.gif";
+      break;
+    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
+      imageName = "toobig.gif";
+      break;
+    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
+    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
+    default:
+      alert(message);
+      break;
+    }
+
+    addImage("/images/swfupload/" + imageName);
+
+  } catch (ex) {
+    this.debug(ex);
+  }
+
+}
+
+function fileDialogComplete(numFilesSelected, numFilesQueued) {
+  try {
+    if (numFilesQueued > 0) {
+      this.startUpload();
+    }
+  } catch (ex) {
+    this.debug(ex);
+  }
+}
+
+function uploadProgress(file, bytesLoaded) {
+
+  try {
+    var percent = Math.ceil((bytesLoaded / file.size) * 100);
+
+    var progress = new FileProgress(file,  this.customSettings.upload_target);
+    progress.setProgress(percent);
+    if (percent === 100) {
+      progress.setStatus("Criando thumbnail...");
+      progress.toggleCancel(false, this);
+    } else {
+      progress.setStatus("Fazendo upload...");
+      progress.toggleCancel(true, this);
+    }
+  } catch (ex) {
+    this.debug(ex);
+  }
+}
+
+function uploadSuccess(file, serverData) {
+  try {
+    var progress = new FileProgress(file,  this.customSettings.upload_target);
+
+      addImagePublisher(serverData)
+      progress.setStatus("Thumbnail criado.");
+      progress.toggleCancel(false);
+
+  } catch (ex) {
+    this.debug(ex);
+  }
+}
+
+function uploadComplete(file) {
+  try {
+    /*  I want the next upload to continue automatically so I'll call startUpload here */
+
+    if (this.getStats().files_queued > 0) {
+      this.startUpload();
+    } else {
+      var progress = new FileProgress(file,  this.customSettings.upload_target);
+      progress.setComplete();
+      progress.setStatus("Todas imagens recebidas.");
+      progress.toggleCancel(false);
+      update_img_index();
+    }
+  } catch (ex) {
+    this.debug(ex);
+  }
+}
+
+function uploadError(file, errorCode, message) {
+  var imageName =  "error.gif";
+  var progress;
+  try {
+    switch (errorCode) {
+    case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
+      try {
+        progress = new FileProgress(file,  this.customSettings.upload_target);
+        progress.setCancelled();
+        progress.setStatus("Cancelado");
+        progress.toggleCancel(false);
+      }
+      catch (ex1) {
+        this.debug(ex1);
+      }
+      break;
+    case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
+      try {
+        progress = new FileProgress(file,  this.customSettings.upload_target);
+        progress.setCancelled();
+        progress.setStatus("Parado");
+        progress.toggleCancel(true);
+      }
+      catch (ex2) {
+        this.debug(ex2);
+      }
+    case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
+      imageName = "uploadlimit.gif";
+      break;
+    default:
+      alert(message);
+      break;
+    }
+
+    addImage("/images/swfupload/" + imageName);
+
+  } catch (ex3) {
+    this.debug(ex3);
+  }
+
+}
+
+function addImagePublisher(serverData){
+  $('#'+attachmentMagick.elementKey.val()+"").prepend(serverData);
+  attachmentMagick.updateImageList( $('#'+attachmentMagick.elementKey.val()+"") );
+}
+
+function addImage(src) {
+  var newImg = document.createElement("img");
+  newImg.style.margin = "5px";
+
+  document.getElementById("thumbnails").appendChild(newImg);
+
+  if (newImg.filters) {
+    try {
+      newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
+    } catch (e) {
+      // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
+      newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
+    }
+  } else {
+    newImg.style.opacity = 0;
+  }
+
+  newImg.onload = function () {
+    fadeIn(newImg, 0);
+  };
+  newImg.src = src;
+}
+
+function fadeIn(element, opacity) {
+  var reduceOpacityBy = 5;
+  var rate = 30;  // 15 fps
+
+  if (opacity < 100) {
+    opacity += reduceOpacityBy;
+    if (opacity > 100) {
+      opacity = 100;
+    }
+
+    if (element.filters) {
+      try {
+        element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
+      } catch (e) {
+        // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
+        element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
+      }
+    } else {
+      element.style.opacity = opacity / 100;
+    }
+  }
+
+  if (opacity < 100) {
+    setTimeout(function () {
+      fadeIn(element, opacity);
+    }, rate);
+  }
+}
+
+
+/* ******************************************
+ *  FileProgress Object
+ *  Control object for displaying file info
+ * ****************************************** */
+function FileProgress(file, targetID) {
+  this.fileProgressID = "divFileProgress";
+
+  this.fileProgressWrapper = document.getElementById(this.fileProgressID);
+  if (!this.fileProgressWrapper) {
+    this.fileProgressWrapper = document.createElement("div");
+    this.fileProgressWrapper.className = "progressWrapper";
+    this.fileProgressWrapper.id = this.fileProgressID;
+
+    this.fileProgressElement = document.createElement("div");
+    this.fileProgressElement.className = "progressContainer";
+
+    var progressCancel = document.createElement("a");
+    progressCancel.className = "progressCancel";
+    progressCancel.href = "#";
+    progressCancel.style.visibility = "hidden";
+    progressCancel.appendChild(document.createTextNode(" "));
+
+    var progressText = document.createElement("div");
+    progressText.className = "progressName";
+    progressText.appendChild(document.createTextNode(file.name));
+
+    var progressBar = document.createElement("div");
+    progressBar.className = "progressBarInProgress";
+
+    var progressStatus = document.createElement("div");
+    progressStatus.className = "progressBarStatus";
+    progressStatus.innerHTML = "&nbsp;";
+
+    this.fileProgressElement.appendChild(progressCancel);
+    this.fileProgressElement.appendChild(progressText);
+    this.fileProgressElement.appendChild(progressStatus);
+    this.fileProgressElement.appendChild(progressBar);
+
+    this.fileProgressWrapper.appendChild(this.fileProgressElement);
+
+    document.getElementById(targetID).appendChild(this.fileProgressWrapper);
+    fadeIn(this.fileProgressWrapper, 0);
+
+  } else {
+    this.fileProgressElement = this.fileProgressWrapper.firstChild;
+    this.fileProgressElement.childNodes[1].firstChild.nodeValue = file.name;
+  }
+
+  this.height = this.fileProgressWrapper.offsetHeight;
+
+}
+FileProgress.prototype.setProgress = function (percentage) {
+  this.fileProgressElement.className = "progressContainer green";
+  this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
+  this.fileProgressElement.childNodes[3].style.width = percentage + "%";
+};
+FileProgress.prototype.setComplete = function () {
+  this.fileProgressElement.className = "progressContainer blue";
+  this.fileProgressElement.childNodes[3].className = "progressBarComplete";
+  this.fileProgressElement.childNodes[3].style.width = "";
+
+};
+FileProgress.prototype.setError = function () {
+  this.fileProgressElement.className = "progressContainer red";
+  this.fileProgressElement.childNodes[3].className = "progressBarError";
+  this.fileProgressElement.childNodes[3].style.width = "";
+
+};
+FileProgress.prototype.setCancelled = function () {
+  this.fileProgressElement.className = "progressContainer";
+  this.fileProgressElement.childNodes[3].className = "progressBarError";
+  this.fileProgressElement.childNodes[3].style.width = "";
+
+};
+FileProgress.prototype.setStatus = function (status) {
+  this.fileProgressElement.childNodes[2].innerHTML = status;
+};
+
+FileProgress.prototype.toggleCancel = function (show, swfuploadInstance) {
+  this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
+  if (swfuploadInstance) {
+    var fileID = this.fileProgressID;
+    this.fileProgressElement.childNodes[0].onclick = function () {
+      swfuploadInstance.cancelUpload(fileID);
+      return false;
+    };
+  }
+};