add filter by license

This commit is contained in:
Trent Palmer 2021-08-17 17:23:51 -07:00
parent d40b8c218a
commit 44b725f117
11 changed files with 258 additions and 269 deletions

View File

@ -19,6 +19,7 @@
<button type="button" id="button-for-showing-columns">Show Columns</button>
<button type="button" id="button-for-filter-by-tags">Filter By Tags</button>
<button type="button" id="button-for-filter-by-features">Filter By Features</button>
<button type="button" id="button-for-filter-by-license">Filter By License</button>
<button type="button" id="button-for-filter-by-tags-and-features">Filter By Tags &amp; Features</button>
</div>
<div id="selection-menu" style="margin-bottom: 1rem;">
@ -31,8 +32,8 @@ var themes = {{ themes }};
{% include 'js/buildSelectionInputs.js' %}
{% include 'js/getAvailableTagsAndFeatures.js' %}
{% include 'js/buildSortByDiv.js' %}
{% include 'js/buildTagAndFeatureSelectionHeadingRows.js' %}
{% include 'js/buildTagAndFeatureSelectionDivs.js' %}
{% include 'js/buildSelectionHeadingRows.js' %}
{% include 'js/buildSelectionDivs.js' %}
{% include 'js/buildSelectionMenu.js' %}
{% include 'js/buildThemeTableRow.js' %}
{% include 'js/getSortedThemes.js' %}

View File

