Merge pull request #486 from SergioCasCeb/master

Changed "share url" pop up functionality
eclipse-thingweb · Aug 3, 2023 · 0acd2fc · 0acd2fc
2 parents c30fa2c + 9d993db
commit 0acd2fc
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 7 deletions.
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -142,9 +142,17 @@
 
         <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">
+                <p class="link-popup__header">Share this <span id="link-type">TD</span></p>
+                <p class="link-popup__text">Copy the link below to share your <span id="link-type">TD</span> or open it in a new tab!</p>
+                <div class="link-popup__url">
+                    <input class="url-input mb-4" type="text" id="url-input">
+                    <button class="btn-new-tab mb-4" type="button" id="btn-open-tab" title="Open the url in a new playground tab">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/>
+                        </svg>
+                    </button>
+                </div>
+
                 <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>

diff --git a/packages/web/script.js b/packages/web/script.js
@@ -257,6 +257,7 @@ document.getElementById("close_assertion_test_popup").addEventListener("click",
 
 const shareLinkWrapper = document.querySelector(".link-popup-wrapper");
 const urlInput = document.querySelector("#url-input");
+const linkTypeText = document.querySelectorAll("#link-type");
 
 //Open the share link pop up and populate the url field with the new link
 document
@@ -265,6 +266,9 @@ document
         try{
             const URL = await util.save(docType, window.editor.getModel().getLanguageId());
             if(URL !== undefined){
+                linkTypeText.forEach(linkText => {
+                    linkText.innerText = docType.toUpperCase()
+                })
                 urlInput.value = URL
                 shareLinkWrapper.classList.remove("closed")
             }
@@ -279,6 +283,13 @@ document
     .getElementById("btn-share-editdor")
     .addEventListener("click", () => util.openEditdor(docType, window.editor.getModel().getLanguageId()));
 
+//Open the shared link in another playground tab
+document
+    .getElementById("btn-open-tab")
+    .addEventListener("click", () => {
+        window.open(urlInput.value, '_blank');
+    })
+
 //Close the share link pop up
 document
     .getElementById("btn-close-linkpopup")

diff --git a/packages/web/style.css b/packages/web/style.css
@@ -465,13 +465,51 @@ i {
 
 .link-popup__url{
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.link-popup__url .url-input{
+    width: 100%;
+    height: 2.25rem;
     margin-left: 0;
-    border-radius: 5px;
-    border: 2px solid #000000;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border: 2px solid #2b2b2b;
     padding: .25rem .5rem;
     font-size: 1rem;
 }
 
+.link-popup__url .url-input:focus{
+    outline: none;
+}
+
+.link-popup__url .btn-new-tab{
+    width: fit-content;
+    height: 2.25rem;
+    padding: .25rem .75rem;
+    border: none;
+    background-color: #2b2b2b;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    transition: background-color 150ms ease-in-out;
+}
+
+.link-popup__url .btn-new-tab:hover{
+    background-color: #1f1f1f;
+}
+
+.link-popup__url .btn-new-tab:focus{
+    outline: none;
+    background-color: #1f1f1f;
+}
+
+.btn-new-tab svg{
+    fill: #ffffff;
+    height: 1rem;
+}
+
 .link-popup__btn-container{
     text-align: right;
 }

diff --git a/packages/web/util.js b/packages/web/util.js
@@ -557,8 +557,7 @@ export async function save(docType, format) {
 
     const data = docType + format + value;
     const compressed = Validators.compress(data);
-    await navigator.clipboard.writeText(`${window.location.href}#${compressed}`);
-    return  `${window.location.href}#${compressed}`;
+    return `${window.location.href}#${compressed}`;
 }
 
 /**