From 3dbf20a5d0a7563dfbb77410e4de2d94c401f6de Mon Sep 17 00:00:00 2001
From: ahspw <anas.h.sulaiman@gmail.com>
Date: Fri, 8 May 2015 14:06:55 +0300
Subject: [PATCH] perfect RTL support

---
 README.md                               | 1 +
 src/js/plugin/handler/click-rail.js     | 2 +-
 src/js/plugin/handler/drag-scrollbar.js | 2 +-
 src/js/plugin/instances.js              | 9 +++++++++
 src/js/plugin/update-geometry.js        | 8 ++++----
 src/js/plugin/update.js                 | 3 +++
 6 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 6fc9a07..7f049cb 100755
--- 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?
 
diff --git a/src/js/plugin/handler/click-rail.js b/src/js/plugin/handler/click-rail.js
index 4ebcb35..971fa72 100644
--- a/src/js/plugin/handler/click-rail.js
+++ b/src/js/plugin/handler/click-rail.js
@@ -45,7 +45,7 @@ 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();
diff --git a/src/js/plugin/handler/drag-scrollbar.js b/src/js/plugin/handler/drag-scrollbar.js
index aede1ce..d26f862 100644
--- a/src/js/plugin/handler/drag-scrollbar.js
+++ b/src/js/plugin/handler/drag-scrollbar.js
@@ -24,7 +24,7 @@ function bindMouseScrollXHandler(element, i) {
       i.scrollbarXLeft = newLeft;
     }
 
-    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth)));
+    var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment;
     element.scrollLeft = scrollLeft;
   }
 
diff --git a/src/js/plugin/instances.js b/src/js/plugin/instances.js
index a94a599..7ab4270 100644
--- 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;
 
diff --git a/src/js/plugin/update-geometry.js b/src/js/plugin/update-geometry.js
index b951474..8de742e 100644
--- 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;
     }
@@ -72,7 +72,7 @@ module.exports = function (element) {
     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;
diff --git a/src/js/plugin/update.js b/src/js/plugin/update.js
index 54c3581..7585df0 100644
--- a/src/js/plugin/update.js
+++ b/src/js/plugin/update.js
@@ -11,6 +11,9 @@ var d = require('../lib/dom')
 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');