cmx-timeline-toggle

控制是否显示时间线

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

Você precisará instalar uma extensão como Tampermonkey 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         cmx-timeline-toggle
// @namespace    https://zhuzi.dev
// @version      0.1
// @description  控制是否显示时间线
// @author       Bambooom
// @match        https://m.cmx.im/web/*
// @icon         https://www.google.com/s2/favicons?domain=m.cmx.im
// @grant        none
// ==/UserScript==

(async function() {
  'use strict';

  var localKey = 'SHOW_TIMELINE';

  // https://gist.github.com/jwilson8767/db379026efcbd932f64382db4b02853e
  function divReady(selector) {
    return new Promise((resolve, reject) => {
      let el = document.querySelector(selector);
      if (el) { resolve(el); }

      new MutationObserver((_, observer) => {
        // Query for elements matching the specified selector
        Array.from(document.querySelectorAll(selector)).forEach((element) => {
          resolve(element);
          //Once we have resolved we don't need the observer anymore.
          observer.disconnect();
        });
      })
        .observe(document.documentElement, {
          childList: true,
          subtree: true
        });
    });
  }

  function toggleCols(cols, show = true) {
    cols.forEach(function(col) {
      if (show) {
        col.style.display = 'flex';
      } else {
        col.style.display = 'none';
      }
    });
  }

  await divReady('.compose-form .compose-form__publish');
  await divReady('div.column');

  var div = document.querySelector('.compose-form .compose-form__publish');
  var button = div.firstElementChild;
  var toggle = document.createElement('div');
  var localValue = localStorage.getItem(localKey) === '1' ? 1 : 0;
  toggle.innerHTML = `<label class="checkbox"><input id="show-timeline" type="checkbox" checked/>显示时间线</label>`;
  div.insertBefore(toggle, button);
  div.style.justifyContent = 'space-between';
  div.style.alignItems = 'center';

  var check = document.getElementById('show-timeline');
  check.checked = !!localValue;
  check.onclick = function (e) {
    var val = e.target.checked ? 1 : 0;
    localStorage.setItem(localKey, val);
    var cols = Array.from(document.getElementsByClassName('column'));
    toggleCols(cols, !!val);
  };

  await divReady('.column .item-list');
  setTimeout(function() {
    if (!localValue) {
      var cols = Array.from(document.getElementsByClassName('column'));
      toggleCols(cols, !!localValue);
    }
  }, 1000);
})();