cmx-timeline-toggle

控制是否显示时间线

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu komut dosyasını yüklemek için bir kullanıcı komut dosyası yöneticisi uzantısı yüklemeniz gerekecek.

(Zaten bir kullanıcı komut dosyası yöneticim var, kurmama izin verin!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==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);
})();