add radio input for sorting tags,features by name or numThemes

This commit is contained in:
Trent Palmer 2021-08-11 19:36:41 -07:00
parent df506a49aa
commit e22858894e
6 changed files with 194 additions and 67 deletions

View File

@ -401,7 +401,7 @@ def update_features_list_for_each_hugo_themes():
theme_toml = toml.loads(match.sub(r'"\1"\n', content))
if 'features' in theme_toml:
if len(theme_toml['features']) > 0:
theme_features = [feature.lower() for feature in theme_toml['features'] if len(feature) > 0]
theme_features = [feature.lower() for feature in theme_toml['features'] if len(feature) > 1]
if theme.num_features != len(theme_features): theme.num_features = len(theme_features)
if theme.num_features > 0:
if theme.features_list != str(theme_features): theme.features_list = str(theme_features)
@ -447,7 +447,7 @@ def update_tags_list_for_each_hugo_themes():
if 'tags' in theme_toml:
if len(theme_toml['tags']) > 0:
corrected_tags = get_corrected_tags(theme_toml['tags'])
theme_tags = [tag.lower() for tag in corrected_tags if len(tag) > 0]
theme_tags = [tag.lower() for tag in corrected_tags if len(tag) > 1]
if theme.num_tags != len(theme_tags): theme.num_tags = len(theme_tags)
if theme.num_tags > 0:
if theme.tags_list != str(theme_tags): theme.tags_list = str(theme_tags)

View File

@ -18,6 +18,7 @@
<script>
var themes = {{ themes }};
{% include 'js/selectionMenuCollapse.js' %}
{% include 'js/buildTagAndFeatureSelectionInputs.js' %}
{% include 'js/getAvailableTagsAndFeatures.js' %}
{% include 'js/buildSortByDiv.js' %}
{% include 'js/buildSelectionMenu.js' %}

View File

@ -7,6 +7,24 @@ 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);

View File

@ -1,33 +1,106 @@
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';
function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) {
let tagSelectionHeadingRow = document.createElement('div');
tagSelectionHeadingRow.id = 'tagSelectionHeadingRow';
tagSelectionHeadingRow.style.maxWidth = '100%';
tagSelectionHeadingRow.style.display = 'flex';
tagSelectionHeadingRow.style.justifyContent = 'space-around';
let tagSelectionInput = document.createElement('input');
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);
let tagSelectionInputLabel = document.createElement('label');
tagSelectionInputLabel.for = tag.tag + "-selection-input";
tagSelectionInputLabel.innerHTML = tag.tag + ' (' + tag.num_themes + ')';
tagSelectionInputDiv.appendChild(tagSelectionInputLabel);
tagSelectionRow.appendChild(tagSelectionInputDiv);
}
function buildTagSelectionDiv(selectedTags, availableTags) {
let selectionMenuDiv = document.getElementById('selection-menu');
let tagSelectionHeading = document.createElement('h2');
tagSelectionHeading.innerHTML = "Select Tags";
selectionMenuDiv.appendChild(tagSelectionHeading);
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 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);
tagSelectionHeadingRow.appendChild(tagSelectionHeading);
tagSelectionHeadingRow.appendChild(tagSortByNameInputDiv);
tagSelectionHeadingRow.appendChild(tagSortByNumThemesInputDiv);
selectionMenuDiv.appendChild(tagSelectionHeadingRow);
}
function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) {
let featureSelectionHeadingRow = document.createElement('div');
featureSelectionHeadingRow.id = 'featureSelectionHeadingRow';
featureSelectionHeadingRow.style.maxWidth = '100%';
featureSelectionHeadingRow.style.display = 'flex';
featureSelectionHeadingRow.style.justifyContent = 'space-around';
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 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);
featureSelectionHeadingRow.appendChild(featureSelectionHeading);
featureSelectionHeadingRow.appendChild(featureSortByNameInputDiv);
featureSelectionHeadingRow.appendChild(featureSortByNumThemesInputDiv);
selectionMenuDiv.appendChild(featureSelectionHeadingRow);
}
function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) {
let selectionMenuDiv = document.getElementById('selection-menu');
buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy);
let tagSelectionRow = document.createElement('div');
tagSelectionRow.style.display = 'flex';
@ -45,36 +118,9 @@ function buildTagSelectionDiv(selectedTags, availableTags) {
.forEach((y) => { buildTagSelectionInput(y, false, tagSelectionRow); });
}
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 featureSelectionInput = document.createElement('input');
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);
let featureSelectionInputLabel = document.createElement('label');
featureSelectionInputLabel.for = feature.feature + "-selection-input";
featureSelectionInputLabel.innerHTML = feature.feature + ' (' + feature.num_themes + ')';
featureSelectionInputDiv.appendChild(featureSelectionInputLabel);
featureSelectionRow.appendChild(featureSelectionInputDiv);
}
function buildFeatureSelectionDiv(selectedFeatures, availableFeatures) {
function buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy) {
let selectionMenuDiv = document.getElementById('selection-menu');
let featureSelectionHeading = document.createElement('h2');
featureSelectionHeading.innerHTML = "Select Features";
selectionMenuDiv.appendChild(featureSelectionHeading);
buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy);
let featureSelectionRow = document.createElement('div');
featureSelectionRow.style.display = 'flex';
@ -93,9 +139,11 @@ function buildFeatureSelectionDiv(selectedFeatures, availableFeatures) {
}
function buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures) {
let availableTags = getAvailableTags(sorted_themes);
let availableFeatures = getAvailableFeatures(sorted_themes);
let tagSortBy = getTagSortBy();
let featureSortBy = getFeatureSortBy();
let availableTags = getAvailableTags(sorted_themes, tagSortBy);
let availableFeatures = getAvailableFeatures(sorted_themes, featureSortBy);
buildSortByDiv(sortedBy);
buildTagSelectionDiv(selectedTags, availableTags);
buildFeatureSelectionDiv(selectedFeatures, availableFeatures);
buildTagSelectionDiv(selectedTags, availableTags, tagSortBy);
buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy);
}

