From 453d2265cc38ac46f0f8bd557e655f289a18ba61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20K=C3=B6n=C3=B6nen?= <ville@nomasi.com>
Date: Tue, 5 Dec 2023 19:32:07 +0200
Subject: [PATCH 1/2] Add new size selector swatches-list-mfn

---
 src/api/SizeSelector.js | 67 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/src/api/SizeSelector.js b/src/api/SizeSelector.js
index 1ca785b..9b7a49f 100644
--- a/src/api/SizeSelector.js
+++ b/src/api/SizeSelector.js
@@ -566,6 +566,69 @@ class SwatchesListButtonCGKit extends AbstractSelect {
   };
 }
 
+class SwatchesListMFN extends AbstractSelect {
+  constructor(element) {
+    super(element, { event: "click", useCapture: true });
+
+    this.allowEmptySizeSelection = false;
+    this.getSize = (e) => {
+      const selected = e.target.closest("li");
+      return selected?.querySelector('a').dataset.id ?? "";
+    };
+
+    this.clearSelection = () => {
+      const selected = element.querySelector("li.active");
+      if (selected && selected.classList) {
+        selected.classList.remove("active");
+      }
+    };
+
+    const options = element.querySelectorAll("li");
+    const mkSelectFn = (option) => () => option.click();
+    for (let i = 0; i < options.length; i++) {
+      const option = options.item(i);
+      const sizeValue = option.querySelector('a').dataset.id;
+      const textSpan = option.querySelector('a').innerText;
+      if (textSpan) {
+        this.selectors[sizeValue] = mkSelectFn(option);
+        this.sizeMapper.push([sizeValue, textSpan.trim()]);
+      }
+    }
+
+    this.getSelectedSize = () => {
+      const selected = element.querySelector("li.active");
+      if (selected) {
+        return selected.querySelector('a').dataset.id;
+      } else {
+        return "";
+      }
+    };
+  }
+
+  clone = () => {
+    if (this.el) {
+      const clone = this.el.cloneNode(true);
+      const clearSelected = () => {
+        clone.querySelector("li.active").classList.remove("active");
+      };
+
+      const links = clone.querySelectorAll("li");
+      const mkEventListener = (link) => (e) => {
+        clearSelected();
+        link.classList.add("active");
+        this.setSelected(e.currentTarget.querySelector('a').dataset.id);
+      };
+      for (let i = 0; i < links.length; i++) {
+        const link = links.item(i);
+        link.addEventListener("click", mkEventListener(link), true);
+      }
+      return clone;
+    } else {
+      return document.createElement("div");
+    }
+  };
+}
+
 const initSizeSelector = (selectSizeFn) => {
   selectSize = (size) => {
     selectSizeFn(size);
@@ -609,6 +672,10 @@ const initSizeSelector = (selectSizeFn) => {
       selector = getInstance(SwatchesListButtonCGKit);
       break;
 
+    case "swatches-list-mfn":
+      selector = getInstance(SwatchesListMFN);
+      break;
+
     default:
       selector = getInstance(DefaultSelect);
   }

From bff752f534e3830ffa2948dadecf8a5bd87a0aff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ville=20K=C3=B6n=C3=B6nen?= <ville@nomasi.com>
Date: Tue, 5 Dec 2023 19:34:56 +0200
Subject: [PATCH 2/2] New size selector code cleaned

---
 src/api/SizeSelector.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/api/SizeSelector.js b/src/api/SizeSelector.js
index 9b7a49f..589da19 100644
--- a/src/api/SizeSelector.js
+++ b/src/api/SizeSelector.js
@@ -573,7 +573,7 @@ class SwatchesListMFN extends AbstractSelect {
     this.allowEmptySizeSelection = false;
     this.getSize = (e) => {
       const selected = e.target.closest("li");
-      return selected?.querySelector('a').dataset.id ?? "";
+      return selected?.querySelector("a").dataset.id ?? "";
     };
 
     this.clearSelection = () => {
@@ -587,8 +587,8 @@ class SwatchesListMFN extends AbstractSelect {
     const mkSelectFn = (option) => () => option.click();
     for (let i = 0; i < options.length; i++) {
       const option = options.item(i);
-      const sizeValue = option.querySelector('a').dataset.id;
-      const textSpan = option.querySelector('a').innerText;
+      const sizeValue = option.querySelector("a").dataset.id;
+      const textSpan = option.querySelector("a").innerText;
       if (textSpan) {
         this.selectors[sizeValue] = mkSelectFn(option);
         this.sizeMapper.push([sizeValue, textSpan.trim()]);
@@ -598,7 +598,7 @@ class SwatchesListMFN extends AbstractSelect {
     this.getSelectedSize = () => {
       const selected = element.querySelector("li.active");
       if (selected) {
-        return selected.querySelector('a').dataset.id;
+        return selected.querySelector("a").dataset.id;
       } else {
         return "";
       }
@@ -616,7 +616,7 @@ class SwatchesListMFN extends AbstractSelect {
       const mkEventListener = (link) => (e) => {
         clearSelected();
         link.classList.add("active");
-        this.setSelected(e.currentTarget.querySelector('a').dataset.id);
+        this.setSelected(e.currentTarget.querySelector("a").dataset.id);
       };
       for (let i = 0; i < links.length; i++) {
         const link = links.item(i);