.cursor-lineの変更を検知する
勿論.lines全体をsubtree: trueにして監視すれば検知できるのだが、行の編集まで検知してしまうので、なるべく避けたい 監視する範囲を減らして負荷を下げたい
試してみる
2021-07-16 08:56:50 これは動かなかった
code:js
{
const observer = new MutationObserver(() => console.log('.cursor-line is changed.'));
observer.observe(document.querySelector('.lines'), {childList: true});
}
attributesとsubtreeを組み合わせてみる
code: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からも判定している
code: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,
});
}
.cursor-lineが切り替わるたびに監視対象を変えるか？
.cursor-lineが存在しないときに対処できない
.cursor-lineの出現時の処理を別に任せるとすると、こうなるか
09:36:51 これだとcursorのある行を削除したときに追跡できなくなる
code: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 (mutations0.target.classList?.contains?.('cursor-line')) return; observer.disconnect();
if (!start(observer)) onDisappeared(() => start(observer));
});
if (!start(observer)) onDisappeared(() => start(observer));
}
}
MDN.icon