trent
/
hugo_themes_report
mirror of https://github.com/TrentSPalmer/hugo_themes_report.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

make columns selectable

This commit is contained in:
Trent Palmer 2021-08-14 17:42:01 -07:00
parent 3eb9282438
commit 7c58e22aa8
12 changed files with 427 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
rank_hugo_themes.py
View File

@ -472,7 +472,7 @@ if __name__ == "__main__":
'''
or test with
`
python -c'import rank_hugo_themes; rank_hugo_themes.parse_themes_toml_for_each_hugo_themes() ; rank_hugo_themes.generate_report()''
python3 -c'import rank_hugo_themes; rank_hugo_themes.parse_themes_toml_for_each_hugo_themes() ; rank_hugo_themes.generate_report()'
`
'''
get_hugo_themes_list()

6
templates/base.html
View File

@ -21,16 +21,18 @@
<button type="button" id="button-for-filter-by-features">Filter By Features</button>
<button type="button" id="button-for-filter-by-tags-and-features">Filter By Tags &amp; Features</button>
</div>
<div id="selection-menu">
<div id="selection-menu" style="margin-bottom: 1rem;">
</div>
<div id="results">
</div>
<script>
var themes = {{ themes }};
{% include 'js/buildButton.js' %}
{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
{% include 'js/buildSelectionInputs.js' %}
{% include 'js/getAvailableTagsAndFeatures.js' %}
{% include 'js/buildSortByDiv.js' %}
{% include 'js/buildTagAndFeatureSelectionHeadingRows.js' %}
{% include 'js/buildTagAndFeatureSelectionDivs.js' %}
{% include 'js/buildSelectionMenu.js' %}
{% include 'js/buildThemeTableRow.js' %}
{% include 'js/buildPage.js' %}

89
templates/js/buildPage.js
View File

@ -7,26 +7,6 @@ function getSortBy() {
}
}
function getTagSortBy() {
let tagSortByNumThemes = document.getElementById("tagSortByNumThemes");
if (tagSortByNumThemes === null) {
return "numThemes";
} else {
return tagSortByNumThemes.checked ? "numThemes" : "name";
}
}
function getFeatureSortBy() {
let featureSortByNumThemes = document.getElementById(
"featureSortByNumThemes"
);
if (featureSortByNumThemes === null) {
return "numThemes";
} else {
return featureSortByNumThemes.checked ? "numThemes" : "name";
}
}
function getSortedThemes(themeList, sortedBy) {
if (sortedBy === "date") {
return themeList.sort((a, b) => b.date_in_seconds - a.date_in_seconds);
@ -44,6 +24,22 @@ function getSelectedTags() {
}
}
function getSelectedColumns() {
let columnSelectionInputs = document.getElementsByClassName(
"columnSelectionInput"
);
if (columnSelectionInputs.length > 0) {
let checked = [...columnSelectionInputs].filter((x) => x.checked);
if (checked.length > 0) {
return checked.map((y) => y.id.slice(0, -23));
} else {
return ["cname", "date", "num_stars", "commit"];
}
} else {
return ["cname", "date", "num_stars", "commit"];
}
}
function getSelectedFeatures() {
let featureSelectionInputs = document.getElementsByClassName(
"featureSelectionInput"
@ -76,6 +72,8 @@ function getDiplayState() {
let dState = {};
[
"sortByRow",
"columnSelectionHeadingRow",
"columnSelectionRow",
"tagSelectionHeadingRow",
"tagSelectionRow",
"featureSelectionHeadingRow",
@ -84,6 +82,18 @@ function getDiplayState() {
return dState;
}
let tableColumns = [
{ headingName: "cname", headingText: "theme" },
{ headingName: "date", headingText: "date" },
{ headingName: "num_stars", headingText: "stars" },
{ headingName: "commit", headingText: "commit" },
{ headingName: "min_ver", headingText: "minVer" },
{ headingName: "license", headingText: "license" },
{ headingName: "desc", headingText: "desc" },
{ headingName: "tags", headingText: "tags" },
{ headingName: "features", headingText: "features" },
];
function buildResults() {
let resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = "";
@ -95,38 +105,31 @@ function buildResults() {
let resultsTableHeadRow = document.createElement("tr");
resultsDiv.appendChild(resultsTable);
resultsTable.appendChild(resultsTableHeadRow);
let selectedColumns = getSelectedColumns();
let tableHeadingVals = [
{'headingName': 'cname', 'headingText': 'theme'},
{'headingName': 'date', 'headingText': 'date'},
{'headingName': 'num_stars', 'headingText': 'stars'},
{'headingName': 'commit', 'headingText': 'commit'},
{'headingName': 'min_ver', 'headingText': 'minVer'},
{'headingName': 'license', 'headingText': 'license'},
{'headingName': 'desc', 'headingText': 'desc'},
{'headingName': 'tags', 'headingText': 'tags'},
{'headingName': 'features', 'headingText': 'features'},
];
tableHeadingVals.forEach((x) => {
let xTH = document.createElement("th");
xTH.innerHTML = x.headingText;
resultsTableHeadRow.appendChild(xTH);
});
tableColumns
.filter((y) => selectedColumns.includes(y.headingName))
.forEach((x) => {
let xTH = document.createElement("th");
xTH.innerHTML = x.headingText;
resultsTableHeadRow.appendChild(xTH);
});
let selectedTags = getSelectedTags();
let selectedFeatures = getSelectedFeatures();
let sortedBy = getSortBy();
let filtered_themes = getFilteredThemes(selectedTags, selectedFeatures);
let sorted_themes = getSortedThemes(filtered_themes, sortedBy);
sorted_themes.forEach((theme) => addThemeTableRow(theme));
sorted_themes.forEach((theme) => addThemeTableRow(theme, selectedColumns));
// from buildSelectionMenu.js
buildSelectionMenu(
sorted_themes,
sortedBy,
selectedTags,
selectedFeatures,
getDiplayState()
(sorted_themes = sorted_themes),
(sortedBy = sortedBy),
(selectedTags = selectedTags),
(selectedFeatures = selectedFeatures),
(selectedColumns = selectedColumns),
(dState = getDiplayState())
);
}

47
templates/js/buildSelectionInputs.js Normal file
View File

@ -0,0 +1,47 @@
// called from buildTagAndFeatureSelectionDivs.js
function buildInput(item, selected, inpParent) {
let inputSelectionButton = document.createElement("button");
inputSelectionButton.style.maxWidth = "calc(50% - 2rem)";
inputSelectionButton.style.margin = ".5rem";
inputSelectionButton.style.display = "flex";
inputSelectionButton.style.alignItems = "center";
let selectionInput = document.createElement("input");
selectionInput.style.marginRight = "1rem";
selectionInput.type = "checkbox";
selectionInput.checked = selected ? true : false;
selectionInput.onclick = function () {
buildResults();
};
inputSelectionButton.appendChild(selectionInput);
let selectionInputLabel = document.createElement("label");
selectionInputLabel.style.textAlign = "left";
inputSelectionButton.appendChild(selectionInputLabel);
inputSelectionButton.onclick = function () {
selectionInput.checked = !selectionInput.checked;
buildResults();
};
if ("feature" in item) {
selectionInput.value = item.feature;
inputSelectionButton.style.width = "15rem";
selectionInputLabel.innerHTML = `${item.feature} (${item.num_themes})`;
selectionInput.classList.add("featureSelectionInput");
} else if ("tag" in item) {
selectionInput.value = item.tag;
inputSelectionButton.style.width = "12rem";
selectionInputLabel.innerHTML = `${item.tag} (${item.num_themes})`;
selectionInput.classList.add("tagSelectionInput");
} else if ("headingName" in item) {
selectionInput.value = `${item.headingName}-column`;
selectionInputLabel.innerHTML = item.headingText;
selectionInput.classList.add("columnSelectionInput");
}
selectionInput.id = `${selectionInput.value}-selection-input`;
selectionInput.name = `${selectionInput.id}`;
selectionInputLabel.for = `${selectionInput.id}`;
inpParent.appendChild(inputSelectionButton);
}

222
templates/js/buildSelectionMenu.js
View File

@ -1,183 +1,101 @@
function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy, dState) {
let tagSelectionHeadingRow = document.createElement("div");
tagSelectionHeadingRow.id = "tagSelectionHeadingRow";
tagSelectionHeadingRow.style.maxWidth = "100%";
tagSelectionHeadingRow.style.display = dState.tagSelectionHeadingRow;
tagSelectionHeadingRow.style.justifyContent = "space-around";
tagSelectionHeadingRow.style.alignItems = "center";
let tagSelectionHeading = document.createElement("h2");
tagSelectionHeading.innerHTML = "Select Tags";
let tagSortByNameInputButton = buildRadioButton(
(inputID = "tagSortByName"),
(inputName = "tagSortBy"),
(inputValue = "tagSortByName"),
(sortedBy = tagSortBy),
(sortedBySelector = "name"),
(labelText = "Name")
);
let tagSortByNumThemesInputButton = buildRadioButton(
(inputID = "tagSortByNumThemes"),
(inputName = "tagSortBy"),
(inputValue = "tagSortByNumThemes"),
(sortedBy = tagSortBy),
(sortedBySelector = "numThemes"),
(labelText = "nThemes")
);
tagSelectionHeadingRow.appendChild(tagSelectionHeading);
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 getTagSortBy() {
let tagSortByNumThemes = document.getElementById("tagSortByNumThemes");
if (tagSortByNumThemes === null) {
return "numThemes";
} else {
return tagSortByNumThemes.checked ? "numThemes" : "name";
}
}
function buildFeatureSelectionHeadingRow(
selectionMenuDiv,
featureSortBy,
dState
) {
let featureSelectionHeadingRow = document.createElement("div");
featureSelectionHeadingRow.id = "featureSelectionHeadingRow";
featureSelectionHeadingRow.style.maxWidth = "100%";
featureSelectionHeadingRow.style.display = dState.featureSelectionHeadingRow;
featureSelectionHeadingRow.style.justifyContent = "space-around";
featureSelectionHeadingRow.style.alignItems = "center";
let featureSelectionHeading = document.createElement("h2");
featureSelectionHeading.innerHTML = "Select Features";
let featureSortByNameInputButton = buildRadioButton(
(inputID = "featureSortByName"),
(inputName = "featureSortBy"),
(inputValue = "featureSortByName"),
(sortedBy = featureSortBy),
(sortedBySelector = "name"),
(labelText = "Name")
);
let featureSortByNumThemesInputButton = buildRadioButton(
(inputID = "featureSortByNumThemes"),
(inputName = "featureSortBy"),
(inputValue = "featureSortByNumThemes"),
(sortedBy = featureSortBy),
(sortedBySelector = "numThemes"),
(labelText = "nThemes")
);
featureSelectionHeadingRow.appendChild(featureSelectionHeading);
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(
function getFeatureSortBy() {
let featureSortByNumThemes = document.getElementById(
"featureSortByNumThemes"
);
featureSortByNumThemesInputButton.onclick = function () {
if (!featureSortByNumThemesInput.checked) {
featureSortByNumThemesInput.checked = true;
buildResults();
}
};
if (featureSortByNumThemes === null) {
return "numThemes";
} else {
return featureSortByNumThemes.checked ? "numThemes" : "name";
}
}
function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState) {
let selectionMenuDiv = document.getElementById("selection-menu");
buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy, dState);
function buildColumnSelectionHeadingRow(eParent, dState) {
let columnSelectionHeadingRow = document.createElement("div");
columnSelectionHeadingRow.id = "columnSelectionHeadingRow";
columnSelectionHeadingRow.style.maxWidth = "100%";
columnSelectionHeadingRow.style.display = dState.columnSelectionHeadingRow;
columnSelectionHeadingRow.style.alignItems = "center";
let tagSelectionRow = document.createElement("div");
tagSelectionRow.id = "tagSelectionRow";
tagSelectionRow.style.display = dState.tagSelectionRow;
tagSelectionRow.style.flexWrap = "wrap";
tagSelectionRow.style.justifyContent = "space-around";
let columnSelectionHeading = document.createElement("h2");
columnSelectionHeading.innerHTML = "Select Columns";
columnSelectionHeadingRow.appendChild(columnSelectionHeading);
eParent.appendChild(columnSelectionHeadingRow);
}
selectionMenuDiv.appendChild(tagSelectionRow);
function buildColumnSelectionDiv(selectedColumns, dState, eParent) {
buildColumnSelectionHeadingRow(eParent, dState);
availableTags
.filter((x) => selectedTags.includes(x.tag))
let columnSelectionRow = document.createElement("div");
columnSelectionRow.id = "columnSelectionRow";
columnSelectionRow.style.display = dState.columnSelectionRow;
columnSelectionRow.style.flexWrap = "wrap";
columnSelectionRow.style.justifyContent = "space-around";
eParent.appendChild(columnSelectionRow);
tableColumns
.filter((x) => selectedColumns.includes(x.headingName))
.forEach((y) => {
buildTagSelectionInput(y, true, tagSelectionRow);
buildInput(y, true, columnSelectionRow);
});
availableTags
.filter((x) => !selectedTags.includes(x.tag))
tableColumns
.filter((x) => !selectedColumns.includes(x.headingName))
.forEach((y) => {
buildTagSelectionInput(y, false, tagSelectionRow);
});
}
function buildFeatureSelectionDiv(
selectedFeatures,
availableFeatures,
featureSortBy,
dState
) {
let selectionMenuDiv = document.getElementById("selection-menu");
buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy, dState);
let featureSelectionRow = document.createElement("div");
featureSelectionRow.id = "featureSelectionRow";
featureSelectionRow.style.display = dState.featureSelectionRow;
featureSelectionRow.style.flexWrap = "wrap";
featureSelectionRow.style.justifyContent = "space-around";
selectionMenuDiv.appendChild(featureSelectionRow);
availableFeatures
.filter((x) => selectedFeatures.includes(x.feature))
.forEach((y) => {
buildFeatureSelectionInput(y, true, featureSelectionRow);
});
availableFeatures
.filter((x) => !selectedFeatures.includes(x.feature))
.forEach((y) => {
buildFeatureSelectionInput(y, false, featureSelectionRow);
buildInput(y, false, columnSelectionRow);
});
}
// called from buildPage.js
function buildSelectionMenu(
sorted_themes,
sortedBy,
selectedTags,
selectedFeatures,
selectedColumns,
dState
) {
let tagSortBy = getTagSortBy();
let featureSortBy = getFeatureSortBy();
let selectionMenuDiv = document.getElementById("selection-menu");
// from getAvailableTagsAndFeatures.js
let availableTags = getAvailableTags(sorted_themes, tagSortBy);
// from getAvailableTagsAndFeatures.js
let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
// from buildSortByDiv.js
buildSortByDiv(sortedBy, dState.sortByRow);
buildTagSelectionDiv(selectedTags, availableTags, tagSortBy, dState);
buildColumnSelectionDiv(
(selectedColumns = selectedColumns),
(dState = dState),
(eParent = selectionMenuDiv)
);
// from buildTagAndFeatureSelectionDivs.js
buildTagSelectionDiv(
(selectedTags = selectedTags),
(availableTags = availableTags),
(tagSortBy = tagSortBy),
(dState = dState),
(eParent = selectionMenuDiv)
);
// from buildTagAndFeatureSelectionDivs.js
buildFeatureSelectionDiv(
selectedFeatures,
availableFeatures,
featureSortBy,
dState
(selectedFeatures = selectedFeatures),
(availableFeatures = availableFeatures),
(featureSortBy = featureSortBy),
(dState = dState),
(eParent = selectionMenuDiv)
);
}

1
templates/js/buildSortByDiv.js
View File

@ -1,3 +1,4 @@
// called from buildSelectionMenu.js
function buildSortByDiv(sortedBy, sortByRowDisplay) {
let menuDiv = document.getElementById("selection-menu");
menuDiv.innerHTML = "";

67
templates/js/buildTagAndFeatureSelectionDivs.js Normal file
View File

@ -0,0 +1,67 @@
// called from buildSelectionMenu.js
function buildTagSelectionDiv(
selectedTags,
availableTags,
tagSortBy,
dState,
eParent
) {
// from buildTagAndFeatureSelectionHeadingRows.js
buildTagSelectionHeadingRow(eParent, tagSortBy, dState);
let tagSelectionRow = document.createElement("div");
tagSelectionRow.id = "tagSelectionRow";
tagSelectionRow.style.display = dState.tagSelectionRow;
tagSelectionRow.style.flexWrap = "wrap";
tagSelectionRow.style.justifyContent = "space-around";
eParent.appendChild(tagSelectionRow);
availableTags
.filter((x) => selectedTags.includes(x.tag))
.forEach((y) => {
// from buildSelectionInputs.js
buildInput(y, true, tagSelectionRow);
});
availableTags
.filter((x) => !selectedTags.includes(x.tag))
.forEach((y) => {
// from buildSelectionInputs.js
buildInput(y, false, tagSelectionRow);
});
}
// called from buildSelectionMenu.js
function buildFeatureSelectionDiv(
selectedFeatures,
availableFeatures,
featureSortBy,
dState,
eParent
) {
// from buildTagAndFeatureSelectionHeadingRows.js
buildFeatureSelectionHeadingRow(eParent, featureSortBy, dState);
let featureSelectionRow = document.createElement("div");
featureSelectionRow.id = "featureSelectionRow";
featureSelectionRow.style.display = dState.featureSelectionRow;
featureSelectionRow.style.flexWrap = "wrap";
featureSelectionRow.style.justifyContent = "space-around";
eParent.appendChild(featureSelectionRow);
availableFeatures
.filter((x) => selectedFeatures.includes(x.feature))
.forEach((y) => {
// from buildSelectionInputs.js
buildInput(y, true, featureSelectionRow);
});
availableFeatures
.filter((x) => !selectedFeatures.includes(x.feature))
.forEach((y) => {
// from buildSelectionInputs.js
buildInput(y, false, featureSelectionRow);
});
}

105
templates/js/buildTagAndFeatureSelectionHeadingRows.js Normal file
View File

@ -0,0 +1,105 @@
// called from buildTagAndFeatureSelectionDivs.js
function buildTagSelectionHeadingRow(eParent, tagSortBy, dState) {
let tagSelectionHeadingRow = document.createElement("div");
tagSelectionHeadingRow.id = "tagSelectionHeadingRow";
tagSelectionHeadingRow.style.maxWidth = "100%";
tagSelectionHeadingRow.style.display = dState.tagSelectionHeadingRow;
tagSelectionHeadingRow.style.justifyContent = "space-around";
tagSelectionHeadingRow.style.alignItems = "center";
let tagSelectionHeading = document.createElement("h2");
tagSelectionHeading.innerHTML = "Select Tags";
let tagSortByNameInputButton = buildRadioButton(
(inputID = "tagSortByName"),
(inputName = "tagSortBy"),
(inputValue = "tagSortByName"),
(sortedBy = tagSortBy),
(sortedBySelector = "name"),
(labelText = "Name")
);
let tagSortByNumThemesInputButton = buildRadioButton(
(inputID = "tagSortByNumThemes"),
(inputName = "tagSortBy"),
(inputValue = "tagSortByNumThemes"),
(sortedBy = tagSortBy),
(sortedBySelector = "numThemes"),
(labelText = "nThemes")
);
tagSelectionHeadingRow.appendChild(tagSelectionHeading);
tagSelectionHeadingRow.appendChild(tagSortByNameInputButton);
tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputButton);
eParent.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();
}
};
}
// called from buildTagAndFeatureSelectionDivs.js
function buildFeatureSelectionHeadingRow(eParent, featureSortBy, dState) {
let featureSelectionHeadingRow = document.createElement("div");
featureSelectionHeadingRow.id = "featureSelectionHeadingRow";
featureSelectionHeadingRow.style.maxWidth = "100%";
featureSelectionHeadingRow.style.display = dState.featureSelectionHeadingRow;
featureSelectionHeadingRow.style.justifyContent = "space-around";
featureSelectionHeadingRow.style.alignItems = "center";
let featureSelectionHeading = document.createElement("h2");
featureSelectionHeading.innerHTML = "Select Features";
let featureSortByNameInputButton = buildRadioButton(
(inputID = "featureSortByName"),
(inputName = "featureSortBy"),
(inputValue = "featureSortByName"),
(sortedBy = featureSortBy),
(sortedBySelector = "name"),
(labelText = "Name")
);
let featureSortByNumThemesInputButton = buildRadioButton(
(inputID = "featureSortByNumThemes"),
(inputName = "featureSortBy"),
(inputValue = "featureSortByNumThemes"),
(sortedBy = featureSortBy),
(sortedBySelector = "numThemes"),
(labelText = "nThemes")
);
featureSelectionHeadingRow.appendChild(featureSelectionHeading);
featureSelectionHeadingRow.appendChild(featureSortByNameInputButton);
featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputButton);
eParent.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();
}
};
}

68
templates/js/buildTagAndFeatureSelectionInputs.js
View File

@ -1,68 +0,0 @@
function buildTagSelectionInput(tag, selected, tagSelectionRow) {
let tagSelectionInputButton = document.createElement("button");
tagSelectionInputButton.style.width = "12rem";
tagSelectionInputButton.style.maxWidth = "calc(50% - 2rem)";
tagSelectionInputButton.style.margin = ".5rem";
tagSelectionInputButton.style.display = "flex";
tagSelectionInputButton.style.alignItems = "center";
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();
};
tagSelectionInputButton.appendChild(tagSelectionInput);
let tagSelectionInputLabel = document.createElement("label");
tagSelectionInputLabel.style.textAlign = "left";
tagSelectionInputLabel.for = tag.tag + "-selection-input";
tagSelectionInputLabel.innerHTML = tag.tag + " (" + tag.num_themes + ")";
tagSelectionInputButton.appendChild(tagSelectionInputLabel);
tagSelectionInputButton.onclick = function () {
tagSelectionInput.checked = !tagSelectionInput.checked;
buildResults();
};
tagSelectionRow.appendChild(tagSelectionInputButton);
}
function buildFeatureSelectionInput(feature, selected, featureSelectionRow) {
let featureSelectionInputButton = document.createElement("button");
featureSelectionInputButton.style.width = "15rem";
featureSelectionInputButton.style.maxWidth = "calc(50% - 2rem)";
featureSelectionInputButton.style.margin = ".5rem";
featureSelectionInputButton.style.display = "flex";
featureSelectionInputButton.style.alignItems = "center";
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();
};
featureSelectionInputButton.appendChild(featureSelectionInput);
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(featureSelectionInputButton);
}

