new share link pop up

eclipse-thingweb · Jul 31, 2023 · cabf43e · cabf43e
1 parent 0420244
commit cabf43e
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 17 deletions.
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -140,6 +140,18 @@
             <img src="./media/loading.svg" class="loading-spinner" alt="Loading..." />
         </div>
 
+        <div class="link-popup-wrapper closed">
+            <div class="link-popup">
+                <p class="link-popup__header">Share this TD</p>
+                <p class="link-popup__text">The sharable URL was copied to your clipboard!</p>
+                <input class="link-popup__url mb-3" type="text" id="url-input">
+                <div class="link-popup__btn-container">
+                    <button class="btn btn-editdor" type="button" id="btn-share-editdor" title="Export your TD/TM document to ediTDor as a sharable link">Open in ediTDor</button>
+                    <button class="btn btn-close" type="button" id="btn-close-linkpopup" title="Close the link popup">Close</button>
+                </div>
+            </div>
+        </div>
+
         <div class="container-fluid main">
             <div class="row alert alert-info header">
                 <div class="col-2">
@@ -304,19 +316,6 @@ <h3>Thing Description Playground</h3>
                                                     />
                                                 </svg>
                                             </button>
-                                            <button
-                                                type="button"
-                                                class="btn btn-info mr-0 ml-0 pr-0 pl-0"
-                                                disabled
-                                            ></button>
-                                            <button
-                                                type="button"
-                                                id="btn-share-editdor"
-                                                title="Export your TD/TM document to ediTDor as a sharable link"
-                                                class="btn btn-sm btn-info"
-                                            >
-                                                edi{TD}or
-                                            </button>
                                         </div>
                                     </div>
                                 </div>

diff --git 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
@@ -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
@@ -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}`;
 }
 
 /**