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

Dom changed event.

Browse Source 
Updated docs.
This commit is contained in:
nobuti 2017-01-18 20:14:23 +01:00
parent 5f0a423128
commit 4707acc287
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -332,6 +332,10 @@ The number of pixels the content width can surpass the container width without e
The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels. The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.
**Default**: `0` **Default**: `0`
### autoupdate
When set to true, the scroll will be updated when an element is added or removed from the content.
**Default**: `true`
### theme ### theme
A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.
**Default**: `'default'` **Default**: `'default'`
@ -396,6 +400,9 @@ This event fires when scrolling reaches the start of the x-axis.
### ps-x-reach-end ### ps-x-reach-end
This event fires when scrolling reaches the end of the x-axis. This event fires when scrolling reaches the end of the x-axis.
### ps-dom-change
This event fires when dom elements have been added to or removed from the content.
You can listen to these events either with vanilla JavaScript You can listen to these events either with vanilla JavaScript
```javascript ```javascript
document.addEventListener('ps-scroll-x', function () { document.addEventListener('ps-scroll-x', function () {

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

@ -4,6 +4,12 @@ var update = require('./update');
var MutationObserver = window.MutationObserver; var MutationObserver = window.MutationObserver;
var instances = require('./instances'); var instances = require('./instances');
var createDOMEvent = function (name) {
var event = document.createEvent('Event');
event.initEvent(name, true, true);
return event;
};
module.exports = function (element) { module.exports = function (element) {
if (MutationObserver === null || MutationObserver === undefined) { if (MutationObserver === null || MutationObserver === undefined) {
// MutationObserver is not supported // MutationObserver is not supported
@ -13,6 +19,7 @@ module.exports = function (element) {
var i = instances.get(element); var i = instances.get(element);
var onMutationObserver = function () { var onMutationObserver = function () {
update(element); update(element);
element.dispatchEvent(createDOMEvent('ps-dom-change'));
}; };
i.observer = new MutationObserver(onMutationObserver); i.observer = new MutationObserver(onMutationObserver);