From 0a64c4eb5c832b77c65703ef443369bd5e262696 Mon Sep 17 00:00:00 2001
From: Ryo Hilmawan <54142180+CloudHill@users.noreply.github.com>
Date: Sat, 30 Oct 2021 19:06:10 +0700
Subject: [PATCH] update cloudhill mods (#600)
---
mods/code-line-numbers/app.css | 5 +-
mods/code-line-numbers/mod.js | 33 ++-
mods/collapsible-headers/mod.js | 15 +-
mods/outliner/mod.js | 2 +-
mods/outliner/panel.js | 4 +-
mods/scroll-to-top/app.css | 6 +-
mods/scroll-to-top/arrow.svg | 2 +-
mods/scroll-to-top/mod.js | 4 +-
mods/side-panel/app.css | 21 +-
mods/side-panel/mod.js | 445 ++++++++++++++++++++------------
mods/simpler-databases/app.css | 11 +-
mods/simpler-databases/mod.js | 4 +-
12 files changed, 338 insertions(+), 214 deletions(-)
diff --git a/mods/code-line-numbers/app.css b/mods/code-line-numbers/app.css
index 9a1bb3a..8d9eb8b 100644
--- a/mods/code-line-numbers/app.css
+++ b/mods/code-line-numbers/app.css
@@ -5,7 +5,7 @@
* under the MIT license
*/
-.notion-code-block.line-numbers > div {
+.notion-code-block.line-numbers {
position: relative;
}
@@ -25,3 +25,6 @@
overflow: hidden;
pointer-events: none;
}
+#code-line-numbers:empty {
+ display: none;
+}
diff --git a/mods/code-line-numbers/mod.js b/mods/code-line-numbers/mod.js
index 3d19aa5..02d5e32 100644
--- a/mods/code-line-numbers/mod.js
+++ b/mods/code-line-numbers/mod.js
@@ -14,7 +14,7 @@ module.exports = {
tags: ['extension'],
name: 'code line numbers',
desc: 'adds line numbers to code blocks.',
- version: '1.1.1',
+ version: '1.2.0',
author: 'CloudHill',
options: [
{
@@ -44,23 +44,18 @@ module.exports = {
function handle(list) {
queue = [];
- for (let { addedNodes } of list) {
- if (
- addedNodes[0] &&
+ for (let { addedNodes, target } of list) {
+ const block = target.querySelector('.line-numbers.notion-code-block') ||
(
- addedNodes[0].className === 'notion-page-content' ||
- (
- addedNodes[0].querySelector &&
- addedNodes[0].querySelector('.notion-code-block.line-numbers')
- )
- )
- ) {
- resizeObserver.disconnect();
- const codeBlocks = document.querySelectorAll('.notion-code-block.line-numbers');
- codeBlocks.forEach(block => {
- number(block);
- resizeObserver.observe(block);
- });
+ addedNodes[0]?.classList?.contains('.notion-code-block') &&
+ addedNodes[0].querySelector('.line-numbers.notion-code-block')
+ );
+
+ if (block) {
+ if (block.dataset.numbered) return;
+ number(block);
+ block.dataset.numbered = true;
+ resizeObserver.observe(block);
}
}
}
@@ -74,12 +69,14 @@ module.exports = {
'A ');
block.firstChild.append(temp);
block.lineHeight = temp.getBoundingClientRect().height;
@@ -109,7 +106,7 @@ module.exports = {
if (store().single_lined || codeLineNumbers.length > 2) {
block.firstChild.classList.add('code-numbered');
- numbers.innerText = codeLineNumbers;
+ numbers.innerText = codeLineNumbers || 1;
} else {
block.firstChild.classList.remove('code-numbered');
numbers.innerText = '';
diff --git a/mods/collapsible-headers/mod.js b/mods/collapsible-headers/mod.js
index c9c0d47..f3d9588 100644
--- a/mods/collapsible-headers/mod.js
+++ b/mods/collapsible-headers/mod.js
@@ -14,7 +14,7 @@ module.exports = {
tags: ['extension'],
name: 'collapsible headers',
desc: 'adds toggles to collapse header sections.',
- version: '1.0.0',
+ version: '1.0.1',
author: 'CloudHill',
options: [
{
@@ -92,15 +92,18 @@ module.exports = {
for (let { addedNodes } of list) {
if (
addedNodes[0] &&
- addedNodes[0].className === 'notion-page-content'
+ addedNodes[0].className === 'notion-presence-container'
) {
showSelectedHeader();
initHeaderToggles();
contentObserver.disconnect();
- contentObserver.observe(addedNodes[0], {
- childList: true,
- subtree: true,
- });
+ contentObserver.observe(
+ document.querySelector('.notion-page-content'),
+ {
+ childList: true,
+ subtree: true,
+ }
+ );
}
}
}
diff --git a/mods/outliner/mod.js b/mods/outliner/mod.js
index 094b362..86da862 100644
--- a/mods/outliner/mod.js
+++ b/mods/outliner/mod.js
@@ -14,7 +14,7 @@ module.exports = {
tags: ['extension', 'panel'],
name: 'outliner',
desc: 'table of contents.',
- version: '1.2.1',
+ version: '1.2.2',
author: 'CloudHill',
options: [
{
diff --git a/mods/outliner/panel.js b/mods/outliner/panel.js
index 5ae4442..afc378d 100644
--- a/mods/outliner/panel.js
+++ b/mods/outliner/panel.js
@@ -16,7 +16,7 @@ module.exports = (store, __exports) => {
const pageObserver = new MutationObserver((list, observer) => {
for ( let { addedNodes } of list) {
if (addedNodes[0]) {
- if (addedNodes[0].className === 'notion-page-content') {
+ if (addedNodes[0].className === 'notion-presence-container') {
startContentObserver();
}
// Clear outline on database pages
@@ -147,7 +147,7 @@ module.exports = (store, __exports) => {
// Find headers when switching panels
if (document.querySelector('.notion-page-content')) {
startContentObserver();
- };
+ }
pageObserver.observe(document.body, {
childList: true,
subtree: true,
diff --git a/mods/scroll-to-top/app.css b/mods/scroll-to-top/app.css
index ab76d19..38ec2b5 100644
--- a/mods/scroll-to-top/app.css
+++ b/mods/scroll-to-top/app.css
@@ -36,7 +36,7 @@
font-size: 20px;
background: var(--theme--interactive_hover);
- box-shadow: 0 0 0 0.5px var(--theme--interactive_hover-border);
+ box-shadow: var(--theme--box-shadow);
}
.notion-scroll-button {
@@ -55,6 +55,6 @@
}
.notion-scroll-button > svg {
- width: 18px;
- height: 18px;
+ width: 16px;
+ height: 16px;
}
diff --git a/mods/scroll-to-top/arrow.svg b/mods/scroll-to-top/arrow.svg
index ea97e99..106d0b7 100644
--- a/mods/scroll-to-top/arrow.svg
+++ b/mods/scroll-to-top/arrow.svg
@@ -1 +1 @@
-
'
);
const panel = createElement(
`
`
);
-
- frame.after(container);
container.appendChild(panel);
- // Panel contents
+ // panel contents
const header = createElement(`
`);
- const toggle = createElement(
- `${icons.doubleChevron}
`
- );
const content = createElement(
'
'
);
@@ -77,31 +83,37 @@ module.exports = {
`);
-
panel.append(header, content, resize);
- // Add switcher if there is more than one panel mods
+ // add switcher if there is more than one panel mods
if (panelMods.length > 1) {
- header.addEventListener('click', renderSwitcher);
const switcherIcon = createElement(
`${icons.switcher}
`
)
header.appendChild(switcherIcon);
+ header.addEventListener('click', renderSwitcher);
} else {
header.addEventListener('click', togglePanel);
}
+ // add panel lock toggle
+ const toggle = createElement(
+ `${icons.doubleChevron}
`
+ );
header.appendChild(toggle);
toggle.addEventListener('click', togglePanel);
- // Keybind
+ // render panel
+ notionSidebarContainer.after(container);
+
+ // toggle panel keybind
document.addEventListener('keyup', e => {
const hotkey = {
code: 'Backslash',
ctrlKey: true,
- shiftKey: true,
+ shiftKey: false,
metaKey: false,
- altKey: false,
+ altKey: true,
};
for (let prop in hotkey)
if (hotkey[prop] !== e[prop]) return;
@@ -114,26 +126,34 @@ module.exports = {
enableResize();
- // Attempt to load last opened mod
+ // attempt to load last opened mod
let loaded = false;
if (store().last_open) {
panelMods.forEach(mod => {
if (mod.id === store().last_open) {
- loadContent(mod);
+ loadPanelMod(mod);
loaded = true;
}
});
}
- if (!loaded) loadContent(panelMods[0]);
+ if (!loaded) loadPanelMod(panelMods[0]);
- function loadContent(mod) {
- if (curPanel.js && curPanel.js.onSwitch) curPanel.js.onSwitch();
+
+ // loads a panel mod
+ function loadPanelMod(mod) {
+ // call previous panel's onSwitch function
+ if (curPanel.js?.onSwitch) curPanel.js.onSwitch();
+
+ // set current panel
curPanel = mod.panel;
-
store().last_open = mod.id;
- panel.querySelector('.enhancer-panel--title').innerHTML = mod.panel.name || mod.name;
- // Reload button
+ setPanelTitle(mod.panel.name);
+ setPanelIcon(mod.panel.icon);
+ setPanelContent(mod.panel.html);
+ panel.dataset.fullHeight = mod.panel.fullHeight || false;
+
+ // reload button
let reloadButton = panel.querySelector('.enhancer-panel--reload-button');
if (reloadButton) reloadButton.remove();
if (mod.panel.reload) {
@@ -142,102 +162,168 @@ module.exports = {
)
reloadButton.addEventListener('click', e => {
e.stopPropagation();
- loadContent(mod);
+ loadPanelMod(mod);
})
panel.querySelector('.enhancer-panel--title').after(reloadButton);
}
- panel.querySelector('.enhancer-panel--icon').innerHTML = mod.panel.icon;
- document.getElementById('enhancer-panel--content').innerHTML = mod.panel.html;
- panel.dataset.fullHeight = mod.panel.fullHeight || false;
-
- if (curPanel.js && curPanel.js.onLoad)
- curPanel.js.onLoad();
+ // execute panel's onLoad function
+ if (curPanel.js?.onLoad) curPanel.js.onLoad();
}
+ function setPanelTitle(title) {
+ panel.querySelector('.enhancer-panel--title').innerHTML = title;
+ }
+
+ function setPanelIcon(icon) {
+ panel.querySelector('.enhancer-panel--icon').innerHTML = icon;
+ }
+
+ function setPanelContent(content) {
+ document.getElementById('enhancer-panel--content').innerHTML = content;
+ }
+
+ function setPanelWidth(width) {
+ // update width
+ store().width = width;
+ panel.style.width = width + 'px';
+
+ if (isLocked()) {
+ // panel container width
+ container.style.width = width + 'px';
+ // adjust notion elements to make space on the right
+ frame.style.paddingRight = width + 'px';
+ notionSidebarContainer.style.right = width + 'px';
+ } else {
+ // hide panel to the right of window
+ panel.style.right = width + 'px';
+ }
+ }
+
+ // LOCK/OPEN
+
+ function lockPanel() {
+ panel.dataset.locked = 'true';
+ setPanelWidth(store().width);
+
+ // anchor panel to right of window
+ panel.style.right = 0;
+
+ // remove handle
+ const handle = panel.nextElementSibling;
+ handle?.remove();
+
+ // reset animation styles
+ panel.style.opacity = '';
+ panel.style.transform = '';
+
+ // hover event listeners
+ disableHideListener();
+
+ // call panel's onLock function
+ if (curPanel.js?.onLock) curPanel.js.onLock();
+ }
+
function unlockPanel(animate) {
panel.dataset.locked = 'false';
setPanelWidth(store().width);
+
+ // hide panel container
+ container.style.width = 0;
+ // reset notion elements to full page
+ frame.style.paddingRight = 0;
+ notionSidebarContainer.style.right = 0;
+ // add handle
+ const handle = createElement(
+ '
'
+ )
+ panel.after(handle);
+
+ const addListeners = () => {
+ // show panel when handle is hovered
+ handle.addEventListener('mouseover', showPanel);
+ handle.addEventListener('mousemove', showPanel);
+
+ // hide panel when mouse leaves panel or handle
+ enableHideListener();
+ handle.addEventListener('mouseleave', e => {
+ // don't hide if mouseover scrollbar or panel
+ if (e.relatedTarget?.closest(".enhancer-panel--container") ||
+ e.relatedTarget?.classList.contains("notion-scroller")) return;
+ hidePanel(e);
+ });
+ }
+
+ // unlock animation
if (animate) {
panel.animate(
[
{ opacity: 1, transform: 'none' },
{ opacity: 1, transform: 'translateY(60px)', offset: 0.4},
- { opacity: 0, transform: `translateX(${store().width - 30}px) translateY(60px)`},
+ { opacity: 0, transform: `translateX(${store().width}px) translateY(60px)`},
],
{ duration: 600, easing: 'ease-out' }
- ).onfinish = () => {
- panel.addEventListener('mouseover', showPanel);
- panel.addEventListener('mouseleave', hidePanel);
- }
- } else {
- panel.addEventListener('mouseover', showPanel);
- panel.addEventListener('mouseleave', hidePanel);
- }
+ ).onfinish = () => addListeners();
+ } else addListeners();
hidePanel();
- if (curPanel.js && curPanel.js.onUnlock) {
- curPanel.js.onUnlock();
- }
- }
-
- function lockPanel() {
- panel.dataset.locked = 'true';
- setPanelWidth(store().width);
-
- // Reset animation styles
- panel.style.opacity = '';
- panel.style.transform = '';
-
- // Hover event listeners
- panel.removeEventListener('mouseover', showPanel);
- panel.removeEventListener('mouseleave', hidePanel);
-
- if (curPanel.js && curPanel.js.onLock) {
- curPanel.js.onLock();
- }
+ // call panel's onUnlock function
+ if (curPanel.js?.onUnlock) curPanel.js.onUnlock();
}
function togglePanel(e) {
if (e) e.stopPropagation();
- if (isLocked()) unlockPanel(true);
- else lockPanel();
+
+ isLocked() ? unlockPanel(true) : lockPanel();
+
store().locked = panel.dataset.locked;
}
- function showPanel() {
- if (!isLocked()) {
- panel.style.opacity = 1;
- panel.style.transform = 'translateY(60px)';
+ function isLocked() {
+ return panel.dataset.locked === 'true';
+ }
+
+ // WHEN UNLOCKED
+
+ function showPanel(e) {
+ if (isLocked()) return;
+ if (e.shiftKey) {
+ hidePanel();
+ return;
}
+
+ panel.style.opacity = 1;
+ panel.style.transform = 'translateY(60px)';
}
- function hidePanel() {
- if (!isLocked()) {
- panel.style.opacity = 0;
- panel.style.transform = `translateX(${store().width - 30}px) translateY(60px)`;
- }
+ function hidePanel(e) {
+ if (isLocked()) return;
+ if (e?.type === 'mousemove' && !e.shiftKey) return;
+
+ panel.style.opacity = 0;
+ panel.style.transform = `translateX(${store().width}px) translateY(60px)`;
}
- function renderSwitcherItem(mod) {
- if (mod.panel) {
- const item = createElement(
- `
-
${mod.panel.icon}
-
${mod.panel.name || mod.name}
-
'
);
@@ -246,7 +332,7 @@ module.exports = {
.querySelector('.notion-app-inner')
.appendChild(overlayContainer);
- // Position switcher below header
+ // position switcher below header
const rect = panel.querySelector('.enhancer-panel--header').getBoundingClientRect();
const div = createElement(`
@@ -254,7 +340,7 @@ module.exports = {
`);
- // Render switcher
+ // initialize switcher
const switcher = createElement(
'
'
);
@@ -262,161 +348,173 @@ module.exports = {
switcher.append(renderSwitcherItem(mod))
);
- overlayContainer.appendChild(div);
div.firstElementChild.appendChild(switcher);
+ overlayContainer.appendChild(div);
+ // focus on first element
switcher.firstElementChild.focus();
- // Fade in
+ // fade in
switcher.animate(
[ {opacity: 0}, {opacity: 1} ],
{ duration: 200 }
);
- // Prevent panel from closing if unlocked
- panel.removeEventListener('mouseleave', hidePanel);
+ // prevent panel from closing if unlocked
+ disableHideListener();
- // Escape key listener
+ // keyboard shortcuts
document.addEventListener('keydown', switcherKeyEvent);
}
function hideSwitcher() {
- const overlayContainer = document.querySelector('.enhancer-panel--overlay-container');
+ const overlayContainer = document
+ .querySelector('.enhancer-panel--overlay-container');
overlayContainer.removeEventListener('click', hideSwitcher);
document.removeEventListener('keydown', switcherKeyEvent);
- // Fade out
+ // fade out
document.querySelector('.enhancer-panel--switcher').animate(
[ {opacity: 1}, {opacity: 0} ],
{ duration: 200 }
).onfinish = () => overlayContainer.remove();
- if (!isLocked()) panel.addEventListener('mouseleave', hidePanel);
+ if (!isLocked()) enableHideListener();
}
- function setPanelWidth(width) {
- store().width = width;
- panel.style.width = width + 'px';
+ function renderSwitcherItem(mod) {
+ if (mod.panel) {
+ const item = createElement(
+ `
+
${mod.panel.icon}
+
${mod.panel.name}
+
'
);
+ // mousedown
function initDrag(e) {
+ // initialize start position
startX = e.clientX;
startWidth = store().width;
- panel.appendChild(div);
+ panel.appendChild(overlay);
- // Set transitions
+ // set transitions
container.style.transition = 'width 50ms ease-in';
panel.style.transition = 'width 50ms ease-in, right 50ms ease-in';
frame.style.transition = 'padding-right 50ms ease-in';
+ notionSidebarContainer.style.transition = 'padding-right 50ms ease-in';
- handle.style.cursor = '';
- // Prevent panel from closing if unlocked
- panel.removeEventListener('mouseleave', hidePanel);
+ resizeHandle.style.cursor = '';
document.body.addEventListener('mousemove', drag);
document.body.addEventListener('mouseup', stopDrag);
}
+ // mousemove
function drag(e) {
e.preventDefault();
+
let width = startWidth + (startX - e.clientX);
+ // minmax
if (width < 190) width = 190;
if (width > 480) width = 480;
+
setPanelWidth(width);
-
- if (curPanel.js && curPanel.js.onResize) {
- curPanel.js.onResize();
- }
+
+ // prevent panel from closing if unlocked
+ disableHideListener();
+
+ // call panel's onResize function
+ if (curPanel.js?.onResize) curPanel.js.onResize();
}
+ // mouseup
function stopDrag() {
- handle.style.cursor = 'col-resize';
- panel.removeChild(div);
+ resizeHandle.style.cursor = 'col-resize';
+ panel.removeChild(overlay);
- // Reset transitions
+ // reset transitions
container.style.transition =
- panel.style.transition =
- frame.style.transition = '';
-
- if (!isLocked()) panel.addEventListener('mouseleave', hidePanel);
+ panel.style.transition =
+ frame.style.transition =
+ notionSidebarContainer.style.transition = '';
+
+ if (!isLocked()) enableHideListener();
+
document.body.removeEventListener('mousemove', drag);
document.body.removeEventListener('mouseup', stopDrag);
}
}
-
- function isLocked() {
- if (panel.dataset.locked === 'true') return true;
- else return false;
- }
-
- function switcherKeyEvent(e) {
- e.stopPropagation();
-
- if (e.key === 'Escape') return hideSwitcher();
-
- const currentFocus = document.activeElement;
- if ([' ', 'Enter'].includes(e.key)) return currentFocus.click();
-
- const focusNext = () => {
- const nextEl = currentFocus.nextElementSibling;
- if (nextEl) nextEl.focus();
- else currentFocus.parentElement.firstElementChild.focus();
- }
- const focusPrevious = () => {
- const prevEl = currentFocus.previousElementSibling;
- if (prevEl) prevEl.focus();
- else currentFocus.parentElement.lastElementChild.focus();
- }
-
- if (e.key === 'ArrowUp') focusPrevious();
- else if (e.key === 'ArrowDown') focusNext();
- else if (e.key === 'Tab') {
- if (e.shiftKey) focusPrevious();
- else focusNext();
-
- e.preventDefault();
- }
- }
}
});
+
// INITIALIZATION FUNCTIONS
+ // set values for panel
async function initMod(mod) {
// load panel sites
if (mod.id === '0d541743-eb2c-4d77-83a8-3b2f5e8e5dff') {
panelMods = panelMods.filter(panelMod => panelMod !== mod);
return panelMods.push(...initPanelSites(mod));
}
+
try {
if (typeof mod.panel === 'object') {
- // html
+
+ // html -> relative path to html file
mod.panel.html = await fs.readFile(
path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`)
);
+
// name
- if (!mod.panel.name) mod.panel.name = mod.name;
+ mod.panel.name = mod.panel.name || mod.name;
+
// icon
if (mod.panel.icon) {
const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`);
@@ -425,25 +523,33 @@ module.exports = {
} else {
mod.panel.icon = mod.panel.name[0];
}
- // js
+
+ // js -> relative path to js file
if (mod.panel.js) {
const jsPath = `../${mod.dir}/${mod.panel.js}`;
if (await fs.pathExists(path.resolve(__dirname, jsPath))) {
+ // execute js file
mod.panel.js = require(jsPath)(loadStore(mod), __exports);
}
}
} else if (typeof mod.panel === 'string') {
+
+ // icon
mod.panel.icon = mod.name[0];
+
+ // mod.panel -> rel path to html file
mod.panel.html = await fs.readFile(
path.resolve(__dirname, `../${mod.dir}/${mod.panel}`)
);
} else throw Error;
} catch (err) {
+ // remove mod from panel list
console.log('invalid panel mod: ' + mod.name);
panelMods = panelMods.filter(panelMod => panelMod !== mod);
}
}
+ // returns an array of panels
function initPanelSites(mod) {
let panelSites = [];
const sitesPath = store(mod.id).sites;
@@ -451,21 +557,24 @@ module.exports = {
try {
const sites = require(sitesPath);
const invalid = false;
+ // execute panel-sites/panel.js
const sitePanelJs = require('../panel-sites/panel.js')(loadStore(mod), __exports);
- const frameUrl = function(url, mobile) {
- if (!/(^https?:\/\/)/.test(url)) url = 'https://' + url;
+ // returns site's iframe
+ const frameUrl = (url, mobile) => {
+ if (!/(^https?:\/\/)/i.test(url)) url = 'https://' + url;
return ``;
}
sites.forEach(site => {
if (site.url && site.name) {
- // get url and icon
+ // get iframe and icon
const iframe = frameUrl(site.url, site.mobile);
const icon = `