https://discoversurreybc.com/_resources/themes/default/dist/assets/UIElementalGallery.ce-DrZHqK1T.js

1import{_ as e,P as t,w as l,o as a,n as s,c as n,d as o,e as u,x as c,z as i,i as r,k as d,l as p,R as v,u as f,S as m,f as g,r as y,F as k,T as b}from"./main-UqpYKZEw.js";import{j as M,a as $,b as S,c as h,u as T,d as L}from"./composables-BNXpm-LZ.js";import{M as E}from"./MDSkeleton.ce-B3PsUbGG.js";const j={name:"GalleryTile",components:{Picture:t},props:{pos:{type:String,default(){return null}},config:{type:Object,default(){return null}}},setup(e){const t=d(null);const s=d(null);const n=d(null);const o=d(null);const u=p((()=>M(e.pos)));const c=p((()=>t.value?.display?.displaycontent));const i=p((()=>t.value?.display?.showtitle));const r=p((()=>t.value?.display?.displaylinks));const v=d({backgroundColor:null});l(t,((e,l)=>{if(e){n.value={...t.value?.grid??{},...t.value?.ratios,...t.value?.layout};s.value={...t.value?.image};v.value.backgroundColor=t.value?.display?.backgroundcolor;o.value=t.value?.links?.shift()}}));a((()=>{if(e.config?.constructor!==Object)t.value=JSON.parse(e.config);else t.value=e.config}));return{data:t,layoutprops:n,showtitle:i,showcontent:c,showlinks:r,image:s,posindex:u,slidestyle:v,url:o}}};function w(e,t,l,a,d,p){const v=s("Picture");const f=s("rs-griditem");return a.data?.id?(n(),o(f,i({key:0},e.$attrs,{assets:"","gap-0":"","xxs-2":"","sm-12":"",id:`asset-${a.data?.id}`},a.layoutprops,{style:a.slidestyle,stackable:""}),{default:u((()=>[c(v,{config:l.config,alt:a.data?.image?.alt??a.data?.title,"stackable-item":""},null,8,["config","alt"])])),_:1},16,["id","style"])):r("",true)}const _=e(j,[["render",w]]);const x='@import"/_resources/themes/default/dist/assets/css/main.css";';const D={name:"UIElementalGallery",components:{GalleryTile:_,Picture:t,MDSkeleton:E,MDDialog:v},props:{info:{type:String,default(){return null}},config:{type:Object,default(){return null}}},setup(e){const t=f();const s=d(null);const n=d(null);const o=d(null);const u=d(null);const c=d(null);const i=d(null);const r=d(null);const p=d(null);const m=d(null);const g=d(null);const y=d(null);const k=d(null);const M=e=>{if(!!e){const t=document.createElement("template");const l=e?.alt??e?.title??"Discover Surrey, BC";const a=`<picture asset-id="${e?.id}" title="${l}">\n                    <source srcset="${E(e)}" type="${e?.mimetype}">\n                    <img ref="asset" src="${e?.url??e?.thumbnail}" alt="${u?.alt}" loading="lazy" easing>\n                </picture>`;let s=b(v,{config:e}).mount(document.createElement("template"));s.$el.querySelector("dialogcontent").innerHTML=a;t.innerHTML=s.$el.cloneNode(true).outerHTML;s=null;return t.content.querySelector("dialog")}return null};const E=e=>{const l=[];const a=[];if(!!e?.sources?.length)e?.sources.map((e=>{if(!a.includes(e.breakpointatt)){const a=`${t.baseurl}${e.image}`;l.push(`${a} ${e.breakpointatt}w`)}a.push(e.breakpointatt)}));return l.join(", ")};l(s,((e,l)=>{if(e instanceof HTMLElement)t.observe(e)}));l(o,((e,t)=>{if(!!e){k.value=k.value instanceof HTMLElement?k.value:document.querySelector("body");if(k.value){y.value?.remove();y.value=M(o.value);k.value?.prepend(y.value);if(y.value instanceof HTMLElement){y.value?.addEventListener("click",(e=>{void 0;if(e.target.classList.contains("dialog-close")){e.stopImmediatePropagation();y.value?.close()}}));y.value?.addEventListener("close",(e=>{void 0;y.value?.remove();j()}));y.value?.showModal()}}}}));const j=()=>{y.value=null;o.value=null};l(n,((e,t)=>{if(e instanceof HTMLElement)n.value?.addEventListener("click",(e=>{const t=e.target;const l=parseInt(t.getAttribute("asset-id")??0,10);o.value=r.value?.get(l)??null}))}));l(u,((e,t)=>{if(e){const{layout:t}=$(u);const{ratios:l}=S(u);const{grid:a,gap:s}=h(u);const{properties:n}=T(u);p.value={...t.value,...l.value,...a.value};g.value={...a.value};if(!!s.value)g.value[s.value]="";i.value=[...e?.assets??[]];r.value=new Map;e?.assets?.map((e=>{if(e.id)r.value.set(parseInt(e.id??0,10),e)}));c.value={...e?.glider??{}};m.value={...n.value??{}};if(p.value?.template)m.value[p.value?.template]="";if("interactive"in m.value)if(!!m.value?.interactive)m.value["interactive"]="";if("standalone"in m.value)p.value["standalone"]=""}}));a((()=>{const t=e.info?JSON.parse(e?.info):null;if(t?.constructor==Object&&!!t?.prefetch)L({...t,lazyTarget:s,query:"readGalleryCollection",data:u});else if(!!e.config)u.value=JSON.parse(e.config)?.props}));return{root:s,assets:i,config:c,layoutprops:p,contentprops:m,collection:r,gallery:n,asset:o}}};function H(e,t,l,a,d,p){const v=s("GalleryTile");const f=s("rs-grid");const b=s("rs-media");const M=s("MDBlocker");const $=s("MDSkeleton");const S=s("rs-container");return n(),o(S,i({ref:"root","rs-elemental":"uielementalgallery"},a.layoutprops),{default:u((()=>[(n(),o(m,null,{default:u((()=>[c(b,{stackable:""},{default:u((()=>

1[a.collection?.size?(n(),o(f,i({key:0,ref:"gallery",assets:"","gap-0":"","xxs-2":"","sm-12":""},a.contentprops,{"stackable-item":""}),{default:u((()=>[(n(true),g(k,null,y(a.collection.values(),((e,t)=>(n(),o(v,{config:e},null,8,["config"])))),256))])),_:1},16)):r("",true)])),_:1})])),fallback:u((()=>[c($,{"aspect-1-1":""},{default:u((()=>[c(M,{active:"true",cursor:"default",type:"default"})])),_:1})])),_:1}))])),_:1},16)}const O=e(D,[["render",H],["styles",[x]]]);export{O as default};
2//# sourceMappingURL=UIElementalGallery.ce-DrZHqK1T.js.map