PNI - Renamed function/file names to increase code readability (#12932)

* renamed function name 'moveCreepyFace' to 'toggleCreepyFace'

* renamed function name 'toggleProducts' to 'filterProductsBySearchText'

* renamed function name 'showProductsForCategory' to 'filterProductsByCategory'

* renamed function name 'test' to 'productContainsSearchText'

* renamed function name 'checkForEmptyNotice' to 'toggleNoResultsNotice'

* renamed file name 'slider-area.js' to 'subcategory-scroll.js'

source/js/buyers-guide/search/history.js

@@ -219,7 +219,7 @@ export function applyHistory(instance) {
   instance.filterSubcategory(parent || category);
   Utils.updateHeader(category, parent);
   Utils.sortProductCards();
-  Utils.moveCreepyFace();
+  Utils.toggleCreepyFace();
 
   if (history.state?.parent && history.state?.category) {
     Utils.scrollToSubCategory(history.state?.category);

source/js/buyers-guide/search/pni-toggle.js

@@ -73,7 +73,7 @@ export class PNIToggle {
 
     if (searchFilter.searchInput.value.trim()) {
       searchFilter.searchInput.focus();
-      Utils.checkForEmptyNotice();
+      Utils.toggleNoResultsNotice();
     }
   }
 }

source/js/buyers-guide/search/search-filter.js

@@ -1,7 +1,7 @@
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { Utils } from "./utils.js";
-import { markScrollStart } from "./slider-area.js";
+import { markScrollStart } from "./subcategory-scroll.js";
 import { setupHistoryManagement, applyHistory } from "./history.js";
 import {
   setupNavLinks,
@@ -198,7 +198,7 @@ export class SearchFilter {
     });
 
     Utils.sortProductCards();
-    Utils.moveCreepyFace();
+    Utils.toggleCreepyFace();
 
     const state = { ...history.state, search: "" };
     const title = Utils.getTitle(this.categoryTitle.value.trim());
@@ -218,15 +218,15 @@ export class SearchFilter {
 
     Utils.updateHeader("None", null);
     Utils.setActiveCatNavLink("None");
-    Utils.toggleProducts(text);
+    Utils.filterProductsBySearchText(text);
 
     const state = { ...history.state, search: text };
     const title = Utils.getTitle(this.categoryTitle.value.trim());
     history.replaceState(state, title, this.getURL(text));
 
     Utils.sortFilteredProducts();
-    Utils.moveCreepyFace();
-    Utils.checkForEmptyNotice();
+    Utils.toggleCreepyFace();
+    Utils.toggleNoResultsNotice();
   }
 
   clearCategories() {
@@ -242,12 +242,12 @@ export class SearchFilter {
       .classList.add("tw-hidden");
     toggleProductReviewView();
     toggleCategoryRelatedArticles(category);
-    Utils.showProductsForCategory(category);
+    Utils.filterProductsByCategory(category);
     Utils.toggleCtaForCategory(category);
     this.categoryTitle.value = category;
     Utils.sortProductCards();
-    Utils.moveCreepyFace();
-    Utils.checkForEmptyNotice();
+    Utils.toggleCreepyFace();
+    Utils.toggleNoResultsNotice();
   }
 
   toggleSubcategory(clear = false) {

source/js/buyers-guide/search/slider-area.js → source/js/buyers-guide/search/subcategory-scroll.js

@@ -1,7 +1,5 @@
 /**
  * Mouse/touch scroll functionality for the sub category area on mobile
- *
- * @todo Rename this file to something more specific. Maybe something like subcategory-scroll.js
  */
 const subcategories = document.querySelectorAll(`.subcategories`);
 const subContainer = document.querySelector(`.subcategory-header`);

source/js/buyers-guide/search/utils.js

@@ -137,13 +137,11 @@ export class Utils {
    * Toggle products' visibility based on search text
    *
    * @param {String} text search text
-   *
-   * @todo Rename to "filterProductsBySearchText"
    */
-  static toggleProducts(text) {
+  static filterProductsBySearchText(text) {
     gsap.set(ALL_PRODUCTS, { opacity: 1, y: 0 });
     ALL_PRODUCTS.forEach((product) => {
-      if (this.test(product, text)) {
+      if (this.productContainsSearchText(product, text)) {
         product.classList.remove(`d-none`);
         product.classList.add(`d-flex`);
       } else {
@@ -216,10 +214,8 @@ export class Utils {
    * Toggle products' visibility based on category
    *
    * @param {String} category category name
-   *
-   * @todo Rename to "filterProductsByCategory"
    */
-  static showProductsForCategory(category) {
+  static filterProductsByCategory(category) {
     gsap.set(ALL_PRODUCTS, { opacity: 1, y: 0 });
     ALL_PRODUCTS.forEach((product) => {
       if (this.testCategories(product, category)) {
@@ -257,10 +253,8 @@ export class Utils {
    * @param {Element} product DOM element of the product
    * @param {String} text search text
    * @returns {Boolean} Whether the product contains the search text
-   *
-   * @todo Rename to "doesProductContainSearchText"
    */
-  static test(product, text) {
+  static productContainsSearchText(product, text) {
     // Note that the following is absolutely not true for all
     // languages, but it's true for the ones we use.
     text = text.toLowerCase();
@@ -335,10 +329,9 @@ export class Utils {
 
   /**
    * Toggle the visibility of "no results" notice
-   *
-   * @todo Rename to "toggleNoResultsNotice"
+   * based on the number of products displayed
    */
-  static checkForEmptyNotice() {
+  static toggleNoResultsNotice() {
     let qs = `figure.product-box:not(.d-none)`;
 
     if (document.body.classList.contains(`show-ding-only`)) {
@@ -357,11 +350,9 @@ export class Utils {
   }
 
   /**
-   * Toggle the visibility of the creepy face and speech
-   *
-   * @todo Rename to "toggleCreepyFace"
+   * Toggle the visibility of the creepy face and speech bubble
    */
-  static moveCreepyFace() {
+  static toggleCreepyFace() {
     const CREEPINESS_FACE = document.querySelector(
       ".creep-o-meter-information"
     );