Added gif download modal (#442)

* Enhance gif view * Gif modal download button & Fix gif downloading * Fix gif generation aspect ratio * Fix fix gif downloading * Clarified Download(PNG) button
publiclab · Oct 26, 2018 · b30b539 · b30b539
1 parent e5e372d
commit b30b539
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 48 deletions.
diff --git a/examples/demo.css b/examples/demo.css
@@ -132,8 +132,8 @@ h1 {
 
 #gif_element {
   display: block;
-  padding: 50px;
   margin: 0 auto;
-
+  width: 100%;
+  height: auto;
 }
 
diff --git a/examples/demo.js b/examples/demo.js
@@ -27,18 +27,95 @@ window.onload = function() {
 
   $("#addStep select").on("change", ui.selectNewStepUi);
   $("#addStep #add-step-btn").on("click", ui.addStepUi);
-  $('#addStep #download-btn').click(function() {
-    $('img:last()').trigger( "click" );
-
+
+  $('#download-btn').click(function() {
+    $('.img-thumbnail:last()').trigger("click");
+
     return false;
-    });
+  });
+
   $('body').on('click', 'button.remove', ui.removeStepUi);
   $('#save-seq').click(() => {
     sequencer.saveSequence(window.prompt("Please give a name to your sequence..."), sequencer.toString());
     sequencer.loadModules();
     refreshOptions();
   });
 
+  var isWorkingOnGifGeneration = false;
+
+  $('.js-view-as-gif').on('click', function(event) {
+    // Prevent user from triggering generation multiple times
+    if (isWorkingOnGifGeneration) return;
+
+    isWorkingOnGifGeneration = true;
+
+    var button = event.target;
+    button.disabled = true;
+
+
+    try {
+      // Select all images from previous steps
+      var imgs = document.getElementsByClassName("img-thumbnail");
+
+      var imgSrcs = [];
+
+      for (var i = 0; i < imgs.length; i++) {
+        imgSrcs.push(imgs[i].src);
+      }
+
+      var options = {
+        'gifWidth': imgs[0].width,
+        'gifHeight': imgs[0].height,
+        'images': imgSrcs,
+        'frameDuration': 7,
+      }
+
+      gifshot.createGIF(options, function(obj) {
+        if(!obj.error) {
+          // Final gif encoded with base64 format
+          var image = obj.image;
+          var animatedImage = document.createElement('img');
+
+          animatedImage.id = "gif_element";
+          animatedImage.src = image;
+
+
+          var modal = $('#js-download-gif-modal');
+
+          $("#js-download-as-gif-button").one("click", function() {
+            // Trigger download
+            download(image, "index.gif", "image/gif");
+
+            // Close modal
+            modal.modal('hide');
+          })
+
+          var gifContainer = document.getElementById("js-download-modal-gif-container");
+
+          // Clear previous results
+          gifContainer.innerHTML = '';
+
+          // Insert image
+          gifContainer.appendChild(animatedImage);
+
+
+          // Open modal
+          modal.modal();
+
+          button.disabled = false;
+          isWorkingOnGifGeneration = false;
+        }
+      });
+    }
+    catch(e) {
+      console.error(e);
+      button.disabled = false;
+      isWorkingOnGifGeneration = false;
+
+    }
+  });
+
+
   // image selection and drag/drop handling from examples/lib/imageSelection.js
   sequencer.setInputStep({
     dropZoneSelector: "#dropzone",

diff --git a/examples/index.html b/examples/index.html
@@ -23,6 +23,9 @@
   <!-- for crop module: -->
   <script src="../node_modules/imgareaselect/jquery.imgareaselect.dev.js"></script>
   <script src="gifshot.js" type="text/javascript"></script>
+
+  <!-- Download.js for large files -->
+  <script src="../node_modules/downloadjs/download.min.js" type="text/javascript"/>
 </head>
 
 
@@ -88,9 +91,31 @@ <h1>Image Sequencer</h1>
       <div class="form-inline">
         <div class="panel-body">
           <div style="text-align:center;">
-            <button class="btn btn-success btn-lg" id="download-btn" name="download">Download</button>
-            <button class="btn btn-success btn-lg" onclick="create_gif()" id="gif">Download as Gif</button>
+            <button class="btn btn-success btn-lg" id="download-btn" name="download">Download PNG</button>
+            <button class="btn btn-success btn-lg js-view-as-gif" id="gif">View Gif</button>
+
+            <div class="modal fade" id="js-download-gif-modal" tabindex="-1" role="dialog">
+              <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                  <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Your gif is ready</h4>
+                  </div>
+                  <div class="modal-body">
+                    <div id="js-download-modal-gif-container">
+                      <!-- Gif should appear here -->
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+
+                    <button id="js-download-as-gif-button" class="btn btn-primary">Download</button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
+
         </div>
       </div>
     </section>
@@ -102,46 +127,6 @@ <h1>Image Sequencer</h1>
     $(function() {
       var sequencer;
     })
-
-    function create_gif(){
-
-      var imgs = document.getElementsByTagName("img");
-      var imgSrcs = [];
-
-      for (var i = 0; i < imgs.length; i++) {
-          imgSrcs.push(imgs[i].src);
-      }
-
-      gifshot.createGIF({
-        'gifWidth': 400,
-        'gifHeight': 350,
-        'images': imgSrcs,
-        'frameDuration': 7,
-      },
-      function(obj) {
-        if(!obj.error) {
-          var image = obj.image,
-          animatedImage = document.createElement('img');
-          animatedImage.src = image;
-          animatedImage.id = "gif_element";
-          var link = document.createElement('a');
-          var att1 = document.createAttribute("href");
-          att1.value = animatedImage.src;
-          var att2 = document.createAttribute("download");
-          att2.value = "index.gif";
-          link.setAttributeNode(att1);
-          link.setAttributeNode(att2);
-          link.appendChild(animatedImage);
-          document.body.appendChild(link);
-          link.click();
-        }
-      });
-
-   }
-
-
-
-
   </script>
 
 </body>

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "buffer": "~5.0.2",
     "commander": "^2.11.0",
     "data-uri-to-buffer": "^2.0.0",
+    "downloadjs": "^1.4.7",
     "fisheyegl": "^0.1.2",
     "font-awesome": "~4.5.0",
     "get-pixels": "~3.3.0",