Release 0.3.3.

Patch notes 1. Apply jshint. 2. Fix jQuery plugin site version problem.
Apply jshint.
2013-03-14 15:47:20 +09:00 · 2013-03-14 15:46:12 +09:00 · 2013-03-14 15:14:38 +09:00 · 2013-03-14 13:44:51 +09:00 · 2013-03-14 11:49:50 +09:00 · 2013-03-14 11:36:57 +09:00
9 changed files with 257 additions and 18 deletions
--- a/README.md
+++ b/README.md
@@ -45,6 +45,20 @@ To make this plugin *perfect*, some requirements were not avoidable. But they're
 * the container must have a 'position' css style.
 * the scrollbar's position must be 'absolute'.
 * the scrollbar-x must have a 'bottom' css style, and the scrollbar-y must have a 'right' css style.
+ 
+Optional parameters
+-------------------
+
+perfect-scrollbar supports optional parameters.
+
+### wheelSpeed
+The scroll speed applied to mousewheel event.  
+Default: 10
+
+### wheelPropagation
+If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.  
+Default: false
+

 How to Use
 ----------
@@ -63,6 +77,15 @@ When the html document is like above, just use like this:
 ```javascript
 $('#Demo').perfectScrollbar();
 ```
+
+With optional parameters:
+```javascript
+$("#Demo").perfectScrollbar({
+  wheelSpeed: 20,
+  wheelPropagation: true
+})
+```
+
 If the size of your container or content changes:
 ```javascript
 $('#Demo').perfectScrollbar('update');
--- a/examples/azusa.jpg
+++ b/examples/azusa.jpg
--- a/examples/options-default.html
+++ b/examples/options-default.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>perfect-scrollbar example</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+        <script src="../src/jquery.mousewheel.js"></script>
+        <script src="../src/perfect-scrollbar.js"></script>
+        <style>
+          .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+          .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+          .spacer { text-align:center }
+        </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+
--- a/examples/options-wheelPropagation.html
+++ b/examples/options-wheelPropagation.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>perfect-scrollbar example - use wheelPropagation to control propagation of scrolling at extremities</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+        <script src="../src/jquery.mousewheel.js"></script>
+        <script src="../src/perfect-scrollbar.js"></script>
+        <style>
+          .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+          .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+          .spacer { text-align:center }
+        </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#NoWheelPropagation').perfectScrollbar({wheelPropagation:true});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default; wheelPropagation:false</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">wheelPropagation:true</h1>
+    <div id="NoWheelPropagation" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <div class="spacer">
+      Note<br>that<br>there<br>is<br>plenty<br>of<br>text<br>after<br>the<br>image<br>to<br>ensure<br>that<br>it<br>is<br>possible<br>to<br>down<br>
+      after<br>the<br>bottom<br>of<br>the<br>image<br>has<br>been<br>reached<br>to<br>enable<br>the<br>wheel<br>propagation<br>to<br>be<br>tested<br>
+    </div>
+  </body>
+</html>
+
--- a/examples/options-wheelSpeed.html
+++ b/examples/options-wheelSpeed.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>perfect-scrollbar example - use wheelSpeed to change speed of scrolling</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+        <script src="../src/jquery.mousewheel.js"></script>
+        <script src="../src/perfect-scrollbar.js"></script>
+        <style>
+          .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+          .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+          .spacer { text-align:center }
+        </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#FastWheelSpeed').perfectScrollbar({wheelSpeed:100});
+        $('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:1});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default; wheelSpeed:10</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">Fast: wheelSpeed:100</h1>
+    <div id="FastWheelSpeed" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">Slow: wheelSpeed:1</h1>
+    <div id="SlowWheelSpeed" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+
--- a/min/perfect-scrollbar.min.js
+++ b/min/perfect-scrollbar.min.js
--- a/min/perfect-scrollbar.with-mousewheel.min.js
+++ b/min/perfect-scrollbar.with-mousewheel.min.js
--- a/perfect-scrollbar.jquery.json
+++ b/perfect-scrollbar.jquery.json
@@ -2,7 +2,7 @@
  "name": "perfect-scrollbar",
  "title": "perfect-scrollbar",
  "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.2.5",
+  "version": "0.3.3",
  "author": {
    "name": "HyeonJe Jun",
    "email": "noraesae@yuiazu.net",
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -2,7 +2,25 @@
 * Licensed under the MIT License
 */
 ((function($) {
-    $.fn.perfectScrollbar = function(option) {
+
+    // The default settings for the plugin
+    var defaultSettings = {
+        wheelSpeed: 10,
+        wheelPropagation: false
+    };
+
+    $.fn.perfectScrollbar = function(suppliedSettings, option) {
+
+        // Use the default settings
+        var settings = $.extend( true, {}, defaultSettings );
+        if (typeof suppliedSettings === "object") {
+            // But over-ride any supplied
+            $.extend( true, settings, suppliedSettings );
+        } else {
+            // If no settings were supplied, then the first param must be the option
+            option = suppliedSettings;
+        }
+
        if(option === 'update') {
            if($(this).data('perfect_scrollbar_update')) {
                $(this).data('perfect_scrollbar_update')();
@@ -31,19 +49,19 @@
            content_height,
            scrollbar_x_width,
            scrollbar_x_left,
-            scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom')),
+            scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom'), 10),
            scrollbar_y_height,
            scrollbar_y_top,
-            scrollbar_y_right = parseInt($scrollbar_y.css('right'));
+            scrollbar_y_right = parseInt($scrollbar_y.css('right'), 10);

        var updateContentScrollTop = function() {
-            var scroll_top = parseInt(scrollbar_y_top * content_height / container_height);
+            var scroll_top = parseInt(scrollbar_y_top * content_height / container_height, 10);
            $this.scrollTop(scroll_top);
            $scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top});
        };

        var updateContentScrollLeft = function() {
-            var scroll_left = parseInt(scrollbar_x_left * content_width / container_width);
+            var scroll_left = parseInt(scrollbar_x_left * content_width / container_width, 10);
            $this.scrollLeft(scroll_left);
            $scrollbar_y.css({right: scrollbar_y_right - scroll_left});
        };
@@ -51,11 +69,11 @@
        var updateBarSizeAndPosition = function() {
            container_width = $this.width();
            container_height = $this.height();
-            content_width = $content.width();
-            content_height = $content.height();
+            content_width = $content.outerWidth(false);
+            content_height = $content.outerHeight(false);
            if(container_width < content_width) {
-                scrollbar_x_width = parseInt(container_width * container_width / content_width);
-                scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width);
+                scrollbar_x_width = parseInt(container_width * container_width / content_width, 10);
+                scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width, 10);
            }
            else {
                scrollbar_x_width = 0;
@@ -63,8 +81,8 @@
                $this.scrollLeft(0);
            }
            if(container_height < content_height) {
-                scrollbar_y_height = parseInt(container_height * container_height / content_height);
-                scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height);
+                scrollbar_y_height = parseInt(container_height * container_height / content_height, 10);
+                scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height, 10);
            }
            else {
                scrollbar_y_height = 0;
@@ -90,7 +108,7 @@
                scrollbar_x_left = new_left;
            }
            $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
-        }
+        };

        var moveBarY = function(current_top, delta_y) {
            var new_top = current_top + delta_y,
@@ -166,23 +184,107 @@

        // bind handlers
        var bindMouseWheelHandler = function() {
+            var shouldPreventDefault = function(deltaX, deltaY) {
+                var scrollTop = $this.scrollTop();
+                if(scrollTop === 0 && deltaY > 0 && deltaX === 0) {
+                    return !settings.wheelPropagation;
+                }
+                else if(scrollTop >= content_height - container_height && deltaY < 0 && deltaX === 0) {
+                    return !settings.wheelPropagation;
+                }
+
+                var scrollLeft = $this.scrollLeft();
+                if(scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
+                    return !settings.wheelPropagation;
+                }
+                else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY === 0) {
+                    return !settings.wheelPropagation;
+                }
+                return true;
+            };
+
            $this.mousewheel(function(e, delta, deltaX, deltaY) {
-                $this.scrollTop($this.scrollTop() - (deltaY * 10));
-                $this.scrollLeft($this.scrollLeft() + (deltaX * 10));
+                $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+                $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));

                // update bar position
                updateBarSizeAndPosition();

-                if(content_height > container_height || content_width > container_width) {
+                if(shouldPreventDefault(deltaX, deltaY)) {
                    e.preventDefault();
                }
            });
        };

+        // bind mobile touch handler
+        var bindMobileTouchHandler = function() {
+            var applyTouchMove = function(difference_x, difference_y) {
+                $this.scrollTop($this.scrollTop() - difference_y);
+                $this.scrollLeft($this.scrollLeft() - difference_x);
+
+                // update bar position
+                updateBarSizeAndPosition();
+            };
+
+            var start_coords = {},
+                start_time = 0,
+                speed = {},
+                breaking_process = null;
+
+            $this.bind("touchstart.perfect-scroll", function(e) {
+                var touch = e.originalEvent.targetTouches[0];
+
+                start_coords.pageX = touch.pageX;
+                start_coords.pageY = touch.pageY;
+
+                start_time = (new Date()).getTime();
+
+                if (breaking_process !== null) {
+                    clearInterval(breaking_process);
+                }
+            });
+            $this.bind("touchmove.perfect-scroll", function(e) {
+                var touch = e.originalEvent.targetTouches[0];
+
+                var current_coords = {};
+                current_coords.pageX = touch.pageX;
+                current_coords.pageY = touch.pageY;
+
+                var difference_x = current_coords.pageX - start_coords.pageX,
+                    difference_y = current_coords.pageY - start_coords.pageY;
+
+                applyTouchMove(difference_x, difference_y);
+                start_coords = current_coords;
+
+                var current_time = (new Date()).getTime();
+                speed.x = difference_x / (current_time - start_time);
+                speed.y = difference_y / (current_time - start_time);
+                start_time = current_time;
+
+                e.preventDefault();
+            });
+            $this.bind("touchend.perfect-scroll", function(e) {
+                breaking_process = setInterval(function() {
+                    if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+                        clearInterval(breaking_process);
+                        return;
+                    }
+
+                    applyTouchMove(speed.x * 30, speed.y * 30);
+
+                    speed.x *= 0.8;
+                    speed.y *= 0.8;
+                }, 10);
+            });
+        };
+
        var destroy = function() {
            $scrollbar_x.remove();
            $scrollbar_y.remove();
            $this.unbind('mousewheel');
+            $this.unbind('touchstart.perfect-scroll');
+            $this.unbind('touchmove.perfect-scroll');
+            $this.unbind('touchend.perfect-scroll');
            $(window).unbind('mousemove.perfect-scroll');
            $(window).unbind('mouseup.perfect-scroll');
            $this.data('perfect_scrollbar', null);
@@ -190,10 +292,13 @@
            $this.data('perfect_scrollbar_destroy', null);
        };

+        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+
        var initialize = function() {
            updateBarSizeAndPosition();
            bindMouseScrollXHandler();
            bindMouseScrollYHandler();
+            if(isMobile) bindMobileTouchHandler();
            if($this.mousewheel) bindMouseWheelHandler();
            $this.data('perfect_scrollbar', $this);
            $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
Author	SHA1	Message	Date
Hyunje Alex Jun	9d6728e3ff	Release 0.3.3. Patch notes 1. Apply jshint. 2. Fix jQuery plugin site version problem.	2013-03-14 15:47:20 +09:00
Hyunje Alex Jun	69c37268a1	Apply jshint.	2013-03-14 15:46:12 +09:00
Hyunje Alex Jun	960468fc9e	Release 0.3.2. Patch notes 1. Optional parameter support. - wheelSpeed - wheelPropagation 2. Example codes added.	2013-03-14 15:14:38 +09:00
Hyunje Alex Jun	42d528a839	Update README.md Optional parameter support.	2013-03-14 13:44:51 +09:00
Hyunje Alex Jun	26e9ff1cac	Example codes added by @GregDThomas.	2013-03-14 11:49:50 +09:00
GregDThomas	38b8b818e8	See issue #10 - provide support for optional settings, including prevention of the mousewheel event and the speed of scrolling	2013-03-14 11:36:57 +09:00
Hyunje Alex Jun	938f3134d7	Release 0.3.1. Patch notes 1. Mobile touch support. 2. Scrolling logic enhancement. 3. Bug fix.	2013-02-16 00:23:49 +09:00
Hyunje Alex Jun	aa213398f3	Enhance scroll preventDefault logic. Now scroll preventDefault works more like default browser scroll. When the scroll leaches top, bottom, left and right end, don't prevent default scrolling. For sure, when the content size is smaller than the container size, also don't prevent default scrolling.	2013-02-16 00:17:23 +09:00
Hyunje Alex Jun	1cdbc9509f	Fix missed ';' In JavaScript, it's the convension that ';' is placed at the end of statement	2013-02-15 23:58:57 +09:00
David	627b6a6b81	Take into account padding and margins on content Changed the height and widths calculations of the content div to include any padding and/or margins. outerHeight(true) is changed to outerHeight(false). outerWidth is changed as same. Fixed by noraesae.	2013-02-15 23:44:20 +09:00
Hyunje Alex Jun	0099bb556c	Supports the mobile touch scrolling. Using touch events, support mobile scrolling with touch.	2013-02-12 22:37:45 +09:00