Merge remote-tracking branch 'origin/HEAD' into chdemo

.hlxignore

@@ -0,0 +1,7 @@
+.*
+*.md
+karma.config.js
+LICENSE
+package.json
+package-lock.json
+test/*

blocks/adp-asset-details-modal/adp-asset-details-modal.js

@@ -10,7 +10,7 @@ import {
 import { addDialogEventListeners } from '../../scripts/dialog-html-builder.js';
 import { authorizeURL, getAssetMetadata } from '../../scripts/polaris.js';
 import {
-  getAssetName, getAssetMimeType, getAssetTitle,
+  getAssetName, getAssetMimeType, getAssetTitle, isLicensedContent,
 } from '../../scripts/metadata.js';
 // eslint-disable-next-line import/no-cycle
 import { disableActionButtons } from '../adp-asset-details-panel/adp-asset-details-panel.js';
@@ -97,7 +97,8 @@ function createHeaderPanel(modal) {
   // ensure express button only shows for valid asset types
   const expressBtn = modal.querySelector('.action-edit-asset');
   const validCheck = fileValidity(format);
-  if (isCCEConfigured() && validCheck.isValid) {
+  if (isCCEConfigured() && validCheck.isValid && !isLicensedContent(assetJSON)) {
+    //Only show express button for content that is not licensed.
     expressBtn.classList.remove('hidden');
   } else if (!expressBtn.classList.contains('hidden')) {
     expressBtn.classList.add('hidden');

blocks/adp-asset-details-panel/adp-asset-details-panel.js

@@ -6,7 +6,7 @@ import { openDownloadModal } from '../adp-download-modal/adp-download-modal.js';
 import { openAssetDetailsModal } from '../adp-asset-details-modal/adp-asset-details-modal.js';
 import { fetchMetadataAndCreateHTML } from '../../scripts/metadata-html-builder.js';
 import {
-  getAssetMimeType, getAssetTitle, getAssetName, getAssetHeight, getAssetWidth,
+  getAssetMimeType, getAssetTitle, getAssetName, getAssetHeight, getAssetWidth, isLicensedContent,
 } from '../../scripts/metadata.js';
 import {
   getAssetMetadata,
@@ -74,7 +74,8 @@ export async function openAssetDetailsPanel(assetId, resultsManagerObj) {
   // ensure express button only shows for valid asset types
   const expressBtn = assetDetailsPanel.querySelector('.action-edit-asset');
   const validCheck = fileValidity(fileFormat);
-  if (isCCEConfigured() && validCheck.isValid) {
+  if (isCCEConfigured() && validCheck.isValid && !isLicensedContent(assetJSON)) {
+    //Only show express button for content that is not licensed.
     expressBtn.classList.remove('hidden');
   } else if (!expressBtn.classList.contains('hidden')) {
     expressBtn.classList.add('hidden');

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

@@ -20,24 +20,60 @@
     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;
+    margin-bottom: 12px; /* Keeps space between title and items */
+}
+
+.adp-collection-subinfo {
+    display: flex;
+    /* justify-content: space-between; /* Aligns items to the left and select all to the right */
+    align-items: center; /* Centers items vertically */
 }
 
 .adp-collection-stats {
     border: #E6E6E6 1px solid;
     border-radius: 6px;
     font: 11px/14px var(--body-font-family);
     padding: 6px 10px;
-    width: fit-content;
+    flex-shrink: 0;
+    margin-right: 20px; /* Adjust the 20px to whatever fixed space you want between the items and the checkbox */
+}
+
+.adp-collection-select-all {
+    display: flex;
+    align-items: center; /* This will vertically align the checkbox and label */
 }
 
+.adp-collection-select-all input[type="checkbox"] {
+    margin-right: 5px; /* Adds some space between the checkbox and the label */
+}
+
+
 .adp-collection-header-left .back-button .icon {
     height: 10px;
     width: 18px;
     vertical-align: text-bottom;
 }
 
+.adp-collection-header-collection-info {
+    display: flex;
+    flex-direction: column; /* Stack the title and sub-info vertically */
+}
+
 .adp-collection-header .adp-collection-title {
     font: var(--collection-heading-font);
     width: 100%;
@@ -54,3 +90,47 @@
     align-items: center;
     justify-content: center;
 }
