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.
Chmod 644 README.md
2015-06-22 22:21:25 +09:00 · 2015-06-22 21:38:43 +09:00 · 2015-06-22 21:36:43 +09:00 · 2015-06-22 21:28:47 +09:00 · 2015-06-17 13:02:22 +09:00 · 2015-06-16 15:43:00 -04:00
13 changed files with 153 additions and 38 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.
--- 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.3",
  "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/handler/click-rail.js
+++ b/src/js/plugin/handler/click-rail.js
@@ -16,8 +16,8 @@ function bindClickRailHandler(element, i) {
  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 +28,15 @@ function bindClickRailHandler(element, i) {

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

  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 +45,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,28 @@
 '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);

+  // 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	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