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

Remove $this.

Browse Source
This commit is contained in:
Hyunje Alex Jun 2015-01-24 14:37:18 +00:00
parent a496ff1a75
commit 3f002c49a1
1 changed files with 76 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/js/plugin/ps.js
View File

@ -11,8 +11,7 @@ var cls = require('../lib/class')
module.exports = function (element, settingOrCommand) { module.exports = function (element, settingOrCommand) {
var settings = h.clone(defaultSettings); var settings = h.clone(defaultSettings);
var $this = $(element); var isPluginAlive = true;
var isPluginAlive = function () { return !!$this; };
var command; var command;
if (typeof settingOrCommand === "object") { if (typeof settingOrCommand === "object") {
@ -25,21 +24,19 @@ module.exports = function (element, settingOrCommand) {
// Catch options // Catch options
if (command === 'update') { if (command === 'update') {
if ($this.data('perfect-scrollbar-update')) { if ($(element).data('perfect-scrollbar-update')) {
$this.data('perfect-scrollbar-update')(); $(element).data('perfect-scrollbar-update')();
} }
return $this;
} }
else if (command === 'destroy') { else if (command === 'destroy') {
if ($this.data('perfect-scrollbar-destroy')) { if ($(element).data('perfect-scrollbar-destroy')) {
$this.data('perfect-scrollbar-destroy')(); $(element).data('perfect-scrollbar-destroy')();
} }
return $this;
} }
if ($this.data('perfect-scrollbar')) { if ($(element).data('perfect-scrollbar')) {
// if there's already perfect-scrollbar // if there's already perfect-scrollbar
return $this.data('perfect-scrollbar'); return $(element).data('perfect-scrollbar');
} }
@ -52,7 +49,7 @@ module.exports = function (element, settingOrCommand) {
var contentWidth; var contentWidth;
var contentHeight; var contentHeight;
var isRtl = $this.css('direction') === "rtl"; var isRtl = d.css(element, 'direction') === "rtl";
var eventClass = eventClassFactory(); var eventClass = eventClassFactory();
var ownerDocument = element.ownerDocument || document; var ownerDocument = element.ownerDocument || document;
@ -93,7 +90,7 @@ module.exports = function (element, settingOrCommand) {
} }
var scrollTop = h.toInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight)); var scrollTop = h.toInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight));
$this.scrollTop(scrollTop); element.scrollTop = scrollTop;
} }
function updateScrollLeft(currentLeft, deltaX) { function updateScrollLeft(currentLeft, deltaX) {
@ -109,7 +106,7 @@ module.exports = function (element, settingOrCommand) {
} }
var scrollLeft = h.toInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth)); var scrollLeft = h.toInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth));
$this.scrollLeft(scrollLeft); element.scrollLeft = scrollLeft;
} }
function getThumbSize(thumbSize) { function getThumbSize(thumbSize) {
@ -125,30 +122,30 @@ module.exports = function (element, settingOrCommand) {
function updateCss() { function updateCss() {
var xRailOffset = {width: railXWidth}; var xRailOffset = {width: railXWidth};
if (isRtl) { if (isRtl) {
xRailOffset.left = $this.scrollLeft() + containerWidth - contentWidth; xRailOffset.left = element.scrollLeft + containerWidth - contentWidth;
} else { } else {
xRailOffset.left = $this.scrollLeft(); xRailOffset.left = element.scrollLeft;
} }
if (isScrollbarXUsingBottom) { if (isScrollbarXUsingBottom) {
xRailOffset.bottom = scrollbarXBottom - $this.scrollTop(); xRailOffset.bottom = scrollbarXBottom - element.scrollTop;
} else { } else {
xRailOffset.top = scrollbarXTop + $this.scrollTop(); xRailOffset.top = scrollbarXTop + element.scrollTop;
} }
d.css(scrollbarXRail, xRailOffset); d.css(scrollbarXRail, xRailOffset);
var railYOffset = {top: $this.scrollTop(), height: railYHeight}; var railYOffset = {top: element.scrollTop, height: railYHeight};
if (isScrollbarYUsingRight) { if (isScrollbarYUsingRight) {
if (isRtl) { if (isRtl) {
railYOffset.right = contentWidth - $this.scrollLeft() - scrollbarYRight - scrollbarY.offsetWidth; railYOffset.right = contentWidth - element.scrollLeft - scrollbarYRight - scrollbarY.offsetWidth;
} else { } else {
railYOffset.right = scrollbarYRight - $this.scrollLeft(); railYOffset.right = scrollbarYRight - element.scrollLeft;
} }
} else { } else {
if (isRtl) { if (isRtl) {
railYOffset.left = $this.scrollLeft() + containerWidth * 2 - contentWidth - scrollbarYLeft - scrollbarY.offsetWidth; railYOffset.left = element.scrollLeft + containerWidth * 2 - contentWidth - scrollbarYLeft - scrollbarY.offsetWidth;
} else { } else {
railYOffset.left = scrollbarYLeft + $this.scrollLeft(); railYOffset.left = scrollbarYLeft + element.scrollLeft;
} }
} }
d.css(scrollbarYRail, railYOffset); d.css(scrollbarYRail, railYOffset);
@ -162,33 +159,33 @@ module.exports = function (element, settingOrCommand) {
cls.remove(element, 'ps-active-x'); cls.remove(element, 'ps-active-x');
cls.remove(element, 'ps-active-y'); cls.remove(element, 'ps-active-y');
containerWidth = settings.includePadding ? $this.innerWidth() : $this.width(); containerWidth = settings.includePadding ? element.clientWidth : h.toInt(d.css(element, 'width'));
containerHeight = settings.includePadding ? $this.innerHeight() : $this.height(); containerHeight = settings.includePadding ? element.clientHeight : h.toInt(d.css(element, 'height'));
contentWidth = $this.prop('scrollWidth'); contentWidth = element.scrollWidth;
contentHeight = $this.prop('scrollHeight'); contentHeight = element.scrollHeight;
if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) { if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
scrollbarXActive = true; scrollbarXActive = true;
railXWidth = containerWidth - railXMarginWidth; railXWidth = containerWidth - railXMarginWidth;
scrollbarXWidth = getThumbSize(h.toInt(railXWidth * containerWidth / contentWidth)); scrollbarXWidth = getThumbSize(h.toInt(railXWidth * containerWidth / contentWidth));
scrollbarXLeft = h.toInt($this.scrollLeft() * (railXWidth - scrollbarXWidth) / (contentWidth - containerWidth)); scrollbarXLeft = h.toInt(element.scrollLeft * (railXWidth - scrollbarXWidth) / (contentWidth - containerWidth));
} else { } else {
scrollbarXActive = false; scrollbarXActive = false;
scrollbarXWidth = 0; scrollbarXWidth = 0;
scrollbarXLeft = 0; scrollbarXLeft = 0;
$this.scrollLeft(0); element.scrollLeft = 0;
} }
if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) { if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
scrollbarYActive = true; scrollbarYActive = true;
railYHeight = containerHeight - railYMarginHeight; railYHeight = containerHeight - railYMarginHeight;
scrollbarYHeight = getThumbSize(h.toInt(railYHeight * containerHeight / contentHeight)); scrollbarYHeight = getThumbSize(h.toInt(railYHeight * containerHeight / contentHeight));
scrollbarYTop = h.toInt($this.scrollTop() * (railYHeight - scrollbarYHeight) / (contentHeight - containerHeight)); scrollbarYTop = h.toInt(element.scrollTop * (railYHeight - scrollbarYHeight) / (contentHeight - containerHeight));
} else { } else {
scrollbarYActive = false; scrollbarYActive = false;
scrollbarYHeight = 0; scrollbarYHeight = 0;
scrollbarYTop = 0; scrollbarYTop = 0;
$this.scrollTop(0); element.scrollTop = 0;
} }
if (scrollbarXLeft >= railXWidth - scrollbarXWidth) { if (scrollbarXLeft >= railXWidth - scrollbarXWidth) {
@ -273,7 +270,7 @@ module.exports = function (element, settingOrCommand) {
} }
function shouldPreventWheel(deltaX, deltaY) { function shouldPreventWheel(deltaX, deltaY) {
var scrollTop = $this.scrollTop(); var scrollTop = element.scrollTop;
if (deltaX === 0) { if (deltaX === 0) {
if (!scrollbarYActive) { if (!scrollbarYActive) {
return false; return false;
@ -283,7 +280,7 @@ module.exports = function (element, settingOrCommand) {
} }
} }
var scrollLeft = $this.scrollLeft(); var scrollLeft = element.scrollLeft;
if (deltaY === 0) { if (deltaY === 0) {
if (!scrollbarXActive) { if (!scrollbarXActive) {
return false; return false;
@ -296,8 +293,8 @@ module.exports = function (element, settingOrCommand) {
} }
function shouldPreventSwipe(deltaX, deltaY) { function shouldPreventSwipe(deltaX, deltaY) {
var scrollTop = $this.scrollTop(); var scrollTop = element.scrollTop;
var scrollLeft = $this.scrollLeft(); var scrollLeft = element.scrollLeft;
var magnitudeX = Math.abs(deltaX); var magnitudeX = Math.abs(deltaX);
var magnitudeY = Math.abs(deltaY); var magnitudeY = Math.abs(deltaY);
@ -352,7 +349,7 @@ module.exports = function (element, settingOrCommand) {
// FIXME: this is a quick fix for the select problem in FF and IE. // FIXME: this is a quick fix for the select problem in FF and IE.
// If there comes an effective way to deal with the problem, // If there comes an effective way to deal with the problem,
// this lines should be removed. // this lines should be removed.
if (!h.isWebKit && $this.find('select:focus').length > 0) { if (!h.isWebKit && element.querySelector('select:focus')) {
return; return;
} }
@ -365,24 +362,24 @@ module.exports = function (element, settingOrCommand) {
if (!settings.useBothWheelAxes) { if (!settings.useBothWheelAxes) {
// deltaX will only be used for horizontal scrolling and deltaY will // deltaX will only be used for horizontal scrolling and deltaY will
// only be used for vertical scrolling - this is the default // only be used for vertical scrolling - this is the default
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed)); element.scrollTop = element.scrollTop - (deltaY * settings.wheelSpeed);
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed)); element.scrollLeft = element.scrollLeft + (deltaX * settings.wheelSpeed);
} else if (scrollbarYActive && !scrollbarXActive) { } else if (scrollbarYActive && !scrollbarXActive) {
// only vertical scrollbar is active and useBothWheelAxes option is // only vertical scrollbar is active and useBothWheelAxes option is
// active, so let's scroll vertical bar using both mouse wheel axes // active, so let's scroll vertical bar using both mouse wheel axes
if (deltaY) { if (deltaY) {
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed)); element.scrollTop = element.scrollTop() - (deltaY * settings.wheelSpeed);
} else { } else {
$this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed)); element.scrollTop = element.scrollTop() + (deltaX * settings.wheelSpeed);
} }
shouldPrevent = true; shouldPrevent = true;
} else if (scrollbarXActive && !scrollbarYActive) { } else if (scrollbarXActive && !scrollbarYActive) {
// useBothWheelAxes and only horizontal bar is active, so use both // useBothWheelAxes and only horizontal bar is active, so use both
// wheel axes for horizontal bar // wheel axes for horizontal bar
if (deltaX) { if (deltaX) {
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed)); element.scrollLeft = element.scrollLeft() + (deltaX * settings.wheelSpeed);
} else { } else {
$this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed)); element.scrollLeft = element.scrollLeft() - (deltaY * settings.wheelSpeed);
} }
shouldPrevent = true; shouldPrevent = true;
} }
@ -397,18 +394,18 @@ module.exports = function (element, settingOrCommand) {
} }
if (typeof window.onwheel !== "undefined") { if (typeof window.onwheel !== "undefined") {
$this.bind(eventClass('wheel'), mousewheelHandler); $(element).bind(eventClass('wheel'), mousewheelHandler);
} else if (typeof window.onmousewheel !== "undefined") { } else if (typeof window.onmousewheel !== "undefined") {
$this.bind(eventClass('mousewheel'), mousewheelHandler); $(element).bind(eventClass('mousewheel'), mousewheelHandler);
} }
} }
function bindKeyboardHandler() { function bindKeyboardHandler() {
var hovered = false; var hovered = false;
$this.bind(eventClass('mouseenter'), function (e) { $(element).bind(eventClass('mouseenter'), function (e) {
hovered = true; hovered = true;
}); });
$this.bind(eventClass('mouseleave'), function (e) { $(element).bind(eventClass('mouseleave'), function (e) {
hovered = false; hovered = false;
}); });
@ -463,7 +460,7 @@ module.exports = function (element, settingOrCommand) {
break; break;
case 36: // home case 36: // home
if (e.ctrlKey) { if (e.ctrlKey) {
deltaY = $this.scrollTop(); deltaY = element.scrollTop;
} else { } else {
deltaY = containerHeight; deltaY = containerHeight;
} }
@ -472,8 +469,8 @@ module.exports = function (element, settingOrCommand) {
return; return;
} }
$this.scrollTop($this.scrollTop() - deltaY); element.scrollTop = element.scrollTop - deltaY;
$this.scrollLeft($this.scrollLeft() + deltaX); element.scrollLeft = element.scrollLeft + deltaX;
shouldPrevent = shouldPreventWheel(deltaX, deltaY); shouldPrevent = shouldPreventWheel(deltaX, deltaY);
if (shouldPrevent) { if (shouldPrevent) {
@ -498,7 +495,7 @@ module.exports = function (element, settingOrCommand) {
positionRatio = 1; positionRatio = 1;
} }
$this.scrollTop((contentHeight - containerHeight) * positionRatio); element.scrollTop = (contentHeight - containerHeight) * positionRatio;
}); });
$(scrollbarX).bind(eventClass('click'), stopPropagation); $(scrollbarX).bind(eventClass('click'), stopPropagation);
@ -514,7 +511,7 @@ module.exports = function (element, settingOrCommand) {
positionRatio = 1; positionRatio = 1;
} }
$this.scrollLeft((contentWidth - containerWidth) * positionRatio); element.scrollLeft = (contentWidth - containerWidth) * positionRatio;
}); });
} }
@ -534,13 +531,13 @@ module.exports = function (element, settingOrCommand) {
function startScrolling() { function startScrolling() {
if (!scrollingLoop) { if (!scrollingLoop) {
scrollingLoop = setInterval(function () { scrollingLoop = setInterval(function () {
if (!isPluginAlive()) { if (!isPluginAlive) {
clearInterval(scrollingLoop); clearInterval(scrollingLoop);
return; return;
} }
$this.scrollTop($this.scrollTop() + scrollDiff.top); element.scrollTop = element.scrollTop + scrollDiff.top;
$this.scrollLeft($this.scrollLeft() + scrollDiff.left); element.scrollLeft = element.scrollLeft + scrollDiff.left;
updateGeometry(); updateGeometry();
}, 50); // every .1 sec }, 50); // every .1 sec
} }
@ -556,7 +553,7 @@ module.exports = function (element, settingOrCommand) {
var isSelected = false; var isSelected = false;
$(ownerDocument).bind(eventClass('selectionchange'), function (e) { $(ownerDocument).bind(eventClass('selectionchange'), function (e) {
if ($.contains($this[0], getRangeNode())) { if ($.contains(element, getRangeNode())) {
isSelected = true; isSelected = true;
} else { } else {
isSelected = false; isSelected = false;
@ -573,12 +570,12 @@ module.exports = function (element, settingOrCommand) {
$(window).bind(eventClass('mousemove'), function (e) { $(window).bind(eventClass('mousemove'), function (e) {
if (isSelected) { if (isSelected) {
var mousePosition = {x: e.pageX, y: e.pageY}; var mousePosition = {x: e.pageX, y: e.pageY};
var containerOffset = $this.offset(); var containerOffset = $(element).offset();
var containerGeometry = { var containerGeometry = {
left: containerOffset.left, left: containerOffset.left,
right: containerOffset.left + $this.outerWidth(), right: containerOffset.left + element.offsetWidth,
top: containerOffset.top, top: containerOffset.top,
bottom: containerOffset.top + $this.outerHeight() bottom: containerOffset.top + element.offsetHeight
}; };
if (mousePosition.x < containerGeometry.left + 3) { if (mousePosition.x < containerGeometry.left + 3) {
@ -620,8 +617,8 @@ module.exports = function (element, settingOrCommand) {
function bindTouchHandler(supportsTouch, supportsIePointer) { function bindTouchHandler(supportsTouch, supportsIePointer) {
function applyTouchMove(differenceX, differenceY) { function applyTouchMove(differenceX, differenceY) {
$this.scrollTop($this.scrollTop() - differenceY); element.scrollTop = element.scrollTop - differenceY;
$this.scrollLeft($this.scrollLeft() - differenceX); element.scrollLeft = element.scrollLeft() - differenceX;
updateGeometry(); updateGeometry();
} }
@ -709,7 +706,7 @@ module.exports = function (element, settingOrCommand) {
clearInterval(easingLoop); clearInterval(easingLoop);
easingLoop = setInterval(function () { easingLoop = setInterval(function () {
if (!isPluginAlive()) { if (!isPluginAlive) {
clearInterval(easingLoop); clearInterval(easingLoop);
return; return;
} }
@ -730,48 +727,47 @@ module.exports = function (element, settingOrCommand) {
if (supportsTouch) { if (supportsTouch) {
$(window).bind(eventClass("touchstart"), globalTouchStart); $(window).bind(eventClass("touchstart"), globalTouchStart);
$(window).bind(eventClass("touchend"), globalTouchEnd); $(window).bind(eventClass("touchend"), globalTouchEnd);
$this.bind(eventClass("touchstart"), touchStart); $(element).bind(eventClass("touchstart"), touchStart);
$this.bind(eventClass("touchmove"), touchMove); $(element).bind(eventClass("touchmove"), touchMove);
$this.bind(eventClass("touchend"), touchEnd); $(element).bind(eventClass("touchend"), touchEnd);
} }
if (supportsIePointer) { if (supportsIePointer) {
if (window.PointerEvent) { if (window.PointerEvent) {
$(window).bind(eventClass("pointerdown"), globalTouchStart); $(window).bind(eventClass("pointerdown"), globalTouchStart);
$(window).bind(eventClass("pointerup"), globalTouchEnd); $(window).bind(eventClass("pointerup"), globalTouchEnd);
$this.bind(eventClass("pointerdown"), touchStart); $(element).bind(eventClass("pointerdown"), touchStart);
$this.bind(eventClass("pointermove"), touchMove); $(element).bind(eventClass("pointermove"), touchMove);
$this.bind(eventClass("pointerup"), touchEnd); $(element).bind(eventClass("pointerup"), touchEnd);
} else if (window.MSPointerEvent) { } else if (window.MSPointerEvent) {
$(window).bind(eventClass("MSPointerDown"), globalTouchStart); $(window).bind(eventClass("MSPointerDown"), globalTouchStart);
$(window).bind(eventClass("MSPointerUp"), globalTouchEnd); $(window).bind(eventClass("MSPointerUp"), globalTouchEnd);
$this.bind(eventClass("MSPointerDown"), touchStart); $(element).bind(eventClass("MSPointerDown"), touchStart);
$this.bind(eventClass("MSPointerMove"), touchMove); $(element).bind(eventClass("MSPointerMove"), touchMove);
$this.bind(eventClass("MSPointerUp"), touchEnd); $(element).bind(eventClass("MSPointerUp"), touchEnd);
} }
} }
} }
function bindScrollHandler() { function bindScrollHandler() {
$this.bind(eventClass('scroll'), function (e) { $(element).bind(eventClass('scroll'), function (e) {
updateGeometry(); updateGeometry();
}); });
} }
function destroy() { function destroy() {
$this.unbind(eventClass()); $(element).unbind(eventClass());
$(window).unbind(eventClass()); $(window).unbind(eventClass());
$(ownerDocument).unbind(eventClass()); $(ownerDocument).unbind(eventClass());
$this.data('perfect-scrollbar', null); $(element).data('perfect-scrollbar', null);
$this.data('perfect-scrollbar-update', null); $(element).data('perfect-scrollbar-update', null);
$this.data('perfect-scrollbar-destroy', null); $(element).data('perfect-scrollbar-destroy', null);
$(scrollbarX).remove(); $(scrollbarX).remove();
$(scrollbarY).remove(); $(scrollbarY).remove();
$(scrollbarXRail).remove(); $(scrollbarXRail).remove();
$(scrollbarYRail).remove(); $(scrollbarYRail).remove();
// clean all variables // clean all variables
$this =
scrollbarXActive = scrollbarXActive =
scrollbarYActive = scrollbarYActive =
containerWidth = containerWidth =
@ -790,6 +786,8 @@ module.exports = function (element, settingOrCommand) {
scrollbarYLeft = scrollbarYLeft =
isRtl = isRtl =
eventClass = null; eventClass = null;
isPluginAlive = false;
} }
var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch); var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
@ -810,9 +808,9 @@ module.exports = function (element, settingOrCommand) {
if (settings.useKeyboard) { if (settings.useKeyboard) {
bindKeyboardHandler(); bindKeyboardHandler();
} }
$this.data('perfect-scrollbar', $this); $(element).data('perfect-scrollbar', true);
$this.data('perfect-scrollbar-update', updateGeometry); $(element).data('perfect-scrollbar-update', updateGeometry);
$this.data('perfect-scrollbar-destroy', destroy); $(element).data('perfect-scrollbar-destroy', destroy);
} }
initialize(); initialize();