96
templates/js/buildThemeTableRow.js
View File

@ -1,53 +1,71 @@
function addThemeTableRow(theme) {
function addThemeTableRow(theme, selectedColumns) {
let resultsTable = document.getElementById("resultsTable");
let resultsTableRow = document.createElement("tr");
let themeTD = document.createElement("td");
themeTD.innerHTML =
'<a href="' + theme.url + '" target="_blank">' + theme.cname + "</a>";
themeTD.style.minWidth = `${theme.cname.length / 6}rem`;
resultsTableRow.appendChild(themeTD);
if (selectedColumns.includes("cname")) {
let themeTD = document.createElement("td");
themeTD.innerHTML =
'<a href="' + theme.url + '" target="_blank">' + theme.cname + "</a>";
themeTD.style.minWidth = `${theme.cname.length / 6}rem`;
resultsTableRow.appendChild(themeTD);
}
let dateTD = document.createElement("td");
dateTD.innerHTML = theme.date;
dateTD.style.minWidth = "5rem";
resultsTableRow.appendChild(dateTD);
if (selectedColumns.includes("date")) {
let dateTD = document.createElement("td");
dateTD.innerHTML = theme.date;
dateTD.style.minWidth = "5rem";
resultsTableRow.appendChild(dateTD);
}
let starsTD = document.createElement("td");
starsTD.innerHTML = theme.num_stars;
resultsTableRow.appendChild(starsTD);
if (selectedColumns.includes("num_stars")) {
let starsTD = document.createElement("td");
starsTD.innerHTML = theme.num_stars;
resultsTableRow.appendChild(starsTD);
}
let commitTD = document.createElement("td");
commitTD.innerHTML = theme.commit;
resultsTableRow.appendChild(commitTD);
if (selectedColumns.includes("commit")) {
let commitTD = document.createElement("td");
commitTD.innerHTML = theme.commit;
resultsTableRow.appendChild(commitTD);
}
let minVerTD = document.createElement("td");
minVerTD.innerHTML = theme.min_ver;
resultsTableRow.appendChild(minVerTD);
if (selectedColumns.includes("min_ver")) {
let minVerTD = document.createElement("td");
minVerTD.innerHTML = theme.min_ver;
resultsTableRow.appendChild(minVerTD);
}
let licenseTD = document.createElement("td");
licenseTD.innerHTML = theme.license;
licenseTD.style.minWidth = `${theme.license.length / 7}rem`;
resultsTableRow.appendChild(licenseTD);
if (selectedColumns.includes("license")) {
let licenseTD = document.createElement("td");
licenseTD.innerHTML = theme.license;
licenseTD.style.minWidth = `${theme.license.length / 7}rem`;
resultsTableRow.appendChild(licenseTD);
}
let descTD = document.createElement("td");
descTD.innerHTML = theme.desc;
descTD.style.minWidth = `${theme.desc.length / 7}rem`;
resultsTableRow.appendChild(descTD);
if (selectedColumns.includes("desc")) {
let descTD = document.createElement("td");
descTD.innerHTML = theme.desc;
descTD.style.minWidth = `${theme.desc.length / 7}rem`;
resultsTableRow.appendChild(descTD);
}
let tagsTD = document.createElement("td");
let tL = theme.tags.length - 1;
tL += theme.tags.map((x) => x.length).reduce((a, b) => a + b, 0);
tagsTD.innerHTML = theme.tags;
tagsTD.style.minWidth = `${tL / 7}rem`;
resultsTableRow.appendChild(tagsTD);
if (selectedColumns.includes("tags")) {
let tagsTD = document.createElement("td");
let tL = theme.tags.length - 1;
tL += theme.tags.map((x) => x.length).reduce((a, b) => a + b, 0);
tagsTD.innerHTML = theme.tags;
tagsTD.style.minWidth = `${tL / 7}rem`;
resultsTableRow.appendChild(tagsTD);
}
let featuresTD = document.createElement("td");
let fL = theme.features.length - 1;
fL += theme.features.map((x) => x.length).reduce((a, b) => a + b, 0);
featuresTD.innerHTML = theme.features;
featuresTD.style.minWidth = `${fL / 7}rem`;
resultsTableRow.appendChild(featuresTD);
if (selectedColumns.includes("features")) {
let featuresTD = document.createElement("td");
let fL = theme.features.length - 1;
fL += theme.features.map((x) => x.length).reduce((a, b) => a + b, 0);
featuresTD.innerHTML = theme.features;
featuresTD.style.minWidth = `${fL / 7}rem`;
resultsTableRow.appendChild(featuresTD);
}
resultsTable.appendChild(resultsTableRow);
}

2
templates/js/getAvailableTagsAndFeatures.js
View File

@ -1,3 +1,4 @@
// called from buildSelectionMenu.js
function getAvailableFeatures(sorted_themes, featureSortBy) {
let result = [];
sorted_themes.forEach((x) => {
@ -27,6 +28,7 @@ function getAvailableFeatures(sorted_themes, featureSortBy) {
}
}
// called from buildSelectionMenu.js
function getAvailableTags(sorted_themes, tagSortBy) {
let result = [];
sorted_themes.forEach((x) => {

28
templates/js/selectionMenuCollapse.js
View File

@ -1,5 +1,17 @@
function showSelectionOptionsButtons() {
[
"button-for-showing-sort-option",
"button-for-showing-columns",
"button-for-filter-by-tags",
"button-for-filter-by-features",
"button-for-filter-by-tags-and-features",
].forEach((x) => (document.getElementById(x).style.display = "inline-block"));
}
let closeableMenus = [
"sortByRow",
"columnSelectionHeadingRow",
"columnSelectionRow",
"tagSelectionHeadingRow",
"tagSelectionRow",
"featureSelectionHeadingRow",
@ -43,19 +55,31 @@ document.getElementById("minus-button").onclick = function () {
document.getElementById("button-for-showing-sort-option").onclick =
function () {
closeMenus();
showSelectionOptionsButtons();
this.style.display = "none";
document.getElementById("sortByRow").style.display = "flex";
};
document.getElementById("button-for-showing-columns").onclick = function () {};
document.getElementById("button-for-showing-columns").onclick = function () {
closeMenus();
showSelectionOptionsButtons();
this.style.display = "none";
document.getElementById("columnSelectionHeadingRow").style.display = "flex";
document.getElementById("columnSelectionRow").style.display = "flex";
};
document.getElementById("button-for-filter-by-tags").onclick = function () {
closeMenus();
showSelectionOptionsButtons();
this.style.display = "none";
document.getElementById("tagSelectionHeadingRow").style.display = "flex";
document.getElementById("tagSelectionRow").style.display = "flex";
};
document.getElementById("button-for-filter-by-features").onclick = function () {
closeMenus();
showSelectionOptionsButtons();
this.style.display = "none";
document.getElementById("featureSelectionHeadingRow").style.display = "flex";
document.getElementById("featureSelectionRow").style.display = "flex";
};
@ -63,6 +87,8 @@ document.getElementById("button-for-filter-by-features").onclick = function () {
document.getElementById("button-for-filter-by-tags-and-features").onclick =
function () {
closeMenus();
showSelectionOptionsButtons();
this.style.display = "none";
document.getElementById("tagSelectionHeadingRow").style.display = "flex";
document.getElementById("tagSelectionRow").style.display = "flex";
document.getElementById("featureSelectionHeadingRow").style.display =