Wheel: Use native scroll event instead of external dependency

nir9 · Apr 12, 2023 · 978f0d9 · 978f0d9
1 parent 349ee7c
commit 978f0d9
Show file tree

Hide file tree

Showing 14 changed files with 12 additions and 168 deletions.
diff --git a/README.md b/README.md
@@ -16,11 +16,6 @@ A simple & beautiful touch carousel
 ![ItemSlide](https://raw.github.com/nir9/itemslide/master/website-src/img/image.jpg)
 
 
-#### Optional Plugins (To add features)
-- [jQuery Mousewheel (Adds scrolling) (~2.5KB)](https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js)
-
-
-
 ### Downloading
 
 #### [Download](https://itemslide.org/dist/itemslide.min.js)

diff --git a/dist/itemslide.min.js b/dist/itemslide.min.js
diff --git a/docs/index.html b/docs/index.html
@@ -5,7 +5,6 @@
 
     <title>ItemSlide.js - Documentation</title>
 
-    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
     <link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
     <link href="../website-src/layout.css" rel="stylesheet" />
     <link href="layout.css" rel="stylesheet" />

diff --git a/examples/buttons_carousel/index.html b/examples/buttons_carousel/index.html
@@ -17,9 +17,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
     <script src="../../dist/itemslide.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
 
-    <!--Scripts--->
     <script src="sliding.js"></script>
 
 </head>

diff --git a/examples/fullscreen_navigation/index.html b/examples/fullscreen_navigation/index.html
@@ -11,7 +11,6 @@
 
 
     <script src="../../dist/itemslide.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
 
     <script src="sliding.js"></script>
 

diff --git a/examples/left_carousel/index.html b/examples/left_carousel/index.html
@@ -14,7 +14,6 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
     <script src="../../dist/itemslide.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
 
     <!--Scripts--->
     <script src="sliding.js"></script>

diff --git a/examples/simple_carousel/index.html b/examples/simple_carousel/index.html
diff --git a/examples/simple_carousel/main.css b/examples/simple_carousel/main.css
diff --git a/examples/simple_carousel/sliding.js b/examples/simple_carousel/sliding.js
diff --git a/examples/two_carousels/index.html b/examples/two_carousels/index.html
@@ -17,7 +17,6 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 
     <script src="../../dist/itemslide.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
 
     <!--Scripts--->
     <script src="sliding.js"></script>

diff --git a/index.html b/index.html
@@ -19,12 +19,9 @@
 
     <title>ItemSlide.js - JavaScript touch carousel</title>
 
-    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
-
     <link href="website-src/layout.css" rel="stylesheet" />
     <link href="website-src/sliding.css" rel="stylesheet" />
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
 
     <script src="dist/itemslide.min.js"></script>
     <script src="website-src/sliding.js"></script>

diff --git a/src/mousewheel.js b/src/mousewheel.js
@@ -1,17 +1,18 @@
-// Add mousewheel capability to carousel
-// IF YOU WANT TO ADD MOUSEWHEEL CAPABILITY - USE: https://github.com/jquery/jquery-mousewheel
-
 module.exports = {
     add: function (_this, anim, nav, slides) {
         // Add a mousewheel listener to carousel
         var touchCounter = 0,
             sensetivity = 4; // Less is more (for the touchpad)
 
-        slides.mousewheel(function (e) {
+        slides.on("wheel", function (e) {
+
             // Check if vertical pan is occuring... (if occuring dont continue)
             if (!nav.get_vertical_pan()) {
+                var deltaY = e.originalEvent.deltaY;
+                var deltaX = e.originalEvent.deltaX;
+                var delta = e.originalEvent.wheelDelta;
 
-                var isWheel = (e.deltaFactor >= 100 || e.deltaFactor % 1 == 0); // Checked on Chrome, Firefox and Edge
+                var isWheel = (delta >= 100 || e.delta % 1 == 0);
 
                 if (!isWheel) {
                     // different behavior for touchpad...
@@ -25,11 +26,12 @@ module.exports = {
 
 
                 e.preventDefault();
-                //Outer sorthand-if is for it to goto next or prev. the inner for touchpad.
-                var mouseLandingIndex = _this.vars.currentIndex - (((e.deltaX == 0 ? e.deltaY : e.deltaX) > 0) ? 1 : -1);
+                // Outer sorthand-if is for it to goto next or prev. the inner for touchpad.
+                var mouseLandingIndex = _this.vars.currentIndex - (((deltaX == 0 ? deltaY : deltaX) > 0) ? -1 : 1);
 
-                if (mouseLandingIndex >= slides.children('li').length || mouseLandingIndex < 0) //If exceeds boundaries dont goto slide
+                if (mouseLandingIndex >= slides.children('li').length || mouseLandingIndex < 0) { // If exceeds boundaries dont goto slide
                     return; //Consider in gotoSlide
+                }
 
                 _this.vars.velocity = 0; //No BOUNCE
 

diff --git a/website-src/download.html b/website-src/download.html
@@ -6,7 +6,6 @@
 
     <title>ItemSlide.js - Download</title>
 
-    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
     <link href="layout.css" rel="stylesheet" />
     <link href="download.css" rel="stylesheet" />
 </head>

diff --git a/website-src/layout.css b/website-src/layout.css
@@ -1,5 +1,5 @@
 body {
-    font-family: 'Source Sans Pro', sans-serif;
+    font-family: calibri, sans-serif;
     text-align: center;
     margin: 0;
 }