add filter by license

templates/base.html

@@ -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' %}

templates/js/buildPage.js

@@ -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()
   );
 }
 

templates/js/buildSelectionDivs.js

@@ -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);
+    });
+}

templates/js/buildSelectionHeadingRows.js

@@ -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();
+    }
+  };
+}

templates/js/buildSelectionInputs.js

@@ -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;

templates/js/buildSelectionMenu.js

@@ -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"
   );
 }

templates/js/buildSortByDiv.js

@@ -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) => {

templates/js/buildTagAndFeatureSelectionDivs.js

@@ -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);
-    });
-}

templates/js/buildTagAndFeatureSelectionHeadingRows.js

@@ -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();
-    }
-  };
-}

templates/js/getAvailableTagsAndFeatures.js

@@ -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 = [];

templates/js/selectionMenuCollapse.js

@@ -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();