https://511mn.org/modal-media-sign-gantry-f43b34e6198db3f91f38.js

1"use strict";(self.webpackChunkone_web=self.webpackChunkone_web||[]).push([[9935],{326:(e,t,i)=>{i.r(t),i.d(t,{MEDIA_ERROR:()=>w,SHOW_OTHERS:()=>y,default:()=>u});var a=i(71413),r=i(52706),o=i(30555),s=i(85512),n=i(35135),l=i(52850),d=i(24634),c=i(5124),g=i(32701),h=i(56188),m=(i(82890),Object.defineProperty),v=Object.getOwnPropertyDescriptor,p=(e,t,i,a)=>{for(var r,o=a>1?void 0:a?v(t,i):t,s=e.length-1;s>=0;s--)(r=e[s])&&(o=(a?r(t,i,o):r(o))||o);return a&&o&&m(t,i,o),o};const w="crc:media:error",y="crc:media:show";let u=class extends a.WF{constructor(){super(...arguments),this.mediaState=l.zg1.WAITING,this.showLoader=!1,this.cover=!1}static get styles(){return[g.A,d.A,c.A,a.AH`
2				.modal-img,
3				.modal-img-link,
4				.modal-img-unavailable {
5					width: 100%;
6					height: 100%;
7				}
8
9				.modal-img {
10					object-fit: contain;
11				}
12
13				.cover {
14					object-fit: cover;
15				}
16
17				.modal-img-link {
18					object-fit: contain;
19					cursor: pointer;
20				}
21
22				.modal-img-unavailable {
23					object-fit: contain;
24				}
25				spinning-loader {
26					position: absolute;
27					left: 50%;
28					top: 50%;
29					margin: 0;
30					transform: translate(-50%, -50%);
31					z-index: 1;
32				}
33			`]}render(){return a.qy`
34			<!--	waiting for content, or waiting for content to load	-->
35			${this.showLoader?a.qy`<spinning-loader></spinning-loader>`:void 0}
36			${this.view&&this.mediaState!==l.zg1.ERROR?a.qy`
37						<!--	content present, ready to be shown once loaded	-->
38						${this.view.category===l.NaE.LINK?a.qy`
39									<a
40										href=${this.view?.url??"#"}
41										rel="noopener noreferrer"
42										title=${this.view.title}
43										aria-label="camera"
44									>
45										<img
46											class="modal-img-link"
47											src="${"/images/icon-external-link-fill-solid.svg"}"
48											alt=""
49											role="presentation"
50										/>
51									</a>
52							  `:(0,s.D)(this.view.uri,a.qy`
53										<img
54											class=${(0,o.H)({"modal-img":!0,cover:this.cover})}
55											alt=${this.view.title}
56											@load=${this.onImgLoad}
57											@error=${this.onImgError}
58											src=${(0,n.J)(this.view.url??"/images/icon-camera-closed-fill-solid-padded-modal.svg")}
59										/>
60									`)}
61				  `:a.qy``}
62			<!--	content missing or encountered an error while loading	-->
63			${this.mediaState===l.zg1.ERROR?a.qy`
64						<img
65							src=${"/images/icon-camera-closed-fill-solid-padded-modal.svg"}
66							alt="Camera Unavailable"
67							class="modal-img-unavailable"
68						/>
69				  `:void 0}
70		`}onImgError(e){const t=e.currentTarget;if(this.view?.url===t.src){this.mediaState=l.zg1.ERROR;const e=(0,h.h)(w,{detail:{contentUri:null}});this.dispatchEvent(e),setTimeout((()=>{this.dispatchEvent(new CustomEvent("show-others"))}),2e3)}}onImgLoad(e){const t=e.currentTarget;this.showLoader=!1,clearInterval(this._loaderTimeout),clearTimeout(this._imageTimeout),(this.view?.url===t.src||t.src.includes("/images/icon-camera-closed-fill-solid-padded-modal.svg"))&&(this.mediaState=l.zg1.READY)}willUpdate(e){if(clearTimeout(this._imageTimeout),this._imageTimeout=setTimeout((()=>{this.showLoader&&this.dispatchEvent(new CustomEvent("show-others"))}),3e3),e.has("view")&&this.view&&(this.view.category===l.NaE.LINK?this.mediaState=l.zg1.READY:this.mediaState=l.zg1.WAITING),e.has("mediaState")&&this.mediaState===l.zg1.WAITING&&(clearInterval(this._loaderTimeout),this._loaderTimeout=setInterval((()=>{this.showLoader=!0}),1e3)),this.view&&this.mediaState!==l.zg1.WAITING&&(clearInterval(this._loaderTimeout),this.showLoader=!1),e.has("view")&&!this.view){this.mediaState=l.zg1.ERROR;const e=(0,h.h)(w,{detail:{contentUri:null}});this.dispatchEvent(e)}}};p([(0,r.MZ)({type:Object,hasChanged:(e,t)=>!(!t&&!e||t&&e&&t.url===e.url&&t.uri===e.uri)})],u.prototype,"view",2),p([(0,r.MZ)({type:String})],u.prototype,"mediaState",2),p([(0,r.MZ)({type:Boolean})],u.prototype,"showLoader",2),p([(0,r.MZ)({type:Boolean})],u.prototype,"cover",2),u=p([(0,r.EM)("modal-media-photo")],u)},39705:(e,t,i)=>{i.r(t),i.d(t,{default:()=>w});var a=i(71413),r=i(52706),o=i(80480),s=i(52850),n=i(24634),l=i(5124),d=i(32701),c=i(5127),g=i(56188),h=i(326),m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,p=(e,t,i,a)=>{for(var r,o=a>1?void 0:a?v(t,i):t,s=e.length-1;s>=0;s--)(r=e[s])&&(o=(a?r(t,i,o):r(o))||o);return a&&o&&m(t,i,o),o};let w=class extends a.WF{constructor(){super(...arguments),this.mediaState=s.zg1.WAITING,this.showLoader=!1}static get styles(){return[d.A,n.A,l.A,c.A,a.AH`
71				.gantry-modal {
72					display: flex;

73					align-items: center;
74				}
75				.gantry-top {
76					width: 100%;
77					text-align: center;
78				}
79				.gantry-top img {
80					width: 80%;
81					max-height: 50vh;
82				}
83				.gantry-images {
84					display: flex;
85					flex-direction: column;
86					align-items: center;
87					justify-content: center;
88					width: 70vw;
89				}
90				.ganty-modal-top-image {
91					object-fit: contain;
92				}
93				.gantry-sign {
94					flex-grow: 1;
95					display: flex;
96					justify-content: center;
97					padding: var(--gap);
98				}
99				.gantry-sign img {
100					width: 100%;
101				}
102				.gantry-signs {
103					width: 75vw;
104					display: flex;
105					justify-content: space-around;
106					padding-top: var(--gap);
107				}
108			`]}render(){return a.qy`
109			<!--	waiting for content, or waiting for content to load	-->
110			${this.showLoader?a.qy`
111						<div
112							class="modal-img-container"
113							style=${(0,o.W)({display:this.imageUrl&&this.mediaState!==s.zg1.WAITING?"none":"block"})}
114						>
115							<img
116								src="${"/images/loading.svg"}"
117								alt="Sign loading"
118								class="modal-img-placeholder"
119							/>
120						</div>
121				  `:void 0}
122			${this.imageUrl?a.qy`
123						<!--	content present, ready to be shown once loaded	-->
124						<div
125							class="gantry-modal"
126							style=${(0,o.W)({display:this.imageUrl&&this.mediaState===s.zg1.READY?"flex":"none"})}
127						>
128							<div class="gantry-images">
129								${this.imageUrl.startsWith("data")?a.qy``:a.qy`
130											<div class="gantry-top">
131												<img
132													class="gantry-modal-top-image"
133													src="${this.imageUrl}"
134													alt=""
135													role="presentation"
136												/>
137											</div>
138									  `}
139								<div class="gantry-signs">
140									${this.sign?.gantrySigns?.map((e=>a.qy`
141											<div class="gantry-sign">
142												<img
143													src="${(e?.views?.[0]).imageUrl}"
144													alt="${e?.views?.[0]?.title??"Gantry Sign"}"
145												/>
146											</div>
147										`))}
148								</div>
149							</div>
150						</div>
151				  `:a.qy``}
152			<!--	content missing or encountered an error while loading	-->
153			<div
154				class="modal-img-container"
155				style=${(0,o.W)({display:this.mediaState===s.zg1.ERROR?"block":"none"})}
156			>
157				<img
158					src=${"/images/icon-sign-broken-fill-solid.svg"}
159					alt="Sign Unavailable"
160					class="modal-img-placeholder"
161				/>
162			</div>
163		`}updated(e){if(e.has("imageUrl")&&this.imageUrl){this.mediaState=s.zg1.WAITING;const e=document.createElement("img");e.onerror=()=>{this.mediaState=s.zg1.ERROR;const e=(0,g.h)(h.MEDIA_ERROR,{detail:{contentUri:null}});this.dispatchEvent(e)},e.onload=()=>{this.mediaState=s.zg1.READY},e.src=this.imageUrl}(e.has("imageUrl")&&!this.imageUrl||e.has("mediaState")&&this.mediaState===s.zg1.WAITING)&&(clearInterval(this._loaderTimeout),this._loaderTimeout=setInterval((()=>{this.showLoader=!0}),1e3)),this.imageUrl&&this.mediaState!==s.zg1.WAITING&&(clearInterval(this._loaderTimeout),this.showLoader=!1),e.has("imageUrl")&&!this.imageUrl&&(this.mediaState=s.zg1.ERROR)}};p([(0,r.MZ)({type:String})],w.prototype,"imageUrl",2),p([(0,r.MZ)({type:Object})],w.prototype,"sign",2),p([(0,r.MZ)({type:String})],w.prototype,"mediaState",2),p([(0,r.MZ)({type:Boolean})],w.prototype,"showLoader",2),w=p([(0,r.EM)("modal-media-sign-gantry")],w)},5127:(e,t,i)=>{i.d(t,{A:()=>a});const a=[i(71413).AH`
164		:host {
165			--sign-border-size: calc(var(--border-width) * 5);
166			--card-width: 40vw;
167			--card-width-mobile: 67vw;
168			--card-aspect-ratio: 3/7;
169		}
170		.modal-img-container {
171			width: 100%;
172			height: 100%;
173			text-align: center;
174		}
175		.modal-img-placeholder,
176		.sign-message-div {
177			height: calc(var(--card-width-mobile) * var(--card-aspect-ratio));
178			width: var(--card-width-mobile);
179			position: relative;
180			top: 50%;
181			transform: translateY(-50%);
182			background-color: black;
183			display: inline-block;
184			object-fit: cover;
185		}
186		.sign-message-div {
187			border: calc(var(--sign-border-size)) solid rgb(var(--darker));
188			padding: 0.5rem;
189		}
190		@media screen and (min-height: 600px) {
191			.modal-img-placeholder {
192				height: 60vh;
193			}
194		}
195		@supports (-webkit-overflow-scrolling: touch) {

196			.modal-img-placeholder {
197				height: calc(var(--card-width-mobile) * var(--card-aspect-ratio));
198				width: var(--card-width-mobile);
199			}
200		}
201		@media (min-width: 768px) {
202			.modal-img-placeholder,
203			.sign-message-div {
204				height: calc(var(--card-width) * var(--card-aspect-ratio));
205				width: var(--card-width);
206			}
207		}
208	`]}}]);