@eox/pages-theme-eox 1.8.0 → 2.0.0-alpha.1

package/src/components/ImageCarousel.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="image-carousel-container group">
+    <!-- Slider Container -->
+    <div
+      ref="container"
+      class="carousel-slider scrollbar-none"
+      @scroll="handleScroll"
+    >
+      <div
+        v-for="(img, idx) in normalizedImages"
+        :key="idx"
+        class="carousel-slide"
+      >
+        <img
+          :src="img.src"
+          :alt="img.alt || `Carousel image ${idx + 1}`"
+          class="carousel-img"
+        />
+        <div
+          v-if="img.caption"
+          class="carousel-caption"
+          v-html="img.caption"
+        ></div>
+      </div>
+    </div>
+
+    <!-- Navigation Arrows -->
+    <button
+      v-if="normalizedImages.length > 1"
+      @click="prev"
+      class="carousel-nav carousel-prev"
+      aria-label="Previous Slide"
+    >
+      <svg
+        class="carousel-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15 19l-7-7 7-7"
+        />
+      </svg>
+    </button>
+
+    <button
+      v-if="normalizedImages.length > 1"
+      @click="next"
+      class="carousel-nav carousel-next"
+      aria-label="Next Slide"
+    >
+      <svg
+        class="carousel-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+      </svg>
+    </button>
+
+    <!-- Indicators -->
+    <div v-if="normalizedImages.length > 1" class="carousel-indicators">
+      <button
+        v-for="(_, idx) in normalizedImages"
+        :key="idx"
+        @click="goTo(idx)"
+        class="carousel-dot"
+        :class="{ active: activeIndex === idx }"
+        :aria-label="`Go to slide ${idx + 1}`"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  images: {
+    type: Array,
+    required: true,
+  },
+});
+
+const container = ref(null);
+const activeIndex = ref(0);
+
+const normalizedImages = computed(() => {
+  if (!props.images) return [];
+  return props.images.map((img) => {
+    if (typeof img === "string") {
+      return { src: img, alt: "", caption: "" };
+    }
+    return {
+      src: img.src || "",
+      alt: img.alt || "",
+      caption: img.caption || "",
+    };
+  });
+});
+
+const handleScroll = () => {
+  if (!container.value) return;
+  const { scrollLeft, clientWidth } = container.value;
+  if (clientWidth === 0) return;
+  activeIndex.value = Math.round(scrollLeft / clientWidth);
+};
+
+const goTo = (index) => {
+  if (!container.value) return;
+  const width = container.value.clientWidth;
+  container.value.scrollTo({
+    left: width * index,
+    behavior: "smooth",
+  });
+};
+
+const prev = () => {
+  const index =
+    (activeIndex.value - 1 + normalizedImages.value.length) %
+    normalizedImages.value.length;
+  goTo(index);
+};
+
+const next = () => {
+  const index = (activeIndex.value + 1) % normalizedImages.value.length;
+  goTo(index);
+};
+</script>
+
+<style scoped>
+.image-carousel-container {
+  position: relative;
+  width: 100%;
+  margin: 1.5rem 0;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: #f8fafc;
+}
+
+.carousel-slider {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+/* Hide scrollbars */
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.carousel-slide {
+  width: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-img {
+  width: 100%;
+  max-height: 500px;
+  object-fit: cover;
+  display: block;
+}
+
+.carousel-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  font-size: 0.875rem;
+  padding: 0.75rem 1.5rem;
+  text-align: center;
+  backdrop-filter: blur(4px);
+}
+
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.4);
+  border: none;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer !important;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease-in-out,
+    background-color 0.2s;
+  z-index: 10;
+}
+
+.carousel-nav:hover {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.image-carousel-container:hover .carousel-nav {
+  opacity: 1;
+}
+
+.carousel-prev {
+  left: 1rem;
+}
+
+.carousel-next {
+  right: 1rem;
+}
+
+.carousel-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 0.5rem;
+  z-index: 10;
+}
+
+.carousel-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer !important;
+  transition: all 0.3s;
+  padding: 0;
+}
+
+.carousel-dot:hover {
+  background-color: rgba(255, 255, 255, 0.85);
+}
+
+.carousel-dot.active {
+  background-color: #ffffff;
+  width: 20px;
+  border-radius: 5px;
+}
+</style>

package/src/components/ImageElement.cy.js

@@ -0,0 +1,46 @@
+import ImageElement from "./ImageElement.vue";
+
+describe("<ImageElement />", () => {
+  it("renders standard image with caption and custom width", () => {
+    const src = "/images/someimage.png";
+    const caption = "Nice view of the <em>Earth</em>";
+    const width = "300px";
+
+    cy.mount(ImageElement, {
+      props: {
+        src,
+        caption,
+        width,
+      },
+    });
+
+    cy.get("img")
+      .should("have.attr", "src", src)
+      .should("have.css", "max-width", width);
+
+    cy.get("figcaption").should(
+      "contain.html",
+      "Nice view of the <em>Earth</em>",
+    );
+  });
+
+  it("renders compare slider when compare prop is provided", () => {
+    const src = "/images/2024.jpg";
+    const compare = "/images/2023.jpg";
+
+    cy.mount(ImageElement, {
+      props: {
+        src,
+        compare,
+      },
+    });
+
+    // Check that two images are rendered
+    cy.get("img").should("have.length", 2);
+    cy.get("img").eq(0).should("have.attr", "src", compare);
+    cy.get("img").eq(1).should("have.attr", "src", src);
+
+    // Check slider element exists
+    cy.get('input[type="range"]').should("exist").and("have.value", "50");
+  });
+});

