diff --git a/.hlxignore b/.hlxignore new file mode 100644 index 00000000..c5059166 --- /dev/null +++ b/.hlxignore @@ -0,0 +1,7 @@ +.* +*.md +karma.config.js +LICENSE +package.json +package-lock.json +test/* diff --git a/blocks/adp-asset-details-modal/adp-asset-details-modal.js b/blocks/adp-asset-details-modal/adp-asset-details-modal.js index 2c2cd8b8..ecd8f364 100644 --- a/blocks/adp-asset-details-modal/adp-asset-details-modal.js +++ b/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'); diff --git a/blocks/adp-asset-details-panel/adp-asset-details-panel.js b/blocks/adp-asset-details-panel/adp-asset-details-panel.js index bb556f81..2b0c2634 100644 --- a/blocks/adp-asset-details-panel/adp-asset-details-panel.js +++ b/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'); diff --git a/blocks/adp-collection-header/adp-collection-header.css b/blocks/adp-collection-header/adp-collection-header.css index 5928d329..127f28e3 100644 --- a/blocks/adp-collection-header/adp-collection-header.css +++ b/blocks/adp-collection-header/adp-collection-header.css @@ -20,8 +20,28 @@ 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 { @@ -29,15 +49,31 @@ 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 */ +} diff --git a/blocks/adp-collection-header/adp-collection-header.js b/blocks/adp-collection-header/adp-collection-header.js index c3a01fb0..fb6ad63c 100644 --- a/blocks/adp-collection-header/adp-collection-header.js +++ b/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) {
+
+ + +
+
+ Share +
+ +
+ + Collection link copied to clipboard + +
`; 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); +} diff --git a/blocks/adp-header/adp-header.js b/blocks/adp-header/adp-header.js index 63b4659e..e25e6719 100644 --- a/blocks/adp-header/adp-header.js +++ b/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 = `