Merge branch 'master' into gh-pages

bgrins · May 29, 2012 · 494b567 · 494b567
2 parents d6e5a68 + ce1a9e0
commit 494b567
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 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
@@ -40,6 +40,8 @@
 	#dropzone { padding:20px; border: solid 3px #050; text-align: center;}
 	#dropzone.drag { border: solid 3px #0f0; }
 
+	#file-list + small { display:none; }
+	#file-list:not(:empty) + small { display:block; }
 	#file-list:empty:before { content: "Add a file using one of the methods to the left and it will show up here."; display:block;  }
 	#file-list { margin: 2px; }
 	#file-list li { margin:10px 0; list-style: none; }
@@ -113,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>
@@ -327,7 +332,7 @@ <h2>Resources</h2>
       </div>
 
       <div class="sidebar well" id="sidebar">
-          <h4>Demo - Loaded Files</h4>
+          <h4>Demo - Loaded Files </h4>
             <hr />
             <p>
             <form class='form'>
@@ -340,8 +345,8 @@ <h4>Demo - Loaded Files</h4>
             </form>
             </p>
             <hr />
-			<ul id='file-list'>
-			</ul>
+			<ul id='file-list'></ul>
+            <small><a href='#' id='clear-list'>clear all items</a></small>
       </div>
       <footer>
         <p></p>
@@ -366,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>" +
@@ -382,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();
@@ -415,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>"
 				);
 			}
 		}
@@ -431,6 +439,11 @@ <h4>Demo - Loaded Files</h4>
             FileReaderJS.sync = $("#sync").is(":checked");
             $("body").toggleClass("sync", !!FileReaderJS.sync);
         });
+        $("#clear-list").on("click", function() {
+        	$("#file-list").empty();
+        	return false;
+        });
+        $("body").toggleClass("disabled", !FileReaderJS.enabled);
     });
 	</script>
 </body>