{"version":3,"file":"image-gallery.js","mappings":"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","sources":["webpack://empori-base/./src/controls/ImageGallery.tsx","webpack://empori-base/./src/backoffice/controllers/common.ts","webpack://empori-base/./src/controls/ImageGalleryFullscreen.tsx"],"sourcesContent":["import { Swiper, Navigation, SwiperOptions, Autoplay } from 'swiper';\r\nimport { ImageGalleryModel } from '../empracoTypes';\r\nimport { ImageGalleryFullscreenWrapper } from './ImageGalleryFullscreen';\r\nimport { render } from '../main';\r\n\r\nexport default function ImageGallery(parent: HTMLDivElement | null, model: ImageGalleryModel) {\r\n  if (!parent) {\r\n    return;\r\n  }\r\n\r\n  const slides = model.imageGalleryEditorModel.slides;\r\n\r\n  const options: SwiperOptions = {\r\n    modules: [\r\n      Navigation,\r\n      Autoplay\r\n    ],\r\n    autoplay: model.autoplay ? { delay: model.delay } : false,\r\n    lazy: true,\r\n    loop: slides.length > 1,\r\n    autoHeight: model.staticHeight === 0,\r\n    navigation: {\r\n      nextEl: '.swiper-button-next',\r\n      prevEl: '.swiper-button-prev'\r\n    },\r\n    spaceBetween: 0\r\n  };\r\n\r\n  const swiper = new Swiper(parent, options);\r\n\r\n  if (model.fullscreenEnabled) {\r\n    const fsSlides = slides.map(slide => slide.image);\r\n\r\n    if (!fsSlides) {\r\n      return;\r\n    }\r\n\r\n    const fsTrigger = parent.querySelector('.empori-image-gallery-fullscreen-trigger');\r\n\r\n    if (!fsTrigger) {\r\n      return;\r\n    }\r\n\r\n    const fsEl = document.createElement('div');\r\n    fsEl.classList.add('empori-fullscreen-image-gallery');\r\n    document.body.appendChild(fsEl);\r\n\r\n    render(\r\n      <ImageGalleryFullscreenWrapper\r\n        slideImgUrls={fsSlides}\r\n        onClose={() => fsEl.classList.remove('visible')} />, fsEl);\r\n\r\n    fsTrigger.addEventListener('click', e => {\r\n      fsEl.classList.add('visible');\r\n    });\r\n  }\r\n\r\n  return swiper;\r\n}","export interface EnumListItem {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport interface MediaSelectionItem {\r\n  name: string;\r\n  id: number;\r\n  udi: string;\r\n  icon: string;\r\n  trashed: boolean;\r\n  key: string;\r\n  parentId: number;\r\n  alias: string;\r\n  path: string;\r\n  metaData: MediaSelectionMetaData;\r\n  thumbnail: string;\r\n  image: string;\r\n  updateDate: string;\r\n  filtered: boolean | null;\r\n  $$hashKey: string;\r\n  isFolder: boolean;\r\n  width: number;\r\n  height: number;\r\n  aspectRatio: number;\r\n  selectable: boolean;\r\n  flexStyle: MediaSelectionFlexStyle;\r\n  selected: boolean;\r\n  altText?: string;\r\n}\r\n\r\ninterface MediaSelectionMetaData {\r\n  ContentTypeAlias: string;\r\n  UpdateDate: string;\r\n  MediaPath: string;\r\n  IsContainer: boolean;\r\n}\r\n\r\ninterface MediaSelectionFlexStyle {\r\n  flex: string;\r\n  'max-width': string;\r\n  'min-width': string;\r\n  'min-height': string;\r\n}\r\n\r\nexport interface MediaPickerOutput {\r\n  multiPicker: boolean;\r\n  view: string;\r\n  size: string;\r\n  updatedMediaNodes: any[]; // TODO: Find out what this does contain\r\n  infiniteMode: boolean;\r\n  inFront: boolean;\r\n  moveRight: boolean;\r\n  level: number;\r\n  styleIndex: number;\r\n  animating: boolean;\r\n  $$hashKey: string;\r\n  selection: MediaSelectionItem[];\r\n  title: string;\r\n}\r\n\r\nexport interface LinkPickerOutPut {\r\n  target: LinkPickerTarget;\r\n}\r\n\r\nexport interface LinkPickerTarget {\r\n  anchor: string;\r\n  id: string;\r\n  name: string;\r\n  target: string;\r\n  udi: string; // Umbraco reference\r\n  url: string;\r\n}\r\n\r\nexport const isImage = (url: string) => {\r\n  return /\\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);\r\n};\r\n\r\nexport const isVideo = (url: string) => {\r\n  return /\\.(mp4|ogg|mov)$/.test(url);\r\n};","import * as React from 'react';\r\nimport { Swiper, SwiperSlide, useSwiper } from 'swiper/react';\r\nimport ReactDOM from 'react-dom';\r\nimport { isImage } from '../backoffice/controllers/common';\r\nimport { className } from '@empori/util';\r\n\r\nexport function FullscreenSlide(slide: string) {\r\n  const isSlideImage = isImage(slide);\r\n\r\n  return(\r\n    <div className='empori-fullscreen-image-gallery-item'\r\n      style={isSlideImage\r\n        ? { backgroundImage: `url(${slide})`}\r\n        : { backgroundColor: 'black' }}>\r\n      {!isSlideImage &&\r\n        <video controls={true}>\r\n          <source src={slide} type=\"video/mp4\" />\r\n          <source src={slide} type=\"video/ogg\" />\r\n          Your browser does not support the video tag.\r\n        </video>}\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface ToobarProps {\r\n  onClose: () => void;\r\n  totalSlides: number;\r\n  currentSlideIndex: number;\r\n}\r\n\r\nexport function FullscreenToolbar(props: ToobarProps) {\r\n  const [ ready, getReady ] = React.useState<boolean>(false);\r\n  const swiper = useSwiper();\r\n  const prevPossible = props.currentSlideIndex !== 0;\r\n  const nextPossible = props.currentSlideIndex + 1 < props.totalSlides;\r\n\r\n  // Only for a simple fade-in animation.\r\n  React.useEffect(() => {\r\n    setTimeout(() => {\r\n      getReady(true);\r\n    }, 500);\r\n  }, []);\r\n\r\n  return(\r\n    <div className={className('empori-fullscreen-toolbar element-flex', { 'is-ready': ready })}>\r\n      <button\r\n        className={prevPossible ? 'enabled' : 'disabled'}\r\n        disabled={!prevPossible}\r\n        onClick={() => swiper.slidePrev()}>\r\n        <i className='fa-regular fa-chevron-left'></i>\r\n      </button>\r\n      <span>\r\n        {`${props.currentSlideIndex + 1}/${props.totalSlides}`}\r\n      </span>\r\n      <button onClick={() => props.onClose()}>\r\n        <i className='fa-regular fa-times'></i>\r\n      </button>\r\n      <button\r\n        className={nextPossible ? 'enabled' : 'disabled'}\r\n        disabled={!nextPossible}\r\n        onClick={() => swiper.slideNext()}>\r\n        <i className='fa-regular fa-chevron-right'></i>\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface ImageGalleryFullscreenProps {\r\n  slideImgUrls: string[];\r\n  toggled: boolean;\r\n  viewingIndex: number;\r\n  open: () => void;\r\n  close: () => void;\r\n  setIndex: (index: number) => void;\r\n}\r\n\r\nexport function ImageGalleryFullscreen(props: ImageGalleryFullscreenProps) {\r\n  const { toggled, slideImgUrls } = props;\r\n\r\n  if (!toggled || !slideImgUrls) {\r\n    return <div className='empori-image-gallery-fullscreen-trigger'\r\n      onClick={() => props.open()}>\r\n      <i className='fa-regular fa-expand'></i>\r\n    </div>;\r\n  }\r\n\r\n  return(\r\n    ReactDOM.createPortal(\r\n      <div className='empori-fullscreen-image-gallery visible'>\r\n        <Swiper\r\n          onSlideChange={swiper => props.setIndex(swiper.realIndex)}\r\n          initialSlide={props.viewingIndex}>\r\n          {slideImgUrls.map((slide, index) =>\r\n            <SwiperSlide key={index}>\r\n              {FullscreenSlide(slide)}\r\n            </SwiperSlide>)}\r\n          <FullscreenToolbar\r\n            onClose={props.close}\r\n            totalSlides={slideImgUrls.length}\r\n            currentSlideIndex={props.viewingIndex} />\r\n        </Swiper>\r\n      </div>, document.body\r\n    )\r\n  );\r\n}\r\n\r\ninterface ImageGalleryFullscreenWrapperProps {\r\n  slideImgUrls: string[];\r\n  onClose: () => void;\r\n}\r\n\r\nexport function ImageGalleryFullscreenWrapper(props: ImageGalleryFullscreenWrapperProps) {\r\n  const [currentIndex, setCurrentIndex] = React.useState<number>(0);\r\n\r\n  return(\r\n    <Swiper\r\n      onSlideChange={fsSwiper => setCurrentIndex(fsSwiper.realIndex)}\r\n      initialSlide={currentIndex}>\r\n      {props.slideImgUrls.map((slide, index) =>\r\n        <SwiperSlide key={index}>\r\n          {FullscreenSlide(slide)}\r\n        </SwiperSlide>)}\r\n      <FullscreenToolbar\r\n        onClose={props.onClose}\r\n        totalSlides={props.slideImgUrls.length}\r\n        currentSlideIndex={currentIndex} />\r\n    </Swiper>\r\n  );\r\n}"],"names":["ImageGallery","parent","model","slides","imageGalleryEditorModel","options","modules","autoplay","delay","lazy","loop","length","autoHeight","staticHeight","navigation","nextEl","prevEl","spaceBetween","swiper","fullscreenEnabled","fsSlides","map","slide","image","fsTrigger","querySelector","fsEl","document","createElement","classList","add","body","appendChild","slideImgUrls","onClose","remove","addEventListener","e","isImage","url","test","FullscreenSlide","isSlideImage","className","style","backgroundImage","backgroundColor","controls","src","type","FullscreenToolbar","props","ready","getReady","prevPossible","currentSlideIndex","nextPossible","totalSlides","setTimeout","disabled","onClick","slidePrev","slideNext","ImageGalleryFullscreen","toggled","onSlideChange","setIndex","realIndex","initialSlide","viewingIndex","index","close","open","ImageGalleryFullscreenWrapper","currentIndex","setCurrentIndex","fsSwiper"],"sourceRoot":""}