Added block component adp-share-header which has the Select All check…

… box /blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js : Added the functions selectAllAssets() and deselectAllAssets()
hlxsites · Feb 29, 2024 · adb0a46 · adb0a46
1 parent 9a127cb
commit adb0a46
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 32 deletions.
diff --git a/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js b/blocks/adp-infinite-results-linkshare/adp-infinite-results-linkshare.js
@@ -8,6 +8,7 @@ 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);
   });
@@ -21,3 +22,13 @@ 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
@@ -2,18 +2,9 @@
     padding-right: 0;
 }
 
-/*
 .adp-share-header {
     display: flex;
-    height: 124px;
-}
-
-*/
-.adp-share-header{
-  /*grid-area: selection-items; */
-  /* display: flex; */
-  padding-top: 15px;
-  padding-bottom: 11px;
+    height: 62px;
 }
 
 .adp-share-header-left {
@@ -29,13 +20,14 @@
     z-index: 1;
 }
 
+/*
 .adp-share-header-left .adp-share-title {
     margin-bottom: 12px; /* Keeps space between title and items */
 }
-
+*/
 .adp-share-subinfo {
     display: flex;
-    justify-content: space-between; /* Aligns items to the left and select all to the right */
+    /* justify-content: space-between; /* Aligns items to the left and select all to the right */
     align-items: center; /* Centers items vertically */
 }
 
@@ -45,9 +37,9 @@
     font: 11px/14px var(--body-font-family);
     padding: 6px 10px;
     flex-shrink: 0;
+    margin-right: 20px; /* Adjust the 20px to whatever fixed space you want between the items and the checkbox */
 }
 
-
 .adp-share-select-all {
     display: flex;
     align-items: center; /* This will vertically align the checkbox and label */
@@ -57,21 +49,13 @@
     margin-right: 5px; /* Adds some space between the checkbox and the label */
 }
 
-
-.adp-share-header-left .back-button .icon {
-    height: 10px;
-    width: 18px;
-    vertical-align: text-bottom;
-}
-
-/*Todo New CSS */
 .adp-share-header-share-info {
     display: flex;
     flex-direction: column; /* Stack the title and sub-info vertically */
 }
 
 .adp-share-header .adp-share-title {
-    font: var(--share-heading-font);
+    font: var(--collection-heading-font);
     width: 100%;
 }
 

diff --git a/blocks/adp-share-header/adp-share-header.js b/blocks/adp-share-header/adp-share-header.js
@@ -3,16 +3,16 @@ 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-linkshare/adp-infinite-results-linkshare.js';
 
 function createShareInfoHeader(shareInfoHeader) {
 
   shareInfoHeader.innerHTML = `
         <div class="adp-share-header-left">
-
           <div class="adp-share-header-share-info">
-            <div class="adp-share-title"></div>
             <div class="adp-share-subinfo">
-              <div class="adp-share-stats"></div>
               <div class="adp-share-select-all">
                 <input type="checkbox" id="select-all-checkbox"/>
                 <label for="select-all-checkbox">Select All</label>
@@ -22,20 +22,15 @@ function createShareInfoHeader(shareInfoHeader) {
         </div>
         </div>
     `;
-  //shareInfoHeader.querySelector('.adp-share-title').innerText = 'title';
-  shareInfoHeader.querySelector('.adp-share-stats').innerText = '5 items';
 
   document.getElementById('select-all-checkbox').addEventListener('click', function(event) {
       // Get the checked state of the select all checkbox
       var isChecked = event.target.checked;
 
       // Get all the checkboxes within the cards
       var checkboxes = document.querySelectorAll('.checkbox-container input[type="checkbox"], .filetype-video .checkbox-container input[type="checkbox"]');
-
-      // Set the checked state of each card's checkbox to match the select all checkbox
-      checkboxes.forEach(function(checkbox) {
-          checkbox.checked = isChecked;
-      });
+      // isChecked then selectAllAssets() else deselectAllAssets
+      isChecked ? selectAllAssets() : deselectAllAssets();
   });
 
   decorateIcons(shareInfoHeader);