package/src/components/ImageElement.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="image-element-container">
+    <figure class="image-element-figure">
+      <!-- Image Compare Mode -->
+      <div
+        v-if="compare"
+        class="compare-wrapper"
+        :style="{ maxWidth: width || '100%' }"
+      >
+        <!-- Background Image (Original/Right) -->
+        <img
+          :src="compare"
+          :alt="alt || 'Image comparison background'"
+          class="compare-img compare-bg"
+        />
+
+        <!-- Foreground Image (Overlay/Left) -->
+        <div
+          class="compare-overlay"
+          :style="{
+            clipPath: `polygon(0 0, ${sliderValue}% 0, ${sliderValue}% 100%, 0 100%)`,
+          }"
+        >
+          <img
+            :src="src"
+            :alt="alt || 'Image comparison foreground'"
+            class="compare-img compare-fg"
+          />
+        </div>
+
+        <!-- Slider Line and Handle -->
+        <div class="compare-handle-line" :style="{ left: `${sliderValue}%` }">
+          <div class="compare-handle-circle">
+            <svg
+              class="compare-handle-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M8 9l-3 3 3 3m8-6l3 3-3 3"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Range Input Overlay (covers full container to handle drag smoothly) -->
+        <input
+          type="range"
+          min="0"
+          max="100"
+          v-model="sliderValue"
+          class="compare-range-input"
+          aria-label="Image comparison slider"
+        />
+      </div>
+
+      <!-- Standard Image Mode -->
+      <img
+        v-else
+        :src="src"
+        :alt="alt || 'Post image'"
+        :style="{ maxWidth: width || '100%' }"
+        class="standard-img"
+      />
+
+      <!-- Caption -->
+      <figcaption
+        v-if="caption"
+        class="image-caption"
+        v-html="caption"
+      ></figcaption>
+    </figure>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+  compare: {
+    type: String,
+    default: "",
+  },
+  alt: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "",
+  },
+  caption: {
+    type: String,
+    default: "",
+  },
+});
+
+const sliderValue = ref(50);
+</script>
+
+<style scoped>
+.image-element-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 1.5rem 0;
+  width: 100%;
+}
+
+.image-element-figure {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 0.5rem auto;
+}
+
+.compare-wrapper {
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e2e8f0;
+}
+
+.compare-img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: cover;
+  pointer-events: none;
+}
+
+.compare-bg {
+  /* base background */
+}
+
+.compare-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.compare-fg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+}
+
+.compare-handle-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: #ffffff;
+  cursor: ew-resize;
+  pointer-events: none;
+  z-index: 10;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+.compare-handle-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 1px solid #cbd5e1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.compare-handle-icon {
+  width: 20px;
+  height: 20px;
+  color: #64748b;
+}
+
+/* Range Input Overlay to handle drag */
+.compare-range-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: ew-resize;
+  z-index: 20;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+}
+
+.compare-range-input::-webkit-slider-runnable-track {
+  background: transparent;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+
+.compare-range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 100%;
+  width: 40px;
+  background: transparent;
+  cursor: ew-resize;
+  margin-top: 0;
+}
+
+.compare-range-input::-moz-range-track {
+  background: transparent;
+  border: none;
+  height: 100%;
+}
+
+.compare-range-input::-moz-range-thumb {
+  height: 100%;
+  width: 40px;
+  background: transparent;
+  cursor: ew-resize;
+  border: none;
+}
+
+.standard-img {
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  display: block;
+  height: auto;
+}
+
+.image-caption {
+  font-size: 0.85rem;
+  margin-top: 0.75rem;
+  text-align: center;
+  color: #64748b;
+  max-width: 40rem;
+  line-height: 1.5;
+}
+</style>

package/src/components/ImageGallery.cy.js

@@ -0,0 +1,52 @@
+import ImageGallery from "./ImageGallery.vue";
+
+describe("<ImageGallery />", () => {
+  const imageList = [
+    { src: "/img1.jpg", alt: "Img 1", caption: "Caption 1" },
+    { src: "/img2.jpg", alt: "Img 2", caption: "Caption 2" },
+    { src: "/img3.jpg", alt: "Img 3", caption: "Caption 3" },
+  ];
+
+  it("renders grid layout when explicitly requested", () => {
+    cy.mount(ImageGallery, {
+      props: {
+        images: imageList,
+        layout: "grid",
+        columns: 3,
+      },
+    });
+
+    cy.get(".grid-container").should("have.class", "cols-3");
+    cy.get("img").should("have.length", 3);
+    cy.get("figcaption").should("have.length", 3);
+    cy.contains("Caption 1").should("be.visible");
+  });
+
+  it("renders gallery/lightbox layout by default", () => {
+    const stringImages = "/img1.jpg, /img2.jpg, /img3.jpg";
+    cy.mount(ImageGallery, {
+      props: {
+        images: stringImages,
+      },
+    });
+
+    // Check main featured image
+    cy.get(".featured-wrapper img").should("have.attr", "src", "/img1.jpg");
+
+    // Check 2 thumbnails below
+    cy.get(".cols-thumbnail img").should("have.length", 2);
+    cy.get(".cols-thumbnail img").eq(0).should("have.attr", "src", "/img2.jpg");
+
+    // Click main image to trigger lightbox
+    cy.get(".featured-wrapper").click();
+
+    // Lightbox should be open
+    cy.get(".lightbox-overlay").should("exist");
+    cy.get(".lightbox-image").should("have.attr", "src", "/img1.jpg");
+    cy.contains("1 / 3").should("exist");
+
+    // Close lightbox
+    cy.get("button[aria-label='Close Lightbox']").click({ force: true });
+    cy.get(".lightbox-overlay").should("not.exist");
+  });
+});