Merge pull request #143 from samvera/138-slider-bug

Fix pagination for homepage sliders in Chrome
samvera · Apr 26, 2024 · 4505819 · 4505819
2 parents 3c6851d + 81c2b5a
commit 4505819
Show file tree

Hide file tree

Showing 4 changed files with 1,259 additions and 1,216 deletions.
diff --git a/components/home/AppBanner.jsx b/components/home/AppBanner.jsx
@@ -71,11 +71,18 @@ export default function AppBanner({ banner }) {
                   {description}
                 </p>
                 <div className="flex items-center mt-8 gap-x-6">
-                  <a href={url} className="button">
+                  <a
+                    href={url}
+                    className="button"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
                     Documentation
                   </a>
                   <a
                     href={githubUrl}
+                    target="_blank"
+                    rel="noreferrer noopener"
                     className="text-sm font-semibold leading-6 text-gray-900"
                   >
                     View on GitHub <span aria-hidden="true">→</span>

diff --git a/components/home/FeaturedAppsSlider.jsx b/components/home/FeaturedAppsSlider.jsx
@@ -43,41 +43,20 @@ const FeaturedAppsSlider = () => {
         }
       `,
       ],
+      pagination: {
+        clickable: true,
+      },
     };
 
     Object.assign(refCurrent, params);
     refCurrent.initialize();
-    refCurrent.addEventListener("click", handleSlideClick);
-
-    // Clean up, avoid memory leaks
-    return () => {
-      refCurrent.removeEventListener("click", handleSlideClick);
-    };
   }, []);
 
-  function handleSlideClick(pointerEvent) {
-    const clickedOnSelectableText =
-      pointerEvent.target.className.includes("swiper-no-swiping");
-
-    if (clickedOnSelectableText) return;
-
-    const swiper = swiperRef.current.swiper;
-    const clickedOnLeftHalf = pointerEvent.x < swiper.width / 2;
-
-    if (clickedOnLeftHalf) {
-      swiper.slidePrev();
-    } else {
-      swiper.slideNext();
-    }
-  }
-
   return (
     <section className="mb-5">
       <swiper-container
         init="false"
         ref={swiperRef}
-        loop="true"
-        pagination="true"
         slides-per-view="1"
         speed="1500"
       >

diff --git a/package.json b/package.json
@@ -14,48 +14,48 @@
   },
   "dependencies": {
     "-": "^0.0.1",
-    "@contentful/rich-text-from-markdown": "^15.16.9",
-    "@contentful/rich-text-react-renderer": "^15.19.0",
-    "@headlessui/react": "^1.7.18",
+    "@contentful/rich-text-from-markdown": "^15.16.15",
+    "@contentful/rich-text-react-renderer": "^15.19.6",
+    "@headlessui/react": "^1.7.19",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@heroicons/react": "^2.1.1",
-    "@tanstack/react-query": "^5.17.19",
-    "autoprefixer": "^10.4.17",
-    "clsx": "^2.1.0",
-    "contentful": "^10.6.16",
+    "@heroicons/react": "^2.1.3",
+    "@tanstack/react-query": "^5.32.0",
+    "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
+    "contentful": "^10.8.10",
     "copy-webpack-plugin": "^12.0.2",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "deepmerge": "^4.3.1",
-    "framer-motion": "^11.0.25",
+    "framer-motion": "^11.1.7",
     "gray-matter": "^4.0.3",
     "jest": "^29.7.0",
     "leaflet": "^1.9.4",
-    "markdown-it": "^14.0.0",
-    "next": "^14.1.0",
+    "markdown-it": "^14.1.0",
+    "next": "^14.2.3",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "remark-rehype": "^11.1.0",
-    "sass": "^1.70.0",
-    "swiper": "^11.0.5",
+    "sass": "^1.75.0",
+    "swiper": "^11.1.1",
     "unified": "^11.0.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.5",
     "depcheck": "^1.4.7",
-    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.1.0",
-    "eslint-plugin-jest-dom": "^5.1.0",
+    "eslint": "^9.1.1",
+    "eslint-config-next": "^14.2.3",
+    "eslint-plugin-jest-dom": "^5.4.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.38",
     "remark-parse": "^11.0.0",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.3"
   }
 }