neiki-gallery 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +233 -0
- package/dist/neiki-gallery.css +675 -0
- package/dist/neiki-gallery.js +955 -0
- package/dist/neiki-gallery.min.css +1 -0
- package/dist/neiki-gallery.min.js +12 -0
- package/package.json +39 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.neiki-gallery[data-theme=dark],:root,[data-theme=dark]{--neiki-overlay-bg:rgba(0, 0, 0, 0.92);--neiki-btn-bg:rgba(255, 255, 255, 0.12);--neiki-btn-bg-hover:rgba(255, 255, 255, 0.25);--neiki-btn-color:#fff;--neiki-caption-color:#fff;--neiki-counter-color:rgba(255, 255, 255, 0.7);--neiki-spinner-color:#fff;--neiki-thumb-active-border:2px solid #fff}.neiki-gallery--grid>.neiki-item>img,.neiki-gallery--grid>a>img,.neiki-gallery--masonry>.neiki-item>img,.neiki-gallery--masonry>a>img{transition:transform var(--neiki-transition-duration) var(--neiki-transition-easing),opacity var(--neiki-transition-duration) var(--neiki-transition-easing);width:100%;opacity:0}.neiki-gallery--grid>.neiki-item>img.neiki-loaded,.neiki-gallery--grid>a>img.neiki-loaded,.neiki-gallery--masonry>.neiki-item>img.neiki-loaded,.neiki-gallery--masonry>a>img.neiki-loaded{opacity:1}:root{--neiki-columns:4;--neiki-gap:12px;--neiki-border-radius:6px;--neiki-lightbox-max-width:90vw;--neiki-lightbox-max-height:85vh;--neiki-btn-size:48px;--neiki-btn-border-radius:50%;--neiki-caption-font-size:15px;--neiki-counter-font-size:13px;--neiki-thumb-size:56px;--neiki-thumb-gap:6px;--neiki-thumb-border-radius:4px;--neiki-thumb-opacity:0.5;--neiki-thumb-active-opacity:1;--neiki-spinner-size:40px;--neiki-spinner-width:3px;--neiki-transition-duration:0.3s;--neiki-transition-easing:cubic-bezier(0.4, 0, 0.2, 1);--neiki-zoom-scale:2}.neiki-gallery[data-theme=light],[data-theme=light]{--neiki-overlay-bg:rgba(255, 255, 255, 0.96);--neiki-btn-bg:rgba(0, 0, 0, 0.08);--neiki-btn-bg-hover:rgba(0, 0, 0, 0.16);--neiki-btn-color:#222;--neiki-caption-color:#222;--neiki-counter-color:rgba(0, 0, 0, 0.55);--neiki-spinner-color:#222;--neiki-thumb-active-border:2px solid #222}.neiki-gallery{box-sizing:border-box}.neiki-gallery *,.neiki-gallery ::after,.neiki-gallery ::before{box-sizing:inherit}.neiki-gallery--masonry{column-count:var(--neiki-columns,4);column-gap:var(--neiki-gap,10px)}.neiki-gallery--masonry>.neiki-item,.neiki-gallery--masonry>a{display:inline-block;width:100%;margin-bottom:var(--neiki-gap,10px);break-inside:avoid;border-radius:var(--neiki-border-radius,6px);overflow:hidden;cursor:pointer;position:relative;text-decoration:none}.neiki-gallery--masonry>.neiki-item>img,.neiki-gallery--masonry>a>img{display:block;height:auto;border-radius:var(--neiki-border-radius,6px)}.neiki-gallery--masonry>.neiki-item:hover>img,.neiki-gallery--masonry>a:hover>img{transform:scale(1.03)}.neiki-gallery--grid{display:grid;grid-template-columns:repeat(var(--neiki-columns,4),1fr);gap:var(--neiki-gap,10px)}.neiki-gallery--grid>.neiki-item,.neiki-gallery--grid>a{display:block;position:relative;overflow:hidden;border-radius:var(--neiki-border-radius,6px);cursor:pointer;text-decoration:none;aspect-ratio:1/1}.neiki-gallery--grid>.neiki-item>img,.neiki-gallery--grid>a>img{display:block;height:100%;object-fit:cover;border-radius:var(--neiki-border-radius,6px)}.neiki-gallery--grid>.neiki-item:hover>img,.neiki-gallery--grid>a:hover>img{transform:scale(1.05)}@media (max-width:1200px){.neiki-gallery--masonry{column-count:3}.neiki-gallery--grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:900px){.neiki-gallery--masonry{column-count:2}.neiki-gallery--grid{grid-template-columns:repeat(2,1fr)}.neiki-gallery{--neiki-gap:10px}}.neiki-lightbox{position:fixed;inset:0;z-index:999999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--neiki-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--neiki-transition-duration) var(--neiki-transition-easing),visibility 0s linear var(--neiki-transition-duration);-webkit-user-select:none;user-select:none;outline:0}.neiki-lightbox.neiki-lightbox--visible{opacity:1;visibility:visible;transition:opacity var(--neiki-transition-duration) var(--neiki-transition-easing),visibility 0s linear 0s}.neiki-lightbox__stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1 1 auto;width:100%;min-height:0;overflow:hidden}.neiki-lightbox__slide-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.neiki-lightbox--fade .neiki-lightbox__image{transition:opacity var(--neiki-transition-duration) var(--neiki-transition-easing)}.neiki-lightbox--fade .neiki-lightbox__image.neiki-entering{opacity:0}.neiki-lightbox--fade .neiki-lightbox__image.neiki-active{opacity:1}.neiki-lightbox--slide .neiki-lightbox__slide-wrapper{transition:transform var(--neiki-transition-duration) var(--neiki-transition-easing)}.neiki-lightbox__image{max-width:var(--neiki-lightbox-max-width,90vw);max-height:var(--neiki-lightbox-max-height,85vh);width:auto;height:auto;object-fit:contain;border-radius:var(--neiki-border-radius,6px);cursor:zoom-in;transition:transform .35s var(--neiki-transition-easing),opacity var(--neiki-transition-duration) var(--neiki-transition-easing);-webkit-user-drag:none;pointer-events:auto}.neiki-lightbox__image.neiki-zoomed{transform:scale(var(--neiki-zoom-scale,2));cursor:zoom-out}.neiki-lightbox__btn{position:absolute;z-index:10;display:flex;align-items:center;justify-content:center;width:var(--neiki-btn-size);height:var(--neiki-btn-size);border:none;border-radius:var(--neiki-btn-border-radius);background:var(--neiki-btn-bg);color:var(--neiki-btn-color);cursor:pointer;transition:background var(--neiki-transition-duration) var(--neiki-transition-easing),transform .15s ease;padding:0;line-height:1;font-family:inherit;-webkit-appearance:none;appearance:none;outline:0}.neiki-lightbox__btn:hover{background:var(--neiki-btn-bg-hover)}.neiki-lightbox__btn:active{transform:scale(.92)}.neiki-lightbox__next:active,.neiki-lightbox__prev:active{transform:translateY(-50%) scale(.92)}.neiki-lightbox__btn:focus-visible{box-shadow:0 0 0 3px rgba(66,133,244,.6)}.neiki-lightbox__close{top:16px;right:16px}.neiki-lightbox__fullscreen{top:16px;right:76px}.neiki-lightbox__prev{left:16px;top:50%;transform:translateY(-50%)}.neiki-lightbox__next{right:16px;top:50%;transform:translateY(-50%)}.neiki-lightbox__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.neiki-lightbox__topbar{position:absolute;top:16px;left:16px;z-index:10;display:flex;align-items:center;gap:12px}.neiki-lightbox__counter{color:var(--neiki-counter-color);font-size:var(--neiki-counter-font-size);font-family:system-ui,-apple-system,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}.neiki-lightbox__caption{flex:0 0 auto;width:100%;text-align:center;padding:10px 60px;color:var(--neiki-caption-color);font-size:var(--neiki-caption-font-size);font-family:system-ui,-apple-system,sans-serif;line-height:1.5;min-height:1.5em;transition:opacity var(--neiki-transition-duration) var(--neiki-transition-easing)}.neiki-lightbox__thumbs{flex:0 0 auto;width:100%;display:flex;align-items:center;justify-content:center;gap:var(--neiki-thumb-gap);padding:8px 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.neiki-lightbox__thumbs::-webkit-scrollbar{height:4px}.neiki-lightbox__thumbs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}.neiki-lightbox__thumb{flex:0 0 auto;width:var(--neiki-thumb-size);height:var(--neiki-thumb-size);border-radius:var(--neiki-thumb-border-radius);overflow:hidden;cursor:pointer;opacity:var(--neiki-thumb-opacity);border:2px solid transparent;transition:opacity var(--neiki-transition-duration) var(--neiki-transition-easing),border-color var(--neiki-transition-duration) var(--neiki-transition-easing);background:rgba(128,128,128,.15);padding:0;-webkit-appearance:none;appearance:none;outline:0}.neiki-lightbox__thumb:hover{opacity:.8}.neiki-lightbox__thumb.neiki-thumb--active{opacity:var(--neiki-thumb-active-opacity);border:var(--neiki-thumb-active-border)}.neiki-lightbox__thumb:focus-visible{box-shadow:0 0 0 3px rgba(66,133,244,.6)}.neiki-lightbox__thumb img{display:block;width:100%;height:100%;object-fit:cover}.neiki-lightbox__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--neiki-spinner-size);height:var(--neiki-spinner-size);border:var(--neiki-spinner-width) solid rgba(128,128,128,.25);border-top-color:var(--neiki-spinner-color);border-radius:50%;animation:.7s linear infinite neiki-spin;pointer-events:none;z-index:5}@keyframes neiki-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.neiki-lightbox__spinner.neiki-hidden{display:none}.neiki-gallery>.neiki-item,.neiki-gallery>a{background:linear-gradient(110deg,#e0e0e0 8%,#f0f0f0 18%,#e0e0e0 33%);background-size:200% 100%;animation:1.4s linear infinite neiki-shimmer}.neiki-gallery[data-theme=dark]>.neiki-item,.neiki-gallery[data-theme=dark]>a,[data-theme=dark] .neiki-gallery>.neiki-item,[data-theme=dark] .neiki-gallery>a{background:linear-gradient(110deg,#2a2a2a 8%,#333 18%,#2a2a2a 33%);background-size:200% 100%}@keyframes neiki-shimmer{to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.neiki-gallery--grid>a>img,.neiki-gallery--masonry>a>img,.neiki-lightbox,.neiki-lightbox__image,.neiki-lightbox__slide-wrapper{transition-duration:0s!important;animation-duration:0s!important}}@media (max-width:768px){.neiki-lightbox{--neiki-lightbox-max-width:94vw;--neiki-lightbox-max-height:75vh;--neiki-btn-size:42px;--neiki-zoom-scale:1.8}.neiki-lightbox__next,.neiki-lightbox__prev{width:42px;height:42px}.neiki-lightbox__btn svg{width:20px;height:20px}.neiki-lightbox__caption{padding:8px 20px;font-size:14px}.neiki-lightbox__thumbs{padding:6px 10px 10px}.neiki-lightbox__thumb{width:48px;height:48px}}@media (max-width:600px){.neiki-gallery--masonry{column-count:2}.neiki-gallery--grid{grid-template-columns:repeat(2,1fr)}.neiki-gallery{--neiki-gap:8px}.neiki-lightbox{--neiki-lightbox-max-width:96vw;--neiki-lightbox-max-height:70vh;--neiki-btn-size:38px;--neiki-zoom-scale:1.6}.neiki-lightbox__next,.neiki-lightbox__prev{width:38px;height:38px}.neiki-lightbox__prev{left:6px}.neiki-lightbox__next{right:6px}.neiki-lightbox__close{top:10px;right:10px}.neiki-lightbox__fullscreen{top:10px;right:56px}.neiki-lightbox__topbar{top:10px;left:10px}.neiki-lightbox__caption{padding:6px 14px;font-size:13px}.neiki-lightbox__thumbs{padding:4px 6px 8px}.neiki-lightbox__thumb{width:40px;height:40px}}@media (max-width:400px){.neiki-gallery--masonry{column-count:1}.neiki-gallery--grid{grid-template-columns:1fr}.neiki-gallery{--neiki-gap:8px}.neiki-lightbox{--neiki-lightbox-max-width:98vw;--neiki-lightbox-max-height:65vh;--neiki-btn-size:34px}.neiki-lightbox__next,.neiki-lightbox__prev,.neiki-lightbox__thumb{width:34px;height:34px}.neiki-lightbox__btn svg{width:18px;height:18px}.neiki-lightbox__caption{padding:4px 10px;font-size:12px}.neiki-lightbox__counter{font-size:11px}}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Neiki Gallery v1.0.0
|
|
3
|
+
* A vanilla JavaScript image gallery / lightbox library.
|
|
4
|
+
* No dependencies. No frameworks.
|
|
5
|
+
*
|
|
6
|
+
* Usage:
|
|
7
|
+
* Auto-init: <div data-neiki-gallery>...</div>
|
|
8
|
+
* Manual: new NeikiGallery('#my-gallery', { ... });
|
|
9
|
+
*
|
|
10
|
+
* License: MIT
|
|
11
|
+
*/
|
|
12
|
+
!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.NeikiGallery=e()}("undefined"!=typeof self?self:this,function(){"use strict";var t=0;function e(t,e){var i={};for(var n in t)t.hasOwnProperty(n)&&(i[n]=t[n]);if(e)for(var n in e)e.hasOwnProperty(n)&&(i[n]=e[n]);return i}function i(t,e){return(e||document).querySelector(t)}function n(t,e){return Array.prototype.slice.call((e||document).querySelectorAll(t))}function s(t,e,i,n){var s=document.createElement(t);if(e&&(s.className=e),i)for(var o in i)i.hasOwnProperty(o)&&s.setAttribute(o,i[o]);return n&&(s.innerHTML=n),s}var o='<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',a='<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>',r='<svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg>',h='<svg viewBox="0 0 24 24"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>',l='<svg viewBox="0 0 24 24"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>',c={layout:"masonry",loop:!1,thumbnails:!0,zoom:!0,fullscreen:!0,transition:"fade",theme:"dark",hashNavigation:!0,counter:!0,captions:!0,preload:1,lazyLoad:!0};function d(n,s){if(!(this instanceof d))return new d(n,s);if(this._id=++t,this._events={},this._isOpen=!1,this._currentIndex=0,this._isZoomed=!1,this._isFullscreen=!1,this._destroyed=!1,this._boundHandlers={},this._container="string"==typeof n?i(n):n,this._container){var o=this._readDataAttributes();this._options=e(c,e(o,s)),this._items=this._parseItems(),0!==this._items.length?(this._setupGrid(),this._setupLazyLoad(),this._buildLightbox(),this._bindEvents(),this._checkHash()):console.warn("NeikiGallery: No items found in container.")}else console.warn('NeikiGallery: Container not found for selector "'+n+'"')}function u(){n("[data-neiki-gallery]").forEach(function(t){t._neikiGallery||(t._neikiGallery=new d(t))})}return d.prototype._readDataAttributes=function(){var t=this._container,e={};return t.hasAttribute("data-layout")&&(e.layout=t.getAttribute("data-layout")),t.hasAttribute("data-theme")&&(e.theme=t.getAttribute("data-theme")),t.hasAttribute("data-loop")&&(e.loop="false"!==t.getAttribute("data-loop")),t.hasAttribute("data-thumbnails")&&(e.thumbnails="false"!==t.getAttribute("data-thumbnails")),t.hasAttribute("data-zoom")&&(e.zoom="false"!==t.getAttribute("data-zoom")),t.hasAttribute("data-fullscreen")&&(e.fullscreen="false"!==t.getAttribute("data-fullscreen")),t.hasAttribute("data-transition")&&(e.transition=t.getAttribute("data-transition")),t.hasAttribute("data-hash-navigation")&&(e.hashNavigation="false"!==t.getAttribute("data-hash-navigation")),e},d.prototype._parseItems=function(){for(var t=n(":scope > a",this._container),e=[],s=0;s<t.length;s++){var o=t[s],a=i("img",o);e.push({src:o.getAttribute("href")||(a?a.getAttribute("src"):""),thumb:a?a.getAttribute("data-src")||a.getAttribute("src"):"",caption:o.getAttribute("data-caption")||(a?a.getAttribute("alt"):"")||"",element:o,img:a}),o.addEventListener("click",function(t){t.preventDefault()})}return e},d.prototype._setupGrid=function(){this._container.classList.add("neiki-gallery"),"grid"===this._options.layout?(this._container.classList.add("neiki-gallery--grid"),this._container.classList.remove("neiki-gallery--masonry")):(this._container.classList.add("neiki-gallery--masonry"),this._container.classList.remove("neiki-gallery--grid")),this._options.theme&&this._container.setAttribute("data-theme",this._options.theme)},d.prototype._setupLazyLoad=function(){var t=this;this._options.lazyLoad&&"IntersectionObserver"in window?(this._observer=new IntersectionObserver(function(e){e.forEach(function(e){if(e.isIntersecting){var i=e.target,n=i.getAttribute("data-src");n&&(i.src=n,i.removeAttribute("data-src")),i.addEventListener("load",function(){i.classList.add("neiki-loaded")}),i.complete&&i.naturalWidth&&i.classList.add("neiki-loaded"),t._observer.unobserve(i)}})},{rootMargin:"200px"}),this._items.forEach(function(e){e.img&&(e.img.complete&&e.img.naturalWidth?e.img.classList.add("neiki-loaded"):(t._observer.observe(e.img),e.img.addEventListener("load",function(){e.img.classList.add("neiki-loaded")})))})):this._items.forEach(function(t){t.img&&t.img.classList.add("neiki-loaded")})},d.prototype._buildLightbox=function(){var t=this._options;if(this._lightbox=s("div","neiki-lightbox neiki-lightbox--"+t.transition,{role:"dialog","aria-modal":"true","aria-label":"Image lightbox",tabindex:"-1"}),t.theme&&this._lightbox.setAttribute("data-theme",t.theme),t.counter&&(this._topbar=s("div","neiki-lightbox__topbar"),this._counter=s("span","neiki-lightbox__counter",{"aria-live":"polite"}),this._topbar.appendChild(this._counter),this._lightbox.appendChild(this._topbar)),this._closeBtn=s("button","neiki-lightbox__btn neiki-lightbox__close",{"aria-label":"Close lightbox",type:"button"},o),this._lightbox.appendChild(this._closeBtn),t.fullscreen&&(this._fsBtn=s("button","neiki-lightbox__btn neiki-lightbox__fullscreen",{"aria-label":"Toggle fullscreen",type:"button"},h),this._lightbox.appendChild(this._fsBtn)),this._prevBtn=s("button","neiki-lightbox__btn neiki-lightbox__prev",{"aria-label":"Previous image",type:"button"},a),this._nextBtn=s("button","neiki-lightbox__btn neiki-lightbox__next",{"aria-label":"Next image",type:"button"},r),this._stage=s("div","neiki-lightbox__stage"),this._slideWrapper=s("div","neiki-lightbox__slide-wrapper"),this._spinner=s("div","neiki-lightbox__spinner neiki-hidden"),this._image=s("img","neiki-lightbox__image",{alt:"",draggable:"false"}),this._slideWrapper.appendChild(this._spinner),this._slideWrapper.appendChild(this._image),this._stage.appendChild(this._prevBtn),this._stage.appendChild(this._slideWrapper),this._stage.appendChild(this._nextBtn),this._lightbox.appendChild(this._stage),t.captions&&(this._caption=s("div","neiki-lightbox__caption",{"aria-live":"polite"}),this._lightbox.appendChild(this._caption)),t.thumbnails){this._thumbsContainer=s("div","neiki-lightbox__thumbs",{role:"listbox","aria-label":"Image thumbnails"}),this._thumbButtons=[];for(var e=0;e<this._items.length;e++){var i=s("button","neiki-lightbox__thumb",{type:"button",role:"option","aria-label":"View image "+(e+1)}),n=s("img","",{src:this._items[e].thumb,alt:this._items[e].caption||"Thumbnail "+(e+1),draggable:"false"});i.appendChild(n),this._thumbButtons.push(i),this._thumbsContainer.appendChild(i)}this._lightbox.appendChild(this._thumbsContainer)}document.body.appendChild(this._lightbox)},d.prototype._bindEvents=function(){var t=this;this._items.forEach(function(e,i){e.element.addEventListener("click",function(e){e.preventDefault(),t.open(i)})}),this._closeBtn.addEventListener("click",function(){t.close()}),this._prevBtn.addEventListener("click",function(e){e.stopPropagation(),t.prev()}),this._nextBtn.addEventListener("click",function(e){e.stopPropagation(),t.next()}),this._fsBtn&&this._fsBtn.addEventListener("click",function(e){e.stopPropagation(),t._toggleFullscreen()}),this._options.zoom&&this._image.addEventListener("click",function(e){e.stopPropagation(),t._toggleZoom()}),this._thumbButtons&&this._thumbButtons.forEach(function(e,i){e.addEventListener("click",function(){t._goTo(i)})}),this._stage.addEventListener("click",function(e){e.target!==t._stage&&e.target!==t._slideWrapper||t.close()}),this._boundHandlers.keydown=function(e){t._onKeyDown(e)},document.addEventListener("keydown",this._boundHandlers.keydown),this._setupTouch(),this._options.hashNavigation&&(this._boundHandlers.hashchange=function(){t._onHashChange()},window.addEventListener("hashchange",this._boundHandlers.hashchange)),this._boundHandlers.fullscreenchange=function(){t._onFullscreenChange()},document.addEventListener("fullscreenchange",this._boundHandlers.fullscreenchange),document.addEventListener("webkitfullscreenchange",this._boundHandlers.fullscreenchange)},d.prototype._onKeyDown=function(t){if(this._isOpen)switch(t.key){case"Escape":t.preventDefault(),this.close();break;case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"Home":t.preventDefault(),this._goTo(0);break;case"End":t.preventDefault(),this._goTo(this._items.length-1);break;case"f":t.preventDefault(),this._toggleFullscreen()}},d.prototype._setupTouch=function(){var t=this,e=0,i=0,n=0,s=!1;function o(o){if(t._isOpen&&!t._isZoomed){var a=o.touches?o.touches[0]:o;e=a.clientX,i=a.clientY,n=0,s=!0}}function a(t){if(s){var o=t.touches?t.touches[0]:t;n=o.clientX-e;var a=o.clientY-i;Math.abs(n)>Math.abs(a)&&Math.abs(n)>10&&t.preventDefault()}}function r(){s&&(s=!1,n>50?t.prev():n<-50&&t.next())}this._stage.addEventListener("touchstart",o,{passive:!0}),this._stage.addEventListener("touchmove",a,{passive:!1}),this._stage.addEventListener("touchend",r,{passive:!0}),this._boundHandlers.touchstart=o,this._boundHandlers.touchmove=a,this._boundHandlers.touchend=r},d.prototype._goTo=function(t,e){if(!this._destroyed){var i=this._items.length;if(this._options.loop?t=(t%i+i)%i:(t<0&&(t=0),t>=i&&(t=i-1)),t!==this._currentIndex||!this._isOpen||!this._image.src){var n=this._currentIndex;this._currentIndex=t;var s=this._items[t];this._isZoomed&&this._toggleZoom(),this._updateNavButtons(),this._spinner.classList.remove("neiki-hidden");var o=this,a=this._image;if("slide"===this._options.transition){var r=t>n?1:-1;this._options.loop&&(n===i-1&&0===t&&(r=1),0===n&&t===i-1&&(r=-1)),this._slideWrapper.style.transform="translateX("+40*-r+"px)",a.style.opacity="0",requestAnimationFrame(function(){requestAnimationFrame(function(){o._slideWrapper.style.transform="translateX(0)",a.style.opacity="1"})})}else a.classList.add("neiki-entering"),a.classList.remove("neiki-active");a.setAttribute("alt",s.caption||"");var h=new Image;if(h.onload=function(){a.src=s.src,o._spinner.classList.add("neiki-hidden"),"fade"===o._options.transition&&requestAnimationFrame(function(){a.classList.remove("neiki-entering"),a.classList.add("neiki-active")})},h.onerror=function(){a.src=s.src,o._spinner.classList.add("neiki-hidden"),"fade"===o._options.transition&&requestAnimationFrame(function(){a.classList.remove("neiki-entering"),a.classList.add("neiki-active")})},h.src=s.src,h.complete&&(a.src=s.src,o._spinner.classList.add("neiki-hidden"),"fade"===o._options.transition&&requestAnimationFrame(function(){a.classList.remove("neiki-entering"),a.classList.add("neiki-active")})),this._counter&&(this._counter.textContent=t+1+" / "+i),this._caption&&(this._caption.textContent=s.caption||""),this._thumbButtons){this._thumbButtons.forEach(function(e,i){e.classList.toggle("neiki-thumb--active",i===t),e.setAttribute("aria-selected",i===t?"true":"false")});var l=this._thumbButtons[t];l&&this._thumbsContainer&&l.scrollIntoView({inline:"center",block:"nearest",behavior:"smooth"})}this._options.hashNavigation&&!e&&this._setHash(t),this._preloadAdjacent(t),this._emit("change",t)}}},d.prototype._updateNavButtons=function(){if(this._options.loop)return this._prevBtn.style.display="",void(this._nextBtn.style.display="");this._prevBtn.style.display=this._currentIndex<=0?"none":"",this._nextBtn.style.display=this._currentIndex>=this._items.length-1?"none":""},d.prototype._preloadAdjacent=function(t){for(var e=this._options.preload||1,i=this._items.length,n=1;n<=e;n++){var s=(t+n)%i,o=((t-n)%i+i)%i;this._items[s]&&((new Image).src=this._items[s].src),this._items[o]&&((new Image).src=this._items[o].src)}},d.prototype._toggleZoom=function(){this._options.zoom&&(this._isZoomed=!this._isZoomed,this._image.classList.toggle("neiki-zoomed",this._isZoomed))},d.prototype._toggleFullscreen=function(){if(this._options.fullscreen)if(document.fullscreenElement||document.webkitFullscreenElement)document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen&&document.webkitExitFullscreen();else{var t=this._lightbox;t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen&&t.webkitRequestFullscreen()}},d.prototype._onFullscreenChange=function(){this._isFullscreen=!(!document.fullscreenElement&&!document.webkitFullscreenElement),this._fsBtn&&(this._fsBtn.innerHTML=this._isFullscreen?l:h)},d.prototype._setHash=function(t){"number"==typeof t&&this._isOpen&&history.replaceState(null,"","#neiki-"+this._id+"="+(t+1))},d.prototype._clearHash=function(){0===window.location.hash.indexOf("#neiki-"+this._id+"=")&&history.replaceState(null,"",window.location.pathname+window.location.search)},d.prototype._checkHash=function(){if(this._options.hashNavigation){var t=window.location.hash,e="#neiki-"+this._id+"=";if(0===t.indexOf(e)){var i=parseInt(t.substring(e.length),10);!isNaN(i)&&i>=1&&i<=this._items.length&&this.open(i-1)}}},d.prototype._onHashChange=function(){this._checkHash()},d.prototype._emit=function(t,e){var i=this._events[t];i&&i.forEach(function(t){t(e)})},d.prototype.open=function(t){this._destroyed||("number"!=typeof t&&(t=0),t<0&&(t=0),t>=this._items.length&&(t=this._items.length-1),this._isOpen=!0,document.body.style.overflow="hidden",this._lightbox.classList.add("neiki-lightbox--visible"),this._lightbox.focus(),this._currentIndex=-1,this._goTo(t),this._emit("open",t))},d.prototype.close=function(){this._isOpen&&(this._isOpen=!1,this._isFullscreen&&(document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()),this._isZoomed&&(this._isZoomed=!1,this._image.classList.remove("neiki-zoomed")),document.body.style.overflow="",this._lightbox.classList.remove("neiki-lightbox--visible"),this._options.hashNavigation&&this._clearHash(),this._emit("close"))},d.prototype.next=function(){this._goTo(this._currentIndex+1)},d.prototype.prev=function(){this._goTo(this._currentIndex-1)},d.prototype.on=function(t,e){return this._events[t]||(this._events[t]=[]),this._events[t].push(e),this},d.prototype.off=function(t,e){var i=this._events[t];return i&&(this._events[t]=i.filter(function(t){return t!==e})),this},d.prototype.destroy=function(){this._destroyed||(this._destroyed=!0,this._isOpen&&this.close(),this._boundHandlers.keydown&&document.removeEventListener("keydown",this._boundHandlers.keydown),this._boundHandlers.hashchange&&window.removeEventListener("hashchange",this._boundHandlers.hashchange),this._boundHandlers.fullscreenchange&&(document.removeEventListener("fullscreenchange",this._boundHandlers.fullscreenchange),document.removeEventListener("webkitfullscreenchange",this._boundHandlers.fullscreenchange)),this._boundHandlers.touchstart&&(this._stage.removeEventListener("touchstart",this._boundHandlers.touchstart),this._stage.removeEventListener("touchmove",this._boundHandlers.touchmove),this._stage.removeEventListener("touchend",this._boundHandlers.touchend)),this._observer&&(this._observer.disconnect(),this._observer=null),this._lightbox&&this._lightbox.parentNode&&this._lightbox.parentNode.removeChild(this._lightbox),this._container.classList.remove("neiki-gallery","neiki-gallery--masonry","neiki-gallery--grid"),this._events={})},"loading"===document.readyState?document.addEventListener("DOMContentLoaded",u):u(),d.autoInit=u,d});
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "neiki-gallery",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Vanilla JavaScript image gallery and lightbox — zero dependencies",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"gallery",
|
|
7
|
+
"lightbox",
|
|
8
|
+
"image-gallery",
|
|
9
|
+
"masonry",
|
|
10
|
+
"grid",
|
|
11
|
+
"vanilla-js",
|
|
12
|
+
"responsive",
|
|
13
|
+
"zoom",
|
|
14
|
+
"fullscreen"
|
|
15
|
+
],
|
|
16
|
+
"main": "dist/neiki-gallery.js",
|
|
17
|
+
"exports": {
|
|
18
|
+
".": "./dist/neiki-gallery.js",
|
|
19
|
+
"./min": "./dist/neiki-gallery.min.js",
|
|
20
|
+
"./style": "./dist/neiki-gallery.css",
|
|
21
|
+
"./style/min": "./dist/neiki-gallery.min.css"
|
|
22
|
+
},
|
|
23
|
+
"files": [
|
|
24
|
+
"dist"
|
|
25
|
+
],
|
|
26
|
+
"style": "dist/neiki-gallery.css",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/neikiri/neiki-gallery.git"
|
|
30
|
+
},
|
|
31
|
+
"bugs": {
|
|
32
|
+
"url": "https://github.com/neikiri/neiki-gallery/issues"
|
|
33
|
+
},
|
|
34
|
+
"unpkg": "dist/neiki-gallery.min.js",
|
|
35
|
+
"jsdelivr": "dist/neiki-gallery.min.js",
|
|
36
|
+
"homepage": "https://github.com/neikiri/neiki-gallery#readme",
|
|
37
|
+
"author": "Jindřich Stoklasa <jindrichstoklasa1@gmail.com>",
|
|
38
|
+
"license": "MIT"
|
|
39
|
+
}
|