@brunoalz/smartgesti-site-editor 1.10.2 → 1.11.0
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/dist/engine/export/exporters/sections/ImageGalleryExporter.d.ts.map +1 -1
- package/dist/engine/export/exporters/sections/ImageGalleryExporter.js +405 -123
- package/dist/engine/export/exporters/sections/ImageGalleryExporter.js.map +1 -1
- package/dist/engine/registry/blocks/sections/imageGallery.d.ts.map +1 -1
- package/dist/engine/registry/blocks/sections/imageGallery.js +10 -2
- package/dist/engine/registry/blocks/sections/imageGallery.js.map +1 -1
- package/dist/engine/render/renderers/sections/ImageGalleryRenderer.d.ts.map +1 -1
- package/dist/engine/render/renderers/sections/ImageGalleryRenderer.js +391 -84
- package/dist/engine/render/renderers/sections/ImageGalleryRenderer.js.map +1 -1
- package/dist/engine/schema/siteDocument.d.ts +5 -1
- package/dist/engine/schema/siteDocument.d.ts.map +1 -1
- package/dist/engine/schema/siteDocument.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageGalleryExporter.d.ts","sourceRoot":"","sources":["../../../../../src/engine/export/exporters/sections/ImageGalleryExporter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAgC,MAAM,8BAA8B,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageGalleryExporter.d.ts","sourceRoot":"","sources":["../../../../../src/engine/export/exporters/sections/ImageGalleryExporter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAgC,MAAM,8BAA8B,CAAC;AACxF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAo/C/D,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,MAAM,CAoDjH"}
|
|
@@ -1,8 +1,165 @@
|
|
|
1
|
-
import { escapeHtml as
|
|
2
|
-
import { generateScopedId as
|
|
3
|
-
import { imageShadowMap as
|
|
4
|
-
function
|
|
5
|
-
|
|
1
|
+
import { escapeHtml as r, dataBlockIdAttr as O, blockIdAttr as D } from "../../shared/htmlHelpers.js";
|
|
2
|
+
import { generateScopedId as A } from "../../shared/idGenerator.js";
|
|
3
|
+
import { imageShadowMap as Z } from "../../../shared/shadowConstants.js";
|
|
4
|
+
function G(t, g, e, x) {
|
|
5
|
+
let a = "";
|
|
6
|
+
return e === "gallery-masonry" ? a = `
|
|
7
|
+
/* Masonry layout */
|
|
8
|
+
#${t} .sg-ig-masonry {
|
|
9
|
+
column-gap: ${x}rem;
|
|
10
|
+
}
|
|
11
|
+
#${t} .sg-ig-masonry .sg-ig-item {
|
|
12
|
+
break-inside: avoid;
|
|
13
|
+
display: inline-block;
|
|
14
|
+
width: 100%;
|
|
15
|
+
}
|
|
16
|
+
@media (max-width: 1024px) {
|
|
17
|
+
#${t} .sg-ig-masonry { column-count: 3 !important; }
|
|
18
|
+
}
|
|
19
|
+
@media (max-width: 768px) {
|
|
20
|
+
#${t} .sg-ig-masonry { column-count: 2 !important; }
|
|
21
|
+
}
|
|
22
|
+
@media (max-width: 640px) {
|
|
23
|
+
#${t} .sg-ig-masonry { column-count: 1 !important; }
|
|
24
|
+
}` : e === "gallery-featured" ? a = `
|
|
25
|
+
/* Featured layout */
|
|
26
|
+
#${t} .sg-ig-featured-main {
|
|
27
|
+
width: 100%;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
transition: all 0.3s ease;
|
|
31
|
+
}
|
|
32
|
+
#${t} .sg-ig-featured-main img {
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
object-fit: cover;
|
|
36
|
+
display: block;
|
|
37
|
+
transition: transform 0.3s ease;
|
|
38
|
+
}
|
|
39
|
+
#${t} .sg-ig-featured-grid {
|
|
40
|
+
display: grid;
|
|
41
|
+
}
|
|
42
|
+
@media (max-width: 768px) {
|
|
43
|
+
#${t} .sg-ig-featured-grid {
|
|
44
|
+
grid-template-columns: repeat(2, 1fr) !important;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
@media (max-width: 640px) {
|
|
48
|
+
#${t} .sg-ig-featured-grid {
|
|
49
|
+
grid-template-columns: 1fr !important;
|
|
50
|
+
}
|
|
51
|
+
}` : e === "gallery-carousel" ? a = `
|
|
52
|
+
/* Carousel layout */
|
|
53
|
+
#${t} .sg-ig-carousel { position: relative; }
|
|
54
|
+
#${t} .sg-ig-carousel-track {
|
|
55
|
+
display: flex;
|
|
56
|
+
overflow-x: hidden;
|
|
57
|
+
scroll-snap-type: x mandatory;
|
|
58
|
+
scroll-behavior: smooth;
|
|
59
|
+
}
|
|
60
|
+
#${t} .sg-ig-carousel-slide {
|
|
61
|
+
flex: 0 0 100%;
|
|
62
|
+
scroll-snap-align: start;
|
|
63
|
+
position: relative;
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
#${t} .sg-ig-carousel-slide img {
|
|
68
|
+
width: 100%;
|
|
69
|
+
height: 100%;
|
|
70
|
+
object-fit: cover;
|
|
71
|
+
display: block;
|
|
72
|
+
}
|
|
73
|
+
#${t} .sg-ig-carousel-caption {
|
|
74
|
+
position: absolute;
|
|
75
|
+
bottom: 0; left: 0; right: 0;
|
|
76
|
+
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
|
77
|
+
padding: 2rem 1.5rem 1.5rem;
|
|
78
|
+
color: white;
|
|
79
|
+
}
|
|
80
|
+
#${t} .sg-ig-carousel-caption-title {
|
|
81
|
+
font-size: 1.25rem;
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
margin-bottom: 0.25rem;
|
|
84
|
+
}
|
|
85
|
+
#${t} .sg-ig-carousel-caption-desc {
|
|
86
|
+
font-size: 0.875rem;
|
|
87
|
+
opacity: 0.9;
|
|
88
|
+
}
|
|
89
|
+
#${t} .sg-ig-carousel-nav {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 50%;
|
|
92
|
+
transform: translateY(-50%);
|
|
93
|
+
background: rgba(0,0,0,0.5);
|
|
94
|
+
color: white;
|
|
95
|
+
border: none;
|
|
96
|
+
border-radius: 50%;
|
|
97
|
+
width: 40px; height: 40px;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
cursor: pointer;
|
|
102
|
+
z-index: 2;
|
|
103
|
+
transition: opacity 0.2s;
|
|
104
|
+
}
|
|
105
|
+
#${t} .sg-ig-carousel-nav--prev { left: 1rem; }
|
|
106
|
+
#${t} .sg-ig-carousel-nav--next { right: 1rem; }
|
|
107
|
+
#${t} .sg-ig-carousel-nav:disabled { opacity: 0.3; cursor: not-allowed; }
|
|
108
|
+
#${t} .sg-ig-dots {
|
|
109
|
+
display: flex;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
gap: 0.5rem;
|
|
112
|
+
margin-top: 1rem;
|
|
113
|
+
}
|
|
114
|
+
#${t} .sg-ig-dot {
|
|
115
|
+
height: 0.5rem;
|
|
116
|
+
border-radius: 999px;
|
|
117
|
+
border: none;
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
padding: 0;
|
|
120
|
+
transition: all 0.3s ease;
|
|
121
|
+
}
|
|
122
|
+
#${t} .sg-ig-dot--active {
|
|
123
|
+
width: 2rem;
|
|
124
|
+
background: var(--sg-primary, #3b82f6);
|
|
125
|
+
}
|
|
126
|
+
#${t} .sg-ig-dot--inactive {
|
|
127
|
+
width: 0.5rem;
|
|
128
|
+
background: var(--sg-muted-text, #d1d5db);
|
|
129
|
+
}` : e === "gallery-alternating" && (a = `
|
|
130
|
+
/* Alternating layout */
|
|
131
|
+
#${t} .sg-ig-alt-row {
|
|
132
|
+
display: grid;
|
|
133
|
+
grid-template-columns: 1fr 1fr;
|
|
134
|
+
align-items: center;
|
|
135
|
+
}
|
|
136
|
+
#${t} .sg-ig-alt-row--reverse {
|
|
137
|
+
direction: rtl;
|
|
138
|
+
}
|
|
139
|
+
#${t} .sg-ig-alt-row--reverse > * {
|
|
140
|
+
direction: ltr;
|
|
141
|
+
}
|
|
142
|
+
#${t} .sg-ig-alt-text {
|
|
143
|
+
padding: 1rem;
|
|
144
|
+
}
|
|
145
|
+
#${t} .sg-ig-alt-text h3 {
|
|
146
|
+
font-size: var(--sg-heading-h3, 1.5rem);
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
margin: 0 0 0.75rem;
|
|
149
|
+
color: var(--sg-heading, var(--sg-text));
|
|
150
|
+
}
|
|
151
|
+
#${t} .sg-ig-alt-text p {
|
|
152
|
+
font-size: 1rem;
|
|
153
|
+
line-height: 1.6;
|
|
154
|
+
color: var(--sg-muted-text, #6b7280);
|
|
155
|
+
margin: 0;
|
|
156
|
+
}
|
|
157
|
+
@media (max-width: 768px) {
|
|
158
|
+
#${t} .sg-ig-alt-row {
|
|
159
|
+
grid-template-columns: 1fr !important;
|
|
160
|
+
direction: ltr !important;
|
|
161
|
+
}
|
|
162
|
+
}`), `
|
|
6
163
|
/* Gallery base */
|
|
7
164
|
#${t} .sg-ig-header { text-align: center; margin-bottom: 2rem; }
|
|
8
165
|
#${t} .sg-ig-header h2 {
|
|
@@ -143,7 +300,7 @@ function M(t, i) {
|
|
|
143
300
|
|
|
144
301
|
/* Responsive Grid */
|
|
145
302
|
@media (max-width: 1024px) {
|
|
146
|
-
#${t} .sg-ig-grid--cols-${
|
|
303
|
+
#${t} .sg-ig-grid--cols-${g >= 4 ? "4" : "x"} {
|
|
147
304
|
grid-template-columns: repeat(3, 1fr) !important;
|
|
148
305
|
}
|
|
149
306
|
}
|
|
@@ -158,9 +315,10 @@ function M(t, i) {
|
|
|
158
315
|
grid-template-columns: 1fr !important;
|
|
159
316
|
}
|
|
160
317
|
}
|
|
318
|
+
${a}
|
|
161
319
|
`.trim();
|
|
162
320
|
}
|
|
163
|
-
function
|
|
321
|
+
function j(t) {
|
|
164
322
|
return `
|
|
165
323
|
/* Lightbox */
|
|
166
324
|
#${t} .sg-lb {
|
|
@@ -342,38 +500,39 @@ function O(t) {
|
|
|
342
500
|
}
|
|
343
501
|
`.trim();
|
|
344
502
|
}
|
|
345
|
-
function
|
|
503
|
+
function q(t, g, e, x) {
|
|
346
504
|
const {
|
|
347
505
|
title: a,
|
|
348
|
-
subtitle:
|
|
349
|
-
columns:
|
|
350
|
-
gap:
|
|
351
|
-
aspectRatio:
|
|
352
|
-
imageBorderRadius:
|
|
353
|
-
imageShadow:
|
|
354
|
-
hoverEffect:
|
|
355
|
-
enterAnimation:
|
|
356
|
-
lazyLoad:
|
|
357
|
-
showWarningAt:
|
|
358
|
-
bg:
|
|
359
|
-
|
|
506
|
+
subtitle: p,
|
|
507
|
+
columns: h,
|
|
508
|
+
gap: c,
|
|
509
|
+
aspectRatio: $,
|
|
510
|
+
imageBorderRadius: m,
|
|
511
|
+
imageShadow: I,
|
|
512
|
+
hoverEffect: d,
|
|
513
|
+
enterAnimation: w,
|
|
514
|
+
lazyLoad: b,
|
|
515
|
+
showWarningAt: T,
|
|
516
|
+
bg: S,
|
|
517
|
+
variation: v = "gallery-grid"
|
|
518
|
+
} = x, L = Z[I] || "none";
|
|
519
|
+
let s = "";
|
|
520
|
+
w === "fade-scale" ? s = "sg-ig-grid--fade-scale" : w === "stagger" ? s = "sg-ig-grid--stagger" : w === "slide-up" && (s = "sg-ig-grid--slide-up");
|
|
360
521
|
let f = "";
|
|
361
|
-
|
|
362
|
-
let
|
|
363
|
-
|
|
364
|
-
let
|
|
365
|
-
|
|
366
|
-
let o = "";
|
|
367
|
-
if (e.length > v && (o = `
|
|
522
|
+
d === "zoom-overlay" ? f = "sg-ig-item--zoom-overlay" : d === "glow" ? f = "sg-ig-item--glow" : d === "scale" ? f = "sg-ig-item--scale" : d === "caption-reveal" && (f = "sg-ig-item--caption-reveal");
|
|
523
|
+
let l = "";
|
|
524
|
+
(a || p) && (l = '<div class="sg-ig-header">', a && (l += `<h2>${r(a)}</h2>`), p && (l += `<p>${r(p)}</p>`), l += "</div>");
|
|
525
|
+
let y = "";
|
|
526
|
+
if (e.length > T && (y = `
|
|
368
527
|
<div class="sg-ig-warning">
|
|
369
528
|
<strong>Atenção:</strong> Esta galeria possui ${e.length} imagens.
|
|
370
529
|
Para melhor performance, considere reduzir o número de imagens.
|
|
371
530
|
</div>`), e.length === 0)
|
|
372
531
|
return `
|
|
373
|
-
<section ${
|
|
374
|
-
style="padding: var(--sg-section-padding-md, 3rem 0); background-color: ${
|
|
532
|
+
<section ${O(g)} ${D(g)} data-block-group="Galeria"
|
|
533
|
+
style="padding: var(--sg-section-padding-md, 3rem 0); background-color: ${r(S || "transparent")};">
|
|
375
534
|
<div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
|
|
376
|
-
${
|
|
535
|
+
${l}
|
|
377
536
|
<div class="sg-ig-empty">
|
|
378
537
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
379
538
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
@@ -384,94 +543,174 @@ function D(t, i, e, y) {
|
|
|
384
543
|
</div>
|
|
385
544
|
</div>
|
|
386
545
|
</section>`;
|
|
387
|
-
|
|
388
|
-
let
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
let
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
546
|
+
function M(i, o, u) {
|
|
547
|
+
let k = "";
|
|
548
|
+
d === "zoom-overlay" && (k = `
|
|
549
|
+
<div class="sg-ig-overlay">
|
|
550
|
+
<svg style="width:3rem;height:3rem;color:white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
551
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
552
|
+
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
|
|
553
|
+
</svg>
|
|
554
|
+
</div>`);
|
|
555
|
+
let n = "";
|
|
556
|
+
d === "caption-reveal" && (i.title || i.description) && (n = '<div class="sg-ig-caption">', i.title && (n += `<div class="sg-ig-caption-title">${r(i.title)}</div>`), i.description && (n += `<div class="sg-ig-caption-desc">${r(i.description)}</div>`), n += "</div>");
|
|
557
|
+
const z = `border-radius: ${m}px; aspect-ratio: ${$ || "auto"}; box-shadow: ${L};`;
|
|
558
|
+
return `
|
|
559
|
+
<div class="sg-ig-item ${f}"
|
|
560
|
+
data-gallery-index="${o}"
|
|
561
|
+
role="button" tabindex="0"
|
|
562
|
+
aria-label="Ver imagem: ${r(i.alt)}"
|
|
563
|
+
style="${z}">
|
|
564
|
+
<img src="${r(i.src)}"
|
|
565
|
+
alt="${r(i.alt)}"
|
|
566
|
+
${b ? 'loading="lazy"' : 'loading="eager"'} />
|
|
567
|
+
${k}${n}
|
|
568
|
+
</div>`;
|
|
569
|
+
}
|
|
570
|
+
const E = Y(t, e, x.lightbox);
|
|
571
|
+
let C = "";
|
|
572
|
+
if (v === "gallery-masonry") {
|
|
573
|
+
const i = e.map((o, u) => `<div style="break-inside: avoid; margin-bottom: ${c}rem;">${M(o, u)}</div>`).join("");
|
|
574
|
+
C = `
|
|
575
|
+
<div class="sg-ig-masonry" style="column-count: ${h};">
|
|
576
|
+
${i}
|
|
577
|
+
</div>`;
|
|
578
|
+
} else if (v === "gallery-featured") {
|
|
579
|
+
const i = Math.max(2, h), o = e[0], u = e.slice(1);
|
|
580
|
+
let k = "";
|
|
581
|
+
d === "zoom-overlay" && (k = `
|
|
582
|
+
<div class="sg-ig-overlay">
|
|
583
|
+
<svg style="width:3rem;height:3rem;color:white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
584
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
585
|
+
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7" />
|
|
586
|
+
</svg>
|
|
587
|
+
</div>`);
|
|
588
|
+
const n = `
|
|
589
|
+
<div class="sg-ig-featured-main ${f}"
|
|
590
|
+
data-gallery-index="0"
|
|
591
|
+
role="button" tabindex="0"
|
|
592
|
+
aria-label="Ver imagem: ${r(o.alt)}"
|
|
593
|
+
style="border-radius: ${m}px; aspect-ratio: 16/9; box-shadow: ${L}; position: relative;">
|
|
594
|
+
<img src="${r(o.src)}"
|
|
595
|
+
alt="${r(o.alt)}"
|
|
596
|
+
${b ? 'loading="lazy"' : 'loading="eager"'}
|
|
597
|
+
style="border-radius: ${m}px;" />
|
|
598
|
+
${k}
|
|
599
|
+
</div>`, B = u.map((H, P) => M(H, P + 1)).join(""), z = u.length > 0 ? `<div class="sg-ig-featured-grid" style="grid-template-columns: repeat(${i}, 1fr); gap: ${c}rem; margin-top: ${c}rem;">
|
|
600
|
+
${B}
|
|
601
|
+
</div>` : "";
|
|
602
|
+
C = `${n}${z}`;
|
|
603
|
+
} else if (v === "gallery-carousel") {
|
|
604
|
+
const i = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>', o = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>', u = e.map((n, B) => {
|
|
605
|
+
let z = "";
|
|
606
|
+
return (n.title || n.description) && (z = '<div class="sg-ig-carousel-caption">', n.title && (z += `<div class="sg-ig-carousel-caption-title">${r(n.title)}</div>`), n.description && (z += `<div class="sg-ig-carousel-caption-desc">${r(n.description)}</div>`), z += "</div>"), `
|
|
607
|
+
<div class="sg-ig-carousel-slide"
|
|
608
|
+
data-gallery-index="${B}"
|
|
609
|
+
role="button" tabindex="0"
|
|
610
|
+
aria-label="Ver imagem: ${r(n.alt)}"
|
|
611
|
+
style="aspect-ratio: 16/9;">
|
|
612
|
+
<img src="${r(n.src)}"
|
|
613
|
+
alt="${r(n.alt)}"
|
|
614
|
+
${b && B > 0 ? 'loading="lazy"' : 'loading="eager"'} />
|
|
615
|
+
${z}
|
|
616
|
+
</div>`;
|
|
617
|
+
}).join(""), k = e.map((n, B) => `<button class="sg-ig-dot ${B === 0 ? "sg-ig-dot--active" : "sg-ig-dot--inactive"}" aria-label="Ir para imagem ${B + 1}"></button>`).join("");
|
|
618
|
+
C = `
|
|
619
|
+
<div class="sg-ig-carousel">
|
|
620
|
+
<div class="sg-ig-carousel-track" style="border-radius: ${m}px;">
|
|
621
|
+
${u}
|
|
622
|
+
</div>
|
|
623
|
+
${e.length > 1 ? `
|
|
624
|
+
<button class="sg-ig-carousel-nav sg-ig-carousel-nav--prev" aria-label="Anterior" style="opacity: 0.3;" disabled>${i}</button>
|
|
625
|
+
<button class="sg-ig-carousel-nav sg-ig-carousel-nav--next" aria-label="Próxima">${o}</button>
|
|
626
|
+
<div class="sg-ig-dots">
|
|
627
|
+
${k}
|
|
628
|
+
</div>
|
|
629
|
+
` : ""}
|
|
630
|
+
</div>`;
|
|
631
|
+
} else if (v === "gallery-alternating")
|
|
632
|
+
C = e.map((i, o) => {
|
|
633
|
+
const u = o % 2 === 1 ? "sg-ig-alt-row--reverse" : "", k = i.title ? r(i.title) : "Imagem " + (o + 1), n = i.description ? r(i.description) : "";
|
|
634
|
+
return `
|
|
635
|
+
<div class="sg-ig-alt-row ${u}" style="gap: ${c}rem; margin-bottom: ${c * 2}rem;">
|
|
636
|
+
${M(i, o)}
|
|
637
|
+
<div class="sg-ig-alt-text">
|
|
638
|
+
<h3>${k}</h3>
|
|
639
|
+
${n ? `<p>${n}</p>` : ""}
|
|
640
|
+
</div>
|
|
641
|
+
</div>`;
|
|
642
|
+
}).join("");
|
|
643
|
+
else {
|
|
644
|
+
const i = e.map((o, u) => M(o, u)).join("");
|
|
645
|
+
C = `
|
|
646
|
+
<div class="sg-ig-grid sg-ig-grid--cols-${h} ${s}"
|
|
647
|
+
style="grid-template-columns: repeat(${h}, 1fr); gap: ${c}rem;">
|
|
648
|
+
${i}
|
|
649
|
+
</div>`;
|
|
650
|
+
}
|
|
409
651
|
return `
|
|
410
|
-
<section id="${t}" ${
|
|
411
|
-
style="padding: var(--sg-section-padding-md, 3rem 0); background-color: ${
|
|
652
|
+
<section id="${t}" ${O(g)} ${D(g)} data-block-group="Galeria"
|
|
653
|
+
style="padding: var(--sg-section-padding-md, 3rem 0); background-color: ${r(S || "transparent")};">
|
|
412
654
|
<div style="max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
|
|
413
|
-
${
|
|
414
|
-
${
|
|
415
|
-
|
|
416
|
-
style="grid-template-columns: repeat(${b}, 1fr); gap: ${x}rem;">
|
|
417
|
-
${$}
|
|
418
|
-
</div>
|
|
655
|
+
${l}
|
|
656
|
+
${y}
|
|
657
|
+
${C}
|
|
419
658
|
</div>
|
|
420
|
-
${
|
|
659
|
+
${E}
|
|
421
660
|
</section>`;
|
|
422
661
|
}
|
|
423
|
-
function
|
|
424
|
-
const
|
|
425
|
-
let
|
|
426
|
-
|
|
662
|
+
function Y(t, g, e) {
|
|
663
|
+
const x = e.showArrows !== !1, a = e.showThumbnails === !0, p = e.showCounter !== !1, h = e.showCaption !== !1, c = e.enableZoom !== !1, $ = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', m = '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>', I = '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>', d = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>', w = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>';
|
|
664
|
+
let b = "";
|
|
665
|
+
c && (b = `
|
|
427
666
|
<div class="sg-lb-zoom">
|
|
428
|
-
<button class="sg-lb-btn sg-lb-zoom-out" aria-label="Diminuir zoom">${
|
|
667
|
+
<button class="sg-lb-btn sg-lb-zoom-out" aria-label="Diminuir zoom">${d}</button>
|
|
429
668
|
<span class="sg-lb-zoom-label">1x</span>
|
|
430
|
-
<button class="sg-lb-btn sg-lb-zoom-in" aria-label="Aumentar zoom">${
|
|
669
|
+
<button class="sg-lb-btn sg-lb-zoom-in" aria-label="Aumentar zoom">${w}</button>
|
|
431
670
|
</div>`);
|
|
432
|
-
let
|
|
433
|
-
|
|
434
|
-
<button class="sg-lb-btn sg-lb-nav sg-lb-nav--prev" aria-label="Anterior">${
|
|
435
|
-
<button class="sg-lb-btn sg-lb-nav sg-lb-nav--next" aria-label="Próxima">${
|
|
436
|
-
let
|
|
437
|
-
a &&
|
|
438
|
-
(
|
|
671
|
+
let T = "";
|
|
672
|
+
x && g.length > 1 && (T = `
|
|
673
|
+
<button class="sg-lb-btn sg-lb-nav sg-lb-nav--prev" aria-label="Anterior">${m}</button>
|
|
674
|
+
<button class="sg-lb-btn sg-lb-nav sg-lb-nav--next" aria-label="Próxima">${I}</button>`);
|
|
675
|
+
let S = "";
|
|
676
|
+
a && g.length > 1 && (S = `<div class="sg-lb-thumbs">${g.map(
|
|
677
|
+
(l, y) => `<button class="sg-lb-thumb" data-thumb-index="${y}" aria-label="Ir para imagem ${y + 1}: ${r(l.alt)}"><img src="${r(l.thumbnail || l.src)}" alt="${r(l.alt)}" draggable="false" /></button>`
|
|
439
678
|
).join("")}</div>`);
|
|
440
|
-
const
|
|
679
|
+
const v = h ? `<div class="sg-lb-caption" style="display:none;">
|
|
441
680
|
<div class="sg-lb-caption-title"></div>
|
|
442
681
|
<div class="sg-lb-caption-desc"></div>
|
|
443
|
-
</div>` : "",
|
|
682
|
+
</div>` : "", L = p ? '<span class="sg-lb-counter"></span>' : "<span></span>", s = a ? "65vh" : "78vh";
|
|
444
683
|
return `
|
|
445
684
|
<div class="sg-lb" role="dialog" aria-modal="true" aria-labelledby="${t}-lb-title" data-sg-lightbox>
|
|
446
685
|
<h2 id="${t}-lb-title" class="sr-only">Galeria de Imagens</h2>
|
|
447
686
|
<div aria-live="polite" aria-atomic="true" class="sr-only sg-lb-live"></div>
|
|
448
687
|
|
|
449
688
|
<div class="sg-lb-topbar">
|
|
450
|
-
${
|
|
451
|
-
${
|
|
452
|
-
<button class="sg-lb-btn sg-lb-close" aria-label="Fechar galeria">${
|
|
689
|
+
${L}
|
|
690
|
+
${b}
|
|
691
|
+
<button class="sg-lb-btn sg-lb-close" aria-label="Fechar galeria">${$}</button>
|
|
453
692
|
</div>
|
|
454
693
|
|
|
455
694
|
<div class="sg-lb-main">
|
|
456
|
-
<div class="sg-lb-img-wrap" style="max-height: ${
|
|
457
|
-
<img src="" alt="" draggable="false" style="max-height: ${
|
|
695
|
+
<div class="sg-lb-img-wrap" style="max-height: ${s};">
|
|
696
|
+
<img src="" alt="" draggable="false" style="max-height: ${s}; opacity: 0;" />
|
|
458
697
|
</div>
|
|
459
698
|
<div class="sg-lb-spinner"></div>
|
|
460
699
|
</div>
|
|
461
700
|
|
|
462
|
-
${S}
|
|
463
701
|
${v}
|
|
464
|
-
${
|
|
702
|
+
${T}
|
|
703
|
+
${S}
|
|
465
704
|
</div>`;
|
|
466
705
|
}
|
|
467
|
-
function
|
|
468
|
-
const
|
|
469
|
-
src:
|
|
470
|
-
alt:
|
|
471
|
-
title:
|
|
472
|
-
description:
|
|
473
|
-
thumbnail:
|
|
474
|
-
})),
|
|
706
|
+
function F(t, g, e, x = "gallery-grid") {
|
|
707
|
+
const a = g.map((s) => ({
|
|
708
|
+
src: s.src,
|
|
709
|
+
alt: s.alt,
|
|
710
|
+
title: s.title || "",
|
|
711
|
+
description: s.description || "",
|
|
712
|
+
thumbnail: s.thumbnail || ""
|
|
713
|
+
})), p = e.showArrows !== !1, h = e.showThumbnails === !0, c = e.showCounter !== !1, $ = e.showCaption !== !1, m = e.enableZoom !== !1, I = e.closeOnEsc !== !1, d = e.closeOnBackdropClick !== !1, w = e.enableKeyboard !== !1, b = e.enableTouchGestures !== !1, T = e.transitionDuration ?? 300, S = e.mode ?? "dark", v = e.enableAutoplay === !0, L = e.autoplayInterval ?? 5;
|
|
475
714
|
return `
|
|
476
715
|
(function() {
|
|
477
716
|
'use strict';
|
|
@@ -480,22 +719,25 @@ function G(t, i, e) {
|
|
|
480
719
|
if (!root) return;
|
|
481
720
|
|
|
482
721
|
// ---------- Images data ----------
|
|
483
|
-
var images = ${JSON.stringify(
|
|
722
|
+
var images = ${JSON.stringify(a).replace(/<\//g, "<\\/")};
|
|
484
723
|
if (images.length === 0) return;
|
|
485
724
|
|
|
486
725
|
// ---------- Config ----------
|
|
487
726
|
var CFG = {
|
|
488
|
-
showArrows: ${
|
|
489
|
-
showThumbnails: ${
|
|
490
|
-
showCounter: ${
|
|
491
|
-
showCaption: ${
|
|
727
|
+
showArrows: ${p},
|
|
728
|
+
showThumbnails: ${h},
|
|
729
|
+
showCounter: ${c},
|
|
730
|
+
showCaption: ${$},
|
|
492
731
|
enableZoom: ${m},
|
|
493
|
-
closeOnEsc: ${
|
|
494
|
-
closeOnBackdrop: ${
|
|
495
|
-
enableKeyboard: ${
|
|
496
|
-
enableTouch: ${
|
|
497
|
-
transitionDuration: ${
|
|
498
|
-
mode: '${
|
|
732
|
+
closeOnEsc: ${I},
|
|
733
|
+
closeOnBackdrop: ${d},
|
|
734
|
+
enableKeyboard: ${w},
|
|
735
|
+
enableTouch: ${b},
|
|
736
|
+
transitionDuration: ${T},
|
|
737
|
+
mode: '${S}',
|
|
738
|
+
variation: '${x}',
|
|
739
|
+
enableAutoplay: ${v},
|
|
740
|
+
autoplayInterval: ${L}
|
|
499
741
|
};
|
|
500
742
|
|
|
501
743
|
// ---------- Theme colors ----------
|
|
@@ -1026,32 +1268,72 @@ function G(t, i, e) {
|
|
|
1026
1268
|
touchStart = null;
|
|
1027
1269
|
}, { passive: true });
|
|
1028
1270
|
}
|
|
1271
|
+
|
|
1272
|
+
// ---------- Carousel navigation ----------
|
|
1273
|
+
if (CFG.variation === 'gallery-carousel') {
|
|
1274
|
+
var track = root.querySelector('.sg-ig-carousel-track');
|
|
1275
|
+
var slides = root.querySelectorAll('.sg-ig-carousel-slide');
|
|
1276
|
+
var cPrevBtn = root.querySelector('.sg-ig-carousel-nav--prev');
|
|
1277
|
+
var cNextBtn = root.querySelector('.sg-ig-carousel-nav--next');
|
|
1278
|
+
var dots = root.querySelectorAll('.sg-ig-dot');
|
|
1279
|
+
var carouselIdx = 0;
|
|
1280
|
+
|
|
1281
|
+
function goToSlide(idx) {
|
|
1282
|
+
carouselIdx = Math.max(0, Math.min(slides.length - 1, idx));
|
|
1283
|
+
if (track) track.scrollTo({ left: carouselIdx * track.offsetWidth, behavior: 'smooth' });
|
|
1284
|
+
for (var d = 0; d < dots.length; d++) {
|
|
1285
|
+
dots[d].className = 'sg-ig-dot ' + (d === carouselIdx ? 'sg-ig-dot--active' : 'sg-ig-dot--inactive');
|
|
1286
|
+
}
|
|
1287
|
+
if (cPrevBtn) {
|
|
1288
|
+
cPrevBtn.disabled = carouselIdx === 0;
|
|
1289
|
+
cPrevBtn.style.opacity = carouselIdx === 0 ? '0.3' : '0.8';
|
|
1290
|
+
}
|
|
1291
|
+
if (cNextBtn) {
|
|
1292
|
+
cNextBtn.disabled = carouselIdx === slides.length - 1;
|
|
1293
|
+
cNextBtn.style.opacity = carouselIdx === slides.length - 1 ? '0.3' : '0.8';
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
1296
|
+
|
|
1297
|
+
if (cPrevBtn) cPrevBtn.addEventListener('click', function(e) { e.stopPropagation(); goToSlide(carouselIdx - 1); });
|
|
1298
|
+
if (cNextBtn) cNextBtn.addEventListener('click', function(e) { e.stopPropagation(); goToSlide(carouselIdx + 1); });
|
|
1299
|
+
for (var di = 0; di < dots.length; di++) {
|
|
1300
|
+
(function(i) { dots[i].addEventListener('click', function() { goToSlide(i); }); })(di);
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
if (CFG.enableAutoplay) {
|
|
1304
|
+
var autoInt = (CFG.autoplayInterval || 5) * 1000;
|
|
1305
|
+
setInterval(function() {
|
|
1306
|
+
goToSlide(carouselIdx >= slides.length - 1 ? 0 : carouselIdx + 1);
|
|
1307
|
+
}, autoInt);
|
|
1308
|
+
}
|
|
1309
|
+
}
|
|
1029
1310
|
})();
|
|
1030
1311
|
`.trim();
|
|
1031
1312
|
}
|
|
1032
|
-
function
|
|
1033
|
-
const { props: a, id:
|
|
1034
|
-
title:
|
|
1035
|
-
subtitle:
|
|
1036
|
-
columns:
|
|
1037
|
-
gap:
|
|
1038
|
-
aspectRatio:
|
|
1039
|
-
imageBorderRadius:
|
|
1040
|
-
imageShadow:
|
|
1041
|
-
hoverEffect:
|
|
1042
|
-
enterAnimation:
|
|
1043
|
-
lazyLoad:
|
|
1044
|
-
showWarningAt:
|
|
1045
|
-
bg:
|
|
1046
|
-
lightbox:
|
|
1313
|
+
function R(t, g, e, x) {
|
|
1314
|
+
const { props: a, id: p } = t, h = a.title || "", c = a.subtitle || "", $ = a.images || [], m = a.columns || 4, I = a.gap || 1, d = a.aspectRatio || "auto", w = a.imageBorderRadius ?? 8, b = a.imageShadow || "md", T = a.hoverEffect || "zoom-overlay", S = a.enterAnimation || "fade-scale", v = a.lazyLoad !== !1, L = a.showWarningAt || 50, s = a.bg || "", f = a.lightbox || {}, l = a.variation || "gallery-grid", y = A(p, "sg-ig"), M = G(y, m, l, I), E = j(y), C = q(y, p, $, {
|
|
1315
|
+
title: h,
|
|
1316
|
+
subtitle: c,
|
|
1317
|
+
columns: m,
|
|
1318
|
+
gap: I,
|
|
1319
|
+
aspectRatio: d,
|
|
1320
|
+
imageBorderRadius: w,
|
|
1321
|
+
imageShadow: b,
|
|
1322
|
+
hoverEffect: T,
|
|
1323
|
+
enterAnimation: S,
|
|
1324
|
+
lazyLoad: v,
|
|
1325
|
+
showWarningAt: L,
|
|
1326
|
+
bg: s,
|
|
1327
|
+
lightbox: f,
|
|
1328
|
+
variation: l
|
|
1047
1329
|
});
|
|
1048
|
-
let
|
|
1049
|
-
return
|
|
1050
|
-
${
|
|
1051
|
-
${
|
|
1052
|
-
${
|
|
1330
|
+
let i = "";
|
|
1331
|
+
return $.length > 0 && (i = `<script>${F(y, $, f, l)}<\/script>`), `<style>${M}
|
|
1332
|
+
${E}</style>
|
|
1333
|
+
${C}
|
|
1334
|
+
${i}`;
|
|
1053
1335
|
}
|
|
1054
1336
|
export {
|
|
1055
|
-
|
|
1337
|
+
R as exportImageGallery
|
|
1056
1338
|
};
|
|
1057
1339
|
//# sourceMappingURL=ImageGalleryExporter.js.map
|