View All Editorials

View all editorials of the AtCoder contest in one page.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name            View All Editorials
// @name:ja         解説ぜんぶ見る
// @description     View all editorials of the AtCoder contest in one page.
// @description:ja  AtCoderコンテストの解説ページに、すべての問題の解説をまとめて表示します。
// @version         1.5.0
// @icon            https://www.google.com/s2/favicons?domain=atcoder.jp
// @match           https://atcoder.jp/contests/*/editorial
// @match           https://atcoder.jp/contests/*/editorial?*
// @grant           GM_addStyle
// @require         https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js
// @require         https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js
// @require         https://cdn.jsdelivr.net/npm/[email protected]/jquery.timeago.min.js
// @namespace       https://gitlab.com/w0mbat/user-scripts
// @author          w0mbat
// ==/UserScript==

(async function () {
  'use strict';
  console.log(`🐻 "View All Editorials" initializing... 🐻`)

  // Utils
  const appendHeadChild = (tagName, options) =>
    Object.assign(document.head.appendChild(document.createElement(tagName)), options);
  const addScript = (src) => new Promise((resolve) => {
    appendHeadChild('script', { src, type: 'text/javascript', onload: resolve });
  });
  const addStyleSheet = (src) => new Promise((resolve) => {
    appendHeadChild('link', { rel: 'stylesheet', href: src, onload: resolve });
  });
  const sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));

  // KaTeX
  const loadKaTeX = async () =>
    await addStyleSheet("https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css");
  const kaTexOptions = {
    delimiters: [
      { left: "$$", right: "$$", display: true },
      { left: "$", right: "$", display: false },
      { left: "\\(", right: "\\)", display: false },
      { left: "\\[", right: "\\]", display: true }
    ],
    ignoredTags: ["script", "noscript", "style", "textarea", "code", "option"],
    ignoredClasses: ["prettyprint", "source-code-for-copy"],
    throwOnError: false
  };
  const renderKaTeX = (rootDom) => {
    /* global renderMathInElement */
    renderMathInElement && renderMathInElement(rootDom, kaTexOptions);
  };

  // code-prettify
  const loadPrettifier = async () => {
    await addScript("https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autorun=false");
  };
  /* global PR */
  const runPrettifier = () => PR.prettyPrint();

  // jQuery TimeAgo
  const loadTimeAgo = async () => {
    /* global LANG */
    if (LANG == 'ja') await addScript("https://cdn.jsdelivr.net/npm/[email protected]/locales/jquery.timeago.ja.min.js");
  };
  const renderTimeAgo = () => {
    /* global $ */
    $("time.timeago").timeago();
    $('.tooltip-unix').each(function () {
      var unix = parseInt($(this).attr('title'), 10);
      if (1400000000 <= unix && unix <= 5000000000) {
        var date = new Date(unix * 1000);
        $(this).attr('title', date.toLocaleString());
      }
    });
    $('[data-toggle="tooltip"]').tooltip();
  };

  // Editorials Loader
  const editorialBodyQuery = "#main-container > div.row > div:nth-child(2)";
  const scrape = (doc) => [
    doc.querySelector(`${editorialBodyQuery} > div:nth-of-type(1)`),
    doc.querySelector(`${editorialBodyQuery} > div:nth-of-type(2)`),
  ];
  const fetchEditorial = async (link) => {
    const response = await fetch(link.href);
    if (!response.ok) throw "Fetch failed";
    const [content, history] = scrape(new DOMParser().parseFromString(await response.text(), 'text/html'));
    if (!content) throw "Scraping failed";
    return [content, history];
  };
  const renderEditorial = (link, content, history) => {
    const div = link.parentNode.appendChild(document.createElement('div'));
    div.classList.add('🐻-editorial-content');
    div.appendChild(content);
    if (history) div.appendChild(history);
    renderKaTeX(div);
    renderTimeAgo();
    runPrettifier();
  };
  const loadEditorial = async (link) => {
    const [content, history] = await fetchEditorial(link);
    renderEditorial(link, content, history);
  };

  // Lazy Loading
  const Timer = (callback, interval) => {
    let id = undefined;
    return {
      start: () => {
        if (id) return;
        callback();
        id = setInterval(callback, interval);
      },
      stop: () => {
        if (!id) return;
        clearInterval(id);
        id = undefined;
      },
    };
  };
  const Queue = (task, interval) => {
    const set = new Set();
    let timer = Timer(() => {
      for (const element of set) {
        task(element);
        set.delete(element);
        break;
      }
      if (set.size == 0) timer.stop();
    }, interval);
    return {
      add: (element) => {
        set.add(element);
        timer.start();
      },
      remove: (element) => set.delete(element),
    };
  };
  let unobserveEditorialLink = undefined;
  const queue = Queue(async (link) => {
    await loadEditorial(link)
      .catch(ex => console.warn(`🐻 Something wrong: "${link.href}", ${ex}`));
    unobserveEditorialLink(link);
  }, 200);
  const intersectionCallback = async (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) queue.add(entry.target);
      else queue.remove(entry.target);
    }
  };
  const observeEditorialLinks = (links) => {
    const observer = new IntersectionObserver(intersectionCallback);
    unobserveEditorialLink = (link) => observer.unobserve(link);
    links.forEach(e => observer.observe(e));
  };

  // initialize
  const init = async () => {
    GM_addStyle(`
      pre code { tab-size: 4; }
      ${editorialBodyQuery} > ul > li { font-size: larger; }
      .🐻-editorial-content { margin-top: 0.3em; font-size: smaller; }
    `);
    await loadKaTeX();
    await loadPrettifier();
    await loadTimeAgo();
  };

  // main
  await init();
  const internalEditorialLink = (link) => link.href.match(/\/contests\/.+\/editorial\//);
  const notSpoiler = (link) => !link.classList.contains('spoiler');
  const links = [...document.getElementsByTagName('a')].filter(internalEditorialLink).filter(notSpoiler);
  if (links.length > 0) observeEditorialLinks(links);

  console.log(`🐻 "View All Editorials" initialized. 🐻`)
})();