diff --git a/mods/simpler-databases/app.css b/mods/simpler-databases/app.css new file mode 100644 index 0000000..bdbe0d6 --- /dev/null +++ b/mods/simpler-databases/app.css @@ -0,0 +1,370 @@ +/* + * simpler databases + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +.simpler-databases--config-button:hover { + background: var(--theme--interactive_hover); +} + +.simpler-databases--config-button svg { + width: 12px; + height: 12px; + fill: var(--theme--text_ui_info); +} + +.simpler-databases--overlay-container { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 999; + overflow: hidden; +} + +.simpler-databases--config-menu { + position: relative; + width: 220px; + max-height: 70vh; + padding: 8px 0; + border-radius: 3px; + box-shadow: var(--theme--box-shadow_strong); + background: var(--theme--card); + overflow: hidden auto; +} + +.simpler-databases--config-item-toggle, +.simpler-databases--config-item-input { + display: flex; + align-items: center; + width: 100%; + min-height: 28px; + font-size: var(--theme--font_label-size); + line-height: 1.2; + user-select: none; +} +.simpler-databases--config-item-toggle { + cursor: pointer; +} +.simpler-databases--config-item-toggle:hover, +.simpler-databases--config-item-toggle:focus { + background: var(--theme--interactive_hover); +} + +.simpler-databases--config-title { + margin: 0 14px; + min-width: 0; + flex: 1 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.simpler-databases--config-toggle { + flex-shrink: 0; + position: relative; + height: 14px; + width: 26px; + margin-left: auto; + margin-right: 14px; + padding: 2px; + border-radius: 44px; + cursor: pointer; + user-select: none; + box-sizing: content-box; + background: rgba(202, 204, 206, 0.3); + transition: background 200ms ease 0s, box-shadow 200ms ease 0s; +} + +.simpler-databases--config-toggle[data-toggled="true"] { + background: var(--theme--primary); +} + +.simpler-databases--config-toggle::before { + content: ''; + position: absolute; + width: 14px; + height: 14px; + border-radius: 44px; + background: white; + transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; +} +.simpler-databases--config-toggle[data-toggled="true"]::before { + transform: translateX(12px); +} + +.simpler-databases--config-item-input { + padding: 6px 0; +} + +.simpler-databases--config-input { + display: flex; + align-items: center; + height: 28px; + margin: 0 14px; + padding: 3px 6px; + background: var(--theme--select_input); + box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px inset; + border-radius: 3px; + font-size: 14px; + line-height: 20px; + cursor: text; +} + +.notion-dark-theme .simpler-databases--config-input { + background: rgba(15, 15, 15, 0.3); + box-shadow: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px inset; +} + +.simpler-databases--config-input input { + font-size: inherit; + line-height: inherit; + border: none; + background: none; + width: 100%; + display: block; + resize: none; + padding: 0; +} + +.simpler-databases--config-divider { + border-bottom: 1px solid var(--theme--ui-border); + width: 100%; + margin: 6px 0; +} + +.notion-collection_view-block[data-tweaks*="[config-open]"] [style*=" height: 42px;"] > :not(:first-child) { + opacity: 1 !important; +} + + +/* TWEAKS */ + +/* Toggle */ +.simpler-databases--toggle { + flex-shrink: 0; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 3px; + cursor: pointer; + transition: background 20ms ease-in 0s; +} +.simpler-databases--toggle svg { + width: 12px; + height: 12px; + transform: rotateZ(180deg); + transition: transform 200ms ease-out 0s; +} +.simpler-databases--toggle:hover { + background: var(--theme--interactive_hover); +} + +.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"] + .simpler-databases--toggle svg { + transform: rotateZ(90deg); +} + +.notion-collection_view-block[data-tweaks*="[toggle]"] > .notion-scroller { + transition: height 200ms ease-in, opacity 200ms ease-in; +} +.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"] > .notion-scroller { + opacity: 0; + height: 0 !important; +} +.notion-collection_view-block[data-tweaks*="[toggle]"][data-toggled-hidden="true"] + [data-hide-items] .notion-collection-item { + display: none !important; +} + +/* Title */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]) + [style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] .notion-record-icon, +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]) + [style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] [placeholder] { + display: none !important; +} + +/* Link Arrow - linked databases */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[link]"]) + [style*=" height: 42px;"] a :first-child[style*="margin-right: 6px"] { + display: none !important; +} + +/* Views */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[views]"]) + [style*=" height: 42px;"] > [role="button"] { + display: none !important; +} + +/* Toolbar */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[toolbar]"]) + .simpler-databases--config-button ~ * { + display: none !important; +} + +/* Header - table, calendar */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"]) + .notion-table-view > .notion-collection_view-block > :first-child, +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"]) + .notion-table-view > .notion-collection_view-block > :first-child + div { + display: none !important; +} + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[header_row]"]) + .notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div { + border-top: 1px solid var(--theme--table-border_row); +} + +/* New Item - table, board, timeline, list, gallery */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"]) + .notion-table-view-add-row, +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"]) + .notion-board-view .notion-board-group > [role="button"]:not(.notion-collection-item), +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"]) + .notion-timeline-item-row:last-child, +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"]) + .notion-list-view > .notion-collection_view-block > [role="button"]:not(.notion-collection-item), +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"]) + .notion-gallery-view > .notion-collection_view-block > [role="button"]:not(.notion-collection-item) { + display: none !important; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_item]"]) + .notion-timeline-view > [style*="padding-bottom: 34px;"] { + padding-bottom: 0 !important; +} + +/* Calc Row - table, timeline */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"]) + .notion-table-view-add-row ~ div:not(.notion-selectable-halo):not([role="button"]), +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"]) + .notion-timeline-view > [style*="z-index: 4;"]:last-child { + display: none !important; +} + +/* Hidden Columns - board */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[hidden_column]"]) + .notion-board-view > .notion-collection_view-block [style*="width: 220px;"] { + display: none !important; +} + +/* Add Group - board */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[add_group]"]) + .notion-board-view > .notion-collection_view-block [style*="width: 180px;"] { + display: none !important; +} + +/* New Column - table */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"]) + .notion-table-view-add-column, +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"]) + .notion-table-view .notion-collection-item > [style*="width: 32px;"] { + display: none !important; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[new_column]"]) + .notion-table-view-add-row + [style*="padding-right: 32px;"] { + padding-right: 0 !important; +} + +/* Full Width - table */ + +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"]) + .notion-table-view > .notion-collection_view-block { + max-width: fit-content; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"]) + .notion-table-view .notion-collection_view-block > [style*="min-width"] { + min-width: 0 !important; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"]) + .notion-table-view .notion-collection-item { + width: fit-content; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"]) + .notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div, +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[full_width]"]) + .notion-table-view .notion-collection_view-block > :first-child { + border-left: 1px solid var(--theme--table-border_row); +} + +/* COMPOUND TWEAKS */ + +/* Title and Link disabled > Hide title container */ +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]) + [style*=" height: 42px;"] > [style*="white-space: nowrap; overflow: hidden;"] { + display: none !important; +} + +/* New Row and Calc Row disabled > Add bottom border - table */ +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[calc_row]"]):not([data-tweaks*="[new_item]"]) + .notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div { + border-bottom: 1px solid var(--theme--table-border_row); +} + +/* New Column enabled with Full Width disabled > Add right border - table */ +.notion-collection_view-block[data-tweaks][data-tweaks*="[new_column]"]:not([data-tweaks*="[full_width]"]) + .notion-table-view .notion-collection_view-block > [style*="height: 34px"] + div, +.notion-collection_view-block[data-tweaks][data-tweaks*="[new_column]"]:not([data-tweaks*="[full_width]"]) + .notion-table-view .notion-collection_view-block > :first-child { + border-right: 1px solid var(--theme--table-border_row); +} + +/* REMOVE DATABASE HEADER < Title, Link, Toggle, Views, and Toolbar disabled */ + +/* Hide Header */ +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + [style*="min-height: 42px"] { + min-height: 0 !important; + max-height: 0; + pointer-events: none; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + [style*="height: 42px"] { + overflow: visible !important; +} + +/* Config Button */ +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + [style*=" height: 42px;"] > :last-child { + position: absolute; + top: 4px; + right: 0; + z-index: 99; + pointer-events: auto; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + .simpler-databases--config-button { + background: var(--theme--main); + box-shadow: var(--theme--box-shadow); +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + .simpler-databases--config-button:hover { + background: var(--theme--interactive_hover); +} + +/* Hide Top Border */ +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + :not(.notion-table-view) > .notion-collection_view-block > [style*="box-shadow"] { + box-shadow: none !important; +} +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + :not(.notion-table-view) > .notion-collection_view-block[style*="border-top"], +.notion-collection_view-block[data-tweaks]:not([data-tweaks*="[title]"]):not([data-tweaks*="[link]"]):not([data-tweaks*="[toggle]"]):not([data-tweaks*="[views"]):not([data-tweaks*="[toolbar]"]) + :not(.notion-table-view) > .notion-collection_view-block > [style*="border-top"] { + border-top: none !important; +} diff --git a/mods/simpler-databases/mod.js b/mods/simpler-databases/mod.js new file mode 100644 index 0000000..5bfcbca --- /dev/null +++ b/mods/simpler-databases/mod.js @@ -0,0 +1,538 @@ +/* + * simpler databases + * (c) 2020 dragonwocky (https://dragonwocky.me/) + * (c) 2020 CloudHill + * under the MIT license + */ + +'use strict'; + +const { createElement } = require('../../pkg/helpers.js'); + +module.exports = { + id: '752933b5-1258-44e3-b49a-61b4885f8bda', + tags: ['extension'], + name: 'simpler databases', + desc: 'adds a menu to inline databases to toggle ui elements.', + version: '1.0.0', + author: 'CloudHill', + hacks: { + 'renderer/preload.js'(store, __exports) { + const menuItems = [ + { + key: 'replace_title', + name: 'Replace title...', + type: 'input', + linkedOnly: true, + default: '', + action: replaceTitle, + }, + { + key: 'title', + name: 'Title', + type: 'toggle', + default: true, + }, + { + key: 'toggle', + name: 'Toggle', + type: 'toggle', + default: false, + action: toggle, + }, + { + key: 'link', + name: 'Link arrow', + type: 'toggle', + default: true, + linkedOnly: true, + }, + { + key: 'views', + name: 'Views', + type: 'toggle', + default: true, + }, + { + key: 'toolbar', + name: 'Toolbar', + type: 'toggle', + default: true, + }, + { + key: 'divider', + views: ['table', 'board', 'timeline', 'list', 'gallery'], + }, + { + key: 'header_row', + name: 'Header row', + type: 'toggle', + default: true, + views: ['table'], + }, + { + key: 'new_item', + name: 'New row', + type: 'toggle', + default: true, + views: ['table', 'timeline'], + }, + { + key: 'new_item', + name: 'New item', + type: 'toggle', + default: true, + views: ['board', 'list', 'gallery'], + }, + { + key: 'calc_row', + name: 'Calculation row', + type: 'toggle', + default: true, + views: ['table', 'timeline'], + }, + { + key: 'divider', + views: ['table', 'board'], + }, + { + key: 'hidden_column', + name: 'Hidden columns', + type: 'toggle', + default: true, + views: ['board'], + }, + { + key: 'add_group', + name: 'Add group', + type: 'toggle', + default: true, + views: ['board'], + }, + { + key: 'new_column', + name: 'New column', + type: 'toggle', + default: true, + views: ['table'], + }, + { + key: 'full_width', + name: 'Full width', + type: 'toggle', + default: true, + views: ['table'], + }, + ] + + document.addEventListener('readystatechange', (event) => { + if (document.readyState !== 'complete') return false; + + // observe for new or moved collection blocks + const contentObserver = new MutationObserver((list, observer) => { + for (let { addedNodes } of list) { + if ( + addedNodes[0] && + addedNodes[0].querySelector && + addedNodes[0].querySelector('.notion-collection_view-block') + ) + findInlineCollections(); + } + }); + + // observe for page changes + let queue = []; + const pageObserver = new MutationObserver((list, observer) => { + if (!queue.length) requestAnimationFrame(() => process(queue)); + queue.push(...list); + }); + pageObserver.observe(document.body, { + childList: true, + subtree: true, + }); + function process(list) { + queue = []; + for (let { addedNodes } of list) { + if ( + addedNodes[0] && + addedNodes[0].className === 'notion-page-content' + ) { + findInlineCollections(); + contentObserver.disconnect(); + contentObserver.observe(addedNodes[0], + { + childList: true, + subtree: true, + } + ); + } + } + } + }); + + function findInlineCollections() { + const collections = document.querySelectorAll('.notion-collection_view-block[style*="width"][style*="max-width"]'); + collections.forEach(collection => { + if (collection.querySelector('.simpler-databases--config-button')) return; + + const blockId = collection.dataset.blockId; + + // config button + const add = collection.querySelector('.notion-collection-view-item-add'); + if (!add) return; + + const configButton = add.previousElementSibling.cloneNode(); + configButton.className = 'simpler-databases--config-button'; + configButton.innerHTML = ``; + configButton.collectionBlock = collection; + configButton.addEventListener('click', renderConfig); + + add.parentElement.prepend(configButton); + + // initialize store variable + if (!store().blocks[blockId]) store().blocks[blockId] = {}; + + // restore stored states + menuItems.forEach( + item => { + if (item.key === 'divider') return; + + let storedValue = store().blocks[blockId][item.key]; + if (storedValue == null) // set defaults + storedValue = store().blocks[blockId][item.key] = item.default; + + if (item.action) item.action(storedValue, collection); + if ( + item.type !== 'input' && + !item.linkedOnly || isLinked(collection) + ) { + toggleDataTweaks(collection, item.key, storedValue); + } + } + ); + }); + } + + // config + + function renderConfig(e) { + if (document.querySelector('.simpler-databases--overlay-container')) return; + const button = e.currentTarget; + + const collection = button.collectionBlock; + if (!collection) return; + + const collectionView = getView(collection); + if (!collectionView) return; + + // layer to close config + const overlayContainer = createElement( + '
' + ); + overlayContainer.addEventListener('click', hideConfig) + document + .querySelector('.notion-app-inner') + .appendChild(overlayContainer); + + const div = createElement(` +
+
+
+ `); + + // render config + + toggleDataTweaks(collection, 'config-open', true); + + const config = createElement( + '
' + ); + + // get menu items relevant to current view + const viewMenu = menuItems.filter( + item => (!item.views || item.views.includes(collectionView)) && + (!item.linkedOnly || isLinked(collection)) + ); + config.append(...viewMenu.map( + item => renderConfigItem(item, collection) + )); + + overlayContainer.appendChild(div); + div.firstElementChild.appendChild(config); + + focusConfigItem(config.firstElementChild); + + // config positioning + const rect = button.getBoundingClientRect(); + + div.style.left = Math.min( + rect.left + rect.width / 2, + window.innerWidth - (config.offsetWidth + 14) + ) + 'px'; + + div.style.top = Math.min( + rect.top + rect.height / 2, + window.innerHeight - (config.offsetHeight + 14) + ) + 'px'; + + // fade in + config.animate( + [ {opacity: 0}, {opacity: 1} ], + { duration: 200 } + ); + + // key bindings + document.addEventListener('keydown', configKeyEvent); + } + + function hideConfig() { + const overlayContainer = document.querySelector('.simpler-databases--overlay-container'); + if (!overlayContainer) return; + + overlayContainer.removeEventListener('click', hideConfig); + document.removeEventListener('keydown', configKeyEvent); + + toggleDataTweaks( + document.querySelector('[data-tweaks*="config-open"]'), + 'config-open', false + ); + + // fade out + document.querySelector('.simpler-databases--config-menu').animate( + [ {opacity: 1}, {opacity: 0} ], + { duration: 200 } + ).onfinish = () => overlayContainer.remove(); + } + + function renderConfigItem(menuItem, collection) { + if (menuItem.key === 'divider') + return createElement('
+
+ `); + + const storedValue = store().blocks[blockId][menuItem.key]; + switch (menuItem.type) { + case 'toggle': + const toggleLabel = createElement(` +
${menuItem.name}
+ `) + const toggle = createElement(` +
+
+ `); + item.append(toggleLabel, toggle) + item.setAttribute('tabindex', 0); + + item.addEventListener('click', e => { + e.stopPropagation(); + + const newState = !(toggle.dataset.toggled === 'true'); + toggle.dataset.toggled = newState; + + + store().blocks[blockId][menuItem.key] = newState; + toggleDataTweaks(collection, menuItem.key, newState); + if (menuItem.action) menuItem.action(newState, collection); + }); + break; + + case 'input': + const input = createElement(` +
+ +
+ `); + item.appendChild(input) + item.addEventListener('click', e => e.stopPropagation()); + if (menuItem.action) { + input.firstElementChild.addEventListener('input', e => { + e.stopPropagation(); + const newValue = e.target.value; + + store().blocks[blockId][menuItem.key] = newValue; + menuItem.action(newValue, collection); + }); + } + break; + } + return item; + } + + function focusConfigItem(item) { + ( + item.getElementsByTagName('input')[0] || item + ).focus(); + } + + function configKeyEvent(e) { + e.stopPropagation(); + + if (e.key === 'Escape') return hideConfig(); + + let currentFocus = document.activeElement + .closest('[class^="simpler-databases--config-item"]'); + + const parentEl = currentFocus.parentElement; + if ( + [' ', 'Enter'].includes(e.key) + ) return currentFocus.click(); + + const focusNext = () => { + let nextEl = currentFocus.nextElementSibling; + if (nextEl) { + if (nextEl.className.includes('divider')) + nextEl = nextEl.nextElementSibling; + focusConfigItem(nextEl); + } + else focusConfigItem(parentEl.firstElementChild); + } + const focusPrevious = () => { + let prevEl = currentFocus.previousElementSibling; + if (prevEl) { + if (prevEl.className.includes('divider')) + prevEl = prevEl.previousElementSibling; + + if (prevEl.className.includes('input')) + prevEl.getElementsByTagName('input')[0].focus(); + focusConfigItem(prevEl); + } + else focusConfigItem(parentEl.lastElementChild); + } + + if (e.key === 'ArrowUp') focusPrevious(); + else if (e.key === 'ArrowDown') focusNext(); + else if (e.key === 'Tab') { + if (e.shiftKey) { + if (currentFocus === parentEl.firstElementChild) { + focusConfigItem(parentEl.lastElementChild); + e.preventDefault(); + } + } + else if (currentFocus === parentEl.lastElementChild) { + focusConfigItem(parentEl.firstElementChild); + e.preventDefault(); + } + } + } + + // get collection info + + function isLinked(collection) { + return collection.querySelector('[style*=" height: 42px;"] .alias'); + } + + function getView(collection) { + return collection.querySelector('.notion-scroller [class$="view"]') + .className.split('-')[1] + } + + // add/remove keys to data-tweaks + function toggleDataTweaks(collection, key, state) { + if (!collection.dataset.tweaks) collection.dataset.tweaks = ''; + + const isActive = collection.dataset.tweaks.includes(`[${key}]`); + if (state == null) state = !isActive; + + if (state && !isActive) { + collection.dataset.tweaks += `[${key}]`; + } else if (!state && isActive) { + collection.dataset.tweaks = collection.dataset.tweaks + .replace(`[${key}]`, ''); + } + } + + // menu actions + + // replace and add observer to linked database titles + function replaceTitle(value, collection) { + const titleDiv = collection.querySelector('[style*="height: 42px;"] a [placeholder]'); + if (!titleDiv) return; + if (!titleDiv.originalTitle && value) titleDiv.originalTitle = titleDiv.innerText; + + if (!titleDiv.titleObserver) { + if (!value) return; + // store reference to observer to disconnect() in future calls + titleDiv.titleObserver = new MutationObserver(() => { + const title = store().blocks[collection.dataset.blockId]['replace_title']; + if (title && titleDiv.innerText !== title) titleDiv.innerText = title; + }); + } else { + titleDiv.titleObserver.disconnect(); + } + + if (value) { // observe + titleDiv.innerText = value + titleDiv.titleObserver.observe(titleDiv, {characterData: true, childList: true}) + } else { // reset + titleDiv.titleObserver.disconnect(); + titleDiv.innerText = titleDiv.originalTitle; + delete titleDiv.originalTitle; + } + } + + // show or hide toggle + function toggle(state, collection) { + const header = collection.querySelector('[style*=" height: 42px"]'); + if (!header) return; + + // define functions + const collectionView = collection.querySelector('.notion-scroller'); + const hideCollection = () => { + collectionView.style.height = collectionView.offsetHeight + 'px'; + requestAnimationFrame(() => { + collection.dataset.toggledHidden = true; + setTimeout(() => collectionView.dataset.hideItems = 'true', 200); // hide drag handles + }); + } + const showCollection = () => { + // get height + collection.dataset.toggledHidden = false; + collectionView.style.height = ''; + collectionView.style.height = collectionView.offsetHeight + 'px'; + collection.dataset.toggledHidden = true; + + delete collectionView.dataset.hideItems; + requestAnimationFrame(() =>{ + collection.dataset.toggledHidden = false; + setTimeout(() => collectionView.style.height = '', 200); + }); + } + + // restore previous state + if (!collection.dataset.toggledHidden) { + const storedState = store().blocks[collection.dataset.blockId].toggledHidden || false; + if (storedState) hideCollection(); + } + + let toggle = header.querySelector('.simpler-databases--toggle'); + if (toggle) { + // return if toggle is already there + if (!state) toggle.remove(); + return; + } else if (state) { + // add toggle + toggle = createElement(` +
+ + + +
+ `); + toggle.addEventListener('click', () => { + const hide = !(collection.dataset.toggledHidden === 'true'); + store().blocks[collection.dataset.blockId].toggledHidden = hide; + if (hide) hideCollection(); + else showCollection(); + }); + header.prepend(toggle); + } + } + }, + }, +};