Added progress bar for GIF rendering

src/css/settings-export.css

@@ -0,0 +1,47 @@
+
+/* Gif/Png Export Setting panel*/
+/*******************************/
+.gif-upload-button,
+.gif-render-button {
+  /*float : right;*/
+  margin-top : 10px;
+  margin-right : 10px;
+}
+
+.gif-export-radio-group {
+  margin:10px 0;
+}
+
+.gif-export-preview,
+.png-export-preview {
+  margin-top:20px;
+  max-width:240px;
+  position:relative;
+}
+
+.png-export-preview {
+  margin:10px 0;
+  overflow: hidden;
+}
+
+.png-export-preview img {
+  float: left;
+}
+
+.png-upload-status {
+  margin : 10px 0;
+}
+
+.preview-upload-ongoing:before{
+  content: "Upload ongoing ...";
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  padding-top: 45%;
+  box-sizing:border-box;
+  -moz-box-sizing:border-box;
+  background: rgba(0,0,0,0.5);
+  color: white;
+}

src/css/settings.css

@@ -21,9 +21,9 @@
   margin-right: 0;
 }
 
-/*
+/********************************************************** *j* j** j*j j j j** *****************/
- * Settings icons
+/* Settings icons                                            I  I   I I I\I  \                  */
- */
+/********************************************************** *** *** *** * * '** *****************/
 
 .tool-icon.gallery-icon {
   background-image: url(../img/gallery.png);
@@ -104,6 +104,10 @@
   border-left : 3px solid gold;
 }
 
+/************************************************************************************************/
+/* Common settings classes                                                                      */
+/************************************************************************************************/
+
 .settings-section {
   margin: 10px 20px;
   font-size: 12px;
@@ -133,6 +137,10 @@
   margin-bottom: 10px;
 }
 
+/************************************************************************************************/
+/* Application settings                                                                         */
+/************************************************************************************************/
+
 .background-picker-wrapper {
   overflow: hidden;
   padding: 10px 5px 20px 5px;
@@ -166,11 +174,12 @@
   border: gold 1px solid;
 }
 
-/* Gif/Png Export Setting panel*/
+/************************************************************************************************/
-/*******************************/
+/* Gif/Png Export panel                                                                         */
+/************************************************************************************************/
+
 .gif-upload-button,
 .gif-render-button {
-  /*float : right;*/
   margin-top : 10px;
   margin-right : 10px;
 }
@@ -179,6 +188,17 @@
   margin:10px 0;
 }
 
+.gif-export-progress-status {
+  margin-left: 5px;
+}
+
+.gif-export-progress-bar {
+  margin-top:5px;
+  height:3px;
+  width: 0;
+  background:gold;
+}
+
 .gif-export-preview,
 .png-export-preview {
   margin-top:20px;
@@ -213,7 +233,10 @@
   color: white;
 }
 
-/* Import panel */
+/************************************************************************************************/
+/* Import panel                                                                                 */
+/************************************************************************************************/
+
 .import-section,
 .resize-section {
   margin: 15px 0;
@@ -291,6 +314,11 @@
   vertical-align: middle;
 }
 
+
+/************************************************************************************************/
+/* Browse local piskels panel                                                                   */
+/************************************************************************************************/
+
 .local-piskels-list {
   width: 100%;
 }

src/js/Events.js

