Merge pull request #2 from Deltaco-AB/patch-1

Accessories layout fix
Deltaco-AB · Mar 30, 2022 · 4ae5fa3 · 4ae5fa3
2 parents 94f0c66 + e918888
commit 4ae5fa3
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 15 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -304,7 +304,7 @@ a {
 #echargeMain #summary .gallery .item {
     position: relative;
     width: 250px;
-    height: 300px;
+    height: 340px;
     margin: 10px;
     background: white;
     box-sizing: border-box;
@@ -313,7 +313,7 @@ a {
     box-shadow: var(--box-shadow);
 }
 
-#echargeMain #summary .gallery .item:nth-child(n+5), 
+#echargeMain #summary .gallery .item:not(.noLength):nth-child(n+5), 
 #echargeMain #summary .gallery .item.noLength .length {
     display: none;
 }
@@ -391,7 +391,7 @@ a {
     border-radius: 25px;
     overflow: hidden;
     box-shadow: var(--box-shadow);
-    transition: 300ms height;
+    transition: 300ms height, 200ms width;
     pointer-events: initial;
     cursor: pointer;
     z-index: 3;
@@ -519,7 +519,8 @@ a {
 }
 
 #echargeMain #summary.accessoriesActive #action #accessories {
-    height: 380px;
+    height: 420px;
+    width: 100%;
 }
 
 #echargeMain #summary.accessoriesActive #filter,
@@ -741,6 +742,21 @@ a {
 
 }
 
+@media screen and (max-width: 1510px) {
+    #echargeMain #summary.accessoriesActive #action #accessories {
+        height: 82vh;
+        display: grid;
+        align-items: center;
+    }
+
+    #echargeMain #summary #action #accessories .gallery {
+        position: unset;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        justify-items: center;
+    }
+}
+
 @media screen and (max-width: 400px) {
     #echargeMain #summary #banner {
         margin: 20px;

diff --git a/assets/js/module/Configurator.mjs b/assets/js/module/Configurator.mjs
@@ -23,6 +23,11 @@ export class Configurator {
         return response.json(); // parses JSON response into native JavaScript objects
     }
 
+    // Get subset of cables from condition
+    filterCables(predicate) {
+        return Object.fromEntries(Object.entries(this.data.cables).filter(predicate))
+    }
+
     // Set dropdown visibility
     dropdownVisible(show) {
         if(!show) {
@@ -121,14 +126,25 @@ export class Configurator {
         }
     }
 
+    addItem(item) {
+        return `<div class="item ${item.argument}"><p class="length">${item.length}</p><img src="${item.image}"/><p class="info">${item.text}</p><a href="${item.link}" target="_blank">Välj</a></div>`;
+    }
+
+    addAccessories() {
+        const accessories = this.filterCables(([pid, prop]) => prop.argument === "noLength");
+
+        console.log(accessories);
+        for(const accessory of Object.values(accessories)) {
+            this.UI.accessories.children[0].insertAdjacentHTML("beforeend", this.addItem(accessory));
+        }
+
+        this.UI.accessories.classList.add("active");
+    }
+
     openSummary() {
         this.UI.wrapper.style.display = "none";
         const data = this.data.vehicles[this.configuration[0]][this.configuration[1]][this.configuration[2]];
 
-        function addItem(cable) {
-            return `<div class="item ${cable.argument}"><p class="length">${cable.length}</p><img src="${cable.image}"/><p class="info">${cable.text}</p><a href="${cable.link}" target="_blank">Välj</a></div>`;
-        }
-
         // Set vehicle info fields
         let bannerText = this.UI.summary.querySelector("#banner").children;
         bannerText[0].innerText = this.configuration[0];
@@ -143,17 +159,13 @@ export class Configurator {
             }
             const data = this.data.cables[cable];
             if(cable in this.data.cables) {
-                this.UI.cables.innerHTML += addItem(data);
+                this.UI.cables.innerHTML += this.addItem(data);
                 i++;
             }
         });
 
         // Accessory items
-        this.UI.cables.innerHTML += addItem(this.data.cables["EV-5100"]);
-        if(i > 3) {
-            this.UI.accessories.classList.add("active");
-            this.UI.accessories.children[0].innerHTML = addItem(this.data.cables["EV-5100"]);
-        }
+        this.addAccessories();
 
         this.UI.summary.classList.add("active");
     }

diff --git a/cables.json b/cables.json
@@ -6,6 +6,34 @@
 		"text": "Förvaringsväska för kablar",
 		"link": "https://www.deltaco.se/produkter/kablar-adaptrar/ev-charge/EV-5100"
 	},
+	"EV-5101": {
+		"argument": "noLength",
+		"length": "0",
+		"image": "https://www.deltaco.se/sites/cdn/PublishingImages/Products/EV-5102.png?width=120",
+		"text": "Deltaco väggfäste för Typ2 laddningskontakt",
+		"link": "https://www.deltaco.se/produkter/kablar-adaptrar/ev-charge/EV-5101"
+	},
+	"EV-5102": {
+		"argument": "noLength",
+		"length": "0",
+		"image": "https://www.deltaco.se/sites/cdn/PublishingImages/Products/EV-5102.png?width=120",
+		"text": "Deltaco väggfäste för Typ1 laddningskontakt",
+		"link": "https://www.deltaco.se/produkter/kablar-adaptrar/ev-charge/EV-5102"
+	},
+	"EV-5103": {
+		"argument": "noLength",
+		"length": "0",
+		"image": "https://www.deltaco.se/sites/cdn/PublishingImages/Products/EV-5103.png?width=120",
+		"text": "Deltaco väggfäste för Typ2 laddningskontakt",
+		"link": "https://www.deltaco.se/produkter/kablar-adaptrar/ev-charge/EV-5103"
+	},
+	"EV-5105": {
+		"argument": "noLength",
+		"length": "0",
+		"image": "https://www.deltaco.se/sites/cdn/PublishingImages/Products/EV-5105.png?width=120",
+		"text": "Deltaco väggfäste för Typ2 laddningskontakt",
+		"link": "https://www.deltaco.se/produkter/kablar-adaptrar/ev-charge/EV-5105"
+	},
 	"EV-1203": {
 		"length": "3m",
 		"image": "https://www.deltaco.se/sites/cdn/PublishingImages/Products/EV-1203.png?width=120",
@@ -132,4 +160,4 @@
 		"text": "Type 2 - Type 1, 16A",
 		"link": "https://www.deltaco.se/produkter/kablar-adaptrar/ev-charge/EV-11010"
 	}
-}
+}