cartodb/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 2013-05-18 12:41:15 +09:00
parent 667c61d2c3
commit 4613c3daee
1 changed files with 316 additions and 312 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
src/perfect-scrollbar.js
View File

@ -1,7 +1,7 @@
/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae) /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
* Licensed under the MIT License * Licensed under the MIT License
*/ */
((function($) { ((function ($) {
// The default settings for the plugin // The default settings for the plugin
var defaultSettings = { var defaultSettings = {
@ -9,271 +9,271 @@
wheelPropagation: false wheelPropagation: false
}; };
$.fn.perfectScrollbar = function(suppliedSettings, option) { $.fn.perfectScrollbar = function (suppliedSettings, option) {
// Use the default settings // Use the default settings
var settings = $.extend( true, {}, defaultSettings ); var settings = $.extend(true, {}, defaultSettings);
if (typeof suppliedSettings === "object") { if (typeof suppliedSettings === "object") {
// But over-ride any supplied // But over-ride 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 settings were supplied, then the first param must be the option
option = suppliedSettings; option = suppliedSettings;
} }
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')();
} }
return $(this); return $(this);
} }
else if(option === 'destroy') { else if (option === 'destroy') {
if($(this).data('perfect_scrollbar_destroy')) { if ($(this).data('perfect-scrollbar-destroy')) {
$(this).data('perfect_scrollbar_destroy')(); $(this).data('perfect-scrollbar-destroy')();
} }
return $(this); return $(this);
} }
if($(this).data('perfect_scrollbar')) { if ($(this).data('perfect-scrollbar')) {
// if there's already perfect_scrollbar // if there's already perfect-scrollbar
return $(this).data('perfect_scrollbar'); return $(this).data('perfect-scrollbar');
} }
var $this = $(this).addClass('ps-container'), var $this = $(this).addClass('ps-container'),
$content = $(this).children(), $content = $(this).children(),
$scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this), $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
$scrollbar_y = $("<div class='ps-scrollbar-y'></div>").appendTo($this), $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
container_width, containerWidth,
container_height, containerHeight,
content_width, contentWidth,
content_height, contentHeight,
scrollbar_x_width, scrollbarXWidth,
scrollbar_x_left, scrollbarXLeft,
scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom'), 10), scrollbarXBottom = parseInt($scrollbarX.css('bottom'), 10),
scrollbar_y_height, scrollbarYHeight,
scrollbar_y_top, scrollbarYTop,
scrollbar_y_right = parseInt($scrollbar_y.css('right'), 10); scrollbarYRight = parseInt($scrollbarY.css('right'), 10);
var updateContentScrollTop = function() { var updateContentScrollTop = function () {
var scroll_top = parseInt(scrollbar_y_top * content_height / container_height, 10); var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
$this.scrollTop(scroll_top); $this.scrollTop(scrollTop);
$scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top}); $scrollbarX.css({bottom: scrollbarXBottom - scrollTop});
}; };
var updateContentScrollLeft = function() { var updateContentScrollLeft = function () {
var scroll_left = parseInt(scrollbar_x_left * content_width / container_width, 10); var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
$this.scrollLeft(scroll_left); $this.scrollLeft(scrollLeft);
$scrollbar_y.css({right: scrollbar_y_right - scroll_left}); $scrollbarY.css({right: scrollbarYRight - scrollLeft});
}; };
var updateBarSizeAndPosition = function() { var updateBarSizeAndPosition = function () {
container_width = $this.width(); containerWidth = $this.width();
container_height = $this.height(); containerHeight = $this.height();
content_width = $content.outerWidth(false); contentWidth = $content.outerWidth(false);
content_height = $content.outerHeight(false); contentHeight = $content.outerHeight(false);
if(container_width < content_width) { if (containerWidth < contentWidth) {
scrollbar_x_width = parseInt(container_width * container_width / content_width, 10); scrollbarXWidth = parseInt(containerWidth * containerWidth / contentWidth, 10);
scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width, 10); scrollbarXLeft = parseInt($this.scrollLeft() * containerWidth / contentWidth, 10);
} }
else { else {
scrollbar_x_width = 0; scrollbarXWidth = 0;
scrollbar_x_left = 0; scrollbarXLeft = 0;
$this.scrollLeft(0); $this.scrollLeft(0);
} }
if(container_height < content_height) { if (containerHeight < contentHeight) {
scrollbar_y_height = parseInt(container_height * container_height / content_height, 10); scrollbarYHeight = parseInt(containerHeight * containerHeight / contentHeight, 10);
scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height, 10); scrollbarYTop = parseInt($this.scrollTop() * containerHeight / contentHeight, 10);
} }
else { else {
scrollbar_y_height = 0; scrollbarYHeight = 0;
scrollbar_y_left = 0; scrollbarYTop = 0;
$this.scrollTop(0); $this.scrollTop(0);
} }
if(scrollbar_y_top >= container_height - scrollbar_y_height) { if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
scrollbar_y_top = container_height - scrollbar_y_height; scrollbarYTop = containerHeight - scrollbarYHeight;
} }
if(scrollbar_x_left >= container_width - scrollbar_x_width) { if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
scrollbar_x_left = container_width - scrollbar_x_width; scrollbarXLeft = containerWidth - scrollbarXWidth;
} }
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width}); $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXWidth});
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), right: scrollbar_y_right - $this.scrollLeft(), height: scrollbar_y_height}); $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYHeight});
}; };
var moveBarX = function(current_left, delta_x) { var moveBarX = function (currentLeft, deltaX) {
var new_left = current_left + delta_x, var newLeft = currentLeft + deltaX,
max_left = container_width - scrollbar_x_width; maxLeft = containerWidth - scrollbarXWidth;
if(new_left < 0) { if (newLeft < 0) {
scrollbar_x_left = 0; scrollbarXLeft = 0;
} }
else if(new_left > max_left) { else if (newLeft > maxLeft) {
scrollbar_x_left = max_left; scrollbarXLeft = maxLeft;
} }
else { else {
scrollbar_x_left = new_left; scrollbarXLeft = newLeft;
} }
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()}); $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft()});
}; };
var moveBarY = function(current_top, delta_y) { var moveBarY = function (currentTop, deltaY) {
var new_top = current_top + delta_y, var newTop = currentTop + deltaY,
max_top = container_height - scrollbar_y_height; maxTop = containerHeight - scrollbarYHeight;
if(new_top < 0) { if (newTop < 0) {
scrollbar_y_top = 0; scrollbarYTop = 0;
} }
else if(new_top > max_top) { else if (newTop > maxTop) {
scrollbar_y_top = max_top; scrollbarYTop = maxTop;
} }
else { else {
scrollbar_y_top = new_top; scrollbarYTop = newTop;
} }
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()}); $scrollbarY.css({top: scrollbarYTop + $this.scrollTop()});
}; };
var bindMouseScrollXHandler = function() { var bindMouseScrollXHandler = function () {
var current_left, var currentLeft,
current_page_x; currentPageX;
$scrollbar_x.bind('mousedown.perfect-scroll', function(e) { $scrollbarX.bind('mousedown.perfect-scroll', function (e) {
current_page_x = e.pageX; currentPageX = e.pageX;
current_left = $scrollbar_x.position().left; currentLeft = $scrollbarX.position().left;
$scrollbar_x.addClass('in-scrolling'); $scrollbarX.addClass('in-scrolling');
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}); });
$(document).bind('mousemove.perfect-scroll', function(e) { $(document).bind('mousemove.perfect-scroll', function (e) {
if($scrollbar_x.hasClass('in-scrolling')) { if ($scrollbarX.hasClass('in-scrolling')) {
moveBarX(current_left, e.pageX - current_page_x); moveBarX(currentLeft, e.pageX - currentPageX);
updateContentScrollLeft(); updateContentScrollLeft();
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
}); });
$(document).bind('mouseup.perfect-scroll', function(e) { $(document).bind('mouseup.perfect-scroll', function (e) {
if($scrollbar_x.hasClass('in-scrolling')) { if ($scrollbarX.hasClass('in-scrolling')) {
$scrollbar_x.removeClass('in-scrolling'); $scrollbarX.removeClass('in-scrolling');
} }
}); });
}; };
var bindMouseScrollYHandler = function() { var bindMouseScrollYHandler = function () {
var current_top, var currentTop,
current_page_y; currentPageY;
$scrollbar_y.bind('mousedown.perfect-scroll', function(e) { $scrollbarY.bind('mousedown.perfect-scroll', function (e) {
current_page_y = e.pageY; currentPageY = e.pageY;
current_top = $scrollbar_y.position().top; currentTop = $scrollbarY.position().top;
$scrollbar_y.addClass('in-scrolling'); $scrollbarY.addClass('in-scrolling');
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
}); });
$(document).bind('mousemove.perfect-scroll', function(e) { $(document).bind('mousemove.perfect-scroll', function (e) {
if($scrollbar_y.hasClass('in-scrolling')) { if ($scrollbarY.hasClass('in-scrolling')) {
moveBarY(current_top, e.pageY - current_page_y); moveBarY(currentTop, e.pageY - currentPageY);
updateContentScrollTop(); updateContentScrollTop();
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
}); });
$(document).bind('mouseup.perfect-scroll', function(e) { $(document).bind('mouseup.perfect-scroll', function (e) {
if($scrollbar_y.hasClass('in-scrolling')) { if ($scrollbarY.hasClass('in-scrolling')) {
$scrollbar_y.removeClass('in-scrolling'); $scrollbarY.removeClass('in-scrolling');
} }
}); });
}; };
// bind handlers // bind handlers
var bindMouseWheelHandler = function() { var bindMouseWheelHandler = function () {
var shouldPreventDefault = function(deltaX, deltaY) { var shouldPreventDefault = function (deltaX, deltaY) {
var scrollTop = $this.scrollTop(); var scrollTop = $this.scrollTop();
if(scrollTop === 0 && deltaY > 0 && deltaX === 0) { if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
return !settings.wheelPropagation; return !settings.wheelPropagation;
} }
else if(scrollTop >= content_height - container_height && deltaY < 0 && deltaX === 0) { else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
return !settings.wheelPropagation; return !settings.wheelPropagation;
} }
var scrollLeft = $this.scrollLeft(); var scrollLeft = $this.scrollLeft();
if(scrollLeft === 0 && deltaX < 0 && deltaY === 0) { if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
return !settings.wheelPropagation; return !settings.wheelPropagation;
} }
else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY === 0) { else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
return !settings.wheelPropagation; return !settings.wheelPropagation;
} }
return true; return true;
}; };
$this.mousewheel(function(e, delta, deltaX, deltaY) { $this.mousewheel(function (e, delta, deltaX, deltaY) {
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed)); $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed)); $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
// update bar position // update bar position
updateBarSizeAndPosition(); updateBarSizeAndPosition();
if(shouldPreventDefault(deltaX, deltaY)) { if (shouldPreventDefault(deltaX, deltaY)) {
e.preventDefault(); e.preventDefault();
} }
}); });
}; };
// bind mobile touch handler // bind mobile touch handler
var bindMobileTouchHandler = function() { var bindMobileTouchHandler = function () {
var applyTouchMove = function(difference_x, difference_y) { var applyTouchMove = function (differenceX, differenceY) {
$this.scrollTop($this.scrollTop() - difference_y); $this.scrollTop($this.scrollTop() - differenceY);
$this.scrollLeft($this.scrollLeft() - difference_x); $this.scrollLeft($this.scrollLeft() - differenceX);
// update bar position // update bar position
updateBarSizeAndPosition(); updateBarSizeAndPosition();
}; };
var start_coords = {}, var startCoords = {},
start_time = 0, startTime = 0,
speed = {}, speed = {},
breaking_process = null; breakingProcess = null;
$this.bind("touchstart.perfect-scroll", function(e) { $this.bind("touchstart.perfect-scroll", function (e) {
var touch = e.originalEvent.targetTouches[0]; var touch = e.originalEvent.targetTouches[0];
start_coords.pageX = touch.pageX; startCoords.pageX = touch.pageX;
start_coords.pageY = touch.pageY; startCoords.pageY = touch.pageY;
start_time = (new Date()).getTime(); startTime = (new Date()).getTime();
if (breaking_process !== null) { if (breakingProcess !== null) {
clearInterval(breaking_process); clearInterval(breakingProcess);
} }
}); });
$this.bind("touchmove.perfect-scroll", function(e) { $this.bind("touchmove.perfect-scroll", function (e) {
var touch = e.originalEvent.targetTouches[0]; var touch = e.originalEvent.targetTouches[0];
var current_coords = {}; var currentCoords = {};
current_coords.pageX = touch.pageX; currentCoords.pageX = touch.pageX;
current_coords.pageY = touch.pageY; currentCoords.pageY = touch.pageY;
var difference_x = current_coords.pageX - start_coords.pageX, var differenceX = currentCoords.pageX - startCoords.pageX,
difference_y = current_coords.pageY - start_coords.pageY; differenceY = currentCoords.pageY - startCoords.pageY;
applyTouchMove(difference_x, difference_y); applyTouchMove(differenceX, differenceY);
start_coords = current_coords; startCoords = currentCoords;
var current_time = (new Date()).getTime(); var currentTime = (new Date()).getTime();
speed.x = difference_x / (current_time - start_time); speed.x = differenceX / (currentTime - startTime);
speed.y = difference_y / (current_time - start_time); speed.y = differenceY / (currentTime - startTime);
start_time = current_time; startTime = currentTime;
e.preventDefault(); e.preventDefault();
}); });
$this.bind("touchend.perfect-scroll", function(e) { $this.bind("touchend.perfect-scroll", function (e) {
breaking_process = setInterval(function() { breakingProcess = setInterval(function () {
if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
clearInterval(breaking_process); clearInterval(breakingProcess);
return; return;
} }
@ -285,31 +285,35 @@
}); });
}; };
var destroy = function() { var destroy = function () {
$scrollbar_x.remove(); $scrollbarX.remove();
$scrollbar_y.remove(); $scrollbarY.remove();
$this.unbind('mousewheel'); $this.unbind('mousewheel');
$this.unbind('touchstart.perfect-scroll'); $this.unbind('touchstart.perfect-scroll');
$this.unbind('touchmove.perfect-scroll'); $this.unbind('touchmove.perfect-scroll');
$this.unbind('touchend.perfect-scroll'); $this.unbind('touchend.perfect-scroll');
$(window).unbind('mousemove.perfect-scroll'); $(window).unbind('mousemove.perfect-scroll');
$(window).unbind('mouseup.perfect-scroll'); $(window).unbind('mouseup.perfect-scroll');
$this.data('perfect_scrollbar', null); $this.data('perfect-scrollbar', null);
$this.data('perfect_scrollbar_update', null); $this.data('perfect-scrollbar-update', null);
$this.data('perfect_scrollbar_destroy', null); $this.data('perfect-scrollbar-destroy', null);
}; };
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
var initialize = function() { var initialize = function () {
updateBarSizeAndPosition(); updateBarSizeAndPosition();
bindMouseScrollXHandler(); bindMouseScrollXHandler();
bindMouseScrollYHandler(); bindMouseScrollYHandler();
if(isMobile) bindMobileTouchHandler(); if (isMobile) {
if($this.mousewheel) bindMouseWheelHandler(); bindMobileTouchHandler();
$this.data('perfect_scrollbar', $this); }
$this.data('perfect_scrollbar_update', updateBarSizeAndPosition); if ($this.mousewheel) {
$this.data('perfect_scrollbar_destroy', destroy); bindMouseWheelHandler();
}
$this.data('perfect-scrollbar', $this);
$this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
$this.data('perfect-scrollbar-destroy', destroy);
}; };
// initialize // initialize