libreria-astro-lefebvre 0.0.29 → 0.0.31
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/package.json
CHANGED
|
@@ -1,235 +1,237 @@
|
|
|
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
|
-
"
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
</div>
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
//
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
//
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
//
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
//
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
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
|
+
"thumbnailUrl": "${item.thumbnailUrl}",
|
|
31
|
+
"embedUrl": "${item.iframeSrc}",
|
|
32
|
+
"uploadDate": "${item.uploadDate}",
|
|
33
|
+
"author": {
|
|
34
|
+
"@type": "Person",
|
|
35
|
+
"name": "${item.author ? item.author.replace(/"/g, '\\"') : ''}",
|
|
36
|
+
"jobTitle": "${item.positionCompany ? item.positionCompany.replace(/"/g, '\\"') : ''}"
|
|
37
|
+
}` : `
|
|
38
|
+
"contentUrl": "${item.image}",
|
|
39
|
+
"name": "${item.altImage ? item.altImage.replace(/"/g, '\\"') : ''}",
|
|
40
|
+
"description": "${item.descriptionImage ? item.descriptionImage.replace(/"/g, '\\"') : ''}"`}
|
|
41
|
+
}
|
|
42
|
+
}`).join(',')}
|
|
43
|
+
]
|
|
44
|
+
}
|
|
45
|
+
</script>`;
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
{loadScript &&
|
|
50
|
+
<div>
|
|
51
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css"/>
|
|
52
|
+
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
|
|
53
|
+
</div>
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
<style is:global>
|
|
57
|
+
.glider-track{
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: start !important;
|
|
60
|
+
}
|
|
61
|
+
.glider-dots {
|
|
62
|
+
display: none !important;
|
|
63
|
+
}
|
|
64
|
+
</style>
|
|
65
|
+
|
|
66
|
+
<div class="w-full ">
|
|
67
|
+
<div id={carouselId} class="glider w-full">
|
|
68
|
+
{items.map((item, idx) => (
|
|
69
|
+
<div class="flex flex-col items-center p-10 bg-white">
|
|
70
|
+
{item.iframeSrc ? (
|
|
71
|
+
<div class="w-full">
|
|
72
|
+
<span class={`popup-iframe-trigger-${randomId} cursor-pointer`} data-iframesrc={item.iframeSrc}>
|
|
73
|
+
<img src={item.imageSrc} class="w-full h-full rounded-2xl p-2 transition-transform hover:scale-105 cursor-pointer"/>
|
|
74
|
+
</span>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="p-6 flex-grow flex flex-col">
|
|
77
|
+
<div class="mt-2 flex items-center gap-2 flex-grow">
|
|
78
|
+
<div class="flex flex-col text-[#262626] h-full">
|
|
79
|
+
<p class="text-base font-inter font-normal leading-[24px] mb-[24px]">{item.description}</p>
|
|
80
|
+
<p class="text-[14px] font-semibold leading-[20px]">{item.author}<br />{item.positionCompany}</p>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
) : (
|
|
85
|
+
<img src={item.image} alt={item.altImage} class="!max-w-[250px] w-fit" />
|
|
86
|
+
<p>{item.descriptionImage}</p>
|
|
87
|
+
)}
|
|
88
|
+
</div>
|
|
89
|
+
))}
|
|
90
|
+
</div>
|
|
91
|
+
<div id={buttonsId} class="carouselGlider hidden md:flex"></div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div id={"popup-iframe-modal-" + randomId } class="fixed w-full h-full top-0 left-0 z-9999 hidden">
|
|
95
|
+
<div class="flex flex-col justify-center items-center w-full h-full bg-gray-100/90 p-4">
|
|
96
|
+
<div class="w-full flex justify-end">
|
|
97
|
+
<button class="js-close-popup w-auto m-4 p-2 bg-white rounded transition-transform hover:scale-125 cursor-pointer">X</button>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="w-full h-full flex items-center justify-center">
|
|
100
|
+
<iframe
|
|
101
|
+
class="rounded-xl shadow-lg max-w-full md:max-w-3/4 aspect-video"
|
|
102
|
+
src=""
|
|
103
|
+
frameborder="0"
|
|
104
|
+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
105
|
+
allowfullscreen=""></iframe>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<script is:inline define:vars={{ randomId }}>
|
|
111
|
+
|
|
112
|
+
const iframePopup = document.getElementById(`popup-iframe-modal-${randomId}`);
|
|
113
|
+
document.querySelectorAll(`.popup-iframe-trigger-${randomId}`).forEach(btn => {
|
|
114
|
+
btn.addEventListener('click', (e) => {
|
|
115
|
+
const iframeSrc = btn.getAttribute('data-iframesrc');
|
|
116
|
+
iframePopup.classList.remove('hidden');
|
|
117
|
+
iframePopup.querySelector('iframe').setAttribute('src', iframeSrc);
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
iframePopup.querySelector('.js-close-popup').addEventListener('click', () => {
|
|
122
|
+
iframePopup.classList.add('hidden');
|
|
123
|
+
iframePopup.querySelector('iframe').setAttribute('src', '');
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
</script>
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
<script is:inline define:vars={{carouselId, buttonsId, prevId, nextId, slidesToShow, slidesToScroll}}>
|
|
130
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
131
|
+
|
|
132
|
+
new Glider(document.querySelector('#' + carouselId), {
|
|
133
|
+
|
|
134
|
+
// `auto` allows automatic responsive
|
|
135
|
+
// width calculations
|
|
136
|
+
slidesToShow: slidesToShow,
|
|
137
|
+
slidesToScroll: '1',
|
|
138
|
+
|
|
139
|
+
// should have been named `itemMinWidth`
|
|
140
|
+
// slides grow to fit the container viewport
|
|
141
|
+
// ignored unless `slidesToShow` is set to `auto`
|
|
142
|
+
itemWidth: undefined,
|
|
143
|
+
|
|
144
|
+
// if true, slides wont be resized to fit viewport
|
|
145
|
+
// requires `itemWidth` to be set
|
|
146
|
+
// * this may cause fractional slides
|
|
147
|
+
exactWidth: false,
|
|
148
|
+
|
|
149
|
+
// speed aggravator - higher is slower
|
|
150
|
+
duration: .5,
|
|
151
|
+
|
|
152
|
+
// dot container element or selector
|
|
153
|
+
dots: '#' + buttonsId,
|
|
154
|
+
|
|
155
|
+
// arrow container elements or selector
|
|
156
|
+
arrows: {
|
|
157
|
+
prev: '#' + prevId,
|
|
158
|
+
// may also pass element directly
|
|
159
|
+
next: '#' + nextId
|
|
160
|
+
},
|
|
161
|
+
|
|
162
|
+
// allow mouse dragging
|
|
163
|
+
draggable: true,
|
|
164
|
+
// how much to scroll with each mouse delta
|
|
165
|
+
dragVelocity: 3.3,
|
|
166
|
+
|
|
167
|
+
// use any custom easing function
|
|
168
|
+
// compatible with most easing plugins
|
|
169
|
+
easing: function (x, t, b, c, d) {
|
|
170
|
+
return c*(t/=d)*t + b;
|
|
171
|
+
},
|
|
172
|
+
|
|
173
|
+
// event control
|
|
174
|
+
scrollPropagate: false,
|
|
175
|
+
eventPropagate: true,
|
|
176
|
+
|
|
177
|
+
// Force centering slide after scroll event
|
|
178
|
+
scrollLock: false,
|
|
179
|
+
// how long to wait after scroll event before locking
|
|
180
|
+
// if too low, it might interrupt normal scrolling
|
|
181
|
+
scrollLockDelay: 150,
|
|
182
|
+
|
|
183
|
+
// Force centering slide after resize event
|
|
184
|
+
resizeLock: true,
|
|
185
|
+
|
|
186
|
+
// Glider.js breakpoints are mobile-first
|
|
187
|
+
responsive: [
|
|
188
|
+
{
|
|
189
|
+
breakpoint: 1400,
|
|
190
|
+
settings: {
|
|
191
|
+
slidesToShow: slidesToShow,
|
|
192
|
+
slidesToScroll: 1
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
breakpoint: 1200,
|
|
197
|
+
settings: {
|
|
198
|
+
slidesToShow: (slidesToShow >= 5)? slidesToShow - 1 : slidesToShow,
|
|
199
|
+
slidesToScroll: 1
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
breakpoint: 900,
|
|
204
|
+
settings: {
|
|
205
|
+
slidesToShow: 3,
|
|
206
|
+
slidesToScroll: 1
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
breakpoint: 767,
|
|
211
|
+
settings: {
|
|
212
|
+
slidesToShow: 3,
|
|
213
|
+
slidesToScroll: 3
|
|
214
|
+
}
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
breakpoint: 575,
|
|
218
|
+
settings: {
|
|
219
|
+
slidesToShow: 2,
|
|
220
|
+
slidesToScroll: 1
|
|
221
|
+
}
|
|
222
|
+
},
|
|
223
|
+
{
|
|
224
|
+
breakpoint: 0,
|
|
225
|
+
settings: {
|
|
226
|
+
slidesToShow: 1,
|
|
227
|
+
slidesToScroll: 1
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
]
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
});
|
|
234
|
+
</script>
|
|
235
|
+
|
|
236
|
+
<Fragment set:html={structuredData} />
|
|
237
|
+
|
|
@@ -29,7 +29,6 @@ const structuredData = `<script type="application/ld+json">
|
|
|
29
29
|
"contentUrl": "${item.iframeSrc || ''}",
|
|
30
30
|
"embedUrl": "${item.iframeSrc || ''}",
|
|
31
31
|
"uploadDate": "${new Date().toISOString()}",
|
|
32
|
-
"duration": "PT0M",
|
|
33
32
|
"interactionStatistic": {
|
|
34
33
|
"@type": "InteractionCounter",
|
|
35
34
|
"interactionType": "https://schema.org/WatchAction",
|
|
@@ -29,7 +29,6 @@ const structuredData = `<script type="application/ld+json">
|
|
|
29
29
|
"contentUrl": "${item.iframeSrc || ''}",
|
|
30
30
|
"embedUrl": "${item.iframeSrc || ''}",
|
|
31
31
|
"uploadDate": "${new Date().toISOString()}",
|
|
32
|
-
"duration": "PT0M",
|
|
33
32
|
"interactionStatistic": {
|
|
34
33
|
"@type": "InteractionCounter",
|
|
35
34
|
"interactionType": "https://schema.org/WatchAction",
|