From cabf43e701fde6a4e14b483b12d6ae98c8358841 Mon Sep 17 00:00:00 2001
From: Sergio Eduardo Castro Ceballos
<72516762+SergioCasCeb@users.noreply.github.com>
Date: Mon, 31 Jul 2023 14:10:21 +0200
Subject: [PATCH] new share link pop up
---
packages/web/index.html | 25 ++++++++---------
packages/web/script.js | 27 +++++++++++++++++-
packages/web/style.css | 61 +++++++++++++++++++++++++++++++++++++++++
packages/web/util.js | 5 ++--
4 files changed, 101 insertions(+), 17 deletions(-)
diff --git a/packages/web/index.html b/packages/web/index.html
index e2541afdb..369fc8273 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -140,6 +140,18 @@
+
+
diff --git a/packages/web/script.js b/packages/web/script.js
index ccf5e1324..322d317d5 100644
--- a/packages/web/script.js
+++ b/packages/web/script.js
@@ -255,14 +255,39 @@ document.getElementById("close_assertion_test_popup").addEventListener("click",
document.getElementById("assertion_test_popup").style.display = "none";
});
+const shareLinkWrapper = document.querySelector(".link-popup-wrapper");
+const urlInput = document.querySelector("#url-input");
+
+//Open the share link pop up and populate the url field with the new link
document
.getElementById("btn_save")
- .addEventListener("click", () => util.save(docType, window.editor.getModel().getLanguageId()));
+ .addEventListener("click", async () => {
+ try{
+ const URL = await util.save(docType, window.editor.getModel().getLanguageId());
+ if(URL !== undefined){
+ urlInput.value = URL
+ shareLinkWrapper.classList.remove("closed")
+ }
+ }
+ catch(err){
+ console.log(err);
+ }
+ });
+//Open the shared link in ediTDor
document
.getElementById("btn-share-editdor")
.addEventListener("click", () => util.openEditdor(docType, window.editor.getModel().getLanguageId()));
+//Close the share link pop up
+document
+ .getElementById("btn-close-linkpopup")
+ .addEventListener("click", () => {
+ urlInput.value = ''
+ shareLinkWrapper.classList.add("closed")
+ });
+
+
urlAddrObject = util.getExamplesList(docType); // Fetching list of examples from the given array(in helperFunctions.js).
util.populateExamples(urlAddrObject); // Loading the examples given in list from their respective URLs
diff --git a/packages/web/style.css b/packages/web/style.css
index 961520b8c..87ced00a6 100644
--- a/packages/web/style.css
+++ b/packages/web/style.css
@@ -428,3 +428,64 @@ i {
.tooltipline {
text-decoration: underline dotted gray;
}
+
+.link-popup-wrapper{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 99;
+ display: grid;
+ place-items: center;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+
+.link-popup-wrapper.closed{
+ display: none;
+}
+
+.link-popup{
+ background-color: rgb(255, 255, 255);
+ padding: 1.5rem;
+ border-radius: 10px;
+ min-width: fit-content;
+ width: 33%;
+}
+
+.link-popup__header{
+ font-weight: bold;
+ font-size: 1.25rem;
+}
+
+.link-popup__text{
+ font-size: 1rem;
+ color: #575757;
+}
+
+.link-popup__url{
+ width: 100%;
+ margin-left: 0;
+ border-radius: 5px;
+ border: 2px solid #000000;
+ padding: .25rem .5rem;
+ font-size: 1rem;
+}
+
+.link-popup__btn-container{
+ text-align: right;
+}
+
+.link-popup__btn-container .btn-editdor{
+ background-color: transparent;
+}
+
+.link-popup__btn-container .btn-close{
+ background-color: #138496;
+ color: #fff;
+ transition: background-color 250ms ease-in-out;
+}
+
+.link-popup__btn-container .btn-close:hover{
+ background-color: #106775;
+}
diff --git a/packages/web/util.js b/packages/web/util.js
index ccac00489..23e36fdfe 100644
--- a/packages/web/util.js
+++ b/packages/web/util.js
@@ -557,9 +557,8 @@ export async function save(docType, format) {
const data = docType + format + value;
const compressed = Validators.compress(data);
- window.location.hash = compressed;
- await navigator.clipboard.writeText(window.location.href);
- alert("The sharable URL is copied to your clipboard, if not - simply copy the address bar.");
+ await navigator.clipboard.writeText(`${window.location.href}#${compressed}`);
+ return `${window.location.href}#${compressed}`;
}
/**