From 5fc66ac7d50b65a79a082736bebb92e4922c0145 Mon Sep 17 00:00:00 2001
From: Nicholas Pease <me@nicholaspease.com>
Date: Thu, 17 Sep 2020 15:42:22 -0400
Subject: [PATCH] Fixed the Ribbon Rack Builder

---
 ribbon/js/script.js | 98 ++++++++++++++++++++++-----------------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/ribbon/js/script.js b/ribbon/js/script.js
index f9b3eea..14a0e27 100644
--- a/ribbon/js/script.js
+++ b/ribbon/js/script.js
@@ -12,62 +12,62 @@ var ribbon_activated = [];
 var number_of_ribbons = ribbon_name.length;
 
 function onLoad() {
-	for (i = 0; i < number_of_ribbons; i++) {
-		var element = document.getElementById("ribbon_selector");
-		var newelement = document.createElement("span")
-		newelement.setAttribute("class", "ribbon-selector-span")
-		if (i <= 1) {
-			newelement.innerHTML = "<div id='ribbons-selector'> <div class='ribbon-card "+ribbon_name[i]+" mdl-card mdl-shadow--2dp'> <div class='mdl-card__title'> <h2 class='mdl-card__title-text'>" + ribbon_name[i] + "<br>&nbsp</h2> </div> <div class='mdl-card__media'> <img src='assets/ribbons/" + ribbon_filename[i] + ".gif' width='154px' height='42px' border='0' alt='' style='padding:10px;'> </div> <div class='mdl-card__supporting-text'> <img src='assets/add.png' onclick='addRibbon(" + i + ");' class='clickable'><img src='assets/subtract.png' onclick='subtractRibbon(" + i + ");' class='clickable'> </div> </div> </div>"
-		} else {
-			newelement.innerHTML = "<div id='ribbons-selector'> <div class='ribbon-card mdl-card mdl-shadow--2dp'> <div class='mdl-card__title'> <h2 class='mdl-card__title-text'>" + ribbon_name[i] + "<br>" + ribbon_filename[i] + "</h2> </div> <div class='mdl-card__media'> <img src='assets/ribbons/" + ribbon_filename[i] + ".gif' width='154px' height='42px' border='0' alt='' style='padding:10px;'> </div> <div class='mdl-card__supporting-text'> <img src='assets/add.png' onclick='addRibbon(" + i + ");' class='clickable'><img src='assets/subtract.png' onclick='subtractRibbon(" + i + ");' class='clickable'> </div> </div> </div>"
-		}
-		element.appendChild(newelement)
-	}
+    for (i = 0; i < number_of_ribbons; i++) {
+        var element = document.getElementById("ribbon_selector");
+        var newelement = document.createElement("span")
+        newelement.setAttribute("class", "ribbon-selector-span")
+        if (i <= 1) {
+            newelement.innerHTML = "<div id='ribbons-selector'> <div class='ribbon-card " + ribbon_name[i] + " mdl-card mdl-shadow--2dp'> <div class='mdl-card__title'> <h2 class='mdl-card__title-text'>" + ribbon_name[i] + "<br>&nbsp</h2> </div> <div class='mdl-card__media'> <img src='assets/ribbons/" + ribbon_filename[i] + ".gif' width='154px' height='42px' border='0' alt='' style='padding:10px;'> </div> <div class='mdl-card__supporting-text'> <img src='assets/add.png' onclick='addRibbon(" + i + ");' class='clickable'><img src='assets/subtract.png' onclick='subtractRibbon(" + i + ");' class='clickable'> </div> </div> </div>"
+        } else {
+            newelement.innerHTML = "<div id='ribbons-selector'> <div class='ribbon-card mdl-card mdl-shadow--2dp'> <div class='mdl-card__title'> <h2 class='mdl-card__title-text'>" + ribbon_name[i] + "<br>" + ribbon_filename[i] + "</h2> </div> <div class='mdl-card__media'> <img src='assets/ribbons/" + ribbon_filename[i] + ".gif' width='154px' height='42px' border='0' alt='' style='padding:10px;'> </div> <div class='mdl-card__supporting-text'> <img src='assets/add.png' onclick='addRibbon(" + i + ");' class='clickable'><img src='assets/subtract.png' onclick='subtractRibbon(" + i + ");' class='clickable'> </div> </div> </div>"
+        }
+        element.appendChild(newelement)
+    }
 }
 
 function addRibbon(number) {
-	ribbon_activated[number] = true;
-	updatePage();
+    ribbon_activated[number] = true;
+    updatePage();
 }
 
 function subtractRibbon(number) {
-	ribbon_activated[number] = false;
-	updatePage();
+    ribbon_activated[number] = false;
+    updatePage();
 }
 
 function updatePage() {
-	document.getElementById("ribbons-display").innerHTML = ""
-	let ribbons = 0
-	for (i = 0; i < number_of_ribbons; i++) {
-		if (ribbon_activated[i] === true) {
-			ribbons++
-			var singles = ribbons % 3
-			var rows = (ribbons - singles) / 3
-			var img = document.createElement("img");
-			img.setAttribute("src", "assets/ribbons/" + ribbon_filename[i] + ".gif");
-			img.setAttribute("width", "33%");
-			img.setAttribute("class", "ribbons")
-      var ribbbonselector = document.getElementById()
-			if (ribbons <= 3) {
-				console.log(rows)
-				img.setAttribute("id",ribbons)
-			}
-			if (singles === 1 && rows !== 0) {
-				document.getElementById("1").setAttribute("style", "display: block;margin: auto;")
-				document.getElementById("3").removeAttribute("style");
-			} else if (singles === 2 && rows !== 0) {
-				document.getElementById("1").removeAttribute("style");
-				document.getElementById("1").setAttribute("width", "34%");
-				document.getElementById("2").setAttribute("width", "34%");
-		//		document.getElementById("1").setAttribute("height", "");
-		//		document.getElementById("2").setAttribute("height", "");
-			} else if (rows > 0) {
-				document.getElementById("1").setAttribute("width","33%");
-				document.getElementById("2").setAttribute("width","33%");
-		//		document.getElementById("1").removeAttribute("height");
-		//		document.getElementById("2").removeAttribute("height");
-			}
-			document.getElementById("ribbons-display").appendChild(img);
-		}
-	}
+    document.getElementById("ribbons-display").innerHTML = ""
+    let ribbons = 0
+    for (i = 0; i < number_of_ribbons; i++) {
+        if (ribbon_activated[i] === true) {
+            ribbons++
+            var singles = ribbons % 3
+            var rows = (ribbons - singles) / 3
+            var img = document.createElement("img");
+            img.setAttribute("src", "assets/ribbons/" + ribbon_filename[i] + ".gif");
+            img.setAttribute("width", "33%");
+            img.setAttribute("class", "ribbons")
+                //var ribbbonselector = document.getElementById()
+            if (ribbons <= 3) {
+                console.log(rows)
+                img.setAttribute("id", ribbons)
+            }
+            if (singles === 1 && rows !== 0) {
+                document.getElementById("1").setAttribute("style", "display: block;margin: auto;")
+                document.getElementById("3").removeAttribute("style");
+            } else if (singles === 2 && rows !== 0) {
+                document.getElementById("1").removeAttribute("style");
+                document.getElementById("1").setAttribute("width", "34%");
+                document.getElementById("2").setAttribute("width", "34%");
+                //		document.getElementById("1").setAttribute("height", "");
+                //		document.getElementById("2").setAttribute("height", "");
+            } else if (rows > 0) {
+                document.getElementById("1").setAttribute("width", "33%");
+                document.getElementById("2").setAttribute("width", "33%");
+                //		document.getElementById("1").removeAttribute("height");
+                //		document.getElementById("2").removeAttribute("height");
+            }
+            document.getElementById("ribbons-display").appendChild(img);
+        }
+    }
 }
\ No newline at end of file