start breaking out a ui feature to set an input step (#253)

* start

* refactoring

* working

* version bump

dist/image-sequencer.js

@@ -46341,6 +46341,7 @@ else {var isBrowser = false}
 
 ImageSequencer = function ImageSequencer(options) {
 
+  var sequencer = (this.name == "ImageSequencer")?this:this.sequencer;
   options = options || {};
   options.inBrowser = options.inBrowser || isBrowser;
   options.sequencerCounter = 0;
@@ -46558,13 +46559,15 @@ ImageSequencer = function ImageSequencer(options) {
     //other functions
     log: log,
     objTypeOf: objTypeOf,
-    copy: copy
+    copy: copy,
+
+    setInputStep: require('./ui/SetInputStep')(sequencer)
   }
 
 }
 module.exports = ImageSequencer;
 
-},{"./AddStep":132,"./ExportBin":133,"./FormatInput":134,"./InsertStep":136,"./Modules":137,"./ReplaceImage":138,"./Run":139,"./ui/LoadImage":172,"./ui/UserInterface":173,"fs":7}],136:[function(require,module,exports){
+},{"./AddStep":132,"./ExportBin":133,"./FormatInput":134,"./InsertStep":136,"./Modules":137,"./ReplaceImage":138,"./Run":139,"./ui/LoadImage":172,"./ui/SetInputStep":173,"./ui/UserInterface":174,"fs":7}],136:[function(require,module,exports){
 // insert one or more steps at a given index in the sequencer
 function InsertStep(ref, image, index, name, o) {
 
@@ -48625,6 +48628,57 @@ function LoadImage(ref, name, src, main_callback) {
 module.exports = LoadImage;
 
 },{"urify":127}],173:[function(require,module,exports){
+function setInputStepInit(_sequencer) {
+
+  return function setInputStep(options) {
+
+    var dropzone = $(options.dropZoneSelector);
+    var fileInput = $(options.fileInputSelector);
+
+    onLoad = options.onLoad;
+
+    var reader = new FileReader();
+
+    function handleFile(e) {
+
+      e.preventDefault();
+      e.stopPropagation(); // stops the browser from redirecting.
+
+      if (e.target && e.target.files) var file = e.target.files[0];
+      else var file = e.dataTransfer.files[0];
+      if(!file) return;
+
+      var reader = new FileReader();
+
+      reader.onload = onLoad;
+
+      reader.readAsDataURL(file);
+    }
+
+    fileInput.on('change', handleFile);
+
+    dropzone[0].addEventListener('drop', handleFile, false);
+
+    dropzone.on('dragover', function onDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+    }, false);
+
+    dropzone.on('dragenter', function onDragEnter(e) {
+      dropzone.addClass('hover');
+    });
+
+    dropzone.on('dragleave', function onDragLeave(e) {
+      dropzone.removeClass('hover');
+    });
+
+  }
+
+}
+module.exports = setInputStepInit;
+
+},{}],174:[function(require,module,exports){
 /*
  * User Interface Handling Module
  */

examples/demo.js

@@ -24,5 +24,15 @@ window.onload = function() {
   $('body').on('click', 'button.remove', ui.removeStepUi);
 
   // image selection and drag/drop handling from examples/lib/imageSelection.js
-  setupFileHandling(sequencer);
+  sequencer.setInputStep({
+    dropZoneSelector: "#dropzone",
+    fileInputSelector: "#fileInput",
+    onLoad: function onFileReaderLoad(progress) {
+      var reader = progress.target;
+      step = sequencer.images.image1.steps[0];
+      step.output.src = reader.result;
+      sequencer.run(0);
+      step.options.step.imgElement.src = reader.result;
+    }
+  });
 };

examples/index.html

@@ -16,7 +16,6 @@
   <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../dist/image-sequencer.js" charset="utf-8"></script>
   <script src="lib/urlHash.js" charset="utf-8"></script>
-  <script src="lib/imageSelection.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlStepUi.js" charset="utf-8"></script>
   <script src="lib/defaultHtmlSequencerUi.js" charset="utf-8"></script>
   <script src="demo.js" charset="utf-8"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "image-sequencer",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A modular JavaScript image manipulation library modeled on a storyboard.",
   "main": "src/ImageSequencer.js",
   "scripts": {

src/ImageSequencer.js

@@ -3,6 +3,7 @@ else {var isBrowser = false}
 
 ImageSequencer = function ImageSequencer(options) {
 
+  var sequencer = (this.name == "ImageSequencer")?this:this.sequencer;
   options = options || {};
   options.inBrowser = options.inBrowser || isBrowser;
   options.sequencerCounter = 0;
@@ -220,7 +221,9 @@ ImageSequencer = function ImageSequencer(options) {
     //other functions
     log: log,
     objTypeOf: objTypeOf,
-    copy: copy
+    copy: copy,
+
+    setInputStep: require('./ui/SetInputStep')(sequencer)
   }
 
 }

src/ui/SetInputStep.js

@@ -0,0 +1,49 @@
+function setInputStepInit(_sequencer) {
+
+  return function setInputStep(options) {
+
+    var dropzone = $(options.dropZoneSelector);
+    var fileInput = $(options.fileInputSelector);
+
+    onLoad = options.onLoad;
+
+    var reader = new FileReader();
+
+    function handleFile(e) {
+
+      e.preventDefault();
+      e.stopPropagation(); // stops the browser from redirecting.
+
+      if (e.target && e.target.files) var file = e.target.files[0];
+      else var file = e.dataTransfer.files[0];
+      if(!file) return;
+
+      var reader = new FileReader();
+
+      reader.onload = onLoad;
+
+      reader.readAsDataURL(file);
+    }
+
+    fileInput.on('change', handleFile);
+
+    dropzone[0].addEventListener('drop', handleFile, false);
+
+    dropzone.on('dragover', function onDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+    }, false);
+
+    dropzone.on('dragenter', function onDragEnter(e) {
+      dropzone.addClass('hover');
+    });
+
+    dropzone.on('dragleave', function onDragLeave(e) {
+      dropzone.removeClass('hover');
+    });
+
+  }
+
+}
+module.exports = setInputStepInit;