From 28a527a7d5eb24833394b1b6ca1b051e7738a6a8 Mon Sep 17 00:00:00 2001 From: Trent Palmer Date: Thu, 12 Aug 2021 17:23:42 -0700 Subject: [PATCH] add buttons over checks and radios --- templates/base.html | 25 +-- templates/js/buildButton.js | 24 +++ templates/js/buildSelectionMenu.js | 149 +++++++++--------- templates/js/buildSortByDiv.js | 89 ++++++----- .../js/buildTagAndFeatureSelectionInputs.js | 77 +++++---- templates/js/buildThemeTableRow.js | 19 +-- templates/js/getAvailableTagsAndFeatures.js | 30 ++-- templates/js/selectionMenuCollapse.js | 2 +- 8 files changed, 229 insertions(+), 186 deletions(-) create mode 100644 templates/js/buildButton.js diff --git a/templates/base.html b/templates/base.html index 3b1b2b2..a377986 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,7 +4,9 @@ >Hugo Themes Report - +

@@ -15,15 +17,16 @@
- + diff --git a/templates/js/buildButton.js b/templates/js/buildButton.js new file mode 100644 index 0000000..53b16dc --- /dev/null +++ b/templates/js/buildButton.js @@ -0,0 +1,24 @@ +function buildRadioButton( + inputID, + inputName, + inputValue, + sortedBy, + sortedBySelector, + labelText +) { + let result = document.createElement("button"); + + result.style.display = "flex"; + result.style.alignItems = "center"; + result.style.height = "2rem"; + + let inputAttsA = `id=${inputID} type="radio" name=${inputName} value=${inputValue}`; + let inputAttsB = `onclick="buildResults()" style="margin:0 1rem 0 0"`; + let inputAttsC = sortedBy === sortedBySelector ? " checked" : ""; + let resultButtonInput = ``; + + let resultButtonLabel = ``; + + result.innerHTML = `${resultButtonInput}${resultButtonLabel}`; + return result; +} diff --git a/templates/js/buildSelectionMenu.js b/templates/js/buildSelectionMenu.js index c82a96a..bae985f 100644 --- a/templates/js/buildSelectionMenu.js +++ b/templates/js/buildSelectionMenu.js @@ -4,52 +4,49 @@ function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) { tagSelectionHeadingRow.style.maxWidth = "100%"; tagSelectionHeadingRow.style.display = "flex"; tagSelectionHeadingRow.style.justifyContent = "space-around"; + tagSelectionHeadingRow.style.alignItems = "center"; let tagSelectionHeading = document.createElement("h2"); tagSelectionHeading.innerHTML = "Select Tags"; - let tagSortByNameInputDiv = document.createElement("div"); - tagSortByNameInputDiv.style.display = "flex"; - tagSortByNameInputDiv.style.alignItems = "center"; - let tagSortByNameInput = document.createElement("input"); - tagSortByNameInput.type = "radio"; - tagSortByNameInput.id = "tagSortByName"; - tagSortByNameInput.name = "tagSortBy"; - tagSortByNameInput.value = "tagSortByName"; - tagSortByNameInput.checked = tagSortBy === "name" ? true : false; - tagSortByNameInput.onclick = function () { - buildResults(); - }; - tagSortByNameInputDiv.appendChild(tagSortByNameInput); + let tagSortByNameInputButton = buildRadioButton( + (inputID = "tagSortByName"), + (inputName = "tagSortBy"), + (inputValue = "tagSortByName"), + (sortedBy = tagSortBy), + (sortedBySelector = "name"), + (labelText = "Name") + ); - let tagSortByNameInputLabel = document.createElement("label"); - tagSortByNameInputLabel.for = "tagSortByName"; - tagSortByNameInputLabel.innerHTML = "Name"; - tagSortByNameInputDiv.appendChild(tagSortByNameInputLabel); - - let tagSortByNumThemesInputDiv = document.createElement("div"); - tagSortByNumThemesInputDiv.style.display = "flex"; - tagSortByNumThemesInputDiv.style.alignItems = "center"; - let tagSortByNumThemesInput = document.createElement("input"); - tagSortByNumThemesInput.type = "radio"; - tagSortByNumThemesInput.id = "tagSortByNumThemes"; - tagSortByNumThemesInput.name = "tagSortBy"; - tagSortByNumThemesInput.value = "tagSortByNumThemes"; - tagSortByNumThemesInput.checked = tagSortBy === "numThemes" ? true : false; - tagSortByNumThemesInput.onclick = function () { - buildResults(); - }; - tagSortByNumThemesInputDiv.appendChild(tagSortByNumThemesInput); - - let tagSortByNumThemesInputLabel = document.createElement("label"); - tagSortByNumThemesInputLabel.for = "tagSortByNumThemes"; - tagSortByNumThemesInputLabel.innerHTML = "numThemes"; - tagSortByNumThemesInputDiv.appendChild(tagSortByNumThemesInputLabel); + let tagSortByNumThemesInputButton = buildRadioButton( + (inputID = "tagSortByNumThemes"), + (inputName = "tagSortBy"), + (inputValue = "tagSortByNumThemes"), + (sortedBy = tagSortBy), + (sortedBySelector = "numThemes"), + (labelText = "nThemes") + ); tagSelectionHeadingRow.appendChild(tagSelectionHeading); - tagSelectionHeadingRow.appendChild(tagSortByNameInputDiv); - tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputDiv); + tagSelectionHeadingRow.appendChild(tagSortByNameInputButton); + tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputButton); selectionMenuDiv.appendChild(tagSelectionHeadingRow); + + let tagSortByNameInput = document.getElementById("tagSortByName"); + tagSortByNameInputButton.onclick = function () { + if (!tagSortByNameInput.checked) { + tagSortByNameInput.checked = true; + buildResults(); + } + }; + + let tagSortByNumThemesInput = document.getElementById("tagSortByNumThemes"); + tagSortByNumThemesInputButton.onclick = function () { + if (!tagSortByNumThemesInput.checked) { + tagSortByNumThemesInput.checked = true; + buildResults(); + } + }; } function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) { @@ -58,53 +55,51 @@ function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) { featureSelectionHeadingRow.style.maxWidth = "100%"; featureSelectionHeadingRow.style.display = "flex"; featureSelectionHeadingRow.style.justifyContent = "space-around"; + featureSelectionHeadingRow.style.alignItems = "center"; let featureSelectionHeading = document.createElement("h2"); featureSelectionHeading.innerHTML = "Select Features"; - let featureSortByNameInputDiv = document.createElement("div"); - featureSortByNameInputDiv.style.display = "flex"; - featureSortByNameInputDiv.style.alignItems = "center"; - let featureSortByNameInput = document.createElement("input"); - featureSortByNameInput.type = "radio"; - featureSortByNameInput.id = "featureSortByName"; - featureSortByNameInput.name = "featureSortBy"; - featureSortByNameInput.value = "featureSortByName"; - featureSortByNameInput.checked = featureSortBy === "name" ? true : false; - featureSortByNameInput.onclick = function () { - buildResults(); - }; - featureSortByNameInputDiv.appendChild(featureSortByNameInput); + let featureSortByNameInputButton = buildRadioButton( + (inputID = "featureSortByName"), + (inputName = "featureSortBy"), + (inputValue = "featureSortByName"), + (sortedBy = featureSortBy), + (sortedBySelector = "name"), + (labelText = "Name") + ); - let featureSortByNameInputLabel = document.createElement("label"); - featureSortByNameInputLabel.for = "featureSortByName"; - featureSortByNameInputLabel.innerHTML = "Name"; - featureSortByNameInputDiv.appendChild(featureSortByNameInputLabel); - - let featureSortByNumThemesInputDiv = document.createElement("div"); - featureSortByNumThemesInputDiv.style.display = "flex"; - featureSortByNumThemesInputDiv.style.alignItems = "center"; - let featureSortByNumThemesInput = document.createElement("input"); - featureSortByNumThemesInput.type = "radio"; - featureSortByNumThemesInput.id = "featureSortByNumThemes"; - featureSortByNumThemesInput.name = "featureSortBy"; - featureSortByNumThemesInput.value = "featureSortByNumThemes"; - featureSortByNumThemesInput.checked = - featureSortBy === "numThemes" ? true : false; - featureSortByNumThemesInput.onclick = function () { - buildResults(); - }; - featureSortByNumThemesInputDiv.appendChild(featureSortByNumThemesInput); - - let featureSortByNumThemesInputLabel = document.createElement("label"); - featureSortByNumThemesInputLabel.for = "featureSortByNumThemes"; - featureSortByNumThemesInputLabel.innerHTML = "numThemes"; - featureSortByNumThemesInputDiv.appendChild(featureSortByNumThemesInputLabel); + let featureSortByNumThemesInputButton = buildRadioButton( + (inputID = "featureSortByNumThemes"), + (inputName = "featureSortBy"), + (inputValue = "featureSortByNumThemes"), + (sortedBy = featureSortBy), + (sortedBySelector = "numThemes"), + (labelText = "nThemes") + ); featureSelectionHeadingRow.appendChild(featureSelectionHeading); - featureSelectionHeadingRow.appendChild(featureSortByNameInputDiv); - featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputDiv); + featureSelectionHeadingRow.appendChild(featureSortByNameInputButton); + featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputButton); selectionMenuDiv.appendChild(featureSelectionHeadingRow); + + let featureSortByNameInput = document.getElementById("featureSortByName"); + featureSortByNameInputButton.onclick = function () { + if (!featureSortByNameInput.checked) { + featureSortByNameInput.checked = true; + buildResults(); + } + }; + + let featureSortByNumThemesInput = document.getElementById( + "featureSortByNumThemes" + ); + featureSortByNumThemesInputButton.onclick = function () { + if (!featureSortByNumThemesInput.checked) { + featureSortByNumThemesInput.checked = true; + buildResults(); + } + }; } function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) { diff --git a/templates/js/buildSortByDiv.js b/templates/js/buildSortByDiv.js index b74ef3f..cdd5def 100644 --- a/templates/js/buildSortByDiv.js +++ b/templates/js/buildSortByDiv.js @@ -1,53 +1,56 @@ function buildSortByDiv(sortedBy) { - let menuDiv = document.getElementById('selection-menu'); - menuDiv.innerHTML = ''; - menuDiv.style.maxWidth = '100%'; + let menuDiv = document.getElementById("selection-menu"); + menuDiv.innerHTML = ""; + menuDiv.style.maxWidth = "100%"; - let sortByRow = document.createElement('div'); - sortByRow.id = 'sortByRow'; - sortByRow.style.width = '500px'; - sortByRow.style.maxWidth = '100%'; - sortByRow.style.display = 'flex'; - sortByRow.style.justifyContent = 'space-around'; - sortByRow.style.margin = '1rem auto 1rem auto'; + let sortByRow = document.createElement("div"); + sortByRow.id = "sortByRow"; + sortByRow.style.width = "500px"; + sortByRow.style.maxWidth = "100%"; + sortByRow.style.display = "flex"; + sortByRow.style.justifyContent = "space-around"; + sortByRow.style.margin = "1rem auto 1rem auto"; - let sortByPrompt = document.createElement('div'); + let sortByPrompt = document.createElement("div"); + sortByPrompt.style.display = "flex"; + sortByPrompt.style.alignItems = "center"; sortByPrompt.innerHTML = "Sort By:"; sortByRow.appendChild(sortByPrompt); - let sortByStarsDiv = document.createElement('div'); - let sortByStarsInput = document.createElement('input'); - sortByStarsInput.type = 'radio'; - sortByStarsInput.id = 'sortByStars'; - sortByStarsInput.name = 'sortBy'; - sortByStarsInput.value = 'stars'; - sortByStarsInput.checked = sortedBy === 'stars' ? true : false; - sortByStarsInput.onclick = function() { buildResults(); }; - sortByStarsDiv.appendChild(sortByStarsInput); + let sortByStarsButton = buildRadioButton( + (inputID = "sortByStars"), + (inputName = "sortBy"), + (inputValue = "stars"), + (sortedBy = sortedBy), + (sortedBySelector = "stars"), + (labelText = "Stars") + ); - let sortByStarsLabel = document.createElement('label'); - sortByStarsLabel.for = 'stars'; - sortByStarsLabel.innerHTML = 'Stars'; - sortByStarsDiv.appendChild(sortByStarsLabel); - - let sortByLastCommitDiv = document.createElement('div'); - let sortByLastCommitInput = document.createElement('input'); - sortByLastCommitInput.type = 'radio'; - sortByLastCommitInput.id = 'sortByDate'; - sortByLastCommitInput.name = 'sortBy'; - sortByLastCommitInput.value = 'date'; - sortByLastCommitInput.checked = sortedBy === 'date' ? true : false; - sortByLastCommitInput.onclick = function() { buildResults(); }; - sortByLastCommitDiv.appendChild(sortByLastCommitInput); - - let sortByLastCommitLabel = document.createElement('label'); - sortByLastCommitLabel.for = 'date'; - sortByLastCommitLabel.innerHTML = 'Latest Commit Date'; - sortByLastCommitDiv.appendChild(sortByLastCommitLabel); - - - sortByRow.appendChild(sortByStarsDiv); - sortByRow.appendChild(sortByLastCommitDiv); + let sortByLastCommitButton = buildRadioButton( + (inputID = "sortByDate"), + (inputName = "sortBy"), + (inputValue = "date"), + (sortedBy = sortedBy), + (sortedBySelector = "date"), + (labelText = "Latest Commit Date") + ); + sortByRow.appendChild(sortByStarsButton); + sortByRow.appendChild(sortByLastCommitButton); menuDiv.appendChild(sortByRow); + + let sortByStarsInput = document.getElementById("sortByStars"); + sortByStarsButton.onclick = function () { + if (!sortByStarsInput.checked) { + sortByStarsInput.checked = true; + buildResults(); + } + }; + let sortByLastCommitInput = document.getElementById("sortByDate"); + sortByLastCommitButton.onclick = function () { + if (!sortByLastCommitInput.checked) { + sortByLastCommitInput.checked = true; + buildResults(); + } + }; } diff --git a/templates/js/buildTagAndFeatureSelectionInputs.js b/templates/js/buildTagAndFeatureSelectionInputs.js index 56b0e43..2d9eea4 100644 --- a/templates/js/buildTagAndFeatureSelectionInputs.js +++ b/templates/js/buildTagAndFeatureSelectionInputs.js @@ -1,49 +1,68 @@ function buildTagSelectionInput(tag, selected, tagSelectionRow) { - let tagSelectionInputDiv = document.createElement('div'); - tagSelectionInputDiv.style.width = '15rem'; - tagSelectionInputDiv.style.maxWidth = '50%'; - tagSelectionInputDiv.style.marginTop = '.5rem'; - tagSelectionInputDiv.style.marginBottom = '.5rem'; + let tagSelectionInputButton = document.createElement("button"); + tagSelectionInputButton.style.width = "15rem"; + tagSelectionInputButton.style.maxWidth = "50%"; + tagSelectionInputButton.style.margin = ".5rem"; + tagSelectionInputButton.style.display = "flex"; + tagSelectionInputButton.style.alignItems = "center"; - let tagSelectionInput = document.createElement('input'); + let tagSelectionInput = document.createElement("input"); + tagSelectionInput.style.marginRight = "1rem"; tagSelectionInput.type = "checkbox"; tagSelectionInput.id = tag.tag + "-selection-input"; tagSelectionInput.name = tag.tag + "-selection-input"; tagSelectionInput.value = tag.tag; - tagSelectionInput.checked = (selected) ? true : false; - tagSelectionInput.classList.add('tagSelectionInput'); - tagSelectionInput.onclick = function() { buildResults(); }; - tagSelectionInputDiv.appendChild(tagSelectionInput); + tagSelectionInput.checked = selected ? true : false; + tagSelectionInput.classList.add("tagSelectionInput"); + tagSelectionInput.onclick = function () { + buildResults(); + }; + tagSelectionInputButton.appendChild(tagSelectionInput); - let tagSelectionInputLabel = document.createElement('label'); + let tagSelectionInputLabel = document.createElement("label"); + tagSelectionInputLabel.style.textAlign = "left"; tagSelectionInputLabel.for = tag.tag + "-selection-input"; - tagSelectionInputLabel.innerHTML = tag.tag + ' (' + tag.num_themes + ')'; - tagSelectionInputDiv.appendChild(tagSelectionInputLabel); + tagSelectionInputLabel.innerHTML = tag.tag + " (" + tag.num_themes + ")"; + tagSelectionInputButton.appendChild(tagSelectionInputLabel); + tagSelectionInputButton.onclick = function () { + tagSelectionInput.checked = !tagSelectionInput.checked; + buildResults(); + }; - tagSelectionRow.appendChild(tagSelectionInputDiv); + tagSelectionRow.appendChild(tagSelectionInputButton); } function buildFeatureSelectionInput(feature, selected, featureSelectionRow) { - let featureSelectionInputDiv = document.createElement('div'); - featureSelectionInputDiv.style.width = '30rem'; - featureSelectionInputDiv.style.maxWidth = '50%'; - featureSelectionInputDiv.style.marginTop = '.5rem'; - featureSelectionInputDiv.style.marginBottom = '.5rem'; + let featureSelectionInputButton = document.createElement("button"); + featureSelectionInputButton.style.width = "30rem"; + featureSelectionInputButton.style.maxWidth = "50%"; + featureSelectionInputButton.style.margin = ".5rem"; + featureSelectionInputButton.style.display = "flex"; + featureSelectionInputButton.style.alignItems = "center"; - let featureSelectionInput = document.createElement('input'); + let featureSelectionInput = document.createElement("input"); + featureSelectionInput.style.marginRight = "1rem"; featureSelectionInput.type = "checkbox"; featureSelectionInput.id = feature.feature + "-selection-input"; featureSelectionInput.name = feature.feature + "-selection-input"; featureSelectionInput.value = feature.feature; - featureSelectionInput.checked = (selected) ? true : false; - featureSelectionInput.classList.add('featureSelectionInput'); - featureSelectionInput.onclick = function() { buildResults(); }; - featureSelectionInputDiv.appendChild(featureSelectionInput); + featureSelectionInput.checked = selected ? true : false; + featureSelectionInput.classList.add("featureSelectionInput"); + featureSelectionInput.onclick = function () { + buildResults(); + }; + featureSelectionInputButton.appendChild(featureSelectionInput); - let featureSelectionInputLabel = document.createElement('label'); - featureSelectionInputLabel.for = feature.feature + "-selection-input"; - featureSelectionInputLabel.innerHTML = feature.feature + ' (' + feature.num_themes + ')'; - featureSelectionInputDiv.appendChild(featureSelectionInputLabel); + let featureSelectionInputLabel = document.createElement("label"); + featureSelectionInputLabel.style.textAlign = "left"; + featureSelectionInputLabel.for = feature.feature + "-selection-input"; + featureSelectionInputLabel.innerHTML = + feature.feature + " (" + feature.num_themes + ")"; + featureSelectionInputButton.appendChild(featureSelectionInputLabel); + featureSelectionInputButton.onclick = function () { + featureSelectionInput.checked = !featureSelectionInput.checked; + buildResults(); + }; - featureSelectionRow.appendChild(featureSelectionInputDiv); + featureSelectionRow.appendChild(featureSelectionInputButton); } diff --git a/templates/js/buildThemeTableRow.js b/templates/js/buildThemeTableRow.js index 12a40b4..147d54a 100644 --- a/templates/js/buildThemeTableRow.js +++ b/templates/js/buildThemeTableRow.js @@ -1,18 +1,19 @@ function addThemeTableRow(theme) { - let resultsTable = document.getElementById('resultsTable'); + let resultsTable = document.getElementById("resultsTable"); let resultsTableRow = document.createElement("tr"); let themeTD = document.createElement("td"); - themeTD.innerHTML = '' + theme.short_name + ''; - themeTD.style.whiteSpace = 'nowrap'; - themeTD.style.overFlow = 'hidden'; - themeTD.style.width = '20%'; + themeTD.innerHTML = + '' + theme.short_name + ""; + themeTD.style.whiteSpace = "nowrap"; + themeTD.style.overFlow = "hidden"; + themeTD.style.width = "20%"; resultsTableRow.appendChild(themeTD); let dateTD = document.createElement("td"); dateTD.innerHTML = theme.date; - dateTD.style.textAlign = 'center'; - dateTD.style.minWidth = '8rem'; + dateTD.style.textAlign = "center"; + dateTD.style.minWidth = "8rem"; resultsTableRow.appendChild(dateTD); let starsTD = document.createElement("td"); @@ -21,8 +22,8 @@ function addThemeTableRow(theme) { let commitTD = document.createElement("td"); commitTD.innerHTML = theme.commit; - commitTD.style.minWidth = '7rem'; + commitTD.style.minWidth = "7rem"; resultsTableRow.appendChild(commitTD); resultsTable.appendChild(resultsTableRow); -}; +} diff --git a/templates/js/getAvailableTagsAndFeatures.js b/templates/js/getAvailableTagsAndFeatures.js index 06f5674..5145262 100644 --- a/templates/js/getAvailableTagsAndFeatures.js +++ b/templates/js/getAvailableTagsAndFeatures.js @@ -1,24 +1,24 @@ function getAvailableFeatures(sorted_themes, featureSortBy) { let result = []; - sorted_themes.forEach(x => { - x.features.forEach(feature => { + sorted_themes.forEach((x) => { + x.features.forEach((feature) => { if (result.length === 0) { - result.push({'feature': feature, 'num_themes': 1}); + result.push({ feature: feature, num_themes: 1 }); } else { - let features_in_result = result.map(y => y.feature); + let features_in_result = result.map((y) => y.feature); if (features_in_result.includes(feature)) { - result.forEach(w => { + result.forEach((w) => { if (w.feature === feature) { w.num_themes += 1; } }); } else { - result.push({'feature': feature, 'num_themes': 1}); + result.push({ feature: feature, num_themes: 1 }); } } }); }); - if (featureSortBy === 'numThemes') { + if (featureSortBy === "numThemes") { return result .sort((a, b) => a.feature.localeCompare(b.feature)) .sort((a, b) => b.num_themes - a.num_themes); @@ -29,25 +29,25 @@ function getAvailableFeatures(sorted_themes, featureSortBy) { function getAvailableTags(sorted_themes, tagSortBy) { let result = []; - sorted_themes.forEach(x => { - x.tags.forEach(tag => { + sorted_themes.forEach((x) => { + x.tags.forEach((tag) => { if (result.length === 0) { - result.push({'tag': tag, 'num_themes': 1}); + result.push({ tag: tag, num_themes: 1 }); } else { - let tags_in_result = result.map(y => y.tag); + let tags_in_result = result.map((y) => y.tag); if (tags_in_result.includes(tag)) { - result.forEach(w => { + result.forEach((w) => { if (w.tag === tag) { w.num_themes += 1; } }); } else { - result.push({'tag': tag, 'num_themes': 1}); + result.push({ tag: tag, num_themes: 1 }); } } }); }); - if (tagSortBy === 'numThemes') { + if (tagSortBy === "numThemes") { return result .sort((a, b) => a.tag.localeCompare(b.tag)) .sort((a, b) => b.num_themes - a.num_themes); @@ -55,5 +55,3 @@ function getAvailableTags(sorted_themes, tagSortBy) { return result.sort((a, b) => a.tag.localeCompare(b.tag)); } } - - diff --git a/templates/js/selectionMenuCollapse.js b/templates/js/selectionMenuCollapse.js index 51b3c1b..31c4f42 100644 --- a/templates/js/selectionMenuCollapse.js +++ b/templates/js/selectionMenuCollapse.js @@ -1,6 +1,6 @@ var menuButton = document.getElementById("selection-button"); -menuButton.addEventListener("click", function() { +menuButton.addEventListener("click", function () { menuButton.classList.toggle("active"); var selectionMenu = document.getElementById("selection-menu"); if (selectionMenu.style.display === "block") {