@ -10,10 +10,12 @@ function getSortBy() {
}
}
function getSelectedTags() {
let tagSelectionInputs = document.getElementsByClassName("tagSelectionInput");
if (tagSelectionInputs.length > 0) {
return [...tagSelectionInputs].filter((x) => x.checked).map((y) => y.value);
function getSelected(filterCategory) {
let selectionInputs = document.getElementsByClassName(
`${filterCategory}SelectionInput`
);
if (selectionInputs.length > 0) {
return [...selectionInputs].filter((x) => x.checked).map((y) => y.value);
} else {
return [];
}
@ -35,20 +37,7 @@ function getSelectedColumns() {
}
}
function getSelectedFeatures() {
let featureSelectionInputs = document.getElementsByClassName(
"featureSelectionInput"
);
if (featureSelectionInputs.length > 0) {
return [...featureSelectionInputs]
.filter((x) => x.checked)
.map((y) => y.value);
} else {
return [];
}
}
function getFilteredThemes(selectedTags, selectedFeatures) {
function getTagAndFeatureFilteredThemes(selectedTags, selectedFeatures) {
if (selectedTags.length === 0 && selectedFeatures.length === 0) {
return themes;
} else {
@ -58,6 +47,16 @@ function getFilteredThemes(selectedTags, selectedFeatures) {
}
}
function getFilteredThemes(tagAndFeatureFilteredThemes, selectedLicenses) {
if (selectedLicenses.length === 0) {
return tagAndFeatureFilteredThemes;
} else {
return tagAndFeatureFilteredThemes.filter((x) =>
selectedLicenses.includes(x.license)
);
}
}
function getDState(x) {
let e = document.getElementById(x);
return e !== null ? e.style.display : "none";
@ -69,6 +68,8 @@ function getDiplayState() {
"sortByRow",
"columnSelectionHeadingRow",
"columnSelectionRow",
"licenseSelectionHeadingRow",
"licenseSelectionRow",
"tagSelectionHeadingRow",
"tagSelectionRow",
"featureSelectionHeadingRow",
@ -110,22 +111,31 @@ function buildResults() {
resultsTableHeadRow.appendChild(xTH);
});
let selectedTags = getSelectedTags();
let selectedFeatures = getSelectedFeatures();
let selectedTags = getSelected("tag");
let selectedFeatures = getSelected("feature");
let selectedLicenses = getSelected("license");
let sortedBy = getSortBy();
// let filtered_themes = getFilteredThemes(selectedTags, selectedFeatures);
let sorted_themes = getFilteredThemes(selectedTags, selectedFeatures);
sortThemes(sorted_themes, sortedBy);
sorted_themes.forEach((theme) => addThemeTableRow(theme, selectedColumns));
let tagAndFeatureFilteredThemes = getTagAndFeatureFilteredThemes(
selectedTags,
selectedFeatures
);
let filtered_themes = getFilteredThemes(
tagAndFeatureFilteredThemes,
selectedLicenses
);
sortThemes(filtered_themes, sortedBy);
filtered_themes.forEach((theme) => addThemeTableRow(theme, selectedColumns));
// from buildSelectionMenu.js
buildSelectionMenu(
(sorted_themes = sorted_themes),
(sortBy = sortedBy),
(selectedTags = selectedTags),
(selectedFeatures = selectedFeatures),
(selectedColumns = selectedColumns),
(dState = getDiplayState())
tagAndFeatureFilteredThemes,
filtered_themes,
sortedBy,
selectedTags,
selectedFeatures,
selectedLicenses,
selectedColumns,
getDiplayState()
);
}

View File

@ -0,0 +1,40 @@
// called from buildSelectionMenu.js
function buildSelectionDiv(
selectedItems,
availableItems,
sortBy,
dStateSelectionRow,
dStateSelectionHeadingRow,
eParent,
menuSection
) {
// from buildSelectionHeadingRows.js
buildSelectionHeadingRow(
eParent,
sortBy,
dStateSelectionHeadingRow,
menuSection
);
let selectionRow = document.createElement("div");
selectionRow.id = `${menuSection}SelectionRow`;
selectionRow.style.display = dStateSelectionRow;
selectionRow.style.flexWrap = "wrap";
selectionRow.style.justifyContent = "space-around";
eParent.appendChild(selectionRow);
availableItems
.filter((x) => selectedItems.includes(x[menuSection]))
.forEach((y) => {
// from buildSelectionInputs.js
buildInput(y, true, selectionRow);
});
availableItems
.filter((x) => !selectedItems.includes(x[menuSection]))
.forEach((y) => {
// from buildSelectionInputs.js
buildInput(y, false, selectionRow);
});
}

View File

@ -0,0 +1,58 @@
// called from buildTagAndFeatureSelectionDivs.js
function buildSelectionHeadingRow(
eParent,
sortBy,
dStateSelectionHeadingRow,
menuSection
) {
let selectionHeadingRow = document.createElement("div");
selectionHeadingRow.id = `${menuSection}SelectionHeadingRow`;
selectionHeadingRow.style.maxWidth = "100%";
selectionHeadingRow.style.display = dStateSelectionHeadingRow;
selectionHeadingRow.style.justifyContent = "space-around";
selectionHeadingRow.style.alignItems = "center";
let selectionHeading = document.createElement("h2");
selectionHeading.innerHTML = `Select ${menuSection}s`;
let sortByNameInputButton = buildRadioButton(
`${menuSection}SortByName`,
`${menuSection}SortBy`,
`${menuSection}SortByName`,
sortBy,
"name",
"Name"
);
let sortByNumThemesInputButton = buildRadioButton(
`${menuSection}SortByNumThemes`,
`${menuSection}SortBy`,
`${menuSection}SortByNumThemes`,
sortBy,
"numThemes",
"nThemes"
);
selectionHeadingRow.appendChild(selectionHeading);
selectionHeadingRow.appendChild(sortByNameInputButton);
selectionHeadingRow.appendChild(sortByNumThemesInputButton);
eParent.appendChild(selectionHeadingRow);
let sortByNameInput = document.getElementById(`${menuSection}SortByName`);
sortByNameInputButton.onclick = function () {
if (!sortByNameInput.checked) {
sortByNameInput.checked = true;
buildResults();
}
};
let sortByNumThemesInput = document.getElementById(
`${menuSection}SortByNumThemes`
);
sortByNumThemesInputButton.onclick = function () {
if (!sortByNumThemesInput.checked) {
sortByNumThemesInput.checked = true;
buildResults();
}
};
}

View File

@ -33,6 +33,11 @@ function buildInput(item, selected, inpParent) {
inputSelectionButton.style.width = "12rem";
selectionInputLabel.innerHTML = `${item.tag} (${item.num_themes})`;
selectionInput.classList.add("tagSelectionInput");
} else if ("license" in item) {
selectionInput.value = item.license;
inputSelectionButton.style.width = "15rem";
selectionInputLabel.innerHTML = `${item.license} (${item.num_themes})`;
selectionInput.classList.add("licenseSelectionInput");
} else if ("headingName" in item) {
selectionInput.value = `${item.headingName}-column`;
selectionInputLabel.innerHTML = item.headingText;

View File

@ -1,20 +1,11 @@
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"
function getMenuSortBy(sortBySelector) {
let sortByNumThemes = document.getElementById(
`${sortBySelector}SortByNumThemes`
);
if (featureSortByNumThemes === null) {
if (sortByNumThemes === null) {
return "numThemes";
} else {
return featureSortByNumThemes.checked ? "numThemes" : "name";
return sortByNumThemes.checked ? "numThemes" : "name";
}
}
@ -56,46 +47,65 @@ function buildColumnSelectionDiv(selectedColumns, dState, eParent) {
// called from buildPage.js
function buildSelectionMenu(
tagAndFeatureFilteredThemes,
sorted_themes,
sortBy,
selectedTags,
selectedFeatures,
selectedLicenses,
selectedColumns,
dState
) {
let tagSortBy = getTagSortBy();
let featureSortBy = getFeatureSortBy();
let tagSortBy = getMenuSortBy("tag");
let featureSortBy = getMenuSortBy("feature");
let licenseSortBy = getMenuSortBy("license");
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 getAvailableTagsAndFeatures.js
let availableLicences = getAvailableLicenses(
tagAndFeatureFilteredThemes,
licenseSortBy
);
// from buildSortByDiv.js
buildSortByDiv((sortedBy = sortBy), (sortByRowDisplay = dState.sortByRow));
buildSortByDiv(sortBy, dState.sortByRow);
buildColumnSelectionDiv(
(selectedColumns = selectedColumns),
(dState = dState),
(eParent = selectionMenuDiv)
buildColumnSelectionDiv(selectedColumns, dState, selectionMenuDiv);
// from buildSelectionDivs.js
buildSelectionDiv(
selectedLicenses,
availableLicences,
licenseSortBy,
dState.licenseSelectionRow,
dState.licenseSelectionHeadingRow,
selectionMenuDiv,
"license"
);
// from buildTagAndFeatureSelectionDivs.js
buildTagSelectionDiv(
(selectedTags = selectedTags),
(availableTags = availableTags),
(tagSortBy = tagSortBy),
(dState = dState),
(eParent = selectionMenuDiv)
// from buildSelectionDivs.js
buildSelectionDiv(
selectedTags,
availableTags,
tagSortBy,
dState.tagSelectionRow,
dState.tagSelectionHeadingRow,
selectionMenuDiv,
"tag"
);
// from buildTagAndFeatureSelectionDivs.js
buildFeatureSelectionDiv(
(selectedFeatures = selectedFeatures),
(availableFeatures = availableFeatures),
(featureSortBy = featureSortBy),
(dState = dState),
(eParent = selectionMenuDiv)
// from buildSelectionDivs.js
buildSelectionDiv(
selectedFeatures,
availableFeatures,
featureSortBy,
dState.featureSelectionRow,
dState.featureSelectionHeadingRow,
selectionMenuDiv,
"feature"
);
}

View File

@ -21,52 +21,52 @@ function buildSortByDiv(sortBy, sortByRowDisplay) {
// from buildButton.js
let sortByStarsButton = buildRadioButton(
(inputID = "sortByStars"),
(inputName = "sortBy"),
(inputValue = "stars"),
(sortedBy = sortBy[0]),
(sortedBySelector = "stars"),
(labelText = "Stars")
"sortByStars",
"sortBy",
"stars",
sortBy[0],
"stars",
"Stars"
);
// from buildButton.js
let sortByLastCommitButton = buildRadioButton(
(inputID = "sortByDate"),
(inputName = "sortBy"),
(inputValue = "date"),
(sortedBy = sortBy[0]),
(sortedBySelector = "date"),
(labelText = "Latest Commit Date")
"sortByDate",
"sortBy",
"date",
sortBy[0],
"date",
"Latest Commit Date"
);
// from buildButton.js
let sortByMinVerButton = buildRadioButton(
(inputID = "sortByMinVer"),
(inputName = "sortBy"),
(inputValue = "minVer"),
(sortedBy = sortBy[0]),
(sortedBySelector = "minVer"),
(labelText = "Min Hugo Version")
"sortByMinVer",
"sortBy",
"minVer",
sortBy[0],
"minVer",
"Min Hugo Version"
);
// from buildButton.js
let sortByLicenseButton = buildRadioButton(
(inputID = "sortByLicense"),
(inputName = "sortBy"),
(inputValue = "license"),
(sortedBy = sortBy[0]),
(sortedBySelector = "license"),
(labelText = "License")
"sortByLicense",
"sortBy",
"license",
sortBy[0],
"license",
"License"
);
// from buildButton.js
let sortByNameButton = buildRadioButton(
(inputID = "sortByName"),
(inputName = "sortBy"),
(inputValue = "name"),
(sortedBy = sortBy[0]),
(sortedBySelector = "name"),
(labelText = "Name")
"sortByName",
"sortBy",
"name",
sortBy[0],
"name",
"Name"
);
sortBy.forEach((x) => {

View File

@ -1,67 +0,0 @@
// 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);
});
}

View File

@ -1,105 +0,0 @@
// 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();
}
};
}

View File

@ -28,6 +28,32 @@ function getAvailableFeatures(sorted_themes, featureSortBy) {
}
}
// called from buildSelectionMenu.js
function getAvailableLicenses(tagAndFeatureFilteredThemes, licenseSortBy) {
let availableLicences = [];
tagAndFeatureFilteredThemes.forEach((x) => {
if (!availableLicences.includes(x.license)) {
availableLicences.push(x.license);
}
});
let availableLicencesMap = availableLicences.map((x) => {
return {
license: x,
num_themes: tagAndFeatureFilteredThemes.filter((y) => y.license === x)
.length,
};
});
if (licenseSortBy === "numThemes") {
return availableLicencesMap
.sort((a, b) => a.license.localeCompare(b.license))
.sort((a, b) => b.num_themes - a.num_themes);
} else {
return availableLicencesMap.sort((a, b) =>
a.license.localeCompare(b.license)
);
}
}
// called from buildSelectionMenu.js
function getAvailableTags(sorted_themes, tagSortBy) {
let result = [];

View File

@ -4,12 +4,15 @@ function showSelectionOptionsButtons() {
"button-for-showing-columns",
"button-for-filter-by-tags",
"button-for-filter-by-features",
"button-for-filter-by-license",
"button-for-filter-by-tags-and-features",
].forEach((x) => (document.getElementById(x).style.display = "inline-block"));
}
let closeableMenus = [
"sortByRow",
"licenseSelectionHeadingRow",
"licenseSelectionRow",
"columnSelectionHeadingRow",
"columnSelectionRow",
"tagSelectionHeadingRow",
@ -85,6 +88,14 @@ document.getElementById("button-for-filter-by-features").onclick = function () {
document.getElementById("featureSelectionRow").style.display = "flex";
};
document.getElementById("button-for-filter-by-license").onclick = function () {
closeMenus();
showSelectionOptionsButtons();
this.style.display = "none";
document.getElementById("licenseSelectionHeadingRow").style.display = "flex";
document.getElementById("licenseSelectionRow").style.display = "flex";
};
document.getElementById("button-for-filter-by-tags-and-features").onclick =
function () {
closeMenus();