fileprogress.js 6.8 KB

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