Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

569-new-section-carousel-first-full-layout #570

Merged
merged 5 commits into from
Dec 12, 2023
Merged

569-new-section-carousel-first-full-layout #570

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
62367fd
updated for new section
rgravitvl Dec 11, 2023
ebb3cd3
fixed lint issues
rgravitvl Dec 11, 2023
4f09fd3
updated carousel to handle multiple
rgravitvl Dec 11, 2023
d4d9a2d
fixed lint issues
rgravitvl Dec 11, 2023
d4d1d1d
updated converter for full layout
rgravitvl Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions tools/actions/convert/test/fixtures/en-converted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ <h2>Together, we see a way</h2>
</div>
</div>
<hr>
<hr>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check these 2 sections? The homepage is not using any carousel, so it should not be impacted.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we separated section of first full layout, home page is also got additional

<div class="cards articlecard">
<div>
<div>
Expand Down
2 changes: 2 additions & 0 deletions tools/actions/convert/test/fixtures/product-opco-home-converted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,14 @@ <h2>The world leader in microscopes and scientific instruments</h2>
</div>
</div>
</div>
<hr>
<h2>Product Categories</h2>
<div class="product-category-list opco-home">
<div>
<div></div>
</div>
</div>
<hr>
rgravitvl marked this conversation as resolved.
Show resolved Hide resolved
<div class="columns">
<div>
<div>
Expand Down
11 changes: 7 additions & 4 deletions tools/actions/convert/test/fixtures/product1-converted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ <h2>This is a tab with just the hero image</h2>
</div>
</div>
</div>
<hr>
<h2>Categories</h2>
<div class="product-category-list">
<div>
Expand Down Expand Up @@ -163,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
Open in desktop
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
Open in desktop
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'));
else carousel.append(document.createElement('hr'));
});
cells.push(...carousels);
const block = WebImporter.DOMUtils.createTable(cells, document);
carousel.append(block);
}
};

Expand Down
1 change: 1 addition & 0 deletions tools/importer/transformers/fullLayoutSection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const createFullLayoutSection = (main, document) => {
const div = e.querySelector('div');
const style = div.getAttribute('class');
if (style) {
if (i === 0 && e.parentNode.previousElementSibling) e.prepend(document.createElement('hr'));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just wondering why we need this in the section? I thought the hr tag can be added to individual blocks.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would needed to separate fulllayout from other above components. I can explain over the call. Thanks.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@duynguyen we (Ravi & I) just discussed we should have the sections controlled by the containers and not the blocks. Adding

before / after a block is risky, might work on one place but can have side effects on other places the same block is used.

const cells = [['Section Metadata'], ['style', style]];
const table = WebImporter.DOMUtils.createTable(cells, document);
e.after(table);
Expand Down