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);
        });
      });
    }

    function repairBrokenFiles() {
      var brokenFiles = Array.prototype.slice.call(document.querySelectorAll('a.new[title^="File:"]')).slice(0, 80);
      if (!brokenFiles.length) return;
      var titles = brokenFiles.map(function (link) { return link.getAttribute('title'); });
      fetch('/api.php?action=query&prop=imageinfo&iiprop=url&format=json&titles=' + encodeURIComponent(titles.join('|')))
        .then(function (res) { return res.json(); })
        .then(function (data) {
          var pages = data && data.query && data.query.pages ? data.query.pages : {};
          var byTitle = {};
          Object.keys(pages).forEach(function (id) {
            var page = pages[id];
            if (page && page.title && page.imageinfo && page.imageinfo[0] && page.imageinfo[0].url) {
              byTitle[page.title] = page.imageinfo[0].url;
            }
          });
          brokenFiles.forEach(function (link) {
            var title = link.getAttribute('title');
            var url = byTitle[title];
            if (!url) return;
            var img = document.createElement('img');
            img.src = url;
            img.alt = title.replace(/^File:/, '');
            img.className = 'hf-inline-file';
            var wrapper = link.closest('.mw-default-size') || link;
            wrapper.replaceWith(img);
          });
        })
        .catch(function () {});
    }

    repairBrokenFiles();
    setTimeout(repairBrokenFiles, 600);
    setTimeout(repairBrokenFiles, 1800);
  });
})();