Fixed the Ribbon Rack Builder
This commit is contained in:
+49
-49
@@ -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> </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> </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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user