Merge pull request #255 from SizeMeCom/add-size-selector-mfn

Add new size selector swatches-list-mfn
SizeMeCom · Dec 5, 2023 · 5cfb691 · 5cfb691
2 parents 5df43be + bff752f
commit 5cfb691
Showing 1 changed file with 67 additions and 0 deletions.
diff --git 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);
   }