Moved desktop FileUtils into their own class. Split PiskelFileUtils::loadFromFile() so the decoding portion can be called separately by desktop load function. "savePath" is stored in piskel instance, and propagated to new instances in HistoryService. "savePath" is also stored on load so it is available for resave.

src/js/controller/settings/ImportController.js

@@ -17,10 +17,15 @@
     this.fileInputButton.click(this.onFileInputClick_.bind(this));
 
     this.hiddenOpenPiskelInput = $('[name=open-piskel-input]');
-    this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
-
     this.openPiskelInputButton = $('.open-piskel-button');
-    this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
+
+    // different handlers, depending on the Environment
+    if (pskl.utils.Environment.detectNodeWebkit()) {
+      this.openPiskelInputButton.click(this.openPiskelDesktop_.bind(this));
+    } else {
+      this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
+      this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
+    }
 
     this.prevSessionContainer = $('.previous-session');
     this.previousSessionTemplate_ = pskl.utils.Template.get("previous-session-info-template");
@@ -45,6 +50,22 @@
     }
   };
 
+  ns.ImportController.prototype.openPiskelDesktop_ = function (evt) {
+    this.closeDrawer_();
+    pskl.utils.FileUtilsDesktop.chooseFileDialog(function(filename){
+      var chosenFilename = filename;
+      pskl.utils.FileUtilsDesktop.readFile(chosenFilename, function(content){
+        pskl.utils.PiskelFileUtils.decodePiskelFile(content, function (piskel, descriptor, fps) {
+          piskel.setDescriptor(descriptor);
+          // store save path so we can resave without opening the save dialog
+          piskel.savePath = chosenFilename;
+          pskl.app.piskelController.setPiskel(piskel);
+          pskl.app.animationController.setFPS(fps);
+        });
+      });
+    });
+  };
+
   ns.ImportController.prototype.onOpenPiskelClick_ = function (evt) {
     this.hiddenOpenPiskelInput.click();
   };

src/js/controller/settings/SaveController.js

@@ -167,14 +167,14 @@
     var serialized = pskl.app.piskelController.serialize();
     var savePath = pskl.app.piskelController.getSavePath();
     // if we already have a filename, just save the file (using nodejs 'fs' api)
