@riebeckite/plugin-image-compare 0.0.36 → 0.0.37

package/dist/index.js

@@ -131,8 +131,8 @@ import { escapeHtml, escapeHtmlAttribute } from "@riebeckite/core";
 var IMAGE_COMPARE_CLASS = "rr-image-compare";
 function renderImageCompare(spec) {
   const label = spec.label ?? "Image comparison";
-  const before = `<img class="${IMAGE_COMPARE_CLASS}__image ${IMAGE_COMPARE_CLASS}__image--before" src="${escapeHtmlAttribute(spec.before)}" alt="${escapeHtmlAttribute(spec.beforeAlt)}" loading="lazy" decoding="async">`;
-  const after = `<div class="${IMAGE_COMPARE_CLASS}__layer"><img class="${IMAGE_COMPARE_CLASS}__image ${IMAGE_COMPARE_CLASS}__image--after" src="${escapeHtmlAttribute(spec.after)}" alt="${escapeHtmlAttribute(spec.afterAlt)}" loading="lazy" decoding="async"></div>`;
+  const before = `<div class="${IMAGE_COMPARE_CLASS}__layer ${IMAGE_COMPARE_CLASS}__layer--before"><img class="${IMAGE_COMPARE_CLASS}__image ${IMAGE_COMPARE_CLASS}__image--before" src="${escapeHtmlAttribute(spec.before)}" alt="${escapeHtmlAttribute(spec.beforeAlt)}" loading="eager" decoding="async"></div>`;
+  const after = `<div class="${IMAGE_COMPARE_CLASS}__layer ${IMAGE_COMPARE_CLASS}__layer--after"><img class="${IMAGE_COMPARE_CLASS}__image ${IMAGE_COMPARE_CLASS}__image--after" src="${escapeHtmlAttribute(spec.after)}" alt="${escapeHtmlAttribute(spec.afterAlt)}" loading="eager" decoding="async"></div>`;
   return [
     `<figure class="${IMAGE_COMPARE_CLASS}" data-rr-image-compare data-orientation="${spec.orientation}" style="--rr-image-compare-position:50%" aria-label="${escapeHtmlAttribute(label)}">`,
     `<div class="${IMAGE_COMPARE_CLASS}__static">`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-image-compare",
-  "version": "0.0.36",
+  "version": "0.0.37",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.36",
+    "@riebeckite/core": "0.0.37",
     "@types/mdast": "^4.0.4",
     "unist-util-visit": "^5.1.0",
     "vfile-matter": "^5.0.1"

package/style.css

@@ -5,24 +5,98 @@
 }
 
 .rr-image-compare__static {
+  position: relative;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-  gap: 0.5rem;
+  grid-template-areas: "compare";
+  overflow: hidden;
+  border: 1px solid var(--rb-color-border, #d0d0d0);
+  background: var(--rb-color-surface, transparent);
+}
+
+.rr-image-compare__static::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  background: var(--rb-color-paper, #fff);
+  box-shadow: 0 0 0 1px var(--rb-color-border-strong, #9a9a9a);
+  content: "";
+  pointer-events: none;
+}
+
+.rr-image-compare[data-orientation="vertical"]
+  .rr-image-compare__static::after {
+  top: 50%;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: auto;
+  height: 1px;
 }
 
 .rr-image-compare__static-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  color: var(--rb-color-muted, #69645c);
-  font-size: 0.8125rem;
+  position: relative;
+  display: block;
+  grid-area: compare;
 }
 
 .rr-image-compare__static-item img {
   display: block;
   width: 100%;
-  height: auto;
-  border: 1px solid var(--rb-color-border, #d0d0d0);
+  height: 100%;
+  object-fit: cover;
+}
+
+.rr-image-compare__static-item:first-child img {
+  clip-path: inset(0 50% 0 0);
+}
+
+.rr-image-compare__static-item:last-child img {
+  clip-path: inset(0 0 0 50%);
+}
+
+.rr-image-compare[data-orientation="vertical"]
+  .rr-image-compare__static-item:first-child
+  img {
+  clip-path: inset(0 0 50% 0);
+}
+
+.rr-image-compare[data-orientation="vertical"]
+  .rr-image-compare__static-item:last-child
+  img {
+  clip-path: inset(50% 0 0 0);
+}
+
+.rr-image-compare__static-item span {
+  position: absolute;
+  bottom: 0.5rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.125rem;
+  background: var(--rb-color-surface, #fff);
+  color: var(--rb-color-muted, #69645c);
+  font-size: 0.75rem;
+}
+
+.rr-image-compare__static-item:first-child span {
+  left: 0.5rem;
+}
+
+.rr-image-compare__static-item:last-child span {
+  right: 0.5rem;
+}
+
+.rr-image-compare[data-orientation="vertical"]
+  .rr-image-compare__static-item:first-child
+  span {
+  bottom: auto;
+  top: 0.5rem;
+}
+
+.rr-image-compare[data-orientation="vertical"]
+  .rr-image-compare__static-item:last-child
+  span {
+  bottom: 0.5rem;
 }
 
 .rr-image-compare__stage {
@@ -46,17 +120,20 @@
   height: auto;
 }
 
-.rr-image-compare__image--before,
 .rr-image-compare__layer {
   grid-area: 1 / 1;
+  align-self: stretch;
 }
 
-.rr-image-compare__layer {
-  align-self: stretch;
+.rr-image-compare .rr-image-compare__layer > * {
+  display: block;
+}
+
+.rr-image-compare__layer--after {
   clip-path: inset(0 0 0 var(--rr-image-compare-position));
 }
 
-.rr-image-compare[data-orientation="vertical"] .rr-image-compare__layer {
+.rr-image-compare[data-orientation="vertical"] .rr-image-compare__layer--after {
   clip-path: inset(var(--rr-image-compare-position) 0 0 0);
 }