@meduza/ui-kit-2 0.1.10 → 0.1.12

package/dist/ui-kit-2.esm.js

@@ -433,10 +433,17 @@ var Image = function Image(_ref) {
       lightBox = _useContext.lightBox;
 
   var handleClick = function handleClick() {
+    if (!fullscreen || !lightBox || optimized && !optimized.original) {
+      return;
+    }
+
     var _viewportSize = viewportSize(),
         viewportWidth = _viewportSize.width;
 
-    if (optimized && !optimized.original || !lightBox || viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen) {
+    var disableFullscreenDesktop = viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.desktop;
+    var disableFullscreenMobile = viewportWidth < MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen.mobile;
+
+    if (disableFullscreenDesktop || disableFullscreenMobile) {
       return;
     }
 
@@ -454,7 +461,7 @@ var Image = function Image(_ref) {
 
   var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
   return React.createElement("div", {
-    className: makeClassName([[styles$4.root, true], [styles$4.fullscreen, fullscreen]]),
+    className: makeClassName([[styles$4.root, true], [styles$4.fullscreen, fullscreen && fullscreen.desktop]]),
     style: blockStyles,
     "data-testid": "image"
   }, React.createElement("div", {
@@ -597,7 +604,7 @@ var Footnote = function Footnote(_ref) {
   }, children));
 };
 
-var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","popover":"DotsOnImage-module_popover__35Cpj","popoverTitle":"DotsOnImage-module_popoverTitle__343d8","popoverBody":"DotsOnImage-module_popoverBody__2MSn7","popoverText":"DotsOnImage-module_popoverText__3v02w","dismiss":"DotsOnImage-module_dismiss__1EWXd"};
+var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","dot":"DotsOnImage-module_dot__H1wua","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T","popoverTitle":"DotsOnImage-module_popoverTitle__343d8","popoverBody":"DotsOnImage-module_popoverBody__2MSn7","popoverText":"DotsOnImage-module_popoverText__3v02w","dismiss":"DotsOnImage-module_dismiss__1EWXd"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
   var _ref$block = _ref.block,
@@ -619,11 +626,20 @@ var DotsOnImage = function DotsOnImage(_ref) {
 
   var handleDotClick = function handleDotClick(dot) {
     var shouldShow = dot.id !== popover.id;
+    var side = dot.position.x > 50 ? 'isLeft' : 'isRight';
+    var align = dot.position.y > 50 ? 'isBottom' : 'isTop';
+    var style = {
+      top: dot.position.y + "%",
+      left: dot.position.x + "%"
+    };
     setPopover({
       title: dot.title,
       body: dot.body,
       show: shouldShow,
-      id: shouldShow ? dot.id : null
+      id: shouldShow ? dot.id : null,
+      style: style,
+      side: side,
+      align: align
     });
   };
 
@@ -646,7 +662,6 @@ var DotsOnImage = function DotsOnImage(_ref) {
         return handleDotClick(dot);
       }
     }, dot.icon.type === 'svg' && React.createElement("div", {
-      className: styles$7.icon,
       dangerouslySetInnerHTML: {
         __html: dot.icon.svg_string
       }
@@ -658,9 +673,14 @@ var DotsOnImage = function DotsOnImage(_ref) {
     width: width,
     height: height,
     alt: credit,
-    display: display
+    display: display,
+    fullscreen: {
+      mobile: false,
+      desktop: false
+    }
   })), popover.show && React.createElement(React.Fragment, null, viewportSize().width >= MediaQuerySizes.LANDSCAPE_TABLET ? React.createElement("div", {
-    className: styles$7.popover
+    className: makeClassName([[styles$7.popover, true], [styles$7[popover.side], !!popover.side], [styles$7[popover.align], !!popover.align]]),
+    style: popover.style
   }, React.createElement(Footnote, {
     onClose: function onClose() {
       setPopover({
@@ -1156,7 +1176,10 @@ var EmbedBlock = function EmbedBlock(_ref) {
           return React.createElement("div", {
             className: styles$i.figure
           }, (small || optimized) && React.createElement(Image, {
-            fullscreen: block.data.fullscreen,
+            fullscreen: {
+              desktop: block.data.fullscreen,
+              mobile: true
+            },
             source: !optimized && [small, large],
             optimized: block.data.optimized,
             width: block.data.width,