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); +}