Skip to content

Commit

Permalink
updated carousel to handle multiple
Browse files Browse the repository at this point in the history
  • Loading branch information
@rgravitvl
rgravitvl committed Dec 11, 2023
1 parent ebb3cd3 commit 4f09fd3
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 127 deletions.
10 changes: 6 additions & 4 deletions tools/actions/convert/test/fixtures/product1-converted.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,16 +164,18 @@ <h3>Sciex</h3>
</div>
</div>
</div>
<div class="columns itemscenter">
<hr>
<div class="carousel">
<div>
<div>
<p><strong>PRODUCT SPOTLIGHT</strong></p>
<p>Leica Microsystems</p>
<h2>Intabio ZT System</h2>
<p>Comprehensive charge variant analysis made simple. The Intabio ZT system couples icIEF separation and UV detection with high resolution mass spectrometry on the ZenoTOF 7600 system</p>
<p><a href="/us/en/products/family/intabio-zt-systems.html">Learn More</a></p>
<p><a href=""></a></p>
<p><a href="/us/en/blog.html">Learn More</a></p>
</div>
<div>
<img src="https://s7d9.scene7.com/is/image/danaherstage/inatbio-zt-circles" alt="Danaher Corporation">
<img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/products/sciex/zenotof-7600/sciex-zenotof-7600-external-product-hero.jpg" alt="hero">
</div>
</div>
</div>
Expand Down
71 changes: 2 additions & 69 deletions tools/actions/convert/test/fixtures/product1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -820,83 +820,16 @@ <h2 class="text-gray-900 my-2 font-extrabold text-4xl pt-0 pb-0">Discover produc
</div>
</div>
</fulllayout></div>
<div class="grid aem-GridColumn aem-GridColumn--default--12">

<grid columns="2" itemscenter="true">
<template v-slot:col-one>






<div class="heading-aem">


<h1 class="text-gray-900 my-2 font-semibold text-xl pt-0 pb-0">PRODUCT SPOTLIGHT</h1>


<div class="carousel aem-GridColumn aem-GridColumn--default--12">

<home-carousel slidedata="[{&#34;title&#34;:&#34;&lt;p>Intabio ZT System&lt;/p>\r\n&#34;,&#34;description&#34;:&#34;&lt;p>Comprehensive charge variant analysis made simple. The Intabio ZT system couples icIEF separation and UV detection with high resolution mass spectrometry on the ZenoTOF 7600 system&lt;/p>\r\n&lt;p>&lt;a> &lt;/a>&lt;/p>\r\n&#34;,&#34;image&#34;:&#34;/content/dam/danaher/products/sciex/zenotof-7600/sciex-zenotof-7600-external-product-hero.jpg&#34;,&#34;imgalt&#34;:&#34;hero&#34;,&#34;btntitle1&#34;:&#34;Learn More&#34;,&#34;btn1path&#34;:&#34;https://stage.lifesciences.danaher.com/content/danaher/ls/us/en/blog.html&#34;,&#34;btntitle2&#34;:null,&#34;btn2path&#34;:null,&#34;buttonRFQOne&#34;:null,&#34;buttonRFQTwo&#34;:null,&#34;buttonColorOne&#34;:null,&#34;buttonColorTwo&#34;:null,&#34;newTabOne&#34;:&#34;_self&#34;,&#34;newTabTwo&#34;:&#34;_self&#34;,&#34;brandText&#34;:&#34;Leica Microsystems&#34;}]" bgcolor="purple-dark" autoplay="true" duration="3000" speed="3000" pauseonhover="true"></home-carousel>
</div>




<div class="featureimage">

<feature-image textwidth="_self" title="Intabio ZT System" titlesize="xxxl" titleheading="h2" description="&lt;p>Comprehensive charge variant analysis made simple. The Intabio ZT system couples icIEF separation and UV detection with high resolution mass spectrometry on the ZenoTOF 7600 system&lt;/p>
" descsize="txl" btntext="Learn More" btnhref="https://stage.lifesciences.danaher.com/us/en/products/family/intabio-zt-systems.html" btnnewtab="_self">
</feature-image>

</div>


</template>
<template v-slot:col-two>






<div class="imagetext">

<imagetext image="https://s7d9.scene7.com/is/image/danaherstage/inatbio-zt-circles">
</imagetext>
</div>


</template>
<template v-slot:col-three>




</template>
<template v-slot:col-four>




</template>
<template v-slot:col-five>




</template>
<template v-slot:col-six>




</template>
</grid></div>


</div>
</div>

<div class="footer experiencefragment">


