diff --git a/templates/js/buildSelectionMenu.js b/templates/js/buildSelectionMenu.js index 35cd49b..c82a96a 100644 --- a/templates/js/buildSelectionMenu.js +++ b/templates/js/buildSelectionMenu.js @@ -1,45 +1,49 @@ 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 tagSelectionHeadingRow = document.createElement("div"); + tagSelectionHeadingRow.id = "tagSelectionHeadingRow"; + tagSelectionHeadingRow.style.maxWidth = "100%"; + tagSelectionHeadingRow.style.display = "flex"; + tagSelectionHeadingRow.style.justifyContent = "space-around"; - let tagSelectionHeading = document.createElement('h2'); + let tagSelectionHeading = document.createElement("h2"); tagSelectionHeading.innerHTML = "Select Tags"; - let tagSortByNameInputDiv = document.createElement('div'); - tagSortByNameInputDiv.style.display = 'flex'; - tagSortByNameInputDiv.style.alignItems = 'center'; - let tagSortByNameInput = document.createElement('input'); - tagSortByNameInput.type = 'radio'; - tagSortByNameInput.id = 'tagSortByName'; - tagSortByNameInput.name = 'tagSortBy'; - tagSortByNameInput.value = 'tagSortByName'; - tagSortByNameInput.checked = tagSortBy === 'name' ? true : false; - tagSortByNameInput.onclick = function() { buildResults(); }; + 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'; + 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(); }; + 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'; + let tagSortByNumThemesInputLabel = document.createElement("label"); + tagSortByNumThemesInputLabel.for = "tagSortByNumThemes"; + tagSortByNumThemesInputLabel.innerHTML = "numThemes"; tagSortByNumThemesInputDiv.appendChild(tagSortByNumThemesInputLabel); tagSelectionHeadingRow.appendChild(tagSelectionHeading); @@ -49,47 +53,52 @@ function buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy) { } 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 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'); + 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(); }; + 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'; + 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(); }; + 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'; + let featureSortByNumThemesInputLabel = document.createElement("label"); + featureSortByNumThemesInputLabel.for = "featureSortByNumThemes"; + featureSortByNumThemesInputLabel.innerHTML = "numThemes"; featureSortByNumThemesInputDiv.appendChild(featureSortByNumThemesInputLabel); featureSelectionHeadingRow.appendChild(featureSelectionHeading); @@ -99,46 +108,63 @@ function buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy) { } function buildTagSelectionDiv(selectedTags, availableTags, tagSortBy) { - let selectionMenuDiv = document.getElementById('selection-menu'); + let selectionMenuDiv = document.getElementById("selection-menu"); buildTagSelectionHeadingRow(selectionMenuDiv, tagSortBy); - let tagSelectionRow = document.createElement('div'); - tagSelectionRow.style.display = 'flex'; - tagSelectionRow.style.flexWrap = 'wrap'; - tagSelectionRow.style.justifyContent = 'space-around'; + let tagSelectionRow = document.createElement("div"); + tagSelectionRow.style.display = "flex"; + tagSelectionRow.style.flexWrap = "wrap"; + tagSelectionRow.style.justifyContent = "space-around"; selectionMenuDiv.appendChild(tagSelectionRow); availableTags .filter((x) => selectedTags.includes(x.tag)) - .forEach((y) => { buildTagSelectionInput(y, true, tagSelectionRow); }); + .forEach((y) => { + buildTagSelectionInput(y, true, tagSelectionRow); + }); availableTags .filter((x) => !selectedTags.includes(x.tag)) - .forEach((y) => { buildTagSelectionInput(y, false, tagSelectionRow); }); + .forEach((y) => { + buildTagSelectionInput(y, false, tagSelectionRow); + }); } -function buildFeatureSelectionDiv(selectedFeatures, availableFeatures, featureSortBy) { - let selectionMenuDiv = document.getElementById('selection-menu'); +function buildFeatureSelectionDiv( + selectedFeatures, + availableFeatures, + featureSortBy +) { + let selectionMenuDiv = document.getElementById("selection-menu"); buildFeatureSelectionHeadingRow(selectionMenuDiv, featureSortBy); - let featureSelectionRow = document.createElement('div'); - featureSelectionRow.style.display = 'flex'; - featureSelectionRow.style.flexWrap = 'wrap'; - featureSelectionRow.style.justifyContent = 'space-around'; + let featureSelectionRow = document.createElement("div"); + featureSelectionRow.style.display = "flex"; + 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); }); + .forEach((y) => { + buildFeatureSelectionInput(y, true, featureSelectionRow); + }); availableFeatures .filter((x) => !selectedFeatures.includes(x.feature)) - .forEach((y) => { buildFeatureSelectionInput(y, false, featureSelectionRow); }); + .forEach((y) => { + buildFeatureSelectionInput(y, false, featureSelectionRow); + }); } -function buildSelectionMenu(sorted_themes, sortedBy, selectedTags, selectedFeatures) { +function buildSelectionMenu( + sorted_themes, + sortedBy, + selectedTags, + selectedFeatures +) { let tagSortBy = getTagSortBy(); let featureSortBy = getFeatureSortBy(); let availableTags = getAvailableTags(sorted_themes, tagSortBy);