View File

@ -0,0 +1,49 @@
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 tagSelectionInput = document.createElement('input');
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);
let tagSelectionInputLabel = document.createElement('label');
tagSelectionInputLabel.for = tag.tag + "-selection-input";
tagSelectionInputLabel.innerHTML = tag.tag + ' (' + tag.num_themes + ')';
tagSelectionInputDiv.appendChild(tagSelectionInputLabel);
tagSelectionRow.appendChild(tagSelectionInputDiv);
}
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 featureSelectionInput = document.createElement('input');
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);
let featureSelectionInputLabel = document.createElement('label');
featureSelectionInputLabel.for = feature.feature + "-selection-input";
featureSelectionInputLabel.innerHTML = feature.feature + ' (' + feature.num_themes + ')';
featureSelectionInputDiv.appendChild(featureSelectionInputLabel);
featureSelectionRow.appendChild(featureSelectionInputDiv);
}

View File

@ -1,4 +1,4 @@
function getAvailableFeatures(sorted_themes) {
function getAvailableFeatures(sorted_themes, featureSortBy) {
let result = [];
sorted_themes.forEach(x => {
x.features.forEach(feature => {
@ -18,11 +18,16 @@ function getAvailableFeatures(sorted_themes) {
}
});
});
// return result.sort((a, b) => a.feature.localeCompare(b.feature));
return result.sort((a, b) => b.num_themes - a.num_themes);
if (featureSortBy === 'numThemes') {
return result
.sort((a, b) => a.feature.localeCompare(b.feature))
.sort((a, b) => b.num_themes - a.num_themes);
} else {
return result.sort((a, b) => a.feature.localeCompare(b.feature));
}
}
function getAvailableTags(sorted_themes) {
function getAvailableTags(sorted_themes, tagSortBy) {
let result = [];
sorted_themes.forEach(x => {
x.tags.forEach(tag => {
@ -42,7 +47,13 @@ function getAvailableTags(sorted_themes) {
}
});
});
return result.sort((a, b) => b.num_themes - a.num_themes);
if (tagSortBy === 'numThemes') {
return result
.sort((a, b) => a.tag.localeCompare(b.tag))
.sort((a, b) => b.num_themes - a.num_themes);
} else {
return result.sort((a, b) => a.tag.localeCompare(b.tag));
}
}