https://www.siku.de/theme/90cb1092fdf35b49884e707d0a60130d/js/stor…/storefront.zoom-modal.plugin.1d0345.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[75088],{1285(t,e,i){i.d(e,{I9:()=>o,Pq:()=>n});class s{constructor(t){this.entries=t.map((t,e)=>{if("number"!=typeof t)throw Error(`[Vector] argument ${e} must be a number ${typeof t} given.`);return t})}get dimension(){return this.entries.length}validateDimensions(t){if(this.dimension!==t.dimension)throw Error(`[Vector] dimension mismatch expected ${this.dimension} got ${t.dimension}`)}get x(){return this.entries[0]}set x(t){this.entries[0]=t}get y(){return this.entries[1]}set y(t){this.dimension>1&&(this.entries[1]=t)}get z(){return this.entries[2]}set z(t){this.dimension>2&&(this.entries[2]=t)}get w(){return this.entries[3]}set w(t){this.dimension>3&&(this.entries[3]=t)}length(){return Math.sqrt(this.entries.reduce((t,e)=>t+=e*e,0))}add(t){return this.validateDimensions(t),new this.constructor(this.entries.map((e,i)=>e+t.entries[i]))}multiply(t){if(t instanceof s)return this.validateDimensions(t),new this.constructor(this.entries.map((e,i)=>e*t.entries[i]));if("number"!=typeof t||Number.isNaN(t))throw Error("[Vector] multiply: factor must be number or vector");return new this.constructor(this.entries.map(e=>t*e))}subtract(t){return this.add(t.multiply(-1))}divide(t){if(t instanceof s)return new this.constructor(this.entries.map((e,i)=>e/t.entries[i]));if(0===t)throw Error("Can't divide by 0");return this.multiply(1/t)}normalize(){return new this.constructor(this.divide(this.length()))}equals(){for(var t=arguments.length,e=Array(t),i=0;i<t;i++)e[i]=arguments[i];let o=e[0]instanceof s?e[0]:new s(Array.isArray(e[0])?e[0]:e);try{return this.validateDimensions(o),this.entries.reduce((t,e,i)=>(e!==o.entries[i]&&(t=!1),t),!0)}catch(t){return!1}}dot(t){return this.validateDimensions(t),this.entries.reduce((e,i,s)=>e+=i*t.entries[s],0)}clamp(t,e){return"number"==typeof t&&(t=new this.constructor(Array(this.dimension).fill(t))),"number"==typeof e&&(e=new this.constructor(Array(this.dimension).fill(e))),new this.constructor(this.entries.map((i,s)=>i<t.entries[s]?t.entries[s]:i>e.entries[s]?e.entries[s]:i))}}class o extends s{constructor(t,e){if(t instanceof s){super(t.entries.slice(0,2));return}if(Array.isArray(t)){super(t.slice(0,2));return}super([t,e])}angle(){return(Math.atan2(this.y,this.x)*(180/Math.PI)+360)%360}}class n extends s{constructor(t,e,i){if(t instanceof s){super(t.entries.slice(0,3));return}if(Array.isArray(t)){super(t.slice(0,3));return}super([t,e,i])}cross(t){return new this.constructor(this.y*t.z-this.z*t.y,this.z*t.x-this.x*t.z,this.x*t.y-this.y*t.x)}}},5088(t,e,i){i.r(e),i.d(e,{default:()=>h});var s=i(4335),o=i(4632),n=i(2332),r=i.n(n),a=i(1285);class l extends s.A{static #t=this.options={maxZoom:"auto",zoomSteps:5,imageZoomModalSelector:"[data-image-zoom-modal=true]",imageSelector:".js-image-zoom-element",zoomInActionSelector:".js-image-zoom-in",zoomResetActionSelector:".js-image-zoom-reset",zoomOutActionSelector:".js-image-zoom-out",activeClassSelector:".tns-slide-active",gallerySliderSelector:"[data-modal-gallery-slider]"};init(){this._modal=this.el.closest(this.options.imageZoomModalSelector),this._image=this.el.querySelector(this.options.imageSelector),this._zoomInActionElement=this._modal.querySelector(this.options.zoomInActionSelector),this._zoomResetActionElement=this._modal.querySelector(this.options.zoomResetActionSelector),this._zoomOutActionElement=this._modal.querySelector(this.options.zoomOutActionSelector),this._imageMaxSize=new a.I9(this._image.naturalWidth,this._image.naturalHeight).multiply(2),this._imageSize=new a.I9(this._image.offsetWidth,this._image.offsetHeight),this._containerSize=new a.I9(this.el.offsetWidth,this.el.offsetHeight),this._storedTransform=new a.Pq(0,0,1),this._transform=new a.Pq(this._storedTransform.x,this._storedTransform.y,this._storedTransform.z),this._translateRange=new a.I9(0,0),this._updateTranslateRange(),this._initHammer(),this._registerEvents(),setTimeout(()=>{this._setActionButtonState()},0)}update(){this._storedTransform=new a.Pq(0,0,1),this._transform=new a.Pq(0,0,1),this._imageMaxSize=new a.I9(this._image.naturalWi