Expand Down
116 changes: 62 additions & 54 deletions tools/importer/transformers/carousel.js
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,68 @@
/* global WebImporter */
const createCarousel = (main, document) => {
const carousel = main.querySelector('home-carousel');
if (carousel) {
const cells = [];
// eslint-disable-next-line no-undef
const carouselLists = JSON.parse(decodeHtmlEntities(carousel.getAttribute('slidedata')));
cells.push(['carousel']);
const carousels = carouselLists.map((list) => {
const rightDiv = document.createElement('div');
const brandDiv = document.createElement('div');
brandDiv.textContent = list.brandText;
if (list.brandText) rightDiv.append(brandDiv);
const title = document.createElement('h2');
title.innerHTML = list.title;
if (list.title) rightDiv.append(title);
const description = document.createElement('p');
description.innerHTML = list.description;
if (list.description) rightDiv.append(description);
const btnText1 = list.btntitle1;
const btnhref1 = list.btn1path;
const rfqBtn1 = list.buttonRFQOne;
if (btnText1) {
const p1 = document.createElement('p');
const a1 = document.createElement('a');
a1.setAttribute('href', rfqBtn1 ? '#request-quote' : btnhref1);
a1.textContent = btnText1;
p1.append(a1);
rightDiv.append(p1);
}
const btnText2 = list.btntitle2;
const btnhref2 = list.btn2path;
const rfqBtn2 = list.buttonRFQTwo;
if (btnText2) {
const p2 = document.createElement('p');
const a2 = document.createElement('a');
a2.setAttribute('href', rfqBtn2 ? '#request-quote' : btnhref2);
a2.textContent = btnText2;
p2.append(a2);
rightDiv.append(p2);
}
const getCarousel = (carousel, cells, document) => {
// eslint-disable-next-line no-undef
const carouselLists = JSON.parse(decodeHtmlEntities(carousel.getAttribute('slidedata')));
cells.push(['carousel']);
const slides = carouselLists.map((slide) => {
const rightDiv = document.createElement('div');
const brandDiv = document.createElement('div');
brandDiv.textContent = slide.brandText;
if (slide.brandText) rightDiv.append(brandDiv);
const title = document.createElement('h2');
title.innerHTML = slide.title;
if (slide.title) rightDiv.append(title);
const description = document.createElement('p');
description.innerHTML = slide.description;
if (slide.description) rightDiv.append(description);
const btnText1 = slide.btntitle1;
const btnhref1 = slide.btn1path;
const rfqBtn1 = slide.buttonRFQOne;
if (btnText1) {
const p1 = document.createElement('p');
const a1 = document.createElement('a');
a1.setAttribute('href', rfqBtn1 ? '#request-quote' : btnhref1);
a1.textContent = btnText1;
p1.append(a1);
rightDiv.append(p1);
}
const btnText2 = slide.btntitle2;
const btnhref2 = slide.btn2path;
const rfqBtn2 = slide.buttonRFQTwo;
if (btnText2) {
const p2 = document.createElement('p');
const a2 = document.createElement('a');
a2.setAttribute('href', rfqBtn2 ? '#request-quote' : btnhref2);
a2.textContent = btnText2;
p2.append(a2);
rightDiv.append(p2);
}

const leftDiv = document.createElement('div');
const img = document.createElement('img');
const altText = slide.imgalt;
img.setAttribute('src', slide.image);
if (altText) {
img.setAttribute('alt', altText);
} else {
img.setAttribute('alt', 'Danaher Corporation');
}
leftDiv.append(img);
return [rightDiv, leftDiv];
});
cells.push(...slides);
};

const leftDiv = document.createElement('div');
const img = document.createElement('img');
const altText = list.imgalt;
img.setAttribute('src', list.image);
if (altText) {
img.setAttribute('alt', altText);
} else {
img.setAttribute('alt', 'Danaher Corporation');
}
leftDiv.append(img);
return [rightDiv, leftDiv];
const createCarousel = (main, document) => {
const carousels = main.querySelectorAll('home-carousel');
if (carousels) {
carousels.forEach((carousel, i) => {
const cells = [];
getCarousel(carousel, cells, document);
const block = WebImporter.DOMUtils.createTable(cells, document);
carousel.append(block);
if (i === carousels.length-1 && !carousel.parentNode.nextElementSibling) carousel.prepend(document.createElement('hr'));

Check failure on line 63 in tools/importer/transformers/carousel.js

View workflow job for this annotation

GitHub Actions / build 

Operator '-' must be spaced
else carousel.append(document.createElement('hr'))

Check failure on line 64 in tools/importer/transformers/carousel.js

View workflow job for this annotation

GitHub Actions / build 

Missing semicolon
});
cells.push(...carousels);
const block = WebImporter.DOMUtils.createTable(cells, document);
carousel.append(block, document.createElement('hr'));
}
};

Expand Down

0 comments on commit 4f09fd3

Please sign in to comment.