vue-silentbox/dist/silent-box.cjs.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>

"use strict";const e=require("vue"),B=n=>{const t=/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/.exec(n);return t!=null&&t[7]!==void 0?t[7]:""},C=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]:""},R=n=>{if(L(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.")},V=n=>["youtube.com","youtu.be","vimeo.com","twitch.tv"].some(t=>n.includes(t)),T=n=>[".mp4",".ogg",".webm",".mov",".flv",".wmv",".mkv"].some(t=>n.toLowerCase().includes(t)),M=(n,s="")=>{var t;if(/(youtu\.?be)/.test(n)){const i=B(n);return`${location.protocol}//img.youtube.com/vi/${i}/hqdefault.jpg`}else if(/(vimeo(pro)?\.com)/.test(n)){const i=C(n),d=R(`${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(L(n))return n;throw new Error("Given string: src is not valid URL address.")}},L=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),U=e.createElementVNode("div",{id:"silentbox-overlay__background"},null,-1),G=["onClick"],z={id:"silentbox-overlay__embed"},K=["allow","src"],D={key:1,class:"silentbox-video__frame"},O=["src","autoplay","controls"],Y=["srcset","src","alt"],P={key:1,id:"silentbox-overlay__tool-buttons"},X=["href"],A=["onClick","onKeyup"],j=e.createElementVNode("div",{class:"icon"},null,-1),H=[j],q={key:0,id:"silentbox-overlay__arrow-buttons"},F=["onClick","onKeyup"],W=["onClick","onKeyup"],$=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=B(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},w=r=>{let a="";const c=C(r);return c&&(a=`${location.protocol}//player.vimeo.com/video/${c}?rel=0`,t.item.autoplay&&(a+="&autoplay=1")),a},h=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},x=r=>/(youtu\.?be)/.test(r)?l(r):/(vimeo(pro)?\.com)/.test(r)?w(r):/(?:player\.|clips\.|www\.)?twitch\.tv/.test(r)?h(r):r,g=()=>{document.body.classList.contains("silentbox-is-opened")||document.body.classList.add("silentbox-is-opened")},m=()=>{document.body.classList.contains("silentbox-is-opened")&&document.body.classList.remove("silentbox-is-opened")},p=e.reactive({name:"silentbox-animation__swipe-left"}),v=()=>{s("silentbox-internal-close-overlay")},y=()=>{p.name="silentbox-animation__swipe-left",s("silentbox-internal-get-next-item")},b=()=>{p.name="silentbox-animation__swipe-right",s("silentbox-internal-get-prev-item")},o=e.reactive({posX:0,posY:0}),_=r=>{const{clientX:a,clientY:c}=r.touches[0];o.posX=a,o.posY=c},u=r=>{const{clientX:a,clientY:c}=r.touches[0],{posX:k,posY:I}=o;if(k===0||I===0)return;const E=k-a,N=I-c;Math.abs(E)>Math.abs(N)&&(E>0?y():b()),o.posX=0,o.posY=0},f=r=>{r.code==="Escape"&&v(),r.code==="ArrowRight"&&y(),r.code==="ArrowLeft"&&b()};return e.onUpdated(()=>{t.visible?(window.addEventListener("keyup",f),g()):(window.removeEventListener("keyup",f),m())}),(r,a)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,id:"silentbox-overlay",role:"overlay",onTouchstart:_,onTouchmove:u},[U,e.createVNode(e.Transition,{name:p.name,mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("div",{id:"silentbox-overlay__content",onClick:e.withModifiers(v,["stop"]),key:t.item.src},[e.createElementVNode("div",z,[e.createElementVNode("div",{id:"silentbox-overlay__container",onClick:a[0]||(a[0]=e.withModifiers(()=>{},["stop"]))},[e.unref(V)(t.item.src)?(e.openBlock(),e.createElementBlock("iframe",{key:0,allow:`accelerometer; ${!!t.item.autoplay&&"autoplay;"} encrypted-media; gyroscope; picture-in-picture`,src:x(t.item.src),frameborder:"0",width:"100%",height:"100%",allowfullscreen:""},null,8,K)):e.unref(T)(t.item.src)?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("video",{src:t.item.src,autoplay:!!t.item.autoplay,controls:t.item.controls,class:"silentbox-video__embed"},null,8,O)])):(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,Y))]),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",P,[e.createElementVNode("a",{href:e.unref(d),class:"download",download:""},e.toDisplayString(e.unref(i).downloadButtonLabel),9,X)])):e.createCommentVNode("",!0)])],8,G))]),_:1},8,["name"]),e.createElementVNode("button",{id:"silentbox-overlay__close-button",role:"button",tabindex:"3",onClick:e.withModifiers(v,["prevent"]),onKeyup:e.withKeys(v,["enter"])},H,40,A),t.totalItems>1?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("button",{class:"arrow arrow-previous",role:"button",tabindex:"2",onClick:e.withModifiers(b,["stop"]),onKeyup:e.withKeys(b,["enter"])},null,40,F),e.createElementVNode("button",{class:"arrow arrow-next",role:"button",tabindex:"1",onClick:e.withModifiers(y,["stop"]),onKeyup:e.withKeys(y,["enter"])},null,40,W)])):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0)}});const J=["href","onClick"],Z=["loading","src","alt","width","height"],Q=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}),w=o=>V(o)?M(o,i.fallbackThumbnail):o,h=o=>({...l.item,download:!1,...o,thumbnail:o.thumbnail?o.thumbnail:w(o.src)}),x=()=>i.gallery&&i.gallery.length>0?i.gallery.map(h):i.image?[h(i.image)]:[],g=e.computed(()=>i.previewCount&&i.previewCount>0&&i.gallery?i.gallery.slice(0,i.previewCount).map(h):x()),m=e.computed(()=>x()),p=(o,_=0)=>{l.visible=!0,l.item=o,l.currentItem=_,t("silentbox-overlay-opened",o)},v=()=>{l.visible=!1,t("silentbox-overlay-hidden",l.item)},y=()=>{let o=l.currentItem+1;o=o<=m.value.length-1?o:0,l.item=m.value[o],l.currentItem=o,t("silentbox-overlay-next-item-displayed",l.item)},b=()=>{let o=l.currentItem-1;o=o>=0?o:m.value.length-1,l.item=m.value[o],l.currentItem=o,t("silentbox-overlay-prev-item-displayed",l.item)};return s({openOverlay:p}),(o,_)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(o.$slots,"default"),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(g),(u,f)=>(e.openBlock(),e.createElementBlock("a",{key:u.src,href:u.src,onClick:e.withModifiers(r=>p(u,f),["prevent"]),class:"silentbox-item"},[e.renderSlot(o.$slots,"silentbox-item",{silentboxItem:u},()=>[e.createElementVNode("img",{loading:n.lazyLoading?"lazy":"eager",src:u.thumbnail,alt:u.alt,width:u.thumbnailWidth,height:u.thumbnailHeight},null,8,Z)])],8,J))),128)),e.createVNode($,{visible:l.visible,item:l.item,"current-item":l.currentItem,"total-items":e.unref(d),onSilentboxInternalCloseOverlay:v,onSilentboxInternalGetNextItem:y,onSilentboxInternalGetPrevItem:b},null,8,["visible","item","current-item","total-items"])]))}});const ee={install:(n,s={})=>{n.component("silent-box",Q),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($,{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)}}}};module.exports=ee;