improved UX when running Snap! locally without a web server

bypass the cloud and instead import and export everything to local disk

HISTORY.md

@@ -2,6 +2,9 @@
 
 ## Development Version
 
+### 2018-10-04
+* GUI, Cloud: improved UX when running Snap! locally without a web server
+
 ### 2018-10-03
 * Threads: fixed "letter of" primitive for numeric input, thanks, Michael and Dan!
 

snap.html

@@ -9,7 +9,7 @@
 		<script type="text/javascript" src="src/blocks.js?version=2018-10-02"></script>
 		<script type="text/javascript" src="src/threads.js?version=2018-10-03"></script>
 		<script type="text/javascript" src="src/objects.js?version=2018-10-02"></script>
-		<script type="text/javascript" src="src/gui.js?version=2018-10-02"></script>
+		<script type="text/javascript" src="src/gui.js?version=2018-10-04"></script>
 		<script type="text/javascript" src="src/paint.js?version=2018-10-02"></script>
 		<script type="text/javascript" src="src/lists.js?version=2018-10-02"></script>
 		<script type="text/javascript" src="src/byob.js?version=2018-10-02"></script>
@@ -19,7 +19,7 @@
 		<script type="text/javascript" src="src/xml.js?version=2018-10-02"></script>
 		<script type="text/javascript" src="src/store.js?version=2018-10-02"></script>
 		<script type="text/javascript" src="src/locale.js?version=2018-10-02"></script>
-		<script type="text/javascript" src="src/cloud.js?version=2018-10-02"></script>
+		<script type="text/javascript" src="src/cloud.js?version=2018-10-04"></script>
 		<script type="text/javascript" src="src/sha512.js?version=2018-10-02"></script>
 		<script type="text/javascript" src="src/FileSaver.min.js?version=2018-10-02"></script>
 		<script type="text/javascript">

src/cloud.js

@@ -32,7 +32,7 @@
 /*global modules, SnapSerializer, nop, hex_sha512, DialogBoxMorph, Color,
 normalizeCanvas*/
 
-modules.cloud = '2018-October-02';
+modules.cloud = '2018-October-04';
 
 // Global stuff
 
