Markdownの画像2枚を前後比較スライダーに変換できるようにした

1
![レタッチ前](./vrchat-retouch/images/before.png "compare:before")
2
![レタッチ後](./vrchat-retouch/images/after.png "compare:after")

1
const COMPARE_TITLE_PATTERN = /^compare:(before|after)$/i;
2

3
function parseCompareSide(title) {
4
  const normalizedTitle = title.trim();
5
  const match = COMPARE_TITLE_PATTERN.exec(normalizedTitle);
6
  return match?.[1]?.toLowerCase() ?? null;
7
}

1
<figure class="before-after-compare" data-before-after-compare="true">
2
  <div class="before-after-compare__viewport">
3
    <img data-compare-side="after" />
4
    <div class="before-after-compare__overlay" aria-hidden="true">
5
      <img data-compare-side="before" />
6
    </div>
7
    <input
8
      class="before-after-compare__range"
9
      data-before-after-range="true"
10
      type="range"
11
      min="0"
12
      max="100"
13
      step="1"
14
      value="50"
15
    />
16
  </div>
17
</figure>

1
const COMPARE_SELECTOR = "[data-before-after-compare]";
2
const RANGE_SELECTOR = "[data-before-after-range]";
3

4
export const initializeBeforeAfterCompare = () => {
5
  const compares = Array.from(document.querySelectorAll(COMPARE_SELECTOR));
6

7
  compares.forEach((compare) => {
8
    if (!(compare instanceof HTMLElement)) {
9
      return;
10
    }
11

12
    const range = compare.querySelector(RANGE_SELECTOR);
13
    if (!(range instanceof HTMLInputElement)) {
14
      return;
15
    }
16

17
    const updatePosition = () => {
18
      const position = Number.parseInt(range.value, 10);
19
      compare.style.setProperty("--before-after-position", `${position}%`);
20
    };
21

22
    updatePosition();
23

24
    if (compare.dataset.beforeAfterInitialized !== "true") {
25
      range.addEventListener("input", updatePosition);
26
      compare.dataset.beforeAfterInitialized = "true";
27
    }
28
  });
29
};