diff --git a/.eslintrc.json b/.eslintrc.json index d403975d7ec..bfa8c17fa0c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,11 +1,8 @@ { - "plugins": [ - "prettier", - "react" - ], + "plugins": ["prettier", "react"], "parserOptions": { "sourceType": "module", - "ecmaVersion": 2018, + "ecmaVersion": 2020, "ecmaFeatures": { "jsx": true } @@ -14,7 +11,12 @@ "es6": true }, "rules": { - "prettier/prettier": "error", + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + } + ], "react/jsx-uses-vars": "error" } } diff --git a/network-api/networkapi/wagtailpages/pagemodels/products.py b/network-api/networkapi/wagtailpages/pagemodels/products.py index 5f5086fa8d9..2cf976c718b 100644 --- a/network-api/networkapi/wagtailpages/pagemodels/products.py +++ b/network-api/networkapi/wagtailpages/pagemodels/products.py @@ -169,7 +169,6 @@ class BuyersGuideProductCategory(TranslatableMixin, LocalizedSnippet, models.Mod FieldPanel('description'), SnippetChooserPanel('parent'), FieldPanel('featured'), - SnippetChooserPanel('parent'), FieldPanel('hidden'), FieldPanel('sort_order'), ImageChooserPanel('share_image'), diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html b/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html index 7300237828a..4f7cee25a39 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html @@ -94,9 +94,11 @@ {% for cat in categories %} {% with original=cat.original %} - {% if original.published_product_page_count > 0 %} - {% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %} - {{ cat.name }} + {% if cat.parent == None %} + {% if original.published_product_page_count > 0 %} + {% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %} + {{ cat.name }} + {% endif %} {% endif %} {% endwith %} {% endfor %} diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html b/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html index 5eace4d18b5..3a25b7807bd 100644 --- a/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html +++ b/network-api/networkapi/wagtailpages/templates/buyersguide/catalog.html @@ -1,13 +1,15 @@ {% extends "buyersguide/bg_base.html" %} -{% load env i18n static wagtailimages_tags cache bg_nav_tags %} +{% load env i18n static wagtailimages_tags cache bg_nav_tags localization %} {% block bodyclass %}pni catalog{% endblock %} {% block main_content_class %}{% endblock %} {% block hero %} - + + +
{{ page.header }} {% block guts %}
-
+
- + @@ -52,12 +54,39 @@

{{ page.header }}

 - - - -   - - + +
+
+
+ {% if current_category.parent %}{{current_category.parent.localized.name}}{% elif current_category %}{{current_category.localized.name}}{% else %}{% trans "All" %}{% endif %} + + + + +   + + +
+ +
+
+
+
+ {% for cat in categories %} + {% with original=cat.original %} + {% if cat.parent != None %} + {% if original.published_product_page_count > 0 %} + {% localizedroutablepageurl home_page 'category-view' original.slug as cat_url %} + + {{ cat.name }} + + {% endif %} + {% endif %} + {% endwith %} + {% endfor %}
diff --git a/source/js/buyers-guide/search.js b/source/js/buyers-guide/search.js index 22726b45e64..897d1f6320c 100644 --- a/source/js/buyers-guide/search.js +++ b/source/js/buyers-guide/search.js @@ -7,7 +7,9 @@ const SORTS = [`name`, `company`, `blurb`]; const SUBMIT_PRODUCT = document.querySelector(".recommend-product"); const CREEPINESS_FACE = document.querySelector(".creep-o-meter-information"); const categoryTitle = document.querySelector(`.category-title`); +const parentTitle = document.querySelector(`.parent-title`); const toggle = document.querySelector(`#product-filter-pni-toggle`); +const subcategories = document.querySelectorAll(`.subcategories`); const SearchFilter = { init: () => { @@ -27,7 +29,6 @@ const SearchFilter = { if (searchText) { searchBar.classList.add(`has-content`); - SearchFilter.filter(searchText); } }); @@ -90,19 +91,71 @@ const SearchFilter = { { title: SearchFilter.getTitle(evt.target.dataset.name), category: evt.target.dataset.name, + parent: "", search: "", - filter: history.state.filter, + filter: history.state?.filter, }, SearchFilter.getTitle(evt.target.dataset.name), evt.target.href ); document.title = SearchFilter.getTitle(evt.target.dataset.name); + SearchFilter.filterSubcategory(evt.target.dataset.name); + SearchFilter.toggleSubcategory(true); + SearchFilter.updateHeader(evt.target.dataset.name, ""); SearchFilter.filterCategory(evt.target.dataset.name); } }); } + for (const subcategory of subcategories) { + subcategory.addEventListener("click", (evt) => { + evt.stopPropagation(); + + if (evt.shiftKey || evt.metaKey || evt.ctrlKey || evt.altKey) { + return; + } + + evt.preventDefault(); + + let href; + + if (evt.target.dataset.name) { + clearText(); + if (categoryTitle.value.trim() !== evt.target.dataset.name) { + categoryTitle.value = evt.target.dataset.name; + parentTitle.value = evt.target.dataset.parent; + href = evt.target.href; + SearchFilter.toggleSubcategory(); + SearchFilter.highlightParent(); + } else { + categoryTitle.value = evt.target.dataset.parent; + parentTitle.value = ""; + href = document.querySelector( + `#multipage-nav a[data-name="${evt.target.dataset.parent}"]` + ).href; + SearchFilter.toggleSubcategory(true); + } + + history.pushState( + { + title: SearchFilter.getTitle(evt.target.dataset.name), + category: categoryTitle.value.trim(), + parent: parentTitle.value.trim(), + search: "", + filter: history.state?.filter, + }, + SearchFilter.getTitle(evt.target.dataset.name), + href + ); + + document.title = SearchFilter.getTitle(categoryTitle.value.trim()); + SearchFilter.updateHeader(categoryTitle.value.trim(), ""); + SearchFilter.filterCategory(categoryTitle.value.trim()); + } + }); + } + document .querySelector(`.go-back-to-all-link`) .addEventListener("click", (evt) => { @@ -114,8 +167,9 @@ const SearchFilter = { { title: SearchFilter.getTitle("None"), category: "None", + parent: "", search: "", - filter: history.state.filter, + filter: history.state?.filter, }, SearchFilter.getTitle(evt.target.dataset.name), evt.target.href @@ -130,39 +184,52 @@ const SearchFilter = { .classList.add(`active`); SearchFilter.filterCategory("None"); + parentTitle.value = ""; }); window.addEventListener(`popstate`, (event) => { const { state } = event; if (!state) return; // if it's a "real" back, we shouldn't need to do anything - const { title, category } = state; + const { title, category, parent } = state; document.title = title; - if (!history.state.search) { + if (!history.state?.search) { SearchFilter.clearCategories(); - SearchFilter.filterCategory(category); + categoryTitle.value = category; + parentTitle.value = parent; + searchBar.classList.remove(`has-content`); searchInput.value = ``; - document - .querySelector(`#multipage-nav a.active`) - .classList.remove(`active`); + if (parent) { + SearchFilter.highlightParent(); + SearchFilter.toggleSubcategory(); + } else { + document + .querySelector(`#multipage-nav a.active`) + .classList.remove(`active`); - document - .querySelector(`#multipage-nav a[data-name="${category}"]`) - .classList.add(`active`); + document + .querySelector(`#multipage-nav a[data-name="${category}"]`) + .classList.add(`active`); + + SearchFilter.toggleSubcategory(true); + } } else { - SearchFilter.filterCategory(category); + SearchFilter.toggleSubcategory(true); searchBar.classList.add(`has-content`); - searchInput.value = history.state.search; - SearchFilter.filter(history.state.search); + searchInput.value = history.state?.search; + SearchFilter.filter(history.state?.search); } - if (history.state.filter) { - toggle.checked = history.state.filter; + SearchFilter.filterCategory(category); + SearchFilter.updateHeader(category, parent); - if (history.state.filter) { + if (history.state?.filter) { + toggle.checked = history.state?.filter; + + if (history.state?.filter) { document.body.classList.add(`show-ding-only`); } else { document.body.classList.remove(`show-ding-only`); @@ -174,42 +241,70 @@ const SearchFilter = { { title: SearchFilter.getTitle(categoryTitle.value.trim()), category: categoryTitle.value.trim(), - search: history.state.search || "", - filter: history.state.filter, + parent: parentTitle.value.trim(), + search: history.state?.search ?? "", + filter: history.state?.filter, }, SearchFilter.getTitle(categoryTitle.value.trim()), location.href ); - if (history.state.search) { + if (history.state?.search) { searchBar.classList.add(`has-content`); - searchInput.value = history.state.search; - SearchFilter.filter(history.state.search); + searchInput.value = history.state?.search; + SearchFilter.filter(history.state?.search); } else { searchBar.classList.remove(`has-content`); searchInput.value = ``; } - if (history.state.filter) { - toggle.checked = history.state.filter; + if (history.state?.filter) { + toggle.checked = history.state?.filter; - if (history.state.filter) { + if (history.state?.filter) { document.body.classList.add(`show-ding-only`); } else { document.body.classList.remove(`show-ding-only`); } } + + if (parentTitle.value) { + SearchFilter.highlightParent(); + SearchFilter.toggleSubcategory(); + } }, clearCategories: () => { SearchFilter.filterCategory("None"); + parentTitle.value = null; + + if (document.querySelector(`#multipage-nav a.active`)) { + document + .querySelector(`#multipage-nav a.active`) + .classList.remove(`active`); + document + .querySelector(`#multipage-nav a[data-name="None"]`) + .classList.add(`active`); + } + }, - document - .querySelector(`#multipage-nav a.active`) - .classList.remove(`active`); - document - .querySelector(`#multipage-nav a[data-name="None"]`) - .classList.add(`active`); + updateHeader: (category, parent) => { + if (parent) { + document.querySelector(".category-header").textContent = parent; + } else { + const header = category === "None" ? "All" : category; + document.querySelector(".category-header").textContent = header; + } + }, + + filterSubcategory: (category) => { + for (const subcategory of subcategories) { + if (subcategory.dataset.parent === category) { + subcategory.classList.remove(`tw-hidden`); + } else { + subcategory.classList.add(`tw-hidden`); + } + } }, getTitle: (category) => { @@ -238,10 +333,14 @@ const SearchFilter = { filter: (text) => { // remove category filters SearchFilter.clearCategories(); + SearchFilter.toggleSubcategory(true); + + if (document.querySelector(`#multipage-nav a.active`)) { + document + .querySelector(`#multipage-nav a.active`) + .classList.remove(`active`); + } - document - .querySelector(`#multipage-nav a.active`) - .classList.remove(`active`); document .querySelector(`#multipage-nav a[data-name="None"]`) .classList.add(`active`); @@ -329,6 +428,61 @@ const SearchFilter = { SearchFilter.checkForEmptyNotice(); }, + highlightParent: () => { + if (document.querySelector(`#multipage-nav a.active`)) { + document + .querySelector(`#multipage-nav a.active`) + .classList.remove(`active`); + } + + document + .querySelector( + `#multipage-nav a[data-name="${parentTitle.value.trim()}"]` + ) + .classList.add(`active`); + }, + + toggleSubcategory: (clear = false) => { + const activeClasses = [ + "active", + "tw-bg-gray-80", + "tw-text-white", + "tw-border-gray-80", + ]; + const defaultClasses = [ + "hover:tw-border-pni-lilac", + "hover:tw-bg-pni-lilac", + "tw-text-gray-60", + "tw-border-gray-20", + "tw-bg-white", + ]; + + if (document.querySelector(`a.subcategories.active`)) { + document + .querySelector(`a.subcategories.active`) + .classList.add(...defaultClasses); + document + .querySelector(`a.subcategories.active`) + .classList.remove(...activeClasses); + } + + if (clear) { + return; + } + + document + .querySelector( + `a.subcategories[data-name="${categoryTitle.value.trim()}"]` + ) + .classList.add(...activeClasses); + + document + .querySelector( + `a.subcategories[data-name="${categoryTitle.value.trim()}"]` + ) + .classList.remove(...defaultClasses); + }, + checkForEmptyNotice: () => { let qs = `figure.product-box:not(.d-none)`; diff --git a/source/sass/buyers-guide/views/catalog.scss b/source/sass/buyers-guide/views/catalog.scss index 0c5f858c47f..2e15c7b3ebd 100644 --- a/source/sass/buyers-guide/views/catalog.scss +++ b/source/sass/buyers-guide/views/catalog.scss @@ -2,7 +2,7 @@ body.catalog { $hero-breakpoint: $bp-lg; $breakpoint: $bp-md; - --sticky-height: 128px; + --sticky-height: 90px; --creep-o-height: 70px; --expanded-sticky-height: calc(11em + var(--creep-o-height)); --small-sticky-height: calc(var(--expanded-sticky-height) - 6em);