built

dist/image-sequencer-ui.js

@@ -47,7 +47,7 @@ window.onload = function() {
     $(':root').animate({scrollTop: 0});
   }
 
-  $('#move-up').on('click',topFunction);
+  $('#move-up').on('click', topFunction);
 
 
   // UI for each step:
@@ -64,14 +64,14 @@ window.onload = function() {
   }
 
   var resetSequence = function(){
-    var r=confirm('Do you want to reset the sequence?');
+    var r = confirm('Do you want to reset the sequence?');
     if (r)
       window.location = '/';
   };
 
   $('#addStep select').on('change', ui.selectNewStepUi);
   $('#addStep #add-step-btn').on('click', ui.addStepUi);
-  $('#resetButton').on('click',resetSequence);
+  $('#resetButton').on('click', resetSequence);
 
   //Module button radio selection
   $('.radio-group .radio').on('click', function() {
@@ -85,11 +85,6 @@ window.onload = function() {
     $(this).removeClass('selected');
   });
 
-  $('#download-btn').click(function() {
-    $('.step-thumbnail:last()').trigger('click');
-    return false;
-  });
-
   function displayMessageOnSaveSequence(){
     $('.savesequencemsg').fadeIn();
     setTimeout(function() {
@@ -119,7 +114,7 @@ window.onload = function() {
 
     var button = event.target;
     button.disabled = true;
-    button.innerHTML='<i class="fa fa-circle-o-notch fa-spin"></i>';
+    button.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i>';
 
     try {
       // Select all images from previous steps
@@ -193,35 +188,35 @@ window.onload = function() {
     onLoad: function onFileReaderLoad(progress) {
       var reader = progress.target;
       var step = sequencer.steps[0];
-      var util= intermediateHtmlStepUi(sequencer);
+      var util = intermediateHtmlStepUi(sequencer);
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
-      if(typeof step.options !=='undefined')
+      if(typeof step.options !== 'undefined')
         step.options.step.imgElement.src = reader.result;
       else
         step.imgElement.src = reader.result;
-      insertPreview.updatePreviews(reader.result,'#addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
+      insertPreview.updatePreviews(reader.result, '#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
     },
     onTakePhoto: function (url) {
       var step = sequencer.steps[0];
       step.output.src = url;
       sequencer.run({ index: 0 });
-      if(typeof step.options !=='undefined')
+      if(typeof step.options !== 'undefined')
         step.options.step.imgElement.src = url;
       else
         step.imgElement.src = url;
-      insertPreview.updatePreviews(url,'#addStep');
-      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src,'.insertDiv');
+      insertPreview.updatePreviews(url, '#addStep');
+      insertPreview.updatePreviews(sequencer.steps[0].imgElement.src, '.insertDiv');
     }
   });
 
   setupCache();
 
   if (urlHash.getUrlHashParameter('src')) {
-    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'),'#addStep');
+    insertPreview.updatePreviews(urlHash.getUrlHashParameter('src'), '#addStep');
   } else {
-    insertPreview.updatePreviews('images/tulips.png','#addStep');
+    insertPreview.updatePreviews('images/tulips.png', '#addStep');
   }
 };
 
@@ -277,7 +272,7 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
 
   function onLoad() {
     importStepsFromUrlHash();
-    if ($('#selectStep').val()==='none')
+    if ($('#selectStep').val() === 'none')
       $(addStepSel + ' #add-step-btn').prop('disabled', true);
     handleSaveSequence();
   }
@@ -342,8 +337,8 @@ function DefaultHtmlSequencerUi(_sequencer, options) {
   }
 
   function handleSaveSequence(){
-    var stepCount=sequencer.steps.length;
-    if(stepCount<2)
+    var stepCount = sequencer.steps.length;
+    if(stepCount < 2)
       $(' #save-seq').prop('disabled', true);
     else
       $(' #save-seq').prop('disabled', false);
@@ -393,8 +388,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
           <div class="panel panel-default">\
             <div class="panel-heading">\
               <div class="trash-container pull-right"></div>\
-              <h3 class="panel-title">' +  
-                '<span class="toggle">' +step.name + ' <span class="caret toggleIcon rotated"></span>\
+              <h3 class="panel-title">' +
+                '<span class="toggle">' + step.name + ' <span class="caret toggleIcon rotated"></span>\
                  <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
               </h3>\
             </div>\
@@ -470,7 +465,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
               '"max="' +
               inputDesc.max +
               '"step="' +
-              (inputDesc.step ? inputDesc.step : 1)+ '">' + '<span>' + paramVal + '</span>';
+              (inputDesc.step ? inputDesc.step : 1) + '">' + '<span>' + paramVal + '</span>';
 
           }
           else html += '">';
@@ -498,9 +493,11 @@ function DefaultHtmlStepUi(_sequencer, options) {
       );
       $(step.ui.querySelector('div.panel-footer')).prepend(
         '<button class="pull-right btn btn-default btn-sm insert-step" >\
-          <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span>\
+        <span class="insert-text"><i class="fa fa-plus"></i> Insert Step</span><span class="no-insert-text" style="display:none">Close</span></button>\
+        <button class="pull-right btn btn-default btn-sm download-btn" style="margin-right:2px" >\
+        <i class="fa fa-download"></i>\
         </button>'
-      );  
+      );
     }
 
     if (step.name != 'load-image') {
@@ -509,14 +506,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
         .prepend(
           parser.parseFromString(tools, 'text/html').querySelector('div')
         );
-      $(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed','remove-notification');});  
-      $(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });    
+      $(step.ui.querySelectorAll('.remove')).on('click', function() {notify('Step Removed', 'remove-notification');});
+      $(step.ui.querySelectorAll('.insert-step')).on('click', function() { util.insertStep(step.ID); });
       // Insert the step's UI in the right place
       if (stepOptions.index == _sequencer.steps.length) {
         stepsEl.appendChild(step.ui);
-        $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true);
+        $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
         if($('#steps .step-container:nth-last-child(2)'))
-          $('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled',false);
+          $('#steps .step-container:nth-last-child(2) .insert-step').prop('disabled', false);
       } else {
         stepsEl.insertBefore(step.ui, $(stepsEl).children()[stepOptions.index]);
       }
@@ -530,6 +527,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
     });
     
     $(step.imgElement).on('mousemove', _.debounce(() => imageHover(step), 150));
+    $(step.imgElement).on('click', (e) => {e.preventDefault(); });
 
     function saveOptions(e) {
       e.preventDefault();
@@ -562,7 +560,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       return inputChanged;
     }
 
-    var 
+    var
       changedInputs = 0,
       optionsChanged = false;
     $(step.ui.querySelector('.input-form')).on('submit', saveOptions);
@@ -570,7 +568,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $(input)
         .data('initValue', $(input).val())
         .data('hasChangedBefore', false)
-        .on('input change' , function() {
+        .on('input change', function() {
           $(this)
             .focus()
             .data('hasChangedBefore',
@@ -614,11 +612,21 @@ function DefaultHtmlStepUi(_sequencer, options) {
       return output.split('/')[1].split(';')[0];
     }
 
-    for (let index = 0; index < step.linkElements.length; index++) {
+    $(step.ui.querySelectorAll('.download-btn')).on('click', () => {
 
-      step.linkElements[index].download = step.name + '.' + fileExtension(step.imgElement.src);
-      step.linkElements[index].target = '_blank';
-    }
+      for (let index = 0; index < step.linkElements.length; index++){
+        
+        var element = document.createElement('a');
+        element.setAttribute('href', step.linkElements[index].href);
+        element.setAttribute('download', step.name + '.' + fileExtension(step.imgElement.src));
+        element.style.display = 'none';
+        document.body.appendChild(element);
+        
+        element.click();
+
+        document.body.removeChild(element);
+      }
+    });
 
     // fill inputs with stored step options
     if (_sequencer.modulesInfo().hasOwnProperty(step.name)) {
@@ -648,24 +656,24 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var img = $(step.imgElement);
 
-    img.mousemove(function(e) { 
+    img.mousemove(function(e) {
       var canvas = document.createElement('canvas');
       canvas.width = img.width();
       canvas.height = img.height();
       var context = canvas.getContext('2d');
-      context.drawImage(this,0,0);
+      context.drawImage(this, 0, 0);
 
       var offset = $(this).offset();
       var xPos = e.pageX - offset.left;
       var yPos = e.pageY - offset.top;
       var myData = context.getImageData(xPos, yPos, 1, 1);
-      img[0].title = 'rgb: ' +myData.data[0]+','+ myData.data[1]+','+myData.data[2];//+ rgbdata;
-    }); 
+      img[0].title = 'rgb: ' + myData.data[0] + ',' + myData.data[1] + ',' + myData.data[2];//+ rgbdata;
+    });
   }
 
   function onRemove(step) {
     step.ui.remove();
-    $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled',true);
+    $('#steps .step-container:nth-last-child(1) .insert-step').prop('disabled', true);
     $('div[class*=imgareaselect-]').remove();
   }
 
@@ -673,8 +681,8 @@ function DefaultHtmlStepUi(_sequencer, options) {
     return step.imgElement;
   }
 
-  function notify(msg,id){
-    if ($('#'+id).length == 0) {
+  function notify(msg, id){
+    if ($('#' + id).length == 0) {
       var notification = document.createElement('span');
       notification.innerHTML = ' <i class="fa fa-info-circle" aria-hidden="true"></i> ' + msg ;
       notification.id = id;
@@ -683,7 +691,7 @@ function DefaultHtmlStepUi(_sequencer, options) {
       $('body').append(notification);
     }
   
-    $('#'+id).fadeIn(500).delay(200).fadeOut(500);
+    $('#' + id).fadeIn(500).delay(200).fadeOut(500);
   }
     
   
@@ -692,14 +700,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
     onSetup: onSetup,
     onComplete: onComplete,
     onRemove: onRemove,
-    onDraw: onDraw, 
+    onDraw: onDraw,
     notify: notify,
     imageHover: imageHover
   };
 }
 
 if(typeof window === 'undefined'){
-  module.exports={
+  module.exports = {
     DefaultHtmlStepUi: DefaultHtmlStepUi
   };
 }
@@ -737,7 +745,7 @@ function generatePreview(previewStepName, customValues, path, selector) {
 }
 
 function updatePreviews(src, selector) {
-  $(selector+' img').remove();
+  $(selector + ' img').remove();
 
   var previewSequencerSteps = {
     'resize': '125%',