discourse/app/assets/javascripts/pretty-text/oneboxer.js

import { later } from "@ember/runloop";
import {
  localCache,
  failedCache,
  setLocalCache,
  setFailedCache,
  resetLocalCache,
  resetFailedCache,
  normalize
} from "pretty-text/oneboxer-cache";

let timeout;
const loadingQueue = [];

export const LOADING_ONEBOX_CSS_CLASS = "loading-onebox";

export function resetCache() {
  loadingQueue.clear();
  resetLocalCache();
  resetFailedCache();
}

function resolveSize(img) {
  $(img).addClass("size-resolved");

  if (img.width > 0 && img.width === img.height) {
    $(img).addClass("onebox-avatar");
  }
}

// Detect square images and apply smaller onebox-avatar class
function applySquareGenericOnebox($elem, normalizedUrl) {
  if (!$elem.hasClass("whitelistedgeneric")) {
    return;
  }

  let $img = $elem.find(".onebox-body img.thumbnail");
  let img = $img[0];

  // already resolved... skip
  if ($img.length !== 1 || $img.hasClass("size-resolved")) {
    return;
  }

  if (img.complete) {
    resolveSize(img, $elem, normalizedUrl);
  } else {
    $img.on("load.onebox", () => {
      resolveSize(img, $elem, normalizedUrl);
      $img.off("load.onebox");
    });
  }
}

function loadNext(ajax) {
  if (loadingQueue.length === 0) {
    timeout = null;
    return;
  }

  let timeoutMs = 150;
  let removeLoading = true;
  const { url, refresh, $elem, categoryId, topicId } = loadingQueue.shift();

  // Retrieve the onebox
  return ajax("/onebox", {
    dataType: "html",
    data: {
      url,
      refresh,
      category_id: categoryId,
      topic_id: topicId
    },
    cache: true
  })
    .then(
      html => {
        let $html = $(html);
        setLocalCache(normalize(url), $html);
        $elem.replaceWith($html);
        applySquareGenericOnebox($html, normalize(url));
      },
      result => {
        if (result && result.jqXHR && result.jqXHR.status === 429) {
          timeoutMs = 2000;
          removeLoading = false;
          loadingQueue.unshift({ url, refresh, $elem, categoryId, topicId });
        } else {
          setFailedCache(normalize(url), true);
        }
      }
    )
    .finally(() => {
      timeout = later(() => loadNext(ajax), timeoutMs);
      if (removeLoading) {
        $elem.removeClass(LOADING_ONEBOX_CSS_CLASS);
        $elem.data("onebox-loaded");
      }
    });
}

// Perform a lookup of a onebox based an anchor $element.
// It will insert a loading indicator and remove it when the loading is complete or fails.
export function load({
  elem,
  refresh = true,
  ajax,
  synchronous = false,
  categoryId,
  topicId
}) {
  const $elem = $(elem);

  // If the onebox has loaded or is loading, return
  if ($elem.data("onebox-loaded")) return;
  if ($elem.hasClass(LOADING_ONEBOX_CSS_CLASS)) return;

  const url = elem.href;

  // Unless we're forcing a refresh...
  if (!refresh) {
    // If we have it in our cache, return it.
    const cached = localCache[normalize(url)];
    if (cached) return cached.prop("outerHTML");

    // If the request failed, don't do anything
    const failed = failedCache[normalize(url)];
    if (failed) return;
  }

  // Add the loading CSS class
  $elem.addClass(LOADING_ONEBOX_CSS_CLASS);

  // Add to the loading queue
  loadingQueue.push({ url, refresh, $elem, categoryId, topicId });

  // Load next url in queue
  if (synchronous) {
    return loadNext(ajax);
  } else {
    timeout = timeout || later(() => loadNext(ajax), 150);
  }
}