Skip to content

Commit

Permalink
getting RCV to restore selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@windoverwater
windoverwater committed Mar 5, 2024
1 parent 16d3ce5 commit de79af6
Showing 1 changed file with 68 additions and 57 deletions.
125 changes: 68 additions & 57 deletions voting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,64 +351,68 @@ <h3>Your RCV selection:</h3>
}
}

// The RCV heavy lifter
function updateRCVContest(selectedItem, thisContestName, thisContestValue) {
// Create a new selected item with a remove button
const selectedText = selectedItem.textContent;
const newItem = document.createElement("li");
newItem.classList.add("flex-item"); // Apply a class for styling

// Create a remove button
const newButton = document.createElement("button");
newButton.innerText = "remove";
newButton.classList.add("remove");
// add an event listener to the button
newButton.addEventListener("click", function (e) {
let itemName = e.target.parentNode.textContent.trim().replace(/\s+remove$/, "");
e.target.parentNode.classList.remove("selected");
console.log("Remove button eventListener: removing '" + itemName + "' (parentNode=" + e.target.parentNode.innerText + ")");
// remove it from sortableList
e.target.parentNode.remove();
// add to choiceList
setupChoiceList(thisContestName, thisContestValue, itemName);
});

// Create a re-order glyph
const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgIcon.setAttribute("width", "20");
svgIcon.setAttribute("height", "20");
svgIcon.setAttribute("viewBox", "0 -4 16 16");
// svgIcon.setAttribute("preserveAspectRatio", "xMidYMid meet");
svgIcon.setAttribute("fill", "currentColor");
svgIcon.setAttribute("fill-rule", "evenodd");
svgIcon.setAttribute("clip-rule", "evenodd");
// the actual svg
svgIcon.innerHTML = `<path d="M2.49998 4.09998C2.27906 4.09998 2.09998 4.27906 2.09998 4.49998C2.09998 4.72089 2.27906 4.89998 2.49998 4.89998H12.5C12.7209 4.89998 12.9 4.72089 12.9 4.49998C12.9 4.27906 12.7209 4.09998 12.5 4.09998H2.49998ZM2.49998 6.09998C2.27906 6.09998 2.09998 6.27906 2.09998 6.49998C2.09998 6.72089 2.27906 6.89998 2.49998 6.89998H12.5C12.7209 6.89998 12.9 6.72089 12.9 6.49998C12.9 6.27906 12.7209 6.09998 12.5 6.09998H2.49998ZM2.09998 8.49998C2.09998 8.27906 2.27906 8.09998 2.49998 8.09998H12.5C12.7209 8.09998 12.9 8.27906 12.9 8.49998C12.9 8.72089 12.7209 8.89998 12.5 8.89998H2.49998C2.27906 8.89998 2.09998 8.72089 2.09998 8.49998ZM2.49998 10.1C2.27906 10.1 2.09998 10.2791 2.09998 10.5C2.09998 10.7209 2.27906 10.9 2.49998 10.9H12.5C12.7209 10.9 12.9 10.7209 12.9 10.5C12.9 10.2791 12.7209 10.1 12.5 10.1H2.49998Z"/>`;

// Create the text element
const textElement = document.createElement("span");
textElement.innerText = selectedText;
textElement.innerHTML += extraSpace;

// Append everything to the li node
newItem.appendChild(svgIcon);
newItem.appendChild(textElement);
newItem.appendChild(newButton);

// Add the class to the li node
newItem.classList.add("selected");
// ... and append that to the bottom of sortableList
sortableList.appendChild(newItem);
// Remove the containing li for the selected item from the first list
selectedItem.remove();
// Initialize the sortable list
initSortableList(document.getElementById("sortableList"));
}

