/*
* Copyright (C) 2023-2024 Yomitan Authors
* Copyright (C) 2020-2022 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*/
/**
* Class which is used to observe elements matching a selector in specific element.
* @template [T=unknown]
*/
export class SelectorObserver {
/**
* Creates a new instance.
* @param {import('selector-observer').ConstructorDetails} details The configuration for the object.
*/
constructor({selector, ignoreSelector = null, onAdded = null, onRemoved = null, onChildrenUpdated = null, isStale = null}) {
/** @type {string} */
this._selector = selector;
/** @type {?string} */
this._ignoreSelector = ignoreSelector;
/** @type {?import('selector-observer').OnAddedCallback} */
this._onAdded = onAdded;
/** @type {?import('selector-observer').OnRemovedCallback} */
this._onRemoved = onRemoved;
/** @type {?import('selector-observer').OnChildrenUpdatedCallback} */
this._onChildrenUpdated = onChildrenUpdated;
/** @type {?import('selector-observer').IsStaleCallback} */
this._isStale = isStale;
/** @type {?Element} */
this._observingElement = null;
/** @type {MutationObserver} */
this._mutationObserver = new MutationObserver(this._onMutation.bind(this));
/** @type {Map>} */
this._elementMap = new Map(); // Map([element => observer]...)
/** @type {Map>>} */
this._elementAncestorMap = new Map(); // Map([element => Set([observer]...)]...)
/** @type {boolean} */
this._isObserving = false;
}
/**
* Returns whether or not an element is currently being observed.
* @returns {boolean} `true` if an element is being observed, `false` otherwise.
*/
get isObserving() {
return this._observingElement !== null;
}
/**
* Starts DOM mutation observing the target element.
* @param {Element} element The element to observe changes in.
* @param {boolean} [attributes] A boolean for whether or not attribute changes should be observed.
* @throws {Error} An error if element is null.
* @throws {Error} An error if an element is already being observed.
*/
observe(element, attributes = false) {
if (element === null) {
throw new Error('Invalid element');
}
if (this.isObserving) {
throw new Error('Instance is already observing an element');
}
this._observingElement = element;
this._mutationObserver.observe(element, {
attributes: !!attributes,
childList: true,
subtree: true
});
const {parentNode} = element;
this._onMutation([{
type: 'childList',
target: parentNode !== null ? parentNode : element,
addedNodes: [element],
removedNodes: []
}]);
}
/**
* Stops observing the target element.
*/
disconnect() {
if (!this.isObserving) { return; }
this._mutationObserver.disconnect();
this._observingElement = null;
for (const observer of this._elementMap.values()) {
this._removeObserver(observer);
}
}
/**
* Returns an iterable list of [element, data] pairs.
* @yields {[element: Element, data: T]} A sequence of [element, data] pairs.
* @returns {Generator<[element: Element, data: T], void, unknown>}
*/
*entries() {
for (const {element, data} of this._elementMap.values()) {
yield [element, data];
}
}
/**
* Returns an iterable list of data for every element.
* @yields {T} A sequence of data values.
* @returns {Generator}
*/
*datas() {
for (const {data} of this._elementMap.values()) {
yield data;
}
}
// Private
/**
* @param {(MutationRecord|import('selector-observer').MutationRecordLike)[]} mutationList
*/
_onMutation(mutationList) {
for (const mutation of mutationList) {
switch (mutation.type) {
case 'childList':
this._onChildListMutation(mutation);
break;
case 'attributes':
this._onAttributeMutation(mutation);
break;
}
}
}
/**
* @param {MutationRecord|import('selector-observer').MutationRecordLike} record
*/
_onChildListMutation({addedNodes, removedNodes, target}) {
const selector = this._selector;
const ELEMENT_NODE = Node.ELEMENT_NODE;
for (const node of removedNodes) {
const observers = this._elementAncestorMap.get(node);
if (typeof observers === 'undefined') { continue; }
for (const observer of observers) {
this._removeObserver(observer);
}
}
for (const node of addedNodes) {
if (node.nodeType !== ELEMENT_NODE) { continue; }
if (/** @type {Element} */ (node).matches(selector)) {
this._createObserver(/** @type {Element} */ (node));
}
for (const childNode of /** @type {Element} */ (node).querySelectorAll(selector)) {
this._createObserver(childNode);
}
}
if (
this._onChildrenUpdated !== null &&
(addedNodes.length !== 0 || addedNodes.length !== 0)
) {
for (let node = /** @type {?Node} */ (target); node !== null; node = node.parentNode) {
const observer = this._elementMap.get(node);
if (typeof observer !== 'undefined') {
this._onObserverChildrenUpdated(observer);
}
}
}
}
/**
* @param {MutationRecord|import('selector-observer').MutationRecordLike} record
*/
_onAttributeMutation({target}) {
const selector = this._selector;
const observers = this._elementAncestorMap.get(/** @type {Element} */ (target));
if (typeof observers !== 'undefined') {
for (const observer of observers) {
const element = observer.element;
if (
!element.matches(selector) ||
this._shouldIgnoreElement(element) ||
this._isObserverStale(observer)
) {
this._removeObserver(observer);
}
}
}
if (/** @type {Element} */ (target).matches(selector)) {
this._createObserver(/** @type {Element} */ (target));
}
}
/**
* @param {Element} element
*/
_createObserver(element) {
if (this._elementMap.has(element) || this._shouldIgnoreElement(element) || this._onAdded === null) { return; }
const data = this._onAdded(element);
if (typeof data === 'undefined') { return; }
const ancestors = this._getAncestors(element);
const observer = {element, ancestors, data};
this._elementMap.set(element, observer);
for (const ancestor of ancestors) {
let observers = this._elementAncestorMap.get(ancestor);
if (typeof observers === 'undefined') {
observers = new Set();
this._elementAncestorMap.set(ancestor, observers);
}
observers.add(observer);
}
}
/**
* @param {import('selector-observer').Observer} observer
*/
_removeObserver(observer) {
const {element, ancestors, data} = observer;
this._elementMap.delete(element);
for (const ancestor of ancestors) {
const observers = this._elementAncestorMap.get(ancestor);
if (typeof observers === 'undefined') { continue; }
observers.delete(observer);
if (observers.size === 0) {
this._elementAncestorMap.delete(ancestor);
}
}
if (this._onRemoved !== null) {
this._onRemoved(element, data);
}
}
/**
* @param {import('selector-observer').Observer} observer
*/
_onObserverChildrenUpdated(observer) {
if (this._onChildrenUpdated === null) { return; }
this._onChildrenUpdated(observer.element, observer.data);
}
/**
* @param {import('selector-observer').Observer} observer
* @returns {boolean}
*/
_isObserverStale(observer) {
return (this._isStale !== null && this._isStale(observer.element, observer.data));
}
/**
* @param {Element} element
* @returns {boolean}
*/
_shouldIgnoreElement(element) {
return (this._ignoreSelector !== null && element.matches(this._ignoreSelector));
}
/**
* @param {Node} node
* @returns {Node[]}
*/
_getAncestors(node) {
const root = this._observingElement;
const results = [];
let n = /** @type {?Node} */ (node);
while (n !== null) {
results.push(n);
if (n === root) { break; }
n = n.parentNode;
}
return results;
}
}