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
This commit is contained in:
Hyunje Alex Jun 2015-02-05 18:57:33 +00:00
parent c8fe0b9269
commit b5d0958e82
11 changed files with 154 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
examples/text-content.html
View File

@ -11,13 +11,12 @@
height:150px; height:150px;
width: 400px; width: 400px;
overflow: hidden; overflow: hidden;
position: absolute; position: relative;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="description" class="wrapper"> <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>
@ -29,12 +28,30 @@
<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> </div>
</div> <button id='redraw'>Redraw</button>
<script> <script>
var $ = document.querySelector.bind(document); var $ = document.querySelector.bind(document);
window.onload = function () { window.onload = function () {
Ps.initialize($('#description')); 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> </script>
</body> </body>
</html> </html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

106
src/js/plugin/update-geometry.js Normal file
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
View File

@ -3,104 +3,20 @@
*/ */
'use strict'; 'use strict';
var cls = require('../lib/class') var destroy = require('./destroy')
, d = require('../lib/dom') , initialize = require('./initialize')
, h = require('../lib/helper') , instances = require('./instances')
, instances = require('./instances'); , updateGeometry = require('./update-geometry');
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) { module.exports = function (element) {
var i = instances.get(element); var i = instances.get(element);
// Hide scrollbars not to affect scrollWidth and scrollHeight if (!i.scrollbarXRail || !element.contains(i.scrollbarXRail) ||
cls.remove(element, 'ps-active-x'); !i.scrollbarYRail || !element.contains(i.scrollbarYRail)) {
cls.remove(element, 'ps-active-y'); // If there's something wrong in the plugin, re-initialise.
destroy(element);
i.containerWidth = element.clientWidth; initialize(element);
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 { } else {
i.scrollbarXActive = false; updateGeometry(element);
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');
} }
}; };