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

If scrollbar's detached, reinitialise the plugin in update.

Browse Source
master
Hyunje Alex Jun 10 years ago
parent c8fe0b9269
commit b5d0958e82
11 changed files with 154 additions and 115 deletions
Show Stats Download Patch File Download Diff File

43
examples/text-content.html
Unescape View File

@ -11,30 +11,47 @@
height:150px;
width: 400px;
overflow: hidden;
position: absolute;
position: relative;
}
</style>
</head>
<body>
<div id="description" class="wrapper">
<div>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
</div>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
<p>The command takes options applicable</p>
</div>
<button id='redraw'>Redraw</button>
<script>
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#description'));
};
$('#redraw').addEventListener('click', function () {
var oldHtml = $('#description').innerHTML;
$('#description').innerHTML = '';
setTimeout(function () {
$('#description').innerHTML = '' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>' +
'<p>The command takes options applicable</p>';
Ps.update($('#description'));
}, 500);
});
</script>
</body>
</html>

2
src/js/plugin/handler/click-rail.js
Unescape View File

@ -5,7 +5,7 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindClickRailHandler(element, i) {
function pageOffset(el) {

2
src/js/plugin/handler/drag-scrollbar.js
Unescape View File

@ -6,7 +6,7 @@
var d = require('../../lib/dom')
, h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindMouseScrollXHandler(element, i) {
var currentLeft = null;

2
src/js/plugin/handler/keyboard.js
Unescape View File

@ -5,7 +5,7 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindKeyboardHandler(element, i) {
var hovered = false;

2
src/js/plugin/handler/mouse-wheel.js
Unescape View File

@ -5,7 +5,7 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindMouseWheelHandler(element, i) {
var shouldPrevent = false;

2
src/js/plugin/handler/native-scroll.js
Unescape View File

@ -4,7 +4,7 @@
'use strict';
var instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindNativeScrollHandler(element, i) {
i.event.bind(element, 'scroll', function () {

2
src/js/plugin/handler/selection.js
Unescape View File

@ -5,7 +5,7 @@
var h = require('../../lib/helper')
, instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindSelectionHandler(element, i) {
function getRangeNode() {

2
src/js/plugin/handler/touch.js
Unescape View File

@ -4,7 +4,7 @@
'use strict';
var instances = require('../instances')
, updateGeometry = require('../update');
, updateGeometry = require('../update-geometry');
function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
function shouldPreventDefault(deltaX, deltaY) {

2
src/js/plugin/initialize.js
Unescape View File

@ -6,7 +6,7 @@
var cls = require('../lib/class')
, h = require('../lib/helper')
, instances = require('./instances')
, updateGeometry = require('./update');
, updateGeometry = require('./update-geometry');
// Handlers
var clickRailHandler = require('./handler/click-rail')

106
src/js/plugin/update-geometry.js
Unescape View File

@ -0,0 +1,106 @@
/* Copyright (c) 2015 Hyunje Alex Jun and other contributors
* Licensed under the MIT License
*/
'use strict';
var cls = require('../lib/class')
, d = require('../lib/dom')
, h = require('../lib/helper')
, instances = require('./instances');
function getThumbSize(i, thumbSize) {
if (i.settings.minScrollbarLength) {
thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
}
if (i.settings.maxScrollbarLength) {
thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
}
return thumbSize;
}
function updateCss(element, i) {
var xRailOffset = {width: i.railXWidth};
if (i.isRtl) {
xRailOffset.left = element.scrollLeft + i.containerWidth - i.contentWidth;
} else {
xRailOffset.left = element.scrollLeft;
}
if (i.isScrollbarXUsingBottom) {
xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop;
} else {
xRailOffset.top = i.scrollbarXTop + element.scrollTop;
}
d.css(i.scrollbarXRail, xRailOffset);
var yRailOffset = {top: element.scrollTop, height: i.railYHeight};
if (i.isScrollbarYUsingRight) {
if (i.isRtl) {
yRailOffset.right = i.contentWidth - 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;
} else {
yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
}
}
d.css(i.scrollbarYRail, yRailOffset);
d.css(i.scrollbarX, {left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth});
d.css(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth});
}
module.exports = function (element) {
var i = instances.get(element);
// Hide scrollbars not to affect scrollWidth and scrollHeight
cls.remove(element, 'ps-active-x');
cls.remove(element, 'ps-active-y');
i.containerWidth = element.clientWidth;
i.containerHeight = element.clientHeight;
i.contentWidth = element.scrollWidth;
i.contentHeight = element.scrollHeight;
if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
i.scrollbarXActive = true;
i.railXWidth = i.containerWidth - i.railXMarginWidth;
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));
} else {
i.scrollbarXActive = false;
i.scrollbarXWidth = 0;
i.scrollbarXLeft = 0;
element.scrollLeft = 0;
}
if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
i.scrollbarYActive = true;
i.railYHeight = i.containerHeight - i.railYMarginHeight;
i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight));
i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
} else {
i.scrollbarYActive = false;
i.scrollbarYHeight = 0;
i.scrollbarYTop = 0;
element.scrollTop = 0;
}
if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
}
if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
}
updateCss(element, i);
if (i.scrollbarXActive) {
cls.add(element, 'ps-active-x');
}
if (i.scrollbarYActive) {
cls.add(element, 'ps-active-y');
}
};

104
src/js/plugin/update.js
Unescape View File

@ -3,104 +3,20 @@
*/
'use strict';
var cls = require('../lib/class')
, d = require('../lib/dom')
, h = require('../lib/helper')
, instances = require('./instances');
function getThumbSize(i, thumbSize) {
if (i.settings.minScrollbarLength) {
thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
}
if (i.settings.maxScrollbarLength) {
thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
}
return thumbSize;
}
function updateCss(element, i) {
var xRailOffset = {width: i.railXWidth};
if (i.isRtl) {
xRailOffset.left = element.scrollLeft + i.containerWidth - i.contentWidth;
} else {
xRailOffset.left = element.scrollLeft;
}
if (i.isScrollbarXUsingBottom) {
xRailOffset.bottom = i.scrollbarXBottom - element.scrollTop;
} else {
xRailOffset.top = i.scrollbarXTop + element.scrollTop;
}
d.css(i.scrollbarXRail, xRailOffset);
var yRailOffset = {top: element.scrollTop, height: i.railYHeight};
if (i.isScrollbarYUsingRight) {
if (i.isRtl) {
yRailOffset.right = i.contentWidth - 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;
} else {
yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
}
}
d.css(i.scrollbarYRail, yRailOffset);
d.css(i.scrollbarX, {left: i.scrollbarXLeft, width: i.scrollbarXWidth - i.railBorderXWidth});
d.css(i.scrollbarY, {top: i.scrollbarYTop, height: i.scrollbarYHeight - i.railBorderYWidth});
}
var destroy = require('./destroy')
, initialize = require('./initialize')
, instances = require('./instances')
, updateGeometry = require('./update-geometry');
module.exports = function (element) {
var i = instances.get(element);
// Hide scrollbars not to affect scrollWidth and scrollHeight
cls.remove(element, 'ps-active-x');
cls.remove(element, 'ps-active-y');
i.containerWidth = element.clientWidth;
i.containerHeight = element.clientHeight;
i.contentWidth = element.scrollWidth;
i.contentHeight = element.scrollHeight;
if (!i.settings.suppressScrollX && i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth) {
i.scrollbarXActive = true;
i.railXWidth = i.containerWidth - i.railXMarginWidth;
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));
} else {
i.scrollbarXActive = false;
i.scrollbarXWidth = 0;
i.scrollbarXLeft = 0;
element.scrollLeft = 0;
}
if (!i.settings.suppressScrollY && i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight) {
i.scrollbarYActive = true;
i.railYHeight = i.containerHeight - i.railYMarginHeight;
i.scrollbarYHeight = getThumbSize(i, h.toInt(i.railYHeight * i.containerHeight / i.contentHeight));
i.scrollbarYTop = h.toInt(element.scrollTop * (i.railYHeight - i.scrollbarYHeight) / (i.contentHeight - i.containerHeight));
if (!i.scrollbarXRail || !element.contains(i.scrollbarXRail) ||
!i.scrollbarYRail || !element.contains(i.scrollbarYRail)) {
// If there's something wrong in the plugin, re-initialise.
destroy(element);
initialize(element);
} else {
i.scrollbarYActive = false;
i.scrollbarYHeight = 0;
i.scrollbarYTop = 0;
element.scrollTop = 0;
}
if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
}
if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
}
updateCss(element, i);
if (i.scrollbarXActive) {
cls.add(element, 'ps-active-x');
}
if (i.scrollbarYActive) {
cls.add(element, 'ps-active-y');
updateGeometry(element);
}
};

Write Preview
Loading…
Cancel
Save