ASSETS-88889 : Add 'Share' button to the Collection Detail Page

blocks/adp-collection-header/adp-collection-header.css

@@ -20,6 +20,19 @@
     z-index: 1;
 }
 
+.adp-collection-header-right {
+    margin-left: auto; /* This will push the element to the far right */
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    font-size: var(--header-font-size);
+    padding: 0;
+    top: 0.01rem;
+    padding-top: 0.88rem;
+    padding-bottom: 0.88rem;
+    z-index: 1;
+}
+
 
 .adp-collection-header-left .adp-collection-title {
     margin-bottom: 12px; /* Keeps space between title and items */
@@ -77,3 +90,46 @@
     align-items: center;
     justify-content: center;
 }
+
+.toast {
+    display: flex;
+    align-items: center;
+    background-color: #4CAF50; /* Dark green background */
+    color: white; /* White text color */
+    padding: 12px 24px; /* Padding inside the toast */
+    position: fixed; /* Positioning relative to the viewport */
+    z-index: 1; /* Make sure it is above other items */
+    bottom: 30px; /* Distance from the bottom */
+    left: 50%; /* Center the toast */
+    transform: translateX(-50%); /* Center the toast horizontally */
+    border-radius: 4px; /* Rounded corners */
+    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Shadow for 3D effect */
+    font-size: 0.9rem; /* Font size */
+    visibility: hidden; /* Hidden by default */
+    opacity: 0; /* Fully transparent */
+    transition: visibility 0s, opacity 0.5s linear; /* Transition for the toast */
+}
+
+.toast.show {
+    visibility: visible; /* Make the toast visible */
+    opacity: 1; /* Fully opaque */
+}
+
+.toast-icon {
+    margin-right: 12px; /* Space between icon and message */
+    font-size: 1.2rem; /* Icon size */
+}
+
+.toast-close {
+    margin-left: auto; /* Push the close button to the right */
+    background: none; /* No background */
+    border: none; /* No border */
+    color: white; /* White text color */
+    padding: 0; /* No padding */
+    cursor: pointer; /* Pointer cursor on hover */
+    font-size: 1.2rem; /* Size of the close button */
+}
+
+.toast-close:focus {
+    outline: none; /* Remove focus outline */
+}

blocks/adp-collection-header/adp-collection-header.js

@@ -7,7 +7,7 @@
   selectAllAssets, deselectAllAssets,
 } from '../adp-infinite-results-collection/adp-infinite-results-collection.js';
 
 
 function createCollectionInfoHeader(collectionInfoHeader, collection) {
   // include back to collections listing similar to hide filters button
   collectionInfoHeader.innerHTML = `
@@ -27,10 +27,19 @@
           </div>
         </div>
         <div class="adp-collection-header-right actions">
+          <div class="adp-action actions actions-share" role="button" id="shareButton">
+            <span class="icon icon-share"></span>Share
+          </div>
           <button class="adp-action adp-danger action-collection-delete">
             <span class="icon icon-delete"></span>Delete Collection
           </a>
         </div>
+
+        <div id="toast" class="toast">
+          <span class="toast-icon">&#10003;</span>
+          <span class="toast-message">Collection link copied to clipboard</span>
+          <button class="toast-close" onclick="closeToast()">×</button>
+        </div>
     `;
   collectionInfoHeader.querySelector('.adp-collection-title').innerText = collection.title;
   collectionInfoHeader.querySelector('.adp-collection-stats').innerText = `${collection.items.length} items`;
@@ -38,9 +47,13 @@
   backButton.href = createLinkHref(backButton.href);
 
   document.getElementById('select-all-checkbox').addEventListener('click', (event) => {
       event.target.checked ? selectAllAssets() : deselectAllAssets();
   });
 
+  document.getElementById('shareButton').addEventListener('click', (event) => {
+      copyCurrentUrlToClipboard();
+  });
+
   collectionInfoHeader.querySelector('.action-collection-delete').addEventListener('click', async (e) => {
     e.preventDefault();
     const collectionId = getCollectionIdFromURL();
@@ -69,3 +82,37 @@
     createCollectionInfoHeader(block, collection);
   }
 }
+
+// This function is called when the "Share" button is clicked
+function copyCurrentUrlToClipboard() {
+  // Create a dummy input to copy the string
+  const dummy = document.createElement('input'),
+        text = window.location.href; // Get the current URL
+  document.body.appendChild(dummy);
+  dummy.value = text;
+  dummy.select();
+  document.execCommand('copy'); // Copy the text inside the input
+  document.body.removeChild(dummy);
+
+  // Here you can also trigger any feedback to the user, like a tooltip or toast
+  //alert('URL copied to clipboard!'); // For demonstration purposes, using an alert
+  showToast();
+}
+
+function closeToast() {
+    const toast = document.getElementById("toast");
+    // Reset the toast visibility and opacity
+    toast.style.visibility = "hidden";
+    toast.style.opacity = "0";
+}
+
+function showToast() {
+    const toast = document.getElementById("toast");
+    // Ensure the toast is visible and fully opaque
+    toast.style.visibility = "visible";
+    toast.style.opacity = "1";
+    // Add "show" class again in case it was removed
+    toast.className = "toast show";
+    // Set a timeout to hide the toast after 3 seconds
+    setTimeout(function() { closeToast(); }, 3000);
+}