Skip to content

Commit

Permalink
cleaning up some annoying UI bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@windoverwater
windoverwater committed Feb 29, 2024
1 parent 21c6a9b commit afb2f43
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 31 deletions.
2 changes: 1 addition & 1 deletion Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,4 @@ default:
# emacs tags (for javascript need GNU's universal-ctag package)
.PHONY: etags
etags:
/opt/homebrew/bin/ctags -e -R
/opt/homebrew/bin/ctags -e -R --language-force=javascript
70 changes: 40 additions & 30 deletions voting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,19 +154,20 @@
}

// Will set up the upperSection
function setUpperSection(contestType, maxSelection) {
function setUpperSection(thisContestName, thisContestValue) {
const rootElement = document.getElementById("upperSection");
const newItem = document.createElement("span");
if (contestType == "plurality") {
let innerText = "<h2>A plurality contest:</h2><ul><li>Make you selection by clicking. Click again to unselect.</li>";
if (maxSelection == 1) {
const max = thisContestValue.max;
if (thisContestValue.tally == "plurality") {
let innerText = "<h2>" + thisContestName + "</h2><h3>A plurality contest:</h3><ul><li>Make you selection by clicking. Click again to unselect.</li>";
if (max == 1) {
innerText += "<li>You can only make one selection</li></ul>";
} else {
innerText += "<li>You can choose upto " + maxSelection + "</li></ul>";
innerText += "<li>You can choose upto " + max + "</li></ul>";
}
newItem.innerHTML = innerText;
} else {
innerText = `<h2>A RCV (IRV) contest:</h2>
innerText = "<h2>" + thisContestName + `</h2><h3> RCV (IRV) contest:</h3>
<ul>
<li>Clicking a candidate will add it to your RCV</li>
<li>Your RCV selection is re-orderable by drag-and-drop</li>
Expand All @@ -183,12 +184,12 @@ <h2>Your RCV selection:</h2>
}

// Will set up the lowerSection
function setLowerSection(choiceType) {
function setLowerSection(thisContestValue) {
const rootElement = document.getElementById("lowerSection");
const newItem = document.createElement("span");
if (choiceType == "ticket") {
newItem.innerHTML = "<h2>Candidates:</h2>";
} else if (choiceType == "question") {
if (thisContestValue.contest_type == "ticket") {
newItem.innerHTML = "<h3>Candidates:</h3>";
} else if (thisContestValue.contest_type == "question") {
newItem.innerHTML = "<h2>Your selection:</h2>";
} else {
newItem.innerHTML = "<h2>Candidates:</h2>";
Expand All @@ -200,9 +201,12 @@ <h2>Your RCV selection:</h2>
}

// Setup the choiceList
function setupChoiceList(choices, choiceType, ticketTitles) {
function setupChoiceList(thisContestName, thisContestValue, overrideChoice=null) {
const rootElement = document.getElementById("choiceList");
for (let choice of choices) {
for (let choice of thisContestValue.choices) {
if (overrideChoice) {
choice = overrideChoice;
}
const newItem = document.createElement("li");
newItem.classList.add("flex-item"); // Apply a class for styling

Expand All @@ -216,12 +220,18 @@ <h2>Your RCV selection:</h2>

// Create the text element
const textElement = document.createElement("span");
textElement.textContent = choice.name;
if (choiceType == "ticket") {
// Ugh - need to inspect for the choices data type
if (choice.name) {
textElement.textContent = choice.name;
} else {
// Just an array of strings
textElement.textContent = choice;
}
if (thisContestValue.contest_type == "ticket") {
// Note - need to add this as an additional flex-box
// so that the 'name' matches the choice
let addendum = [];
for (let office of ticketTitles) {
for (let office of thisContestValue.ticket_offices) {
addendum.push(office + ":" + choice.ticket_names);
}
textElement.textContent += "[" + addendum.join(", ") + "]";
Expand All @@ -233,6 +243,10 @@ <h2>Your RCV selection:</h2>
newItem.appendChild(svgIcon);
newItem.appendChild(textElement);
rootElement.appendChild(newItem);

if (overrideChoice) {
break;
}
}
}

Expand Down Expand Up @@ -298,7 +312,7 @@ <h2>Your RCV selection:</h2>
}

// RCV event listeners
function setupRCVEventListeners(maxCount) {
function setupRCVEventListeners(thisContestName, thisContestValue) {
console.log("Running setupRCVEventListeners:");
// Event listener for selection in the first list (when a candidate is selected)
console.log("Running setupRCVEventListeners:");
Expand All @@ -316,14 +330,12 @@ <h2>Your RCV selection:</h2>
// add an event listener to the button
newButton.addEventListener("click", function (e) {
console.log("Running RCV eventListener:");
var itemName = e.target.parentNode.textContent.trim().replace(/ remove$/, "");;
let itemName = e.target.parentNode.textContent.trim().replace(/ remove$/, "");
console.log("removing:", itemName);
// remove it from sortableList
e.target.parentNode.remove();
// add to choiceList
const listItem = document.createElement("li");
listItem.textContent = itemName;
choiceList.appendChild(listItem);
setupChoiceList(thisContestName, thisContestValue, itemName);
});

// Create a re-order glyph
Expand Down Expand Up @@ -359,7 +371,7 @@ <h2>Your RCV selection:</h2>
}

// plurality event listeners
function setupPluralityEventListeners(maxCount) {
function setupPluralityEventListeners(thisContestName, thisContestValue) {
console.log("Running setupPluralityEventListeners:");
let selectedCount = 0;
choiceList.addEventListener("click", (event) => {
Expand All @@ -376,7 +388,7 @@ <h2>Your RCV selection:</h2>
selectedCount--;
// get the svg (first child) and set fill to off
console.log("de-selected " + itemIndex + ", " + itemText);
} else if (selectedCount < maxCount) {
} else if (selectedCount < thisContestValue.max) {
// Select the item (up to maxSelection selections allowed)
listItem.classList.add("selected");
listItem.classList.remove("unselected");
Expand Down Expand Up @@ -444,10 +456,8 @@ <h2>Your RCV selection:</h2>
setActiveContest(thisContest);

// Setup the upper and lower sections
let contestType = thisContestValue.tally;
let choiceType = thisContestValue.contest_type;
setUpperSection(contestType, thisContestValue.max);
setLowerSection(choiceType);
setUpperSection(thisContestName, thisContestValue);
setLowerSection(thisContestValue);

// Note - for the moment let these be globals (until we know more).
// Regardless, the upper/lower setup will make sure choiceList and
Expand All @@ -457,11 +467,11 @@ <h2>Your RCV selection:</h2>
removeButtons = document.getElementsByClassName("remove");

// Setup the choiceList
setupChoiceList(thisContestValue.choices, choiceType, thisContestValue.ticket_offices);
if (contestType == "plurality") {
setupPluralityEventListeners(thisContestValue.max);
setupChoiceList(thisContestName, thisContestValue);
if (thisContestValue.tally == "plurality") {
setupPluralityEventListeners(thisContestName, thisContestValue);
} else {
setupRCVEventListeners(thisContestValue.max);
setupRCVEventListeners(thisContestName, thisContestValue);
}

// Setup the bottomSection - this supplies simply "next context/checkout"
Expand Down

0 comments on commit afb2f43

Please sign in to comment.