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. :)

1 files changed, 84 insertions, 45 deletions

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 || {});