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

Merge pull request #1 from nobuti/autoupdate

Browse Source 
Autoupdate
This commit is contained in:
Buti 2017-01-16 13:05:29 +01:00 committed by GitHub
commit 5f0a423128
7 changed files with 126 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>

20
src/js/lib/helper.js
View File

@ -23,6 +23,26 @@ var clone = exports.clone = function (obj) {
}
};
exports.debounce = function (func, wait, immediate) {
var timeout;
return function () {
var context = this;
var args = arguments;
var later = function () {
timeout = null;
if (!immediate) {
func.apply(context, args);
}
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) {
func.apply(context, args);
}
};
};
exports.extend = function (original, source) {
var result = clone(original);
for (var key in source) {

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
};

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

@ -11,6 +11,10 @@ module.exports = function (element) {
return;
}
if (i.observer) {
i.observer.disconnect();
}
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);
}
};

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

@ -0,0 +1,15 @@
'use strict';
var update = require('./update');
var instances = require('./instances');
var _ = require('../lib/helper');
module.exports = function (element) {
var i = instances.get(element);
var onResize = function () {
update(element);
};
i.event.bind(window, 'resize', _.debounce(onResize, 60));
};