// RCV event listeners
function setupRCVEventListeners(thisContestName, thisContestValue) {
// Event listener for selection in the first list (when a candidate is selected)
choiceList.addEventListener("click", (event) => {
if (event.target.closest("li") && event.target.closest("li").classList.contains("unselected")) {
console.log("Running RCV eventListener:");
// Create a new selected item with a remove button
const selectedText = event.target.closest("li").textContent;
const newItem = document.createElement("li");
newItem.classList.add("flex-item"); // Apply a class for styling

// Create a remove button
const newButton = document.createElement("button");
newButton.innerText = "remove";
newButton.classList.add("remove");
// add an event listener to the button
newButton.addEventListener("click", function (e) {
let itemName = e.target.parentNode.textContent.trim().replace(/\s+remove$/, "");
e.target.parentNode.classList.remove("selected");
console.log("Remove button eventListener: removing '" + itemName + "' (parentNode=" + e.target.parentNode.innerText + ")");
// remove it from sortableList
e.target.parentNode.remove();
// add to choiceList
setupChoiceList(thisContestName, thisContestValue, itemName);
});

// Create a re-order glyph
const svgIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgIcon.setAttribute("width", "20");
svgIcon.setAttribute("height", "20");
svgIcon.setAttribute("viewBox", "0 -4 16 16");
// svgIcon.setAttribute("preserveAspectRatio", "xMidYMid meet");
svgIcon.setAttribute("fill", "currentColor");
svgIcon.setAttribute("fill-rule", "evenodd");
svgIcon.setAttribute("clip-rule", "evenodd");
// the actual svg
svgIcon.innerHTML = `<path d="M2.49998 4.09998C2.27906 4.09998 2.09998 4.27906 2.09998 4.49998C2.09998 4.72089 2.27906 4.89998 2.49998 4.89998H12.5C12.7209 4.89998 12.9 4.72089 12.9 4.49998C12.9 4.27906 12.7209 4.09998 12.5 4.09998H2.49998ZM2.49998 6.09998C2.27906 6.09998 2.09998 6.27906 2.09998 6.49998C2.09998 6.72089 2.27906 6.89998 2.49998 6.89998H12.5C12.7209 6.89998 12.9 6.72089 12.9 6.49998C12.9 6.27906 12.7209 6.09998 12.5 6.09998H2.49998ZM2.09998 8.49998C2.09998 8.27906 2.27906 8.09998 2.49998 8.09998H12.5C12.7209 8.09998 12.9 8.27906 12.9 8.49998C12.9 8.72089 12.7209 8.89998 12.5 8.89998H2.49998C2.27906 8.89998 2.09998 8.72089 2.09998 8.49998ZM2.49998 10.1C2.27906 10.1 2.09998 10.2791 2.09998 10.5C2.09998 10.7209 2.27906 10.9 2.49998 10.9H12.5C12.7209 10.9 12.9 10.7209 12.9 10.5C12.9 10.2791 12.7209 10.1 12.5 10.1H2.49998Z"/>`;

// Create the text element
const textElement = document.createElement("span");
textElement.innerText = selectedText;
textElement.innerHTML += extraSpace;

// Append everything to the li node
newItem.appendChild(svgIcon);
newItem.appendChild(textElement);
newItem.appendChild(newButton);

// Add the class to the li node
newItem.classList.add("selected");
// ... and append that to the bottom of sortableList
sortableList.appendChild(newItem);

// Remove the containing li for the selected item from the first list
event.target.closest("li").remove();

// Initialize the sortable list
initSortableList(document.getElementById("sortableList"));
// Update the RCV contest
updateRCVContest(event.target.closest("li"), thisContestName, thisContestValue);
}
});
}
Expand Down Expand Up @@ -660,16 +664,23 @@ <h3>Your RCV selection:</h3>
// everything out, so to restore we only need to add the classes
// to the correct li
if (thisContestValue.selection) {
// loop over selection in order
for (const selection of thisContestValue.selection) {
const indexName = splitSelection(selection);
// Find the choice in choiceList that matches
for (const choice of choiceList.children) {
if (choice.getAttribute("thename") == indexName[1]) {
choice.classList.add("selected");
choice.classList.remove("unselected");
// get the svg (first child) and set fill to on (black)
choice.firstElementChild.style.fill = "black"
selectedCount++;
if (thisContestValue.tally == "plurality") {
// plurality is easier enough to manually update
choice.classList.add("selected");
choice.classList.remove("unselected");
// get the svg (first child) and set fill to on (black)
choice.firstElementChild.style.fill = "black"
selectedCount++;
} else {
// Need to manually update the RCV contest
updateRCVContest(choice, thisContestName, thisContestValue)
}
console.log("restored " + indexName[0] + ", " + indexName[1]);
}
}
Expand Down

0 comments on commit de79af6

Please sign in to comment.