keep tabs on started and ended on a per file basis for better perform…

…ance tracking
bgrins · May 29, 2012 · ce1a9e0 · ce1a9e0
1 parent 31a1009
commit ce1a9e0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/filereader.js b/filereader.js
@@ -306,6 +306,8 @@
                     file.extra = e.data.extra;
                 }
 
+                file.extra.ended = new Date();
+
                 // Call error or load event depending on success of the read from the worker.
                 opts.on[result === "error" ? "error" : "load"]({ target: { result: result } }, file);
                 groupFileDone();
@@ -315,6 +317,8 @@
 
         Array.prototype.forEach.call(files, function(file) {
 
+            file.extra.started = new Date();
+
             if (opts.accept && !file.type.match(new RegExp(opts.accept))) {
                 opts.on.skip(file);
                 groupFileDone();
@@ -342,9 +346,12 @@
 
                 fileReaderEvents.forEach(function(eventName) {
                     reader['on' + eventName] = function(e) {
+                        if (eventName == 'load' || eventName == 'error') {
+                            file.extra.ended = new Date();
+                        }
                         opts.on[eventName](e, file);
                         if (eventName == 'loadend') {
-                            groupFileDone();
+                            groupFileDone(file);
                         }
                     };
                 });

diff --git a/index.html b/index.html
@@ -115,6 +115,9 @@
         background: #dec857;
     }
  	.done .filename { color: #357048; }
+ 	.done .not-done { display:none; }
+ 	.on-done { display:none; }
+ 	.done .on-done { display: inline-block; }
 	</style>
 
 </head>
@@ -368,7 +371,7 @@ <h4>Demo - Loaded Files </h4>
 			html.push(
 				"<li id='" + id + "' data-fileid='" + file.extra.fileID + "' data-groupid='"+ groupID +"'>" +
 					"<span class='filename'>" + file.name + "</span> " +
-                    "<br />" +
+					"<div><span class='not-done'><em>Loading...</em></span><span class='on-done'><span class='time-to-load'></span> ms</span></div>" +
 					"<span class='details'><a href='#' class='btn'>details</a></span> " +
                     "<div class='modal hide'>" + file.name + "<br />" + file.type + "<br /></div>" +
 					"<pre>" + JSON.stringify(file, null, '\t') + "</pre>" +
@@ -384,8 +387,11 @@ <h4>Demo - Loaded Files </h4>
 	var opts = {
 		on: {
 			load: function(e, file) {
-				var fileDiv = $("#group_" + file.extra.groupID + "_file_" + file.extra.fileID).addClass("done");
+				var fileDiv = $("#group_" + file.extra.groupID + "_file_" + file.extra.fileID)
+				fileDiv.addClass("done");
 
+				var ms = file.extra.ended - file.extra.started;
+				fileDiv.find(".time-to-load").text(ms);
                 if (file.type.match(/image/)) {
                     // Create a thumbnail and add it to the output if it is an image
                     var img = new Image();
@@ -417,7 +423,7 @@ <h4>Demo - Loaded Files </h4>
 			},
 			groupend: function(group) {
 				$("#group_" + group.groupID).append(
-					"(Time to load: " + (group.ended - group.started) + "ms)"
+					"<div>(Time to load: " + (group.ended - group.started) + "ms)</div>"
 				);
 			}
 		}
@@ -437,6 +443,7 @@ <h4>Demo - Loaded Files </h4>
         	$("#file-list").empty();
         	return false;
         });
+        $("body").toggleClass("disabled", !FileReaderJS.enabled);
     });
 	</script>
 </body>