@cntrl-site/components 0.1.0-11 → 0.1.0-13

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.
Files changed (7) hide show
  1. package/dist/Components/ControlSlider/ControlSliderComponent.d.ts +3 -0
  2. package/dist/Components/ImageRevealSlider/ControlImageRevealSliderComponent.d.ts +3 -0
  3. package/dist/Components/Lightbox/Lightbox.d.ts +47 -42
  4. package/dist/components.css +1 -1
  5. package/dist/index.js +532 -461
  6. package/dist/index.mjs +532 -461
  7. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -270,7 +270,7 @@ function ControlSlider({ settings, content, styles: sliderStyles, isEditor }) {
270
270
  options: {
271
271
  arrows: false,
272
272
  speed: transition.duration ? parseInt(transition.duration) : 500,
273
- autoplay: isEditor ? false : triggers.autoPlay !== null,
273
+ autoplay: triggers.autoPlay !== null,
274
274
  ...triggers.autoPlay !== null && {
275
275
  interval: parseInt(triggers.autoPlay) * 1e3
276
276
  },
@@ -468,6 +468,9 @@ const ControlSliderComponent = {
468
468
  layoutBased: true,
469
469
  type: "object",
470
470
  properties: {
471
+ display: {
472
+ type: "settings-block"
473
+ },
471
474
  triggers: {
472
475
  title: "triggers",
473
476
  icon: "target",
@@ -1189,6 +1192,9 @@ const ControlImageRevealSliderComponent = {
1189
1192
  layoutBased: true,
1190
1193
  type: "object",
1191
1194
  properties: {
1195
+ display: {
1196
+ type: "settings-block"
1197
+ },
1192
1198
  imageSize: {
1193
1199
  title: "IMG SIZE",
1194
1200
  icon: "size",
@@ -1456,6 +1462,7 @@ const slideInLeft = "LightBox-module__slideInLeft___gPYwC";
1456
1462
  const slideInRight = "LightBox-module__slideInRight___S-pPp";
1457
1463
  const slideInTop = "LightBox-module__slideInTop___DFdAj";
1458
1464
  const slideInBottom = "LightBox-module__slideInBottom___m27kZ";
1465
+ const scaleSlide = "LightBox-module__scaleSlide___vZriG";
1459
1466
  const styles = {
1460
1467
  backdropStyle,
1461
1468
  contentStyle,
@@ -1477,11 +1484,20 @@ const styles = {
1477
1484
  slideInLeft,
1478
1485
  slideInRight,
1479
1486
  slideInTop,
1480
- slideInBottom
1487
+ slideInBottom,
1488
+ scaleSlide
1481
1489
  };
1482
- function LightboxGallery({ settings, content, styles: styles2, portalId }) {
1490
+ function LightboxGallery({ settings, content, styles: styles2, portalId, activeEvent }) {
1483
1491
  const [open, setOpen] = React.useState(false);
1484
- const { url: coverUrl } = settings.cover;
1492
+ const { url: coverUrl } = settings.thumbnailBlock.cover;
1493
+ useEffect(() => {
1494
+ if (activeEvent === "close") {
1495
+ setOpen(false);
1496
+ }
1497
+ if (activeEvent === "open") {
1498
+ setOpen(true);
1499
+ }
1500
+ }, [activeEvent]);
1485
1501
  return /* @__PURE__ */ jsxs("div", { children: [
1486
1502
  /* @__PURE__ */ jsx(
1487
1503
  "img",
@@ -1496,9 +1512,9 @@ function LightboxGallery({ settings, content, styles: styles2, portalId }) {
1496
1512
  ] });
1497
1513
  }
1498
1514
  const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = true, closeOnEsc = true, portalId }) => {
1499
- var _a;
1500
1515
  const [currentIndex, setCurrentIndex] = React.useState(0);
1501
1516
  const lightboxRef = useRef(null);
1517
+ const { appear, triggers, slider, thumbnail, controls, area, caption: caption2, layout } = settings.lightboxBlock;
1502
1518
  const handleBackdropClick = (e) => {
1503
1519
  if (!closeOnBackdropClick) return;
1504
1520
  if (e.target === e.currentTarget) {
@@ -1512,12 +1528,12 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1512
1528
  }
1513
1529
  };
1514
1530
  const onImageClick = (e) => {
1515
- var _a2, _b;
1516
- if (settings.triggers.type === "click" && settings.triggers.switch === "image") {
1531
+ var _a, _b;
1532
+ if (triggers.type === "click" && triggers.switch === "image") {
1517
1533
  e.stopPropagation();
1518
- (_a2 = lightboxRef.current) == null ? void 0 : _a2.go("+1");
1534
+ (_a = lightboxRef.current) == null ? void 0 : _a.go("+1");
1519
1535
  }
1520
- if (settings.triggers.type === "click" && settings.triggers.switch === "50/50") {
1536
+ if (triggers.type === "click" && triggers.switch === "50/50") {
1521
1537
  e.stopPropagation();
1522
1538
  const img2 = e.currentTarget;
1523
1539
  const rect = img2.getBoundingClientRect();
@@ -1526,7 +1542,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1526
1542
  const imgWidth = rect.width;
1527
1543
  const imgHeight = rect.height;
1528
1544
  let dir;
1529
- if (settings.slider.direction === "horiz") {
1545
+ if (slider.direction === "horiz") {
1530
1546
  dir = clickX < imgWidth / 2 ? "-1" : "+1";
1531
1547
  } else {
1532
1548
  dir = clickY < imgHeight / 2 ? "-1" : "+1";
@@ -1558,15 +1574,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1558
1574
  if (isOpen) setCurrentIndex(0);
1559
1575
  }, [isOpen]);
1560
1576
  const handleArrowClick = (dir) => {
1561
- var _a2;
1562
- (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(dir);
1577
+ var _a;
1578
+ (_a = lightboxRef.current) == null ? void 0 : _a.go(dir);
1563
1579
  };
1564
- const appearDurationMs = ((_a = settings.appear) == null ? void 0 : _a.duration) ? parseInt(settings.appear.duration) : 300;
1580
+ const appearDurationMs = appear.duration ? parseInt(appear.duration) : 300;
1565
1581
  const appearClass = (() => {
1566
- var _a2, _b;
1567
- if (((_a2 = settings.appear) == null ? void 0 : _a2.type) === "fade in") return styles.fadeIn;
1568
- if (((_b = settings.appear) == null ? void 0 : _b.type) === "slide in") {
1569
- switch (settings.appear.direction) {
1582
+ if (appear.type === "fade in") return styles.fadeIn;
1583
+ if (appear.type === "slide in") {
1584
+ switch (appear.direction) {
1570
1585
  case "left":
1571
1586
  return styles.slideInLeft;
1572
1587
  case "right":
@@ -1587,14 +1602,14 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1587
1602
  "div",
1588
1603
  {
1589
1604
  className: cn(styles.backdropStyle, styles.fadeIn),
1590
- style: { backgroundColor: settings.area.color, backdropFilter: `blur(${settings.area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
1605
+ style: { backgroundColor: area.color, backdropFilter: `blur(${area.blur}px)`, animationDuration: `${appearDurationMs}ms`, animationTimingFunction: "ease", animationFillMode: "both" },
1591
1606
  onClick: handleBackdropClick,
1592
1607
  children: /* @__PURE__ */ jsxs(
1593
1608
  "div",
1594
1609
  {
1595
1610
  className: cn(styles.contentStyle, appearClass),
1596
1611
  style: {
1597
- padding: `${settings.layout.padding.top}px ${settings.layout.padding.right}px ${settings.layout.padding.bottom}px ${settings.layout.padding.left}px`,
1612
+ padding: `${layout.padding.top}px ${layout.padding.right}px ${layout.padding.bottom}px ${layout.padding.left}px`,
1598
1613
  animationDuration: `${appearDurationMs}ms`,
1599
1614
  animationTimingFunction: "ease",
1600
1615
  animationFillMode: "both"
@@ -1609,23 +1624,27 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1609
1624
  ref: lightboxRef,
1610
1625
  options: {
1611
1626
  arrows: false,
1612
- speed: settings.triggers.duration ? parseInt(settings.triggers.duration) : 500,
1613
- direction: settings.slider.direction === "horiz" || settings.slider.type === "fade" ? "ltr" : "ttb",
1627
+ speed: triggers.duration ? parseInt(triggers.duration) : 500,
1628
+ direction: slider.direction === "horiz" || slider.type === "fade" || slider.type === "scale" ? "ltr" : "ttb",
1614
1629
  pagination: false,
1615
- drag: settings.triggers.type === "drag",
1630
+ drag: triggers.type === "drag",
1616
1631
  perPage: 1,
1617
1632
  width: "100%",
1618
1633
  height: "100%",
1619
- type: settings.slider.type === "fade" ? "fade" : "loop",
1634
+ type: slider.type === "fade" || slider.type === "scale" ? "fade" : "loop",
1620
1635
  padding: 0,
1621
1636
  rewind: false
1622
1637
  },
1638
+ style: {
1639
+ "--splide-speed": triggers.duration || "500ms"
1640
+ },
1623
1641
  children: content.map((item, index) => /* @__PURE__ */ jsx(SplideSlide, { children: /* @__PURE__ */ jsx("div", { className: styles.imgWrapper, onClick: handleImageWrapperClick, children: /* @__PURE__ */ jsx(
1624
1642
  "img",
1625
1643
  {
1626
1644
  className: cn(styles.imageStyle, {
1627
1645
  [styles.contain]: item.image.objectFit === "contain",
1628
- [styles.cover]: item.image.objectFit === "cover"
1646
+ [styles.cover]: item.image.objectFit === "cover",
1647
+ [styles.scaleSlide]: slider.type === "scale"
1629
1648
  }),
1630
1649
  src: item.image.url,
1631
1650
  alt: item.image.name ?? "",
@@ -1634,28 +1653,28 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1634
1653
  ) }) }, index))
1635
1654
  }
1636
1655
  ),
1637
- settings.controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
1656
+ controls.isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
1638
1657
  /* @__PURE__ */ jsx(
1639
1658
  "div",
1640
1659
  {
1641
- className: cn(styles.arrow, { [styles.arrowVertical]: settings.slider.direction === "vert" }),
1642
- style: { color: settings.controls.color, ["--arrow-hover-color"]: settings.controls.hover },
1660
+ className: cn(styles.arrow, { [styles.arrowVertical]: slider.direction === "vert" }),
1661
+ style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
1643
1662
  children: /* @__PURE__ */ jsx(
1644
1663
  "button",
1645
1664
  {
1646
1665
  className: styles.arrowInner,
1647
1666
  style: {
1648
- transform: `translate(${scalingValue(settings.controls.offset.x)}, ${scalingValue(settings.controls.offset.y * (settings.slider.direction === "horiz" ? 1 : -1))}) scale(${settings.controls.scale / 100}) rotate(${settings.slider.direction === "horiz" ? "0deg" : "90deg"})`
1667
+ transform: `translate(${scalingValue(controls.offset.x)}, ${scalingValue(controls.offset.y * (slider.direction === "horiz" ? 1 : -1))}) scale(${controls.scale / 100}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
1649
1668
  },
1650
1669
  onClick: (e) => {
1651
1670
  handleArrowClick("-1");
1652
1671
  },
1653
- children: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
1672
+ children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
1654
1673
  SvgImage,
1655
1674
  {
1656
- url: settings.controls.arrowsImgUrl,
1657
- fill: settings.controls.color,
1658
- hoverFill: settings.controls.hover,
1675
+ url: controls.arrowsImgUrl,
1676
+ fill: controls.color,
1677
+ hoverFill: controls.hover,
1659
1678
  className: cn(styles.arrowImg, styles.mirror)
1660
1679
  }
1661
1680
  )
@@ -1666,25 +1685,25 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1666
1685
  /* @__PURE__ */ jsx(
1667
1686
  "div",
1668
1687
  {
1669
- className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: settings.slider.direction === "vert" }),
1670
- style: { color: settings.controls.color, ["--arrow-hover-color"]: settings.controls.hover },
1688
+ className: cn(styles.arrow, styles.nextArrow, { [styles.arrowVertical]: slider.direction === "vert" }),
1689
+ style: { color: controls.color, ["--arrow-hover-color"]: controls.hover },
1671
1690
  children: /* @__PURE__ */ jsx(
1672
1691
  "button",
1673
1692
  {
1674
1693
  className: styles.arrowInner,
1675
1694
  style: {
1676
- transform: `translate(${scalingValue(settings.controls.offset.x * (settings.slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(settings.controls.offset.y)}) scale(${settings.controls.scale / 100}) rotate(${settings.slider.direction === "horiz" ? "0deg" : "90deg"})`
1695
+ transform: `translate(${scalingValue(controls.offset.x * (slider.direction === "horiz" ? -1 : 1))}, ${scalingValue(controls.offset.y)}) scale(${controls.scale / 100}) rotate(${slider.direction === "horiz" ? "0deg" : "90deg"})`
1677
1696
  },
1678
1697
  onClick: (e) => {
1679
1698
  handleArrowClick("+1");
1680
1699
  },
1681
1700
  "aria-label": "Next",
1682
- children: settings.controls.arrowsImgUrl && /* @__PURE__ */ jsx(
1701
+ children: controls.arrowsImgUrl && /* @__PURE__ */ jsx(
1683
1702
  SvgImage,
1684
1703
  {
1685
- url: settings.controls.arrowsImgUrl,
1686
- fill: settings.controls.color,
1687
- hoverFill: settings.controls.hover,
1704
+ url: controls.arrowsImgUrl,
1705
+ fill: controls.color,
1706
+ hoverFill: controls.hover,
1688
1707
  className: styles.arrowImg
1689
1708
  }
1690
1709
  )
@@ -1693,15 +1712,15 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1693
1712
  }
1694
1713
  )
1695
1714
  ] }),
1696
- settings.area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
1697
- settings.caption.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
1698
- settings.thumbnail.isActive && /* @__PURE__ */ jsx(
1715
+ area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: { top: area.closeIconOffset.y, left: area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: area.closeIconUrl, fill: area.color }) }),
1716
+ caption2.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: caption2.offset.y, left: caption2.offset.x }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
1717
+ thumbnail.isActive && /* @__PURE__ */ jsx(
1699
1718
  "div",
1700
1719
  {
1701
1720
  className: cn(styles.thumbsContainer),
1702
1721
  style: {
1703
- gap: `${settings.thumbnail.grid.gap}px`,
1704
- height: `${settings.thumbnail.grid.height}px`
1722
+ gap: `${thumbnail.grid.gap}px`,
1723
+ height: `${thumbnail.grid.height}px`
1705
1724
  },
1706
1725
  children: content.map((item, index) => {
1707
1726
  const isActive = index === currentIndex;
@@ -1710,16 +1729,16 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1710
1729
  {
1711
1730
  className: styles.thumbItem,
1712
1731
  style: {
1713
- transform: `scale(${isActive ? settings.thumbnail.activeState.scale : 1})`,
1732
+ transform: `scale(${isActive ? thumbnail.activeState.scale : 1})`,
1714
1733
  height: "100%",
1715
- opacity: isActive ? settings.thumbnail.activeState.opacity : settings.thumbnail.opacity,
1716
- ["--thumb-hover"]: settings.thumbnail.activeState.opacity
1734
+ opacity: isActive ? thumbnail.activeState.opacity : thumbnail.opacity,
1735
+ ["--thumb-hover"]: thumbnail.activeState.opacity
1717
1736
  },
1718
1737
  onClick: (e) => {
1719
- var _a2;
1738
+ var _a;
1720
1739
  e.stopPropagation();
1721
1740
  setCurrentIndex(index);
1722
- (_a2 = lightboxRef.current) == null ? void 0 : _a2.go(index);
1741
+ (_a = lightboxRef.current) == null ? void 0 : _a.go(index);
1723
1742
  },
1724
1743
  children: /* @__PURE__ */ jsx(
1725
1744
  "img",
@@ -1727,7 +1746,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1727
1746
  src: item.image.url,
1728
1747
  alt: item.image.name ?? "",
1729
1748
  className: styles.thumbImage,
1730
- style: { objectFit: settings.thumbnail.fit === "cover" ? "cover" : "contain" }
1749
+ style: { objectFit: thumbnail.fit === "cover" ? "cover" : "contain" }
1731
1750
  }
1732
1751
  )
1733
1752
  },
@@ -1763,219 +1782,207 @@ const LightboxComponent = {
1763
1782
  layoutBased: true,
1764
1783
  type: "object",
1765
1784
  properties: {
1766
- cover: {
1767
- title: "COVER",
1768
- icon: "cover",
1769
- tooltip: "Cover Image",
1785
+ thumbnailBlock: {
1786
+ display: {
1787
+ type: "settings-block",
1788
+ triggerEvent: "close"
1789
+ },
1770
1790
  type: "object",
1771
1791
  properties: {
1772
- url: {
1773
- type: "string",
1774
- display: {
1775
- type: "settings-image-input"
1792
+ cover: {
1793
+ title: "COVER",
1794
+ icon: "cover",
1795
+ tooltip: "Cover Image",
1796
+ type: "object",
1797
+ properties: {
1798
+ url: {
1799
+ type: "string",
1800
+ display: {
1801
+ type: "settings-image-input"
1802
+ }
1803
+ }
1776
1804
  }
1777
1805
  }
1778
1806
  }
1779
1807
  },
1780
- appear: {
1781
- title: "APPEAR",
1782
- icon: "transition",
1783
- tooltip: "Appearance",
1784
- type: "object",
1785
- properties: {
1786
- type: {
1787
- type: "string",
1788
- display: {
1789
- type: "ratio-group"
1790
- },
1791
- enum: ["slide in", "fade in", "mix"]
1792
- },
1793
- duration: {
1794
- type: "string",
1795
- label: "T",
1796
- display: {
1797
- type: "step-selector"
1798
- },
1799
- enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
1800
- },
1801
- direction: {
1802
- type: "string",
1803
- title: "FROM",
1804
- display: {
1805
- visible: false,
1806
- type: "direction-control"
1807
- },
1808
- enum: ["top", "right", "bottom", "left"]
1809
- },
1810
- repeat: {
1811
- type: "string",
1812
- title: "Repeat",
1813
- display: {
1814
- type: "ratio-group"
1815
- },
1816
- enum: ["close", "loop"]
1817
- }
1818
- }
1819
- },
1820
- triggers: {
1821
- title: "TRIGGERS",
1822
- icon: "target",
1823
- tooltip: "Triggers",
1824
- type: "object",
1825
- properties: {
1826
- type: {
1827
- type: "string",
1828
- display: {
1829
- type: "ratio-group"
1830
- },
1831
- enum: ["click", "drag", "scroll"]
1832
- },
1833
- switch: {
1834
- type: "string",
1835
- display: {
1836
- type: "ratio-group"
1837
- },
1838
- enum: ["image", "50/50"]
1839
- },
1840
- duration: {
1841
- type: "string",
1842
- label: "T",
1843
- display: {
1844
- type: "step-selector"
1845
- },
1846
- enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
1847
- }
1848
- }
1849
- },
1850
- slider: {
1851
- title: "SLIDER",
1852
- icon: "horizontal-resize",
1853
- tooltip: "Slider",
1854
- type: "object",
1855
- properties: {
1856
- type: {
1857
- type: "string",
1858
- display: {
1859
- type: "ratio-group"
1860
- },
1861
- enum: ["slide", "fade", "scale"]
1862
- },
1863
- direction: {
1864
- type: "string",
1865
- display: {
1866
- visible: false,
1867
- type: "ratio-group"
1868
- },
1869
- enum: ["horiz", "vert"]
1870
- }
1871
- }
1872
- },
1873
- thumbnail: {
1874
- title: "THUMB",
1875
- icon: "thumbnail",
1876
- tooltip: "Thumbnail",
1808
+ lightboxBlock: {
1809
+ display: {
1810
+ type: "settings-block",
1811
+ triggerEvent: "open"
1812
+ },
1877
1813
  type: "object",
1878
1814
  properties: {
1879
- isActive: {
1880
- type: "boolean",
1881
- display: {
1882
- type: "setting-toggle"
1815
+ appear: {
1816
+ title: "APPEAR",
1817
+ icon: "transition",
1818
+ tooltip: "Appearance",
1819
+ type: "object",
1820
+ properties: {
1821
+ type: {
1822
+ type: "string",
1823
+ display: {
1824
+ type: "ratio-group"
1825
+ },
1826
+ enum: ["slide in", "fade in", "mix"]
1827
+ },
1828
+ duration: {
1829
+ type: "string",
1830
+ label: "T",
1831
+ display: {
1832
+ type: "step-selector"
1833
+ },
1834
+ enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
1835
+ },
1836
+ direction: {
1837
+ type: "string",
1838
+ title: "FROM",
1839
+ display: {
1840
+ visible: false,
1841
+ type: "direction-control"
1842
+ },
1843
+ enum: ["top", "left", "right", "bottom"]
1844
+ },
1845
+ repeat: {
1846
+ type: "string",
1847
+ title: "Repeat",
1848
+ display: {
1849
+ type: "ratio-group"
1850
+ },
1851
+ enum: ["close", "loop"]
1852
+ }
1883
1853
  }
1884
1854
  },
1885
- position: {
1886
- display: {
1887
- type: "align-grid"
1888
- },
1889
- type: "string",
1890
- enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
1891
- },
1892
- fit: {
1893
- type: "string",
1894
- display: {
1895
- type: "ratio-group"
1896
- },
1897
- enum: ["cover", "fit"]
1898
- },
1899
- align: {
1900
- type: "string",
1901
- title: "Align",
1902
- display: {
1903
- type: "align-vertical"
1904
- },
1905
- enum: ["top", "center", "bottom"]
1906
- },
1907
1855
  triggers: {
1908
- type: "string",
1909
- title: "Triggers",
1910
- display: {
1911
- type: "ratio-group",
1912
- direction: "horizontal"
1913
- },
1914
- enum: ["clk", "hov"]
1915
- },
1916
- grid: {
1856
+ title: "TRIGGERS",
1857
+ icon: "target",
1858
+ tooltip: "Triggers",
1917
1859
  type: "object",
1918
- title: "Grid",
1919
- display: {
1920
- type: "group"
1921
- },
1922
1860
  properties: {
1923
- height: {
1924
- type: "number",
1925
- label: "H",
1861
+ type: {
1862
+ type: "string",
1926
1863
  display: {
1927
- type: "numeric-input"
1928
- }
1864
+ type: "ratio-group"
1865
+ },
1866
+ enum: ["click", "drag", "scroll"]
1929
1867
  },
1930
- gap: {
1931
- type: "number",
1932
- label: "Gap",
1868
+ switch: {
1869
+ type: "string",
1933
1870
  display: {
1934
- type: "numeric-input"
1935
- }
1871
+ type: "ratio-group"
1872
+ },
1873
+ enum: ["image", "50/50"]
1874
+ },
1875
+ duration: {
1876
+ type: "string",
1877
+ label: "T",
1878
+ display: {
1879
+ type: "step-selector"
1880
+ },
1881
+ enum: ["100ms", "250ms", "500ms", "1000ms", "1500ms", "2000ms"]
1936
1882
  }
1937
1883
  }
1938
1884
  },
1939
- offset: {
1885
+ slider: {
1886
+ title: "SLIDER",
1887
+ icon: "horizontal-resize",
1888
+ tooltip: "Slider",
1940
1889
  type: "object",
1941
- display: {
1942
- type: "offset-controls"
1943
- },
1944
1890
  properties: {
1945
- x: {
1946
- type: "number"
1891
+ type: {
1892
+ type: "string",
1893
+ display: {
1894
+ type: "ratio-group"
1895
+ },
1896
+ enum: ["slide", "fade", "scale"]
1947
1897
  },
1948
- y: {
1949
- type: "number"
1898
+ direction: {
1899
+ type: "string",
1900
+ display: {
1901
+ type: "ratio-group"
1902
+ },
1903
+ enum: ["horiz", "vert"]
1950
1904
  }
1951
1905
  }
1952
1906
  },
1953
- opacity: {
1954
- type: "number",
1955
- title: "Opacity",
1956
- label: "icon:opacity",
1957
- min: 0,
1958
- max: 100,
1959
- step: 1,
1960
- display: {
1961
- type: "numeric-input"
1962
- }
1963
- },
1964
- activeState: {
1907
+ thumbnail: {
1908
+ title: "THUMB",
1909
+ icon: "thumbnail",
1910
+ tooltip: "Thumbnail",
1965
1911
  type: "object",
1966
- title: "ACTIVE",
1967
- display: {
1968
- type: "group"
1969
- },
1970
1912
  properties: {
1971
- scale: {
1972
- type: "number",
1973
- title: "Scale",
1974
- min: 1,
1975
- max: 2,
1976
- step: 0.1,
1913
+ isActive: {
1914
+ type: "boolean",
1977
1915
  display: {
1978
- type: "range-control"
1916
+ type: "setting-toggle"
1917
+ }
1918
+ },
1919
+ position: {
1920
+ display: {
1921
+ type: "align-grid"
1922
+ },
1923
+ type: "string",
1924
+ enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
1925
+ },
1926
+ fit: {
1927
+ type: "string",
1928
+ display: {
1929
+ type: "ratio-group"
1930
+ },
1931
+ enum: ["cover", "fit"]
1932
+ },
1933
+ align: {
1934
+ type: "string",
1935
+ title: "Align",
1936
+ display: {
1937
+ type: "align-group",
1938
+ direction: "horizontal"
1939
+ },
1940
+ enum: ["start", "center", "end"]
1941
+ },
1942
+ triggers: {
1943
+ type: "string",
1944
+ title: "Triggers",
1945
+ display: {
1946
+ type: "ratio-group",
1947
+ direction: "horizontal"
1948
+ },
1949
+ enum: ["clk", "hov"]
1950
+ },
1951
+ grid: {
1952
+ type: "object",
1953
+ title: "Grid",
1954
+ display: {
1955
+ type: "group"
1956
+ },
1957
+ properties: {
1958
+ height: {
1959
+ type: "number",
1960
+ label: "H",
1961
+ display: {
1962
+ type: "numeric-input"
1963
+ }
1964
+ },
1965
+ gap: {
1966
+ type: "number",
1967
+ label: "Gap",
1968
+ display: {
1969
+ type: "numeric-input"
1970
+ }
1971
+ }
1972
+ }
1973
+ },
1974
+ offset: {
1975
+ type: "object",
1976
+ display: {
1977
+ type: "offset-controls"
1978
+ },
1979
+ properties: {
1980
+ x: {
1981
+ type: "number"
1982
+ },
1983
+ y: {
1984
+ type: "number"
1985
+ }
1979
1986
  }
1980
1987
  },
1981
1988
  opacity: {
@@ -1988,269 +1995,303 @@ const LightboxComponent = {
1988
1995
  display: {
1989
1996
  type: "numeric-input"
1990
1997
  }
1998
+ },
1999
+ activeState: {
2000
+ type: "object",
2001
+ title: "ACTIVE",
2002
+ display: {
2003
+ type: "group"
2004
+ },
2005
+ properties: {
2006
+ scale: {
2007
+ type: "number",
2008
+ title: "Scale",
2009
+ min: 1,
2010
+ max: 2,
2011
+ step: 0.1,
2012
+ display: {
2013
+ type: "range-control"
2014
+ }
2015
+ },
2016
+ opacity: {
2017
+ type: "number",
2018
+ title: "Opacity",
2019
+ label: "icon:opacity",
2020
+ min: 0,
2021
+ max: 100,
2022
+ step: 1,
2023
+ display: {
2024
+ type: "numeric-input"
2025
+ }
2026
+ }
2027
+ }
1991
2028
  }
1992
2029
  }
1993
- }
1994
- }
1995
- },
1996
- layout: {
1997
- title: "LAYOUT",
1998
- icon: "layout",
1999
- tooltip: "Layout",
2000
- type: "object",
2001
- properties: {
2002
- position: {
2003
- display: {
2004
- type: "align-grid"
2005
- },
2006
- type: "string",
2007
- enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
2008
2030
  },
2009
- offset: {
2031
+ layout: {
2032
+ title: "LAYOUT",
2033
+ icon: "layout",
2034
+ tooltip: "Layout",
2010
2035
  type: "object",
2011
- display: {
2012
- type: "offset-controls"
2013
- },
2014
2036
  properties: {
2015
- x: {
2016
- type: "number"
2037
+ position: {
2038
+ display: {
2039
+ type: "align-grid"
2040
+ },
2041
+ type: "string",
2042
+ enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
2017
2043
  },
2018
- y: {
2019
- type: "number"
2044
+ offset: {
2045
+ type: "object",
2046
+ display: {
2047
+ type: "offset-controls"
2048
+ },
2049
+ properties: {
2050
+ x: {
2051
+ type: "number"
2052
+ },
2053
+ y: {
2054
+ type: "number"
2055
+ }
2056
+ }
2057
+ },
2058
+ padding: {
2059
+ type: "object",
2060
+ title: "Padding",
2061
+ display: {
2062
+ type: "padding-controls"
2063
+ },
2064
+ properties: {
2065
+ top: {
2066
+ type: "number"
2067
+ },
2068
+ left: {
2069
+ type: "number"
2070
+ },
2071
+ right: {
2072
+ type: "number"
2073
+ },
2074
+ bottom: {
2075
+ type: "number"
2076
+ }
2077
+ }
2020
2078
  }
2021
2079
  }
2022
2080
  },
2023
- padding: {
2081
+ controls: {
2082
+ title: "CONTROLS",
2083
+ icon: "controls",
2084
+ tooltip: "Controls",
2024
2085
  type: "object",
2025
- title: "Padding",
2026
- display: {
2027
- type: "padding-controls"
2028
- },
2029
2086
  properties: {
2030
- top: {
2031
- type: "number"
2087
+ isActive: {
2088
+ type: "boolean",
2089
+ display: {
2090
+ type: "setting-toggle"
2091
+ }
2032
2092
  },
2033
- right: {
2034
- type: "number"
2093
+ arrowsImgUrl: {
2094
+ type: ["string", "null"],
2095
+ display: {
2096
+ type: "settings-image-input"
2097
+ }
2035
2098
  },
2036
- bottom: {
2037
- type: "number"
2099
+ offset: {
2100
+ type: "object",
2101
+ display: {
2102
+ type: "offset-controls"
2103
+ },
2104
+ properties: {
2105
+ x: {
2106
+ type: "number"
2107
+ },
2108
+ y: {
2109
+ type: "number"
2110
+ }
2111
+ }
2038
2112
  },
2039
- left: {
2040
- type: "number"
2041
- }
2042
- }
2043
- }
2044
- }
2045
- },
2046
- controls: {
2047
- title: "CONTROLS",
2048
- icon: "controls",
2049
- tooltip: "Controls",
2050
- type: "object",
2051
- properties: {
2052
- isActive: {
2053
- type: "boolean",
2054
- display: {
2055
- type: "setting-toggle"
2056
- }
2057
- },
2058
- arrowsImgUrl: {
2059
- type: ["string", "null"],
2060
- display: {
2061
- type: "settings-image-input"
2062
- }
2063
- },
2064
- offset: {
2065
- type: "object",
2066
- display: {
2067
- type: "offset-controls"
2068
- },
2069
- properties: {
2070
- x: {
2071
- type: "number"
2113
+ scale: {
2114
+ type: "number",
2115
+ title: "Scale",
2116
+ min: 0,
2117
+ max: 1,
2118
+ display: {
2119
+ type: "range-control"
2120
+ }
2072
2121
  },
2073
- y: {
2074
- type: "number"
2122
+ color: {
2123
+ title: "Color",
2124
+ type: "string",
2125
+ display: {
2126
+ type: "settings-color-picker",
2127
+ format: "single"
2128
+ }
2129
+ },
2130
+ hover: {
2131
+ title: "Hover",
2132
+ type: "string",
2133
+ display: {
2134
+ type: "settings-color-picker",
2135
+ format: "single"
2136
+ }
2075
2137
  }
2076
2138
  }
2077
2139
  },
2078
- scale: {
2079
- type: "number",
2080
- title: "Scale",
2081
- min: 0,
2082
- max: 1,
2083
- display: {
2084
- type: "range-control"
2085
- }
2086
- },
2087
- color: {
2088
- title: "Color",
2089
- type: "string",
2090
- display: {
2091
- type: "settings-color-picker",
2092
- format: "single"
2093
- }
2094
- },
2095
- hover: {
2096
- title: "Hover",
2097
- type: "string",
2098
- display: {
2099
- type: "settings-color-picker",
2100
- format: "single"
2101
- }
2102
- }
2103
- }
2104
- },
2105
- area: {
2106
- title: "AREA",
2107
- icon: "area",
2108
- tooltip: "Area",
2109
- type: "object",
2110
- properties: {
2111
- color: {
2112
- type: "string",
2113
- display: {
2114
- type: "settings-color-picker",
2115
- format: "single"
2116
- }
2117
- },
2118
- blur: {
2119
- type: "number",
2120
- label: "icon:blur",
2121
- display: {
2122
- type: "numeric-input"
2123
- }
2124
- },
2125
- closeIconUrl: {
2126
- type: ["string", "null"],
2127
- title: "CLOSE ICON",
2128
- display: {
2129
- type: "settings-image-input"
2130
- }
2131
- },
2132
- closeIconAlign: {
2133
- display: {
2134
- type: "align-grid",
2135
- direction: "horizontal"
2136
- },
2137
- type: "string",
2138
- enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
2139
- },
2140
- closeIconOffset: {
2140
+ area: {
2141
+ title: "AREA",
2142
+ icon: "area",
2143
+ tooltip: "Area",
2141
2144
  type: "object",
2142
- display: {
2143
- type: "offset-controls"
2144
- },
2145
2145
  properties: {
2146
- x: {
2147
- type: "number"
2146
+ color: {
2147
+ type: "string",
2148
+ display: {
2149
+ type: "settings-color-picker",
2150
+ format: "single"
2151
+ }
2148
2152
  },
2149
- y: {
2150
- type: "number"
2153
+ blur: {
2154
+ type: "number",
2155
+ label: "icon:blur",
2156
+ display: {
2157
+ type: "numeric-input"
2158
+ }
2159
+ },
2160
+ closeIconUrl: {
2161
+ type: ["string", "null"],
2162
+ title: "CLOSE ICON",
2163
+ display: {
2164
+ type: "settings-image-input"
2165
+ }
2166
+ },
2167
+ closeIconAlign: {
2168
+ display: {
2169
+ type: "align-grid",
2170
+ direction: "horizontal"
2171
+ },
2172
+ type: "string",
2173
+ enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
2174
+ },
2175
+ closeIconOffset: {
2176
+ type: "object",
2177
+ display: {
2178
+ type: "offset-controls"
2179
+ },
2180
+ properties: {
2181
+ x: {
2182
+ type: "number"
2183
+ },
2184
+ y: {
2185
+ type: "number"
2186
+ }
2187
+ }
2151
2188
  }
2152
2189
  }
2153
- }
2154
- }
2155
- },
2156
- caption: {
2157
- title: "DESC",
2158
- icon: "text-icon",
2159
- tooltip: "Description",
2160
- type: "object",
2161
- properties: {
2162
- alignment: {
2163
- type: "string",
2164
- display: {
2165
- type: "align-grid"
2166
- },
2167
- enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
2168
2190
  },
2169
- offset: {
2191
+ caption: {
2192
+ title: "DESC",
2193
+ icon: "text-icon",
2194
+ tooltip: "Description",
2170
2195
  type: "object",
2171
- display: {
2172
- type: "offset-controls"
2173
- },
2174
2196
  properties: {
2175
- x: {
2176
- type: "number"
2197
+ alignment: {
2198
+ type: "string",
2199
+ display: {
2200
+ type: "align-grid"
2201
+ },
2202
+ enum: ["top-left", "top-center", "top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", "bottom-right"]
2177
2203
  },
2178
- y: {
2179
- type: "number"
2204
+ offset: {
2205
+ type: "object",
2206
+ display: {
2207
+ type: "offset-controls"
2208
+ },
2209
+ properties: {
2210
+ x: {
2211
+ type: "number"
2212
+ },
2213
+ y: {
2214
+ type: "number"
2215
+ }
2216
+ }
2217
+ },
2218
+ hover: {
2219
+ title: "Hover",
2220
+ type: "string",
2221
+ display: {
2222
+ type: "settings-color-picker",
2223
+ format: "single"
2224
+ }
2180
2225
  }
2181
2226
  }
2182
- },
2183
- hover: {
2184
- title: "Hover",
2185
- type: "string",
2186
- display: {
2187
- type: "settings-color-picker",
2188
- format: "single"
2189
- }
2190
2227
  }
2191
2228
  }
2192
2229
  }
2193
2230
  },
2194
2231
  default: {
2195
- cover: {
2196
- url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
2197
- },
2198
- appear: {
2199
- type: "slide in",
2200
- duration: "1000ms",
2201
- direction: "right",
2202
- repeat: "close"
2203
- },
2204
- triggers: {
2205
- type: "click",
2206
- switch: "image",
2207
- duration: "2000ms"
2208
- },
2209
- slider: {
2210
- type: "fade",
2211
- direction: "horiz"
2232
+ thumbnailBlock: {
2233
+ cover: {
2234
+ url: "https://cdn.cntrl.site/projects/01JJKT02AWY2FGN2QJ7A173RNZ/articles-assets/01K7ERMHNP08T27H1649S67NZV.png"
2235
+ }
2212
2236
  },
2213
- thumbnail: {
2214
- isActive: true,
2215
- position: "bottom-center",
2216
- fit: "cover",
2217
- align: "center",
2218
- triggers: "click",
2219
- grid: {
2220
- height: 60,
2221
- gap: 8
2237
+ lightboxBlock: {
2238
+ appear: {
2239
+ type: "slide in",
2240
+ duration: "1000ms",
2241
+ direction: "right",
2242
+ repeat: "close"
2243
+ },
2244
+ triggers: {
2245
+ type: "click",
2246
+ switch: "image",
2247
+ duration: "2000ms"
2248
+ },
2249
+ slider: {
2250
+ type: "fade",
2251
+ direction: "horiz"
2222
2252
  },
2223
- offset: { x: 0, y: 0 },
2224
- opacity: 100,
2225
- activeState: {
2253
+ thumbnail: {
2254
+ isActive: true,
2255
+ position: "bottom-center",
2256
+ fit: "cover",
2257
+ align: "center",
2258
+ triggers: "click",
2259
+ grid: {
2260
+ height: 60,
2261
+ gap: 8
2262
+ },
2263
+ offset: { x: 0, y: 0 },
2264
+ opacity: 100,
2265
+ activeState: {
2266
+ scale: 1,
2267
+ opacity: 100
2268
+ }
2269
+ },
2270
+ layout: {
2271
+ position: "middle-center",
2272
+ offset: { x: 0, y: 0 },
2273
+ padding: { top: 0, right: 0, bottom: 0, left: 0 }
2274
+ },
2275
+ controls: {
2276
+ isActive: true,
2277
+ arrowsImgUrl: null,
2278
+ offset: { x: 0, y: 0 },
2226
2279
  scale: 1,
2227
- opacity: 100
2280
+ color: "#000000",
2281
+ hover: "#cccccc"
2282
+ },
2283
+ area: {
2284
+ color: "rgba(0,0,0,0.9)",
2285
+ blur: 0,
2286
+ closeIconUrl: null,
2287
+ closeIconAlign: "top-right",
2288
+ closeIconOffset: { x: 0, y: 0 }
2289
+ },
2290
+ caption: {
2291
+ alignment: "middle-center",
2292
+ offset: { x: 0, y: 0 },
2293
+ hover: "#cccccc"
2228
2294
  }
2229
- },
2230
- layout: {
2231
- position: "middle-center",
2232
- offset: { x: 0, y: 0 },
2233
- padding: { top: 0, right: 0, bottom: 0, left: 0 }
2234
- },
2235
- controls: {
2236
- isActive: true,
2237
- arrowsImgUrl: null,
2238
- offset: { x: 0, y: 0 },
2239
- scale: 1,
2240
- color: "#000000",
2241
- hover: "#cccccc"
2242
- },
2243
- area: {
2244
- color: "rgba(0,0,0,0.9)",
2245
- blur: 0,
2246
- closeIconUrl: null,
2247
- closeIconAlign: "top-right",
2248
- closeIconOffset: { x: 0, y: 0 }
2249
- },
2250
- caption: {
2251
- alignment: "middle-center",
2252
- offset: { x: 0, y: 0 },
2253
- hover: "#cccccc"
2254
2295
  }
2255
2296
  },
2256
2297
  displayRules: [
@@ -2261,7 +2302,37 @@ const LightboxComponent = {
2261
2302
  },
2262
2303
  then: {
2263
2304
  value: true,
2264
- name: "properties.appear.properties.direction.display.visible"
2305
+ name: "properties.lightboxBlock.properties.appear.properties.direction.display.visible"
2306
+ }
2307
+ },
2308
+ {
2309
+ if: {
2310
+ name: "slider.direction",
2311
+ value: "vert"
2312
+ },
2313
+ then: {
2314
+ name: "properties.lightboxBlock.properties.thumbnail.properties.position.display.direction",
2315
+ value: "vertical"
2316
+ }
2317
+ },
2318
+ {
2319
+ if: {
2320
+ name: "triggers.type",
2321
+ value: "drag"
2322
+ },
2323
+ then: {
2324
+ name: "properties.lightboxBlock.properties.triggers.properties.switch.display.visible",
2325
+ value: false
2326
+ }
2327
+ },
2328
+ {
2329
+ if: {
2330
+ name: "triggers.type",
2331
+ value: "drag"
2332
+ },
2333
+ then: {
2334
+ name: "properties.lightboxBlock.properties.triggers.properties.duration.display.visible",
2335
+ value: false
2265
2336
  }
2266
2337
  }
2267
2338
  ]