deploy: 48bf2ed

fastn-stack · Jul 7, 2023 · f44d8f8 · f44d8f8
1 parent 059c66e
commit f44d8f8
Show file tree

Hide file tree

Showing 8 changed files with 916 additions and 799 deletions.
diff --git a/-/fastn-stack.github.io/fastn-js/download.js b/-/fastn-stack.github.io/fastn-js/download.js
@@ -1,8 +1,41 @@
+// Default download format is kept as .jpeg
+// To download as other formats, use other functions mentioned below
 function download_as_image(element_id, filename) {
     // Get the HTML element you want to convert to an image
     var element = document.getElementById(element_id);
 
     // Use htmlToImage library to convert the element to an image
+    htmlToImage.toJpeg(element)
+      .then(function (dataUrl) {
+        // `dataUrl` contains the image data in base64 format
+        var link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch(function (error) {
+        console.error('Error downloading image:', error);
+      });
+}
+
+function download_as_jpeg(element_id, filename) {
+    var element = document.getElementById(element_id);
+
+    htmlToImage.toJpeg(element)
+      .then(function (dataUrl) {
+        var link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch(function (error) {
+        console.error('Error downloading image:', error);
+      });
+}
+
+function download_as_png(element_id, filename) {
+    var element = document.getElementById(element_id);
+
     htmlToImage.toPng(element)
       .then(function (dataUrl) {
         // `dataUrl` contains the image data in base64 format
@@ -15,3 +48,18 @@ function download_as_image(element_id, filename) {
         console.error('Error downloading image:', error);
       });
 }
+
+function download_as_svg(element_id, filename) {
+    var element = document.getElementById(element_id);
+
+    htmlToImage.toSvg(element)
+      .then(function (dataUrl) {
+        var link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch(function (error) {
+        console.error('Error downloading image:', error);
+      });
+}
diff --git a/cs/index.html b/cs/index.html
@@ -1189,13 +1189,13 @@
 
 window.ftd.call_mutable_value_changes("fastn-stack.github.io/fastn-js/cs/#code:caption:0,1", "main");
 window.ftd.call_immutable_value_changes("fastn-stack.github.io/fastn-js/cs/#code:caption:0,1", "main");
-window.ftd.utils.node_change_call("main","0,1,2:main__border-top-left-radius", data);
 window.ftd.utils.node_change_call("main","0,1,2:main__border-top-right-radius", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__display", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__border-bottom-right-radius", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__border-bottom-left-radius", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__border-top-right-radius", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__border-top-left-radius", data);
 window.ftd.utils.node_change_call("main","0,1,0,0:main__text", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__border-bottom-left-radius", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__border-bottom-right-radius", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__display", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__border-top-left-radius", data);
 };
 
@@ -1213,8 +1213,8 @@
 window.ftd.call_mutable_value_changes("fastn-stack.github.io/fastn-js/cs/#code:copy-text:0,1", "main");
 window.ftd.call_immutable_value_changes("fastn-stack.github.io/fastn-js/cs/#code:copy-text:0,1", "main");
 window.ftd.utils.node_change_call("main","0,1,0,1,0:main__display", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__text", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,1:main__display", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__text", data);
 };
 
 window.set_value_main["fastn-stack.github.io/fastn-js/cs/#formatted-string"] = function (data, new_value, remaining) {
@@ -1239,113 +1239,113 @@
 
 window.ftd.call_mutable_value_changes("ftd#dark-mode", "main");
 window.ftd.call_immutable_value_changes("ftd#dark-mode", "main");
-window.ftd.utils.node_change_call("main","0,1,2:main__color", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__color", data);
-window.ftd.utils.node_change_call("main","0,1,0:main__background-color", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__background-repeat", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__color", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__color", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__border-color", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__background-position", data);
+window.ftd.utils.node_change_call("main","0,0,1:main__color", data);
+window.ftd.utils.node_change_call("main","0,1,0:main__background-image", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__background-repeat", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__display", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__display", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__color", data);
+window.ftd.utils.node_change_call("main","0,1,0:main__background-size", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__background-color", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,1:main__color", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__display", data);
-window.ftd.utils.node_change_call("main","0,0,1:main__color", data);
-window.ftd.utils.node_change_call("main","0,1,0:main__background-repeat", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__background-position", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__border-color", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__background-size", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__color", data);
 window.ftd.utils.node_change_call("main","0,1,0:main__background-position", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__display", data);
+window.ftd.utils.node_change_call("main","0,1,0:main__background-repeat", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__background-image", data);
-window.ftd.utils.node_change_call("main","0,1,0:main__background-image", data);
-window.ftd.utils.node_change_call("main","0,1,0:main__background-size", data);
+window.ftd.utils.node_change_call("main","0,1,0:main__background-color", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__color", data);
 };
 
 window.set_value_main["ftd#default-colors"] = function (data, new_value, remaining) {
 window.ftd.utils.set_value_helper(data, "ftd#default-colors", remaining, new_value);
 
 window.ftd.call_mutable_value_changes("ftd#default-colors", "main");
 window.ftd.call_immutable_value_changes("ftd#default-colors", "main");
-window.ftd.utils.node_change_call("main","0,1,2:main__color", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__color", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__color", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,1:main__color", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__color", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__color", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,0:main__color", data);
 window.ftd.utils.node_change_call("main","0,1,2:main__border-color", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__color", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__color", data);
 };
 
 window.set_value_main["ftd#default-types"] = function (data, new_value, remaining) {
 window.ftd.utils.set_value_helper(data, "ftd#default-types", remaining, new_value);
 
 window.ftd.call_mutable_value_changes("ftd#default-types", "main");
 window.ftd.call_immutable_value_changes("ftd#default-types", "main");
-window.ftd.utils.node_change_call("main","0,1,0,0:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__line-height", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,0,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__font-family", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,0,1:main__letter-spacing", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__line-height", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,0:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-family", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__line-height", data);
 window.ftd.utils.node_change_call("main","0,1,2:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__line-height", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__line-height", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,0,1:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,0,1:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,0,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__font-size", data);
 window.ftd.utils.node_change_call("main","0,1,1:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__font-family", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__font-family", data);
 window.ftd.utils.node_change_call("main","0,1,0,0:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__font-family", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__line-height", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-family", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,0,1:main__font-weight", data);
 window.ftd.utils.node_change_call("main","0,1,2:main__font-family", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__letter-spacing", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__font-family", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__font-weight", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-family", data);
 };
 
 window.set_value_main["ftd#device"] = function (data, new_value, remaining) {
 window.ftd.utils.set_value_helper(data, "ftd#device", remaining, new_value);
 
 window.ftd.call_mutable_value_changes("ftd#device", "main");
 window.ftd.call_immutable_value_changes("ftd#device", "main");
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__line-height", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__font-family", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-family", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__letter-spacing", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__font-family", data);
 window.ftd.utils.node_change_call("main","0,1,0,0:main__line-height", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-weight", data);
 window.ftd.utils.node_change_call("main","0,1,0,0:main__font-family", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__line-height", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__font-family", data);
 window.ftd.utils.node_change_call("main","0,1,0,0:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__letter-spacing", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__letter-spacing", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__line-height", data);
-window.ftd.utils.node_change_call("main","0,0,1:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__line-height", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-family", data);
-window.ftd.utils.node_change_call("main","0,1,1:main__letter-spacing", data);
-window.ftd.utils.node_change_call("main","0,1,0,0:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,0,1,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__font-family", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,0,1:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__font-family", data);
 window.ftd.utils.node_change_call("main","0,0,1:main__letter-spacing", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-family", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__font-size", data);
+window.ftd.utils.node_change_call("main","0,1,0,0:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-size", data);
 window.ftd.utils.node_change_call("main","0,1,0,1,1:main__font-weight", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__font-size", data);
-window.ftd.utils.node_change_call("main","0,1,2:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,2:main__font-weight", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,0:main__letter-spacing", data);
+window.ftd.utils.node_change_call("main","0,1,0,1,1:main__line-height", data);
+window.ftd.utils.node_change_call("main","0,1,1:main__font-weight", data);
 };
 
 

diff --git a/download.js b/download.js
@@ -1,8 +1,41 @@
+// Default download format is kept as .jpeg
+// To download as other formats, use other functions mentioned below
 function download_as_image(element_id, filename) {
     // Get the HTML element you want to convert to an image
     var element = document.getElementById(element_id);
 
     // Use htmlToImage library to convert the element to an image
+    htmlToImage.toJpeg(element)
+      .then(function (dataUrl) {
+        // `dataUrl` contains the image data in base64 format
+        var link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch(function (error) {
+        console.error('Error downloading image:', error);
+      });
+}
+
+function download_as_jpeg(element_id, filename) {
+    var element = document.getElementById(element_id);
+
+    htmlToImage.toJpeg(element)
+      .then(function (dataUrl) {
+        var link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch(function (error) {
+        console.error('Error downloading image:', error);
+      });
+}
+
+function download_as_png(element_id, filename) {
+    var element = document.getElementById(element_id);
+
     htmlToImage.toPng(element)
       .then(function (dataUrl) {
         // `dataUrl` contains the image data in base64 format
@@ -15,3 +48,18 @@ function download_as_image(element_id, filename) {
         console.error('Error downloading image:', error);
       });
 }
+
+function download_as_svg(element_id, filename) {
+    var element = document.getElementById(element_id);
+
+    htmlToImage.toSvg(element)
+      .then(function (dataUrl) {
+        var link = document.createElement('a');
+        link.download = filename;
+        link.href = dataUrl;
+        link.click();
+      })
+      .catch(function (error) {
+        console.error('Error downloading image:', error);
+      });
+}