{"version":3,"file":"image-hotspot.0xvNmX3C5J.js","sources":["../../../../src/organisms/image-hotspot/HotspotButton.tsx","../../../../src/_helpers/hotspotReducer.tsx","../../../../src/organisms/image-hotspot/HotspotContainer.tsx","../../../../src/_helpers/hotspot.ts","../../../../src/organisms/image-hotspot/ImageHotspot.tsx"],"sourcesContent":["import { HotspotButtonModel } from '@_types/organisms';\nimport { getModifiers } from '@helpers/functions';\n\ninterface Props extends HotspotButtonModel {\n  handleButtonClick?: () => void;\n}\n\nconst HotspotButton = (model: Props) => {\n  const styleModifiers = getModifiers(model, 'arjo-o-hotspot-button');\n  const { handleButtonClick } = model;\n\n  const handleClick = () => {\n    handleButtonClick && handleButtonClick();\n  };\n\n  return <div className={`${styleModifiers}`} aria-hidden=\"true\" aria-label=\"hotspot-label\" onClick={handleClick}></div>;\n};\n\nexport default HotspotButton;\n","import { Dispatch, createContext } from 'react';\nimport { Breakpoint } from './use-breakpoint';\n\nexport enum ActionTypeENUM {\n  BREAKPOINT = 'BREAKPOINT',\n}\n\ntype BreakpointAction = {\n  type?: ActionTypeENUM.BREAKPOINT;\n  payload?: Breakpoint;\n};\n\ntype ActionType = BreakpointAction;\n\ninterface StateType {\n  breakpoint?: Breakpoint;\n}\n\nconst StateCContext = createContext<StateType>({});\nconst DispatchContext = createContext<Dispatch<ActionType> | undefined>(undefined);\n\nconst reducer = (state: StateType, action: ActionType): StateType => {\n  switch (action.type) {\n    case ActionTypeENUM.BREAKPOINT:\n      return { ...state, breakpoint: action.payload };\n\n    default:\n      return state;\n  }\n\n  return {};\n};\n\nexport { reducer as hotspotReducer, StateCContext as HotSpotStateContext, DispatchContext as HotSpotDispatchContext };\n","import { HotspotContainerModel } from '@_types/organisms';\nimport { getModifiers } from '@helpers/functions';\nimport HotspotButton from './HotspotButton';\nimport { useEffect, useReducer, useRef, useState } from 'react';\nimport { ActionTypeENUM, HotSpotDispatchContext, HotSpotStateContext, hotspotReducer } from '@helpers/hotspotReducer';\nimport useBreakpoint, { Breakpoint } from '@helpers/use-breakpoint';\nimport Icon from '@atoms/icons/Icon';\nimport { useOnClickOutside } from '@xpack/root/useClickOutside';\n\ninterface Props extends HotspotContainerModel {\n  handlePopupClose?: () => void;\n  handlePopupOpen?: () => void;\n}\n\nconst HotspotContainer = (model: Props) => {\n  const styleModifiers = getModifiers(model, 'arjo-o-hotspot-container');\n  const { x, y, title, description, video, handlePopupClose, handlePopupOpen } = model;\n  const [open, setOpen] = useState<boolean>(false);\n  const breakpoint = useBreakpoint();\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const [state, dispatch] = useReducer(hotspotReducer, {});\n\n  const handleButtonClick = () => {\n    if (breakpoint === Breakpoint.desktop) {\n      return;\n    }\n\n    !open && handlePopupOpen && handlePopupOpen();\n    setOpen(true);\n  };\n\n  useEffect(() => {\n    dispatch({\n      type: ActionTypeENUM.BREAKPOINT,\n      payload: breakpoint,\n    });\n  }, [breakpoint]);\n\n  const handleCloseButton = () => {\n    open && handlePopupClose && handlePopupClose();\n    setOpen(false);\n  };\n\n  useOnClickOutside(contentRef, () => {\n    open && handlePopupClose && handlePopupClose();\n    setOpen(false);\n  });\n\n  const style: React.CSSProperties = {\n    '--x': x,\n    '--y': y,\n  } as React.CSSProperties;\n\n  return (\n    <HotSpotStateContext.Provider value={state}>\n      <HotSpotDispatchContext.Provider value={dispatch}>\n        <div className={`${styleModifiers} ${open ? 'open' : ''}`} style={style}>\n          <HotspotButton handleButtonClick={handleButtonClick} />\n\n          <div className=\"arjo-o-hotspot-container__inner\">\n            <div className=\"arjo-o-hotspot-container__content\" ref={contentRef}>\n              {open && (\n                <div className=\"arjo-o-hotspot-container__close\" onClick={handleCloseButton}>\n                  <Icon iconPath={'/assets/images/icons.svg#arjo-ico-btn-close'} />\n                </div>\n              )}\n\n              <div className=\"arjo-o-hotspot-container__scroll\">\n                {title && <h3 className=\"arjo-o-hotspot-container__title\">{title}</h3>}\n\n                {description && <div className=\"arjo-o-hotspot-container__description\" dangerouslySetInnerHTML={{ __html: description }}></div>}\n\n                {video && <div className=\"arjo-o-hotspot-container__video\" dangerouslySetInnerHTML={{ __html: video }}></div>}\n              </div>\n            </div>\n          </div>\n        </div>\n      </HotSpotDispatchContext.Provider>\n    </HotSpotStateContext.Provider>\n  );\n};\n\nexport default HotspotContainer;\n","enum EnumPosition {\n  TOP = 'top',\n  RIGHT = 'right',\n  BOTTOM = 'bottom',\n  LEFT = 'left',\n}\n\nconst ARROW_WIDTH = 20;\n\nconst calculateHotspotPosition = (wrapper: HTMLElement, image: HTMLElement) => {\n  const hotspots = wrapper.querySelectorAll<HTMLElement>('.arjo-o-hotspot-container');\n\n  hotspots.forEach((hotspot) => {\n    fixWidthHotspotOverlap(hotspot);\n\n    const y = parseFloat(hotspot.style.getPropertyValue('--y') || '0');\n    const position = getPositionRelativeToImage(hotspot, image);\n\n    if (!position) {\n      return;\n    }\n\n    const { right, bottom, left, rightViewport, leftViewport, contentWidth } = position;\n    let enumPosition = bottom < 0 && y > 50 ? EnumPosition.TOP : EnumPosition.BOTTOM;\n\n    if (right < 0 && leftViewport - contentWidth / 2 - ARROW_WIDTH > 0) {\n      enumPosition = EnumPosition.LEFT;\n    }\n\n    if (left < 0 && rightViewport - contentWidth / 2 - ARROW_WIDTH > 0) {\n      enumPosition = EnumPosition.RIGHT;\n    }\n\n    setHotspotClassByPosition(hotspot, enumPosition);\n  });\n};\n\nconst getPositionRelativeToImage = (hotspot: HTMLElement, image: HTMLElement) => {\n  const contentNode = hotspot.querySelector<HTMLElement>('.arjo-o-hotspot-container__content');\n\n  if (!contentNode) {\n    return;\n  }\n\n  const imageRect = image.getBoundingClientRect();\n  const contentRect = contentNode.getBoundingClientRect();\n\n  return {\n    right: imageRect.right - contentRect.right,\n    bottom: imageRect.bottom - contentRect.bottom,\n    left: contentRect.left - imageRect.left,\n    top: contentRect.top - imageRect.top,\n    rightViewport: window.innerWidth - contentRect.right,\n    leftViewport: contentRect.left,\n    contentWidth: contentRect.width,\n  };\n};\n\nconst setHotspotClassByPosition = (hotspot: HTMLElement, position: EnumPosition) => {\n  switch (position) {\n    case EnumPosition.TOP:\n      hotspot.classList.add('dialog-top');\n      break;\n\n    case EnumPosition.RIGHT:\n      hotspot.classList.add('dialog-right');\n      break;\n\n    case EnumPosition.LEFT:\n      hotspot.classList.add('dialog-left');\n      break;\n\n    default:\n      break;\n  }\n};\n\nconst fixWidthHotspotOverlap = (hotspot: HTMLElement) => {\n  const contentNode = hotspot.querySelector<HTMLElement>('.arjo-o-hotspot-container__content');\n\n  if (!contentNode) {\n    return;\n  }\n\n  hotspot.classList.remove('dialog-top', 'dialog-right', 'dialog-left');\n  hotspot.classList.add('no-wrap');\n\n  if (contentNode.scrollWidth > 300) {\n    hotspot.classList.remove('no-wrap');\n    hotspot.classList.add('fix-width');\n  }\n};\n\nexport { calculateHotspotPosition };\n","import { ImageHotspotModel } from '@_types/organisms';\nimport Picture from '@atoms/pictures/Picture';\nimport { getModifiers } from '@helpers/functions';\nimport HotspotContainer from './HotspotContainer';\nimport { useEffect, useRef, useState } from 'react';\nimport { calculateHotspotPosition } from '@helpers/hotspot';\n\nconst ImageHotspot = (model: ImageHotspotModel) => {\n  const styleModifiers = getModifiers(model, 'arjo-o-image-hotspot');\n  const { image, hotspots } = model;\n  const imageRef = useRef<HTMLDivElement>(null);\n  const hotspotsRef = useRef<HTMLDivElement>(null);\n  const [active, setActive] = useState<boolean>(false);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  useEffect(() => {\n    const imageElement = imageRef.current;\n    const hotspotsElement = hotspotsRef.current;\n\n    if (imageElement && hotspotsElement) {\n      calculateHotspotPosition(hotspotsElement, imageElement);\n    }\n  });\n\n  const handlePopupClose = () => {\n    setActive(false);\n  };\n\n  const handlePopupOpen = () => {\n    setActive(true);\n  };\n\n  const handleMouseEnter = () => {\n    setIsFocused(true);\n  };\n\n  const handleMouseLeave = () => {\n    setIsFocused(false);\n  };\n\n  return (\n    <div\n      className={`${styleModifiers} ${active ? 'open' : ''} ${isFocused ? 'focused' : ''}`}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      <div className=\"arjo-o-image-hotspot__inner\">\n        {image && (\n          <div className=\"arjo-o-image-hotspot__image\" ref={imageRef}>\n            <Picture {...image} />\n          </div>\n        )}\n\n        {hotspots && (\n          <div className=\"arjo-o-image-hotspot__hotspots\" ref={hotspotsRef}>\n            {hotspots.map((hotspot, index) => (\n              <HotspotContainer key={index} {...hotspot} handlePopupClose={handlePopupClose} handlePopupOpen={handlePopupOpen} />\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default ImageHotspot;\n"],"names":["HotspotButton","model","styleModifiers","getModifiers","handleButtonClick","handleClick","jsx","ActionTypeENUM","StateCContext","createContext","DispatchContext","reducer","state","action","HotspotContainer","x","y","title","description","video","handlePopupClose","handlePopupOpen","open","setOpen","useState","breakpoint","useBreakpoint","contentRef","useRef","dispatch","useReducer","hotspotReducer","Breakpoint","useEffect","handleCloseButton","useOnClickOutside","style","HotSpotStateContext","HotSpotDispatchContext","jsxs","Icon","ARROW_WIDTH","calculateHotspotPosition","wrapper","image","hotspot","fixWidthHotspotOverlap","position","getPositionRelativeToImage","right","bottom","left","rightViewport","leftViewport","contentWidth","enumPosition","setHotspotClassByPosition","contentNode","imageRect","contentRect","ImageHotspot","hotspots","imageRef","hotspotsRef","active","setActive","isFocused","setIsFocused","imageElement","hotspotsElement","handleMouseEnter","handleMouseLeave","Picture","index"],"mappings":"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"}