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

Dispatch custom scroll events with new updateScroll function

Browse Source
This commit is contained in:
DanielApt 2015-09-23 20:49:37 +01:00
parent afebe908b1
commit 3b90c734e4
8 changed files with 116 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/plugin/handler/click-rail.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update-geometry');
, updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindClickRailHandler(element, i) {
function pageOffset(el) {
@ -28,7 +29,7 @@ function bindClickRailHandler(element, i) {
positionRatio = 1;
}
element.scrollTop = (i.contentHeight - i.containerHeight) * positionRatio;
updateScroll(element, 'top', (i.contentHeight - i.containerHeight) * positionRatio);
updateGeometry(element);
e.stopPropagation();
@ -49,7 +50,7 @@ function bindClickRailHandler(element, i) {
positionRatio = 1;
}
element.scrollLeft = ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment;
updateScroll(element, 'left', ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment);
updateGeometry(element);
e.stopPropagation();

7
src/js/plugin/handler/drag-scrollbar.js
View File

@ -6,7 +6,8 @@
var d = require('../../lib/dom')
, h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update-geometry');
, updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindMouseScrollXHandler(element, i) {
var currentLeft = null;
@ -25,7 +26,7 @@ function bindMouseScrollXHandler(element, i) {
}
var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment;
element.scrollLeft = scrollLeft;
updateScroll(element, 'left', scrollLeft);
}
var mouseMoveHandler = function (e) {
@ -70,7 +71,7 @@ function bindMouseScrollYHandler(element, i) {
}
var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - (i.railYRatio * i.scrollbarYHeight)));
element.scrollTop = scrollTop;
updateScroll(element, 'top', scrollTop);
}
var mouseMoveHandler = function (e) {

7
src/js/plugin/handler/keyboard.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update-geometry');
, updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindKeyboardHandler(element, i) {
var hovered = false;
@ -107,8 +108,8 @@ function bindKeyboardHandler(element, i) {
return;
}
element.scrollTop = element.scrollTop - deltaY;
element.scrollLeft = element.scrollLeft + deltaX;
updateScroll(element, 'top', element.scrollTop - deltaY);
updateScroll(element, 'left', element.scrollLeft + deltaX);
updateGeometry(element);
shouldPrevent = shouldPreventDefault(deltaX, deltaY);

15
src/js/plugin/handler/mouse-wheel.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update-geometry');
, updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindMouseWheelHandler(element, i) {
var shouldPrevent = false;
@ -100,24 +101,24 @@ function bindMouseWheelHandler(element, i) {
if (!i.settings.useBothWheelAxes) {
// deltaX will only be used for horizontal scrolling and deltaY will
// only be used for vertical scrolling - this is the default
element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed);
element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed);
updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
} else if (i.scrollbarYActive && !i.scrollbarXActive) {
// only vertical scrollbar is active and useBothWheelAxes option is
// active, so let's scroll vertical bar using both mouse wheel axes
if (deltaY) {
element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed);
updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
} else {
element.scrollTop = element.scrollTop + (deltaX * i.settings.wheelSpeed);
updateScroll(element, 'top', element.scrollTop + (deltaX * i.settings.wheelSpeed));
}
shouldPrevent = true;
} else if (i.scrollbarXActive && !i.scrollbarYActive) {
// useBothWheelAxes and only horizontal bar is active, so use both
// wheel axes for horizontal bar
if (deltaX) {
element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed);
updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
} else {
element.scrollLeft = element.scrollLeft - (deltaY * i.settings.wheelSpeed);
updateScroll(element, 'left', element.scrollLeft - (deltaY * i.settings.wheelSpeed));
}
shouldPrevent = true;
}

