Share URL widget edits

igvteam · Jul 11, 2024 · a78c526 · a78c526
1 parent 0266860
commit a78c526
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 16 deletions.
diff --git a/css/_share-modal.scss b/css/_share-modal.scss
@@ -49,3 +49,7 @@ button#igv-share-url-button {
 .igv-app-social-button {
   float: left;
 }
+
+.custom-btn-group .btn.single-button {
+  border-radius: 0.25rem !important;
+}
diff --git a/css/app.css b/css/app.css
diff --git a/css/app.css.map b/css/app.css.map
diff --git a/index.html b/index.html
@@ -475,16 +475,19 @@
                                     <div class="input-group">
                                         <input id="igv-app-share-input" type="text" class="form-control" placeholder="">
                                         <div class="input-group-append">
-                                            <button id="igv-app-copy-link-button" class="btn btn-outline-secondary" type="button">Copy URL</button>
+                                            <button id="igv-app-copy-link-button" class="btn btn-outline-secondary" type="button">Copy Session URL</button>
                                         </div>
                                     </div>
                                 </div>
                             </div>
 
-                            <!-- Embed Button -->
+                            <!-- Embed iframe Button | Copy iframe Button -->
                             <div class="row pt-4">
                                 <div class="col">
-                                    <button id="igv-app-embed-button" type="button" class="btn btn-outline-secondary">Embeddable iframe</button>
+                                    <div class="btn-group custom-btn-group" role="group">
+                                        <button id="igv-app-embed-button"       type="button" class="btn btn-outline-secondary">Embeddable iframe</button>
+                                        <button id="igv-app-copy-iframe-button" type="button" class="btn btn-outline-secondary">Copy iframe</button>
+                                    </div>
                                 </div>
                             </div>
 
@@ -493,9 +496,6 @@
                                 <div class="col form-group">
                                     <textarea class="form-control" rows="4"></textarea>
                                 </div>
-                                <div class="col">
-                                    <button type="button" class="btn btn-outline-secondary">Copy</button>
-                                </div>
                             </div>
 
                             <!-- QR Code Button -->

diff --git a/js/shareWidgets.js b/js/shareWidgets.js
@@ -28,10 +28,12 @@ import {doShortenURL, setURLShortener, shortSessionURL} from './shareHelper.js'
 
 let href
 let session
-function createShareWidgets({browser, container, modal, share_input, copy_link_button, qrcode_button, qrcode_image, embed_container, embed_button, embedTarget}) {
+function createShareWidgets({browser, container, modal, share_input, copy_link_button, qrcode_button, qrcode_image, embed_container, embed_button, iframeButton, embedTarget}) {
 
     $(modal).on('show.bs.modal', (e) => {
 
+        iframeButton.style.display = 'none'
+        embed_button.classList.add('single-button')
 
         document.querySelector('#igv-app-qrcode-image').style.display = 'none'
         document.querySelector('#igv-app-qrcode-container').style.display = 'none'
@@ -91,7 +93,8 @@ function createShareWidgets({browser, container, modal, share_input, copy_link_b
     document.getElementById('igv-share-long-url-radio').addEventListener('click', async () => {
         document.querySelector('#igv-app-qrcode-image').style.display = 'none'
         document.querySelector('#igv-app-qrcode-container').style.display = 'none'
-        share_input.value = `${href}?sessionURL=blob:${session}`
+        const str = `${href}?sessionURL=blob:${session}`
+        share_input.value = str
     })
 
     copy_link_button.addEventListener('click', () => {
@@ -105,8 +108,7 @@ function createShareWidgets({browser, container, modal, share_input, copy_link_b
     })
 
     if (embedTarget) {
-        const button = embed_container.querySelector('button');
-        button.addEventListener('click', () => {
+        iframeButton.addEventListener('click', () => {
 
             const textArea = embed_container.querySelector('textarea');
             textArea.select();
@@ -118,21 +120,24 @@ function createShareWidgets({browser, container, modal, share_input, copy_link_b
             } else {
                 console.error('fail!');
             }
-        });
+        })
 
         embed_button.addEventListener('click', () => {
 
             qrcode_image.style.display = 'none';
 
             if ('block' === embed_container.style.display) {
-                embed_container.style.display = 'none';
+                embed_container.style.display = iframeButton.style.display = 'none'
+                embed_button.classList.add('single-button')
             } else {
-                embed_container.style.display = 'block';
+                embed_container.style.display = iframeButton.style.display = 'block'
+                embed_button.classList.remove('single-button')
             }
 
-        });
+        })
+
     } else {
-        embed_button.style.display = 'none';
+        modal.querySelector('.btn-group').style.display = 'none'
     }
 
     qrcode_button.addEventListener('click', async () => {
@@ -179,6 +184,7 @@ function shareWidgetConfigurator(browser, container, options) {
         qrcode_image: document.getElementById('igv-app-qrcode-image'),
         embed_container: document.getElementById('igv-app-embed-container'),
         embed_button: document.getElementById('igv-app-embed-button'),
+        iframeButton: document.querySelector('#igv-app-copy-iframe-button'),
         embedTarget: options.embedTarget || `https://igv.org/web/release/${igv.version()}/embed.html`
     };