MediaWiki:Common.js: Difference between revisions

(function () {
  var viewport = document.querySelector('meta[name="viewport"]');
  if (!viewport) {
    viewport = document.createElement('meta');
    viewport.name = 'viewport';
    document.head.appendChild(viewport);
  }
  viewport.content = 'width=device-width, initial-scale=1';

  function ready(fn) {
    if (document.readyState !== 'loading') fn();
    else document.addEventListener('DOMContentLoaded', fn);
  }

  ready(function () {
    document.querySelectorAll('.hf-hub-card, .hf-stat-strip div, .hf-timeline div, .hf-review-card').forEach(function (el) {
      el.classList.add('hf-reveal');
    });

    var mount = document.getElementById('hfHubSearchMount');
    if (mount && !document.getElementById('hfHubSearch')) {
      var placeholder = mount.querySelector('.hf-command-placeholder');
      if (placeholder) placeholder.remove();
      var input = document.createElement('input');
      input.id = 'hfHubSearch';
      input.type = 'search';
      input.placeholder = 'Filter hubs, templates, policies...';
      input.autocomplete = 'off';
      mount.appendChild(input);
    }

    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.16 });

    document.querySelectorAll('.hf-reveal').forEach(function (el) {
      observer.observe(el);
    });

    document.querySelectorAll('[data-hf-count]').forEach(function (el) {
      var target = parseInt(el.getAttribute('data-hf-count'), 10);
      var start = performance.now();
      function tick(now) {
        var progress = Math.min(1, (now - start) / 900);
        var eased = 1 - Math.pow(1 - progress, 3);
        el.textContent = Math.round(target * eased).toLocaleString() + (target > 100 ? '+' : '');
        if (progress < 1) requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    });

    var search = document.getElementById('hfHubSearch');
    var cards = Array.prototype.slice.call(document.querySelectorAll('.hf-hub-card'));
    if (search && cards.length) {
      search.addEventListener('input', function () {
        var q = search.value.trim().toLowerCase();
        cards.forEach(function (card) {
          var text = (card.textContent + ' ' + (card.getAttribute('data-hf-filter') || '')).toLowerCase();
          card.classList.toggle('hf-is-hidden', q && text.indexOf(q) === -1);
        });
      });
    }
  });
})();