From 5e032b15c55785ee95a437c5392ec4beffd82c63 Mon Sep 17 00:00:00 2001
From: Michael <m@ash.to>
Date: Wed, 5 Oct 2022 17:22:30 +0200
Subject: [PATCH] load project_list without thumbnails, thumbnails only on
 select (and necessary projectdialog updates)

---
 index.html                |   8 +-
 stitchcode/gui.js         | 191 +++++++++++++++++++++++++++++---------
 stitchcode/store.js       |  13 ++-
 stitchcode/turtlecloud.js |  73 +++++++++++++++
 4 files changed, 228 insertions(+), 57 deletions(-)

diff --git a/index.html b/index.html
index 0c91c1c1..1fd87a65 100644
--- a/index.html
+++ b/index.html
@@ -45,10 +45,10 @@
     <script type="text/javascript" src="stitchcode/morphic.js?version=2021-12-14"></script>
     <script type="text/javascript" src="stitchcode/symbols.js?version=2021-12-14"></script>
     <script type="text/javascript" src="stitchcode/blocks.js?version=2021-12-14"></script>
-    <script type="text/javascript" src="stitchcode/threads.js?version=2021-12-14"></script>
-    <script type="text/javascript" src="stitchcode/objects.js?version=2022-08-25-"></script>
-    <script type="text/javascript" src="stitchcode/turtlecloud.js?version=2022-06-14"></script>
-    <script type="text/javascript" src="stitchcode/gui.js?version=2022-08-25"></script>
+    <script type="text/javascript" src="stitchcode/threads.js?version=2022-10-05"></script>
+    <script type="text/javascript" src="stitchcode/objects.js?version=2022-10-05"></script>
+    <script type="text/javascript" src="stitchcode/turtlecloud.js?version=2022-10-05"></script>
+    <script type="text/javascript" src="stitchcode/gui.js?version=2022-10-05"></script>
     <script type="text/javascript" src="stitchcode/store.js?version=2022-06-14"></script>
 
     <script type="text/javascript">
diff --git a/stitchcode/gui.js b/stitchcode/gui.js
index eecfac4c..09b492b8 100644
--- a/stitchcode/gui.js
+++ b/stitchcode/gui.js
@@ -1,4 +1,4 @@
-VERSION="2.7.8.2"
+VERSION="2.7.9"
 
 // get debug mode
 url = new URL(window.location.href);
