@miletorix/vitepress-gallery
Version:
A responsive, swipeable image gallery component for VitePress with thumbnails, navigation, captions, and smooth transitions.
3 lines (2 loc) • 7.62 kB
JavaScript
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.Gallery={},l.Vue))})(this,(function(l,e){"use strict";var h=document.createElement("style");h.textContent=`.gallery-container[data-v-0631162a]{display:flex;justify-content:center;padding:2rem 0 1rem}.gallery-box[data-v-0631162a]{width:100%;max-width:1000px;background-color:var(--vp-code-block-bg);border-radius:1rem;padding:1rem;transition:background-color .25s,border-color .25s;overflow:hidden}.top-bar[data-v-0631162a]{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}.top-bar button[data-v-0631162a]{background:var(--vp-c-bg);color:var(--vp-c-text-1);border:1px solid var(--vp-c-border);padding:.4rem 1rem;font-size:1.5rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease}.top-bar button[data-v-0631162a]:hover:not(:disabled){background-color:var(--vp-c-brand-soft);color:var(--vp-c-brand-1)}.top-bar button[data-v-0631162a]:disabled{opacity:.4;cursor:not-allowed}.counter[data-v-0631162a]{font-size:.95rem;color:var(--vp-c-text-2)}.thumbnails[data-v-0631162a]{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem;overflow-x:auto;padding-bottom:.25rem}.thumb[data-v-0631162a]{width:55px;height:35px;border-radius:.4rem;overflow:hidden;opacity:.5;filter:brightness(.6);transition:transform .25s ease,opacity .25s ease,filter .25s ease,background-color .2s ease;flex:0 0 auto;border:0;background:transparent;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.thumb[data-v-0631162a]:focus{outline:2px solid var(--vp-c-brand-soft);outline-offset:2px}.thumb.active[data-v-0631162a]{filter:none;opacity:1;transform:scale(1.1)}.thumb img[data-v-0631162a]{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}.caption[data-v-0631162a]{overflow-x:auto;padding:1rem;text-align:center;max-width:100%;word-break:break-word;font-size:.95rem;line-height:1.4;color:var(--vp-c-text-2)}.image-wrapper[data-v-0631162a]{display:flex;justify-content:center;align-items:center;height:auto;transition:height .25s ease}.image-wrapper img[data-v-0631162a]{max-width:100%;height:auto;border-radius:.75rem;transition:all .3s ease;object-fit:contain}@media(max-width:600px){.image-wrapper img[data-v-0631162a]{max-height:80vh}.image-wrapper[data-v-0631162a]{min-height:auto}}.all-images-hidden[data-v-0631162a]{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none;-webkit-user-select:none;user-select:none;visibility:hidden}.all-images-hidden img[data-v-0631162a]{width:1px;height:1px;opacity:0;pointer-events:none}.fade-enter-active[data-v-0631162a],.fade-leave-active[data-v-0631162a],.slide-left-enter-active[data-v-0631162a],.slide-left-leave-active[data-v-0631162a],.slide-right-enter-active[data-v-0631162a],.slide-right-leave-active[data-v-0631162a]{transition:all .25s ease;position:relative}.fade-enter-from[data-v-0631162a],.fade-leave-to[data-v-0631162a]{opacity:0}.slide-left-enter-from[data-v-0631162a]{transform:translate(100%);opacity:0}.slide-left-leave-to[data-v-0631162a],.slide-right-enter-from[data-v-0631162a]{transform:translate(-100%);opacity:0}.slide-right-leave-to[data-v-0631162a]{transform:translate(100%);opacity:0}@media(hover:hover)and (pointer:fine)and (min-width:960px){.thumbnails[data-v-0631162a]{gap:.75rem}.thumb[data-v-0631162a]:hover:not(.active){opacity:.95;filter:none;background-color:#00000005}.thumb[data-v-0631162a]:focus{outline:2px solid var(--vp-c-brand-soft);outline-offset:2px}}
/*$vite$:1*/`,document.head.appendChild(h);const x={class:"gallery-box"},y={class:"top-bar"},_=["disabled"],k={class:"counter"},E=["disabled"],N={class:"thumbnails"},V=["onClick","aria-pressed","title"],B=["src","alt"],C={class:"all-images-hidden","aria-hidden":"true"},T=["src","alt"],M={key:0,class:"caption"},j={class:"image-wrapper"},L=["src","alt"],z=((p,n)=>{const t=p.__vccOpts||p;for(const[s,d]of n)t[s]=d;return t})(e.defineComponent({__name:"Gallery",props:{images:{},captions:{}},setup(p){const n=p,t=e.ref(0),s=e.ref("fade"),d=e.ref(!1);let v=0;function u(){d.value=window.innerWidth<=960}function S(a){v=a.changedTouches[0].clientX}e.onMounted(()=>{u(),window.addEventListener("resize",u)}),e.onUnmounted(()=>{window.removeEventListener("resize",u)});function P(a){const r=a.changedTouches[0].clientX-v,o=40;r>o?b():r<-o&&w()}const f=e.computed(()=>t.value>0),g=e.computed(()=>t.value<n.images.length-1);function b(){f.value&&(s.value="slide-right",t.value--)}function w(){g.value&&(s.value="slide-left",t.value++)}function X(a){a!==t.value&&(s.value=a>t.value?"slide-left":"slide-right",t.value=a)}const $=e.computed(()=>{const a=[],i=d.value?1:2,r=(d.value,2);for(let o=-i;o<=r;o++){const m=t.value+o;m>=0&&m<n.images.length&&a.push(n.images[m])}return a}),c=e.computed(()=>{const a=d.value?1:2;return Math.min(a,t.value)});function D(a){return a.replace(/&/g,"&").replace(/"/g,""").replace(/</g,"<").replace(/>/g,">")}const G=e.computed(()=>{const a=n.captions?.[t.value];return a?D(a):`Image ${t.value+1}`});return(a,i)=>(e.openBlock(),e.createElementBlock("div",{class:"gallery-container",onTouchstart:S,onTouchend:P},[e.createElementVNode("div",x,[e.createElementVNode("div",y,[e.createElementVNode("button",{onClick:b,disabled:!f.value,"aria-label":"Previous",title:"Previous"},[...i[2]||(i[2]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},[e.createElementVNode("path",{fill:"currentColor",d:"m5.83 9l5.58-5.58L10 2l-8 8l8 8l1.41-1.41L5.83 11H18V9z"})],-1)])],8,_),e.createElementVNode("span",k,e.toDisplayString(t.value+1)+" / "+e.toDisplayString(n.images.length),1),e.createElementVNode("button",{onClick:w,disabled:!g.value,"aria-label":"Next",title:"Next"},[...i[3]||(i[3]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20"},[e.createElementVNode("path",{fill:"currentColor",d:"M2 11h12.2l-5.6 5.6L10 18l8-8l-8-8l-1.4 1.4L14.2 9H2z"})],-1)])],8,E)]),e.createElementVNode("div",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList($.value,(r,o)=>(e.openBlock(),e.createElementBlock("button",{key:o,type:"button",class:e.normalizeClass(["thumb",{active:t.value===t.value-c.value+o}]),onPointerdown:i[1]||(i[1]=e.withModifiers(()=>{},["stop"])),onClick:e.withModifiers(m=>X(t.value-c.value+o),["stop"]),"aria-pressed":t.value===t.value-c.value+o,title:n.captions?.[t.value-c.value+o]||`Image ${t.value-c.value+o+1}`},[e.createElementVNode("img",{src:r,alt:n.captions?.[t.value-c.value+o]||"",draggable:"false",onDragstart:i[0]||(i[0]=e.withModifiers(()=>{},["prevent"]))},null,40,B)],42,V))),128))]),e.createElementVNode("div",C,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.images,(r,o)=>(e.openBlock(),e.createElementBlock("img",{key:"hidden-"+o,src:r,alt:n.captions?.[o]||"",loading:"eager",draggable:"false"},null,8,T))),128))]),n.captions?.[t.value]?(e.openBlock(),e.createElementBlock("div",M,e.toDisplayString(n.captions[t.value]),1)):e.createCommentVNode("",!0),e.createElementVNode("div",j,[e.createVNode(e.Transition,{name:s.value,mode:"out-in"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock("img",{src:n.images[t.value],alt:G.value,key:n.images[t.value]},null,8,L))]),_:1},8,["name"])])])],32))}}),[["__scopeId","data-v-0631162a"]]);l.Gallery=z,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));