@panoramax/web-viewer
Version:
Panoramax web viewer for geolocated pictures
628 lines (571 loc) • 1.52 MB
JavaScript
/*!
*
* @panoramax/web-viewer v4.2.0
* https://gitlab.com/panoramax/clients/web-viewer
*
* Copyright (c) Panoramax team
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
!function(t,a){"object"===typeof exports&&"object"===typeof module?module.exports=a():"function"===typeof define&&define.amd?define("Panoramax",[],a):"object"===typeof exports?exports.Panoramax=a():t.Panoramax=a()}(this,(()=>(()=>{var t={9039:(t,a,A)=>{"use strict";A.d(a,{A:()=>Basic});var h=A(4542),p=A(5254),g=A(4964),m=A(7208),v=A(5995),_=A(7343),E=A(2614),x=A.n(E),w=A(8330);A(1865),A(3638);class Basic extends h.WF{constructor(){let t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];super(),this.users=["geovisio"],this["map-style"]=this.getAttribute("map-style")||(0,m.MapTiles)(),this.lang=this.getAttribute("lang")||null,this.endpoint=this.getAttribute("endpoint")||null,this.picture=this.getAttribute("picture")||null,this.sequence=this.getAttribute("sequence")||null,console.info(`\ud83d\udcf7 Panoramax ${this.getClassName()} - Version ${w.rE} (28dc2ca)\n\n\ud83c\udd98 Issues can be reported at ${w.Jk.O}`),t||(this._isInternetFast=null,(0,_.isInternetFast)().then((t=>this._isInternetFast=t)))}connectedCallback(){super.connectedCallback(),this._t=(0,g.getTranslations)(this.lang),this.loader=(0,v.createWebComp)("pnx-loader",{_parent:this,"no-label":(0,_.isInIframe)()}),this._loadsAPI&&this.endpoint&&this._loadsAPI===this.endpoint||this.api&&this.api._endpoint===this.endpoint||!this.endpoint||((this._loadsAPI||this.api)&&(delete this.api,delete this._loadsAPI),this._setupAPI()),Object.entries({map:"map-options",psv:"psv-options",fetchOptions:"fetch-options",mapstyle:"map-style"}).forEach((t=>{let[a,A]=t;this.getAttribute(a)&&console.error(`Component attribute "${a}" has been renamed into "${A}". Old attribute "${a}" is ignored.`)}))}_setupAPI(){if(this.loader=this.loader||(0,v.createWebComp)("pnx-loader",{_parent:this}),!this.endpoint)return void console.warn("No endpoint is defined");this._loadsAPI=this.endpoint;let t=this.endpoint;try{this["map-style"]=JSON.parse(this["map-style"])}catch(A){}try{this.api=new p.A(this.endpoint,{users:this.users,fetch:this["fetch-options"],style:this["map-style"]}),this.api.onceReady().then((()=>{if(t!=this._loadsAPI||!this.api)return;let a=this.api.getUnavailableFeatures(),A=this.api.getAvailableFeatures();A=0===a.length?"\u2705 All features available":"\u2705 Available features: "+A.join(", "),a=0===a.length?"":"\ud83d\udeab Unavailable features: "+a.join(", "),console.info(`\ud83c\udf10 Connected to API "${this.api._metadata.name}" (${this.api._endpoint})\n\u2139\ufe0f API runs STAC ${this.api._metadata.stac_version} ${this.api._metadata.geovisio_version?"& GeoVisio "+this.api._metadata.geovisio_version:""}\n ${A}\n ${a}\n`.trim())})).catch((t=>this.loader.dismiss(t,this._t.pnx.error_api))).finally((()=>delete this._loadsAPI))}catch(A){var a;delete this._loadsAPI,null!==(a=this.loader)&&void 0!==a&&a.dismiss?this.loader.dismiss(A,this._t.pnx.error_api):console.error(A)}}onceReady(){throw new Error("You must override this method on sub-class")}onceAPIReady(){return this.api?this.api.onceReady():new Promise((t=>setTimeout(t,100))).then(this.onceAPIReady.bind(this))}createRenderRoot(){return this}attributeChangedCallback(t,a,A){if(super.attributeChangedCallback(t,a,A),"endpoint"===t&&(this._loadsAPI&&A&&this._loadsAPI===A||this.api&&this.api._endpoint===A||!A||((this._loadsAPI||this.api)&&(delete this.api,delete this._loadsAPI),this._setupAPI())),["picture","sequence"].includes(t)){let h,p,g,m;"picture"===t?(h=this.sequence,g=this.sequence,p=A,m=a):(h=A,g=a,p=this.picture,m=this.picture),this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:{seqId:h,picId:p,prevSeqId:g,prevPicId:m}}))}}getClassName(){return"Basic"}select(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;arguments.length>2&&void 0!==arguments[2]&&arguments[2]&&(this.picture=null,this.sequence=null),this.picture=a,this.sequence=t}isWidthSmall(){return(null===this||void 0===this?void 0:this.offsetWidth)<576}isHeightSmall(){return(null===this||void 0===this?void 0:this.offsetHeight)<400}render(){return h.qy`<p>Should not be used directly, use Viewer/CoverageMap/Editor instead</p>`}getSubComponentsNames(){return["loader","api"]}addEventListener(t,a,A){let h=t.split(":").shift();if(h&&this.getSubComponentsNames().includes(h)){var p;const g=t.substring(h.length+1);null!==(p=this[h])&&void 0!==p&&p.addEventListener?this[h].addEventListener(g,a,A):setTimeout((()=>this.addEventListener(t,a,A)),50)}else super.addEventListener(t,a,A)}static GetJSONConverter(){return{fromAttribute:t=>null===t||""===t?null:"object"===typeof t||Array.isArray(t)?t:x().parse(t),toAttribute:t=>null===t||""===t?"":"string"===typeof t?t:x().stringify(t)}}}Basic.properties={picture:{type:String,reflect:!0},sequence:{type:String,reflect:!0},"fetch-options":{converter:Basic.GetJSONConverter()},users:{type:Array,reflect:!0},"map-style":{type:String},lang:{type:String},endpoint:{type:String}}},3407:(t,a,A)=>{"use strict";A.d(a,{$p:()=>w,Ay:()=>PhotoViewer});A(970);var h=A(1545),p=A(4451),g=A(9039),m=A(9048),v=A(5995),_=A(7343),E=A(2118),x=A(4207);const w=20,C=Math.PI/6,T=["pnx-mini","pnx-widget-player","pnx-widget-zoom"];class PhotoViewer extends g.A{constructor(){super(),this["psv-options"]={},this["url-parameters"]=this.getAttribute("url-parameters")||!0,this["keyboard-shortcuts"]=this.getAttribute("keyboard-shortcuts")||!0,this.widgets=this.getAttribute("widgets")||"true",this.grid=(0,v.createWebComp)("pnx-cornered-grid"),this.psvContainer=document.createElement("div"),this.psvContainer.setAttribute("slot","bg"),this.grid.appendChild(this.psvContainer),this.popup=(0,v.createWebComp)("pnx-popup",{_parent:this,onclose:this._onPopupClose.bind(this)}),this.tabindex=0,this._sequencesMetadata={}}_createInitParamsHandler(){var t,a;this._initParams=new E.Ay(E.Ay.GetComponentProperties(PhotoViewer,this),Object.assign({},null===(t=this.urlHandler)||void 0===t?void 0:t.currentURLParams(),null===(a=this.urlHandler)||void 0===a?void 0:a.currentURLParams(!0)),{disableAnnotations:localStorage.getItem(_.DISABLE_ANNOTATIONS_PARAM)})}_initWidgets(){"false"!==this._initParams.getParentPostInit().widgets&&((0,_.isInIframe)()||(this.grid.appendChild((0,v.createWebComp)("pnx-widget-player",{slot:"top",_parent:this,class:"pnx-only-psv pnx-print-hidden",size:this.isHeightSmall()?"md":"xl"})),this.grid.appendChild((0,v.createWebComp)("pnx-annotations-switch",{slot:"top",_parent:this,class:"pnx-only-psv pnx-print-hidden",size:this.isHeightSmall()?"md":"xl"}))),(0,_.isInIframe)()?(this.legend=(0,v.createWebComp)("pnx-widget-legend",{slot:"bottom-right",light:!0,_parent:this,focus:this._initParams.getParentPostInit().focus,picture:this._initParams.getParentPostInit().picture}),this.grid.appendChild(this.legend)):this.isWidthSmall()?(this.legend=(0,v.createWebComp)("pnx-picture-legend",{_parent:this}),this.bottomDrawer=(0,v.createWebComp)("pnx-bottom-drawer",{slot:"bottom",_parent:this,class:this._initParams.getParentPostInit().willLoadPicture?void 0:"pnx-hidden"}),this.bottomDrawer.appendChild(this.legend),this.grid.appendChild(this.bottomDrawer),this.addEventListener("select",(t=>{(0,_.isNullId)(t.detail.picId)?this.bottomDrawer.classList.add("pnx-hidden"):this.bottomDrawer.classList.remove("pnx-hidden")}))):(this.legend=(0,v.createWebComp)("pnx-widget-legend",{slot:this.isWidthSmall()?void 0:"top-left",_parent:this,focus:this._initParams.getParentPostInit().focus,picture:this._initParams.getParentPostInit().picture}),this.grid.appendChild((0,v.createWebComp)("pnx-widget-zoom",{slot:"bottom-right",class:"pnx-print-hidden",_parent:this})),this.grid.appendChild(this.legend)))}connectedCallback(){super.connectedCallback(),this.presetsManager=new x.A(this.lang),this["url-parameters"]&&"false"!==this["url-parameters"]&&(this.urlHandler=new p.A(this),this.onceReady().then((()=>{this.urlHandler.listenToChanges(),this.urlHandler._onParentChange()}))),this.onceAPIReady().then(this._postAPIInit.bind(this)),this._moveChildToGrid(),window.addEventListener("DOMContentLoaded",(()=>{this._moveChildToGrid()}),{once:!0})}disconnectedCallback(){var t,a;super.disconnectedCallback(),null===(t=this.urlHandler)||void 0===t||t.destroy(),null===(a=this.psv)||void 0===a||a.destroy(),document.body.removeEventListener("click",this._toggleKeyboardBasedOnFocus),window.removeEventListener("keypress",this._toggleKeyboardBasedOnFocus)}getClassName(){return"PhotoViewer"}onceReady(){return this.oncePSVReady().then((()=>this._initParams.getParentPostInit().willLoadPicture&&!this.psv.getPictureMetadata()?this.onceFirstPicLoaded():Promise.resolve()))}render(){return[this.loader,this.grid,this.popup]}getSubComponentsNames(){return super.getSubComponentsNames().concat(["psv","grid","popup","urlHandler"])}oncePSVReady(){let t;return new Promise((a=>{t=setInterval((()=>{this.psv&&"object"===typeof this.psv&&(this.psv.container?(clearInterval(t),a()):this.psv.addEventListener&&this.psv.addEventListener("ready",(()=>{clearInterval(t),a()}),{once:!0}))}),250)}))}onceFirstPicLoaded(){return this.oncePSVReady().then((()=>this.psv.getPictureMetadata()?Promise.resolve():new Promise((t=>{this.psv.addEventListener("picture-loaded",t,{once:!0})}))))}async _postAPIInit(){this.loader.setAttribute("value",30),this._createInitParamsHandler();const t=this._initParams.getParentPostInit();this._initPSV(),this._initWidgets(),(0,E.ai)(this,t),t.keyboardShortcuts&&this._handleKeyboardManagement(),t.willLoadPicture?this.psv.getPictureMetadata()?this.loader.dismiss():this.psv.addEventListener("picture-loaded",(()=>this.loader.dismiss()),{once:!0}):this.loader.dismiss()}_initPSV(){try{this.psv=new m.Ay(this,this.psvContainer,{shouldGoFast:this._psvShouldGoFast.bind(this),keyboard:"always",keyboardActions:{...h.zY.keyboardActions,8:"ROTATE_UP",2:"ROTATE_DOWN",4:"ROTATE_LEFT",6:"ROTATE_RIGHT",PageUp:()=>this.psv.goToNextPicture(),9:()=>this.psv.goToNextPicture(),PageDown:()=>this.psv.goToPrevPicture(),3:()=>this.psv.goToPrevPicture(),5:()=>this.moveCenter(),"*":()=>this.moveCenter(),Home:()=>{var t;return null===(t=this._toggleFocus)||void 0===t?void 0:t.call(this)},7:()=>{var t;return null===(t=this._toggleFocus)||void 0===t?void 0:t.call(this)},End:()=>this.mini.toggleAttribute("collapsed"),1:()=>this.mini.toggleAttribute("collapsed")," ":()=>this.psv.toggleSequencePlaying(),0:()=>this.psv.toggleSequencePlaying()},...this._initParams.getPSVInit()}),this.oncePSVReady().then((()=>{this.loader.setAttribute("value",50),(0,E.Vy)(this.psv,this._initParams.getPSVPostInit())})),this.psv.addEventListener("sequence-playing",(()=>this.classList.add("pnx-playing"))),this.psv.addEventListener("sequence-stopped",(()=>this.classList.remove("pnx-playing")))}catch(t){let a=h.IJ.isWebGLSupported?this._t.pnx.error_psv:this._t.pnx.error_webgl;this.loader.dismiss(t,a)}}_enableKeyboard(){this.psv.startKeyboardControl()}_disableKeyboard(){this.psv.stopKeyboardControl()}_toggleKeyboardBasedOnFocus(t){const a=(null===t||void 0===t?void 0:t.target)||document.activeElement;if(this.contains(a)){for(let t of this.grid.childNodes)if("bg"!==t.getAttribute("slot")&&!T.includes(t.tagName.toLowerCase())&&t.contains(a))return void this._disableKeyboard();this._enableKeyboard()}else this._disableKeyboard()}_handleKeyboardManagement(){window.addEventListener("click",(t=>this._toggleKeyboardBasedOnFocus(t))),window.addEventListener("keypress",this._toggleKeyboardBasedOnFocus.bind(this)),this.popup.addEventListener("open",this._disableKeyboard.bind(this)),this.popup.addEventListener("close",this._enableKeyboard.bind(this)),this.psv.addEventListener("click",this._enableKeyboard.bind(this));for(let t of this.grid.childNodes)"bg"===t.getAttribute("slot")||T.includes(t.tagName.toLowerCase())||(t.addEventListener("focusin",this._disableKeyboard.bind(this)),t.addEventListener("focusout",(()=>{null===this.popup.getAttribute("visible")&&this._enableKeyboard()})))}_psvShouldGoFast(){return this.psv._sequencePlaying&&this.psv.getTransitionDuration()<1e3}_moveChildToGrid(){Array.from(this.querySelectorAll("[slot]")).forEach((t=>{var a;null!==(a=t.tagName)&&void 0!==a&&a.toLowerCase().startsWith("pnx-")&&(t._parent=this,t._t=this._t),"editors"===t.getAttribute("slot")?this.onceReady().then((()=>{var a;return null===(a=this.legend)||void 0===a?void 0:a.appendChild(t)})):this.grid.appendChild(t)}))}setPopup(t){let a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;t?this.popup.setAttribute("visible",""):this.popup.removeAttribute("visible"),this.popup.innerHTML="","string"===typeof a?this.popup.innerHTML=a:Array.isArray(a)&&a.forEach((t=>this.popup.appendChild(t)))}_onPopupClose(){this.dispatchEvent(new CustomEvent("focus-changed",{detail:{focus:this.map&&this.isMapWide()?"map":"pic"}}))}_showQualityScoreDoc(){this.setPopup(!0,[(0,v.createWebComp)("pnx-quality-score-doc",{_t:this._t})])}_showReportForm(){if(!this.psv.getPictureMetadata())throw new Error("No picture currently selected");this.setPopup(!0,[(0,v.createWebComp)("pnx-report-form",{_parent:this})])}_showShareOptions(){this.setPopup(!0,[(0,v.createWebComp)("pnx-share-menu",{_parent:this})])}_showSemanticsDoc(){this.setPopup(!0,[(0,v.createWebComp)("pnx-semantics-doc",{_t:this._t})])}moveCenter(){this.psv.getPictureMetadata()&&this._psvAnimate({speed:m.LM,yaw:0,pitch:0,zoom:m.cS})}moveLeft(){this._moveToDirection("left")}moveRight(){this._moveToDirection("right")}moveUp(){this._moveToDirection("up")}moveDown(){this._moveToDirection("down")}_moveToDirection(t){let a=this.psv.getPosition();switch(t){case"up":a.pitch+=C;break;case"left":a.yaw-=C;break;case"down":a.pitch-=C;break;case"right":a.yaw+=C}this._psvAnimate({speed:m.LM,...a})}_psvAnimate(t){this._lastPsvAnim&&this._lastPsvAnim.cancel(),this._lastPsvAnim=this.psv.animate(t)}addEventListener(t,a,A){super.addEventListener(t,a,A)}}PhotoViewer.properties={"psv-options":{converter:g.A.GetJSONConverter()},widgets:{type:String},"url-parameters":{type:String},"keyboard-shortcuts":{type:String},tabindex:{type:Number},...g.A.properties},customElements.define("pnx-photo-viewer",PhotoViewer)},2504:(t,a,A)=>{"use strict";A.r(a),A.d(a,{layout:()=>h,menus:()=>p,ui:()=>g});var h=A(456),p=A(9015),g=A(6957)},6784:(t,a,A)=>{"use strict";A.d(a,{A:()=>BottomDrawer});var h=A(4542),p=A(1198),g=A(5995);const m={opened:0,"half-opened":.7,closed:1};class BottomDrawer extends h.WF{constructor(){super(),this._isDragging=!1,this.openness="half-opened"}firstUpdated(){super.firstUpdated(),this._boundTouchMove=this._onTouchMove.bind(this),this._boundTouchEnd=this._onTouchEnd.bind(this),this._drawerHeight=window.innerHeight-30;const t=this._getDrawer();t&&(t.style.height=`${this._drawerHeight}px`,t.style.maxHeight=`${this._drawerHeight}px`,(0,g.onceParentAvailable)(this).then((()=>this._parent.onceReady())).then((()=>{var t,a;null===(t=this._parent.map)||void 0===t||t.addEventListener("click",(()=>this.openness="closed")),null===(a=this._parent.psv)||void 0===a||a.addEventListener("click",(()=>this.openness="closed"))})))}attributeChangedCallback(t,a,A){if(super.attributeChangedCallback(t,a,A),"openness"===t){if("opened"!==A){const t=this.shadowRoot.querySelector(".content");t&&(t.scrollTop=0)}const t=this._getDrawer();t&&(t.style.transform=null)}}disconnectedCallback(){super.disconnectedCallback(),this._cleanupTouchListeners()}_getDrawer(){var t;return null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector(".drawer")}_onHandleClick(){"opened"===this.openness?this.openness="closed":"half-opened"===this.openness?this.openness="opened":"closed"===this.openness&&(this.openness="half-opened")}_onTouchStart(t){this._isDragging=!0,this._startFingerY=t.touches[0].clientY,this._deltaFingerY=0,this._drawerY=this._drawerHeight*m[this.openness],window.addEventListener("touchmove",this._boundTouchMove,{passive:!0}),window.addEventListener("touchend",this._boundTouchEnd),window.addEventListener("touchcancel",this._boundTouchEnd)}_onTouchMove(t){if(!this._isDragging)return;const a=this.shadowRoot.querySelector(".content");a.scrollHeight>a.offsetHeight&&a.scrollTop>0?this._updateDrawerTransform(0):(this._deltaFingerY=t.touches[0].clientY-this._startFingerY,this._updateDrawerTransform(this._drawerY+this._deltaFingerY))}_onTouchEnd(t){(this._isDragging&&!(Math.abs(this._deltaFingerY)<30)||t.target.closest(".handle"))&&(t.preventDefault(),this._isDragging=!1,0===this._deltaFingerY&&"closed"===this.openness?this.openness="half-opened":this._updateDrawerTransform(this._drawerY+this._deltaFingerY,!0),this._cleanupTouchListeners(),this._startFingerY=null,this._deltaFingerY=null)}_cleanupTouchListeners(){window.removeEventListener("touchmove",this._boundTouchMove),window.removeEventListener("touchend",this._boundTouchEnd),window.removeEventListener("touchcancel",this._boundTouchCancel)}_updateDrawerTransform(t){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const A=this._getDrawer();A&&(t=Math.max(0,Math.min(t,this._drawerHeight-30)),a&&(this._deltaFingerY<0?"closed"===this.openness?Math.abs(this._deltaFingerY)>this._drawerHeight*(1-m["half-opened"])?this.openness="opened":this.openness="half-opened":this.openness="opened":this.openness="closed",this._drawerY=null,t=Math.max(0,Math.min(m[this.openness]*this._drawerHeight,this._drawerHeight-30))),A.style.transform=`translateY(${t}px)`)}render(){const t={drawer:!0,[this.openness]:!0,dragging:this._isDragging};return h.qy`
<div
class=${(0,p.H)(t)}
@touchstart="${this._onTouchStart}"
@touchmove="${this._onTouchMove}"
@touchend="${this._onTouchEnd}"
>
<div class="handle" @click=${this._onHandleClick}>
<div class="handle-bar"></div>
</div>
<div class="content">
<slot></slot>
</div>
</div>
`}}BottomDrawer.styles=h.AH`
:host {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 130;
pointer-events: none;
touch-action: none;
}
.drawer {
background: var(--widget-bg);
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
will-change: transform;
touch-action: auto;
pointer-events: auto;
}
.drawer.dragging { transition: none; }
.drawer.closed { transform: translateY(calc(100% - 30px)); }
.drawer.half-opened { transform: translateY(70%); }
.drawer.half-opened .content { overflow-y: hidden; }
.drawer.opened { transform: translateY(0%); }
.handle {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.handle-bar {
width: 40px;
height: 5px;
background: var(--grey-pale);
border-radius: 3px;
}
.content {
overflow: auto;
flex: 1;
}
`,BottomDrawer.properties={_fingerY:{state:!0},_deltaFingerY:{state:!0},_drawerY:{state:!0},_isDragging:{state:!0},_drawerHeight:{state:!0},openness:{type:String,reflect:!0}},customElements.define("pnx-bottom-drawer",BottomDrawer)},7422:(t,a,A)=>{"use strict";A.d(a,{A:()=>CorneredGrid});var h=A(4542);class CorneredGrid extends h.WF{render(){return h.qy`
<div class="bg">
<slot name="bg"></slot>
</div>
<div class="row top">
<div class="corner left" part="corner-top-left">
<slot name="top-left"></slot>
</div>
<div class="corner middle" part="corner-top">
<slot name="top"></slot>
</div>
<div class="corner right" part="corner-top-right">
<slot name="top-right"></slot>
</div>
</div>
<div class="row bottom">
<div class="corner left" part="corner-bottom-left">
<slot name="bottom-left"></slot>
</div>
<div class="corner middle" part="corner-bottom">
<slot name="bottom"></slot>
</div>
<div class="corner right" part="corner-bottom-right">
<slot name="bottom-right"></slot>
</div>
</div>
`}}CorneredGrid.styles=h.AH`
:host {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 5px;
flex-wrap: no-wrap;
}
.bg {
position: absolute;
inset: 0;
z-index: 0;
}
.row {
display: flex;
flex-direction: row;
flex: 1 1 50%;
pointer-events: none;
}
.row.bottom { align-items: flex-end; }
.corner {
position: relative;
flex: 1 1 33%;
display: flex;
gap: 10px;
height: min-content;
}
.corner slot {
pointer-events: auto;
position: relative;
z-index: 120;
}
.row.bottom .corner:not(.middle) { flex-direction: column; }
.row.bottom .corner.left { flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; }
.row.bottom .corner.middle { justify-content: center; align-items: flex-end; }
.row.bottom .corner.right { justify-content: flex-end; align-items: flex-end; }
.row.top .corner { flex-direction: row; }
.row.top .corner.left { justify-content: flex-start; align-items: flex-start; }
.row.top .corner.middle { justify-content: center; }
.row.top .corner.right { justify-content: flex-end; align-items: flex-start; }
`,customElements.define("pnx-cornered-grid",CorneredGrid)},1445:(t,a,A)=>{"use strict";A.d(a,{A:()=>Mini});var h=A(4542),p=A(1462),g=A(5721);class Mini extends h.WF{constructor(){super(),this.collapsed=!1,this.icon=null}render(){var t,a;const A=(null===(t=this._parent)||void 0===t?void 0:t.isWidthSmall())||(null===(a=this._parent)||void 0===a?void 0:a.isHeightSmall()),onExpand=()=>this.dispatchEvent(new Event("expand",{bubbles:!0,composed:!0}));if(this.collapsed||A){const t=A?onExpand:()=>this.collapsed=!1;return h.qy`<pnx-button
kind="flat"
size="xxl"
style="bottom: 0"
@click=${t}
>${this.icon}</pnx-button>`}var m,v,_;return h.qy`
<slot></slot>
<pnx-button
kind="superflat"
title=${null===(m=this._parent)||void 0===m?void 0:m._t.pnx.expand_info}
style="top: 0; right: 0"
@click=${onExpand}
>
<img src=${p} alt="" />
${null===(v=this._parent)||void 0===v?void 0:v._t.pnx.expand}
</pnx-button>
<pnx-button
kind="flat"
title=${null===(_=this._parent)||void 0===_?void 0:_._t.pnx.minimize}
style="bottom: 0; left: 0"
@click=${()=>this.collapsed=!0}
>
<img src=${g} alt="" />
</pnx-button>
`}}Mini.styles=h.AH`
:host {
display: block;
position: absolute;
inset: 0;
pointer-events: none;
}
slot {
z-index: 120;
pointer-events: auto;
}
pnx-button {
z-index: 121;
position: absolute;
pointer-events: auto;
}
pnx-button img {
height: 20px;
}
pnx-button:not([size="xxl"])::part(btn) {
border-top-left-radius: 0;
border-bottom-right-radius: 0;
}
`,Mini.properties={icon:{type:String},collapsed:{type:Boolean,reflect:!0}},customElements.define("pnx-mini",Mini)},5534:(t,a,A)=>{"use strict";A.d(a,{A:()=>Tabs});var h=A(4542);class Tabs extends h.WF{constructor(){super(),this.activeTabIndex=0,this.hideNav=!1}_getTabs(){var t;return(null===(t=this.shadowRoot.querySelector("slot[name='title']"))||void 0===t?void 0:t.assignedNodes())||[]}_getContents(){var t;return(null===(t=this.shadowRoot.querySelector("slot[name='content']"))||void 0===t?void 0:t.assignedNodes())||[]}_changeTab(t,a){const A=this._getTabs(),h=this._getContents();void 0===t&&void 0===a||(t&&(a=A.findIndex((a=>a===t||a===t.parentNode))),!isNaN(a)&&a>=0&&a<A.length&&A.forEach(((t,A)=>{A==a?(this.activeTabIndex=A,h[A].classList.add("active"),t.classList.add("active")):(h[A].classList.remove("active"),t.classList.remove("active"))})))}_handleTabClick(t){this._changeTab(t.target)}updated(t){t.has("activeTabIndex")&&this._changeTab(void 0,this.activeTabIndex)}render(){return h.qy`
${this.hideNav?h.s6:h.qy`<nav @click="${this._handleTabClick}">
<slot name="title" @slotchange=${()=>this.activeTabIndex=0}></slot>
</nav>`}
<div class="contents">
<slot name="content"></slot>
</div>
`}}Tabs.styles=h.AH`
/* Tabs */
nav {
display: flex;
gap: 5px;
align-items: stretch;
overflow-x: auto;
touch-action: pan-x;
position: sticky;
top: 0;
background: white;
z-index: 125;
}
nav ::slotted(*) {
color: var(--grey-dark);
border-bottom: 2px solid rgba(0,0,0,0);
cursor: pointer;
transition: all 0.1s;
flex: 1;
}
nav ::slotted(*:hover:not(.active)) { background-color: var(--blue-pale); }
nav ::slotted(*.active) {
color: var(--blue-dark);
border-bottom: 2px solid var(--blue-dark);
}
/* Content */
.contents ::slotted(div) { display: none !important; }
.contents ::slotted(.active) { display: block !important; }
`,Tabs.properties={activeTabIndex:{type:Number,reflect:!0},hideNav:{type:Boolean}},customElements.define("pnx-tabs",Tabs)},456:(t,a,A)=>{"use strict";A.r(a),A.d(a,{BottomDrawer:()=>h.A,CorneredGrid:()=>p.A,Mini:()=>g.A,Tabs:()=>m.A});var h=A(6784),p=A(7422),g=A(1445),m=A(5534)},3589:(t,a,A)=>{"use strict";A.d(a,{A:()=>PictureLegend});var h=A(4542),p=A(686),g=A(1198),m=A(5995),v=A(8466),_=A(4336),E=A(2593),x=A(7879),w=A(4927),C=A(6311),T=A(1260),D=A(8591),U=A(3606),O=A(7208);class PictureLegend extends h.WF{constructor(){super(),this._expanded=!0,this.collapsable=!1,this.light=!1}connectedCallback(){super.connectedCallback(),this._expanded=!this.collapsable,this._prevSearches={},(0,m.onceParentAvailable)(this).then((()=>this._parent.onceReady())).then((()=>{this._onPicChange(this._parent.psv.getPictureMetadata()),this._parent.psv.addEventListener("picture-loaded",(()=>{this._onPicChange(this._parent.psv.getPictureMetadata())})),this._parent.psv.addEventListener("sequence-stopped",(()=>{this._onPicChange(this._parent.psv.getPictureMetadata())})),this._parent.psv.addEventListener("annotation-focused",(()=>{this._expanded=!0})),this._parent.psv.addEventListener("annotations-toggled",(t=>{t.detail.visible&&(this._expanded=!0)})),this._parent.psv.getSelectedAnnotations().length>0&&(this._expanded=!0)}))}_onPicChange(t){if(clearTimeout(this._addrTimer1),this._caption=null===t||void 0===t?void 0:t.caption,t){const a=`${t.gps[0].toFixed(4)}/${t.gps[1].toFixed(4)}`;this._prevSearches[a]?this._addr=this._prevSearches[a]:this._parent.psv._sequencePlaying||(this._addr="",this._addrTimer1=setTimeout((()=>{(0,U.reverseGeocodingNominatim)(t.gps[1],t.gps[0]).then((t=>{clearTimeout(this._addrTimer2),this._addr=t,this._prevSearches[a]=t}))}),500))}else this._addr=""}_onBackClick(){var t,a;this._parent.isWidthSmall()&&"map"===this._parent.focus?this._parent.select():null===(t=(a=this._parent)._setFocus)||void 0===t||t.call(a,"map")}blockOnEditing(t){this._blockOnEditor=t}render(){var t,a,A,D,U,j,F;if(!this._caption)return h.s6;const G=(null===(t=this._parent)||void 0===t?void 0:t.lang)||window.navigator.language,W=(0,g.H)({"pnx-hidden":this._expanded}),Y=(0,g.H)({"pnx-hidden":!this._expanded});var Q,Z,q,K,X,J;return this.light?p.qy`<div class="pnx-picture-legend-light">
${(null===(Q=this._caption.producer)||void 0===Q?void 0:Q.length)>0?p.qy`
<a
href=${(0,O.PanoramaxMetaCatalogURL)()+"/?pic="+this._parent.psv.getPictureMetadata().id}
target="_blank"
title=${null===(Z=this._parent)||void 0===Z?void 0:Z._t.pnx.share_page}
>${this._caption.producer[this._caption.producer.length-1]}</a>
</div>`:h.s6}
${(null===(q=this._caption.producer)||void 0===q?void 0:q.length)>0&&this._caption.date?"-":""}
${this._caption.date?new Intl.DateTimeFormat(G,{timeZone:this._caption.tz,dateStyle:"short"}).format(this._caption.date):h.s6}
${((null===(K=this._caption.producer)||void 0===K?void 0:K.length)>0||this._caption.date)&&null!==(X=this._caption)&&void 0!==X&&X.license?"|":""}
${null!==(J=this._caption)&&void 0!==J&&J.license?p.qy`${(0,p.Bk)(this._caption.license)}`:h.s6}
`:p.qy`
<div class=${(0,g.H)({headline:!0,"pnx-hidden":this._blockOnEditor})}>
${this._parent._setFocus?p.qy`
<pnx-button
kind="superinline"
@click=${this._onBackClick}
>
${(0,m.fa)(v.Ce)}
</pnx-button>
`:h.s6}
<div id="pic-legend-addr" title=${this._addr||""}>
${(null===(a=this._addr)||void 0===a?void 0:a.length)>0?this._addr:p.qy`<span class="pnx-placeholder-loading"> </span>`}
</div>
<div class="headline-buttons">
<pnx-button
size="sm"
class=${W}
title=${null===(A=this._parent)||void 0===A?void 0:A._t.pnx.share}
@click=${()=>this._parent._showShareOptions()}
>
${(0,m.fa)(T.faShareNodes)}
</pnx-button>
<pnx-picture-legend-actions
@click=${t=>t.stopPropagation()}
._parent=${this._parent}
?full=${this._expanded}
></pnx-picture-legend-actions>
</div>
</div>
<div id="pic-legend-info" class=${W}>
${(null===(D=this._caption.producer)||void 0===D?void 0:D.length)>0?p.qy`<div class="info-block">
${(0,m.fa)(x.X4)}
${this._caption.producer[this._caption.producer.length-1]}
</div>`:h.s6}
${this._caption.date?p.qy`<div class="info-block">
${(0,m.fa)(w.BE)}
${this._caption.date.toLocaleDateString((null===(U=this._parent)||void 0===U?void 0:U.lang)||window.navigator.language,{year:"numeric",month:"long",day:"numeric"})} </div>`:h.s6}
</div>
<div id="pic-legend-cta" class=${(0,g.H)({"pnx-hidden":!this._expanded||this._blockOnEditor})}>
<pnx-button size="sm" @click=${()=>this._parent._showShareOptions()}>
${(0,m.fa)(T.faShareNodes)} ${null===(j=this._parent)||void 0===j?void 0:j._t.pnx.share}
</pnx-button>
${this._parent.api._endpoints.report?p.qy`
<pnx-button kind="fullwarn" size="sm" @click=${()=>this._parent._showReportForm()}>
${(0,m.fa)(C.JA)} ${null===(F=this._parent)||void 0===F?void 0:F._t.pnx.report}
</pnx-button>
`:h.s6}
<slot name="editors">
<pnx-widget-osmeditors ._parent=${this._parent} />
</slot>
</div>
<pnx-picture-metadata
class=${Y}
.block-editor=${this._blockOnEditor}
._parent=${this._parent}
></pnx-picture-metadata>
${this.collapsable&&!this._blockOnEditor?p.qy`<pnx-button
kind="inline"
size="sm"
id="pic-legend-expand"
@click=${()=>this._expanded=!this._expanded}
>${this._expanded?(0,m.fa)(_.w2):(0,m.fa)(E.Jt)}</pnx-button>`:h.s6}
`}}PictureLegend.styles=[D.qf,D.nd,D.R,h.AH`
:host {
display: flex;
flex-direction: column;
margin: 0;
font-family: var(--font-family);
flex-wrap: nowrap;
}
@media screen and (min-width: 576px) {
:host {
max-height: 70vh;
}
}
/* Top bar */
.headline {
display: flex;
gap: 10px;
align-items: center;
margin: 10px 10px 5px 10px;
justify-content: space-between;
flex: 1;
}
.headline-buttons {
display: flex;
gap: 5px;
}
/* Address line */
#pic-legend-addr {
line-height: 1.2em;
font-size: 1em;
margin-bottom: 2px;
flex-grow: 5;
font-weight: 800;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#pic-legend-addr span {
display: inline-block;
height: 100%;
width: 100%;
}
/* Minimal info block */
#pic-legend-info {
margin: 10px;
display: flex;
gap: 10px;
justify-content: space-around;
}
.info-block {
display: flex;
flex-shrink: 1;
gap: 5px;
font-weight: 600;
font-size: 0.85em;
align-items: center;
}
.info-block svg { height: 18px; }
/* Expand button */
#pic-legend-expand {
display: block;
margin-top: 5px;
max-width: 100%;
flex: 1;
}
#pic-legend-expand::part(btn) {
border-radius: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
/* Details block */
pnx-picture-metadata {
margin: 5px 10px;
display: block;
box-sizing: border-box;
flex: 1;
overflow-y: auto;
}
/* Details actions */
#pic-legend-cta {
display: flex;
margin: 5px 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
gap: 5px;
flex-wrap: wrap;
flex: 1;
}
/* More options menu */
#pnx-legend-opts { min-width: unset; }
/* Editors */
#pic-legend-editors { margin: 0 10px; }
/* Light version */
.pnx-picture-legend-light {
width: max-content;
font-size: 10px;
}
`],PictureLegend.properties={light:{type:Boolean},_caption:{state:!0},_addr:{state:!0},_expanded:{state:!0},_blockOnEditor:{state:!0},collapsable:{type:Boolean}},customElements.define("pnx-picture-legend",PictureLegend)},6993:(t,a,A)=>{"use strict";A.d(a,{A:()=>PictureMetadata});var h=A(4542),p=A(686),g=A(5995),m=A(3520),v=A(3233),_=A(99),E=A(5279),x=A(4954),w=A(2077),C=A(5124),T=A(6668),D=A(6249),U=A(8591),O=A(508),j=A(7208),F=A(7343);const missing=()=>(0,g.fa)(C.Ev,{styles:{height:"16px"}});class PictureMetadata extends h.WF{connectedCallback(){super.connectedCallback();const gototags=()=>{const t=this.shadowRoot.querySelector("pnx-tabs");t&&t.setAttribute("activeTabIndex",4)};(0,g.onceParentAvailable)(this).then((()=>{var t,a,A,h;this._meta=null===(t=this._parent)||void 0===t||null===(a=t.psv)||void 0===a?void 0:a.getPictureMetadata(),null===(A=this._parent)||void 0===A||null===(h=A.oncePSVReady)||void 0===h||h.call(A).then((()=>{this._parent.psv.addEventListener("picture-loaded",(()=>{this._meta=this._parent.psv.getPictureMetadata()})),this._parent.psv.addEventListener("annotation-focused",gototags),this._parent.psv.addEventListener("annotations-toggled",(t=>{t.detail.visible&&gototags()})),this._parent.psv.getSelectedAnnotations().length>0&&gototags()}))}))}_onQualityScoreClick(){const t=this.shadowRoot.querySelector("pnx-tabs");t&&t.setAttribute("activeTabIndex",3)}_onCaptureDateClick(){const t=this.shadowRoot.querySelector("pnx-tabs");t&&t.setAttribute("activeTabIndex",1)}_toTab(t,a){return p.qy`
<h4 slot="title">${t}</h4>
<div slot="content" class="data-blocks">
${a.filter((t=>t)).map((t=>p.qy`<div class="data-block" style=${t.style}>
<h5>${t.title}</h5>
<div style=${t.content_style} @click=${t.click}>${t.content}</div>
</div>`))}
</div>
`}render(){var t,a,A,C,U,G,W,Y,Q,Z,q,K,X,J,$,ee,te,ie,ne,ae,re,se,oe,le,ce,de,ue,Ae,he,pe,ge,me,fe,ve,_e,Ee,ye,Me,xe,be,we,ke,Ce,Te,Se,De,Ie,Le,Ne,ze,Pe,Ue,Oe;if(!this._meta)return h.s6;const je=(null===(t=this._parent)||void 0===t?void 0:t.lang)||window.navigator.language,Re=null===(a=this._meta)||void 0===a||null===(A=a.properties)||void 0===A?void 0:A["pers:interior_orientation"],Fe=[Re.camera_manufacturer,Re.camera_model].filter((t=>t)).join(" "),Be=null!==Re&&void 0!==Re&&Re.focal_length?`${null===Re||void 0===Re?void 0:Re.focal_length} mm`:missing();let Ge=null===Re||void 0===Re?void 0:Re.sensor_array_dimensions;Ge&&(Ge=`${Ge[0]} x ${Ge[1]} px (${Math.floor(Ge[0]*Ge[1]/1e6)} Mpx)`);let Ve=null===(C=this._parent)||void 0===C?void 0:C._t.pnx.picture_flat,He=null===(U=this._parent)||void 0===U?void 0:U._t.pnx.picture_flat_long,We=null===Re||void 0===Re?void 0:Re.field_of_view;var Ye,Qe;null!==We&&void 0!==We&&(360===We?(Ve=null===(Ye=this._parent)||void 0===Ye?void 0:Ye._t.pnx.picture_360,He=null===(Qe=this._parent)||void 0===Qe?void 0:Qe._t.pnx.picture_360_long):Ve+=` (${We}\xb0)`);const Ze=[{title:null===(G=this._parent)||void 0===G?void 0:G._t.pnx.metadata_camera_make,content:(null===Re||void 0===Re?void 0:Re.camera_manufacturer)||missing()},{title:null===(W=this._parent)||void 0===W?void 0:W._t.pnx.metadata_camera_model,content:(null===Re||void 0===Re?void 0:Re.camera_model)||missing()},{title:null===(Y=this._parent)||void 0===Y?void 0:Y._t.pnx.metadata_camera_type,content:Ve},{title:null===(Q=this._parent)||void 0===Q?void 0:Q._t.pnx.metadata_camera_resolution,content:Ge||missing()},{title:null===(Z=this._parent)||void 0===Z?void 0:Z._t.pnx.metadata_camera_focal_length,content:Be},(null===(q=this._meta)||void 0===q||null===(K=q.caption)||void 0===K?void 0:K.date)&&{title:null===(X=this._parent)||void 0===X?void 0:X._t.pnx.metadata_general_date,content:p.qy`
<strong>${new Intl.DateTimeFormat(je,{timeZone:this._meta.caption.tz,dateStyle:"short"}).format(this._meta.caption.date)}</strong>
<br />${new Intl.DateTimeFormat(je,{timeZone:this._meta.caption.tz,hour:"numeric",minute:"numeric",second:"numeric",fractionalSecondDigits:3,timeZoneName:"longOffset"}).format(this._meta.caption.date)}
`}],qe=void 0!==(null===(J=this._meta)||void 0===J||null===($=J.properties)||void 0===$?void 0:$["view:azimuth"])&&`${this._meta.properties["view:azimuth"]}\xb0`,Ke=[{title:null===(ee=this._parent)||void 0===ee?void 0:ee._t.pnx.metadata_location_coordinates,content:p.qy`
${this._meta.gps[0]}, ${this._meta.gps[1]}
<pnx-copy-coordinates
._parent=${this._parent}
.gps=${this._meta.gps}
style="margin-left: 10px"
></pnx-copy-coordinates>
`,style:"width: 100%"},{title:null===(te=this._parent)||void 0===te?void 0:te._t.pnx.metadata_location_orientation,content:qe||missing()},{title:null===(ie=this._parent)||void 0===ie?void 0:ie._t.pnx.metadata_location_precision,content:(0,O.getGPSPrecision)(this._meta)||missing()}],Xe=(null===(ne=this._parent)||void 0===ne||null===(ae=ne.map)||void 0===ae||null===(re=ae._hasQualityScore)||void 0===re?void 0:re.call(ae))||(null===(se=this._meta)||void 0===se||null===(oe=se.properties)||void 0===oe?void 0:oe["quality:horizontal_accuracy"])||(null===(le=this._meta)||void 0===le||null===(ce=le.properties)||void 0===ce?void 0:ce["panoramax:horizontal_pixel_density"]);let Je,$e;if(Xe){var et,tt,it,nt,at,rt,st,ot,lt,ct,dt;const t=(0,F.getGrade)(F.QUALITYSCORE_GPS_VALUES,null===(et=this._meta)||void 0===et||null===(tt=et.properties)||void 0===tt?void 0:tt["quality:horizontal_accuracy"]),a=(0,F.getGrade)(360===(null===(it=this._meta)||void 0===it?void 0:it.horizontalFov)?F.QUALITYSCORE_RES_360_VALUES:F.QUALITYSCORE_RES_FLAT_VALUES,null===(nt=this._meta)||void 0===nt||null===(at=nt.properties)||void 0===at?void 0:at["panoramax:horizontal_pixel_density"]);$e=Math.round((a||1)*F.QUALITYSCORE_POND_RES+(t||1)*F.QUALITYSCORE_POND_GPS),Je=[{title:p.qy`
${null===(rt=this._parent)||void 0===rt?void 0:rt._t.pnx.metadata_quality_score}
<pnx-button
title="${null===(st=this._parent)||void 0===st?void 0:st._t.pnx.metadata_quality_help}"
kind="superinline"
@click=${()=>{var t;return null===(t=this._parent)||void 0===t?void 0:t._showQualityScoreDoc()}}
>
${(0,g.fa)(T.iW)}
</pnx-button>
`,content:p.qy`<pnx-quality-score grade=${$e} style="font-size: 16px"></pnx-quality-score>`,style:"width: 100%"},{title:null===(ot=this._parent)||void 0===ot?void 0:ot._t.pnx.metadata_quality_gps_score,content:(0,g.createWebComp)("pnx-grade",{stars:t,_t:null===(lt=this._parent)||void 0===lt?void 0:lt._t})},{title:null===(ct=this._parent)||void 0===ct?void 0:ct._t.pnx.metadata_quality_resolution_score,content:(0,g.createWebComp)("pnx-grade",{stars:a,_t:null===(dt=this._parent)||void 0===dt?void 0:dt._t})}]}const ut=Object.entries(this._meta.properties.exif).sort().filter((t=>{let[,a]=t;return a})).map((t=>{let[a,A]=t;return JSON.stringify(A).includes("\\u")&&(A=JSON.stringify(A).replace(/\\u[0-9A-Fa-f]{4}/g,(t=>" 0x"+parseInt(t.slice(2),16).toString(16).toUpperCase().padStart(4,"0"))).slice(1,-1).trim()),{title:a,content:A.length>30?p.qy`<textarea readonly .value=${A}></textarea>`:A,style:A.length>30?"width: 100%":void 0}}));ut.unshift({content:p.qy`
<pnx-link-button
size="sm"
target="_blank"
href="https://exiv2.org/metadata.html"
title=${null===(de=this._parent)||void 0===de?void 0:de._t.pnx.metadata_exif_doc_title}
>${(0,g.fa)(T.iW)} ${null===(ue=this._parent)||void 0===ue?void 0:ue._t.pnx.metadata_exif_doc}</pnx-link-button>
`,style:"width: 100%"});const At=[(null===(Ae=this._meta)||void 0===Ae||null===(he=Ae.caption)||void 0===he||null===(pe=he.producer)||void 0===pe?void 0:pe.length)>0&&{title:null===(ge=this._parent)||void 0===ge?void 0:ge._t.pnx.metadata_general_author,content:p.qy`
<strong>${this._meta.caption.producer[this._meta.caption.producer.length-1]}</strong>
${this._meta.caption.producer.length>1?p.qy`<br />${this._meta.caption.producer.slice(0,-1).join(", ")}`:h.s6}
`},(null===(me=this._meta)||void 0===me||null===(fe=me.caption)||void 0===fe?void 0:fe.date)&&{title:null===(ve=this._parent)||void 0===ve?void 0:ve._t.pnx.metadata_general_date,click:this._onCaptureDateClick,content_style:"cursor: pointer",content:p.qy`
<strong>${new Intl.DateTimeFormat(je,{timeZone:this._meta.caption.tz,dateStyle:"long"}).format(this._meta.caption.date)}</strong>
<br />${new Intl.DateTimeFormat(je,{timeZone:this._meta.caption.tz,hour:"numeric",minute:"numeric",second:"numeric"}).format(this._meta.caption.date)}
`},Re&&{title:null===(_e=this._parent)||void 0===_e?void 0:_e._t.pnx.metadata_camera,content:p.qy`
<strong>${Fe.length>0?Fe:missing()}</strong>
<br />${He}
`},(null===(Ee=this._meta)||void 0===Ee||null===(ye=Ee.caption)||void 0===ye?void 0:ye.license)&&{title:null===(Me=this._parent)||void 0===Me?void 0:Me._t.pnx.metadata_general_license,content:p.qy`${(0,p.Bk)(this._meta.caption.license)}`},Xe&&{title:null===(xe=this._parent)||void 0===xe?void 0:xe._t.pnx.metadata_quality,click:this._onQualityScoreClick,content:p.qy`<pnx-quality-score
grade=${$e}
style="font-size: 14px; cursor: pointer"
/>`},{title:null===(be=this._parent)||void 0===be?void 0:be._t.pnx.metadata_general_copy_id,content_style:"display: flex; gap: 5px;",content:p.qy`
<pnx-copy-button
kind="outline"
size="sm"
._t=${null===(we=this._parent)||void 0===we?void 0:we._t}
text=${this._meta.id}
title=${this._meta.id}
style="flex: 1"
>
${(0,g.fa)(E.jb)} ${null===(ke=this._parent)||void 0===ke?void 0:ke._t.pnx.metadata_general_picid}
</pnx-copy-button>
<pnx-copy-button
kind="outline"
size="sm"
._t=${null===(Ce=this._parent)||void 0===Ce?void 0:Ce._t}
text=${this._meta.sequence.id}
title=${this._meta.sequence.id}
style="flex: 1"
>
${(0,g.fa)(x.yv)} ${null===(Te=this._parent)||void 0===Te?void 0:Te._t.pnx.metadata_general_seqid}
</pnx-copy-button>
`},(null===(Se=this._meta)||void 0===Se?void 0:Se.origInstance)&&{title:null===(De=this._parent)||void 0===De?void 0:De._t.pnx.metadata_general_instance,content:p.qy`<strong>
<a href=${this._meta.origInstance.href+window.location.search} target="_blank" style="text-decoration: none">
<img
src=${(0,j.PanoramaxMetaCatalogURL)()+"/api/instances/"+this._meta.origInstance.instance_name+"/logo"}
style="height: 30px; max-width: 150px; vertical-align: middle"
alt=""
/>
<span style="text-decoration: underline">
${this._meta.origInstance.instance_name||this._meta.origInstance.href.replace(/^http.?:\/\//,"")}
</span>
</a>
</strong>`}];return p.qy`<pnx-tabs .hideNav=${this["block-editor"]}>
${this._toTab(p.qy`${(0,g.fa)(E.jb)} ${null===(Ie=this._parent)||void 0===Ie?void 0:Ie._t.pnx.metadata_summary}`,At)}
${this._toTab(p.qy`${(0,g.fa)(_.rw)} ${null===(Le=this._parent)||void 0===Le?void 0:Le._t.pnx.metadata_camera}`,Ze)}
${this._toTab(p.qy`${(0,g.fa)(m.gK)} ${null===(Ne=this._parent)||void 0===Ne?void 0:Ne._t.pnx.metadata_location}`,Ke)}
${Xe?this._toTab(p.qy`${(0,g.fa)(v.B9)} ${null===(ze=this._parent)||void 0===ze?void 0:ze._t.pnx.metadata_quality}`,Je):h.s6}
<h4 slot="title">${(0,g.fa)(D.DX)} ${null===(Pe=this._parent)||void 0===Pe?void 0:Pe._t.pnx.semantics_title}</h4>
<div slot="content" class="data-blocks">
<pnx-semantics-metadata ._parent=${this._parent}></pnx-semantics-metadata>
</div>
${null!==(Ue=this._meta.properties)&&void 0!==Ue&&Ue.exif?this._toTab(p.qy`${(0,g.fa)(w.DD)} ${null===(Oe=this._parent)||void 0===Oe?void 0:Oe._t.pnx.metadata_exif}`,ut):h.s6}
</pnx-tabs>`}}PictureMetadata.styles=[U.Op,U.YC,U.PC,U.R,U.Tk,h.AH`
div[slot="content"] {
padding: 5px 10px;
background-color: #ededed;
}
.data-block {
min-width: 50%;
}
pnx-semantics-table {
overflow-x: auto;
display: block;
}
`],PictureMetadata.properties={_meta:{state:!0},"block-editor":{type:Boolean}},customElements.define("pnx-picture-metadata",PictureMetadata)},499:(t,a,A)=>{"use strict";A.d(a,{A:()=>PlayerOptions});var h=A(4542),p=A(8591),g=A(7744),m=A(325),v=A(9243),_=A(9048),E=A(5995);class PlayerOptions extends h.WF{connectedCallback(){super.connectedCallback(),(0,E.onceParentAvailable)(this).then((()=>{var t,a;return null===(t=this._parent)||void 0===t||null===(a=t.psv)||void 0===a?void 0:a.addEventListener("transition-duration-changed",(t=>{this.renderRoot.querySelector("#pnx-player-speed").value=_.Vf-t.detail.value}))}))}_onSpeedChange(t){var a,A;const h=_.Vf-t.target.value;null===(a=this._parent)||void 0===a||null===(A=a.psv)||void 0===A||A.setTransitionDuration(h)}_onContrastClick(){const t=this.renderRoot.querySelector("#pnx-player-contrast");var a,A,h,p;"true"==t.getAttribute("active")?(t.removeAttribute("active"),null===(a=this._parent)||void 0===a||null===(A=a.psv)||void 0===A||A.setHigherContrast(!1)):(t.setAttribute("active","true"),null===(h=this._parent)||void 0===h||null===(p=h.psv)||void 0===p||p.setHigherContrast(!0))}render(){var t,a,A,p;return h.qy`
<div class="pnx-input-range" title="${null===(t=this._parent)||void 0===t?void 0:t._t.pnx.sequence_speed}">
${(0,E.fa)(v.rO)}
<input
id="pnx-player-speed"
type="range" name="speed"
min="0" max="${_.Vf-100}"
value="${_.Vf-(null===(a=this._parent)||void 0===a?void 0:a.psv.getTransitionDuration())}"
title="${null===(A=this._parent)||void 0===A?void 0:A._t.pnx.sequence_speed}"
style="width: 100%;"
@change=${this._onSpeedChange}
/>
${(0,E.fa)(g.KM)}
</div>
<pnx-button
id="pnx-player-contrast"
title="${null===(p=this._parent)||void 0===p?void 0:p._t.pnx.contrast}"
kind="outline"
@click=${this._onContrastClick}
>
${(0,E.fa)(m.rC)}
</pnx-button>
`}}PlayerOptions.styles=[p.Op,h.AH`
:host {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 15px;
padding: 5px 15px;
}
.pnx-input-range {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
width: 100%;
}
`],customElements.define("pnx-player-options",PlayerOptions)},5187:(t,a,A)=>{"use strict";A.d(a,{A:()=>QualityScoreDoc});var h=A(4542),p=A(8591),g=A(5995),m=A(3233);class QualityScoreDoc extends h.WF{render(){var t,a,A,p,v;return h.qy`
<h4>${(0,g.fa)(m.B9)} ${null===(t=this._t)||void 0===t?void 0:t.pnx.qualityscore_title}</h4>
<p>${null===(a=this._t)||void 0===a?void 0:a.pnx.qualityscore_doc_1}</p>
<p>${null===(A=this._t)||void 0===A?void 0:A.pnx.qualityscore_doc_2}</p>
<pnx-quality-score grade="5"></pnx-quality-score>
<p>${null===(p=this._t)||void 0===p?void 0:p.pnx.qualityscore_doc_3}</p>
<pnx-link-button
href="https://docs.panoramax.fr/pictures-metadata/quality_score/"
target="_blank"
kind="outline"
style="width: 100%"
>${null===(v=this._t)||void 0===v?void 0:v.pnx.qualityscore_doc_link}</pnx-link-button>
`}}QualityScoreDoc.styles=[p.YC,p.Op],customElements.define("pnx-quality-score-doc",QualityScoreDoc)},9588:(t,a,A)=>{"use strict";A.d(a,{A:()=>ReportForm});var h=A(4542),p=A(8591),g=A(5995),m=A(4881),v=A(6311),_=A(7516),E=A(2975),x=A(1708),w=A(7343);const C=["","blur_missing","blur_excess","inappropriate","privacy","picture_low_quality","mislocated","copyright","other"];class ReportForm extends h.WF{_onSubmit(t){var a,A,h,p;t.preventDefault();const g=null===(a=this._parent)||void 0===a||null===(A=a.psv)||void 0===A?void 0:A.getPictureMetadata(),m=Object.fromEntries(new FormData(t.target)),v={issue:m.issue,picture_id:m["whole-sequence"]?null:null===g||void 0===g?void 0:g.id,reporter_comments:m.comments,reporter_email:m.email,sequence_id:null===g||void 0===g||null===(h=g.sequence)||void 0===h?void 0:h.id};this.mode="wait",null===(p=this._parent)||void 0===p||p.api.sendReport(v).then((()=>{this.mode="success"})).catch((t=>{console.error(t),this.mode="failure",this.failure=t}))}render(){var t,a,A,p,T,D,U,O,j,F;const G=(0,w.getUserAccount)();var W,Y,Q,Z;return this.mode?h.qy`
<h4>${(0,g.fa)(v.JA)} ${null===(W=this._parent)||void 0===W?void 0:W._t.pnx.report}</h4>
<p>
${"wait"===this.mode?null===(Y=this._parent)||void 0===Y?void 0:Y._t.pnx.report_wait:h.s6}
${"success"===this.mode?null===(Q=this._parent)||void 0===Q?void 0:Q._t.pnx.report_success:h.s6}
${"failure"===this.mode?null===(Z=this._parent)||void 0===Z?void 0:Z._t.pnx.report_failure.replace("{e}",this.failure):h.s6}
</p>
`:h.qy`
<h4>${(0,g.fa)(v.JA)} ${null===(t=this._parent)||void 0===t?void 0:t._t.pnx.report}</h4>
${G&&null!==(a=this._parent)&&void 0!==a&&a._t?h.qy`
<p>${null===(A=this._parent)||void 0===A?void 0:A._t.pnx.report_auth.replace("{a}",G.name)}</p>
`:h.s6}
<form @submit=${this._onSubmit.bind(this)}>
<div class="group">
<label for="issue">${(0,g.fa)(_.faCircleInfo)} ${null===(p=this._parent)||void 0===p?void 0:p._t.pnx.report_nature_label}</label>
<select name="issue" id="issue" required class="pnx-100w">
${C.map((t=>{var a;return h.qy`
<option
value=${t}
${""===t?h.qy`disabled selected hidden`:h.s6}
>
${null===(a=this._parent)||void 0===a?void 0:a._t.pnx.report_nature[t]}
</option>
`}))}
</select>
</div>
<div class="group group-inline">
<input name="whole-sequence" id="whole-sequence" type="checkbox" />
<label for="whole-sequence">${null===(T=this._parent)||void 0===T?void 0:T._t.pnx.report_whole_sequence}</label>
</div>
<div class="group"