ultimix

- Main Page
- Data Structures
- Files
- Examples

- File List
- Globals

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