Branding? What branding? Logo picker for twitter.com

Adds a drop down by the site logo to let you pick logo alternatives.
当前为 2023-07-24 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Branding? What branding? Logo picker for twitter.com
// @namespace   Itsnotlupus Industries
// @match       https://twitter.com/*
// @grant       none
// @version     1.0
// @author      Itsnotlupus
// @license     MIT
// @description Adds a drop down by the site logo to let you pick logo alternatives.
// @require     https://gf.qytechs.cn/scripts/468394-itsnotlupus-tiny-utilities/code/utils.js
// ==/UserScript==
/* jshint esversion:11 */

const LOGOS = [
  {
    // new weird X logo
    html: `<svg viewBox="0 0 24 24" aria-hidden="true" class="twitter-x"><g><path d="M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0"></path></g></svg>`,
    favicon: "https://abs.twimg.com/favicons/twitter.3.ico"
  },
  {
    // recent twitter bird logo
    html: `<svg viewBox="0 0 24 24" aria-hidden="true" class="twitter-bird"><g><path d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path></g></svg>`,
    favicon: "https://abs.twimg.com/favicons/twitter.2.ico"
  },
  // moar later. probably.
];

addStyles(`
header[role="banner"] h1[role="heading"] {
  flex-direction: row;
}
.logo-dropdown-arrow {
  width: 17.5px;
  text-align: center;
  color: white;
}
.logo-dropdown-arrow:hover {
  border-radius: 9px;
  background: rgba(127,127,127,0.4);
}
.logo-dropdown-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
}
.logo-dropdown {
  position: absolute;
  width: 2rem;
  background: #111;
  padding: 0.5em;
  border-radius: 5px;
}
.logo-dropdown-item {
  cursor: pointer;
  padding-bottom: 1em;
}
.logo-dropdown-item:hover {
  border-radius: 5px;
  background: #333;
}

/* custom CSS for each logo */
.twitter-x {
  height: 2rem;
  width: 24px;
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  color: rgba(214,217,219,1.00);
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: text-bottom;
  position: relative;
  max-width: 100%;
  fill: currentcolor;
  display: inline-block;
}

.twitter-bird {
  height: 2rem;
  color: rgba(29,155,240,1.00);
  vertical-align: text-bottom;
  position: relative;
  max-width: 100%;
  fill: currentcolor;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
}
`);

(async function main() {
  // 1. add little down arrow button next to Musker logo
  const heading = await untilDOM(`header[role="banner"] h1[role="heading"]`);
  heading.append(crel('a', {
    className: "logo-dropdown-arrow",
    textContent: '▾',
    onclick() { openLogoDropDown(); }
  }));

  // 2. clicking on arrow brings up a (scrollable) dropdown to select alternate logo.
  function openLogoDropDown() {
    const { bottom, left } = $`.logo-dropdown-arrow`.getBoundingClientRect();
    const backdrop = crel('div', {
      className: "logo-dropdown-backdrop",
      onclick() {
        backdrop.remove();
        dropdown.remove();
      }
    });
    console.log({bottom, left}); //
    const dropdown = crel('div', {
      className: "logo-dropdown",
      style: `top: ${bottom}px; left: ${left}px;`
    }, ...LOGOS.map(logo => crel('div', {
      className: 'logo-dropdown-item',
      innerHTML: logo.html,
      onclick() {
        backdrop.remove();
        dropdown.remove();
        selectLogo(logo);
      }
    })));
    document.body.append(backdrop, dropdown);
  }

  // 3. choosing a logo is persistent, and should replace whatever dumb shit Elon set ASAP on load.
  function selectLogo(logo) {
    localStorage.logo = JSON.stringify(logo);
    applyLogo();
  }
  // 4. the logo also needs to become the favicon.
  function applyLogo() {
    const logo = JSON.parse(localStorage.logo ?? "{}");
    if (logo.favicon) {
      $`link[rel="shortcut icon"]`.href = logo.favicon;
    }
    if (logo.html) {
      const logoParent = $`header[role="banner"] h1[role="heading"] a[href="/home"] > div`;
      logoParent.innerHTML = logo.html;
    }
  }


  applyLogo();

  // logos to use:
  // - older Twitter logos
  // - X variations.
  // - Musk variations.

})();
欢迎访问Greasy Fork镜像