@@ -241,6 +241,10 @@ Cloud.prototype.withCredentialsRequest = function (
 
 Cloud.prototype.initSession = function (onSuccess) {
     var myself = this;
+    if (location.protocol === 'file:') {
+        // disabled for now (jens)
+        return;
+    }
     this.request(
         'POST',
         '/init',

src/gui.js

@@ -75,7 +75,7 @@ isRetinaSupported, SliderMorph, Animation, BoxMorph, MediaRecorder*/
 
 // Global stuff ////////////////////////////////////////////////////////
 
-modules.gui = '2018-October-02';
+modules.gui = '2018-October-04';
 
 // Declarations
 
@@ -2512,7 +2512,8 @@ IDE_Morph.prototype.snapMenu = function () {
         'Download source',
         function () {
             window.open(
-                'http://snap.berkeley.edu/snapsource/snap.zip',
+                'https://github.com/jmoenig/Snap--Build-Your-Own-Blocks' +
+                    '/releases/latest',
                 'SnapSource'
             );
         }
@@ -2546,6 +2547,11 @@ IDE_Morph.prototype.cloudMenu = function () {
         pos = this.controlBar.cloudButton.bottomLeft(),
         shiftClicked = (world.currentKey === 16);
 
+    if (location.protocol === 'file:' && !shiftClicked) {
+        this.showMessage('cloud unavailable without a web server.');
+        return;
+    }
+
     menu = new MenuMorph(this);
     if (shiftClicked) {
         menu.addItem(
@@ -3121,36 +3127,7 @@ IDE_Morph.prototype.projectMenu = function () {
     menu.addLine();
     menu.addItem(
         'Import...',
-        function () {
+        'importLocalFile',
-            var inp = document.createElement('input');
-            if (myself.filePicker) {
-                document.body.removeChild(myself.filePicker);
-                myself.filePicker = null;
-            }
-            inp.type = 'file';
-            inp.style.color = "transparent";
-            inp.style.backgroundColor = "transparent";
-            inp.style.border = "none";
-            inp.style.outline = "none";
-            inp.style.position = "absolute";
-            inp.style.top = "0px";
-            inp.style.left = "0px";
-            inp.style.width = "0px";
-            inp.style.height = "0px";
-            inp.style.display = "none";
-            inp.addEventListener(
-                "change",
-                function () {
-                    document.body.removeChild(inp);
-                    myself.filePicker = null;
-                    world.hand.processDrop(inp.files);
-                },
-                false
-            );
-            document.body.appendChild(inp);
-            myself.filePicker = inp;
-            inp.click();
-        },
         'file menu import hint' // looks up the actual text in the translator
     );
 
@@ -3232,6 +3209,10 @@ IDE_Morph.prototype.projectMenu = function () {
     menu.addItem(
         'Import tools',
         function () {
+            if (location.protocol === 'file:') {
+                myself.importLocalFile();
+                return;
+            }
             myself.getURL(
                 myself.resourceURL('libraries', 'tools.xml'),
                 function (txt) {
@@ -3244,6 +3225,10 @@ IDE_Morph.prototype.projectMenu = function () {
     menu.addItem(
         'Libraries...',
         function() {
+            if (location.protocol === 'file:') {
+                myself.importLocalFile();
+                return;
+            }
             myself.getURL(
                 myself.resourceURL('libraries', 'LIBRARIES'),
                 function (txt) {
@@ -3258,6 +3243,10 @@ IDE_Morph.prototype.projectMenu = function () {
     menu.addItem(
         localize(graphicsName) + '...',
         function () {
+            if (location.protocol === 'file:') {
+                myself.importLocalFile();
+                return;
+            }
             myself.importMedia(graphicsName);
         },
         'Select a costume from the media library'
@@ -3265,6 +3254,10 @@ IDE_Morph.prototype.projectMenu = function () {
     menu.addItem(
         localize('Sounds') + '...',
         function () {
+            if (location.protocol === 'file:') {
+                myself.importLocalFile();
+                return;
+            }
             myself.importMedia('Sounds');
         },
         'Select a sound from the media library'
@@ -3338,6 +3331,40 @@ IDE_Morph.prototype.parseResourceFile = function (text) {
     return items;
 };
 
+IDE_Morph.prototype.importLocalFile = function () {
+    var inp = document.createElement('input'),
+        myself = this,
+        world = this.world();
+
+    if (this.filePicker) {
+        document.body.removeChild(this.filePicker);
+        this.filePicker = null;
+    }
+    inp.type = 'file';
+    inp.style.color = "transparent";
+    inp.style.backgroundColor = "transparent";
+    inp.style.border = "none";
+    inp.style.outline = "none";
+    inp.style.position = "absolute";
+    inp.style.top = "0px";
+    inp.style.left = "0px";
+    inp.style.width = "0px";
+    inp.style.height = "0px";
+    inp.style.display = "none";
+    inp.addEventListener(
+        "change",
+        function () {
+            document.body.removeChild(inp);
+            myself.filePicker = null;
+            world.hand.processDrop(inp.files);
+        },
+        false
+    );
+    document.body.appendChild(inp);
+    this.filePicker = inp;
+    inp.click();
+};
+
 IDE_Morph.prototype.importMedia = function (folderName) {
     // open a dialog box letting the user browse available "built-in"
     // costumes, backgrounds or sounds
@@ -3754,6 +3781,21 @@ IDE_Morph.prototype.newProject = function () {
 };
 
 IDE_Morph.prototype.save = function () {
+    var myself = this;
+
+    // temporary hack - only allow exporting projects to disk
+    // when running Snap! locally without a web server
+    if (location.protocol === 'file:') {
+        if (this.projectName) {
+            this.exportProject(myself.projectName, false);
+        } else {
+            this.prompt('Export Project As...', function (name) {
+                myself.exportProject(name, false);
+            }, null, 'exportProject');
+        }
+        return;
+    }
+
     if (this.source === 'examples') {
         this.source = 'local'; // cannot save to examples
     }
@@ -4935,10 +4977,30 @@ IDE_Morph.prototype.createNewProject = function () {
 };
 
 IDE_Morph.prototype.openProjectsBrowser = function () {
+    if (location.protocol === 'file:') {
+        // bypass the project import dialog and directly pop up
+        // the local file picker.
+        // this should not be necessary, we should be able
+        // to access the cloud even when running Snap! locally
+        // to be worked on.... (jens)
+        this.importLocalFile();
+        return;
+    }
     new ProjectDialogMorph(this, 'open').popUp();
 };
 
 IDE_Morph.prototype.saveProjectsBrowser = function () {
+    var myself = this;
+
+    // temporary hack - only allow exporting projects to disk
+    // when running Snap! locally without a web server
+    if (location.protocol === 'file:') {
+        this.prompt('Export Project As...', function (name) {
+            myself.exportProject(name, false);
+        }, null, 'exportProject');
+        return;
+    }
+
     if (this.source === 'examples') {
         this.source = 'local'; // cannot save to examples
     }