@@ -17,13 +17,6 @@ var Events = {
 
   PALETTE_LIST_UPDATED : 'PALETTE_LIST_UPDATED',
 
-  /**
-   *  When this event is emitted, a request is sent to the localstorage
-   *  Service to save the current framesheet. The storage service
-   *  may not immediately store data (internal throttling of requests).
-   */
-  LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
-
   /**
    * Fired each time a user setting change.
    * The payload will be:

src/js/controller/DrawingController.js

@@ -139,8 +139,6 @@
         this.overlayFrame,
         event
       );
-
-      $.publish(Events.LOCALSTORAGE_REQUEST);
     }
   };
 
@@ -166,11 +164,6 @@
           this.overlayFrame,
           event
         );
-
-        // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
-        // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
-        // you don't need to draw anything when mousemoving and you request useless localStorage.
-        $.publish(Events.LOCALSTORAGE_REQUEST);
       } else {
 
         this.currentToolBehavior.moveUnactiveToolAt(

src/js/controller/PreviewFilmController.js

@@ -1,5 +1,13 @@
 (function () {
   var ns = $.namespace("pskl.controller");
+
+  var ACTION = {
+    SELECT : 'select',
+    CLONE : 'clone',
+    DELETE : 'delete',
+    NEW_FRAME : 'newframe'
+  };
+
   ns.PreviewFilmController = function (piskelController, container) {
 
     this.piskelController = piskelController;
@@ -15,12 +23,7 @@
     $.subscribe(Events.PISKEL_RESET, this.refreshZoom_.bind(this));
 
     $('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
-    this.updateScrollerOverflows();
+    this.container.get(0).addEventListener('click', this.onContainerClick_.bind(this));
-  };
-
-  ns.PreviewFilmController.prototype.addFrame = function () {
-    this.piskelController.addFrame();
-    this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
     this.updateScrollerOverflows();
   };
 
@@ -62,6 +65,29 @@
     wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
   };
 
+  ns.PreviewFilmController.prototype.onContainerClick_ = function (event) {
+    var target = pskl.utils.Dom.getParentWithData(event.target, 'tileAction');
+    if (!target) {
+      return;
+    }
+    var action = target.dataset.tileAction;
+    var index = target.dataset.tileNumber;
+
+    if (action === ACTION.CLONE) {
+      this.piskelController.setCurrentFrameIndex(index + 1);
+      this.updateScrollerOverflows();
+    } else if (action === ACTION.DELETE) {
+      this.piskelController.removeFrameAt(index);
+      this.updateScrollerOverflows();
+    } else if (action === ACTION.SELECT) {
+      this.piskelController.setCurrentFrameIndex(index);
+    } else if (action === ACTION.NEW_FRAME) {
+      this.piskelController.addFrame();
+      this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
+      this.updateScrollerOverflows();
+    }
+  };
+
   ns.PreviewFilmController.prototype.createPreviews_ = function () {
 
     this.container.html("");
@@ -77,11 +103,10 @@
     var newFrameButton = document.createElement("div");
     newFrameButton.id = "add-frame-action";
     newFrameButton.className = "add-frame-action";
+    newFrameButton.setAttribute('data-tile-action', ACTION.NEW_FRAME);
     newFrameButton.innerHTML = "<p class='label'>Add new frame</p>";
     this.container.append(newFrameButton);
 
-    $(newFrameButton).click(this.addFrame.bind(this));
-
     var needDragndropBehavior = (frameCount > 1);
     if(needDragndropBehavior) {
       this.initDragndropBehavior_();
@@ -112,9 +137,6 @@
 
     this.piskelController.moveFrame(originFrameId, targetInsertionId);
     this.piskelController.setCurrentFrameIndex(targetInsertionId);
-
-    // TODO(grosbouddha): move localstorage request to the model layer?
-    $.publish(Events.LOCALSTORAGE_REQUEST);
   };
 
 
@@ -128,6 +150,7 @@
     var previewTileRoot = document.createElement("li");
     var classname = "preview-tile";
     previewTileRoot.setAttribute("data-tile-number", tileNumber);
+    previewTileRoot.setAttribute('data-tile-action', ACTION.SELECT);
 
     if (this.piskelController.getCurrentFrame() == currentFrame) {
       classname += " selected";
@@ -141,15 +164,14 @@
     canvasBackground.className = "canvas-background";
     canvasContainer.appendChild(canvasBackground);
 
-    previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
-
     var cloneFrameButton = document.createElement("button");
     cloneFrameButton.setAttribute('rel', 'tooltip');
     cloneFrameButton.setAttribute('data-placement', 'right');
+    cloneFrameButton.setAttribute('data-tile-number', tileNumber);
+    cloneFrameButton.setAttribute('data-tile-action', ACTION.CLONE);
     cloneFrameButton.setAttribute('title', 'Duplicate this frame');
     cloneFrameButton.className = "tile-overlay duplicate-frame-action";
     previewTileRoot.appendChild(cloneFrameButton);
-    cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
 
     // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
     // is to make this update function (#createPreviewTile) less aggressive.
@@ -169,8 +191,9 @@
       deleteButton.setAttribute('rel', 'tooltip');
       deleteButton.setAttribute('data-placement', 'right');
       deleteButton.setAttribute('title', 'Delete this frame');
+      deleteButton.setAttribute('data-tile-number', tileNumber);
+      deleteButton.setAttribute('data-tile-action', ACTION.DELETE);
       deleteButton.className = "tile-overlay delete-frame-action";
-      deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
       previewTileRoot.appendChild(deleteButton);
 
       // Add 'dragndrop handle'.
@@ -183,30 +206,9 @@
     tileCount.innerHTML = tileNumber + 1;
     previewTileRoot.appendChild(tileCount);
 
-
     return previewTileRoot;
   };
 
-  ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
-    // has not class tile-action:
-    if(!evt.target.classList.contains('tile-overlay')) {
-      this.piskelController.setCurrentFrameIndex(index);
-    }
-  };
-
-  ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
-    this.piskelController.removeFrameAt(index);
-    $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
-    this.updateScrollerOverflows();
-  };
-
-  ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
-    this.piskelController.duplicateFrameAt(index);
-    $.publish(Events.LOCALSTORAGE_REQUEST);  // Should come from model
-    this.piskelController.setCurrentFrameIndex(index + 1);
-    this.updateScrollerOverflows();
-  };
-
   /**
    * Calculate the preview zoom depending on the piskel size
    */

src/js/controller/settings/GifExportController.js

@@ -28,14 +28,17 @@
   ns.GifExportController.prototype.init = function () {
     this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
 
-    this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0];
+    this.uploadStatusContainerEl = document.querySelector(".gif-upload-status");
 
-    this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
+    this.previewContainerEl = document.querySelector(".gif-export-preview");
-    this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
+    this.radioGroupEl = document.querySelector(".gif-export-radio-group");
 
     this.uploadForm = $("[name=gif-export-upload-form]");
     this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
 
+    this.exportProgressStatusEl = document.querySelector('.gif-export-progress-status');
+    this.exportProgressBarEl = document.querySelector('.gif-export-progress-bar');
+
     this.createRadioElements_();
   };
 
