libreria-astro-lefebvre 0.0.28 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -46
- package/package.json +30 -30
- package/src/carbins/AstroButton.ts +34 -34
- package/src/carbins/CTA_2025_Formentera.ts +47 -47
- package/src/carbins/Cabecera_2025_Barcelona.ts +34 -34
- package/src/carbins/Cabecera_2025_Madrid.ts +34 -34
- package/src/carbins/Contenido_2025_Alcorcon.ts +76 -76
- package/src/carbins/Contenido_2025_Cordoba.ts +59 -59
- package/src/carbins/Contenido_2025_Granada.ts +67 -67
- package/src/carbins/Contenido_2025_Malaga.ts +100 -100
- package/src/carbins/Contenido_2025_Montevideo.ts +56 -56
- package/src/carbins/Footer_2025_Napoles.ts +12 -12
- package/src/carbins/Formulario_2025_Seul.ts +56 -56
- package/src/carbins/Imagen_2025_Bogota.ts +76 -76
- package/src/carbins/ReactButton.ts +32 -32
- package/src/carbins/Repetidor_2025_Cabra.ts +12 -12
- package/src/carbins/Repetidor_2025_Dubai.ts +48 -48
- package/src/carbins/Repetidor_2025_Estocolmo.ts +12 -12
- package/src/carbins/Repetidor_2025_Mallorca.ts +75 -75
- package/src/carbins/Repetidor_2025_Menorca.ts +75 -75
- package/src/carbins/Repetidor_2025_Michigan.ts +21 -21
- package/src/carbins/Repetidor_2025_Orcasitas.ts +34 -34
- package/src/carbins/Repetidor_2025_Oslo.ts +12 -12
- package/src/carbins/Repetidor_2025_Quito.ts +20 -20
- package/src/carbins/Repetidor_2025_Seattle.ts +12 -12
- package/src/carbins/Repetidor_2025_Tokyo.ts +48 -48
- package/src/carbins/Repetidor_2025_Ubeda.ts +12 -12
- package/src/carbins/Repetidor_2025_Yakarta.ts +12 -12
- package/src/carbins/SEO_Head_Section.ts +49 -49
- package/src/carbins/Separador_2025_Reinosa.ts +12 -12
- package/src/carbins/Titulo_2025_Algeciras.ts +51 -51
- package/src/carbins/Titulo_2025_Santorini.ts +20 -20
- package/src/carbins/Video_2025_Valencia.ts +12 -12
- package/src/carbins/VueButton.ts +35 -35
- package/src/components/Astro/Button.astro +5 -5
- package/src/components/Astro/CTA_2025_Formentera.astro +38 -38
- package/src/components/Astro/Cabecera_2025_Barcelona.astro +55 -55
- package/src/components/Astro/Cabecera_2025_Madrid.astro +176 -176
- package/src/components/Astro/Contenido_2025_Alcorcon.astro +48 -78
- package/src/components/Astro/Contenido_2025_Granada.astro +239 -239
- package/src/components/Astro/Contenido_2025_Malaga.astro +162 -162
- package/src/components/Astro/Contenido_2025_Montevideo.astro +35 -35
- package/src/components/Astro/Footer_2025_Napoles.astro +134 -134
- package/src/components/Astro/Formulario_2025_Seul.astro +91 -91
- package/src/components/Astro/Imagen_2025_Bogota.astro +61 -61
- package/src/components/Astro/Repetidor_2025_Cabra.astro +152 -152
- package/src/components/Astro/Repetidor_2025_Cordoba.astro +132 -132
- package/src/components/Astro/Repetidor_2025_Dubai.astro +29 -29
- package/src/components/Astro/Repetidor_2025_Estocolmo.astro +22 -22
- package/src/components/Astro/Repetidor_2025_Mallorca.astro +42 -42
- package/src/components/Astro/Repetidor_2025_Menorca.astro +43 -43
- package/src/components/Astro/Repetidor_2025_Michigan.astro +45 -45
- package/src/components/Astro/Repetidor_2025_Orcasitas.astro +235 -235
- package/src/components/Astro/Repetidor_2025_Oslo.astro +76 -76
- package/src/components/Astro/Repetidor_2025_Quito.astro +61 -61
- package/src/components/Astro/Repetidor_2025_Seattle.astro +22 -22
- package/src/components/Astro/Repetidor_2025_Tokyo.astro +56 -56
- package/src/components/Astro/Repetidor_2025_Ubeda.astro +39 -39
- package/src/components/Astro/Repetidor_2025_Yakarta.astro +203 -203
- package/src/components/Astro/SEO_Head_Section.astro +32 -32
- package/src/components/Astro/Separador_2025_Reinosa.astro +3 -3
- package/src/components/Astro/Titulo_2025_Algeciras.astro +57 -57
- package/src/components/Astro/Titulo_2025_Santorini.astro +8 -8
- package/src/generated/componentRegistry.ts +96 -96
- package/src/index.ts +123 -123
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
---
|
|
2
|
-
import Contenido_2025_Granada from "./Contenido_2025_Granada.astro";
|
|
3
|
-
import CTA_2025_Formentera from "./CTA_2025_Formentera.astro";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const {
|
|
7
|
-
flexOrientationBlockIcoText = "flex-row",
|
|
8
|
-
flexOrientationIcoText = "flex-row",
|
|
9
|
-
positionFlex = "items-center",
|
|
10
|
-
positionBtnFlex = "justify-center",
|
|
11
|
-
headingType = 'h3',
|
|
12
|
-
items = [],
|
|
13
|
-
btnLabel = "Ver más",
|
|
14
|
-
buttonUrl = "#",
|
|
15
|
-
showBtn = false,
|
|
16
|
-
} = Astro.props;
|
|
17
|
-
|
|
18
|
-
---
|
|
19
|
-
|
|
20
|
-
<article class={`${positionFlex === 'items-center' ? 'items-center' : 'items-start'} flex flex-col justify-center mb-4`}>
|
|
21
|
-
<div class={`flex ${flexOrientationBlockIcoText} items-start flex-wrap px-6`}>
|
|
22
|
-
{items.map(item => (
|
|
23
|
-
<Contenido_2025_Granada
|
|
24
|
-
title={item.title}
|
|
25
|
-
tipo={headingType}
|
|
26
|
-
description={item.description}
|
|
27
|
-
flexOrientationBlock={flexOrientationBlockIcoText}
|
|
28
|
-
flexOrientationIcoText={flexOrientationIcoText}
|
|
29
|
-
positionFlex={positionFlex}
|
|
30
|
-
showIco={item.showIco}
|
|
31
|
-
icon={item.icon}
|
|
32
|
-
widthBlock={item.widthBlock}
|
|
33
|
-
/>
|
|
34
|
-
))}
|
|
35
|
-
</div>
|
|
36
|
-
<div class={`${positionBtnFlex === 'justify-center' ? 'justify-center' : 'justify-start'} pl-0 md:pl-[16px] lg:pl-[
|
|
37
|
-
{showBtn ? (
|
|
38
|
-
<CTA_2025_Formentera buttonText={btnLabel} buttonUrl={buttonUrl} />
|
|
39
|
-
) : (
|
|
40
|
-
<div class="flex justify-center"></div>
|
|
41
|
-
)}
|
|
42
|
-
|
|
43
|
-
</div>
|
|
1
|
+
---
|
|
2
|
+
import Contenido_2025_Granada from "./Contenido_2025_Granada.astro";
|
|
3
|
+
import CTA_2025_Formentera from "./CTA_2025_Formentera.astro";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
const {
|
|
7
|
+
flexOrientationBlockIcoText = "flex-row",
|
|
8
|
+
flexOrientationIcoText = "flex-row",
|
|
9
|
+
positionFlex = "items-center",
|
|
10
|
+
positionBtnFlex = "justify-center",
|
|
11
|
+
headingType = 'h3',
|
|
12
|
+
items = [],
|
|
13
|
+
btnLabel = "Ver más",
|
|
14
|
+
buttonUrl = "#",
|
|
15
|
+
showBtn = false,
|
|
16
|
+
} = Astro.props;
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
<article class={`${positionFlex === 'items-center' ? 'items-center' : 'items-start'} flex flex-col justify-center mb-4`}>
|
|
21
|
+
<div class={`flex ${flexOrientationBlockIcoText} items-start flex-wrap px-6`}>
|
|
22
|
+
{items.map(item => (
|
|
23
|
+
<Contenido_2025_Granada
|
|
24
|
+
title={item.title}
|
|
25
|
+
tipo={headingType}
|
|
26
|
+
description={item.description}
|
|
27
|
+
flexOrientationBlock={flexOrientationBlockIcoText}
|
|
28
|
+
flexOrientationIcoText={flexOrientationIcoText}
|
|
29
|
+
positionFlex={positionFlex}
|
|
30
|
+
showIco={item.showIco}
|
|
31
|
+
icon={item.icon}
|
|
32
|
+
widthBlock={item.widthBlock}
|
|
33
|
+
/>
|
|
34
|
+
))}
|
|
35
|
+
</div>
|
|
36
|
+
<div class={`${positionBtnFlex === 'justify-center' ? 'justify-center' : 'justify-start'} pl-0 md:pl-[16px] lg:pl-[0px] w-full flex`}>
|
|
37
|
+
{showBtn ? (
|
|
38
|
+
<CTA_2025_Formentera buttonText={btnLabel} buttonUrl={buttonUrl} />
|
|
39
|
+
) : (
|
|
40
|
+
<div class="flex justify-center"></div>
|
|
41
|
+
)}
|
|
42
|
+
|
|
43
|
+
</div>
|
|
44
44
|
</article>
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
---
|
|
2
|
-
const {
|
|
3
|
-
orientation = 'left',
|
|
4
|
-
items
|
|
5
|
-
} = Astro.props;
|
|
6
|
-
|
|
7
|
-
const structuredData = `<script type="application/ld+json">
|
|
8
|
-
{
|
|
9
|
-
"@context": "https://schema.org",
|
|
10
|
-
"@type": "ItemList",
|
|
11
|
-
"numberOfItems": ${items.length},
|
|
12
|
-
"itemListElement": [
|
|
13
|
-
${items.map((item, index) => `{
|
|
14
|
-
"@type": "ListItem",
|
|
15
|
-
"position": ${index + 1},
|
|
16
|
-
"item": {
|
|
17
|
-
"@type": "Article",
|
|
18
|
-
"name": "${item.title}",
|
|
19
|
-
"description": "${item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"')}",
|
|
20
|
-
"image": "${item.image}"
|
|
21
|
-
}
|
|
22
|
-
}`).join(',')}
|
|
23
|
-
]
|
|
24
|
-
}
|
|
25
|
-
</script>`;
|
|
26
|
-
---
|
|
27
|
-
<section class="w-full flex flex-col items-center justify-center">
|
|
28
|
-
{items.map(item => (
|
|
29
|
-
<article class="w-full flex flex-col items-center justify-center border-0 md:border-b-1 border-b-[#B6B7BB]" style={items.indexOf(item) === items.length - 1 ? 'border-bottom: none;' : ''} >
|
|
30
|
-
<div class={`flex-col flex md:${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} items-center gap-4 mb-8 md:mb-0`}>
|
|
31
|
-
<div class="w-full md:w-1/2 p-4 flex flex-col flex-wrap ">
|
|
32
|
-
<h2 class="text-[28px] md:text-[32px] leading-[36px] md:leading-[40px] mb-[24px] text-[#363942] font-poppins font-semibold">{item.title}</h2>
|
|
33
|
-
<div
|
|
34
|
-
class="text-[#363942] font-inter font-normal text-base leading-[28px] flex flex-col gap-4 md-0 md:mb-8"
|
|
35
|
-
set:html={item.description}
|
|
36
|
-
/>
|
|
37
|
-
</div>
|
|
38
|
-
<div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
|
|
39
|
-
<img src={item.image} alt={item.title} class="w-full md:w-1/2 rounded-2xl" />
|
|
40
|
-
</div>
|
|
41
|
-
</div>
|
|
42
|
-
</article>
|
|
43
|
-
))}
|
|
44
|
-
</section>
|
|
45
|
-
|
|
1
|
+
---
|
|
2
|
+
const {
|
|
3
|
+
orientation = 'left',
|
|
4
|
+
items
|
|
5
|
+
} = Astro.props;
|
|
6
|
+
|
|
7
|
+
const structuredData = `<script type="application/ld+json">
|
|
8
|
+
{
|
|
9
|
+
"@context": "https://schema.org",
|
|
10
|
+
"@type": "ItemList",
|
|
11
|
+
"numberOfItems": ${items.length},
|
|
12
|
+
"itemListElement": [
|
|
13
|
+
${items.map((item, index) => `{
|
|
14
|
+
"@type": "ListItem",
|
|
15
|
+
"position": ${index + 1},
|
|
16
|
+
"item": {
|
|
17
|
+
"@type": "Article",
|
|
18
|
+
"name": "${item.title}",
|
|
19
|
+
"description": "${item.description.replace(/<[^>]*>/g, '').replace(/"/g, '\\"')}",
|
|
20
|
+
"image": "${item.image}"
|
|
21
|
+
}
|
|
22
|
+
}`).join(',')}
|
|
23
|
+
]
|
|
24
|
+
}
|
|
25
|
+
</script>`;
|
|
26
|
+
---
|
|
27
|
+
<section class="w-full flex flex-col items-center justify-center">
|
|
28
|
+
{items.map(item => (
|
|
29
|
+
<article class="w-full flex flex-col items-center justify-center border-0 md:border-b-1 border-b-[#B6B7BB]" style={items.indexOf(item) === items.length - 1 ? 'border-bottom: none;' : ''} >
|
|
30
|
+
<div class={`flex-col flex md:${orientation === 'left' ? 'flex-row' : 'flex-row-reverse'} items-center gap-4 mb-8 md:mb-0`}>
|
|
31
|
+
<div class="w-full md:w-1/2 p-4 flex flex-col flex-wrap ">
|
|
32
|
+
<h2 class="text-[28px] md:text-[32px] leading-[36px] md:leading-[40px] mb-[24px] text-[#363942] font-poppins font-semibold">{item.title}</h2>
|
|
33
|
+
<div
|
|
34
|
+
class="text-[#363942] font-inter font-normal text-base leading-[28px] flex flex-col gap-4 md-0 md:mb-8"
|
|
35
|
+
set:html={item.description}
|
|
36
|
+
/>
|
|
37
|
+
</div>
|
|
38
|
+
<div class={`w-full md:w-1/2 p-4 flex items-center ${orientation === 'left' ? 'justify-end' : 'justify-start'}`}>
|
|
39
|
+
<img src={item.image} alt={item.title} class="w-full md:w-1/2 rounded-2xl" />
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</article>
|
|
43
|
+
))}
|
|
44
|
+
</section>
|
|
45
|
+
|
|
46
46
|
<Fragment set:html={structuredData} />
|
|
@@ -1,235 +1,235 @@
|
|
|
1
|
-
---
|
|
2
|
-
const {
|
|
3
|
-
loadScript = true,
|
|
4
|
-
items,
|
|
5
|
-
slidesToShow = 5,
|
|
6
|
-
slidesToScroll = 1,
|
|
7
|
-
} = Astro.props;
|
|
8
|
-
|
|
9
|
-
const carouselId = "glider-carousel-"+Math.floor(Math.random()*1000);
|
|
10
|
-
const buttonsId = "glider-carousel-buttons-"+Math.floor(Math.random()*1000);
|
|
11
|
-
const prevId = "glider-carousel-prev-"+Math.floor(Math.random()*1000);
|
|
12
|
-
const nextId = "glider-carousel-next-"+Math.floor(Math.random()*1000);
|
|
13
|
-
|
|
14
|
-
const randomId = Math.floor(Math.random() * 1000);
|
|
15
|
-
|
|
16
|
-
const structuredData = `<script type="application/ld+json">
|
|
17
|
-
{
|
|
18
|
-
"@context": "https://schema.org",
|
|
19
|
-
"@type": "ItemList",
|
|
20
|
-
"name": "Carousel Items",
|
|
21
|
-
"itemListElement": [
|
|
22
|
-
${items.map((item, index) => `{
|
|
23
|
-
"@type": "ListItem",
|
|
24
|
-
"position": ${index + 1},
|
|
25
|
-
"item": {
|
|
26
|
-
"@type": "${item.iframeSrc ? 'VideoObject' : 'ImageObject'}",
|
|
27
|
-
${item.iframeSrc ? `
|
|
28
|
-
"name": "${item.description ? item.description.replace(/"/g, '\\"') : ''}",
|
|
29
|
-
"description": "${item.description ? item.description.replace(/"/g, '\\"') : ''}",
|
|
30
|
-
"embedUrl": "${item.iframeSrc}",
|
|
31
|
-
"author": {
|
|
32
|
-
"@type": "Person",
|
|
33
|
-
"name": "${item.author ? item.author.replace(/"/g, '\\"') : ''}",
|
|
34
|
-
"jobTitle": "${item.positionCompany ? item.positionCompany.replace(/"/g, '\\"') : ''}"
|
|
35
|
-
}` : `
|
|
36
|
-
"contentUrl": "${item.image}",
|
|
37
|
-
"name": "${item.altImage ? item.altImage.replace(/"/g, '\\"') : ''}",
|
|
38
|
-
"description": "${item.descriptionImage ? item.descriptionImage.replace(/"/g, '\\"') : ''}"`}
|
|
39
|
-
}
|
|
40
|
-
}`).join(',')}
|
|
41
|
-
]
|
|
42
|
-
}
|
|
43
|
-
</script>`;
|
|
44
|
-
|
|
45
|
-
---
|
|
46
|
-
|
|
47
|
-
{loadScript &&
|
|
48
|
-
<div>
|
|
49
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css"/>
|
|
50
|
-
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
|
|
51
|
-
</div>
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
<style is:global>
|
|
55
|
-
.glider-track{
|
|
56
|
-
display: flex;
|
|
57
|
-
align-items: start !important;
|
|
58
|
-
}
|
|
59
|
-
.glider-dots {
|
|
60
|
-
display: none !important;
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
63
|
-
|
|
64
|
-
<div class="w-full ">
|
|
65
|
-
<div id={carouselId} class="glider w-full">
|
|
66
|
-
{items.map((item, idx) => (
|
|
67
|
-
<div class="flex flex-col items-center p-10 bg-white">
|
|
68
|
-
{item.iframeSrc ? (
|
|
69
|
-
<div class="w-full">
|
|
70
|
-
<span class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
|
|
71
|
-
<img src={item.imageSrc} class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
|
|
72
|
-
</span>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="p-6 flex-grow flex flex-col">
|
|
75
|
-
<div class="mt-2 flex items-center gap-2 flex-grow">
|
|
76
|
-
<div class="flex flex-col text-[#262626] h-full">
|
|
77
|
-
<p class="text-base font-inter font-normal leading-[24px] mb-[24px]">{item.description}</p>
|
|
78
|
-
<p class="text-[14px] font-semibold leading-[20px]">{item.author}<br />{item.positionCompany}</p>
|
|
79
|
-
</div>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
) : (
|
|
83
|
-
<img src={item.image} alt={item.altImage} class="!max-w-[250px] w-fit" />
|
|
84
|
-
<p>{item.descriptionImage}</p>
|
|
85
|
-
)}
|
|
86
|
-
</div>
|
|
87
|
-
))}
|
|
88
|
-
</div>
|
|
89
|
-
<div id={buttonsId} class="carouselGlider hidden md:flex"></div>
|
|
90
|
-
</div>
|
|
91
|
-
|
|
92
|
-
<div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
|
|
93
|
-
<div class="flex flex-col justify-center items-center w-full h-full bg-gray-100/90 p-4">
|
|
94
|
-
<div class="w-full flex justify-end">
|
|
95
|
-
<button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">X</button>
|
|
96
|
-
</div>
|
|
97
|
-
<div class="w-full h-full flex items-center justify-center">
|
|
98
|
-
<iframe
|
|
99
|
-
class="rounded-xl shadow-lg max-w-full md:max-w-3/4 aspect-video"
|
|
100
|
-
src=""
|
|
101
|
-
frameborder="0"
|
|
102
|
-
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
103
|
-
allowfullscreen=""></iframe>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
<script is:inline define:vars={{ randomId }}>
|
|
109
|
-
|
|
110
|
-
const iframePopup = document.getElementById(`popup-iframe-modal-${randomId}`);
|
|
111
|
-
document.querySelectorAll(`.popup-iframe-trigger-${randomId}`).forEach(btn => {
|
|
112
|
-
btn.addEventListener('click', (e) => {
|
|
113
|
-
const iframeSrc = btn.getAttribute('data-iframesrc');
|
|
114
|
-
iframePopup.classList.remove('hidden');
|
|
115
|
-
iframePopup.querySelector('iframe').setAttribute('src', iframeSrc);
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
iframePopup.querySelector('.js-close-popup').addEventListener('click', () => {
|
|
120
|
-
iframePopup.classList.add('hidden');
|
|
121
|
-
iframePopup.querySelector('iframe').setAttribute('src', '');
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
</script>
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
<script is:inline define:vars={{carouselId, buttonsId, prevId, nextId, slidesToShow, slidesToScroll}}>
|
|
128
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
129
|
-
|
|
130
|
-
new Glider(document.querySelector('#' + carouselId), {
|
|
131
|
-
|
|
132
|
-
// `auto` allows automatic responsive
|
|
133
|
-
// width calculations
|
|
134
|
-
slidesToShow: slidesToShow,
|
|
135
|
-
slidesToScroll: '1',
|
|
136
|
-
|
|
137
|
-
// should have been named `itemMinWidth`
|
|
138
|
-
// slides grow to fit the container viewport
|
|
139
|
-
// ignored unless `slidesToShow` is set to `auto`
|
|
140
|
-
itemWidth: undefined,
|
|
141
|
-
|
|
142
|
-
// if true, slides wont be resized to fit viewport
|
|
143
|
-
// requires `itemWidth` to be set
|
|
144
|
-
// * this may cause fractional slides
|
|
145
|
-
exactWidth: false,
|
|
146
|
-
|
|
147
|
-
// speed aggravator - higher is slower
|
|
148
|
-
duration: .5,
|
|
149
|
-
|
|
150
|
-
// dot container element or selector
|
|
151
|
-
dots: '#' + buttonsId,
|
|
152
|
-
|
|
153
|
-
// arrow container elements or selector
|
|
154
|
-
arrows: {
|
|
155
|
-
prev: '#' + prevId,
|
|
156
|
-
// may also pass element directly
|
|
157
|
-
next: '#' + nextId
|
|
158
|
-
},
|
|
159
|
-
|
|
160
|
-
// allow mouse dragging
|
|
161
|
-
draggable: true,
|
|
162
|
-
// how much to scroll with each mouse delta
|
|
163
|
-
dragVelocity: 3.3,
|
|
164
|
-
|
|
165
|
-
// use any custom easing function
|
|
166
|
-
// compatible with most easing plugins
|
|
167
|
-
easing: function (x, t, b, c, d) {
|
|
168
|
-
return c*(t/=d)*t + b;
|
|
169
|
-
},
|
|
170
|
-
|
|
171
|
-
// event control
|
|
172
|
-
scrollPropagate: false,
|
|
173
|
-
eventPropagate: true,
|
|
174
|
-
|
|
175
|
-
// Force centering slide after scroll event
|
|
176
|
-
scrollLock: false,
|
|
177
|
-
// how long to wait after scroll event before locking
|
|
178
|
-
// if too low, it might interrupt normal scrolling
|
|
179
|
-
scrollLockDelay: 150,
|
|
180
|
-
|
|
181
|
-
// Force centering slide after resize event
|
|
182
|
-
resizeLock: true,
|
|
183
|
-
|
|
184
|
-
// Glider.js breakpoints are mobile-first
|
|
185
|
-
responsive: [
|
|
186
|
-
{
|
|
187
|
-
breakpoint: 1400,
|
|
188
|
-
settings: {
|
|
189
|
-
slidesToShow: slidesToShow,
|
|
190
|
-
slidesToScroll: 1
|
|
191
|
-
}
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
breakpoint: 1200,
|
|
195
|
-
settings: {
|
|
196
|
-
slidesToShow: (slidesToShow >= 5)? slidesToShow - 1 : slidesToShow,
|
|
197
|
-
slidesToScroll: 1
|
|
198
|
-
}
|
|
199
|
-
},
|
|
200
|
-
{
|
|
201
|
-
breakpoint: 900,
|
|
202
|
-
settings: {
|
|
203
|
-
slidesToShow: 3,
|
|
204
|
-
slidesToScroll: 1
|
|
205
|
-
}
|
|
206
|
-
},
|
|
207
|
-
{
|
|
208
|
-
breakpoint: 767,
|
|
209
|
-
settings: {
|
|
210
|
-
slidesToShow: 3,
|
|
211
|
-
slidesToScroll: 3
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
|
-
{
|
|
215
|
-
breakpoint: 575,
|
|
216
|
-
settings: {
|
|
217
|
-
slidesToShow: 2,
|
|
218
|
-
slidesToScroll: 1
|
|
219
|
-
}
|
|
220
|
-
},
|
|
221
|
-
{
|
|
222
|
-
breakpoint: 0,
|
|
223
|
-
settings: {
|
|
224
|
-
slidesToShow: 1,
|
|
225
|
-
slidesToScroll: 1
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
]
|
|
229
|
-
});
|
|
230
|
-
|
|
231
|
-
});
|
|
232
|
-
</script>
|
|
233
|
-
|
|
234
|
-
<Fragment set:html={structuredData} />
|
|
235
|
-
|
|
1
|
+
---
|
|
2
|
+
const {
|
|
3
|
+
loadScript = true,
|
|
4
|
+
items,
|
|
5
|
+
slidesToShow = 5,
|
|
6
|
+
slidesToScroll = 1,
|
|
7
|
+
} = Astro.props;
|
|
8
|
+
|
|
9
|
+
const carouselId = "glider-carousel-"+Math.floor(Math.random()*1000);
|
|
10
|
+
const buttonsId = "glider-carousel-buttons-"+Math.floor(Math.random()*1000);
|
|
11
|
+
const prevId = "glider-carousel-prev-"+Math.floor(Math.random()*1000);
|
|
12
|
+
const nextId = "glider-carousel-next-"+Math.floor(Math.random()*1000);
|
|
13
|
+
|
|
14
|
+
const randomId = Math.floor(Math.random() * 1000);
|
|
15
|
+
|
|
16
|
+
const structuredData = `<script type="application/ld+json">
|
|
17
|
+
{
|
|
18
|
+
"@context": "https://schema.org",
|
|
19
|
+
"@type": "ItemList",
|
|
20
|
+
"name": "Carousel Items",
|
|
21
|
+
"itemListElement": [
|
|
22
|
+
${items.map((item, index) => `{
|
|
23
|
+
"@type": "ListItem",
|
|
24
|
+
"position": ${index + 1},
|
|
25
|
+
"item": {
|
|
26
|
+
"@type": "${item.iframeSrc ? 'VideoObject' : 'ImageObject'}",
|
|
27
|
+
${item.iframeSrc ? `
|
|
28
|
+
"name": "${item.description ? item.description.replace(/"/g, '\\"') : ''}",
|
|
29
|
+
"description": "${item.description ? item.description.replace(/"/g, '\\"') : ''}",
|
|
30
|
+
"embedUrl": "${item.iframeSrc}",
|
|
31
|
+
"author": {
|
|
32
|
+
"@type": "Person",
|
|
33
|
+
"name": "${item.author ? item.author.replace(/"/g, '\\"') : ''}",
|
|
34
|
+
"jobTitle": "${item.positionCompany ? item.positionCompany.replace(/"/g, '\\"') : ''}"
|
|
35
|
+
}` : `
|
|
36
|
+
"contentUrl": "${item.image}",
|
|
37
|
+
"name": "${item.altImage ? item.altImage.replace(/"/g, '\\"') : ''}",
|
|
38
|
+
"description": "${item.descriptionImage ? item.descriptionImage.replace(/"/g, '\\"') : ''}"`}
|
|
39
|
+
}
|
|
40
|
+
}`).join(',')}
|
|
41
|
+
]
|
|
42
|
+
}
|
|
43
|
+
</script>`;
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
{loadScript &&
|
|
48
|
+
<div>
|
|
49
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css"/>
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
|
|
51
|
+
</div>
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
<style is:global>
|
|
55
|
+
.glider-track{
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: start !important;
|
|
58
|
+
}
|
|
59
|
+
.glider-dots {
|
|
60
|
+
display: none !important;
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
63
|
+
|
|
64
|
+
<div class="w-full ">
|
|
65
|
+
<div id={carouselId} class="glider w-full">
|
|
66
|
+
{items.map((item, idx) => (
|
|
67
|
+
<div class="flex flex-col items-center p-10 bg-white">
|
|
68
|
+
{item.iframeSrc ? (
|
|
69
|
+
<div class="w-full">
|
|
70
|
+
<span class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
|
|
71
|
+
<img src={item.imageSrc} class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
|
|
72
|
+
</span>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="p-6 flex-grow flex flex-col">
|
|
75
|
+
<div class="mt-2 flex items-center gap-2 flex-grow">
|
|
76
|
+
<div class="flex flex-col text-[#262626] h-full">
|
|
77
|
+
<p class="text-base font-inter font-normal leading-[24px] mb-[24px]">{item.description}</p>
|
|
78
|
+
<p class="text-[14px] font-semibold leading-[20px]">{item.author}<br />{item.positionCompany}</p>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
) : (
|
|
83
|
+
<img src={item.image} alt={item.altImage} class="!max-w-[250px] w-fit" />
|
|
84
|
+
<p>{item.descriptionImage}</p>
|
|
85
|
+
)}
|
|
86
|
+
</div>
|
|
87
|
+
))}
|
|
88
|
+
</div>
|
|
89
|
+
<div id={buttonsId} class="carouselGlider hidden md:flex"></div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
|
|
93
|
+
<div class="flex flex-col justify-center items-center w-full h-full bg-gray-100/90 p-4">
|
|
94
|
+
<div class="w-full flex justify-end">
|
|
95
|
+
<button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">X</button>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="w-full h-full flex items-center justify-center">
|
|
98
|
+
<iframe
|
|
99
|
+
class="rounded-xl shadow-lg max-w-full md:max-w-3/4 aspect-video"
|
|
100
|
+
src=""
|
|
101
|
+
frameborder="0"
|
|
102
|
+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
103
|
+
allowfullscreen=""></iframe>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<script is:inline define:vars={{ randomId }}>
|
|
109
|
+
|
|
110
|
+
const iframePopup = document.getElementById(`popup-iframe-modal-${randomId}`);
|
|
111
|
+
document.querySelectorAll(`.popup-iframe-trigger-${randomId}`).forEach(btn => {
|
|
112
|
+
btn.addEventListener('click', (e) => {
|
|
113
|
+
const iframeSrc = btn.getAttribute('data-iframesrc');
|
|
114
|
+
iframePopup.classList.remove('hidden');
|
|
115
|
+
iframePopup.querySelector('iframe').setAttribute('src', iframeSrc);
|
|
116
|
+
});
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
iframePopup.querySelector('.js-close-popup').addEventListener('click', () => {
|
|
120
|
+
iframePopup.classList.add('hidden');
|
|
121
|
+
iframePopup.querySelector('iframe').setAttribute('src', '');
|
|
122
|
+
});
|
|
123
|
+
|
|
124
|
+
</script>
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
<script is:inline define:vars={{carouselId, buttonsId, prevId, nextId, slidesToShow, slidesToScroll}}>
|
|
128
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
129
|
+
|
|
130
|
+
new Glider(document.querySelector('#' + carouselId), {
|
|
131
|
+
|
|
132
|
+
// `auto` allows automatic responsive
|
|
133
|
+
// width calculations
|
|
134
|
+
slidesToShow: slidesToShow,
|
|
135
|
+
slidesToScroll: '1',
|
|
136
|
+
|
|
137
|
+
// should have been named `itemMinWidth`
|
|
138
|
+
// slides grow to fit the container viewport
|
|
139
|
+
// ignored unless `slidesToShow` is set to `auto`
|
|
140
|
+
itemWidth: undefined,
|
|
141
|
+
|
|
142
|
+
// if true, slides wont be resized to fit viewport
|
|
143
|
+
// requires `itemWidth` to be set
|
|
144
|
+
// * this may cause fractional slides
|
|
145
|
+
exactWidth: false,
|
|
146
|
+
|
|
147
|
+
// speed aggravator - higher is slower
|
|
148
|
+
duration: .5,
|
|
149
|
+
|
|
150
|
+
// dot container element or selector
|
|
151
|
+
dots: '#' + buttonsId,
|
|
152
|
+
|
|
153
|
+
// arrow container elements or selector
|
|
154
|
+
arrows: {
|
|
155
|
+
prev: '#' + prevId,
|
|
156
|
+
// may also pass element directly
|
|
157
|
+
next: '#' + nextId
|
|
158
|
+
},
|
|
159
|
+
|
|
160
|
+
// allow mouse dragging
|
|
161
|
+
draggable: true,
|
|
162
|
+
// how much to scroll with each mouse delta
|
|
163
|
+
dragVelocity: 3.3,
|
|
164
|
+
|
|
165
|
+
// use any custom easing function
|
|
166
|
+
// compatible with most easing plugins
|
|
167
|
+
easing: function (x, t, b, c, d) {
|
|
168
|
+
return c*(t/=d)*t + b;
|
|
169
|
+
},
|
|
170
|
+
|
|
171
|
+
// event control
|
|
172
|
+
scrollPropagate: false,
|
|
173
|
+
eventPropagate: true,
|
|
174
|
+
|
|
175
|
+
// Force centering slide after scroll event
|
|
176
|
+
scrollLock: false,
|
|
177
|
+
// how long to wait after scroll event before locking
|
|
178
|
+
// if too low, it might interrupt normal scrolling
|
|
179
|
+
scrollLockDelay: 150,
|
|
180
|
+
|
|
181
|
+
// Force centering slide after resize event
|
|
182
|
+
resizeLock: true,
|
|
183
|
+
|
|
184
|
+
// Glider.js breakpoints are mobile-first
|
|
185
|
+
responsive: [
|
|
186
|
+
{
|
|
187
|
+
breakpoint: 1400,
|
|
188
|
+
settings: {
|
|
189
|
+
slidesToShow: slidesToShow,
|
|
190
|
+
slidesToScroll: 1
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
breakpoint: 1200,
|
|
195
|
+
settings: {
|
|
196
|
+
slidesToShow: (slidesToShow >= 5)? slidesToShow - 1 : slidesToShow,
|
|
197
|
+
slidesToScroll: 1
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
{
|
|
201
|
+
breakpoint: 900,
|
|
202
|
+
settings: {
|
|
203
|
+
slidesToShow: 3,
|
|
204
|
+
slidesToScroll: 1
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
breakpoint: 767,
|
|
209
|
+
settings: {
|
|
210
|
+
slidesToShow: 3,
|
|
211
|
+
slidesToScroll: 3
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
breakpoint: 575,
|
|
216
|
+
settings: {
|
|
217
|
+
slidesToShow: 2,
|
|
218
|
+
slidesToScroll: 1
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
breakpoint: 0,
|
|
223
|
+
settings: {
|
|
224
|
+
slidesToShow: 1,
|
|
225
|
+
slidesToScroll: 1
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
]
|
|
229
|
+
});
|
|
230
|
+
|
|
231
|
+
});
|
|
232
|
+
</script>
|
|
233
|
+
|
|
234
|
+
<Fragment set:html={structuredData} />
|
|
235
|
+
|