diff --git a/blocks/adp-collection-header/adp-collection-header.css b/blocks/adp-collection-header/adp-collection-header.css
index 5928d329..20f3c73a 100644
--- a/blocks/adp-collection-header/adp-collection-header.css
+++ b/blocks/adp-collection-header/adp-collection-header.css
@@ -20,8 +20,15 @@
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 +36,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%;
diff --git a/blocks/adp-collection-header/adp-collection-header.js b/blocks/adp-collection-header/adp-collection-header.js
index 618a4ce5..9ccea497 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/scripts.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,6 +19,10 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
@@ -28,6 +37,10 @@ function createCollectionInfoHeader(collectionInfoHeader, collection) {
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();
+ });
+
collectionInfoHeader.querySelector('.action-collection-delete').addEventListener('click', async (e) => {
e.preventDefault();
const collectionId = getCollectionIdFromURL();
diff --git a/blocks/adp-infinite-results-collection/CollectionDatasource.js b/blocks/adp-infinite-results-collection/CollectionDatasource.js
index 7ac6cd63..f2177923 100644
--- a/blocks/adp-infinite-results-collection/CollectionDatasource.js
+++ b/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;
},
},
);
diff --git a/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js b/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js
index 396a9472..aa9fe7da 100644
--- a/blocks/adp-infinite-results-collection/adp-infinite-results-collection.js
+++ b/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();
+}
diff --git a/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js b/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js
index 2c70c2ee..04448c63 100644
--- a/blocks/adp-infinite-results-linkshare/LinkShareDatasource.js
+++ b/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;
},
},
);
diff --git a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js b/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js
index 19aabd04..a54be492 100644
--- a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js
+++ b/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();
+}
diff --git a/blocks/adp-share-header/adp-share-header.css b/blocks/adp-share-header/adp-share-header.css
new file mode 100644
index 00000000..f4656feb
--- /dev/null
+++ b/blocks/adp-share-header/adp-share-header.css
@@ -0,0 +1,55 @@
+
+.adp-share-header {
+ display: flex;
+ height: 62px;
+}
+
+.adp-share-header-left {
+ display: flex;
+ gap: 15px;
+ align-items: center;
+ width: 100%;
+ font-size: var(--header-font-size);
+ padding: 0;
+ top: 0.01rem;
+ padding-top: 0.88rem;
+ padding-bottom: 0.88rem;
+ z-index: 1;
+}
+
+.adp-share-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-share-select-all {
+ display: flex;
+ align-items: center; /* This will vertically align the checkbox and label */
+}
+
+.adp-share-select-all input[type="checkbox"] {
+ margin-right: 5px; /* Adds some space between the checkbox and the label */
+}
+
+.adp-share-header-share-info {
+ display: flex;
+ flex-direction: column; /* Stack the title and sub-info vertically */
+}
+
+.adp-share-header {
+ font: var(--collection-heading-font);
+ width: 100%;
+}
+
+.adp-share-header .actions .adp-action {
+ text-wrap: nowrap;
+ align-items: center;
+}
+
+.adp-share-header .actions {
+ /* vertically align center */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/blocks/adp-share-header/adp-share-header.js b/blocks/adp-share-header/adp-share-header.js
new file mode 100644
index 00000000..ab300dc7
--- /dev/null
+++ b/blocks/adp-share-header/adp-share-header.js
@@ -0,0 +1,34 @@
+import { decorateIcons } from '../../scripts/lib-franklin.js';
+import { createLinkHref, navigateTo } from '../../scripts/scripts.js';
+
+import {
+ selectAllAssets, deselectAllAssets
+} from '../adp-infinite-results-linkshare/adp-infinite-results-linkshare.js';
+
+function createShareInfoHeader(shareInfoHeader) {
+
+ shareInfoHeader.innerHTML = `
+
+ `;
+
+ document.getElementById('select-all-checkbox').addEventListener('click', (event) => {
+ event.target.checked ? selectAllAssets() : deselectAllAssets();
+ });
+
+ decorateIcons(shareInfoHeader);
+ return shareInfoHeader;
+}
+
+export default async function decorate(block) {
+ block.innerHTML = '';
+ createShareInfoHeader(block);
+}