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

Autoupdate.

Browse Source 
It listens new elements addition and element resize in order to trigger the update method to redraw
the scroll.
This commit is contained in:
nobuti 2017-01-12 05:32:50 +01:00
parent 5f34edc8c7
commit d74bdcccec
6 changed files with 119 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
examples/options-autoupdate.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 80%; height: 400px; overflow: auto; }
.always-visible.contentHolder .content { background-image: url('./azusa.jpg'); width: 680px; height: 320px; }
.spacer { text-align:center }
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail {
opacity: 0.6;
}
</style>
</head>
<body>
<div id="Default" class="contentHolder always-visible">
<div id="Content" class="content">
</div>
</div>
<p style='text-align: center'>
<button onclick='addContent()'>Add new content!</button>
<button onclick='removeContent()'>Remove content!</button>
</p>
<script>
var i = 1;
var $ = document.querySelector.bind(document);
window.onload = function () {
Ps.initialize($('#Default'), {
autoupdate: true
});
};
var addContent = function () {
var newDiv = document.createElement('div');
newDiv.id = 'node' + i++;
var newContent = document.createTextNode('Hi there!');
newDiv.appendChild(newContent);
$('#Default').insertBefore(newDiv, $('#Content'));
};
var removeContent = function () {
if (i <= 1) return;
var node = $('#node' + --i);
node.parentNode.removeChild(node);
};
</script>
</body>
</html>

23
src/js/plugin/autoupdate.js Normal file
View File

@ -0,0 +1,23 @@
'use strict';
var update = require('./update');
var MutationObserver = window.MutationObserver;
var instances = require('./instances');
module.exports = function (element) {
if (MutationObserver === null || MutationObserver === undefined) {
// MutationObserver is not supported
return;
}
var i = instances.get(element);
var onMutationObserver = function () {
update(element);
};
i.observer = new MutationObserver(onMutationObserver);
onMutationObserver();
var config = { childList: true, subtree: true };
i.observer.observe(element, config);
};

3
src/js/plugin/default-setting.js
View File

@ -12,5 +12,6 @@ module.exports = {
useBothWheelAxes: false,
wheelPropagation: false,
wheelSpeed: 1,
theme: 'default'
theme: 'default',
autoupdate: true
};

8
src/js/plugin/destroy.js
View File

@ -11,6 +11,14 @@ module.exports = function (element) {
return;
}
if (i.observer) {
i.observer.disconnect();
}
if (i.resizer) {
i.resizer.remove();
}
i.event.unbindAll();
dom.remove(i.scrollbarX);
dom.remove(i.scrollbarY);

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

@ -4,6 +4,8 @@ var _ = require('../lib/helper');
var cls = require('../lib/class');
var instances = require('./instances');
var updateGeometry = require('./update-geometry');
var autoupdate = require('./autoupdate');
var resizer = require('./resizer');
// Handlers
var handlers = {
@ -34,4 +36,9 @@ module.exports = function (element, userSettings) {
nativeScrollHandler(element);
updateGeometry(element);
if (i.settings.autoupdate) {
autoupdate(element);
resizer(element);
}
};

24
src/js/plugin/resizer.js Normal file
View File

@ -0,0 +1,24 @@
'use strict';
var update = require('./update');
var instances = require('./instances');
module.exports = function (element) {
var CSS = 'position:absolute;left:0;top:-100%;width:100%;height:100%;margin:1px 0 0;border:none;opacity:0;visibility:hidden;pointer-events:none;';
var i = instances.get(element);
var onMutationObserver = function () {
update(element);
};
var resizer = function (element, handler) {
var frame = document.createElement('iframe');
frame.style.cssText = CSS;
element.appendChild(frame);
i.event.bind(frame.contentWindow, 'resize', handler);
return frame;
};
i.resizer = resizer(element, onMutationObserver);
};