[Summary view] [Print] [Text view]

   1  /* $Id: fileprogress.js,v 1.2 2008/08/23 21:35:26 grandcat Exp $ */
   2  
   3  /*
   4      File: fileprogress.js
   5      A simple class for displaying file information and progress
   6      Note: This code is mainly based on the demo "SWFUpload Demos - Simple Demo"
   7      Note: Some have had problems adapting this class in IE7. It may not be suitable for your application.
   8  */
   9  
  10  // Constructor
  11  // file is a SWFUpload file object
  12  // targetID is the HTML element id attribute that the FileProgress HTML structure will be added to.
  13  // Instantiating a new FileProgress object with an existing file will reuse/update the existing DOM elements
  14  function FileProgress(file, targetID) {
  15      this.fileProgressID = file.id;
  16  
  17      this.opacity = 100;
  18      this.height = 0;
  19  
  20      this.fileProgressWrapper = document.getElementById(this.fileProgressID);
  21      if (!this.fileProgressWrapper) {
  22          this.fileProgressWrapper = document.createElement("div");
  23          this.fileProgressWrapper.className = "progressWrapper";
  24          this.fileProgressWrapper.id = this.fileProgressID;
  25  
  26          this.fileProgressElement = document.createElement("div");
  27          this.fileProgressElement.className = "progressContainer";
  28  
  29          var progressCancel = document.createElement("a");
  30          progressCancel.className = "progressCancel";
  31          progressCancel.href = "#";
  32          progressCancel.style.visibility = "hidden";
  33          progressCancel.appendChild(document.createTextNode(" "));
  34  
  35          var progressText = document.createElement("div");
  36          progressText.className = "progressName";
  37          progressText.appendChild(document.createTextNode(file.name));
  38  
  39          var progressBar = document.createElement("div");
  40          progressBar.className = "progressBarInProgress";
  41  
  42          var progressStatus = document.createElement("div");
  43          progressStatus.className = "progressBarStatus";
  44          progressStatus.innerHTML = " ";
  45  
  46          this.fileProgressElement.appendChild(progressCancel);
  47          this.fileProgressElement.appendChild(progressText);
  48          this.fileProgressElement.appendChild(progressStatus);
  49          this.fileProgressElement.appendChild(progressBar);
  50  
  51          this.fileProgressWrapper.appendChild(this.fileProgressElement);
  52  
  53          document.getElementById(targetID).appendChild(this.fileProgressWrapper);
  54      } else {
  55          this.fileProgressElement = this.fileProgressWrapper.firstChild;
  56      }
  57  
  58      this.height = this.fileProgressWrapper.offsetHeight;
  59  
  60  }
  61  FileProgress.prototype.setProgress = function (percentage) {
  62      this.fileProgressElement.className = "progressContainer green";
  63      this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  64      this.fileProgressElement.childNodes[3].style.width = percentage + "%";
  65  };
  66  FileProgress.prototype.setComplete = function () {
  67      this.fileProgressElement.className = "progressContainer blue";
  68      this.fileProgressElement.childNodes[3].className = "progressBarComplete";
  69      this.fileProgressElement.childNodes[3].style.width = "";
  70  
  71      var oSelf = this;
  72      setTimeout(function () {
  73          oSelf.disappear();
  74      }, 10000);
  75  };
  76  FileProgress.prototype.setError = function () {
  77      this.fileProgressElement.className = "progressContainer red";
  78      this.fileProgressElement.childNodes[3].className = "progressBarError";
  79      this.fileProgressElement.childNodes[3].style.width = "";
  80  
  81      var oSelf = this;
  82      setTimeout(function () {
  83          oSelf.disappear();
  84      }, 7000);
  85  };
  86  FileProgress.prototype.setCancelled = function () {
  87      this.fileProgressElement.className = "progressContainer";
  88      this.fileProgressElement.childNodes[3].className = "progressBarError";
  89      this.fileProgressElement.childNodes[3].style.width = "";
  90  
  91      var oSelf = this;
  92      setTimeout(function () {
  93          oSelf.disappear();
  94      }, 2000);
  95  };
  96  FileProgress.prototype.setStatus = function (status) {
  97      this.fileProgressElement.childNodes[2].innerHTML = status;
  98  };
  99  
 100  // Show/Hide the cancel button
 101  FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {
 102      this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
 103      if (swfUploadInstance) {
 104          var fileID = this.fileProgressID;
 105          this.fileProgressElement.childNodes[0].onclick = function () {
 106              swfUploadInstance.cancelUpload(fileID);
 107              return false;
 108          };
 109      }
 110  };
 111  
 112  // Fades out and clips away the FileProgress box.
 113  FileProgress.prototype.disappear = function () {
 114  
 115      var reduceOpacityBy = 15;
 116      var reduceHeightBy = 4;
 117      var rate = 30;    // 15 fps
 118  
 119      if (this.opacity > 0) {
 120          this.opacity -= reduceOpacityBy;
 121          if (this.opacity < 0) {
 122              this.opacity = 0;
 123          }
 124  
 125          if (this.fileProgressWrapper.filters) {
 126              try {
 127                  this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
 128              } catch (e) {
 129                  // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
 130                  this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
 131              }
 132          } else {
 133              this.fileProgressWrapper.style.opacity = this.opacity / 100;
 134          }
 135      }
 136  
 137      if (this.height > 0) {
 138          this.height -= reduceHeightBy;
 139          if (this.height < 0) {
 140              this.height = 0;
 141          }
 142  
 143          this.fileProgressWrapper.style.height = this.height + "px";
 144      }
 145  
 146      if (this.height > 0 || this.opacity > 0) {
 147          var oSelf = this;
 148          setTimeout(function () {
 149              oSelf.disappear();
 150          }, rate);
 151      } else {
 152          this.fileProgressWrapper.style.display = "none";
 153      }
 154  };