@meduza/ui-kit-2 0.1.15 → 0.1.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.15",
+  "version": "0.1.17",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/DotsOnImage/DotsOnImage.module.css

@@ -8,7 +8,7 @@
   width: 100%;
 }
 
-.isVisible .dot {
+.isVisible .marker {
   animation: show 400ms ease both 500ms;
 }
 
@@ -18,7 +18,13 @@
 
   width: 28px;
   height: 28px;
-  margin: -14px 0 0 -14px;
+
+  will-change: opacity;
+}
+
+.marker {
+  width: 100%;
+  height: 100%;
   padding: 0;
 
   cursor: pointer;
@@ -41,14 +47,14 @@
   will-change: opacity;
 }
 
-.dot svg {
+.marker svg {
   display: block;
 
   will-change: opacity;
 }
 
-.dot:hover,
-.dot.isActive {
+.marker:hover,
+.marker.isActive {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1);
 }
 

package/src/DotsOnImage/index.tsx

@@ -17,6 +17,7 @@ import styles from './DotsOnImage.module.css'
 export const DotsOnImage: React.FC<DotsOnImageProps> = ({
   block: { optimized, width, height, credit, display, dots }
 }) => {
+  const [ratio, setRatio] = useState(1)
   const [ref, inView, entry] = useInView({
     threshold: 0.5
   })
@@ -31,6 +32,7 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
   })
 
   const [visible, setVisible] = useState(false)
+  const defaultWidth = 375
 
   useEffect(() => {
     if (entry && entry.boundingClientRect && entry.boundingClientRect.y < 0) {
@@ -54,6 +56,24 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
     return () => document.removeEventListener('click', handleClickOutside)
   }, [popover])
 
+  useEffect(() => {
+    setDotSize()
+    window.addEventListener('resize', setDotSize)
+
+    return () => document.removeEventListener('resize', setDotSize)
+  }, [visible])
+
+  const setDotSize = () => {
+    const width = window.innerWidth
+
+    if (width < defaultWidth) {
+      const ratio = width / defaultWidth
+      setRatio(ratio)
+    } else {
+      setRatio(1)
+    }
+  }
+
   const handleClickOutside = (event: MouseEvent): void => {
     const path = event.composedPath()
 
@@ -100,25 +120,36 @@ export const DotsOnImage: React.FC<DotsOnImageProps> = ({
 
       <div ref={container}>
         {dots.map((dot) => (
-          <button
-            className={makeClassName([
-              [styles.dot, true],
-              [styles.isActive, dot.id === popover.id]
-            ])}
-            type="button"
+          <div
+            className={styles.dot}
             key={dot.id}
             style={{
               top: `${dot.position.y}%`,
               left: `${dot.position.x}%`,
-              backgroundColor: dot.icon.color
+              transform: `scale(${ratio}) translate(-${50 / ratio}%, -${
+                50 / ratio
+              }%)`
             }}
-            onClick={(): void => handleDotClick(dot)}
           >
-            {dot.icon.type === 'svg' && (
-              <div dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }} />
-            )}
-            {dot.icon.type === 'number' && dot.icon.number}
-          </button>
+            <button
+              className={makeClassName([
+                [styles.marker, true],
+                [styles.isActive, dot.id === popover.id]
+              ])}
+              type="button"
+              style={{
+                backgroundColor: dot.icon.color
+              }}
+              onClick={(): void => handleDotClick(dot)}
+            >
+              {dot.icon.type === 'svg' && (
+                <div
+                  dangerouslySetInnerHTML={{ __html: dot.icon.svg_string }}
+                />
+              )}
+              {dot.icon.type === 'number' && dot.icon.number}
+            </button>
+          </div>
         ))}
 
         {popover.show && (