7
src/js/plugin/handler/selection.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update-geometry');
, updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindSelectionHandler(element, i) {
function getRangeNode() {
@ -28,8 +29,8 @@ function bindSelectionHandler(element, i) {
return;
}
element.scrollTop = element.scrollTop + scrollDiff.top;
element.scrollLeft = element.scrollLeft + scrollDiff.left;
updateScroll(element, 'top', element.scrollTop + scrollDiff.top);
updateScroll(element, 'left', element.scrollLeft + scrollDiff.left);
updateGeometry(element);
}, 50); // every .1 sec
}

7
src/js/plugin/handler/touch.js
View File

@ -4,7 +4,8 @@
'use strict';
var instances = require('../instances')
, updateGeometry = require('../update-geometry');
, updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
function shouldPreventDefault(deltaX, deltaY) {
@ -33,8 +34,8 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
}
function applyTouchMove(differenceX, differenceY) {
element.scrollTop = element.scrollTop - differenceY;
element.scrollLeft = element.scrollLeft - differenceX;
updateScroll(element, 'top', element.scrollTop - differenceY);
updateScroll(element, 'left', element.scrollLeft - differenceX);
updateGeometry(element);
}

5
src/js/plugin/update-geometry.js
View File

@ -6,7 +6,8 @@
var cls = require('../lib/class')
, d = require('../lib/dom')
, h = require('../lib/helper')
, instances = require('./instances');
, instances = require('./instances')
, updateScroll = require('./update-scroll');
function getThumbSize(i, thumbSize) {
if (i.settings.minScrollbarLength) {
@ -103,7 +104,7 @@ module.exports = function (element) {
i.scrollbarYActive = false;
i.scrollbarYHeight = 0;
i.scrollbarYTop = 0;
element.scrollTop = 0;
updateScroll(element, 'top', 0);
}
if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {

85
src/js/plugin/update-scroll.js Normal file
View File

@ -0,0 +1,85 @@
/* Copyright (c) 2015 Hyunje Alex Jun and other contributors
* Licensed under the MIT License
*/
'use strict';
var instances = require('./instances');
var upEvent = document.createEvent('Event')
, downEvent = document.createEvent('Event')
, leftEvent = document.createEvent('Event')
, rightEvent = document.createEvent('Event')
, yEvent = document.createEvent('Event')
, xEvent = document.createEvent('Event')
, lastTop
, lastLeft;
upEvent.initEvent('ps-scroll-up', true, true);
downEvent.initEvent('ps-scroll-down', true, true);
leftEvent.initEvent('ps-scroll-left', true, true);
rightEvent.initEvent('ps-scroll-right', true, true);
yEvent.initEvent('ps-scroll-y', true, true);
xEvent.initEvent('ps-scroll-x', true, true);
module.exports = function (element, axis, value) {
if (typeof element === 'undefined' ) {
throw 'You must provide an element to the update-scroll function';
}
if (typeof axis === 'undefined') {
throw 'You must provide an axis to the update-scroll function';
}
if (typeof value === 'undefined') {
throw 'You must provide a value to the update-scroll function'
}
if (value < 0) {
return; // don't allow negative scroll
}
var i = instances.get(element);
if (axis === 'top' && value > i.contentHeight - i.containerHeight) {
return; // don't allow scroll past container
}
if (axis === 'left' && value > i.contentWidth - i.containerWidth) {
return; // don't allow scroll past container
}
if (!lastTop) {
lastTop = element.scrollTop;
}
if (!lastLeft) {
lastLeft = element.scrollLeft;
}
if (axis === 'top' && value < lastTop) {
element.dispatchEvent(upEvent);
}
if (axis === 'top' && value > lastTop) {
element.dispatchEvent(downEvent);
}
if (axis === 'left' && value < lastLeft) {
element.dispatchEvent(leftEvent);
}
if (axis === 'left' && value > lastLeft) {
element.dispatchEvent(rightEvent);
}
if (axis === 'top') {
element.scrollTop = lastTop = value;
element.dispatchEvent(yEvent);
}
if (axis === 'left') {
element.scrollLeft = lastLeft = value;
element.dispatchEvent(xEvent);
}
};