vue-silentbox/dist/silent-box.iife.js

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://silentbox.rocek.dev/images/sb3-dark.png"> <img alt="SilentBox logo." src="https://silentbox.rocek.dev/images/sb3-light.png"> </picture> </p>

var SilentBox=function(e){"use strict";const k=n=>{const t=/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/.exec(n);return t!=null&&t[7]!==void 0?t[7]:""},I=n=>{const t=/(vimeo(pro)?\.com)\/(?:[^\d]+)?(\d+)\??(.*)?$/.exec(n);return t?t[3]:""},S=n=>{const t=/(?:player\.twitch\.tv\/\?channel=|twitch\.tv\/)([a-zA-Z0-9_]+)/.exec(n);return t?t[1]:""},N=n=>{if(E(n))try{const s=new XMLHttpRequest;return s.open("GET",n,!1),s.send(null),JSON.parse(s.responseText)}catch(s){return console.log(s),null}throw new Error("Given string: url is not valid URL address.")},B=n=>["youtube.com","youtu.be","vimeo.com","twitch.tv"].some(t=>n.includes(t)),R=n=>[".mp4",".ogg",".webm",".mov",".flv",".wmv",".mkv"].some(t=>n.toLowerCase().includes(t)),T=(n,s="")=>{var t;if(/(youtu\.?be)/.test(n)){const i=k(n);return`${location.protocol}//img.youtube.com/vi/${i}/hqdefault.jpg`}else if(/(vimeo(pro)?\.com)/.test(n)){const i=I(n),d=N(`${location.protocol}//vimeo.com/api/v2/video/${i}.json`);return d&&d.length>0?(t=d[0])==null?void 0:t.thumbnail_medium:s}else{if(E(n))return n;throw new Error("Given string: src is not valid URL address.")}},E=n=>new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(n),M=e.createElementVNode("div",{id:"silentbox-overlay__background"},null,-1),U=["onClick"],G={id:"silentbox-overlay__embed"},z=["allow","src"],K={key:1,class:"silentbox-video__frame"},D=["src","autoplay","controls"],O=["srcset","src","alt"],Y={key:1,id:"silentbox-overlay__tool-buttons"},P=["href"],X=["onClick","onKeyup"],A=[e.createElementVNode("div",{class:"icon"},null,-1)],j={key:0,id:"silentbox-overlay__arrow-buttons"},H=["onClick","onKeyup"],F=["onClick","onKeyup"],C=e.defineComponent({__name:"SilentBoxOverlay",props:{item:null,visible:{type:Boolean},currentItem:null,totalItems:null},emits:["silentbox-internal-close-overlay","silentbox-internal-get-next-item","silentbox-internal-get-prev-item","silentbox-overlay-opened","silentbox-overlay-hidden"],setup(n,{emit:s}){const t=n,i=e.inject("silent-box-options")||{downloadButtonLabel:"Download"},d=e.computed(()=>typeof t.item.download=="string"?t.item.download:t.item.src),l=r=>{let a="";const c=k(r);return c&&(a=`${location.protocol}//www.youtube.com/embed/${c}?rel=0`,t.item.autoplay&&(a+="&autoplay=1"),t.item.controls||(a+="&controls=0")),a},g=r=>{let a="";const c=I(r);return c&&(a=`${location.protocol}//player.vimeo.com/video/${c}?rel=0`,t.item.autoplay&&(a+="&autoplay=1")),a},x=r=>{let a="";const c=S(r);return c&&(a=`${location.protocol}//player.twitch.tv/?channel=${c}&parent=${location.hostname}`,t.item.autoplay&&(a+="&autoplay=true")),a},_=r=>/(youtu\.?be)/.test(r)?l(r):/(vimeo(pro)?\.com)/.test(r)?g(r):/(?:player\.|clips\.|www\.)?twitch\.tv/.test(r)?x(r):r,v=()=>{document.body.classList.contains("silentbox-is-opened")||document.body.classList.add("silentbox-is-opened")},p=()=>{document.body.classList.contains("silentbox-is-opened")&&document.body.classList.remove("silentbox-is-opened")},u=e.reactive({name:"silentbox-animation__swipe-left"}),y=()=>{s("silentbox-internal-close-overlay")},b=()=>{u.name="silentbox-animation__swipe-left",s("silentbox-internal-get-next-item")},h=()=>{u.name="silentbox-animation__swipe-right",s("silentbox-internal-get-prev-item")},o=e.reactive({posX:0,posY:0}),f=r=>{const{clientX:a,clientY:c}=r.touches[0];o.posX=a,o.posY=c},m=r=>{const{clientX:a,clientY:c}=r.touches[0],{posX:V,posY:L}=o;if(V===0||L===0)return;const $=V-a,Z=L-c;Math.abs($)>Math.abs(Z)&&($>0?b():h()),o.posX=0,o.posY=0},w=r=>{r.code==="Escape"&&y(),r.code==="ArrowRight"&&b(),r.code==="ArrowLeft"&&h()};return e.onUpdated(()=>{t.visible?(window.addEventListener("keyup",w),v()):(window.removeEventListener("keyup",w),p())}),(r,a)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,id:"silentbox-overlay",role:"overlay",onTouchstart:f,onTouchmove:m},[M,e.createVNode(e.Transition,{name:u.name,mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{id:"silentbox-overlay__content",onClick:e.withModifiers(y,["stop"]),key:t.item.src},[e.createElementVNode("div",G,[e.createElementVNode("div",{id:"silentbox-overlay__container",onClick:a[0]||(a[0]=e.withModifiers(()=>{},["stop"]))},[e.unref(B)(t.item.src)?(e.openBlock(),e.createElementBlock("iframe",{key:0,allow:`accelerometer; ${!!t.item.autoplay&&"autoplay;"} encrypted-media; gyroscope; picture-in-picture`,src:_(t.item.src),frameborder:"0",width:"100%",height:"100%",allowfullscreen:""},null,8,z)):e.unref(R)(t.item.src)?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("video",{src:t.item.src,autoplay:!!t.item.autoplay,controls:t.item.controls,class:"silentbox-video__embed"},null,8,D)])):(e.openBlock(),e.createElementBlock("img",{key:2,srcset:t.item.srcSet?t.item.srcSet.join(","):t.item.src,src:t.item.src,alt:t.item.alt},null,8,O))]),t.item.description?(e.openBlock(),e.createElementBlock("p",{key:0,id:"silentbox-overlay__description",onClick:a[1]||(a[1]=e.withModifiers(()=>{},["prevent","stop"]))},e.toDisplayString(t.item.description),1)):e.createCommentVNode("",!0),t.item.download?(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("a",{href:e.unref(d),class:"download",download:""},e.toDisplayString(e.unref(i).downloadButtonLabel),9,P)])):e.createCommentVNode("",!0)])],8,U))]),_:1},8,["name"]),e.createElementVNode("button",{id:"silentbox-overlay__close-button",role:"button",tabindex:"3",onClick:e.withModifiers(y,["prevent"]),onKeyup:e.withKeys(y,["enter"])},A,40,X),t.totalItems>1?(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("button",{class:"arrow arrow-previous",role:"button",tabindex:"2",onClick:e.withModifiers(h,["stop"]),onKeyup:e.withKeys(h,["enter"])},null,40,H),e.createElementVNode("button",{class:"arrow arrow-next",role:"button",tabindex:"1",onClick:e.withModifiers(b,["stop"]),onKeyup:e.withKeys(b,["enter"])},null,40,F)])):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0)}}),ee="",q=["href","onClick"],W=["loading","src","alt","width","height"],J=e.defineComponent({__name:"SilentBoxGallery",props:{lazyLoading:{type:Boolean},previewCount:null,fallbackThumbnail:null,gallery:null,image:null},emits:["silentbox-overlay-opened","silentbox-overlay-hidden","silentbox-overlay-next-item-displayed","silentbox-overlay-prev-item-displayed"],setup(n,{expose:s,emit:t}){const i=n,d=e.computed(()=>i.gallery?i.gallery.length:1),l=e.reactive({item:{src:"",alt:"",thumbnailWidth:150,thumbnailHeight:0,thumbnail:"",autoplay:!1,controls:!0,description:"",download:!1},visible:!1,currentItem:0,totalItems:d}),g=o=>B(o)?T(o,i.fallbackThumbnail):o,x=o=>({...l.item,download:!1,...o,thumbnail:o.thumbnail?o.thumbnail:g(o.src)}),_=()=>i.gallery&&i.gallery.length>0?i.gallery.map(x):i.image?[x(i.image)]:[],v=e.computed(()=>i.previewCount&&i.previewCount>0&&i.gallery?i.gallery.slice(0,i.previewCount).map(x):_()),p=e.computed(()=>_()),u=(o,f=0)=>{l.visible=!0,l.item=o,l.currentItem=f,t("silentbox-overlay-opened",o)},y=()=>{l.visible=!1,t("silentbox-overlay-hidden",l.item)},b=()=>{let o=l.currentItem+1;o=o<=p.value.length-1?o:0,l.item=p.value[o],l.currentItem=o,t("silentbox-overlay-next-item-displayed",l.item)},h=()=>{let o=l.currentItem-1;o=o>=0?o:p.value.length-1,l.item=p.value[o],l.currentItem=o,t("silentbox-overlay-prev-item-displayed",l.item)};return s({openOverlay:u}),(o,f)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(o.$slots,"default"),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(v),(m,w)=>(e.openBlock(),e.createElementBlock("a",{key:m.src,href:m.src,onClick:e.withModifiers(r=>u(m,w),["prevent"]),class:"silentbox-item"},[e.renderSlot(o.$slots,"silentbox-item",{silentboxItem:m},()=>[e.createElementVNode("img",{loading:n.lazyLoading?"lazy":"eager",src:m.thumbnail,alt:m.alt,width:m.thumbnailWidth,height:m.thumbnailHeight},null,8,W)])],8,q))),128)),e.createVNode(C,{visible:l.visible,item:l.item,"current-item":l.currentItem,"total-items":e.unref(d),onSilentboxInternalCloseOverlay:y,onSilentboxInternalGetNextItem:b,onSilentboxInternalGetPrevItem:h},null,8,["visible","item","current-item","total-items"])]))}}),te="";return{install:(n,s={})=>{n.component("silent-box",J),n.provide("silent-box-options",{downloadButtonLabel:"Download",...s}),n.config.globalProperties.$silentbox={open:t=>{const i=document.createElement("div");i.setAttribute("id","silentbox--false-root");const d=e.createApp(C,{item:t,currentItem:1,totalItems:1,visible:!0,onSilentboxInternalCloseOverlay:()=>{l.$emit("silentbox-overlay-hidden",t),d.unmount(),i.remove()}}),l=d.mount(i);l.$emit("silentbox-overlay-opened",t),l.$forceUpdate(),document.body.appendChild(l.$el)}}}}}(Vue);