';\r\n }\r\n\r\n function getThumbnailSlideHtml(cssClass, imageUrl, alt) {\r\n return '
' +\r\n '
' +\r\n '' +\r\n '
' +\r\n '
';\r\n }\r\n\r\n function displayCaptionForCurrentSlide(swiper) { \r\n window.currentUrl = window.location.href;\r\n var slide = swiper.slides[swiper.realIndex];\r\n window.photoSwipeIndex = swiper.realIndex; \r\n // Taking the caption for variant images from the Javascript object, and for other images from their data-slide-caption attribute.\r\n // (This is because double quote characters are causing problems in variant image slide, which are generated dynamically in runtime.)\r\n var imageId = $(slide).data(\"slideId\");\r\n var variantImage = mediaGalleryData.variantImages ? mediaGalleryData.variantImages[imageId] : null;\r\n var captionHtmlEncoded = variantImage ? variantImage.caption : $(slide).data(\"slideCaption\");\r\n // caption string is HTML encoded (so it doesn't mess up Javascript object or data attribute), now we have to decode it back\r\n var textArea = document.createElement('textarea');\r\n textArea.innerHTML = captionHtmlEncoded;\r\n var caption = textArea.value;\r\n\r\n $(slide).closest(mediaGallerySelector).find(\".caption\").empty().html(caption);\r\n if($('.media-gallery').hasClass('video-playing')) {\r\n $('.media-gallery').removeClass('video-playing'); \r\n $('.media-gallery .video-embed').each(function(){\r\n var el_src = $(this).attr(\"src\");\r\n $(this).attr(\"src\",el_src);\r\n });\r\n monitorIframe(); \r\n }\r\n }\r\n\r\n // thumbsClick parameter tell us if we have clicked on thumbnail (true), or we clicked on image in carousel (false)\r\n // if we clicked on image - open photo swipe\r\n // if we clicked on thumbnail - don't open photo swipe, just change carousel slide or if photo swipe is already opened, just change photo swipe image to follow thumbnail image we clicked\r\n function displayPhotoSwipe(event) {\r\n var urlParams = new URLSearchParams(window.location.search);\r\n var variant = urlParams.get('v');\r\n var photoSwipeItems = [];\r\n var galleryNumber = event.data.galleryNumber; \r\n if (galleryNumber)\r\n photoSwipeItems = photoSwipeGalleryItems[galleryNumber - 1];\r\n var datasource = photoSwipeItems.filter(x => x.variant == variant || x.variant == \"all\"); \r\n if (datasource && datasource.length > 0) {\r\n for (var i = 0; i < datasource.length; i++) {\r\n var datasourceItem = datasource[i];\r\n // remove maximum width for images from carousel, show them in the full size\r\n datasourceItem.src = datasourceItem.src.replace(\"mw=700\", \"\");\r\n }\r\n } \r\n //check if PhotoSwipe is already opened\r\n var photoSwipeOpened = $(\".pswp--open\");\r\n var isPhotoSwipeOpened = photoSwipeOpened && photoSwipeOpened.length; \r\n // for some reason this is not working because of that we are using jquery selector\r\n // const pswp = window.lightbox.pswp; \r\n var thumbsClick = event.data.thumbsClick; \r\n if (thumbsClick == true) {\r\n if (isPhotoSwipeOpened) {\r\n const pswp = window.lightbox.pswp;\r\n if (!pswp) window.lightbox.loadAndOpen(window.photoSwipeIndex, datasource);\r\n else {\r\n if (pswp.isOpen)\r\n pswp.goTo(window.photoSwipeIndex);\r\n else\r\n window.lightbox.loadAndOpen(window.photoSwipeIndex, datasource);\r\n }\r\n } \r\n }\r\n else\r\n window.lightbox.loadAndOpen(window.photoSwipeIndex, datasource);\r\n }\r\n\r\n function displayGalleryPopup(event) {\r\n if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {\r\n setTimeout(function () {\r\n //$('.easyzoom').EasyZoomMagnifierReset();\r\n\r\n if (!$(\".modal-gallery\").hasClass(\"open-modal\")) {\r\n $('.modal-gallery').addClass('open-modal');\r\n }\r\n dispatchResizeEvent();\r\n }, 250);\r\n }\r\n }\r\n\r\n function closeGalleryPopup(event) {\r\n //e.preventDefault();\r\n var data = $(\".swiper-container.main\").data();\r\n\r\n $(\".swiper-lazy.swiper-lazy-loaded\").css(\"transform\", \"translate3d(0px, 0px, 0px) scale(1)\");\r\n $(\".swiper-zoom-container\").css(\"transform\", \"translate3d(0px, 0px, 0px)\");\r\n\r\n $('.modal-gallery').removeClass('open-modal');\r\n //$('.easyzoom').EasyZoomMagnifier();\r\n\r\n dispatchResizeEvent();\r\n }\r\n\r\n function dispatchResizeEvent() {\r\n var event;\r\n if (typeof (Event) === 'function') {\r\n event = new Event('resize');\r\n } else {\r\n event = document.createEvent('Event');\r\n event.initEvent('resize', false, false);\r\n }\r\n\r\n window.dispatchEvent(event);\r\n }\r\n\r\n function updateFilteringButtonToActive(btn) {\r\n $(btn).closest(\".media-gallery-photo-video-buttons\").find(\"button\").removeClass(\"active\");\r\n $(btn).addClass(\"active\");\r\n }\r\n\r\n // for filtering videos/images\r\n window.ShowMediaGalleryInPhotoSwipe = function (btn, showVideos) { \r\n if (showVideosClicked && showVideos) return;\r\n updateFilteringButtonToActive(btn);\r\n var galleryNumber = $(btn).data(\"galleryNumber\"); \r\n // on initial load we are displaying only photos, if we click on Photo button, don't do anything\r\n var filteredVideoClicked = filteredVideosClicked.find(x => x == galleryNumber);\r\n if (!showVideos && !filteredVideoClicked) return;\r\n if (showVideos) {\r\n if (!filteredVideosClicked.includes(galleryNumber))\r\n filteredVideosClicked.push(galleryNumber);\r\n }\r\n else { \r\n if (filteredVideosClicked.includes(galleryNumber))\r\n filteredVideosClicked.splice(filteredVideosClicked.findIndex(item => item == galleryNumber), 1);\r\n }\r\n var swiperContainerSelector = \"#media_gallery_swiper_\" + galleryNumber; \r\n var videoSlideSelector = swiperContainerSelector + \" .swiper-slide[data-gallery-media-type=Video]\";\r\n var imageSlideSelector = swiperContainerSelector + \" .swiper-slide[data-gallery-media-type=Image]\";\r\n var variantImageSlideSelector = swiperContainerSelector + \" .swiper-slide[data-gallery-media-type=VariantImage]\";\r\n var swiper = getMediaGallerySwiper(galleryNumber);\r\n if (!swiper) return; // no swiper initializaed - nothing to do \r\n var changed = handleImageOrVideoSlides(swiper, galleryNumber, showVideos, imageSlideSelector, videoSlideSelector, variantImageSlideSelector);\r\n if (changed) {\r\n swiper.slideTo(0, 0);\r\n displayCaptionForCurrentSlide(swiper); \r\n swiper.update();\r\n }\r\n\r\n showVideosClicked = showVideos;\r\n }\r\n\r\n // save videos\r\n function saveVideoSlidesIfNeeded(swiper, videoSlideSelector) {\r\n var mainSliderVideos = slidesCollection.filter(x => x.sliderType == MAIN_SLIDER && x.dataType == VIDEO).map(x => x.slide);\r\n if (mainSliderVideos.length == 0) {\r\n $('div[data-gallery-media-type=\"Video\"]').removeClass(\"d-none\"); \r\n $(videoSlideSelector).each(function (index, slideElement) {\r\n var slideIndex = $(slideElement).index(\".swiper-slide\");\r\n slidesCollection.push({ \"sliderType\": MAIN_SLIDER, \"dataType\": VIDEO, \"slide\": swiper.slides[slideIndex] });\r\n slidesCollection.push({ \"sliderType\": THUMBS_SLIDER, \"dataType\": VIDEO, \"slide\": swiper.thumbs.swiper.slides[slideIndex] }); \r\n swiper.removeSlide(slideIndex);\r\n swiper.thumbs.swiper.removeSlide(slideIndex);\r\n });\r\n }\r\n }\r\n\r\n function handleImageOrVideoSlides(swiper, galleryNumber, showVideos, imageSlideSelector, videoSlideSelector, variantImageSlideSelector) { \r\n var changed = removeSlides(swiper, variantImageSlideSelector); \r\n $(\"#media_gallery_swiper_\" + galleryNumber).closest(\".media-gallery\").find(\".caption\").html(\"\");\r\n if (showVideos) { \r\n // we need to save videos if it is case study or sample rooms, they don't have variant images\r\n saveVideoSlidesIfNeeded(swiper, videoSlideSelector);\r\n\r\n // save all images and remove them from slider\r\n $(imageSlideSelector).each(function (index, slideElement) {\r\n var slideIndex = $(slideElement).index(\".swiper-slide\");\r\n slidesCollection.push({ \"sliderType\": MAIN_SLIDER, \"dataType\": IMAGE, \"slide\": swiper.slides[slideIndex] }); \r\n slidesCollection.push({ \"sliderType\": THUMBS_SLIDER, \"dataType\": IMAGE, \"slide\": swiper.thumbs.swiper.slides[slideIndex] }); \r\n swiper.removeSlide(slideIndex);\r\n swiper.thumbs.swiper.removeSlide(slideIndex);\r\n changed = true;\r\n });\r\n // add only videos\r\n var addedVideo = addTypeToSlider(swiper, VIDEO); \r\n changed = changed || addedVideo; \r\n }\r\n else { \r\n // remove all videos\r\n var removedVideo = removeSlides(swiper, videoSlideSelector); \r\n // add variant images at first\r\n var addedVariantImage = addTypeToSlider(swiper, VARIANT_IMAGE);\r\n // add images after variant images\r\n var addedImage = addTypeToSlider(swiper, IMAGE); \r\n changed = changed || removedVideo || addedImage || addedVariantImage; \r\n }\r\n\r\n return changed;\r\n }\r\n\r\n function removeSlides(swiper, slideSelector) {\r\n var changed = false;\r\n $(slideSelector).each(function (index, slideElement) {\r\n var slideIndex = $(slideElement).index(\".swiper-slide\");\r\n swiper.removeSlide(slideIndex);\r\n swiper.thumbs.swiper.removeSlide(slideIndex);\r\n changed = true;\r\n });\r\n\r\n return changed;\r\n }\r\n \r\n return {\r\n position: position,\r\n displayVariantImages: displayVariantImages,\r\n displayCaptionForCurrentSlide: displayCaptionForCurrentSlide,\r\n mediaGallerySelector: mediaGallerySelector,\r\n swiperSelector: swiperSelector,\r\n thumbsSelector: thumbsSelector,\r\n displayGalleryPopup: displayPhotoSwipe,\r\n closeGalleryPopup: closeGalleryPopup,\r\n initZoomAndPinch: initZoomAndPinch\r\n };\r\n });\r\n\n",
"require([\r\n \"MediaGallery/mediaGallery\"\r\n],\r\n function (mediaGallery) {\r\n\r\n window.backButtonClickedFromPhotoSwipe = false;\r\n\r\n function initAllMediaGalleriesOnPage() {\r\n // process all swipers that make up media galleries\r\n $(mediaGallery.swiperSelector).each(function (index, swiperContainer) { \r\n // initialize accompanying thumbs swiper\r\n var thumbsSwiper = null;\r\n var thumbsContainer = $(swiperContainer).closest(mediaGallery.mediaGallerySelector).find(mediaGallery.thumbsSelector);\r\n if (thumbsContainer.length) {\r\n thumbsSwiper = initializeSwiper(thumbsContainer[0], null, true);\r\n }\r\n // intialize main swiper\r\n var swiper = initializeSwiper(swiperContainer, thumbsSwiper);\r\n swiper.on(\"slideChange\", function () { mediaGallery.displayCaptionForCurrentSlide(this); });\r\n\r\n // if first slide is video it will not display swiper, because videos are hidden by default, we need to go to first visible slide\r\n //var slides = swiper.slides;\r\n //if (slides && slides.length) {\r\n // for (var i = 0; i < slides.length; i++) {\r\n // var slide = slides[i];\r\n // if ($(slide).hasClass(\"d-none\")) continue;\r\n // swiper.slideTo(i);\r\n // break;\r\n // }\r\n //}\r\n\r\n //swiper.on(\"zoomChange\", onZoomChange); not using the zoom icons any more\r\n });\r\n // ZOOM ICONS FUNCTIONALITY\r\n //$(mediaGallery.mediaGallerySelector).find(\".zoom-icon i\").off(\"click\").on(\"click\", toggleZoom); not using the zoom icons any more\r\n\r\n // Media Gallery popup functionality\r\n $('.media-gallery .main .swiper-slide').off('click').on('click', function (e) {\r\n if ($(\".modal-gallery\").hasClass(\"open-modal\")) {\r\n //toggleZoom(e); not using this way of activating zoom any more\r\n } else { \r\n var swiperElement = $(this).closest(mediaGallery.swiperSelector);\r\n if (swiperElement && swiperElement.length) {\r\n e.data = {};\r\n e.data.galleryNumber = $(swiperElement).attr(\"id\").replace(\"media_gallery_swiper_\", \"\");\r\n }\r\n mediaGallery.displayGalleryPopup(e);\r\n }\r\n });\r\n $('.popup .close').off('click').on('click', mediaGallery.closeGalleryPopup);\r\n\r\n $(\"body\").off('click').on('click', function (e) {\r\n //check if we click inside popup\r\n //if it is click inside popup, don't do anything\r\n const isInsidePopup = e.target.closest(\".popup\"); \r\n if (!isInsidePopup && $(\".modal-gallery\").hasClass(\"open-modal\"))\r\n mediaGallery.closeGalleryPopup();\r\n });\r\n\r\n $(document).on('keydown', function (event) {\r\n if (event.key == \"Escape\") {\r\n if ($(\".modal-gallery\").hasClass(\"open-modal\"))\r\n mediaGallery.closeGalleryPopup();\r\n }\r\n });\r\n\r\n // EasyZoom and PinchZoom init\r\n mediaGallery.initZoomAndPinch();\r\n }\r\n\r\n function initializeSwiper(swiperContainer, accompanyingThumbsSwiper, isThumbs) {\r\n var data = $(swiperContainer).data();\r\n var swiperParameters = {\r\n loop: false,\r\n slidesPerView: data.numberOfVisibleSlides ? data.numberOfVisibleSlides : 'auto',\r\n spaceBetween: 20,\r\n lazy: !isThumbs,\r\n freeMode: isThumbs,\r\n watchSlidesVisibility: isThumbs,\r\n watchSlidesProgress: isThumbs,\r\n thumbs: { swiper: accompanyingThumbsSwiper },\r\n zoom: true,\r\n\r\n // Image loaded event\r\n on: {\r\n lazyImageReady: function (slideEl, imageEl) {\r\n //setTimeout(function () {\r\n if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {\r\n //if (!$(\".modal-gallery\").hasClass(\"open-modal\") && data.zoomLevel > 0) {\r\n // $(slideEl).find('.easyzoom').EasyZoomMagnifier();\r\n //}\r\n }\r\n //}, 1000);\r\n }\r\n },\r\n\r\n // Pagination\r\n pagination: {\r\n el: '#' + $(swiperContainer).attr('id') + ' .swiper-pagination',\r\n clickable: true\r\n },\r\n\r\n // Navigation arrows\r\n navigation: {\r\n nextEl: '#' + $(swiperContainer).attr('id') + ' .swiper-button-next',\r\n prevEl: '#' + $(swiperContainer).attr('id') + ' .swiper-button-prev'\r\n }\r\n };\r\n if (data.zoomLevel > 0) {\r\n swiperParameters.zoom = { maxRatio: data.zoomLevel };\r\n } else {\r\n swiperParameters.zoom = false;\r\n }\r\n if (swiperParameters.slidesPerView !== 'auto') {\r\n // reduce number of visible slides on smaller screens\r\n swiperParameters.breakpoints = {\r\n 1024: {\r\n slidesPerView: (data.numberOfVisibleSlides - 1) > 0 ? (data.numberOfVisibleSlides - 1) : 1\r\n },\r\n 768: {\r\n slidesPerView: (data.numberOfVisibleSlides - 2) > 0 ? (data.numberOfVisibleSlides - 2) : 1\r\n }\r\n /* 640: {\r\n slidesPerView: (data.numberOfVisibleSlides - 3) > 0 ? (data.numberOfVisibleSlides - 3) : 1\r\n },\r\n 320: {\r\n slidesPerView: (data.numberOfVisibleSlides - 4) > 0 ? (data.numberOfVisibleSlides - 4) : 1\r\n }\r\n */\r\n };\r\n }\r\n if (data.autoplaySeconds) {\r\n swiperParameters.autoplay = { delay: data.autoplaySeconds * 1000 };\r\n }\r\n // We are using now Photo Swipe and it has zooming, because of that we don't need zooming in swiper\r\n swiperParameters.zoom = { enabled: false };\r\n var swiper = new Swiper(swiperContainer, swiperParameters);\r\n\r\n return swiper;\r\n }\r\n\r\n /* not using the zoom icons any more\r\n function onZoomChange(scale, imageEl, slideEl) {\r\n // set the zoom icon correctly if we've zoomed in/out using standard Swiper functionality\r\n var zoomIconElement = $(slideEl).closest(mediaGallery.mediaGallerySelector).find(\".zoom-icon\");\r\n if (scale === 1) {\r\n $(zoomIconElement).find(\".zoom-in\").removeClass(\"d-none\");\r\n $(zoomIconElement).find(\".zoom-out\").addClass(\"d-none\");\r\n } else {\r\n $(zoomIconElement).find(\".zoom-in\").addClass(\"d-none\");\r\n $(zoomIconElement).find(\".zoom-out\").removeClass(\"d-none\");\r\n }\r\n }\r\n\r\n function toggleZoom(event) {\r\n // this == the icon that was clicked\r\n var swiperContainer = $(this).closest(mediaGallery.mediaGallerySelector).find(mediaGallery.swiperSelector);\r\n if (swiperContainer.length) {\r\n var swiper = swiperContainer[0].swiper;\r\n if (swiper) {\r\n swiper.zoom.toggle();\r\n }\r\n }\r\n }\r\n */\r\n\r\n initAllMediaGalleriesOnPage();\r\n \r\n $(window).bind(\"popstate\", function (event) { \r\n var isMob = window.isMobile(); \r\n if (!isMob) { return; }\r\n //check if PhotoSwipe is already opened\r\n var photoSwipeOpened = $(\".pswp--open\");\r\n var isPhotoSwipeOpened = photoSwipeOpened && photoSwipeOpened.length; \r\n if (isPhotoSwipeOpened) {\r\n var lightbox = window.lightbox;\r\n if (lightbox && lightbox.pswp) { \r\n if (window.closingPopstate) return;\r\n window.backButtonClickedFromPhotoSwipe = true; \r\n $(\".pswp__button--close\").trigger(\"click\"); \r\n }\r\n }\r\n else\r\n return;\r\n }); \r\n\r\n window.isMobile = function() {\r\n return ('ontouchstart' in document.documentElement) && (/Mobi/.test(navigator.userAgent));\r\n }\r\n }\r\n);\r\n\ndefine(\"MediaGallery/main\", function(){});\n\n"
]
}