WIP: always show share button

web/blocks.html

@@ -130,7 +130,7 @@
             ><i class="mdi mdi-18px mdi-folder-outline"></i>&nbsp; Share
             Folder</a
           >
-          <a id="shareButton" class="cw-button yellow" style="display: none"
+          <a id="shareButton" class="cw-button yellow"
             ><i class="mdi mdi-18px mdi-share"></i>&nbsp; Share</a
           >
           <a id="btnStop" class="cw-button red"

web/css/codeworld.css

@@ -259,6 +259,10 @@ body {
 }
 
 .cw-button {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: left;
   border-radius: 4px;
   cursor: pointer;
   text-align: left;
@@ -268,13 +272,18 @@ body {
   margin: 3px 3px 0px 3px;
   padding: 6px 6px 6px 6px;
   text-decoration: none;
-  display: inline-block;
   font-weight: bold;
   color: var(--cw-button-color);
   white-space: nowrap;
   overflow: hidden;
 }
 
+.cw-button.cw-button--disabled {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.3) !important;
+  pointer-events: none;
+}
+
 #toolbar .cw-button {
   margin-bottom: 3px;
   margin-top: 0px;

web/env.html

@@ -142,7 +142,7 @@
           <a id="stopRecButton" style="display: none" class="cw-button yellow"
             ><i class="mdi mdi-18px mdi-stop"></i>&nbsp; Stop Recording</a
           >
-          <a id="shareButton" class="cw-button yellow" style="display: none"
+          <a id="shareButton" class="cw-button yellow cw-button--disabled"
             ><i class="mdi mdi-18px mdi-share"></i>&nbsp; Share</a
           >
           <a

web/js/codeworld.js

@@ -547,6 +547,14 @@ function initCodeworld() {
     }
     window.reparseTimeoutId = setTimeout(parseSymbolsFromCurrentCode, 1500);
 
+    const shareButton = document.getElementById('shareButton');
+
+    if (doc.getValue()) {
+      shareButton.classList.remove('cw-button--disabled');
+    } else {
+      shareButton.classList.add('cw-button--disabled');
+    }
+
     updateDocumentTitle(isEditorClean);
     updateProjectChangeMark(isEditorClean);
 
@@ -1337,7 +1345,3 @@ function downloadProject() {
     document.body.removeChild(elem);
   }
 }
-
-// TEMP: required by setCode in codeworld_shared.js
-window.compile = compile;
-window.stopRun = stopRun;

web/js/codeworld_shared.js

@@ -17,6 +17,7 @@
 import * as Alert from './utils/alert.js';
 import * as Auth from './utils/auth.js';
 import * as DirTree from './utils/directoryTree.js';
+import { partialRight } from './utils/functional.js';
 import * as Html from './utils/html.js';
 import { sendHttp } from './utils/network.js';
 
