Allowed easy sharing of data and code in demo website

JamesBotterill · Jan 21, 2021 · 9d51f86 · 9d51f86
1 parent eea044e
commit 9d51f86
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 13 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -12,6 +12,7 @@
     <button id="reloadBtn" class="btn">Reload</button>
     <button id="saveBtn" class="btn">Save</button>
     <button id="resetBtn" class="btn">Reset Database</button>
+    <button id="copyBtn" class="btn">Copy Link to Current Code</button>
     <select id="demoSelector" class="btn"></select>
     <p id="versionNumber">Loading Version</p>
 

diff --git a/docs/web/index.css b/docs/web/index.css
@@ -31,6 +31,11 @@ html {
   border: 2px solid #dc3545;
 }
 
+#copyBtn {
+  background-color: #ffa500;
+  border: 2px solid #ffa500;
+}
+
 #demoSelector {
   background-color: #007bff;
   border: 2px solid #007bff;

diff --git a/docs/web/index.js b/docs/web/index.js
@@ -4,9 +4,14 @@ const runButton = document.getElementById("runBtn");
 const reloadButton = document.getElementById("reloadBtn");
 const saveButton = document.getElementById("saveBtn");
 const resetButton = document.getElementById("resetBtn");
+const copyButton = document.getElementById("copyBtn");
 const demoSelector = document.getElementById("demoSelector");
 const errorOutput = document.getElementById("errorOutput");
 
+function getQueryVariable(variable) {
+  return new URLSearchParams(window.location.search).get(variable);
+}
+
 function displayError(errorMsg) {
   errorOutput.innerText = errorMsg;
 }
@@ -26,16 +31,6 @@ try {
   );
 }
 
-db.default({
-  list: [1, 2, 3],
-  string: "test",
-  numbers: 123,
-  objects: {
-    property: "test property"
-  }
-});
-db.save();
-
 // Credit for JSON syntax highlighting goes to: https://stackoverflow.com/a/7220510
 function syntaxHighlight(json) {
   json = json
@@ -144,13 +139,34 @@ demoKeys.forEach(key => {
   demoSelector.appendChild(option);
 });
 
-// load first demo
-loadDemo(demoKeys[0]);
-
 demoSelector.addEventListener("change", function() {
   loadDemo(demoSelector.value);
 });
 
+
+let queryCode = getQueryVariable("code");
+if (queryCode !== "") {
+  editor.updateCode(decodeURI(queryCode));
+  demoSelector.value = "custom";
+} else {
+  loadDemo(demoKeys[0]);
+}
+
+let queryData = getQueryVariable("data");
+if (queryData !== "") {
+  db.default(decodeURI(queryCode));
+} else {
+  db.default({
+    list: [1, 2, 3],
+    string: "test",
+    numbers: 123,
+    objects: {
+      property: "test property"
+    }
+  });
+}
+db.save();
+
 async function loadVersion() {
   fetch("https://unpkg.com/stormdb/package.json")
     .then(function(response) {
@@ -166,3 +182,11 @@ async function loadVersion() {
     .catch(function(error) {});
 }
 loadVersion();
+
+// copy URL function
+copyButton.addEventListener("click", function() {
+  let url = new URL(window.location.href);
+  url.searchParams.set("code", encodeURI(editor.getCode()));
+  url.searchParams.set("data", encodeURI(db.value()));
+  navigator.clipboard.writeText(url);
+});