Release 0.6.4

1. Add null-check for instances. 2. Add 'stopPropgationOnClick' option.
Update README.md
2015-07-25 02:28:12 +09:00 · 2015-07-25 02:26:55 +09:00 · 2015-07-25 02:23:42 +09:00 · 2015-07-22 22:47:33 -04:00 · 2015-07-22 22:43:38 -04:00 · 2015-07-14 12:22:40 +09:00
15 changed files with 173 additions and 41 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# EditorConfig: http://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Indentation for JS & SCSS
+[*.{js, scss}]
+indent_style = space
+indent_size = 2
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 .DS_Store
 node_modules
 /dist
-.idea
+.idea
--- a/README.md
+++ b/README.md
@@ -46,6 +46,7 @@ I hope you love it!
  to update the size or position of the scrollbar, just update.
 * Additionally, perfect-scrollbar uses 'scrollTop' and 'scrollLeft',
  not absolute positioning or something messy.
+* perfect-scrollbar supports RTL perfectly on both WebKit and Gecko based browsers.

 It's cool, isn't it?

@@ -199,6 +200,66 @@ $('#container').perfectScrollbar('update');  // Update
 $('#container').perfectScrollbar('destroy'); // Destroy
 ```

+## RequireJS  usage
+
+For RequireJS loader, no need to write shim, simply import two libs:
+
+```javascript
+require.config({
+  paths: {
+    perfectScrollbarJQuery: '.../perfect-scrollbar.jquery',
+    perfectScrollbar: '.../perfect-scrollbar',
+  }
+  ...
+})
+```
+
+
+and load `perfectScrollbar` in the initialiser of your app:
+
+```javascript
+# for vanilla JS:
+window.Ps = require('perfectScrollbar');
+
+# for jQuery:
+require('perfectScrollbarJQuery');
+```
+
+
+## AngularJS + RequireJS usage
+
+With the require.config settings above, at the beginning of your app module
+definition, you can have following code:
+
+```javascript
+define([
+  'angular',
+  'perfectScrollbar',
+  'perfectScrollbarJquery'
+],
+function (angular) {
+  var myApp = angular.module('myApp', [])
+  .run(function() {
+    window.Ps = require('perfectScrollbar');
+    require('perfectScrollbarJQuery');
+  })
+  return myApp;
+});
+```
+
+And initialise perfectScrollbar in a controller:
+
+```javascript
+# by vanilla JS:
+var container = document.getElementById('imgLoader');
+Ps.initialize(container);
+Ps.update(container);
+
+# or by jQuery:
+var imgLoader = $("#imgLoader")
+imgLoader.perfectScrollbar();
+```
+
 ## Optional parameters

 perfect-scrollbar supports optional parameters.
@@ -247,6 +308,10 @@ The number of pixels the content width can surpass the container width without e
 The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.  
 **Default: 0**

+### stopPropagationOnClick
+When set to false, when clicking on a rail, the click event will be allowed to propagate.  
+**Default: true**
+
 ## Contribution

 #### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contribution.
--- a/examples/scrollbars-with-margin.html
+++ b/examples/scrollbars-with-margin.html
@@ -6,27 +6,39 @@
    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
    <script src="../dist/js/perfect-scrollbar.js"></script>
    <style>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
-      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
-      .spacer { text-align:center }
+      h1 { text-align: center; }
+      .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
+      .container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }

-      .ps-scrollbar-x-rail {
-        margin: 0 3px;
+      .large-margin .ps-scrollbar-x-rail {
+        margin: 0 25%;
+        opacity: 0.5;
+        background-color: #eee;
      }
-      .ps-scrollbar-y-rail {
-        margin: 3px 0;
+      .large-margin .ps-scrollbar-y-rail {
+        margin: 100px 0;
+        opacity: 0.5;
+        background-color: #eee;
      }
    </style>
  </head>
  <body>
-    <div id="Default" class="contentHolder">
+    <h1>Default</h1>
+    <div class="container">
+      <div class="content">
+      </div>
+    </div>
+
+    <h1>Margins</h1>
+    <div class="container large-margin">
      <div class="content">
      </div>
    </div>
    <script>
-      var $ = document.querySelector.bind(document);
      window.onload = function () {
-        Ps.initialize($('#Default'));
+        [].forEach.call(document.querySelectorAll('.container'), function (el) {
+          Ps.initialize(el);
+        });
      };
    </script>
  </body>
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -125,7 +125,7 @@ gulp.task('connect', ['build'], function () {

 gulp.task('watch', function () {
  gulp.watch(['src/js/**/*'], ['js']);
-  gulp.watch(['src/css/**/*'], ['css']);
+  gulp.watch(['src/css/**/*'], ['sass']);
 });

 gulp.task('serve', ['connect', 'watch']);
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.6.2",
+  "version": "0.6.4",
  "description": "Minimalistic but perfect custom scrollbar plugin",
  "author": "Hyunje Alex Jun <me@noraesae.net>",
  "contributors": [
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -62,6 +62,7 @@ $ps-bar-hover: #999;
 }

 .ps-container {
+  -ms-touch-action: none;
  overflow: hidden !important;

  &.ps-active-x > .ps-scrollbar-x-rail,
--- a/src/js/lib/helper.js
+++ b/src/js/lib/helper.js
@@ -7,11 +7,7 @@ var cls = require('./class')
  , d = require('./dom');

 exports.toInt = function (x) {
-  if (typeof x === 'string') {
-    return parseInt(x, 10);
-  } else {
-    return ~~x;
-  }
+  return parseInt(x, 10) || 0;
 };

 exports.clone = function (obj) {
--- a/src/js/plugin/default-setting.js
+++ b/src/js/plugin/default-setting.js
@@ -14,5 +14,6 @@ module.exports = {
  suppressScrollX: false,
  suppressScrollY: false,
  scrollXMarginOffset: 0,
-  scrollYMarginOffset: 0
+  scrollYMarginOffset: 0,
+  stopPropagationOnClick: true
 };
--- a/src/js/plugin/destroy.js
+++ b/src/js/plugin/destroy.js
@@ -10,6 +10,10 @@ var d = require('../lib/dom')
 module.exports = function (element) {
  var i = instances.get(element);

+  if (!i) {
+    return;
+  }
+
  i.event.unbindAll();
  d.remove(i.scrollbarX);
  d.remove(i.scrollbarY);
--- a/src/js/plugin/handler/click-rail.js
+++ b/src/js/plugin/handler/click-rail.js
@@ -13,11 +13,13 @@ function bindClickRailHandler(element, i) {
  }
  var stopPropagation = window.Event.prototype.stopPropagation.bind;

-  i.event.bind(i.scrollbarY, 'click', stopPropagation);
+  if (i.settings.stopPropagationOnClick) {
+    i.event.bind(i.scrollbarY, 'click', stopPropagation);
+  }
  i.event.bind(i.scrollbarYRail, 'click', function (e) {
    var halfOfScrollbarLength = h.toInt(i.scrollbarYHeight / 2);
-    var positionTop = e.pageY - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength;
-    var maxPositionTop = i.containerHeight - i.scrollbarYHeight;
+    var positionTop = i.railYRatio * (e.pageY - window.scrollY - pageOffset(i.scrollbarYRail).top - halfOfScrollbarLength);
+    var maxPositionTop = i.railYRatio * (i.railYHeight - i.scrollbarYHeight);
    var positionRatio = positionTop / maxPositionTop;

    if (positionRatio < 0) {
@@ -28,14 +30,17 @@ function bindClickRailHandler(element, i) {

    element.scrollTop = (i.contentHeight - i.containerHeight) * positionRatio;
    updateGeometry(element);
+
+    e.stopPropagation();
  });

-  i.event.bind(i.scrollbarX, 'click', stopPropagation);
+  if (i.settings.stopPropagationOnClick) {
+    i.event.bind(i.scrollbarX, 'click', stopPropagation);
+  }
  i.event.bind(i.scrollbarXRail, 'click', function (e) {
    var halfOfScrollbarLength = h.toInt(i.scrollbarXWidth / 2);
-    var positionLeft = e.pageX - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength;
-    console.log(e.pageX, i.scrollbarXRail.offsetLeft);
-    var maxPositionLeft = i.containerWidth - i.scrollbarXWidth;
+    var positionLeft = i.railXRatio * (e.pageX - window.scrollX - pageOffset(i.scrollbarXRail).left - halfOfScrollbarLength);
+    var maxPositionLeft = i.railXRatio * (i.railXWidth - i.scrollbarXWidth);
    var positionRatio = positionLeft / maxPositionLeft;

    if (positionRatio < 0) {
@@ -44,8 +49,10 @@ function bindClickRailHandler(element, i) {
      positionRatio = 1;
    }

-    element.scrollLeft = (i.contentWidth - i.containerWidth) * positionRatio;
+    element.scrollLeft = ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment;
    updateGeometry(element);
+
+    e.stopPropagation();
  });
 }

--- a/src/js/plugin/handler/drag-scrollbar.js
+++ b/src/js/plugin/handler/drag-scrollbar.js
@@ -13,8 +13,8 @@ function bindMouseScrollXHandler(element, i) {
  var currentPageX = null;

  function updateScrollLeft(deltaX) {
-    var newLeft = currentLeft + deltaX;
-    var maxLeft = i.containerWidth - i.scrollbarXWidth;
+    var newLeft = currentLeft + (deltaX * i.railXRatio);
+    var maxLeft = i.scrollbarXRail.getBoundingClientRect().left + (i.railXRatio * (i.railXWidth - i.scrollbarXWidth));

    if (newLeft < 0) {
      i.scrollbarXLeft = 0;
@@ -24,7 +24,7 @@ function bindMouseScrollXHandler(element, i) {
      i.scrollbarXLeft = newLeft;
    }

-    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - i.scrollbarXWidth));
+    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment;
    element.scrollLeft = scrollLeft;
  }

@@ -42,7 +42,7 @@ function bindMouseScrollXHandler(element, i) {

  i.event.bind(i.scrollbarX, 'mousedown', function (e) {
    currentPageX = e.pageX;
-    currentLeft = h.toInt(d.css(i.scrollbarX, 'left'));
+    currentLeft = h.toInt(d.css(i.scrollbarX, 'left')) * i.railXRatio;
    h.startScrolling(element, 'x');

    i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
@@ -58,8 +58,8 @@ function bindMouseScrollYHandler(element, i) {
  var currentPageY = null;

  function updateScrollTop(deltaY) {
-    var newTop = currentTop + deltaY;
-    var maxTop = i.containerHeight - i.scrollbarYHeight;
+    var newTop = currentTop + (deltaY * i.railYRatio);
+    var maxTop = i.scrollbarYRail.getBoundingClientRect().top + (i.railYRatio * (i.railYHeight - i.scrollbarYHeight));

    if (newTop < 0) {
      i.scrollbarYTop = 0;
@@ -69,7 +69,7 @@ function bindMouseScrollYHandler(element, i) {
      i.scrollbarYTop = newTop;
    }

-    var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - i.scrollbarYHeight));
+    var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - (i.railYRatio * i.scrollbarYHeight)));
    element.scrollTop = scrollTop;
  }

@@ -87,7 +87,7 @@ function bindMouseScrollYHandler(element, i) {

  i.event.bind(i.scrollbarY, 'mousedown', function (e) {
    currentPageY = e.pageY;
-    currentTop = h.toInt(d.css(i.scrollbarY, 'top'));
+    currentTop = h.toInt(d.css(i.scrollbarY, 'top')) * i.railYRatio;
    h.startScrolling(element, 'y');

    i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
--- a/src/js/plugin/instances.js
+++ b/src/js/plugin/instances.js
@@ -21,6 +21,15 @@ function Instance(element) {
  i.contentHeight = null;

  i.isRtl = d.css(element, 'direction') === "rtl";
+  i.isNegativeScroll = (function () {
+    var originalScrollLeft = element.scrollLeft;
+    var result = null;
+    element.scrollLeft = -1;
+    result = element.scrollLeft < 0;
+    element.scrollLeft = originalScrollLeft;
+    return result;
+  })();
+  i.negativeScrollAdjustment = i.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;
  i.event = new EventManager();
  i.ownerDocument = element.ownerDocument || document;

@@ -33,8 +42,12 @@ function Instance(element) {
  i.isScrollbarXUsingBottom = i.scrollbarXBottom === i.scrollbarXBottom; // !isNaN
  i.scrollbarXTop = i.isScrollbarXUsingBottom ? null : h.toInt(d.css(i.scrollbarXRail, 'top'));
  i.railBorderXWidth = h.toInt(d.css(i.scrollbarXRail, 'borderLeftWidth')) + h.toInt(d.css(i.scrollbarXRail, 'borderRightWidth'));
+  // Set rail to display:block to calculate margins
+  d.css(i.scrollbarXRail, 'display', 'block');
  i.railXMarginWidth = h.toInt(d.css(i.scrollbarXRail, 'marginLeft')) + h.toInt(d.css(i.scrollbarXRail, 'marginRight'));
+  d.css(i.scrollbarXRail, 'display', '');
  i.railXWidth = null;
+  i.railXRatio = null;

  i.scrollbarYRail = d.appendTo(d.e('div', 'ps-scrollbar-y-rail'), element);
  i.scrollbarY = d.appendTo(d.e('div', 'ps-scrollbar-y'), i.scrollbarYRail);
@@ -46,8 +59,11 @@ function Instance(element) {
  i.scrollbarYLeft = i.isScrollbarYUsingRight ? null : h.toInt(d.css(i.scrollbarYRail, 'left'));
  i.scrollbarYOuterWidth = i.isRtl ? h.outerWidth(i.scrollbarY) : null;
  i.railBorderYWidth = h.toInt(d.css(i.scrollbarYRail, 'borderTopWidth')) + h.toInt(d.css(i.scrollbarYRail, 'borderBottomWidth'));
+  d.css(i.scrollbarYRail, 'display', 'block');
  i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom'));
+  d.css(i.scrollbarYRail, 'display', '');
  i.railYHeight = null;
+  i.railYRatio = null;
 }

 function getId(element) {
--- a/src/js/plugin/update-geometry.js
+++ b/src/js/plugin/update-geometry.js
@@ -21,7 +21,7 @@ function getThumbSize(i, thumbSize) {
 function updateCss(element, i) {
  var xRailOffset = {width: i.railXWidth};
  if (i.isRtl) {
-    xRailOffset.left = element.scrollLeft + i.containerWidth - i.contentWidth;
+    xRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth - i.contentWidth;
  } else {
    xRailOffset.left = element.scrollLeft;
  }
@@ -35,13 +35,13 @@ function updateCss(element, i) {
  var yRailOffset = {top: element.scrollTop, height: i.railYHeight};
  if (i.isScrollbarYUsingRight) {
    if (i.isRtl) {
-      yRailOffset.right = i.contentWidth - element.scrollLeft - i.scrollbarYRight - i.scrollbarYOuterWidth;
+      yRailOffset.right = i.contentWidth - (i.negativeScrollAdjustment + element.scrollLeft) - i.scrollbarYRight - i.scrollbarYOuterWidth;
    } else {
      yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
    }
  } else {
    if (i.isRtl) {
-      yRailOffset.left = element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth;
+      yRailOffset.left = i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth * 2 - i.contentWidth - i.scrollbarYLeft - i.scrollbarYOuterWidth;
    } else {
      yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
    }
@@ -70,8 +70,9 @@ module.exports = function (element) {
  if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
    i.scrollbarXActive = true;
    i.railXWidth = i.containerWidth - i.railXMarginWidth;
+    i.railXRatio = i.containerWidth / i.railXWidth;
    i.scrollbarXWidth = getThumbSize(i, h.toInt(i.railXWidth * i.containerWidth / i.contentWidth));
-    i.scrollbarXLeft = h.toInt(element.scrollLeft * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
+    i.scrollbarXLeft = h.toInt((i.negativeScrollAdjustment + element.scrollLeft) * (i.railXWidth - i.scrollbarXWidth) / (i.contentWidth - i.containerWidth));
  } else {
    i.scrollbarXActive = false;
    i.scrollbarXWidth = 0;
@@ -82,6 +83,7 @@ module.exports = function (element) {
  if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
    i.scrollbarYActive = true;
    i.railYHeight = i.containerHeight - i.railYMarginHeight;
+    i.railYRatio = i.containerHeight / i.railYHeight;
    i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight));
    i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
  } else {
--- a/src/js/plugin/update.js
+++ b/src/js/plugin/update.js
@@ -4,18 +4,32 @@
 'use strict';

 var d = require('../lib/dom')
+  , h = require('../lib/helper')
  , instances = require('./instances')
  , updateGeometry = require('./update-geometry');

 module.exports = function (element) {
  var i = instances.get(element);

+  if (!i) {
+    return;
+  }
+
+  // Recalcuate negative scrollLeft adjustment
+  i.negativeScrollAdjustment = i.isNegativeScroll ? element.scrollWidth - element.clientWidth : 0;
+
+  // Recalculate rail margins
+  d.css(i.scrollbarXRail, 'display', 'block');
+  d.css(i.scrollbarYRail, 'display', 'block');
+  i.railXMarginWidth = h.toInt(d.css(i.scrollbarXRail, 'marginLeft')) + h.toInt(d.css(i.scrollbarXRail, 'marginRight'));
+  i.railYMarginHeight = h.toInt(d.css(i.scrollbarYRail, 'marginTop')) + h.toInt(d.css(i.scrollbarYRail, 'marginBottom'));
+
  // Hide scrollbars not to affect scrollWidth and scrollHeight
  d.css(i.scrollbarXRail, 'display', 'none');
  d.css(i.scrollbarYRail, 'display', 'none');

  updateGeometry(element);

-  d.css(i.scrollbarXRail, 'display', 'block');
-  d.css(i.scrollbarYRail, 'display', 'block');
+  d.css(i.scrollbarXRail, 'display', '');
+  d.css(i.scrollbarYRail, 'display', '');
 };
Author	SHA1	Message	Date
Hyunje Alex Jun	b1d7aa0e64	Release 0.6.4 1. Add null-check for instances. 2. Add 'stopPropgationOnClick' option.	2015-07-25 02:28:12 +09:00
Hyunje Alex Jun	49e39f513d	Update README.md	2015-07-25 02:26:55 +09:00
Jun	89f4226778	Merge pull request #366 from dorilla/feature/stop-propagation-on-click Allow the clicking of a rail to propagate	2015-07-25 02:23:42 +09:00
Dan Maglasang	79f4cfcf5f	Update README.md	2015-07-22 22:47:33 -04:00
Dan Maglasang	158b113d18	Allow the clicking of a rail to propagate	2015-07-22 22:43:38 -04:00
Hyunje Alex Jun	6c642d8a47	Just early return instead of throwing an error for no instance.	2015-07-14 12:22:40 +09:00
Hyunje Alex Jun	f9f20eeb6f	Add null-check when updating or destroying an instance. Throw an error when an instance is not found.	2015-07-07 15:25:16 +09:00
Hyunje Alex Jun	1f082a2e04	Release 0.6.3 1. Improve toInt 2. Stop propagating click event through scrollbar rails. 3. IE touch device fix. 4. RTL support. 5. Other minor fixes.	2015-06-22 22:21:25 +09:00
Hyunje Alex Jun	b19c5e0765	Chmod 644 README.md	2015-06-22 21:38:43 +09:00
ahspw	3dbf20a5d0	perfect RTL support	2015-06-22 21:36:43 +09:00
guandai	db855ceca1	update readme	2015-06-22 21:28:47 +09:00
Jun	84b74926e3	Merge pull request #347 from danthewolfe/ie-touch-device IE touch device fix	2015-06-17 13:02:22 +09:00
dan	d6bd30f2da	IE touch device fix Add vendor specific css for IE to handle let javascript handle touch events instead of letting css attempt to handle them. Without this CSS property IE touch devices do not work.	2015-06-16 15:43:00 -04:00
Hyunje Alex Jun	fc28ceb4ea	Stop propagating click event through scrollbar rails. Fixes #326.	2015-04-29 13:08:03 +09:00
Hyunje Alex Jun	ca4d835129	Simplify parseInt. Because `~~` isn't necessarily faster than `parseInt` in every browser. Now I think it'd be better to make it readable and simple.	2015-04-15 21:41:11 +09:00
Jun	88b4e2fc19	Merge pull request #321 from juxtapos/toInt-fix changed toInt()'s function behavior	2015-04-15 21:39:10 +09:00
Claus Augusti	de32082a62	changed the toInt()'s function behavior so that it returns 0 on empty strings	2015-04-15 13:56:38 +02:00
DanielApt	7ba25d020c	Add an editor config file	2015-04-14 13:57:45 +09:00
Jun	08d559561e	Merge pull request #320 from jaronkk/scrollbar-margins Support large and percentage margins on scrollbar rails	2015-04-14 13:56:47 +09:00
Jaron Kennel	046ce954fd	Fix gulp watch to call sass instead of css	2015-04-13 13:12:09 -04:00
Jaron Kennel	a40ab40695	Fix clicking and dragging the scrollbar rails with large margin values. Fix initial rail height/width calculation: Set the rails to display:block temporarily to correctly calculate percentage margins Account for scrolltop/left on the document.	2015-04-13 13:12:00 -04:00