Implement remote resource loading

mv.loader.use takes an array of URLs, which are fetched via d3.xhr.

This also restructures mv.loader to refactor out some shared functionality
between mv.loader.use and the file selector change events.
mv.loader could still use some cleanup.

http://css-tricks.com/examples/ButtonMaker/ makes a pretty neat css button.
Hopefully, it's visually attractive enough so people in a hurry know where
to go. :)

3 files changed, 121 insertions, 47 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 2272814..738449e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -257,3 +257,35 @@ a:hover {
   color: #005580;
   text-decoration: underline;
 }
+
+.button {
+  border-top: 1px solid #96d1f8;
+  background: #65a9d7;
+  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
+  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
+  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
+  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
+  background: -o-linear-gradient(top, #3e779d, #65a9d7);
+  padding: 6px 12px;
+  -webkit-border-radius: 15px;
+  -moz-border-radius: 15px;
+  border-radius: 15px;
+  -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
+  box-shadow: rgba(0,0,0,1) 0 1px 0;
+  text-shadow: rgba(0,0,0,.4) 0 1px 0;
+  color: white;
+  font-size: 13px;
+  font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
+  text-decoration: none;
+  vertical-align: middle;
+}
+.button:hover {
+  border-top-color: #28597a;
+  background: #28597a;
+  color: #ccc;
+}
+.button:active {
+  border-top-color: #1b435e;
+  background: #1b435e;
+}
diff --git a/public/index.html b/public/index.html
index 67e83a4..e3ad3c3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -75,8 +75,11 @@
       <p>Both raw server logs (.log) and scrubbed datasets (.scrubbed) will work fine. If using the latter, make sure it has .scrubbed in the file name!</p>
       <p>You can load any number of files at once.</p>
       <p>Please note that this is very js intensive. The tab may briefly lock up as it loads everything.</p>
-      <input type="file" id="input" name="records[]" multiple />
-      <output id="list"></output>
+      <div>
+        <input type="file" id="input" name="records[]" multiple />
+        <output id="list"></output>
+        or <a href="javascript:mv.loader.use(['/logs/map.scrubbed.latest.zip']);" class="button">Use the most recent dataset</a>
+      </div>
       <div id="filesbar" class="progressbar fader">
         <div class="percent">0%</div>
       </div>
diff --git a/public/js/mv/load.js b/public/js/mv/load.js
index 56edf76..765707f 100644
--- a/public/js/mv/load.js
+++ b/public/js/mv/load.js
@@ -2,9 +2,9 @@
 var mv = function(mv) {
   mv.loader = {
     /* Callbacks */
-    onbulkstart: onbulkstart,
-    onloadstart: onloadstart,
-    onprogress: onprogress,
+    onbulkstart: nullFunc,
+    onloadstart: nullFunc,
+    onprogress: nullFunc,
     onabort: onabort,
     onerror: onerror,
     /* File state accessors */
@@ -13,6 +13,8 @@ var mv = function(mv) {
     curfile: function() { return curfile; },
     /* Callback */
     setname: function(n) {},
+    /* Use an array of URLs for loading, via d3.xhr */
+    use: use,
     /* Initialise the loader module */
     init: init,
   }
@@ -20,10 +22,16 @@ var mv = function(mv) {
   var numfiles = 0;
   var filenames = [];
   var curfile = 0;
-  var files;
-  function onbulkstart(fevt) {}
-  function onloadstart(evt) {}
-  function onprogress(evt) {}
+  /* Function to handle the loading of the next file - should invoke loadBlobable */
+  var nextFile;
+  /* Function to be called after all loading */
+  var postLoadAll;
+  /* The reader used to handle files once the request is complete */
+  var reader;
+  /* Dummy function */
+  function nullFunc() {};
+  /* Basic error functions - you probably want to override these */
+  /* TODO: Make the defaults a little more sensible */
   function onabort(evt) {
     alert('File load aborted!');
   }
@@ -41,50 +49,81 @@ var mv = function(mv) {
       alert('An error occurred reading this file.');
     };
   }
+  function use(urllist) {
+    /* Load files using d3's xhr requests */
+    numfiles = urllist.length
+    filenames = urllist;
+    nextFile = function() {
+      mv.loader.setname(urllist[curfile] + "'; 'Downloading");
+      var req = d3.xhr(urllist[curfile])
+        .on('progress', function(d, i) { reader.onprogress(d3.event); })
+        .on('load', function(d) {
+          console.log(typeof(d), typeof(d) == "object" ? d : d.length);
+          loadBlobable(d.response, urllist[curfile]);
+        })
+        .responseType("blob")
+        .get()
+      ;
+    };
+    startLoading();
+  }
   function init(input, each, after) {
+    reader = new FileReader();
+    postLoadAll = after;
     input.on('change', function() {
-      files = d3.event.target.files;
+      /* Load files using the file selector */
+      var files = d3.event.target.files;
       numfiles = files.length;
       filenames = Array.prototype.map.call(files, function(d) { return d.name; });
-      curfile = 0;
-      var reader = new FileReader();
-      mv.loader.onbulkstart();
-      reader.onerror = function() { mv.loader.onerror.apply(null, arguments) };
-      reader.onprogress = function(evt) { if (evt.lengthComputable) { mv.loader.onprogress(evt.loaded, evt.total) } };
-      reader.onabort = function() { mv.loader.onabort.apply(null, arguments) };
-      reader.onloadstart = function() { mv.loader.onloadstart.apply(null, arguments) };
-      reader.onload = function(evt) {
-        each(reader.result, filenames[curfile], function() {
-          ++curfile;
-          if (curfile == numfiles) {
-            after();
-          } else {
-            nextFile();
-          }
-        });
-      };
-      function nextFile() {
-        var file = files[curfile];
-        mv.loader.onloadstart();
-        if (file.name.indexOf(".zip", name.length - 4) != -1) {
-          zip.createReader(new zip.BlobReader(file), function(zipReader) {
-            zipReader.getEntries(function(entries) {
-              entries.forEach(function(d, i) {
-                mv.loader.setname(file.name + "'; unzipping '" + d.filename + " (" + (i + 1) + "/" + entries.length + ")");
-                d.getData(new zip.BlobWriter(), function(blob) {
-                  mv.loader.setname(d.filename);
-                  reader.readAsBinaryString(blob);
-                }, mv.loader.onprogress);
-              });
-            }, mv.loader.onerror);
-          }, mv.loader.onerror);
-        } else {
-          mv.loader.setname(file);
-          reader.readAsBinaryString(file);
-        }
+      nextFile = function() {
+        loadBlobable(files[curfile], files[curfile].name);
       }
-      nextFile();
+      startLoading();
     }, false);
+    /* General callbacks */
+    reader.onerror = function() { mv.loader.onerror.apply(null, arguments) };
+    reader.onprogress = function(evt) { if (evt.lengthComputable) { mv.loader.onprogress(evt.loaded, evt.total) } };
+    reader.onabort = function() { mv.loader.onabort.apply(null, arguments) };
+    reader.onloadstart = function() { mv.loader.onloadstart.apply(null, arguments) };
+    /* Logic for finishing or moving on once a file has finished loading */
+    reader.onload = function(evt) {
+      each(reader.result, filenames[curfile], function() {
+        ++curfile;
+        if (curfile >= numfiles) {
+          /* We're done */
+          postLoadAll();
+        } else {
+          /* Go to the next file, as determined by the current nextFile function */
+          nextFile();
+        }
+      });
+    };
   };
+  function startLoading() {
+    curfile = 0;
+    mv.loader.onbulkstart();
+    nextFile();
+  }
+  function loadBlobable(blobable, name) {
+    mv.loader.onloadstart();
+    console.log(name);
+    if (name.indexOf(".zip", name.length - 4) != -1) {
+      zip.createReader(new zip.BlobReader(blobable), function(zipReader) {
+        zipReader.getEntries(function(entries) {
+          console.log(entries);
+          entries.forEach(function(d, i) {
+            mv.loader.setname(name + "'; 'Unzipping " + d.filename + " (" + (i + 1) + "/" + entries.length + ")");
+            d.getData(new zip.BlobWriter(), function(blob) {
+              mv.loader.setname(d.filename);
+              reader.readAsBinaryString(blob);
+            }, mv.loader.onprogress);
+          });
+        }, mv.loader.onerror);
+      }, mv.loader.onerror);
+    } else {
+      mv.loader.setname(name);
+      reader.readAsBinaryString(blobable);
+    }
+  }
   return mv;
 }(mv || {});