JS cleanup

MozillaFoundation · Nov 24, 2021 · feb27d8 · feb27d8
1 parent 91dcf85
commit feb27d8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/source/js/buyers-guide/search.js b/source/js/buyers-guide/search.js
@@ -20,48 +20,57 @@ const subContainer = document.querySelector(`.subcategory-header`);
 // TODO: turn this into a static class rather than plain JS object.
 const SearchFilter = {
   init: () => {
-    let pos = { top: 0, left: 0, x: 0, y: 0 };
+    let pos = { left: 0, x: 0 };
 
-    const mouseDownHandler = function (event) {
+    const markScrollStart = (event) => {
       event.preventDefault();
       event.stopImmediatePropagation();
-      subContainer.style.cursor = "grabbing";
-      subContainer.style.userSelect = "none";
+      subContainer.classList.add("cursor-grabbing");
+      subContainer.classList.add("select-none");
 
       pos = {
         left: subContainer.scrollLeft,
         x: event.clientX,
       };
 
-      document.addEventListener("mousemove", mouseMoveHandler);
-      document.addEventListener("mouseup", mouseUpHandler);
+      document.addEventListener("mousemove", markScrollMove);
+      document.addEventListener("mouseup", markScrollEnd);
+      document.addEventListener("touchmove", markScrollMove);
+      document.addEventListener("touchend", markScrollEnd);
+      document.addEventListener("touchcancel", markScrollEnd);
     };
 
-    const mouseMoveHandler = function (event) {
+    const markScrollMove = (event) => {
       event.preventDefault();
-      Array.from(subcategories).forEach((subcategory) => {
-        subcategory.style.pointerEvents = "none";
+      subcategories.forEach((subcategory) => {
+        subcategory.classList.add("pointer-events-none");
       });
       const dx = event.clientX - pos.x;
       subContainer.scrollLeft = pos.left - dx;
     };
 
-    const mouseUpHandler = function (event) {
+    const markScrollEnd = (event) => {
       event.preventDefault();
       event.stopImmediatePropagation();
-      subContainer.style.removeProperty("cursor");
-      subContainer.style.removeProperty("user-select");
+      subContainer.classList.remove("cursor-grabbing");
+      subContainer.classList.remove("select-none");
 
-      Array.from(subcategories).forEach((subcategory) => {
-        subcategory.style.removeProperty("pointer-events");
+      subcategories.forEach((subcategory) => {
+        subcategory.classList.remove("pointer-events-none");
       });
 
-      document.removeEventListener("mousemove", mouseMoveHandler);
-      document.removeEventListener("mouseup", mouseUpHandler);
+      document.removeEventListener("mousemove", markScrollMove);
+      document.removeEventListener("mouseup", markScrollEnd);
+      document.removeEventListener("touchmove", markScrollMove);
+      document.removeEventListener("touchend", markScrollEnd);
+      document.removeEventListener("touchcancel", markScrollEnd);
     };
 
-    subContainer.addEventListener("mousedown", mouseDownHandler);
-    subContainer.addEventListener("mouseleave", mouseUpHandler);
+    subContainer.addEventListener("mousedown", markScrollStart);
+    subContainer.addEventListener("mouseleave", markScrollEnd);
+    subContainer.addEventListener("touchstart", markScrollStart);
+    subContainer.addEventListener("touchend", markScrollEnd);
+    subContainer.addEventListener("touchcancel", markScrollEnd);
 
     const searchBar = document.querySelector(`#product-filter-search`);
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -26,7 +26,7 @@ module.exports = {
           columnCount: 3,
         },
         ".hash": {
-          content: "\"#\"",
+          content: '"#"',
         },
         ".no-scrollbar::-webkit-scrollbar": {
           display: "none",
@@ -51,6 +51,9 @@ module.exports = {
       opacity: {
         40: 0.4,
       },
+      cursor: {
+        grabbing: "grabbing",
+      },
     },
     // Overriding default spacing
     spacing: {