Dom changed event.

Updated docs.
master
nobuti 8 years ago
parent 5f0a423128
commit 4707acc287

@ -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 () {

@ -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);

Loading…
Cancel
Save