+
+.toast {
+    display: flex;
+    align-items: center;
+    background-color: #5258E4; /* Site used blue 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-family: var(--body-font-family); /* Use site default font */
+    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

@@ -3,6 +3,11 @@ import createConfirmDialog from '../../scripts/confirm-dialog.js';
 import { decorateIcons } from '../../scripts/lib-franklin.js';
 import { createLinkHref, navigateTo } from '../../scripts/shared.js';
 
+import {
+  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 = `
@@ -14,20 +19,41 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
             <div class="adp-collection-title"></div>
             <div class="adp-collection-subinfo">
               <div class="adp-collection-stats"></div>
+              <div class="adp-collection-select-all">
+                <input type="checkbox" id="select-all-checkbox"/>
+                <label for="select-all-checkbox">Select All</label>
+              </div>
             </div>
           </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`;
   const backButton = collectionInfoHeader.querySelector('.back-button a');
   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();
@@ -56,3 +82,37 @@ export default async function decorate(block) {
     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);
+}

blocks/adp-header/adp-header.js

@@ -106,13 +106,14 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
  */
 export default async function decorate(block) {
   block.textContent = '';
+
   // decorate nav DOM
   const nav = document.createElement('nav');
   nav.id = 'nav';
   nav.innerHTML = `
   <div class="nav-top">
     <div class="nav-brand">
-      <a class="adp-logo" href="/"></a>
+      <a class="adp-logo" href="${getBaseConfigPath()}/"></a>
       <div></div>
     </div>
     <div class="nav-sections">
@@ -222,7 +223,8 @@ export default async function decorate(block) {
     });
   }
 
-  if (!isPublicPage()) {
+  if (await getUserProfile() !== null) {
+    document.querySelector('.adp-logo').href = getBaseConfigPath() + '/assets';
     loadSearchField(nav);
     if (!window.unifiedShellRuntime) {
       await createUserInfo(nav);
@@ -355,7 +357,7 @@ async function initQuickLinks() {
   }
   //set aria-selected on quick links
   quickLinks.querySelectorAll('.item').forEach((item) => {
-    if (item.querySelector('a')?.dataset.page === window.location.pathname) {
+    if (item.querySelector('a')?.getAttribute('href') === window.location.pathname) {
       item.setAttribute('aria-selected', 'true');
     }
   });

blocks/adp-infinite-results-collection/CollectionDatasource.js

@@ -88,6 +88,8 @@ export default class CollectionsDatasource {
         },
         removeItemFromMultiSelectionHandler: () => {
           infiniteResultsContainer.removeItemFromMultiSelection(assetId);
+          //Uncheck select all checkbox
+          document.getElementById('select-all-checkbox').checked = false;
         },
       },
     );

blocks/adp-infinite-results-collection/adp-infinite-results-collection.js

@@ -16,6 +16,8 @@ export default async function decorate(block) {
     infiniteResultsContainer.deselectItem(e.detail.assetId);
   });
   addEventListener(EventNames.CLOSE_BANNER, () => {
+    //Uncheck select all checkbox
+    document.getElementById('select-all-checkbox').checked = false;
     infiniteResultsContainer.clearAllSelections();
   });
 }
@@ -39,3 +41,12 @@ export function hasNextCard() {
 export function hasPreviousCard() {
   return infiniteResultsContainer.hasPreviousCard();
 }
+
+
+export function selectAllAssets() {
+  infiniteResultsContainer.selectAllItems();
+}
+
+export function deselectAllAssets() {
+  infiniteResultsContainer.deselectAllItems();
+}

blocks/adp-infinite-results-linkshare/LinkShareDatasource.js

@@ -53,6 +53,8 @@ export default class LinkShareDatasource {
         },
         removeItemFromMultiSelectionHandler: () => {
           infiniteResultsContainer.removeItemFromMultiSelection(assetId);
+          //Uncheck select all checkbox
+          document.getElementById('select-all-checkbox').checked = false;
         },
       },
     );

blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js

@@ -8,10 +8,13 @@ export default async function decorate(block) {
   const instantSearchDatasource = new LinkShareDatasource();
   infiniteResultsContainer = new InfiniteResultsContainer(block, instantSearchDatasource);
   infiniteResultsContainer.render();
+
   addEventListener(EventNames.ASSET_QUICK_PREVIEW_CLOSE, (e) => {
     infiniteResultsContainer.deselectItem(e.detail.assetId);
   });
   addEventListener(EventNames.CLOSE_BANNER, () => {
+    //Uncheck select all checkbox
+    document.getElementById('select-all-checkbox').checked = false;
     infiniteResultsContainer.clearAllSelections();
   });
 }
@@ -21,3 +24,11 @@ export function openLinkShare(id) {
   // change the url
   window.history.pushState({}, '', url);
 }
+
+export function selectAllAssets() {
+  infiniteResultsContainer.selectAllItems();
+}
+
+export function deselectAllAssets() {
+  infiniteResultsContainer.deselectAllItems();
+}

blocks/adp-search-field/adp-search-field.js

@@ -86,7 +86,7 @@ function createSuggestionsPlugin(recentSearchesPlugin) {
   if (enableSearchSuggestions) {
     querySuggestionsPlugin = createQuerySuggestionsPlugin({
       searchClient: getSearchClient(),
-      indexName: 'query_suggestions',
+      indexName: INSTANT_SEARCH_INDEX_NAME + '_query_suggestions',
       getSearchParams({ state }) {
         // This creates a shared `hitsPerPage` value once the duplicates
         // between recent searches and Query Suggestions are removed.