mirror of
https://github.com/TrentSPalmer/hugo_themes_report.git
synced 2025-04-07 15:47:06 -07:00
add buttons over checks and radios
This commit is contained in:
parent
223c3f2196
commit
28a527a7d5
@ -4,7 +4,9 @@
|
|||||||
<title>>Hugo Themes Report</title>
|
<title>>Hugo Themes Report</title>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
<meta name='viewport' content='width=device-width, initial-scale=1'>
|
||||||
<style>{% include 'css/main.css' %}</style>
|
<style>
|
||||||
|
{% include 'css/main.css' %}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 id="title">
|
<h1 id="title">
|
||||||
@ -15,15 +17,16 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="results">
|
<div id="results">
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
var themes = {{ themes }};
|
var themes = {{ themes }};
|
||||||
{% include 'js/selectionMenuCollapse.js' %}
|
{% include 'js/selectionMenuCollapse.js' %}
|
||||||
{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
|
{% include 'js/buildButton.js' %}
|
||||||
{% include 'js/getAvailableTagsAndFeatures.js' %}
|
{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
|
||||||
{% include 'js/buildSortByDiv.js' %}
|
{% include 'js/getAvailableTagsAndFeatures.js' %}
|
||||||
{% include 'js/buildSelectionMenu.js' %}
|
{% include 'js/buildSortByDiv.js' %}
|
||||||
{% include 'js/buildThemeTableRow.js' %}
|
{% include 'js/buildSelectionMenu.js' %}
|
||||||
{% include 'js/buildPage.js' %}
|
{% include 'js/buildThemeTableRow.js' %}
|
||||||
</script>
|
{% include 'js/buildPage.js' %}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
24
templates/js/buildButton.js
Normal file
24
templates/js/buildButton.js
Normal 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;
|
||||||
|
}
|
@ -4,52 +4,49 @@ function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) {
|
|||||||
tagSelectionHeadingRow.style.maxWidth = "100%";
|
tagSelectionHeadingRow.style.maxWidth = "100%";
|
||||||
tagSelectionHeadingRow.style.display = "flex";
|
tagSelectionHeadingRow.style.display = "flex";
|
||||||
tagSelectionHeadingRow.style.justifyContent = "space-around";
|
tagSelectionHeadingRow.style.justifyContent = "space-around";
|
||||||
|
tagSelectionHeadingRow.style.alignItems = "center";
|
||||||
|
|
||||||
let tagSelectionHeading = document.createElement("h2");
|
let tagSelectionHeading = document.createElement("h2");
|
||||||
tagSelectionHeading.innerHTML = "Select Tags";
|
tagSelectionHeading.innerHTML = "Select Tags";
|
||||||
|
|
||||||
let tagSortByNameInputDiv = document.createElement("div");
|
let tagSortByNameInputButton = buildRadioButton(
|
||||||
tagSortByNameInputDiv.style.display = "flex";
|
(inputID = "tagSortByName"),
|
||||||
tagSortByNameInputDiv.style.alignItems = "center";
|
(inputName = "tagSortBy"),
|
||||||
let tagSortByNameInput = document.createElement("input");
|
(inputValue = "tagSortByName"),
|
||||||
tagSortByNameInput.type = "radio";
|
(sortedBy = tagSortBy),
|
||||||
tagSortByNameInput.id = "tagSortByName";
|
(sortedBySelector = "name"),
|
||||||
tagSortByNameInput.name = "tagSortBy";
|
(labelText = "Name")
|
||||||
tagSortByNameInput.value = "tagSortByName";
|
);
|
||||||
tagSortByNameInput.checked = tagSortBy === "name" ? true : false;
|
|
||||||
tagSortByNameInput.onclick = function () {
|
|
||||||
buildResults();
|
|
||||||
};
|
|
||||||
tagSortByNameInputDiv.appendChild(tagSortByNameInput);
|
|
||||||
|
|
||||||
let tagSortByNameInputLabel = document.createElement("label");
|
let tagSortByNumThemesInputButton = buildRadioButton(
|
||||||
tagSortByNameInputLabel.for = "tagSortByName";
|
(inputID = "tagSortByNumThemes"),
|
||||||
tagSortByNameInputLabel.innerHTML = "Name";
|
(inputName = "tagSortBy"),
|
||||||
tagSortByNameInputDiv.appendChild(tagSortByNameInputLabel);
|
(inputValue = "tagSortByNumThemes"),
|
||||||
|
(sortedBy = tagSortBy),
|
||||||
let tagSortByNumThemesInputDiv = document.createElement("div");
|
(sortedBySelector = "numThemes"),
|
||||||
tagSortByNumThemesInputDiv.style.display = "flex";
|
(labelText = "nThemes")
|
||||||
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);
|
|
||||||
|
|
||||||
tagSelectionHeadingRow.appendChild(tagSelectionHeading);
|
tagSelectionHeadingRow.appendChild(tagSelectionHeading);
|
||||||
tagSelectionHeadingRow.appendChild(tagSortByNameInputDiv);
|
tagSelectionHeadingRow.appendChild(tagSortByNameInputButton);
|
||||||
tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputDiv);
|
tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputButton);
|
||||||
selectionMenuDiv.appendChild(tagSelectionHeadingRow);
|
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) {
|
function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) {
|
||||||
@ -58,53 +55,51 @@ function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) {
|
|||||||
featureSelectionHeadingRow.style.maxWidth = "100%";
|
featureSelectionHeadingRow.style.maxWidth = "100%";
|
||||||
featureSelectionHeadingRow.style.display = "flex";
|
featureSelectionHeadingRow.style.display = "flex";
|
||||||
featureSelectionHeadingRow.style.justifyContent = "space-around";
|
featureSelectionHeadingRow.style.justifyContent = "space-around";
|
||||||
|
featureSelectionHeadingRow.style.alignItems = "center";
|
||||||
|
|
||||||
let featureSelectionHeading = document.createElement("h2");
|
let featureSelectionHeading = document.createElement("h2");
|
||||||
featureSelectionHeading.innerHTML = "Select Features";
|
featureSelectionHeading.innerHTML = "Select Features";
|
||||||
|
|
||||||
let featureSortByNameInputDiv = document.createElement("div");
|
let featureSortByNameInputButton = buildRadioButton(
|
||||||
featureSortByNameInputDiv.style.display = "flex";
|
(inputID = "featureSortByName"),
|
||||||
featureSortByNameInputDiv.style.alignItems = "center";
|
(inputName = "featureSortBy"),
|
||||||
let featureSortByNameInput = document.createElement("input");
|
(inputValue = "featureSortByName"),
|
||||||
featureSortByNameInput.type = "radio";
|
(sortedBy = featureSortBy),
|
||||||
featureSortByNameInput.id = "featureSortByName";
|
(sortedBySelector = "name"),
|
||||||
featureSortByNameInput.name = "featureSortBy";
|
(labelText = "Name")
|
||||||
featureSortByNameInput.value = "featureSortByName";
|
);
|
||||||
featureSortByNameInput.checked = featureSortBy === "name" ? true : false;
|
|
||||||
featureSortByNameInput.onclick = function () {
|
|
||||||
buildResults();
|
|
||||||
};
|
|
||||||
featureSortByNameInputDiv.appendChild(featureSortByNameInput);
|
|
||||||
|
|
||||||
let featureSortByNameInputLabel = document.createElement("label");
|
let featureSortByNumThemesInputButton = buildRadioButton(
|
||||||
featureSortByNameInputLabel.for = "featureSortByName";
|
(inputID = "featureSortByNumThemes"),
|
||||||
featureSortByNameInputLabel.innerHTML = "Name";
|
(inputName = "featureSortBy"),
|
||||||
featureSortByNameInputDiv.appendChild(featureSortByNameInputLabel);
|
(inputValue = "featureSortByNumThemes"),
|
||||||
|
(sortedBy = featureSortBy),
|
||||||
let featureSortByNumThemesInputDiv = document.createElement("div");
|
(sortedBySelector = "numThemes"),
|
||||||
featureSortByNumThemesInputDiv.style.display = "flex";
|
(labelText = "nThemes")
|
||||||
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);
|
|
||||||
|
|
||||||
featureSelectionHeadingRow.appendChild(featureSelectionHeading);
|
featureSelectionHeadingRow.appendChild(featureSelectionHeading);
|
||||||
featureSelectionHeadingRow.appendChild(featureSortByNameInputDiv);
|
featureSelectionHeadingRow.appendChild(featureSortByNameInputButton);
|
||||||
featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputDiv);
|
featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputButton);
|
||||||
selectionMenuDiv.appendChild(featureSelectionHeadingRow);
|
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) {
|
function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) {
|
||||||
|
@ -1,53 +1,56 @@
|
|||||||
function buildSortByDiv(sortedBy) {
|
function buildSortByDiv(sortedBy) {
|
||||||
let menuDiv = document.getElementById('selection-menu');
|
let menuDiv = document.getElementById("selection-menu");
|
||||||
menuDiv.innerHTML = '';
|
menuDiv.innerHTML = "";
|
||||||
menuDiv.style.maxWidth = '100%';
|
menuDiv.style.maxWidth = "100%";
|
||||||
|
|
||||||
let sortByRow = document.createElement('div');
|
let sortByRow = document.createElement("div");
|
||||||
sortByRow.id = 'sortByRow';
|
sortByRow.id = "sortByRow";
|
||||||
sortByRow.style.width = '500px';
|
sortByRow.style.width = "500px";
|
||||||
sortByRow.style.maxWidth = '100%';
|
sortByRow.style.maxWidth = "100%";
|
||||||
sortByRow.style.display = 'flex';
|
sortByRow.style.display = "flex";
|
||||||
sortByRow.style.justifyContent = 'space-around';
|
sortByRow.style.justifyContent = "space-around";
|
||||||
sortByRow.style.margin = '1rem auto 1rem auto';
|
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:";
|
sortByPrompt.innerHTML = "Sort By:";
|
||||||
sortByRow.appendChild(sortByPrompt);
|
sortByRow.appendChild(sortByPrompt);
|
||||||
|
|
||||||
let sortByStarsDiv = document.createElement('div');
|
let sortByStarsButton = buildRadioButton(
|
||||||
let sortByStarsInput = document.createElement('input');
|
(inputID = "sortByStars"),
|
||||||
sortByStarsInput.type = 'radio';
|
(inputName = "sortBy"),
|
||||||
sortByStarsInput.id = 'sortByStars';
|
(inputValue = "stars"),
|
||||||
sortByStarsInput.name = 'sortBy';
|
(sortedBy = sortedBy),
|
||||||
sortByStarsInput.value = 'stars';
|
(sortedBySelector = "stars"),
|
||||||
sortByStarsInput.checked = sortedBy === 'stars' ? true : false;
|
(labelText = "Stars")
|
||||||
sortByStarsInput.onclick = function() { buildResults(); };
|
);
|
||||||
sortByStarsDiv.appendChild(sortByStarsInput);
|
|
||||||
|
|
||||||
let sortByStarsLabel = document.createElement('label');
|
let sortByLastCommitButton = buildRadioButton(
|
||||||
sortByStarsLabel.for = 'stars';
|
(inputID = "sortByDate"),
|
||||||
sortByStarsLabel.innerHTML = 'Stars';
|
(inputName = "sortBy"),
|
||||||
sortByStarsDiv.appendChild(sortByStarsLabel);
|
(inputValue = "date"),
|
||||||
|
(sortedBy = sortedBy),
|
||||||
let sortByLastCommitDiv = document.createElement('div');
|
(sortedBySelector = "date"),
|
||||||
let sortByLastCommitInput = document.createElement('input');
|
(labelText = "Latest Commit Date")
|
||||||
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);
|
|
||||||
|
|
||||||
|
sortByRow.appendChild(sortByStarsButton);
|
||||||
|
sortByRow.appendChild(sortByLastCommitButton);
|
||||||
menuDiv.appendChild(sortByRow);
|
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();
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
@ -1,49 +1,68 @@
|
|||||||
function buildTagSelectionInput(tag, selected, tagSelectionRow) {
|
function buildTagSelectionInput(tag, selected, tagSelectionRow) {
|
||||||
let tagSelectionInputDiv = document.createElement('div');
|
let tagSelectionInputButton = document.createElement("button");
|
||||||
tagSelectionInputDiv.style.width = '15rem';
|
tagSelectionInputButton.style.width = "15rem";
|
||||||
tagSelectionInputDiv.style.maxWidth = '50%';
|
tagSelectionInputButton.style.maxWidth = "50%";
|
||||||
tagSelectionInputDiv.style.marginTop = '.5rem';
|
tagSelectionInputButton.style.margin = ".5rem";
|
||||||
tagSelectionInputDiv.style.marginBottom = '.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.type = "checkbox";
|
||||||
tagSelectionInput.id = tag.tag + "-selection-input";
|
tagSelectionInput.id = tag.tag + "-selection-input";
|
||||||
tagSelectionInput.name = tag.tag + "-selection-input";
|
tagSelectionInput.name = tag.tag + "-selection-input";
|
||||||
tagSelectionInput.value = tag.tag;
|
tagSelectionInput.value = tag.tag;
|
||||||
tagSelectionInput.checked = (selected) ? true : false;
|
tagSelectionInput.checked = selected ? true : false;
|
||||||
tagSelectionInput.classList.add('tagSelectionInput');
|
tagSelectionInput.classList.add("tagSelectionInput");
|
||||||
tagSelectionInput.onclick = function() { buildResults(); };
|
tagSelectionInput.onclick = function () {
|
||||||
tagSelectionInputDiv.appendChild(tagSelectionInput);
|
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.for = tag.tag + "-selection-input";
|
||||||
tagSelectionInputLabel.innerHTML = tag.tag + ' (' + tag.num_themes + ')';
|
tagSelectionInputLabel.innerHTML = tag.tag + " (" + tag.num_themes + ")";
|
||||||
tagSelectionInputDiv.appendChild(tagSelectionInputLabel);
|
tagSelectionInputButton.appendChild(tagSelectionInputLabel);
|
||||||
|
tagSelectionInputButton.onclick = function () {
|
||||||
|
tagSelectionInput.checked = !tagSelectionInput.checked;
|
||||||
|
buildResults();
|
||||||
|
};
|
||||||
|
|
||||||
tagSelectionRow.appendChild(tagSelectionInputDiv);
|
tagSelectionRow.appendChild(tagSelectionInputButton);
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
|
function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
|
||||||
let featureSelectionInputDiv = document.createElement('div');
|
let featureSelectionInputButton = document.createElement("button");
|
||||||
featureSelectionInputDiv.style.width = '30rem';
|
featureSelectionInputButton.style.width = "30rem";
|
||||||
featureSelectionInputDiv.style.maxWidth = '50%';
|
featureSelectionInputButton.style.maxWidth = "50%";
|
||||||
featureSelectionInputDiv.style.marginTop = '.5rem';
|
featureSelectionInputButton.style.margin = ".5rem";
|
||||||
featureSelectionInputDiv.style.marginBottom = '.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.type = "checkbox";
|
||||||
featureSelectionInput.id = feature.feature + "-selection-input";
|
featureSelectionInput.id = feature.feature + "-selection-input";
|
||||||
featureSelectionInput.name = feature.feature + "-selection-input";
|
featureSelectionInput.name = feature.feature + "-selection-input";
|
||||||
featureSelectionInput.value = feature.feature;
|
featureSelectionInput.value = feature.feature;
|
||||||
featureSelectionInput.checked = (selected) ? true : false;
|
featureSelectionInput.checked = selected ? true : false;
|
||||||
featureSelectionInput.classList.add('featureSelectionInput');
|
featureSelectionInput.classList.add("featureSelectionInput");
|
||||||
featureSelectionInput.onclick = function() { buildResults(); };
|
featureSelectionInput.onclick = function () {
|
||||||
featureSelectionInputDiv.appendChild(featureSelectionInput);
|
buildResults();
|
||||||
|
};
|
||||||
|
featureSelectionInputButton.appendChild(featureSelectionInput);
|
||||||
|
|
||||||
let featureSelectionInputLabel = document.createElement('label');
|
let featureSelectionInputLabel = document.createElement("label");
|
||||||
featureSelectionInputLabel.for = feature.feature + "-selection-input";
|
featureSelectionInputLabel.style.textAlign = "left";
|
||||||
featureSelectionInputLabel.innerHTML = feature.feature + ' (' + feature.num_themes + ')';
|
featureSelectionInputLabel.for = feature.feature + "-selection-input";
|
||||||
featureSelectionInputDiv.appendChild(featureSelectionInputLabel);
|
featureSelectionInputLabel.innerHTML =
|
||||||
|
feature.feature + " (" + feature.num_themes + ")";
|
||||||
|
featureSelectionInputButton.appendChild(featureSelectionInputLabel);
|
||||||
|
featureSelectionInputButton.onclick = function () {
|
||||||
|
featureSelectionInput.checked = !featureSelectionInput.checked;
|
||||||
|
buildResults();
|
||||||
|
};
|
||||||
|
|
||||||
featureSelectionRow.appendChild(featureSelectionInputDiv);
|
featureSelectionRow.appendChild(featureSelectionInputButton);
|
||||||
}
|
}
|
||||||
|
@ -1,18 +1,19 @@
|
|||||||
function addThemeTableRow(theme) {
|
function addThemeTableRow(theme) {
|
||||||
let resultsTable = document.getElementById('resultsTable');
|
let resultsTable = document.getElementById("resultsTable");
|
||||||
let resultsTableRow = document.createElement("tr");
|
let resultsTableRow = document.createElement("tr");
|
||||||
|
|
||||||
let themeTD = document.createElement("td");
|
let themeTD = document.createElement("td");
|
||||||
themeTD.innerHTML = '<a href="' + theme.url + '" target="_blank">' + theme.short_name + '</a>';
|
themeTD.innerHTML =
|
||||||
themeTD.style.whiteSpace = 'nowrap';
|
'<a href="' + theme.url + '" target="_blank">' + theme.short_name + "</a>";
|
||||||
themeTD.style.overFlow = 'hidden';
|
themeTD.style.whiteSpace = "nowrap";
|
||||||
themeTD.style.width = '20%';
|
themeTD.style.overFlow = "hidden";
|
||||||
|
themeTD.style.width = "20%";
|
||||||
resultsTableRow.appendChild(themeTD);
|
resultsTableRow.appendChild(themeTD);
|
||||||
|
|
||||||
let dateTD = document.createElement("td");
|
let dateTD = document.createElement("td");
|
||||||
dateTD.innerHTML = theme.date;
|
dateTD.innerHTML = theme.date;
|
||||||
dateTD.style.textAlign = 'center';
|
dateTD.style.textAlign = "center";
|
||||||
dateTD.style.minWidth = '8rem';
|
dateTD.style.minWidth = "8rem";
|
||||||
resultsTableRow.appendChild(dateTD);
|
resultsTableRow.appendChild(dateTD);
|
||||||
|
|
||||||
let starsTD = document.createElement("td");
|
let starsTD = document.createElement("td");
|
||||||
@ -21,8 +22,8 @@ function addThemeTableRow(theme) {
|
|||||||
|
|
||||||
let commitTD = document.createElement("td");
|
let commitTD = document.createElement("td");
|
||||||
commitTD.innerHTML = theme.commit;
|
commitTD.innerHTML = theme.commit;
|
||||||
commitTD.style.minWidth = '7rem';
|
commitTD.style.minWidth = "7rem";
|
||||||
resultsTableRow.appendChild(commitTD);
|
resultsTableRow.appendChild(commitTD);
|
||||||
|
|
||||||
resultsTable.appendChild(resultsTableRow);
|
resultsTable.appendChild(resultsTableRow);
|
||||||
};
|
}
|
||||||
|
@ -1,24 +1,24 @@
|
|||||||
function getAvailableFeatures(sorted_themes, featureSortBy) {
|
function getAvailableFeatures(sorted_themes, featureSortBy) {
|
||||||
let result = [];
|
let result = [];
|
||||||
sorted_themes.forEach(x => {
|
sorted_themes.forEach((x) => {
|
||||||
x.features.forEach(feature => {
|
x.features.forEach((feature) => {
|
||||||
if (result.length === 0) {
|
if (result.length === 0) {
|
||||||
result.push({'feature': feature, 'num_themes': 1});
|
result.push({ feature: feature, num_themes: 1 });
|
||||||
} else {
|
} 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)) {
|
if (features_in_result.includes(feature)) {
|
||||||
result.forEach(w => {
|
result.forEach((w) => {
|
||||||
if (w.feature === feature) {
|
if (w.feature === feature) {
|
||||||
w.num_themes += 1;
|
w.num_themes += 1;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
result.push({'feature': feature, 'num_themes': 1});
|
result.push({ feature: feature, num_themes: 1 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
if (featureSortBy === 'numThemes') {
|
if (featureSortBy === "numThemes") {
|
||||||
return result
|
return result
|
||||||
.sort((a, b) => a.feature.localeCompare(b.feature))
|
.sort((a, b) => a.feature.localeCompare(b.feature))
|
||||||
.sort((a, b) => b.num_themes - a.num_themes);
|
.sort((a, b) => b.num_themes - a.num_themes);
|
||||||
@ -29,25 +29,25 @@ function getAvailableFeatures(sorted_themes, featureSortBy) {
|
|||||||
|
|
||||||
function getAvailableTags(sorted_themes, tagSortBy) {
|
function getAvailableTags(sorted_themes, tagSortBy) {
|
||||||
let result = [];
|
let result = [];
|
||||||
sorted_themes.forEach(x => {
|
sorted_themes.forEach((x) => {
|
||||||
x.tags.forEach(tag => {
|
x.tags.forEach((tag) => {
|
||||||
if (result.length === 0) {
|
if (result.length === 0) {
|
||||||
result.push({'tag': tag, 'num_themes': 1});
|
result.push({ tag: tag, num_themes: 1 });
|
||||||
} else {
|
} 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)) {
|
if (tags_in_result.includes(tag)) {
|
||||||
result.forEach(w => {
|
result.forEach((w) => {
|
||||||
if (w.tag === tag) {
|
if (w.tag === tag) {
|
||||||
w.num_themes += 1;
|
w.num_themes += 1;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
result.push({'tag': tag, 'num_themes': 1});
|
result.push({ tag: tag, num_themes: 1 });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
if (tagSortBy === 'numThemes') {
|
if (tagSortBy === "numThemes") {
|
||||||
return result
|
return result
|
||||||
.sort((a, b) => a.tag.localeCompare(b.tag))
|
.sort((a, b) => a.tag.localeCompare(b.tag))
|
||||||
.sort((a, b) => b.num_themes - a.num_themes);
|
.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));
|
return result.sort((a, b) => a.tag.localeCompare(b.tag));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
var menuButton = document.getElementById("selection-button");
|
var menuButton = document.getElementById("selection-button");
|
||||||
|
|
||||||
menuButton.addEventListener("click", function() {
|
menuButton.addEventListener("click", function () {
|
||||||
menuButton.classList.toggle("active");
|
menuButton.classList.toggle("active");
|
||||||
var selectionMenu = document.getElementById("selection-menu");
|
var selectionMenu = document.getElementById("selection-menu");
|
||||||
if (selectionMenu.style.display === "block") {
|
if (selectionMenu.style.display === "block") {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user