Add image-compare widget (#689)

Co-authored-by: IceSentry <IceSentry@users.noreply.github.com>
Co-authored-by: Nicola Papale <nicopap@users.noreply.github.com>

sass/components/_image_compare.scss

@@ -0,0 +1,62 @@
+div.image-compare {
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 10px;
+  width: 100%;
+  aspect-ratio: 16 / 9; // fallback
+  background-color: black;
+  --slider-value: 50%;
+
+  &::before,
+  &::after {
+    position: absolute;
+    font-weight: bolder;
+    font-size: 175%;
+    writing-mode: vertical-rl;
+  }
+  &::before {
+    content: attr(data-title-a);
+    z-index: 1;
+  }
+  &::after {
+    content: attr(data-title-b);
+    width: 100%;
+  }
+
+  & img {
+    width: 100%;
+  }
+  & .image-a {
+    position: absolute;
+    -webkit-clip-path: inset(0 calc(100% - var(--slider-value) + 1.5px) 0 0);
+    clip-path: inset(0 calc(100% - var(--slider-value) + 1.5px) 0 0);
+  }
+  & .image-b {
+    float: right;
+    -webkit-clip-path: inset(0 0 0 calc(var(--slider-value) + 1.5px));
+    clip-path: inset(0 0 0 calc(var(--slider-value) + 1.5px));
+  }
+
+  & input[type="range"] {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    width: inherit;
+    height: 100%;
+    background-color: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+    z-index: 2;
+
+    &::-moz-range-thumb {
+      border: none;
+      background-color: transparent;
+    }
+    &::-webkit-slider-thumb {
+      width: 0; // no clue why this is required, but it is
+      -webkit-appearance: none;
+      appearance: none;
+    }
+  }
+}

sass/site.scss

@@ -42,6 +42,7 @@
 @import "components/syntax-theme";
 @import "components/tree-menu";
 @import "components/asset-card";
+@import "components/image_compare";
 
 // Pages
 // - Page specific CSS

static/components.js

@@ -0,0 +1,42 @@
+
+// clamp a number to the given range
+function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max)
+}
+
+// inserts the input element required to activate image_compare components
+//
+// Usage in a document should look like:
+// ```html
+// <main>
+//   <div class="image-compare" style="aspect-ratio: 16 / 9"
+//   data-title-a="Apples" data-title-b="Oranges">
+//     <img class="image-a" alt="Apples" src="apples.png" />
+//     <img class="image-b" alt="Oranges" src="oranges.png" />
+//   </div>
+// </main>
+// ```
+//
+// The `image_compare` scss component should be used.
+//
+// Ideally the `aspect-ratio` should be set, but it will
+// fallback to 16/9.
+function enable_image_compare() {
+  const image_compares = document.querySelectorAll("div.image-compare");
+  for (const img_cmp of image_compares) {
+    // insert the input only when js is running
+    const slider = document.createElement('input');
+    slider.type = "range";
+    slider.min = "0";
+    slider.max = "100";
+    slider.value = "50";
+    img_cmp.appendChild(slider);
+    // setup callback
+    img_cmp.style.setProperty('--slider-value', clamp(slider.value, 7, 93) + "%");
+    slider.addEventListener("input", (event) => {
+      img_cmp.style.setProperty('--slider-value', clamp(slider.value, 7, 93) + "%");
+    });
+  }
+}
+
+export { enable_image_compare };

templates/news-page.html

@@ -56,4 +56,11 @@ <h2 class="news-subtitle">Posted on {{ page.date | date(format="%B %d, %Y") }} b
   </div>
   {% endif %}
   <div class="media-content news-content">{{ page.content | safe }}</div>
+  <script type="module">
+    import { enable_image_compare } from '/components.js';
+
+    document.addEventListener("DOMContentLoaded", function() {
+      enable_image_compare();
+    });
+  </script>
 {% endblock content %}