Notion.so - Hide The Crap

Show/Hide the properties section in Notion pages

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name        Notion.so - Hide The Crap
// @name:en     Notion.so - Hide The Crap
// @description Show/Hide the properties section in Notion pages
// @namespace   https://github.com/smartnora
// @match       https://www.notion.so/*
// @run-at      document-start
// @version     0.0.3
// @grant       GM.setValue
// @grant       GM.getValue
// ==/UserScript==
/* jshint esversion: 6 */

// Edit these to change the text
const HIDE_TEXT = "🧹 Hide The Crap";
const SHOW_TEXT = "💩 Show The Crap";
////////////////////////////////////

// Code below
GM.getValue("hidecrap", false).then((val) => {
  window.hidden_crap = val;
})

function set_crap(hide) {
  let crap = getCommentBlock().parentElement;
  if (hide) {
    crap.classList.add("hiddencrap");
    newButton.innerText = SHOW_TEXT;
  } else {
    crap.classList.remove("hiddencrap");
    newButton.innerText = HIDE_TEXT;
  }
  GM.setValue("hidecrap", hide);
}
  
  
function toggle_crap() {
  window.hidden_crap = !window.hidden_crap;
  set_crap(window.hidden_crap);
}

function getCommentBlock() {
  let comments = document.querySelector('.notion-page-view-discussion');
  if (comments == null) {
    return null;
  }
  return comments;
}

function createClass(name,rules){
    var style = document.createElement('style');
    style.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(style);
    if(!(style.sheet||{}).insertRule) 
        (style.styleSheet || style.sheet).addRule(name, rules);
    else
        style.sheet.insertRule(name+"{"+rules+"}",0);
}

// TODO: Make this continuously look for new divs
function button_setup() {
  console.log("Button Setup");
  if (getCommentBlock() == null) {
    window.requestAnimationFrame(button_setup);
  } else {
    
    // Let's double check something real quick
    if (getCommentBlock().classList.contains("crap-setup")) {
      // Abort
      return;
    }
    
    newButton = document.createElement("div");
    newButton.innerText = HIDE_TEXT;
    newButton.style="float:left; cursor: pointer; display: inline-flex;font-size: 14px; color: rgba(55, 53, 47, 0.4); margin: 10px";
    newButton.addEventListener('click', toggle_crap);
    getCommentBlock().parentElement.parentElement.insertAdjacentElement('beforebegin', newButton);
    getCommentBlock().classList.add("crap-setup");
    set_crap(window.hidden_crap);
  }
}
createClass('.hiddencrap',"display: none;");
// Call it once
button_setup();