@@ -1250,75 +1251,118 @@ function loadProject(name, path, buildMode, successFunc) {
 }
 
 function share() {
+  const { hash } = window.location;
+  const { deployHash } = window;
+
+  const data = new FormData();
+  data.append('source', window.codeworldEditor.getValue());
+  data.append('mode', window.buildMode);
+
+  const messages = {
+    includeCode: 'Copy this link to share your program and code with others!',
+    noCode: 'Copy this link to share your program (but not code) with others!',
+    errorsDetected:
+      '<i>Please keep in mind that you are about to share code that contains errors. You can see what those errors are by actually running the program.</i><br><br>',
+  };
+
+  function constructMessage(message, withErrors) {
+    return `${withErrors ? messages.errorsDetected : ''}${message}`;
+  }
+
   let offerSource = true;
 
-  function go() {
+  function showDialog(hash, deployHash) {
+    const { origin } = window.location;
+
     let url;
-    let msg;
+    let message;
     let showConfirm;
     let confirmText;
+    let withErrors = false;
 
-    if (!window.deployHash) {
-      url = window.location.href;
-      msg = 'Copy this link to share your program and code with others!';
-      showConfirm = false;
-    } else if (offerSource) {
-      url = window.location.href;
-      msg = 'Copy this link to share your program and code with others!';
-      showConfirm = true;
-      confirmText = 'Share Without Code';
-    } else {
-      const a = document.createElement('a');
-      a.href = `run.html?mode=${window.buildMode}&dhash=${window.deployHash}`;
-
-      url = a.href;
-      msg = 'Copy this link to share your program (but not code) with others!';
-      showConfirm = true;
-      confirmText = 'Share With Code';
-    }
+    sendHttp('POST', 'errorCheck', data, ({ status }) => {
+      if (status === 400) {
+        withErrors = true;
+      }
 
-    sweetAlert({
-      title: Alert.title('Share', 'mdi-share'),
-      html: msg,
-      input: 'text',
-      inputValue: url,
-      showConfirmButton: showConfirm,
-      confirmButtonText: confirmText,
-      closeOnConfirm: false,
-      showCancelButton: true,
-      cancelButtonText: 'Done',
-      animation: 'slide-from-bottom',
-    }).then((result) => {
-      if (result && result.value) {
-        offerSource = !offerSource;
-        go();
+      const constructErrorAwareMessage = partialRight(constructMessage, [
+        withErrors,
+      ]);
+
+      if (!deployHash) {
+        url = `${origin}/#${hash}`;
+        message = constructErrorAwareMessage(messages.includeCode);
+        showConfirm = false;
+      } else if (offerSource) {
+        url = `${origin}/#${hash}`;
+        message = constructErrorAwareMessage(messages.includeCode);
+        showConfirm = true;
+        confirmText = 'Share Without Code';
+      } else {
+        url = `${origin}/run.html?mode=${window.buildMode}&dhash=${deployHash}`;
+        message = constructErrorAwareMessage(messages.noCode);
+        showConfirm = true;
+        confirmText = 'Share With Code';
       }
-    });
-  }
 
-  if (window.runningGeneration) {
-    if (!window.codeworldEditor.getDoc().isClean(window.runningGeneration)) {
       sweetAlert({
-        type: 'warning',
-        text:
-          'You have changed your code since running the program. ' +
-          ' Rebuild so that you can share your latest code?',
-        confirmButtonText: 'Yes, Rebuild',
-        cancelButtonText: 'No, Share Old Program',
-        showConfirmButton: true,
+        title: Alert.title('Share', 'mdi-share'),
+        html: message,
+        input: 'text',
+        inputValue: url,
+        showConfirmButton: showConfirm,
+        confirmButtonText: confirmText,
+        closeOnConfirm: false,
         showCancelButton: true,
+        cancelButtonText: 'Done',
+        animation: 'slide-from-bottom',
       }).then((result) => {
         if (result && result.value) {
-          compile();
-        } else {
-          go();
+          offerSource = !offerSource;
+          showDialog(hash, deployHash);
         }
       });
-      return;
-    }
+    });
   }
 
-  go();
+  function storeCode(callback) {
+    sendHttp('POST', 'compile', data, (request) => {
+      let hash;
+      let deployHash;
+
+      if (request.status < 500) {
+        if (request.responseText.length === 23) {
+          hash = request.responseText;
+          deployHash = null;
+        } else {
+          try {
+            const obj = JSON.parse(request.responseText);
+            hash = obj.hash;
+            deployHash = obj.dhash;
+          } catch (e) {
+            hash = '';
+          }
+        }
+      }
+
+      if (!hash) {
+        sweetAlert({
+          title: Alert.title('Could not share'),
+          text: 'Sharing is currently unavailable. Please try again later.',
+          type: 'error',
+        });
+        return;
+      }
+
+      callback(hash, deployHash);
+    });
+  }
+
+  if (hash && deployHash) {
+    showDialog(hash, deployHash);
+  } else {
+    storeCode(showDialog);
+  }
 }
 
 function shareFolder_(mode) {
@@ -1966,10 +2010,8 @@ function run(hash, dhash, msg, error, generation) {
 
   if (hash) {
     window.location.hash = `#${hash}`;
-    document.getElementById('shareButton').style.display = '';
   } else {
     window.location.hash = '';
-    document.getElementById('shareButton').style.display = 'none';
   }
 
   if (dhash) {

web/js/funblocks.js

@@ -289,14 +289,10 @@ function run(xmlHash, codeHash, msg, error, dhash) {
   if (hash) {
     window.location.hash = `#${xmlHash}`;
 
-    document.getElementById('shareButton').style.display = '';
-
     $shareFolderButton.hide();
   } else {
     window.location.hash = '';
 
-    document.getElementById('shareButton').style.display = 'none';
-
     $shareFolderButton.show();
   }
 

web/js/utils/functional.js

@@ -0,0 +1,4 @@
+const partialRight = (fn, presetArgs) => (...laterArgs) =>
+  fn(...laterArgs, ...presetArgs);
+
+export { partialRight };