+
+
+
Primary color
+
+ {% for color in site.colors %}
+
+
+
+ {% endfor %}
+
-
Skin color
-
- {% for color in site.skin-colors %}
-
-
-
- {% endfor %}
-
+
Skin color
+
+ {% for color in site.skin-colors %}
+
+
+
+ {% endfor %}
+
-
Select illustration
-
- {% for illustration in illustrations %}
-
- {% endfor %}
@@ -126,18 +134,13 @@ illustrations = illustrations | push: illustration %} {% endif %} {% endfor %} {
currentIllustration = document.getElementById("current-illustration"),
currentIllustrationCode = document.getElementById("current-illustration-code");
- selectIllustrations.forEach((elem) => {
- elem.addEventListener("click", (e) => {
- document.querySelectorAll(".js-select-illustration").forEach(f => f.classList.remove('bg-body'))
- elem.classList.add('bg-body')
-
- const selectedId = elem.getAttribute('data-id'),
+ document.querySelectorAll(".js-select-illustration").forEach((elem) => {
+ elem.addEventListener("change", (e) => {
+ const selectedId = e.target.value,
selectedIllustration = illustrations[selectedId]
currentIllustration.innerHTML = selectedIllustration.svg
- if(currentIllustrationCode) {
- currentIllustrationCode.innerHTML = selectedIllustration.svg.replace(//g, ">")
- }
+
})
})