showCardsForTweetDeck.js

/* Copyright (c) 2020 Sienori
 * Released under the MIT license.
 * see https://opensource.org/licenses/MIT */

// ==UserScript==
// @name     showCardsForTweetDeck
// @version  1
// @grant    none
// @match    https://tweetdeck.twitter.com/
// ==/UserScript==

const handleMessage = e => {
  if (e.origin != "https://twitter.com") return;

  if (e.data.endsWith("-ready")) {
    const cardId = e.data.split("-ready")[0];
    const cardFrame = document.getElementById(cardId);
    cardFrame.height = "200px";
  } else if (e.data.endsWith("}")) {
    const startIndex = e.data.indexOf(" {");
    const cardId = e.data.slice(0, startIndex);
    const data = JSON.parse(e.data.slice(startIndex));
    console.log(cardId, data);

    if (data.method == "resizeCard") {
      const cardFrame = document.getElementById(cardId);
      cardFrame.height = data.params[0].height;
    }
  }
};

window.addEventListener("message", handleMessage, false);

let cardCount = 0;
const appendCardFrame = streamItem => {
  const tweetId = streamItem.dataset.tweetId;
  const cardContainer = streamItem.querySelector(".js-card-container");
  cardCount++;

  const theme = "tweetdeck-light";
  const fontSize = 14;
  const cardId = `defaultX${cardCount}`;
  const iframe = document.createElement("iframe");
  iframe.id = cardId;
  iframe.src = `https://twitter.com/i/cards/tfw/v1/${tweetId}?&client=tweetdeck&forward=true&theme=${theme}&font_size=${fontSize}#xdm_e=https%3A%2F%2Ftweetdeck.twitter.com&xdm_c=${cardId}&xdm_p=1`;
  iframe.style.display = "block";
  iframe.style.border = "0px none";
  iframe.scrolling = "no";
  iframe.width = "100%";
  iframe.height = "0";
  cardContainer.appendChild(iframe);
};

const handleLoadTweet = streamItem => {
  const tweetText = streamItem.querySelector(".js-tweet-text");
  const containsURL = Array.from(tweetText.childNodes).some(
    node => node.matches && node.matches(".url-ext")
  );
  if (containsURL) appendCardFrame(streamItem);
};

const applyToMatchedNodes = (nodes, selector, callback) => {
  Array.from(nodes)
    .filter(node => node.matches && node.matches(selector))
    .forEach(matchesNode => callback(matchesNode));
};

const observeColumnContent = column => {
  const chirpContainer = column.querySelector(".js-chirp-container");

  new MutationObserver(records => {
    records.forEach(record => {
      applyToMatchedNodes(record.addedNodes, ".js-stream-item", handleLoadTweet);
    });
  }).observe(chirpContainer, { childList: true });
};

const observeAppColumns = appContent => {
  const appColumns = appContent.querySelector(".js-app-columns");
  applyToMatchedNodes(appColumns.childNodes, ".js-column", observeColumnContent);

  new MutationObserver(records => {
    records.forEach(record => {
      applyToMatchedNodes(record.addedNodes, ".js-column", observeColumnContent);
    });
  }).observe(appColumns, { childList: true });
};

const observeApp = () => {
  const app = document.getElementsByClassName("js-app")[0];

  new MutationObserver(records => {
    records.forEach(record => {
      applyToMatchedNodes(record.addedNodes, ".js-app-content", observeAppColumns);
    });
  }).observe(app, { childList: true });
};

observeApp();