import { window } from 'ssr-window';
|
import Utils from '../../utils/utils';
|
import Support from '../../utils/support';
|
|
const Observer = {
|
func: window.MutationObserver || window.WebkitMutationObserver,
|
attach(target, options = {}) {
|
const swiper = this;
|
|
const ObserverFunc = Observer.func;
|
const observer = new ObserverFunc((mutations) => {
|
// The observerUpdate event should only be triggered
|
// once despite the number of mutations. Additional
|
// triggers are redundant and are very costly
|
if (mutations.length === 1) {
|
swiper.emit('observerUpdate', mutations[0]);
|
return;
|
}
|
const observerUpdate = function observerUpdate() {
|
swiper.emit('observerUpdate', mutations[0]);
|
};
|
|
if (window.requestAnimationFrame) {
|
window.requestAnimationFrame(observerUpdate);
|
} else {
|
window.setTimeout(observerUpdate, 0);
|
}
|
});
|
|
observer.observe(target, {
|
attributes: typeof options.attributes === 'undefined' ? true : options.attributes,
|
childList: typeof options.childList === 'undefined' ? true : options.childList,
|
characterData: typeof options.characterData === 'undefined' ? true : options.characterData,
|
});
|
|
swiper.observer.observers.push(observer);
|
},
|
init() {
|
const swiper = this;
|
if (!Support.observer || !swiper.params.observer) return;
|
if (swiper.params.observeParents) {
|
const containerParents = swiper.$el.parents();
|
for (let i = 0; i < containerParents.length; i += 1) {
|
swiper.observer.attach(containerParents[i]);
|
}
|
}
|
// Observe container
|
swiper.observer.attach(swiper.$el[0], { childList: swiper.params.observeSlideChildren });
|
|
// Observe wrapper
|
swiper.observer.attach(swiper.$wrapperEl[0], { attributes: false });
|
},
|
destroy() {
|
const swiper = this;
|
swiper.observer.observers.forEach((observer) => {
|
observer.disconnect();
|
});
|
swiper.observer.observers = [];
|
},
|
};
|
|
export default {
|
name: 'observer',
|
params: {
|
observer: false,
|
observeParents: false,
|
observeSlideChildren: false,
|
},
|
create() {
|
const swiper = this;
|
Utils.extend(swiper, {
|
observer: {
|
init: Observer.init.bind(swiper),
|
attach: Observer.attach.bind(swiper),
|
destroy: Observer.destroy.bind(swiper),
|
observers: [],
|
},
|
});
|
},
|
on: {
|
init() {
|
const swiper = this;
|
swiper.observer.init();
|
},
|
destroy() {
|
const swiper = this;
|
swiper.observer.destroy();
|
},
|
},
|
};
|