DOM Manipulation and Browser APIs Questions

// Observe #feed for newly added nodes and annotate .article elements
(function () {
  const MAX = 50;
  let counter = 0;

  const feed = document.getElementById('feed');
  if (!feed) {
    console.error("MutationObserver: container with id 'feed' not found");
    return;
  }

  // Helper: annotate an element if not already annotated
  function annotate(el) {
    try {
      if (!el || !el.classList || !el.classList.contains('article')) return;
      if (!el.hasAttribute('role')) el.setAttribute('role', 'article');
      if (!el.hasAttribute('aria-label')) {
        counter += 1;
        el.setAttribute('aria-label', `article-${counter}`);
      }
    } catch (err) {
      console.error('Annotate error', err, el);
    }
  }

  // Process nodes added in a mutation record
  function processAddedNodes(nodes) {
    for (const node of nodes) {
      if (node.nodeType !== Node.ELEMENT_NODE) continue;
      // If the added node itself is an article
      annotate(node);
      // Also find descendant .article elements
      const descendants = node.querySelectorAll?.('.article') || [];
      for (const d of descendants) {
        annotate(d);
        if (counter >= MAX) break;
      }
      if (counter >= MAX) break;
    }
  }

  const observer = new MutationObserver((mutations) => {
    try {
      for (const m of mutations) {
        if (m.type === 'childList' && m.addedNodes.length) {
          processAddedNodes(m.addedNodes);
          if (counter >= MAX) {
            observer.disconnect();
            console.info('MutationObserver: reached max articles, disconnected.');
            break;
          }
        }
      }
    } catch (err) {
      console.error('Observer callback error', err);
    }
  });

  observer.observe(feed, { childList: true, subtree: true });

  // Optional: safety timeout to disconnect after long time to avoid leaks
  const SAFETY_TIMEOUT_MS = 60_000 * 5; // 5 minutes
  setTimeout(() => {
    if (observer) {
      observer.disconnect();
      console.info('MutationObserver: disconnected by safety timeout.');
    }
  }, SAFETY_TIMEOUT_MS);
})();

// Observe images and lazy-load when visible
const imgs = document.querySelectorAll('img[data-src]');
const io = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;
    const img = entry.target;
    img.src = img.dataset.src;
    img.onload = () => { img.classList.add('loaded'); };
    img.onerror = () => { img.classList.add('error'); };
    observer.unobserve(img);
  });
}, { root: null, rootMargin: '200px', threshold: 0.01 });

imgs.forEach(img => io.observe(img));

// Simple throttle
function throttle(fn, wait=200){
  let last=0;
  return (...a)=> {
    const now = Date.now();
    if (now - last >= wait) { last = now; fn(...a); }
  };
}
function inView(el){
  const r = el.getBoundingClientRect();
  return r.bottom >= 0 && r.top <= window.innerHeight + 200;
}
const lazyFallback = throttle(()=> {
  document.querySelectorAll('img[data-src]').forEach(img=>{
    if (inView(img)) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}, 150);
window.addEventListener('scroll', lazyFallback);
window.addEventListener('resize', lazyFallback);
lazyFallback();

// sentinel element at end of list
const sentinel = document.querySelector('#infinite-sentinel');
const loader = async () => {
  // fetch next items, append to list, then observe new images
};
const sentinelObserver = new IntersectionObserver((entries)=>{
  entries.forEach(e=>{
    if (e.isIntersecting) {
      sentinelObserver.unobserve(sentinel);
      loader().then(()=> sentinelObserver.observe(sentinel));
    }
  });
}, { rootMargin: '400px' });
sentinelObserver.observe(sentinel);

// inside component's shadow root
const btn = shadowRoot.querySelector('button');
btn.addEventListener('click', (e) => {
  // allow event to escape
  const composedEvent = new MouseEvent('click', { bubbles: true, composed: true });
  btn.dispatchEvent(composedEvent);
});

// outside, a delegated listener
document.addEventListener('click', (e) => {
  console.log('observed target:', e.target); // likely the shadow host
  const path = e.composedPath();
  console.log('original internal target:', path[0]); // real element inside shadow
});

// Cache all matching nodes once
const items = document.querySelectorAll('[class^="item-"]'); // or '.item' if consistent class
for (let i = 0, len = items.length; i < len; i++) {
  const el = items[i];
  process(el);
}

// Better: add data-index attributes and select parent once
const container = document.getElementById('list');
const nodes = container.children; // live HTMLCollection
for (let i = 0, len = nodes.length; i < len; i++) {
  process(nodes[i]);
}

// debounce with leading/trailing and cancel
function debounce(fn, wait = 0, options = {}) {
  let timer = null;
  let lastArgs, lastThis;
  let lastCallTime = 0;
  const leading = !!options.leading;
  const trailing = options.trailing !== false; // default true

  const invoke = () => {
    timer = null;
    if (trailing && lastArgs) {
      fn.apply(lastThis, lastArgs);
      lastArgs = lastThis = null;
    }
  };

  function debounced(...args) {
    lastArgs = args;
    lastThis = this;
    const now = Date.now();
    const callNow = leading && !timer;

    clearTimeout(timer);
    timer = setTimeout(invoke, wait);

    if (callNow) {
      // leading invocation
      fn.apply(lastThis, lastArgs);
      lastArgs = lastThis = null;
    }
  }

  debounced.cancel = () => {
    clearTimeout(timer);
    timer = lastArgs = lastThis = null;
  };

  return debounced;
}