intermediary

js/app.js

@@ -94,7 +94,7 @@
     finishInitAppEngine_ : function () {
       if (pskl.framesheetData_ && pskl.framesheetData_.content) {
         var piskel = pskl.utils.Serializer.createPiskel(pskl.framesheetData_.content);
-        piskel.app.PiskelController.setPiskel(piskel);
+        pskl.app.piskelController.setPiskel(piskel);
         pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
       }
     },

js/controller/settings/ImportController.js

@@ -7,32 +7,94 @@
 
   ns.ImportController.prototype.init = function () {
     this.fileUploadInput = $("[name=file-upload-input]");
-
+    this.urlInput = $("[name=url-input]");
     this.importForm = $("[name=import-form]");
     this.importForm.submit(this.onImportFormSubmit_.bind(this));
   };
 
+  ns.ImportController.prototype.reset_ = function () {
+    this.importForm.get(0).reset();
+  };
+
   ns.ImportController.prototype.onImportFormSubmit_ = function (evt) {
     evt.originalEvent.preventDefault();
+    var importType = this.getSelectedRadioValue_();
+    if (importType === 'FILE') {
+      this.importFromFile_();
+    } else if (importType === 'URL') {
+      this.importFromUrl_();
+    }
+  };
+
+  ns.ImportController.prototype.getSelectedRadioValue_ = function () {
+    var radios = this.getRadios_();
+    var selectedRadios = radios.filter(function(radio) {
+      return !!radio.checked;
+    });
+
+    if (selectedRadios.length == 1) {
+      return selectedRadios[0].value;
+    } else {
+      throw "Unexpected error when retrieving selected radio";
+    }
+  };
+
+  ns.ImportController.prototype.importFromFile_ = function () {
     var files = this.fileUploadInput.get(0).files;
     if (files.length == 1) {
       var file = files[0];
       if (this.isImage_(file)) {
         this.readImageFile_(file);
       } else {
+        this.reset_();
         throw "File is not an image : " + file.type;
       }
     }
   };
 
-  ns.ImportController.prototype.readImageFile_ = function (imageFile) {
-    pskl.utils.FileUtils.readFile(imageFile, this.processImageData_.bind(this));
+  ns.ImportController.prototype.importFromUrl_ = function () {
+    var url = this.urlInput.get(0).value;
+    if (this.isUrl_(url)) {
+      this.processImageSource_(url);
+    } else {
+      this.reset_();
+      throw "Not a url : " + url;
+    }
   };
 
-  ns.ImportController.prototype.processImageData_ = function (imageData) {
+  /**
+   * TODO : implement it properly
+   * @param  {String}  url potential url to test
+   * @return {Boolean} true if url looks like a URL
+   */
+  ns.ImportController.prototype.isUrl_ = function (url) {
+    if (typeof url === 'string') {
+      return (/^http/).test(url);
+    } else {
+      return false;
+    }
+  };
+
+  ns.ImportController.prototype.getRadios_ = function () {
+    var radiosColl = this.importForm.get(0).querySelectorAll("[name=upload-source-type]"),
+    radios = Array.prototype.slice.call(radiosColl,0);
+    return radios;
+  };
+
+  ns.ImportController.prototype.readImageFile_ = function (imageFile) {
+    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
+  };
+
+  /**
+   * Create an image from the given source (url or data-url), and onload forward to onImageLoaded
+   * TODO : should be a generic utility method, should take a callback
+   * @param  {String} imageSource url or data-url, will be used as src for the image
+   */
+  ns.ImportController.prototype.processImageSource_ = function (imageSource) {
     var image = new Image();
     image.onload = this.onImageLoaded_.bind(this);
-    image.src = imageData;
+    image.crossOrigin = '';
+    image.src = imageSource;
   };
 
   ns.ImportController.prototype.onImageLoaded_ = function (evt) {
@@ -66,10 +128,12 @@
       "A new Piskel will be created from your picture, size : " + w + "x" + h;
 
     if (window.confirm(confirmationMessage)) {
-      console.log(framesheet);
-    } else {
-      console.log("ABORT ABORT");
+      var piskel = pskl.utils.Serializer.createPiskel([framesheet]);
+      pskl.app.piskelController.setPiskel(piskel);
+      pskl.app.animationController.setFPS(12);
     }
+
+    this.reset_();
   };
 
   ns.ImportController.prototype.rgbToHex_ = function (r, g, b) {

templates/settings.html

@@ -3,19 +3,29 @@
     data-setting="user"
     class="tool-icon gear-icon"
     title="Preferences"
-    rel="tooltip" data-placement="left"></div>
+    rel="tooltip" data-placement="left">
+  </div>
+
+  <div
+    data-setting="import"
+    class="tool-icon import-icon"
+    title="Import an existing picture"
+    rel="tooltip" data-placement="left">
+  </div>
 
   <a
     class="tool-icon gallery-icon"
     title="Visit gallery"
     href="http://juliandescottes.github.io/piskel-website/"
-    rel="tooltip" data-placement="left" target="_blank"></a>
+    rel="tooltip" data-placement="left" target="_blank">
+  </a>
 
   <div
     class="tool-icon save-icon"
     title="Save to gallery"
     onclick="pskl.app.storeSheet()"
-    rel="tooltip" data-placement="left" ></div>
+    rel="tooltip" data-placement="left" >
+  </div>
 
   <div
     data-setting="gif"
@@ -25,13 +35,6 @@
     <span class="label">GIF</span>
   </div>
 
-  <div
-    data-setting="import"
-    class="tool-icon import-icon"
-    title="Import an existing picture"
-    rel="tooltip" data-placement="left">
-  </div>
-
   <div
     class="tool-icon upload-cloud-icon"
     title="Upload as a spritesheet PNG"

templates/settings/import.html

@@ -5,15 +5,15 @@
   <div class="settings-item">
     <form action="" method="POST" name="import-form">
       <div>
-        <input type="radio" name="upload-source-type" checked="checked  " value="1"/>
+        <input type="radio" name="upload-source-type" checked="checked  " value="FILE"/>
         <label>From your computer :
           <input type="file" name="file-upload-input" value="file" />
         </label>
       </div>
       <div>
-        <input type="radio" name="upload-source-type" value="2"/>
+        <input type="radio" name="upload-source-type" value="URL"/>
         <label>From the web :
-          <input type="text" placeholder="url" value="url" />
+          <input type="text" name="url-input" placeholder="url"/>
         </label>
       </div>
       <input type="submit" class="export-gif-upload-button" value="Import" />