Added changes to pushstate

MozillaFoundation · Oct 21, 2021 · 5c7e185 · 5c7e185
1 parent 85e80a0
commit 5c7e185
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 8 deletions.
diff --git a/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html b/network-api/networkapi/wagtailpages/templates/buyersguide/bg_base.html
@@ -9,7 +9,6 @@
 {% else %}{% blocktrans context "“*privacy not included” can be localized. This is a reference to the “*batteries not included” mention on toys." %}*privacy not included | Shop smart and safe{% endblocktrans %} | Mozilla Foundation{% endif %}
 {% endblock %}
 
-
 {# TODO: consider using a different ga_identifier? #}
 
 
@@ -23,6 +22,8 @@
 
 {% block wagtail_metadata %}
   {% meta_tags %}
+  <meta name="pni-home-title" content="{% blocktrans context "“*privacy not included” can be localized. This is a reference to the “*batteries not included” mention on toys." %}*privacy not included | Shop smart and safe | Mozilla Foundation{% endblocktrans %}">
+  <meta name="pni-category-title" content="{% trans "Privacy & Security Guide | Mozilla Foundation" %}">
 {% endblock %}
 
 

diff --git a/package.json b/package.json
@@ -46,7 +46,7 @@
     "server": "python network-api/manage.py runserver 0.0.0.0:8000",
     "server:silent": "python network-api/manage.py runserver 0.0.0.0:8000 >> server.log 2>&1",
     "start": "docker-compose up",
-    "sync": "browser-sync start --proxy \"localhost:8000\" --reload-debounce 50 --files \"./network-api/networkapi/**/*.html\" \"./network-api/networkapi/frontend/_css/*.css\" \"./network-api/networkapi/frontend/_js/*.js\"",
+    "sync": "npx browser-sync start --proxy \"localhost:8000\" --reload-debounce 50 --files \"./network-api/networkapi/**/*.html\" \"./network-api/networkapi/frontend/_css/*.css\" \"./network-api/networkapi/frontend/_js/*.js\"",
     "tailwind": "run-p tailwind:watch sync",
     "tailwind:watch": "tailwindcss -i source/postcss/tailwind.css -o network-api/networkapi/frontend/_css/tailwind.compiled.css -w",
     "test:procfile": "node test/test-procfile.js",

diff --git a/source/js/buyers-guide/search.js b/source/js/buyers-guide/search.js
@@ -41,6 +41,7 @@ const SearchFilter = {
       searchInput.value = ``;
       searchInput.focus();
       ALL_PRODUCTS.forEach((product) => product.classList.remove(`d-none`));
+      SearchFilter.sortOnCreepiness();
       SearchFilter.moveCreepyFace();
     };
 
@@ -54,18 +55,32 @@ const SearchFilter = {
     for (const nav of navLinks) {
       nav.addEventListener("click", (evt) => {
         evt.stopPropagation();
+
         if (evt.shiftKey || evt.metaKey || evt.ctrlKey || evt.altKey) {
           return;
         }
+
         evt.preventDefault();
-        history.pushState(null, "", evt.target.href);
+
         document
           .querySelector(`#multipage-nav a.active`)
           .classList.remove(`active`);
 
         evt.target.classList.add(`active`);
 
         if (evt.target.dataset.name) {
+          clearText();
+          history.pushState(
+            {
+              title: SearchFilter.getTitle(evt.target.dataset.name),
+              href: window.location.href,
+              category: evt.target.dataset.name,
+            },
+            SearchFilter.getTitle(evt.target.dataset.name),
+            evt.target.href
+          );
+
+          document.title = SearchFilter.getTitle(evt.target.dataset.name);
           SearchFilter.filterCategory(evt.target.dataset.name);
         }
       });
@@ -80,11 +95,23 @@ const SearchFilter = {
         SearchFilter.filterCategory("None");
       });
 
-    window.onpopstate = function (event) {
-      location.reload();
-    };
+    window.addEventListener(`popstate`, (event) => {
+      const { state } = event;
+      if (!state) return; // if it's a "real" back, we shouldn't need to do anything
 
-    SearchFilter.sortProducts();
+      const { title, category } = state;
+      document.title = title;
+      SearchFilter.clearCategories();
+      SearchFilter.filterCategory(category);
+
+      document
+        .querySelector(`#multipage-nav a.active`)
+        .classList.remove(`active`);
+
+      document
+        .querySelector(`#multipage-nav a[data-name="${category}"]`)
+        .classList.add(`active`);
+    });
   },
 
   clearCategories: () => {
@@ -98,6 +125,16 @@ const SearchFilter = {
       .classList.add(`active`);
   },
 
+  getTitle: (category) => {
+    if (category == "None")
+      return document.querySelector('meta[name="pni-home-title"]').content;
+    else {
+      return `${category} | ${
+        document.querySelector('meta[name="pni-category-title"]').content
+      }`;
+    }
+  },
+
   moveCreepyFace: () => {
     // When searching, check to see how many products are still visible
     // If there are no visible products, there are "no search results"
@@ -114,6 +151,7 @@ const SearchFilter = {
   filter: (text) => {
     // remove category filters
     SearchFilter.clearCategories();
+
     document
       .querySelector(`#multipage-nav a.active`)
       .classList.remove(`active`);
@@ -169,6 +207,15 @@ const SearchFilter = {
     list.forEach((p) => container.append(p));
   },
 
+  sortOnCreepiness: () => {
+    const container = document.querySelector(`.product-box-list`);
+    const list = [...container.querySelectorAll(`.product-box`)];
+    const creepVal = (e) => parseFloat(e.dataset.creepiness);
+    list
+      .sort((a, b) => creepVal(a) - creepVal(b))
+      .forEach((p) => container.append(p));
+  },
+
   filterCategory: (category) => {
     ALL_PRODUCTS.forEach((product) => {
       if (SearchFilter.testCategories(product, category)) {
@@ -180,7 +227,7 @@ const SearchFilter = {
       }
     });
 
-    SearchFilter.sortProducts();
+    SearchFilter.sortOnCreepiness();
     SearchFilter.moveCreepyFace();
     SearchFilter.checkForEmptyNotice();
   },