dom-observe
Version:
  • 3.04 kB
Markdown
## dom-observe
### DOMDeferredSelector
This class allows retrieve element when it will appear in DOM tree
For example:
```html
<body>
<div class="wrapper">
<!-- There are some elements will be placed when AJAX request is completed -->
</div>
</body>
```
```typescript
const deferredSelector = DOMDeferredSelector.use<HTMLDivElement>(
() => document.querySelector('.ajax-inserted-element'),
{
interval: 250,
repeats: Infinity // Deferred selector will check the DOM forever
}
);
```
Also, you can use alternative way to create deferred selector object
```typescript
const deferredSelector = new DOMDeferredSelector(
() => document.querySelector('.ajax-inserted-element'),
{
interval: 250,
repeats: Infinity // Deferred selector will check the DOM forever
}
);
// You should activate it by yourself
deferredSelector.activate();
```
Then you can use promise
```typescript
deferredSelector.promise().then($element => {
// Do whatever you want to do with the element, but don't forget to check
// that the element isn't null
});
```
If at some point you don't want to track the element, you can simply call
```typescript
deferredSelector.cancel(); // Promise will be resolved with null
```
When the promise resolved and at some point you want to track the element again
you can simply call
```typescript
deferredSelector.reactivate();
deferredSelector.promise().then($element => {
// Do something with the element
});
```
### DOMObserver
DOMObserver allows track element appear, disappear and changes
```typescript
const domObserver = new DOMObserver(
() => document.querySelector('.ajax-inserted-element'),
{
interval: 250, // How often to check whether element appeared or not
// Parameters inherits MutationObserverInit
}
);
```
Then, to start the observer you simply need to run
```typescript
domObserver.start();
```
If at some point you don't want to track element changes, you can simply run
```typescript
domObserver.stop();
```
`DOMObserver` provides few events, you can subscribe to them in that way:
```typescript
domObserver.on('start', () => console.log('Started'));
domObserver.once('stop', () => console.log('Stopped'));
```
#### DOMObserver#events
- `start` - Occurs, when `DOMObserver.start` is called
- `appear` (`$element`: element returned with selector) - Occurs, when element appears in DOM
- `change` (`$element`: element returned with selector, `records`: list of `MutationRecord` objects) - Occurs, when element changed (this event occurs only when element is in DOM already)
- `disappear` (`$element`: element returned with selector) - Occurs, when element is disappears from DOM
- `stop` - Occurs, when `DOMObserver.stop` is called