trent/hugo_themes_report
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/hugo_themes_report.git synced 2024-12-04 16:41:31 -08:00
Code Issues Projects Releases Wiki Activity

add buttons over checks and radios

Browse Source
This commit is contained in:
Trent Palmer 2021-08-12 17:23:42 -07:00
parent 223c3f2196
commit 28a527a7d5
8 changed files with 229 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
templates/base.html
View File

@ -4,7 +4,9 @@
<title>>Hugo Themes Report</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>{% include 'css/main.css' %}</style>
<style>
{% include 'css/main.css' %}
</style>
</head>
<body>
<h1 id="title">
@ -15,15 +17,16 @@
</div>
<div id="results">
</div>
<script>
var themes = {{ themes }};
{% include 'js/selectionMenuCollapse.js' %}
{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
{% include 'js/getAvailableTagsAndFeatures.js' %}
{% include 'js/buildSortByDiv.js' %}
{% include 'js/buildSelectionMenu.js' %}
{% include 'js/buildThemeTableRow.js' %}
{% include 'js/buildPage.js' %}
</script>
<script>
var themes = {{ themes }};
{% include 'js/selectionMenuCollapse.js' %}
{% include 'js/buildButton.js' %}
{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
{% include 'js/getAvailableTagsAndFeatures.js' %}
{% include 'js/buildSortByDiv.js' %}
{% include 'js/buildSelectionMenu.js' %}
{% include 'js/buildThemeTableRow.js' %}
{% include 'js/buildPage.js' %}
</script>
</body>
</html>

24
templates/js/buildButton.js Normal file
View File

@ -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 = `<input ${inputAttsA} ${inputAttsB} ${inputAttsC}/>`;
let resultButtonLabel = `<label for=${inputID}>${labelText}</label>`;
result.innerHTML = `${resultButtonInput}${resultButtonLabel}`;
return result;
}

149
templates/js/buildSelectionMenu.js
View File

@ -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) {

89
templates/js/buildSortByDiv.js
View File

@ -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();
}
};
}

77
templates/js/buildTagAndFeatureSelectionInputs.js
View File

@ -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);
}

19
templates/js/buildThemeTableRow.js
View File

@ -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 = '<a href="' + theme.url + '" target="_blank">' + theme.short_name + '</a>';
themeTD.style.whiteSpace = 'nowrap';
themeTD.style.overFlow = 'hidden';
themeTD.style.width = '20%';
themeTD.innerHTML =
'<a href="' + theme.url + '" target="_blank">' + theme.short_name + "</a>";
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);
};
}

30
templates/js/getAvailableTagsAndFeatures.js
View File

@ -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));
}
}

2
templates/js/selectionMenuCollapse.js
View File

@ -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") {