FrontendComponents/tabs
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add tabs feature with two options

Browse Source
This commit is contained in:
Mykola Zahorulko
2025-08-13 15:45:07 +02:00
commit 696f1a9a82
8 changed files with 513 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
mobile-scrollbar/index.xslt Normal file
View File

@@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8"?><iai:component><iai:componentsdata><cdata-start/>
<div class="tabs">
<div class="tabs__container">
<!--Opis-->
<iaixsl:if test="page/projector/product/vlongdescription and not(page/projector/product/vlongdescription = '')">
<div class="tabs__item idm-active" data-tab="projector_longdescription">
<iai:variable vid="Opis produktu" />
</div>
</iaixsl:if>
<!--Parametry-->
<iaixsl:if
test="/shop/page/projector/product/price/@srp or (count(/shop/page/projector/product/dictionary/items) &gt; 0) or ($product_producer_label and not(/shop/page/projector/product/firm/@name = '')) or ($product_code_label and /shop/page/projector/product/@code) or ($product_series_label and /shop/page/projector/product/series) or ($product_producer_code_label and count(/shop/page/projector/product/sizes/size[@code_producer and not(@code_producer = '')]) &gt; 0) or (count(/shop/page/projector/product/responsible_entity/producer | /shop/page/projector/product/responsible_entity/persons/person) &gt; 0)"
>
<div class="tabs__item" data-tab="projector_dictionary">
<iai:variable vid="Parametry techniczne" />
</div>
</iaixsl:if>
<!--Do pobrania-->
<iaixsl:if
test="(/shop/page/projector/product/enclosures/documents/item) or (/shop/page/projector/product/enclosures/audio/item) or (/shop/page/projector/product/enclosures/other) or (/shop/page/projector/product/enclosures/images_attachments/item) or (/shop/page/projector/product/enclosures/video/item)"
>
<div class="tabs__item" data-tab="projector_enclosures">
<iai:variable vid="Do pobrania" />
</div>
</iaixsl:if>
<!--Gwarancja-->
<iaixsl:if test="page/projector/product/warranty and not(page/projector/product/warranty= '')">
<div class="tabs__item" data-tab="projector_warranty">
<iai:variable vid="Gwarancja" />
</div>
</iaixsl:if>
<!--Pytania-->
<iaixsl:if test="page/projector/product/warranty and not(page/projector/product/warranty= '')">
<div class="tabs__item" data-tab="product_questions_list">
<iai:variable vid="Pytania" />
</div>
</iaixsl:if>
<!--Opinie-->
<div class="tabs__item" data-tab="opinions_section">
<iai:variable vid="Opinie" />
</div>
<!--Blog-->
<iaixsl:if test="count(/shop/page/projector/blog_entries/item) &gt; 0">
<div class="tabs__item" data-tab="projector_blog">
<iai:variable vid="Blog" />
</div>
</iaixsl:if>
<!--Rekomendacje 1-->
<iaixsl:if test="page/projector/products_associated_zone1">
<div class="tabs__item" data-tab="products_associated_zone1">
<iai:variable vid="Rekomendacje 1" />
</div>
</iaixsl:if>
</div>
</div>
<cdata-end/></iai:componentsdata></iai:component>

26
mobile-scrollbar/src/main.js Normal file
View File

@@ -0,0 +1,26 @@
const tabButtons = document.querySelectorAll('.tabs__item');
// Leave only necessary sections id
const sectionIds = [
'projector_longdescription',
'projector_dictionary',
'projector_enclosures',
'projector_warranty',
'product_questions_list',
'opinions_section',
'projector_blog',
'products_associated_zone1'
];
const tabContents = sectionIds.map(id => document.getElementById(id));
tabButtons.forEach(btn => {
btn.addEventListener('click', () => {
tabButtons.forEach(b => b?.classList.remove('idm-active'));
btn?.classList.add('idm-active');
tabContents.forEach(content => content?.classList.remove('idm-active'));
const tabId = btn?.dataset.tab;
document.getElementById(tabId)?.classList.add('idm-active');
});
});

112
mobile-scrollbar/src/style.less Normal file
View File

@@ -0,0 +1,112 @@
@keyframes slide-in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes slide-in-opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.tabs {
border-bottom: 3px solid #efefef;
@media(max-width: 978px) {
border: none;
}
&__container {
display: flex;
align-items: center;
gap: 1rem;
&::-webkit-scrollbar {
height: 3px;
}
&::-webkit-scrollbar-track {
background: #efefef;
border-radius: 8px;
}
&::-webkit-scrollbar-thumb {
background-color: black;
min-width: 30%;
border-radius: 8px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #2e8b57;
}
@media(max-width: 978px) {
overflow-y: hidden;
overflow-x: scroll;
}
}
&__item {
white-space: nowrap;
position: relative;
padding: 8px 12px;
cursor: pointer;
transition: color .3s ease;
color: #888;
font-weight: 600;
&:hover {
color: #000;
}
&.idm-active {
color: #000;
&::after {
display: block;
}
}
&::after {
content: "";
display: none;
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 2.5px;
background-color: black;
border-radius: 2px;
animation: slide-in .3s ease;
@media(max-width: 978px) {
display: none;
}
}
}
}
// Leave only necessary sections id
#projector_longdescription,
#projector_dictionary,
#projector_enclosures,
#projector_warranty,
#product_questions_list,
#opinions_section,
#projector_blog,
#products_associated_zone1 {
display: none;
animation: slide-in-opacity .3s ease;
padding-top: 5rem;
&.idm-active {
display: block;
}
}