@@ -265,7 +265,25 @@ PaletteHandleMorph.prototype.init = function (target) {
 
 IDE_Morph.prototype.origNewProject = IDE_Morph.prototype.newProject;
 IDE_Morph.prototype.newProject = function () {
-    this.origNewProject();
+    //this.origNewProject();
+
+    var project = new Project();
+
+    project.addDefaultScene();
+
+    this.source = this.cloud.username ? 'cloud' : null;
+    if (location.hash.substr(0, 6) !== '#lang:') {
+        location.hash = '';
+    }
+    this.openProject(project);
+
+    StageMorph.prototype.dimensions = new Point(480, 360);
+    StageMorph.prototype.hiddenPrimitives = {};
+    StageMorph.prototype.codeMappings = {};
+    StageMorph.prototype.codeHeaders = {};
+    StageMorph.prototype.enableCodeMapping = false;
+    StageMorph.prototype.enableInheritance = true;
+    StageMorph.prototype.enableSublistIDs = false;
 
     StageMorph.prototype.hideGrid = false;
     StageMorph.prototype.hideJumps = false;
@@ -280,7 +298,8 @@ IDE_Morph.prototype.newProject = function () {
 
     this.setProjectName('');
     this.projectNotes = '';
-}
+    this.createStageHandle();
+};
 
 
 IDE_Morph.prototype.openProject = function (project) {
@@ -317,7 +336,7 @@ IDE_Morph.prototype.exportProject = function (name) {
             project.origCreator  = this.origCreator;
             project.creator = this.creator;
             project.remixHistory = this.remixHistory;
-            
+
             str = this.serializer.serialize(
                 project
             );
@@ -1606,16 +1625,16 @@ IDE_Morph.prototype.setProjectName = function (string) {
             this.controlBar.updateLabel();
         }
     }
-    
+
     if (string.replace(/['"]/g, '') != this.projectName || SnapCloud.username != this.creator) {
       this.remixHistory = this.creator + ":" + this.projectName + ";"  + this.remixHistory
       this.origName =  this.projectName;
     }
     this.origName =  this.projectName;
     this.origCreator =  SnapCloud.username != this.creator ? this.creator : SnapCloud.username;
-    this.creator = SnapCloud.username ? SnapCloud.username : "anonymous";    
+    this.creator = SnapCloud.username ? SnapCloud.username : "anonymous";
     this.projectName = string.replace(/['"]/g, '');
-    
+
     return name;
 };
 
@@ -2882,6 +2901,102 @@ DialogBoxMorph.prototype.informWithLink = function (
   this.popUp(world);
 };
 
+ProjectDialogMorph.prototype.installCloudProjectList = function (pl) {
+    this.projectList = pl[0] ? pl : [];
+    this.projectList.sort((x, y) =>
+        x.projectname.toLowerCase() < y.projectname.toLowerCase() ? -1 : 1
+    );
+
+    this.listField.destroy();
+    this.listField = new ListMorph(
+        this.projectList,
+        this.projectList.length > 0 ?
+            (element) => {return element.projectname || element; }
+                : null,
+        [ // format: display shared project names bold
+            [
+                'bold',
+                proj => proj.ispublic
+            ],
+            [
+                'italic',
+                proj => proj.ispublished
+            ]
+        ],
+        () => this.ok()
+    );
+    this.fixListFieldItemColors();
+    this.listField.fixLayout = nop;
+    this.listField.edge = InputFieldMorph.prototype.edge;
+    this.listField.fontSize = InputFieldMorph.prototype.fontSize;
+    this.listField.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+    this.listField.contrast = InputFieldMorph.prototype.contrast;
+    this.listField.render = InputFieldMorph.prototype.render;
+    this.listField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+
+    this.listField.action = (item) => {
+        if (item === undefined) {return; }
+        if (this.nameField) {
+            this.nameField.setContents(item.projectname || '');
+        }
+        if (this.task === 'open' || this.task === 'add') {
+            this.notesText.text = item.notes || '';
+            this.notesText.rerender();
+            this.notesField.contents.adjustBounds();
+            this.preview.texture = '';
+            this.preview.rerender();
+            // we ask for the thumbnail when selecting a project
+            this.ide.cloud.getThumbnail(
+                null, // username is implicit
+                item.projectname,
+                thumbnail => {
+                    this.preview.texture = thumbnail;
+                    this.preview.cachedTexture = null;
+                    this.preview.rerender();
+                });
+            new SpeechBubbleMorph(new TextMorph(
+                localize('last changed') + '\n' + item.updated + item.ispublic + item.Public,
+                null,
+                null,
+                null,
+                null,
+                'center'
+            )).popUp(
+                this.world(),
+                this.preview.rightCenter().add(new Point(2, 0))
+            );
+        }
+        if (item.ispublic) {
+            this.shareButton.hide();
+            this.unshareButton.show();
+        } else {
+            this.unshareButton.hide();
+            this.shareButton.show();
+        }
+        this.buttons.fixLayout();
+        this.fixLayout();
+        this.publishButton.hide();
+        this.edit();
+
+    };
+    this.body.add(this.listField);
+    if (this.task === 'open' || this.task === 'add') {
+        this.recoverButton.hide();
+        this.tagsField.hide();
+        this.tagsLabelField.hide();
+        this.unshareButton.hide();
+        this.shareButton.hide();
+        this.unpublishButton.hide();
+    }
+    this.deleteButton.show();
+    this.buttons.fixLayout();
+    this.fixLayout();
+    if (this.task === 'open' || this.task === 'add') {
+        this.clearDetails();
+    }
+};
+
+/*
 
 
 ProjectDialogMorph.prototype.installCloudProjectList = function (pl) {
@@ -2964,51 +3079,34 @@ ProjectDialogMorph.prototype.installCloudProjectList = function (pl) {
     }
 };
 
-
+*/
 ProjectDialogMorph.prototype.fixLayoutOrig = ProjectDialogMorph.prototype.fixLayout;
-ProjectDialogMorph.prototype.buildContentsOrig = ProjectDialogMorph.prototype.buildContents;
 ProjectDialogMorph.prototype.initOrig = ProjectDialogMorph.prototype.init;
 ProjectDialogMorph.prototype.saveProjectOrig = ProjectDialogMorph.prototype.saveProject;
 
-ProjectDialogMorph.prototype.buildContents = function () {
-    this.buildContentsOrig();
-    this.tagsLabelField = new TextMorph("Tags (New cloud projects only):");
-    this.body.add(this.tagsLabelField);
-    this.notesLabelField = new TextMorph("Notes");
-    this.notesLabelField.edge = InputFieldMorph.prototype.edge;
-    this.body.add(this.notesLabelField);
-    this.tagsField = new InputFieldMorph("");
-    this.tagsField.edge = InputFieldMorph.prototype.edge;
-    this.tagsField.contrast = InputFieldMorph.prototype.contrast;
-    // this.tagsField.fixLayout = InputFieldMorph.prototype.fixLayout;
-    this.body.add(this.tagsField);
-	this.fixLayout();
-};
 
 ProjectDialogMorph.prototype.fixLayout = function () {
 	this.fixLayoutOrig();
-    var th = fontHeight(this.titleFontSize) + this.titlePadding * 2,
-        thin = this.padding / 2,
-        oldFlag = Morph.prototype.trackChanges;
+  var th = fontHeight(this.titleFontSize) + this.titlePadding * 2,
+      thin = this.padding / 2,
+      oldFlag = Morph.prototype.trackChanges;
 
-	if (this.body && this.tagsField) {
-		this.notesLabelField.setTop(this.preview.bottom() + thin);
-        this.notesLabelField.setLeft(this.preview.left() + 1);
-
-        this.notesField.setTop(this.notesLabelField.bottom());
-        this.notesField.setLeft(this.preview.left());
-        this.notesField.setHeight(this.body.bottom() - this.notesLabelField.bottom() - this.notesLabelField.height() - thin);
-
-		this.tagsLabelField.setTop(this.notesField.bottom() + thin);
-        this.tagsLabelField.setLeft(this.notesField.left()  + 1);
-
-		this.tagsField.setTop(this.notesField.bottom() + 2);
-        this.tagsField.setLeft(this.tagsLabelField.right());
-        this.tagsField.setWidth(this.notesField.width() -  this.tagsLabelField.width() - 1);
-
-
-    }
-    this.changed();
+  if (this.preview) {
+    this.preview.setHeight(310);
+  }
+  if (this.body && this.tagsField) {
+    this.notesLabelField.setTop(this.preview.bottom() + thin);
+    this.notesLabelField.setLeft(this.preview.left() + 1);
+    this.notesField.setTop(this.notesLabelField.bottom());
+    this.notesField.setLeft(this.preview.left());
+    this.notesField.setHeight(this.body.bottom() - this.notesLabelField.bottom() - this.notesLabelField.height() - thin);
+    this.tagsLabelField.setTop(this.notesField.bottom() + thin);
+    this.tagsLabelField.setLeft(this.notesField.left()  + 1);
+    this.tagsField.setTop(this.notesField.bottom() + 2);
+    this.tagsField.setLeft(this.tagsLabelField.right());
+    this.tagsField.setWidth(this.notesField.width() -  this.tagsLabelField.width() - 1);
+  }
+  this.changed();
 }
 
 
@@ -3023,6 +3121,7 @@ ProjectDialogMorph.prototype.saveProject = function () {
   this.saveProjectOrig();
 };
 
+
 StageMorph.prototype.backgroundColor = new Color(255,255,255);
 StageMorph.prototype.defaultPenColor = new Color(0,0,0,1);
 
@@ -3251,9 +3350,9 @@ IDE_Morph.prototype.switchToScene = function (
     this.selectSprite(this.scene.currentSprite, true);
     // this.corral.album.updateSelection();
     this.fixLayout();
-    
+
     scene.applyGlobalSettings();
-    
+
     this.toggleAppMode(appMode);
     this.controlBar.stopButton.refresh();
     this.world().keyboardFocus = this.stage;
diff --git a/stitchcode/store.js b/stitchcode/store.js
index 373db10b..9cd8546f 100644
--- a/stitchcode/store.js
+++ b/stitchcode/store.js
@@ -56,16 +56,16 @@ Project.prototype.toXML = function (serializer) {
     } catch (error) {
         thumbdata = null;
     }
-    
+
     return serializer.format(
         '<project name="@" app="@" version="@">' +
             '<notes>$</notes>' +
-            '<thumbnail>$</thumbnail>' +           
+            '<thumbnail>$</thumbnail>' +
             '<scenes select="@">%</scenes>\n' +
             '<creator>$</creator>\n' +
             '<origCreator>$</origCreator>\n' +
             '<origName>$</origName>\n' +
-            '<remixHistory>$</remixHistory>\n' +             
+            '<remixHistory>$</remixHistory>\n' +
             '</project>',
         this.name || localize('Untitled'),
         serializer.app,
@@ -98,8 +98,8 @@ SnapSerializer.prototype.loadProjectModel = function (xmlNode, ide, remixID) {
                 '\n\nand may be incompatible or fail to load here.'
         );
     }
-    
-    project_model = {project: xmlNode };   
+
+    project_model = {project: xmlNode };
     //project.notes = project_model.project.childNamed('notes') ? project_model.project.childNamed('notes').contents : ""
     project.name = project_model.project.attributes.name;
     project.origName = project_model.project.childNamed('origName') ? project_model.project.childNamed('origName').contents : ""
@@ -113,7 +113,7 @@ SnapSerializer.prototype.loadProjectModel = function (xmlNode, ide, remixID) {
     ide.origCreator = project.origCreator || '';
     ide.creator = project.creator || '';
     ide.remixHistory = project.remixHistory || '';
-    
+
     if (scenesModel) {
         if (scenesModel.attributes.select) {
             project.sceneIdx = +scenesModel.attributes.select;
@@ -441,4 +441,3 @@ SnapSerializer.prototype.loadScene = function (xmlNode, remixID) {
     this.objects = {};
     return scene.initialize();
 };
-
diff --git a/stitchcode/turtlecloud.js b/stitchcode/turtlecloud.js
index db78d1f3..5e4d09b3 100644
--- a/stitchcode/turtlecloud.js
+++ b/stitchcode/turtlecloud.js
@@ -76,6 +76,56 @@ BeetleCloud.prototype.get = function (path, callBack, errorCall, errorMsg) {
 
 };
 
+
+BeetleCloud.prototype.getImage = function (path, callBack, errorCall, errorMsg) {
+    var request = new XMLHttpRequest(),
+        myself = this;
+
+    try {
+        request.open(
+            'GET',
+            this.url + path,
+            true
+        );
+        request.setRequestHeader(
+            'Content-Type',
+            'application/json; charset=utf-8'
+        );
+
+        request.withCredentials = true;
+        request.onreadystatechange = function () {
+            if (request.readyState === 4) {
+                if (request.responseText) {
+                    if(request.status === 404) { 
+                      if (errorCall) 
+                        errorCall.call(
+                            null,
+                            myself.url,
+                            errorMsg
+                        );
+                      else
+                        console.log("error in checking credentials")
+                      return false;
+                    }
+                    callBack.call(null, request.responseText);
+                } else {
+                    if (typeof errorCall != 'undefined') {
+                      errorCall.call(
+                        null,
+                        myself.url,
+                        errorMsg
+                      );
+                    }
+                }
+            }
+        };
+        request.send();
+    } catch (err) {
+        errorCall.call(this, err.toString(), 'TurtleCloud');
+    }
+
+};
+
 BeetleCloud.prototype.post = function (path, body, callBack, errorCall, errorMsg) {
     var request = new XMLHttpRequest(),
         myself = this;
@@ -327,6 +377,16 @@ BeetleCloud.prototype.getProjectList = function (callBack, errorCall) {
             );
 };
 
+BeetleCloud.prototype.getThumbnail = function (username, projectName, callBack, errorCall) {
+    this.getImage('/users/' + this.username
+            + '/projects/' + encodeURIComponent(projectName)
+            + '/image', // path
+            callBack, // ok callback
+            () => {}, // error callback
+            'Could not fetch thumbnail'); // error message
+                
+};
+
 Cloud = BeetleCloud;
 
 var SnapCloud = new BeetleCloud(
@@ -562,6 +622,17 @@ ProjectDialogMorph.prototype.buildContents = function () {
             });
 
     this.originalBuildContents();
+    this.tagsLabelField = new TextMorph("Tags (New cloud projects only):");
+    this.body.add(this.tagsLabelField);
+    this.notesLabelField = new TextMorph("Notes");
+    this.notesLabelField.edge = InputFieldMorph.prototype.edge;
+    this.body.add(this.notesLabelField);
+    this.tagsField = new InputFieldMorph("");
+    this.tagsField.edge = InputFieldMorph.prototype.edge;
+    this.tagsField.contrast = InputFieldMorph.prototype.contrast;
+    // this.tagsField.fixLayout = InputFieldMorph.prototype.fixLayout;
+    this.body.add(this.tagsField);
+    this.fixLayout();
     /*
     this.preview.setExtent(
         new Point(320,240).add(this.preview.edge * 2)
@@ -659,6 +730,7 @@ ProjectDialogMorph.prototype.shareProject = function () {
                             proj.ProjectName,
                             function () {
                                 proj.Public = 'true';
+                                proj.ispublic = 'true';
                                 myself.unshareButton.show();
                                 myself.shareButton.hide();
                                 entry.label.isBold = true;
@@ -703,6 +775,7 @@ ProjectDialogMorph.prototype.unshareProject = function () {
                             proj.ProjectName,
                             function () {
                                 proj.Public = 'false';
+                                proj.ispublic = 'true';
                                 myself.shareButton.show();
                                 myself.unshareButton.hide();
                                 entry.label.isBold = false;