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