@noirmd/previewer 2.0.4 → 2.1.0

package/dist/index.js

@@ -11925,6 +11925,7 @@ var hover3d_default = hover3dDirective;
 
 // vanilla/directives/hovergallery.ts
 var IMG_RE3 = /!\[([^\]]*)\]\(([^)]+)\)/g;
+var MAX_IMAGES = 10;
 var hovergalleryDirective = ({ props, slots }) => {
   const images = [];
   const raw = slots.default || "";
@@ -11936,18 +11937,56 @@ var hovergalleryDirective = ({ props, slots }) => {
   if (images.length === 0) {
     return document.createDocumentFragment();
   }
+  const count = Math.min(images.length, MAX_IMAGES);
   const figure = document.createElement("figure");
   figure.className = "nr-hover-gallery";
   if (props.aspect) figure.style.aspectRatio = props.aspect;
   if (props.class) figure.classList.add(...props.class.split(/\s+/).filter(Boolean));
-  if (props.style) figure.setAttribute("style", props.style);
-  for (const img of images) {
+  if (props.style) figure.setAttribute("style", (figure.getAttribute("style") || "") + ";" + props.style);
+  const imgEls = [];
+  for (let i = 0; i < count; i++) {
     const el = document.createElement("img");
-    el.src = img.src;
-    el.alt = img.alt;
+    el.src = images[i].src;
+    el.alt = images[i].alt;
     el.loading = "lazy";
+    el.draggable = false;
+    if (i === 0) el.classList.add("nr-hg-active");
+    imgEls.push(el);
     figure.appendChild(el);
   }
+  for (let i = 0; i < count; i++) {
+    const strip = document.createElement("div");
+    strip.className = "nr-hg-trigger";
+    strip.style.left = `${i / count * 100}%`;
+    strip.style.width = `${1 / count * 100}%`;
+    strip.addEventListener("mouseenter", () => {
+      for (let j = 0; j < imgEls.length; j++) {
+        imgEls[j].classList.toggle("nr-hg-active", j === i);
+      }
+      for (let j = 0; j < dotEls.length; j++) {
+        dotEls[j].classList.toggle("nr-hg-dot-active", j === i);
+      }
+    });
+    figure.appendChild(strip);
+  }
+  figure.addEventListener("mouseleave", () => {
+    for (let j = 0; j < imgEls.length; j++) {
+      imgEls[j].classList.toggle("nr-hg-active", j === 0);
+    }
+    for (let j = 0; j < dotEls.length; j++) {
+      dotEls[j].classList.toggle("nr-hg-dot-active", j === 0);
+    }
+  });
+  const dotContainer = document.createElement("div");
+  dotContainer.className = "nr-hg-dots";
+  const dotEls = [];
+  for (let i = 0; i < count; i++) {
+    const dot = document.createElement("span");
+    if (i === 0) dot.classList.add("nr-hg-dot-active");
+    dotEls.push(dot);
+    dotContainer.appendChild(dot);
+  }
+  figure.appendChild(dotContainer);
   return figure;
 };
 var hovergallery_default = hovergalleryDirective;