From 4a7caba66ecd8024da9e1807728a7bbd45412036 Mon Sep 17 00:00:00 2001
From: ickk <git@ickk.io>
Date: Sun, 9 Jul 2023 18:59:13 +1000
Subject: [PATCH 1/2] Add image_compare component

Co-authored-by: IceSentry <IceSentry@users.noreply.github.com>
---
 sass/components/_image_compare.scss | 46 +++++++++++++++++++++++++++++
 sass/site.scss                      |  1 +
 static/components.js                | 41 +++++++++++++++++++++++++
 templates/news-page.html            |  7 +++++
 4 files changed, 95 insertions(+)
 create mode 100644 sass/components/_image_compare.scss
 create mode 100644 static/components.js

diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss
new file mode 100644
index 0000000000..f70af39e53
--- /dev/null
+++ b/sass/components/_image_compare.scss
@@ -0,0 +1,46 @@
+div.image-compare {
+  display: block;
+  position: relative;
+  border-radius: 10px;
+  width: 100%;
+  aspect-ratio: 16 / 9; // fallback
+  background-color: black;
+  --slider-value: 50%;
+
+  & 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;
+
+    &::-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;
+    }
+  }
+}
diff --git a/sass/site.scss b/sass/site.scss
index addc659007..8cda020aad 100644
--- a/sass/site.scss
+++ b/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
diff --git a/static/components.js b/static/components.js
new file mode 100644
index 0000000000..298d0b7caa
--- /dev/null
+++ b/static/components.js
@@ -0,0 +1,41 @@
+
+// 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">
+//     <img class="image-a" src="$url" />
+//     <img class="image-b" src="$url" />
+//   </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 };
diff --git a/templates/news-page.html b/templates/news-page.html
index 4a56fffe74..94b32e4560 100644
--- a/templates/news-page.html
+++ b/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 %}

From 07c15278b3cea586b8c27b716eddcc692bcf9181 Mon Sep 17 00:00:00 2001
From: ickk <git@ickk.io>
Date: Mon, 10 Jul 2023 00:45:12 +1000
Subject: [PATCH 2/2] Add vertical titles to images in image-compare widget

Co-authored-by: Nicola Papale <nicopap@users.noreply.github.com>
---
 sass/components/_image_compare.scss | 22 +++++++++++++++++++---
 static/components.js                |  7 ++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss
index f70af39e53..496eabdd08 100644
--- a/sass/components/_image_compare.scss
+++ b/sass/components/_image_compare.scss
@@ -1,5 +1,6 @@
 div.image-compare {
-  display: block;
+  display: flex;
+  align-items: center;
   position: relative;
   border-radius: 10px;
   width: 100%;
@@ -7,16 +8,30 @@ div.image-compare {
   background-color: black;
   --slider-value: 50%;
 
-  & img {
+  &::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));
@@ -32,6 +47,7 @@ div.image-compare {
     background-color: transparent;
     -webkit-appearance: none;
     appearance: none;
+    z-index: 2;
 
     &::-moz-range-thumb {
       border: none;
diff --git a/static/components.js b/static/components.js
index 298d0b7caa..cb13ee8d51 100644
--- a/static/components.js
+++ b/static/components.js
@@ -9,9 +9,10 @@ function clamp(val, min, max) {
 // Usage in a document should look like:
 // ```html
 // <main>
-//   <div class="image-compare" style="aspect-ratio: 16 / 9">
-//     <img class="image-a" src="$url" />
-//     <img class="image-b" src="$url" />
+//   <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>
 // ```