From d74bdcccec799154f1085b51da46e3847c0f15a7 Mon Sep 17 00:00:00 2001 From: nobuti Date: Thu, 12 Jan 2017 05:32:50 +0100 Subject: [PATCH] Autoupdate. It listens new elements addition and element resize in order to trigger the update method to redraw the scroll. --- examples/options-autoupdate.html | 55 ++++++++++++++++++++++++++++++++ src/js/plugin/autoupdate.js | 23 +++++++++++++ src/js/plugin/default-setting.js | 3 +- src/js/plugin/destroy.js | 8 +++++ src/js/plugin/initialize.js | 7 ++++ src/js/plugin/resizer.js | 24 ++++++++++++++ 6 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 examples/options-autoupdate.html create mode 100644 src/js/plugin/autoupdate.js create mode 100644 src/js/plugin/resizer.js diff --git a/examples/options-autoupdate.html b/examples/options-autoupdate.html new file mode 100644 index 0000000..cecae6c --- /dev/null +++ b/examples/options-autoupdate.html @@ -0,0 +1,55 @@ + + + + + perfect-scrollbar example + + + + + +
+
+
+
+

+ + +

+ + + + diff --git a/src/js/plugin/autoupdate.js b/src/js/plugin/autoupdate.js new file mode 100644 index 0000000..d78dc35 --- /dev/null +++ b/src/js/plugin/autoupdate.js @@ -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); +}; diff --git a/src/js/plugin/default-setting.js b/src/js/plugin/default-setting.js index b3f2ddd..1b907ed 100644 --- a/src/js/plugin/default-setting.js +++ b/src/js/plugin/default-setting.js @@ -12,5 +12,6 @@ module.exports = { useBothWheelAxes: false, wheelPropagation: false, wheelSpeed: 1, - theme: 'default' + theme: 'default', + autoupdate: true }; diff --git a/src/js/plugin/destroy.js b/src/js/plugin/destroy.js index 97a83e0..b409a54 100644 --- a/src/js/plugin/destroy.js +++ b/src/js/plugin/destroy.js @@ -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); diff --git a/src/js/plugin/initialize.js b/src/js/plugin/initialize.js index 05918a5..ccaf834 100644 --- a/src/js/plugin/initialize.js +++ b/src/js/plugin/initialize.js @@ -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); + } }; diff --git a/src/js/plugin/resizer.js b/src/js/plugin/resizer.js new file mode 100644 index 0000000..9f5555d --- /dev/null +++ b/src/js/plugin/resizer.js @@ -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); +};