.cursor-lineの変更を検知する
.cursor-lineが付け変わるのをMutationObserverで検知できないか試してみる
勿論.lines全体を
subtree: true にして監視すれば検知できるのだが、行の編集まで検知してしまうので、なるべく避けたい監視する範囲を減らして負荷を下げたい
試してみる
2021-07-16 08:56:50 これは動かなかった
js{
const observer = new MutationObserver(() => console.log('.cursor-line is changed.'));
observer.observe(document.querySelector('.lines'), {childList: true});
} attributes と subtree を組み合わせてみるjs{
const observer = new MutationObserver(() => console.log('.cursor-line is changed.'));
observer.observe(document.querySelector('.lines'), {attributes: true, subtree: true, attributeFilter: ['class']});
}確かに検知できるが、一部の編集操作まで検知してしまっている
予めfilterしてみる？
09:48:15 うまくいった
変更後のDOMに
.cursor-line がない場合があるので、変更前のclass nameからも判定しているjs{
const observer = new MutationObserver(mutations => {
if (!mutations.some(mutation =>
mutation.oldValue?.includes?.('cursor-line')
|| mutation.target.classList.contains('cursor-line')
)) return;
console.log('.cursor-line is changed.');
});
observer.observe(document.querySelector('.lines'), {
attributes: true,
subtree: true,
attributeOldValue: true,
attributeFilter: ['class']
});
} .cursor-line が切り替わるたびに監視対象を変えるか？ .cursor-line が存在しないときに対処できない .cursor-line の出現時の処理を別に任せるとすると、こうなるか09:36:51 これだとcursorのある行を削除したときに追跡できなくなる
js{
observeCursorLine(() => console.log('.cursor-line is changed'), restart => {
const timer = setInterval(() => {
console.log('Search for .cursor-line...');
if (!restart()) return;
clearInterval(timer);
}, 1000);
});
function observeCursorLine(callback, onDisappeared) {
const start = (observer) => {
// 新しい.cursor-lineを探す
const cursorLine = document.getElementsByClassName('cursor-line')?.[0];
if (!cursorLine) {
// 存在しなかった時
return false;
}
callback();
observer.observe(cursorLine, {attributes: true, attributeFilter: ['class']});
return true;
};
const observer = new MutationObserver(mutations => {
console.log(mutations);
if (mutations[0].target.classList?.contains?.('cursor-line')) return;
observer.disconnect();
if (!start(observer)) onDisappeared(() => start(observer));
});
if (!start(observer)) onDisappeared(() => start(observer));
}
}