From 7af9b7836d4ee0e6842826168922063926fda47c Mon Sep 17 00:00:00 2001 From: dragonwocky 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 --- repo/core/css/variables.css | 4 +- repo/dark+/styles.css | 2 +- repo/emoji-sets/mod.js | 2 +- repo/gameish/styles.css | 2 +- repo/neutral/styles.css | 2 +- repo/pastel-dark/styles.css | 2 +- repo/property-layout/mod.js | 91 ++++++++++++--------------------- repo/property-layout/styles.css | 26 ++++++++++ repo/right-to-left/mod.js | 4 +- 9 files changed, 68 insertions(+), 67 deletions(-) create mode 100644 repo/property-layout/styles.css diff --git a/repo/core/css/variables.css b/repo/core/css/variables.css index 2747f9d..dbb9ca6 100644 --- a/repo/core/css/variables.css +++ b/repo/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/repo/dark+/styles.css b/repo/dark+/styles.css index 3bc37dc..35bca0a 100644 --- a/repo/dark+/styles.css +++ b/repo/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/repo/emoji-sets/mod.js b/repo/emoji-sets/mod.js index 2a171ae..01f72dc 100644 --- a/repo/emoji-sets/mod.js +++ b/repo/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/repo/gameish/styles.css b/repo/gameish/styles.css index 08e4274..b0c82a6 100644 --- a/repo/gameish/styles.css +++ b/repo/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/repo/neutral/styles.css b/repo/neutral/styles.css index d57f3c8..74db686 100644 --- a/repo/neutral/styles.css +++ b/repo/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/repo/pastel-dark/styles.css b/repo/pastel-dark/styles.css index a37d7e9..95fcac0 100644 --- a/repo/pastel-dark/styles.css +++ b/repo/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/repo/property-layout/mod.js b/repo/property-layout/mod.js index 3da3c52..b2ac2b7 100644 --- a/repo/property-layout/mod.js +++ b/repo/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/repo/property-layout/styles.css b/repo/property-layout/styles.css new file mode 100644 index 0000000..dcff5ae --- /dev/null +++ b/repo/property-layout/styles.css @@ -0,0 +1,26 @@ +/* + * property layout + * (c) 2020 dragonwocky (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/repo/right-to-left/mod.js b/repo/right-to-left/mod.js index aae6317..21205fa 100644 --- a/repo/right-to-left/mod.js +++ b/repo/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,