@@ -127,13 +130,29 @@
       });
     }
 
+    gif.on('progress', function(percentage) {
+      this.updateProgressStatus_((percentage*100).toFixed(2));
+    }.bind(this));
+
     gif.on('finished', function(blob) {
-      this.blobToBase64_(blob, cb);
+      this.hideProgressStatus_();
+      // this.blobToBase64_(blob, cb);
     }.bind(this));
 
     gif.render();
   };
 
+  ns.GifExportController.prototype.updateProgressStatus_ = function (percentage) {
+    this.exportProgressStatusEl.innerHTML = percentage + '%';
+    this.exportProgressBarEl.style.width = percentage + "%";
+
+  };
+
+  ns.GifExportController.prototype.hideProgressStatus_ = function () {
+    this.exportProgressStatusEl.innerHTML = '';
+    this.exportProgressBarEl.style.width = "0";
+  };
+
   // FIXME : HORRIBLE COPY/PASTA
 
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {

src/js/utils/Dom.js

@@ -24,6 +24,16 @@
         }
       }
       return false;
+    },
+
+    getParentWithData : function (node, data) {
+      while (node) {
+        if (node.dataset && typeof node.dataset[data] !== 'undefined') {
+          return node;
+        }
+        node = node.parentNode;
+      }
+      return null;
     }
   };
 })();

src/templates/settings/export-gif.html

@@ -11,6 +11,8 @@
       </script>
       <div class="gif-export-radio-group"></div>
       <input type="submit" class="button button-primary gif-upload-button" value="Upload" />
+      <span class="gif-export-progress-status"></span>
+      <div class="gif-export-progress-bar"></div>
     </form>
     <div class="gif-export-preview"></div>
     <div class="gif-upload-status"></div>