rearrange functions

hlxsites · Jan 16, 2024 · 2508974 · 2508974
1 parent 0898827
commit 2508974
Showing 1 changed file with 66 additions and 66 deletions.
diff --git a/blocks/hero-slides/hero-slides.js b/blocks/hero-slides/hero-slides.js
@@ -1,69 +1,4 @@
-import { createOptimizedPicture, readBlockConfig } from '../../scripts/lib-franklin.js';
-
-/**
- * Slideshow with luxury listings. Supports swiping on touch screens.
- * Also supports manually adding content into the block.
- * @param block
- */
-export default async function decorate(block) {
-  const config = readBlockConfig(block);
-  const  listings = await fetchListings(config);
-  block.textContent = '';
-  const { advanceSlides } = setupSlideControls(block);
-
-  const count = document.createElement('div');
-  count.innerText = `1 of ${listings.length}`;
-  const slideshowButtons = document.createElement('div');
-  slideshowButtons.classList.add('slideshow-buttons');
-  const prevBtn = document.createElement('img');
-  prevBtn.classList.add('prev');
-  prevBtn.src = '/icons/chevron-right-white.svg';
-  prevBtn.addEventListener('click', () => advanceSlides(1));
-  const nextBtn = document.createElement('img');
-  nextBtn.classList.add('next');
-  nextBtn.src = '/icons/chevron-right-white.svg';
-  nextBtn.addEventListener('click', () => advanceSlides(-1));
-
-  slideshowButtons.append(count, prevBtn, nextBtn);
-
-  listings.forEach((listing, index) => {
-    const slide = document.createElement('div');
-    slide.classList.add('slide');
-
-    const imageSizes = [
-      // desktop
-      { media: '(min-width: 600px)', height: '600' },
-      // tablet and mobile sizes:
-      { media: '(min-width: 400px)', height: '600' },
-      { width: '400' },
-    ];
-    const picture = listing.picture || createOptimizedPicture(
-      config[listing.ListingId],
-      listing.City,
-      index === 0,
-      imageSizes,
-    );
-    slide.innerHTML = `
-      <div class="image">${picture.outerHTML}</div>
-      <div class="row">
-      <div class="logo">
-      <img src="/icons/lux_mark_classic_blk.svg">
-      </div>
-      <div class="text">
-      <p class="city">${plainText(listing.City)}, ${plainText(listing.StateOrProvince)}</p>
-      <p class="price">${plainText(listing.ListPriceUS)}</p>
-      <a class="link" href='${listing.PdpPath}'>LEARN MORE</a>
-      </div>
-      </div> `;
-    block.append(slide);
-
-    if (index === 0) {
-      slide.classList.add('active');
-    }
-  });
-
-  block.append(slideshowButtons);
-}
+import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js';
 
 async function fetchListings(config) {
   const resp = await fetch(`${window.hlx.codeBasePath}/drafts/rrusher/listings.json`);
@@ -131,3 +66,68 @@ function plainText(text) {
   fragment.append(text);
   return fragment.innerHTML;
 }
+
+/**
+ * Slideshow with luxury listings. Supports swiping on touch screens.
+ * Also supports manually adding content into the block.
+ * @param block
+ */
+export default async function decorate(block) {
+  const config = readBlockConfig(block);
+  const  listings = await fetchListings(config);
+  block.textContent = '';
+  const { advanceSlides } = setupSlideControls(block);
+
+  const count = document.createElement('div');
+  count.innerText = `1 of ${listings.length}`;
+  const slideshowButtons = document.createElement('div');
+  slideshowButtons.classList.add('slideshow-buttons');
+  const prevBtn = document.createElement('img');
+  prevBtn.classList.add('prev');
+  prevBtn.src = '/icons/chevron-right-white.svg';
+  prevBtn.addEventListener('click', () => advanceSlides(1));
+  const nextBtn = document.createElement('img');
+  nextBtn.classList.add('next');
+  nextBtn.src = '/icons/chevron-right-white.svg';
+  nextBtn.addEventListener('click', () => advanceSlides(-1));
+
+  slideshowButtons.append(count, prevBtn, nextBtn);
+
+  listings.forEach((listing, index) => {
+    const slide = document.createElement('div');
+    slide.classList.add('slide');
+
+    const imageSizes = [
+      // desktop
+      { media: '(min-width: 600px)', height: '600' },
+      // tablet and mobile sizes:
+      { media: '(min-width: 400px)', height: '600' },
+      { width: '400' },
+    ];
+    const picture = listing.picture || createOptimizedPicture(
+      config[listing.ListingId],
+      listing.City,
+      index === 0,
+      imageSizes,
+    );
+    slide.innerHTML = `
+      <div class="image">${picture.outerHTML}</div>
+      <div class="row">
+      <div class="logo">
+      <img src="/icons/lux_mark_classic_blk.svg">
+      </div>
+      <div class="text">
+      <p class="city">${plainText(listing.City)}, ${plainText(listing.StateOrProvince)}</p>
+      <p class="price">${plainText(listing.ListPriceUS)}</p>
+      <a class="link" href='${listing.PdpPath}'>LEARN MORE</a>
+      </div>
+      </div> `;
+    block.append(slide);
+
+    if (index === 0) {
+      slide.classList.add('active');
+    }
+  });
+
+  block.append(slideshowButtons);
+}