https://www.eu-gleichbehandlungsstelle.de/_assets/9da1c2a6d746389c…/public/chunks/virtual-tour-DJ_wLW6T.js

1import{B as t,g as e,_ as i,b as s,e as r}from"./pp-accordion-CA6w9In6.js";import{B as n,h as o,g as a}from"./pp-highcharts-D5Crk9o0.js";import"./pp-facet-dropdown-FY1eeaHH.js";class l extends t{static get properties(){return{text:{type:String},imageSrc:{type:String,attribute:"image-src"},showTour:{type:Boolean,attribute:!1},isFullscreen:{type:Boolean,attribute:!1}}}constructor(){super(),this.showTour=!1,this.isFullscreen=!1,this._children=e(this,["pp-image","pp-button-start-tour","pp-collapse-horizontal","pp-button-zoom-in","pp-button-zoom-out","pp-button-fullscreen","pp-button-minimize","pp-button-left","pp-button-right","pp-button-up","pp-button-down","pp-button-left-round","pp-button-right-round","pp-button-up-round","pp-button-down-round"])}firstUpdated(){this.overlay=this.querySelector(".js-overlay"),this.virtualTour=this.querySelector(".js-virtual-tour"),this.content=this.querySelector(".js-content"),this.controls=this.querySelector(".js-controls"),this.overlay.addEventListener(n,this.initializeThreeJs)}initializeThreeJs=async()=>{this.lon=0,this.lat=0,this.currentXRotation=0,this.currentYRotation=0,this.showTour=!0,await this.updateComplete,await this.initializeCamera(),await this.initializeRenderer(),await this.initializeScene(),this.content.appendChild(this.renderer.domElement),this.content.style.touchAction="none",this.content.addEventListener("pointerdown",this.onPointerDown),window.addEventListener("resize",this.resizeCameraAndRenderer.bind(this)),this.addEventListener("wheel",this.zoomInOrOut.bind(this),{passive:!0}),window.addEventListener("fullscreenchange",this.toggleFullscreen),this.controls.addEventListener(n,this.useControls),this.controls.addEventListener(o,this.endMovement),this.controls.addEventListener(a,this.startMovement),this.renderer.render(this.scene,this.camera),this.renderer.setAnimationLoop(this.updateCamera)};async initializeCamera(){const{PerspectiveCamera:t}=await i(async()=>{const{PerspectiveCamera:t}=await import("./three.module-Dfz_xnWr.js");return{PerspectiveCamera:t}},[],import.meta.url);this.camera=new t(75,this.virtualTour.clientWidth/this.virtualTour.clientHeight,1,1100),this.camera.position.set(0,0,0)}async initializeScene(){const{Scene:t,SphereGeometry:e,Mesh:s,MeshBasicMaterial:r,TextureLoader:n}=await i(async()=>{const{Scene:t,SphereGeometry:e,Mesh:i,MeshBasicMaterial:s,TextureLoader:r}=await import("./three.module-Dfz_xnWr.js");return{Scene:t,SphereGeometry:e,Mesh:i,MeshBasicMaterial:s,TextureLoader:r}},[],import.meta.url);this.scene=new t;const o=new e(500,60,40);o.scale(-1,1,1);const a=(new n).load(this.imageSrc);a.colorSpace="srgb";const l=new s(o,new r({map:a}));this.scene.add(l),this.renderer.render(this.scene,this.camera)}async initializeRenderer(){const{WebGLRenderer:t}=await i(async()=>{const{WebGLRenderer:t}=await import("./three.module-Dfz_xnWr.js");return{WebGLRenderer:t}},[],import.meta.url);this.renderer=new t,this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(this.virtualTour.clientWidth,this.virtualTour.clientHeight)}updateCamera=async()=>{const{MathUtils:t}=await i(async()=>{const{MathUtils:t}=await import("./three.module-Dfz_xnWr.js");return{MathUtils:t}},[],import.meta.url);this.lon+=this.currentXRotation,this.lat+=this.currentYRotation,this.lat=Math.max(-85,Math.min(85,this.lat));const e=t.degToRad(90-this.lat),s=t.degToRad(this.lon),r=500*Math.sin(e)*Math.cos(s),n=500*Math.cos(e),o=500*Math.sin(e)*Math.sin(s);this.camera.lookAt(r,n,o),this.renderer.render(this.scene,this.camera)};onPointerDown=t=>{!1!==t.isPrimary&&(this.onPointerDownMouseX=t.clientX,this.onPointerDownMouseY=t.clientY,this.onPointerDownLon=this.lon,this.onPointerDownLat=this.lat,this.content.addEventListener("pointermove",this.onPointerMove),this.content.addEventListener("pointerup",this.onPointerUp))};onPointerMove=t=>{!1!==t.isPrimary&&(this.lon=.1*(this.onPointerDownMouseX-t.clientX)+this.onPointerDownLon,this.lat=.1*(t.clientY-this.onPointerDownMouseY)+this.onPointerDownLat)};onPointerUp=t=>{!1!==t.isPrimary&&(this.content.removeEventListener("pointermove",this.onPointerMove),this.content.removeEventListener("pointerup",this.onPointerUp))};resizeCameraAndRenderer(){this.renderer.setSize(0,0),this.renderer.render(this.scene,this.camera),this.camera.aspect=this.virtualTour.clientWidth/this.virtualTour.clientHeight,this.camera.updateProjectionMatrix(),this.renderer.setSize(this.virtualTour.clientWidth,this.virtualTour.clientHeight),this.renderer.render(this.scene,this.camera)}zoomInOrOut=async(t,e=!1)=>{const{MathUtils:s}=await i(async()=>{const{MathUtils:t}=await import("./three.module-Dfz_xnWr.js");return{MathUtils:t}},[],import.meta.url);t.preventDefault();let r=e?-5:5;t?.deltaY&&(r=.05*t.deltaY);const n=this.camera.fov+r;this.camera.fov=s.clamp(n,10,75),this.camera.updateProjectionMatrix(),this.renderer.render(this.scene,this.camera)};startMovement=t=>{switch(t.detail.customEventDetail){case"left":this.currentXRotation=-1;break;case"right":this.currentXRotation=1;break;case"up":this.currentYRotation=1;break;case"down":this.currentYRotation=-1}};endMovement=()=>{this.currentXRotation=0,this.currentYRotation=0};toggleFullscreen=()=>{this.isFullscreen=!this.isFullscreen};useControls=t=>{switch(t.detail.customEventDetail){case"zoom-in":this.zoomInOrOut(t.detail.originalEvent,!0);break;case"zoom-out":this.zoomInOrOut(t.detail.originalEvent,!1);break;case"fullscreen":this.virtualTour.requestFullscreen().catch(t=>{});break;case"minimize":document.exitFullscreen().then(()=>{this.resizeCameraAndRenderer()}).catch(t=>{})}};

1get hideOverlayClasses(){return{hidden:this.showTour}}get showTourClasses(){return{hidden:!this.showTour}}get showAndHideFullscreenClasses(){return{hidden:this.isFullscreen}}get showAndHideMinimizeClasses(){return{hidden:!this.isFullscreen}}get buttonText(){return this.text?s`<span class="block uppercase text-16 mt-10 text-text-2 font-bold" aria-hidden="true">${this.text}</span>`:""}render(){return s`
2            <div class="relative mx-breakout w-screen mb-40">
3                <div class="container">
4                    <div class="row">
5                        <div class="col-12 px-0 lg:px-16 lg:mx-auto lg:col-10">
6                            <div class="w-full aspect-video relative">
7                                <div class="js-overlay w-full relative ${r(this.hideOverlayClasses)}">
8                                    ${this._children?.["pp-image"]}
9                                    <div class="absolute inset-0 bg-static-14 opacity-50"></div>
10                                    <div class="flex justify-center items-center h-full absolute top-0 left-0 w-full">
11                                        <div class="text-center">
12                                            <div class="text-text-1">
13                                                ${this._children?.["pp-button-start-tour"]}</div>
14                                            ${this.buttonText}
15                                        </div>
16                                    </div>
17                                </div>
18                                <div class="qs-virtual-tour js-virtual-tour w-full absolute top-0 aspect-video ${r(this.showTourClasses)}">
19                                    <div class="absolute z-10 right-16 top-1 md:-right-12 md:top-40">
20                                        ${this._children?.["pp-collapse-horizontal"]}
21                                    </div>
22                                    <div class="js-content"></div>
23                                    <div class="qs-controls js-controls w-full md:w-auto absolute bottom-16 left-1/2 md:left-auto -translate-x-1/2 md:translate-x-0 md:right-16 flex flex-col items-center gap-y-8">
24                                        <div class="hidden md:flex flex-col items-center bg-icon-bg-2 border-2 border-solid border-icon-1 rounded-full w-[140px] py-4 text-text-1">
25                                            <div class="-mb-[27px]">
26                                                ${this._children["pp-button-up"]}
27                                            </div>
28                                            <div class="flex flex-row justify-between gap-24">
29                                                ${this._children["pp-button-left"]}
30                                                ${this._children["pp-button-right"]}
31                                            </div>
32                                            <div class="-mt-[27px]">
33                                                ${this._children["pp-button-down"]}
34                                            </div>
35                                        </div>
36                                        <div class="flex flex-row justify-around bg-icon-bg-2 border-2 border-solid border-icon-1 rounded-24 px-6 sm:px-12 py-6 gap-4 sm:gap-8 text-text-1">
37                                            <div class="md:hidden">
38                                                ${this._children["pp-button-left-round"]}
39                                                ${this._children["pp-button-right-round"]}
40                                                ${this._children["pp-button-up-round"]}
41                                                ${this._children["pp-button-down-round"]}
42                                            </div>
43                                            <div class="border-1 border-solid border-icon-1 md:hidden"></div>
44                                            ${this._children["pp-button-zoom-in"]}
45                                            ${this._children["pp-button-zoom-out"]}
46                                            <div class="border-1 border-solid border-icon-1"></div>
47                                            <div class="${r(this.showAndHideFullscreenClasses)}">
48                                                ${this._children["pp-button-fullscreen"]}
49                                            </div>
50                                            <div class="${r(this.showAndHideMinimizeClasses)}">
51                                                ${this._children["pp-button-minimize"]}
52                                            </div>
53                                        </div>
54                                    </div>
55                                </div>
56                            </div>
57                        </div>
58                    </div>
59                </div>
60            </div>
61        `}}customElements.define("pp-virtual-tour",l);export{l as default};