fileprogress.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. function FileProgress(file, targetID) {
  2. this.fileProgressID = file.id;
  3. this.opacity = 100;
  4. this.height = 0;
  5. this.fileProgressWrapper = document.getElementById(this.fileProgressID);
  6. if (!this.fileProgressWrapper) {
  7. this.fileProgressWrapper = document.createElement("div");
  8. this.fileProgressWrapper.className = "progressWrapper";
  9. this.fileProgressWrapper.id = this.fileProgressID;
  10. this.fileProgressElement = document.createElement("div");
  11. this.fileProgressElement.className = "progressContainer";
  12. var progressCancel = document.createElement("a");
  13. progressCancel.className = "progressCancel";
  14. progressCancel.href = "#";
  15. progressCancel.style.visibility = "hidden";
  16. progressCancel.appendChild(document.createTextNode(" "));
  17. var progressText = document.createElement("div");
  18. progressText.className = "progressName";
  19. progressText.appendChild(document.createTextNode(file.name));
  20. var progressBar = document.createElement("div");
  21. progressBar.className = "progressBarInProgress";
  22. var progressStatus = document.createElement("div");
  23. progressStatus.className = "progressBarStatus";
  24. progressStatus.innerHTML = " ";
  25. this.fileProgressElement.appendChild(progressCancel);
  26. this.fileProgressElement.appendChild(progressText);
  27. this.fileProgressElement.appendChild(progressStatus);
  28. this.fileProgressElement.appendChild(progressBar);
  29. this.fileProgressWrapper.appendChild(this.fileProgressElement);
  30. document.getElementById(targetID).appendChild(this.fileProgressWrapper);
  31. } else {
  32. this.fileProgressElement = this.fileProgressWrapper.firstChild;
  33. this.reset();
  34. }
  35. this.height = this.fileProgressWrapper.offsetHeight;
  36. this.setTimer(null);
  37. }
  38. FileProgress.prototype.setTimer = function (timer) {
  39. this.fileProgressElement["FP_TIMER"] = timer;
  40. };
  41. FileProgress.prototype.getTimer = function (timer) {
  42. return this.fileProgressElement["FP_TIMER"] || null;
  43. };
  44. FileProgress.prototype.reset = function () {
  45. this.fileProgressElement.className = "progressContainer";
  46. this.fileProgressElement.childNodes[2].innerHTML = " ";
  47. this.fileProgressElement.childNodes[2].className = "progressBarStatus";
  48. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  49. this.fileProgressElement.childNodes[3].style.width = "0%";
  50. this.appear();
  51. };
  52. FileProgress.prototype.setProgress = function (percentage) {
  53. this.fileProgressElement.className = "progressContainer green";
  54. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  55. this.fileProgressElement.childNodes[3].style.width = percentage + "%";
  56. this.appear();
  57. };
  58. FileProgress.prototype.setComplete = function () {
  59. this.fileProgressElement.parentNode.className = "progresshidden";
  60. var oSelf = this;
  61. };
  62. FileProgress.prototype.setError = function () {
  63. this.fileProgressElement.className = "progressContainer red";
  64. this.fileProgressElement.childNodes[3].className = "progressBarError";
  65. this.fileProgressElement.childNodes[3].style.width = "";
  66. var oSelf = this;
  67. this.setTimer(setTimeout(function () {
  68. oSelf.disappear();
  69. }, 5000));
  70. };
  71. FileProgress.prototype.setCancelled = function () {
  72. this.fileProgressElement.className = "progressContainer";
  73. this.fileProgressElement.childNodes[3].className = "progressBarError";
  74. this.fileProgressElement.childNodes[3].style.width = "";
  75. var oSelf = this;
  76. this.setTimer(setTimeout(function () {
  77. oSelf.disappear();
  78. }, 2000));
  79. };
  80. FileProgress.prototype.setStatus = function (status) {
  81. this.fileProgressElement.childNodes[2].innerHTML = status;
  82. };
  83. // Show/Hide the cancel button
  84. FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {
  85. this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
  86. if (swfUploadInstance) {
  87. var fileID = this.fileProgressID;
  88. this.fileProgressElement.childNodes[0].onclick = function () {
  89. swfUploadInstance.cancelUpload(fileID);
  90. return false;
  91. };
  92. }
  93. };
  94. FileProgress.prototype.appear = function () {
  95. if (this.getTimer() !== null) {
  96. clearTimeout(this.getTimer());
  97. this.setTimer(null);
  98. }
  99. if (this.fileProgressWrapper.filters) {
  100. try {
  101. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 100;
  102. } catch (e) {
  103. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  104. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  105. }
  106. } else {
  107. this.fileProgressWrapper.style.opacity = 1;
  108. }
  109. this.fileProgressWrapper.style.height = "";
  110. this.height = this.fileProgressWrapper.offsetHeight;
  111. this.opacity = 100;
  112. this.fileProgressWrapper.style.display = "";
  113. };
  114. // Fades out and clips away the FileProgress box.
  115. FileProgress.prototype.disappear = function () {
  116. var reduceOpacityBy = 15;
  117. var reduceHeightBy = 4;
  118. var rate = 30; // 15 fps
  119. if (this.opacity > 0) {
  120. this.opacity -= reduceOpacityBy;
  121. if (this.opacity < 0) {
  122. this.opacity = 0;
  123. }
  124. if (this.fileProgressWrapper.filters) {
  125. try {
  126. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
  127. } catch (e) {
  128. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  129. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
  130. }
  131. } else {
  132. this.fileProgressWrapper.style.opacity = this.opacity / 100;
  133. }
  134. }
  135. if (this.height > 0) {
  136. this.height -= reduceHeightBy;
  137. if (this.height < 0) {
  138. this.height = 0;
  139. }
  140. this.fileProgressWrapper.style.height = this.height + "px";
  141. }
  142. if (this.height > 0 || this.opacity > 0) {
  143. var oSelf = this;
  144. this.setTimer(setTimeout(function () {
  145. oSelf.disappear();
  146. }, rate));
  147. } else {
  148. this.fileProgressWrapper.style.display = "none";
  149. this.setTimer(null);
  150. }
  151. };