-    if (savePath !== null) {
-      pskl.utils.FileUtils.desktopSaveToFile(serialized, savePath, function () {
+    if (savePath) {
+      pskl.utils.FileUtilsDesktop.saveToFile(serialized, savePath, function () {
         this.onSaveSuccess_();
         this.afterSaving_();
       }.bind(this));
     } else {
       // "save as" = open a save dialog, and store the returned save path
-      pskl.utils.FileUtils.desktopSaveAs(serialized, null, function (selectedSavePath) {
+      pskl.utils.FileUtilsDesktop.saveAs(serialized, null, function (selectedSavePath) {
         this.onSaveSuccess_();
         this.afterSaving_();
         pskl.app.piskelController.setSavePath(selectedSavePath);

src/js/service/HistoryService.js

@@ -127,6 +127,8 @@
   ns.HistoryService.prototype.onPiskelLoaded_ = function (index, snapshotIndex, piskel) {
     var originalSize = this.getPiskelSize_();
     piskel.setDescriptor(this.piskelController.piskel.getDescriptor());
+    // propagate save path to the new piskel instance
+    piskel.savePath = this.piskelController.piskel.savePath;
     this.piskelController.setPiskel(piskel);
 
     for (var i = snapshotIndex + 1 ; i <= index ; i++) {

src/js/utils/FileUtils.js

@@ -37,47 +37,6 @@
         downloadLink.removeEventListener('click', stopPropagation);
         document.body.removeChild(downloadLink);
       }
-    },
-
-    /**
-     *
-     * @param content
-     * @param defaultFileName
-     * @param callback
-     */
-    desktopSaveAs: function (content, defaultFileName, callback) {
-      // NodeWebkit has no js api for opening the save dialog.
-      // Instead, it adds two new attributes to the anchor tag: nwdirectory and nwsaveas
-      // (see: https://github.com/nwjs/nw.js/wiki/File-dialogs )
-      defaultFileName = defaultFileName || "";
-      var tagString = '<input type="file" nwsaveas="'+ defaultFileName +'" nwworkingdir=""/>';
-      var $chooser = $(tagString);
-      $chooser.change(function(e) {
-        var filename =  $(this).val();
-        pskl.utils.FileUtils.desktopSaveToFile(content, filename, function(){
-          callback(filename);
-        });
-      });
-      $chooser.trigger('click');
-    },
-
-    /**
-     * Save data directly to disk, without showing a save dialog
-     * Requires Node-Webkit environment for file system access
-     * @param content - data to be saved
-     * @param {string} filename - fill path to the file
-     * @callback callback
-     */
-    desktopSaveToFile: function(content, filename, callback) {
-      var fs = require('fs');
-      //var arrayBuffer = ns.FileUtils.toArrayBuffer(content);
-      fs.writeFile(filename, content, function(err){
-        if (err) {
-          //throw err;
-          console.log('destopSavetoFile() - error saving file', filename, 'Error:', err);
-        }
-        callback();
-      });
     }
 
   };

src/js/utils/FileUtilsDesktop.js

@@ -0,0 +1,71 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  var stopPropagation = function (e) {
+    e.stopPropagation();
+  };
+
+  ns.FileUtilsDesktop = {
+
+    chooseFileDialog: function (callback) {
+      var tagString = '<input type="file" nwworkingdir=""/>';
+      var $chooser = $(tagString);
+      $chooser.change(function(e) {
+        var filename = $(this).val();
+        callback(filename);
+      });
+      $chooser.trigger('click');
+    },
+
+    /**
+     *
+     * @param content
+     * @param defaultFileName
+     * @param callback
+     */
+    saveAs: function (content, defaultFileName, callback) {
+      // NodeWebkit has no js api for opening the save dialog.
+      // Instead, it adds two new attributes to the anchor tag: nwdirectory and nwsaveas
+      // (see: https://github.com/nwjs/nw.js/wiki/File-dialogs )
+      defaultFileName = defaultFileName || "";
+      var tagString = '<input type="file" nwsaveas="'+ defaultFileName +'" nwworkingdir=""/>';
+      var $chooser = $(tagString);
+      $chooser.change(function(e) {
+        var filename =  $(this).val();
+        pskl.utils.FileUtilsDesktop.saveToFile(content, filename, function(){
+          callback(filename);
+        });
+      });
+      $chooser.trigger('click');
+    },
+
+    /**
+     * Save data directly to disk, without showing a save dialog
+     * Requires Node-Webkit environment for file system access
+     * @param content - data to be saved
+     * @param {string} filename - fill path to the file
+     * @callback callback
+     */
+    saveToFile : function(content, filename, callback) {
+      var fs = require('fs');
+      fs.writeFile(filename, content, function(err){
+        if (err) {
+          //throw err;
+          console.log('FileUtilsDesktop::savetoFile() - error saving file:', filename, 'Error:', err);
+        }
+        callback();
+      });
+    },
+
+    readFile : function(filename, callback) {
+      var fs = require('fs');
+      // NOTE: currently loading everything as utf8, which may not be desirable in future
+      fs.readFile(filename, 'utf8', function(err, data){
+        if (err) {
+          console.log('FileUtilsDesktop::readFile() - error reading file:', filename, 'Error:', err);
+        }
+        callback(data);
+      });
+    }
+  };
+})();

src/js/utils/PiskelFileUtils.js

@@ -13,13 +13,18 @@
     loadFromFile : function (file, onSuccess, onError) {
       pskl.utils.FileUtils.readFile(file, function (content) {
         var rawPiskel = pskl.utils.Base64.toText(content);
-        var serializedPiskel = JSON.parse(rawPiskel);
-        var fps = serializedPiskel.piskel.fps;
-        var descriptor = new pskl.model.piskel.Descriptor(serializedPiskel.piskel.name, serializedPiskel.piskel.description, true);
-        pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
-          onSuccess(piskel, descriptor, fps);
-        });
+        ns.PiskelFileUtils.decodePiskelFile(rawPiskel, onSuccess, onError);
+      });
+    },
+
+    decodePiskelFile : function (rawPiskel, onSuccess, onError) {
+      var serializedPiskel = JSON.parse(rawPiskel);
+      var fps = serializedPiskel.piskel.fps;
+      var descriptor = new pskl.model.piskel.Descriptor(serializedPiskel.piskel.name, serializedPiskel.piskel.description, true);
+      pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
+        onSuccess(piskel, descriptor, fps);
       });
     }
+
   };
 })();

src/piskel-script-list.js

@@ -21,6 +21,7 @@
   "js/utils/Environment.js",
   "js/utils/Math.js",
   "js/utils/FileUtils.js",
+  "js/utils/FileUtilsDesktop.js",
   "js/utils/FrameTransform.js",
   "js/utils/FrameUtils.js",
   "js/utils/LayerUtils.js",