cartodb4/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Code refactoring.

Browse Source
This commit is contained in:
Hyunje Alex Jun 2014-10-13 22:04:16 +01:00
parent f231110f21
commit 36c988faba
1 changed files with 64 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/perfect-scrollbar.js
View File

@ -39,25 +39,24 @@
incrementingId += 1; incrementingId += 1;
return '.perfect-scrollbar-' + id; return '.perfect-scrollbar-' + id;
}; };
}()); })();
$.fn.perfectScrollbar = function (suppliedSettings, option) { $.fn.perfectScrollbar = function (suppliedSettings, option) {
return this.each(function () { return this.each(function () {
// Use the default settings // Use the default settings
var settings = $.extend(true, {}, defaultSettings), var settings = $.extend(true, {}, defaultSettings);
$this = $(this); var $this = $(this);
if (typeof suppliedSettings === "object") { if (typeof suppliedSettings === "object") {
// But over-ride any supplied // But override any supplied
$.extend(true, settings, suppliedSettings); $.extend(true, settings, suppliedSettings);
} else { } else {
// If no settings were supplied, then the first param must be the option // If no setting was supplied, then the first param must be the option
option = suppliedSettings; option = suppliedSettings;
} }
// Catch options // Catch options
if (option === 'update') { if (option === 'update') {
if ($this.data('perfect-scrollbar-update')) { if ($this.data('perfect-scrollbar-update')) {
$this.data('perfect-scrollbar-update')(); $this.data('perfect-scrollbar-update')();
@ -79,37 +78,36 @@
// Or generate new perfectScrollbar // Or generate new perfectScrollbar
// Set class to the container
$this.addClass('ps-container'); $this.addClass('ps-container');
var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this), var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'>").appendTo($this);
$scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this), var $scrollbarYRail = $("<div class='ps-scrollbar-y-rail'>").appendTo($this);
$scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($scrollbarXRail), var $scrollbarX = $("<div class='ps-scrollbar-x'>").appendTo($scrollbarXRail);
$scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($scrollbarYRail), var $scrollbarY = $("<div class='ps-scrollbar-y'>").appendTo($scrollbarYRail);
scrollbarXActive, var scrollbarXActive;
scrollbarYActive, var scrollbarYActive;
containerWidth, var containerWidth;
containerHeight, var containerHeight;
contentWidth, var contentWidth;
contentHeight, var contentHeight;
scrollbarXWidth, var scrollbarXWidth;
scrollbarXLeft, var scrollbarXLeft;
scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10), var scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10);
isScrollbarXUsingBottom = scrollbarXBottom === scrollbarXBottom, // !isNaN var isScrollbarXUsingBottom = scrollbarXBottom === scrollbarXBottom; // !isNaN
scrollbarXTop = isScrollbarXUsingBottom ? null : parseInt($scrollbarXRail.css('top'), 10), var scrollbarXTop = isScrollbarXUsingBottom ? null : parseInt($scrollbarXRail.css('top'), 10);
scrollbarYHeight, var scrollbarYHeight;
scrollbarYTop, var scrollbarYTop;
scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10), var scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10);
isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight, // !isNaN var isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight; // !isNaN
scrollbarYLeft = isScrollbarYUsingRight ? null: parseInt($scrollbarYRail.css('left'), 10), var scrollbarYLeft = isScrollbarYUsingRight ? null : parseInt($scrollbarYRail.css('left'), 10);
isRtl = $this.css('direction') === "rtl", var isRtl = $this.css('direction') === "rtl";
eventClassName = getEventClassName(), var eventClassName = getEventClassName();
railBorderXWidth = parseInt($scrollbarXRail.css('borderLeftWidth'), 10) + parseInt($scrollbarXRail.css('borderRightWidth'), 10), var railBorderXWidth = parseInt($scrollbarXRail.css('borderLeftWidth'), 10) + parseInt($scrollbarXRail.css('borderRightWidth'), 10);
railBorderYWidth = parseInt($scrollbarXRail.css('borderTopWidth'), 10) + parseInt($scrollbarXRail.css('borderBottomWidth'), 10); var railBorderYWidth = parseInt($scrollbarXRail.css('borderTopWidth'), 10) + parseInt($scrollbarXRail.css('borderBottomWidth'), 10);
var updateContentScrollTop = function (currentTop, deltaY) { var updateContentScrollTop = function (currentTop, deltaY) {
var newTop = currentTop + deltaY, var newTop = currentTop + deltaY;
maxTop = containerHeight - scrollbarYHeight; var maxTop = containerHeight - scrollbarYHeight;
if (newTop < 0) { if (newTop < 0) {
scrollbarYTop = 0; scrollbarYTop = 0;
@ -126,8 +124,8 @@
}; };
var updateContentScrollLeft = function (currentLeft, deltaX) { var updateContentScrollLeft = function (currentLeft, deltaX) {
var newLeft = currentLeft + deltaX, var newLeft = currentLeft + deltaX;
maxLeft = containerWidth - scrollbarXWidth; var maxLeft = containerWidth - scrollbarXWidth;
if (newLeft < 0) { if (newLeft < 0) {
scrollbarXLeft = 0; scrollbarXLeft = 0;
@ -154,7 +152,7 @@
}; };
var updateScrollbarCss = function () { var updateScrollbarCss = function () {
var scrollbarXStyles = {width: containerWidth, display: scrollbarXActive ? "inherit": "none"}; var scrollbarXStyles = { width: containerWidth, display: scrollbarXActive ? "inherit" : "none" };
if (isRtl) { if (isRtl) {
scrollbarXStyles.left = $this.scrollLeft() + containerWidth - contentWidth; scrollbarXStyles.left = $this.scrollLeft() + containerWidth - contentWidth;
} else { } else {
@ -167,7 +165,7 @@
} }
$scrollbarXRail.css(scrollbarXStyles); $scrollbarXRail.css(scrollbarXStyles);
var scrollbarYStyles = {top: $this.scrollTop(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}; var scrollbarYStyles = { top: $this.scrollTop(), height: containerHeight, display: scrollbarYActive ? "inherit" : "none" };
if (isScrollbarYUsingRight) { if (isScrollbarYUsingRight) {
if (isRtl) { if (isRtl) {
@ -184,8 +182,8 @@
} }
$scrollbarYRail.css(scrollbarYStyles); $scrollbarYRail.css(scrollbarYStyles);
$scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth - railBorderXWidth}); $scrollbarX.css({ left: scrollbarXLeft, width: scrollbarXWidth - railBorderXWidth });
$scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight - railBorderYWidth}); $scrollbarY.css({ top: scrollbarYTop, height: scrollbarYHeight - railBorderYWidth });
if (scrollbarXActive) { if (scrollbarXActive) {
$this.addClass('ps-active-x'); $this.addClass('ps-active-x');
@ -253,8 +251,8 @@
}; };
var bindMouseScrollXHandler = function () { var bindMouseScrollXHandler = function () {
var currentLeft, var currentLeft;
currentPageX; var currentPageX;
$scrollbarX.bind('mousedown' + eventClassName, function (e) { $scrollbarX.bind('mousedown' + eventClassName, function (e) {
currentPageX = e.pageX; currentPageX = e.pageX;
@ -284,8 +282,8 @@
}; };
var bindMouseScrollYHandler = function () { var bindMouseScrollYHandler = function () {
var currentTop, var currentTop;
currentPageY; var currentPageY;
$scrollbarY.bind('mousedown' + eventClassName, function (e) { $scrollbarY.bind('mousedown' + eventClassName, function (e) {
currentPageY = e.pageY; currentPageY = e.pageY;
@ -343,8 +341,8 @@
var shouldPrevent = false; var shouldPrevent = false;
var getDeltaFromEvent = function (e) { var getDeltaFromEvent = function (e) {
var deltaX = e.originalEvent.deltaX, var deltaX = e.originalEvent.deltaX;
deltaY = -1 * e.originalEvent.deltaY; var deltaY = -1 * e.originalEvent.deltaY;
if (typeof deltaX === "undefined" || typeof deltaY === "undefined") { if (typeof deltaX === "undefined" || typeof deltaY === "undefined") {
// OS X Safari // OS X Safari
@ -370,8 +368,8 @@
var mousewheelHandler = function (e) { var mousewheelHandler = function (e) {
var delta = getDeltaFromEvent(e); var delta = getDeltaFromEvent(e);
var deltaX = delta[0], var deltaX = delta[0];
deltaY = delta[1]; var deltaY = delta[1];
shouldPrevent = false; shouldPrevent = false;
if (!settings.useBothWheelAxes) { if (!settings.useBothWheelAxes) {
@ -435,8 +433,8 @@
return; return;
} }
var deltaX = 0, var deltaX = 0;
deltaY = 0; var deltaY = 0;
switch (e.which) { switch (e.which) {
case 37: // left case 37: // left
@ -483,10 +481,10 @@
$scrollbarY.bind('click' + eventClassName, stopPropagation); $scrollbarY.bind('click' + eventClassName, stopPropagation);
$scrollbarYRail.bind('click' + eventClassName, function (e) { $scrollbarYRail.bind('click' + eventClassName, function (e) {
var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10), var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10);
positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength, var positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength;
maxPositionTop = containerHeight - scrollbarYHeight, var maxPositionTop = containerHeight - scrollbarYHeight;
positionRatio = positionTop / maxPositionTop; var positionRatio = positionTop / maxPositionTop;
if (positionRatio < 0) { if (positionRatio < 0) {
positionRatio = 0; positionRatio = 0;
@ -499,10 +497,10 @@
$scrollbarX.bind('click' + eventClassName, stopPropagation); $scrollbarX.bind('click' + eventClassName, stopPropagation);
$scrollbarXRail.bind('click' + eventClassName, function (e) { $scrollbarXRail.bind('click' + eventClassName, function (e) {
var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10), var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10);
positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength, var positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength;
maxPositionLeft = containerWidth - scrollbarXWidth, var maxPositionLeft = containerWidth - scrollbarXWidth;
positionRatio = positionLeft / maxPositionLeft; var positionRatio = positionLeft / maxPositionLeft;
if (positionRatio < 0) { if (positionRatio < 0) {
positionRatio = 0; positionRatio = 0;
@ -524,11 +522,11 @@
updateBarSizeAndPosition(); updateBarSizeAndPosition();
}; };
var startCoords = {}, var startCoords = {};
startTime = 0, var startTime = 0;
speed = {}, var speed = {};
breakingProcess = null, var breakingProcess = null;
inGlobalTouch = false; var inGlobalTouch = false;
$(window).bind("touchstart" + eventClassName, function (e) { $(window).bind("touchstart" + eventClassName, function (e) {
inGlobalTouch = true; inGlobalTouch = true;
@ -559,8 +557,8 @@
currentCoords.pageX = touch.pageX; currentCoords.pageX = touch.pageX;
currentCoords.pageY = touch.pageY; currentCoords.pageY = touch.pageY;
var differenceX = currentCoords.pageX - startCoords.pageX, var differenceX = currentCoords.pageX - startCoords.pageX;
differenceY = currentCoords.pageY - startCoords.pageY; var differenceY = currentCoords.pageY - startCoords.pageY;
applyTouchMove(differenceX, differenceY); applyTouchMove(differenceX, differenceY);
startCoords = currentCoords; startCoords = currentCoords;
@ -655,7 +653,7 @@
var fixIe6ScrollbarPosition = function () { var fixIe6ScrollbarPosition = function () {
updateScrollbarCss = function () { updateScrollbarCss = function () {
var scrollbarXStyles = {left: scrollbarXLeft + $this.scrollLeft(), width: scrollbarXWidth}; var scrollbarXStyles = { left: scrollbarXLeft + $this.scrollLeft(), width: scrollbarXWidth };
if (isScrollbarXUsingBottom) { if (isScrollbarXUsingBottom) {
scrollbarXStyles.bottom = scrollbarXBottom; scrollbarXStyles.bottom = scrollbarXBottom;
} else { } else {
@ -663,7 +661,7 @@
} }
$scrollbarX.css(scrollbarXStyles); $scrollbarX.css(scrollbarXStyles);
var scrollbarYStyles = {top: scrollbarYTop + $this.scrollTop(), height: scrollbarYHeight}; var scrollbarYStyles = { top: scrollbarYTop + $this.scrollTop(), height: scrollbarYHeight };
if (isScrollbarYUsingRight) { if (isScrollbarYUsingRight) {
scrollbarYStyles.right = scrollbarYRight; scrollbarYStyles.right = scrollbarYRight;
} else { } else {