1dth,this._image.naturalHeight).multiply(2),this._imageSize=new a.I9(this._image.offsetWidth,this._image.offsetHeight),this._containerSize=new a.I9(this.el.offsetWidth,this.el.offsetHeight),this._updateTranslateRange(),this._updateTransform(!0),setTimeout(()=>{this._setActionButtonState()},0)}_initHammer(){this._hammer=new(r())(this._image,{touchAction:"none"}),this._hammer.get("pinch").set({enable:!0}),this._hammer.get("pan").set({direction:r().DIRECTION_ALL,threshold:0})}_registerEvents(){this._hammer.on("panstart",()=>{this._panStartTransform=new a.Pq(this._storedTransform.x,this._storedTransform.y,this._storedTransform.z)}),this._hammer.on("pan panend pancancel",t=>this._onPan(t)),this._hammer.on("pinch pinchmove",t=>this._onPinch(t)),this._hammer.on("doubletap",t=>this._onDoubleTap(t)),this.el.addEventListener("wheel",t=>this._onMouseWheel(t),!1),this._image.addEventListener("mousedown",t=>t.preventDefault(),!1),window.addEventListener("resize",t=>this._onResize(t),!1),this._zoomInActionElement.addEventListener("click",t=>this._onZoomIn(t),!1),this._zoomResetActionElement.addEventListener("click",t=>this._onResetZoom(t),!1),this._zoomOutActionElement.addEventListener("click",t=>this._onZoomOut(t),!1)}_isActive(){return!1===this.options.activeClassSelector||null!==this.el.closest(this.options.activeClassSelector)}_onPan(t){if(this._isActive()){if(t.isFinal){this._updateStoredTransformVector(),this._setActionButtonState(),this._setCursor("default"),this._panStartTransform=null,this.$emitter.publish("onPan");return}let e=this._panStartTransform||this._storedTransform;this._transform=e.add(new a.Pq(t.deltaX,t.deltaY,0)),this._unsetTransition(),this._updateTransform(),this._setCursor("move")}this.$emitter.publish("onPan")}_onPinch(t){if(this._isActive()){let e="number"!=typeof t.deltaX||isNaN(t.deltaX)?0:t.deltaX,i="number"!=typeof t.deltaY||isNaN(t.deltaY)?0:t.deltaY,s=this._storedTransform.x+e,o=this._storedTransform.y+i,n=this._storedTransform.z*t.scale;this._transform=new a.Pq(s,o,n),this._unsetTransition(),this._updateTransform(t.isFinal),this._setCursor("move")}this.$emitter.publish("onPinch")}_onDoubleTap(){if(this._isActive()){let t=this._getMaxZoomValue(),e=this._storedTransform.z>=t?1:t;this._transform=new a.Pq(this._transform.x,this._transform.y,e),this._setTransition(),this._updateTransform(!0)}this.$emitter.publish("onDoubleTap")}_onZoomIn(){if(this._isActive()){let t=this._getMaxZoomValue()/this.options.zoomSteps;this._transform=this._transform.add(new a.Pq(0,0,t)),this._setTransition(),this._updateTransform(!0)}this.$emitter.publish("onZoomIn")}_onResetZoom(){this._isActive()&&(this._transform=new a.Pq(this._transform.x,this._transform.y,1),this._setTransition(),this._updateTransform(!0)),this.$emitter.publish("onResetZoom")}_onZoomOut(){if(this._isActive()){let t=this._getMaxZoomValue()/this.options.zoomSteps;this._transform=this._transform.subtract(new a.Pq(0,0,t)),this._setTransition(),this._updateTransform(!0)}this.$emitter.publish("onZoomOut")}_onMouseWheel(t){this._isActive()&&(this._transform=this._transform.add(new a.Pq(0,0,t.wheelDelta/800)),this._unsetTransition(),this._updateTransform(!0)),this.$emitter.publish("onMouseWheel")}_onInteractionEnd(){this._isActive()&&(this._updateTransform(!0),this._setCursor("default")),this.$emitter.publish("onInteractionEnd")}_onResize(){this._getElementSizes(),this._updateTransform(!0),this.$emitter.publish("onResize")}_getElementSizes(){this._imageSize=new a.I9(this._image.offsetWidth,this._image.offsetHeight),this._containerSize=new a.I9(this.el.offsetWidth,this.el.offsetHeight),this.$emitter.publish("getElementSizes")}_updateTransform(t){this._updateTranslateRange(),this._clampTransform();let e=`translateX(${Math.round(this._transform.x)}px)`,i=`translateY(${Math.round(this._transform.y)}px)`,s=`scale(${this._transform.z},${this._transform.z})`,o=`${e} ${i} translateZ(0px) ${s}`;this._image.style.transform=o,this._image.style.WebkitTransform=o,this._image.style.msTransform=o,t&&(this._updateStoredTransformVector(),this._setActionButtonState()),this.$emitter.publish("updateTransform")}_setActionButtonState(){let t=this._transform.z,e=this._getMaxZoomValue();1===t&&1===e?(this._setButtonDisabledState(this._zoomResetActionElement),this._setButtonDisabledState(this._zoomOutActionElement),this._setButtonDisabledState(this._zoomInActionElement)):e!==t||this._isTranslatable()?e===t?(this._unsetButtonDisabledState(this._zoomResetActionElement),this._unsetButtonDisabledState(this._zoomOutActionElement),this._setButtonDisabledState(this._zoomInActionElement)):(1===t?(this._setButtonDisabledState(this._zoomResetActionElement),this._setButtonDisabledState(this._zoomOutActionElement)):(this._unsetButtonDisabledState(this._zoomResetActionElement),this._unsetButtonDisabledState(this._zoomOutActionElement)),this._unsetButtonDisabledState(this._zoomInActionElement)):(this._setButtonDisabledState(this._zoomResetActionElement),this._setButtonDisabledState(this._zoomOutActionElement),this._setButtonDisabledState(this._zoomInActionElement)),this.$emitter.publish("setA

1ctionButtonState")}_isTranslatable(){return this._translateRange.x>0||this._translateRange.y>0}_setButtonDisabledState(t){t.classList.add("disabled"),t.disabled=!0,this.$emitter.publish("setButtonDisabledState")}_unsetButtonDisabledState(t){t.classList.remove("disabled"),t.disabled=!1,this.$emitter.publish("unsetButtonDisabledState")}_updateStoredTransformVector(){this._clampTransform(),this._storedTransform=new a.Pq(this._transform.x,this._transform.y,this._transform.z)}_updateTranslateRange(){this._getElementSizes();let t=this._imageSize.multiply(this._transform.z);t.x=Math.round(t.x),t.y=Math.round(t.y),this._translateRange=t.subtract(this._containerSize).clamp(0,1/0).divide(2)}_getMaxZoomValue(){if(this._getElementSizes(),0===this._imageSize.x||0===this._imageSize.y)return 1;let t=new a.I9(this._image.naturalWidth,this._image.naturalHeight).multiply(2).divide(this._imageSize);return Math.max(t.x,t.y)}_setCursor(t){this.el.style.cursor=t,this.$emitter.publish("setCursor")}_setTransition(){let t="all 350ms ease 0s";this._image.style.transition=t,this._image.style.WebkitTransition=t,this._image.style.msTransition=t,this.$emitter.publish("setTransition")}_unsetTransition(){this._image.style.transition="",this._image.style.WebkitTransition="",this._image.style.msTransition="",this.$emitter.publish("unsetTransition")}_clampTransform(){let t=new a.Pq(-this._translateRange.x,-this._translateRange.y,1),e=new a.Pq(this._translateRange.x,this._translateRange.y,this._getMaxZoomValue());this._transform=this._transform.clamp(t,e)}}class h extends s.A{static #t=this.options={modalSelector:".js-zoom-modal",triggerSelector:"img",triggerSelectorCanvas:"canvas",productIdDataAttribute:"data-product-id",modalGallerySliderSelector:"[data-modal-gallery-slider]",parentGallerySliderSelector:"[data-gallery-slider]",imageZoomInitSelector:"[data-image-zoom]",galleryZoomModalContainerSelector:".js-gallery-zoom-modal-container",imgToLoadSelector:".js-load-img",imgGallerySelector:".gallery-slider-image",imgDataSrcAttr:"data-src",imgDataSrcSetAttr:"data-srcset",activeSlideSelector:".tns-slide-active"};init(){this._triggers=this.el.querySelectorAll(this.options.triggerSelector),this._triggersCanvas=this.el.querySelectorAll(this.options.triggerSelectorCanvas),this._clickInterrupted=!1,this._pixelsMoved=0,this._mouseDown=!1,this._registerEvents()}_registerEvents(){let t=o.A.isTouchDevice()?"touchend":"click";this._triggers.forEach(t=>{t.removeEventListener("click",this._onClick.bind(this)),t.addEventListener("click",this._onClick.bind(this)),t.removeEventListener("keydown",this._onKeyDown.bind(this)),t.addEventListener("keydown",this._onKeyDown.bind(this))}),this._triggersCanvas.forEach(e=>{e.removeEventListener("mousedown",this._onMouseDown.bind(this)),e.addEventListener("mousedown",this._onMouseDown.bind(this)),e.removeEventListener("mouseup",this._onMouseUp.bind(this)),e.addEventListener("mouseup",this._onMouseUp.bind(this)),e.removeEventListener(t,this._onClick.bind(this)),e.addEventListener(t,this._onClick.bind(this)),e.removeEventListener("pointermove",this._onPointerMove.bind(this)),e.addEventListener("pointermove",this._onPointerMove.bind(this))})}_onClick(t){if(!0===this._clickInterrupted||this._pixelsMoved>10){this._clickInterrupted=!1,this._pixelsMoved=0;return}window.focusHandler.saveFocusState("zoom-modal"),this._pixelsMoved=0,h._stopEvent(t),this._openModal(),this.$emitter.publish("onClick")}_onKeyDown(t){"Enter"===t.key&&(window.focusHandler.saveFocusState("zoom-modal"),this._pixelsMoved=0,h._stopEvent(t),this._openModal(),this.$emitter.publish("onEnter"))}_onPointerMove(t){"mouse"==t.pointerType?this._mouseDown&&(this._pixelsMoved+=2):this._pixelsMoved+=1}_onMouseDown(){this._mouseDown=!0,this._clickInterrupted=!1}_onMouseUp(){this._mouseDown=!1}_openModal(){let t=this.el.closest(this.options.galleryZoomModalContainerSelector).querySelector(this.options.modalSelector);t&&this._loadImages(t),this.$emitter.publish("onClick",{modal:t})}_loadImages(t){let e=t.querySelectorAll("img["+this.options.imgDataSrcAttr+"]"+this.options.imgToLoadSelector),i=e.length;if(0===i){this._showModal(t);return}let s=0,o=0;

1e.forEach(e=>{let n=e.getAttribute(this.options.imgDataSrcAttr),r=e.getAttribute(this.options.imgDataSrcSetAttr);n&&(e.onload=()=>{++s+o===i&&this._showModal(t)},e.onerror=()=>{o++,s+o===i&&this._showModal(t)},e.setAttribute("src",n),e.removeAttribute(this.options.imgDataSrcAttr),r&&(e.setAttribute("srcset",r),e.removeAttribute(this.options.imgDataSrcSetAttr)))})}_showModal(t){let e=new bootstrap.Modal(t);this._showModalListener||(this._showModalListener=()=>{this._initSlider(t),this.$emitter.publish("modalShow",{modal:t})});let i=()=>{window.focusHandler.resumeFocusState("zoom-modal")};t.removeEventListener("shown.bs.modal",this._showModalListener),t.addEventListener("shown.bs.modal",this._showModalListener),t.removeEventListener("hidden.bs.modal",i),t.addEventListener("hidden.bs.modal",i),e.show()}_initSlider(t){let e=t.querySelector(this.options.modalGallerySliderSelector);if(!e){this._registerImageZoom();return}let i=this._getParentSliderIndex(),s=t.querySelectorAll(this.options.imgGallerySelector);if(this.gallerySliderPlugin&&this.gallerySliderPlugin._slider){this.gallerySliderPlugin._slider.goTo(i),window.focusHandler.setFocus(s.item(i)),this._registerImageZoom();return}window.PluginManager.initializePlugin("GallerySlider",e,{slider:{startIndex:i,touch:!1},thumbnailSlider:{startIndex:i,autoWidth:!0,responsive:{md:{enabled:!0},lg:{enabled:!0},xl:{enabled:!0,axis:"horizontal"}}}}).then(()=>{this.gallerySliderPlugin=window.PluginManager.getPluginInstanceFromElement(e,"GallerySlider"),this.gallerySliderPlugin._slider.goTo(i),window.focusHandler.setFocus(s.item(i)),this._registerImageZoom(),this.$emitter.publish("initSlider")})}_registerImageZoom(){this.imageZoomRegistered||(this.gallerySliderPlugin?(window.PluginManager.register("ImageZoom",l,this.options.activeSlideSelector+" "+this.options.imageZoomInitSelector),window.PluginManager.initializePlugin("ImageZoom",this.options.activeSlideSelector+" "+this.options.imageZoomInitSelector),this._boundUpdateImageZoom||(this._boundUpdateImageZoom=this._updateImageZoom.bind(this)),this.gallerySliderPlugin._slider.events.off("indexChanged",this._boundUpdateImageZoom),this.gallerySliderPlugin._slider.events.on("indexChanged",this._boundUpdateImageZoom)):(window.PluginManager.register("ImageZoom",l,this.options.imageZoomInitSelector),window.PluginManager.initializePlugin("ImageZoom",this.options.imageZoomInitSelector,{activeClassSelector:!1})),this.imageZoomRegistered=!0)}_updateImageZoom(){let t=this.gallerySliderPlugin.getActiveSlideElement();if(!t)return;let e=t.querySelector(this.options.imageZoomInitSelector);if(!e)return;let i=window.PluginManager.getPluginInstanceFromElement(e,"ImageZoom");i?i.update():window.PluginManager.initializePlugin("ImageZoom",this.options.activeSlideSelector+" "+this.options.imageZoomInitSelector)}_getParentSliderIndex(){let t=0;return this._parentSliderElement=this.el.closest(this.options.parentGallerySliderSelector),this._parentSliderElement&&(this._parentSliderPlugin=window.PluginManager.getPluginInstanceFromElement(this._parentSliderElement,"GallerySlider"),this._parentSliderPlugin&&(t=this._parentSliderPlugin.getCurrentSliderIndex())),t}static _stopEvent(t){t&&(t.stopPropagation(),t.preventDefault())}}}}]);