From 4e09b4f13552dba5365bf1eec96c4f246c8d1881 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Tue, 18 Aug 2020 11:40:05 +1000
Subject: [PATCH] =?UTF-8?q?property=20layout=20extension=20=E2=9C=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
mods/core/css/variables.css | 4 +-
mods/dark+/styles.css | 2 +-
mods/emoji-sets/mod.js | 2 +-
mods/gameish/styles.css | 2 +-
mods/neutral/styles.css | 2 +-
mods/pastel-dark/styles.css | 2 +-
mods/property-layout/mod.js | 91 ++++++++++++---------------------
mods/property-layout/styles.css | 26 ++++++++++
mods/right-to-left/mod.js | 4 +-
9 files changed, 68 insertions(+), 67 deletions(-)
create mode 100644 mods/property-layout/styles.css
diff --git a/mods/core/css/variables.css b/mods/core/css/variables.css
index 2747f9d..dbb9ca6 100644
--- a/mods/core/css/variables.css
+++ b/mods/core/css/variables.css
@@ -15,7 +15,7 @@
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
--theme_dark--dragarea: #272d2f;
--theme_dark--preview-width: 977px;
- --theme_dark--preview-padding: 8em;
+ --theme_dark--preview-padding: 8rem;
--theme_dark--preview_banner-height: 20vh;
--theme_dark--page_banner-height: 30vh;
@@ -128,7 +128,7 @@
--theme_light--overlay: rgba(15, 15, 15, 0.6);
--theme_light--dragarea: rgba(55, 53, 47, 0.04);
--theme_light--preview-width: 977px;
- --theme_light--preview-padding: 8em;
+ --theme_light--preview-padding: 8rem;
--theme_light--preview_banner-height: 20vh;
--theme_light--page_banner-height: 30vh;
diff --git a/mods/dark+/styles.css b/mods/dark+/styles.css
index 3bc37dc..35bca0a 100644
--- a/mods/dark+/styles.css
+++ b/mods/dark+/styles.css
@@ -10,7 +10,7 @@
/* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */
--theme_dark--dragarea: #000;
/* --theme_dark--preview-width: 977px;
- --theme_dark--preview-padding: 8em;
+ --theme_dark--preview-padding: 8rem;
--theme_dark--preview_banner-height: 20vh;
--theme_dark--page_banner-height: 30vh; */
diff --git a/mods/emoji-sets/mod.js b/mods/emoji-sets/mod.js
index 2a171ae..01f72dc 100644
--- a/mods/emoji-sets/mod.js
+++ b/mods/emoji-sets/mod.js
@@ -47,7 +47,7 @@ module.exports = {
if (!queue.length) requestAnimationFrame(process);
queue.push(...list);
});
- observer.observe(document, {
+ observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true,
diff --git a/mods/gameish/styles.css b/mods/gameish/styles.css
index 08e4274..b0c82a6 100644
--- a/mods/gameish/styles.css
+++ b/mods/gameish/styles.css
@@ -13,7 +13,7 @@
/* --theme_dark--overlay: rgba(15, 15, 15, 0.6); */
--theme_dark--dragarea: #19181f;
/* --theme_dark--preview-width: 977px;
- --theme_dark--preview-padding: 8em;
+ --theme_dark--preview-padding: 8rem;
--theme_dark--preview_banner-height: 20vh;
--theme_dark--page_banner-height: 30vh; */
diff --git a/mods/neutral/styles.css b/mods/neutral/styles.css
index d57f3c8..74db686 100644
--- a/mods/neutral/styles.css
+++ b/mods/neutral/styles.css
@@ -16,7 +16,7 @@
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
--theme_dark--dragarea: #111111;
/* --theme_dark--preview-width: 977px;
- --theme_dark--preview-padding: 8em;
+ --theme_dark--preview-padding: 8rem;
--theme_dark--preview_banner-height: 20vh;
--theme_dark--page_banner-height: 30vh; */
diff --git a/mods/pastel-dark/styles.css b/mods/pastel-dark/styles.css
index a37d7e9..95fcac0 100644
--- a/mods/pastel-dark/styles.css
+++ b/mods/pastel-dark/styles.css
@@ -13,7 +13,7 @@
--theme_dark--overlay: rgba(15, 15, 15, 0.6);
--theme_dark--dragarea: #0d0d0d;
/* --theme_dark--preview-width: 977px;
- --theme_dark--preview-padding: 8em;
+ --theme_dark--preview-padding: 8rem;
--theme_dark--preview_banner-height: 20vh;
--theme_dark--page_banner-height: 30vh; */
diff --git a/mods/property-layout/mod.js b/mods/property-layout/mod.js
index 3da3c52..b2ac2b7 100644
--- a/mods/property-layout/mod.js
+++ b/mods/property-layout/mod.js
@@ -18,66 +18,41 @@ module.exports = {
'renderer/preload.js'(store, __exports) {
document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false;
-
- var isVisible = false;
-
- function setPropertiesListVisibility(propertiesList, visible) {
- if (visible) {
- // Show properties list section
- propertiesList.style.height = null;
- propertiesList.style.display = null;
- isVisible = true;
- } else {
- // Hide properties list section
- propertiesList.style.height = 0;
- propertiesList.style.display = 'none';
- isVisible = false;
+ let queue = [];
+ const observer = new MutationObserver((list, observer) => {
+ if (!queue.length) requestAnimationFrame(() => process(queue));
+ queue.push(...list);
+ });
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+ function process(list) {
+ queue = [];
+ let properties = document.querySelector(
+ '.notion-scroller.vertical > div:nth-child(2)[style="width: 100%; font-size: 14px;"]'
+ );
+ if (properties) {
+ if (!properties.classList.contains('propertylayout-enhanced')) {
+ properties.classList.add(
+ 'propertylayout-enhanced',
+ 'propertylayout-hidden'
+ );
+ const toggle = document.createElement('button');
+ toggle.classList.add('propertylayout-toggle');
+ toggle.innerText = '→ show properties';
+ toggle.addEventListener('click', (event) => {
+ properties.classList.toggle('propertylayout-hidden');
+ toggle.innerText = `→ ${
+ properties.classList.contains('propertylayout-hidden')
+ ? 'show'
+ : 'hide'
+ } properties`;
+ });
+ properties.previousElementSibling.append(toggle);
+ }
}
}
-
- // Called every time something new loads inside Notion window
- // e.g. you navigate to a different Notion page
- var onPageChange = function () {
- console.log('Notion Layout Improver: Something changed');
-
- // Find the block with properties list
- var propertiesLists = document.querySelectorAll(
- ".notion-scroller.vertical > div:nth-child(2)[style='width: 100%; font-size: 14px;']"
- );
-
- // For each found properties list
- propertiesLists.forEach(function (propertiesList) {
- console.log('Found properties list');
-
- // Set up the toggle button
- let toggleButton = document.createElement('button');
- toggleButton.setAttribute('class', 'propertiesToggleBar');
- toggleButton.innerHTML = '-';
- toggleButton.onclick = function () {
- setPropertiesListVisibility(propertiesList, !isVisible);
- };
-
- // If not already processed this properties list,
- // add the toggle button and hide the list
- if (!(propertiesList.id === 'already_processed')) {
- console.log(
- 'Notion Layout Improver: Processing new properties list'
- );
- var parentBlockForButton =
- propertiesList.parentElement.firstChild.firstChild;
- parentBlockForButton.appendChild(toggleButton);
- setPropertiesListVisibility(propertiesList, false);
- propertiesList.id = 'already_processed';
- }
- });
- };
-
- // This calls onPageChange function each time Notion window changes
- // e.g. you navigate to a new Notion page
- const targetNode = document.body;
- const config = { attributes: false, childList: true, subtree: true };
- const observer = new MutationObserver(onPageChange);
- observer.observe(targetNode, config);
});
},
},
diff --git a/mods/property-layout/styles.css b/mods/property-layout/styles.css
new file mode 100644
index 0000000..dcff5ae
--- /dev/null
+++ b/mods/property-layout/styles.css
@@ -0,0 +1,26 @@
+/*
+ * property layout
+ * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (c) 2020 alexander-kazakov
+ * under the MIT license
+ */
+
+.propertylayout-hidden {
+ display: none;
+}
+
+.propertylayout-toggle {
+ width: calc(100% - (2 * var(--theme--preview-padding)));
+ text-align: left;
+ font-size: 0.85em;
+ margin-bottom: 1em;
+ padding: 0.25em;
+ background: transparent;
+ color: var(--theme--text_ui);
+ border: none;
+ border-radius: 2px;
+ transition: background 200ms;
+}
+.propertylayout-toggle:hover {
+ background: var(--theme--interactive_hover);
+}
diff --git a/mods/right-to-left/mod.js b/mods/right-to-left/mod.js
index aae6317..21205fa 100644
--- a/mods/right-to-left/mod.js
+++ b/mods/right-to-left/mod.js
@@ -20,10 +20,10 @@ module.exports = {
if (document.readyState !== 'complete') return false;
let queue = [];
const observer = new MutationObserver((list, observer) => {
- if (!queue.length) requestAnimationFrame(() => process(list));
+ if (!queue.length) requestAnimationFrame(() => process(queue));
queue.push(...list);
});
- observer.observe(document, {
+ observer.observe(document.body, {
childList: true,
subtree: true,
characterData: true,