mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
New extensions: side panel and outliner (#284)
* upload side panel core * upload outliner extension * add onLoad, onSwitch, and onResize functions to panel extensions * Update panel.js * Add onLock and onUnlock functions to panel extensions * Reordered side panel content loading * change panel switcher font color * fix loading last opened panel * use svg icon files instead of defining them inline * outliner: add full height option
This commit is contained in:
Ryo Hilmawan
GitHub
parent
794cb17ead
commit
4a9d6477b7
51
mods/outliner/app.css
Normal file
51
mods/outliner/app.css
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
/*
|
||||||
|
* outliner
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
.outliner {
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 2.2em;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: background 20ms ease-in;
|
||||||
|
}
|
||||||
|
.outline-header:hover {
|
||||||
|
background: var(--theme--interactive_hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-header a {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 14px;
|
||||||
|
line-height: 2.2;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outline-header a:empty:before {
|
||||||
|
color: var(--theme--text_ui_info);
|
||||||
|
content: attr(placeholder);
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.outline-header.notion-header-block a {
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
.outline-header.notion-sub_header-block a {
|
||||||
|
text-indent: 18px;
|
||||||
|
}
|
||||||
|
.outline-header.notion-sub_sub_header-block a {
|
||||||
|
text-indent: 36px;
|
||||||
|
}
|
||||||
8
mods/outliner/icon.svg
Normal file
8
mods/outliner/icon.svg
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||||
|
<circle cx="5" cy="7" r="2.8"/>
|
||||||
|
<circle cx="5" cy="17" r="2.79"/>
|
||||||
|
<path d="M21,5.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,5.5,21.55,5.95,21,5.95z"/>
|
||||||
|
<path d="M17,10.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,9.6,17.55,10.05,17,10.05z"/>
|
||||||
|
<path d="M21,15.95H11c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h10c0.55,0,1,0.45,1,1v0C22,15.5,21.55,15.95,21,15.95z" />
|
||||||
|
<path d="M17,20.05h-6c-0.55,0-1-0.45-1-1v0c0-0.55,0.45-1,1-1h6c0.55,0,1,0.45,1,1v0C18,19.6,17.55,20.05,17,20.05z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 633 B |
34
mods/outliner/mod.js
Normal file
34
mods/outliner/mod.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/*
|
||||||
|
* outliner
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const store = require("../../pkg/store");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
id: '87e077cc-5402-451c-ac70-27cc4ae65546',
|
||||||
|
tags: ['extension', 'panel'],
|
||||||
|
name: 'outliner',
|
||||||
|
desc: 'table of contents.',
|
||||||
|
version: '1.0.0',
|
||||||
|
author: 'CloudHill',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
key: 'fullHeight',
|
||||||
|
label: 'full height',
|
||||||
|
type: 'toggle',
|
||||||
|
value: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
panel: {
|
||||||
|
html: "panel.html",
|
||||||
|
name: "Outline",
|
||||||
|
icon: "icon.svg",
|
||||||
|
js: "panel.js",
|
||||||
|
fullHeight: store('87e077cc-5402-451c-ac70-27cc4ae65546').fullHeight
|
||||||
|
}
|
||||||
|
};
|
||||||
1
mods/outliner/panel.html
Normal file
1
mods/outliner/panel.html
Normal file
@ -0,0 +1 @@
|
|||||||
|
<div class="outliner"></div>
|
||||||
117
mods/outliner/panel.js
Normal file
117
mods/outliner/panel.js
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
/*
|
||||||
|
* outliner
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const { createElement } = require("../../pkg/helpers");
|
||||||
|
|
||||||
|
module.exports = (store) => {
|
||||||
|
// Observe for page changes
|
||||||
|
const pageObserver = new MutationObserver((list, observer) => {
|
||||||
|
for ( let { addedNodes } of list) {
|
||||||
|
if (addedNodes[0]) {
|
||||||
|
if (addedNodes[0].className === 'notion-page-content') {
|
||||||
|
startContentObserver();
|
||||||
|
}
|
||||||
|
// Clear outline on database pages
|
||||||
|
else if (addedNodes[0].className === 'notion-scroller') {
|
||||||
|
contentObserver.disconnect();
|
||||||
|
const outline = document.querySelector('.outliner');
|
||||||
|
if (outline) outline.textContent = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Observe for header changes
|
||||||
|
const contentObserver = new MutationObserver((list, observer) => {
|
||||||
|
list.forEach(m => {
|
||||||
|
if (
|
||||||
|
(
|
||||||
|
m.type === 'childList' &&
|
||||||
|
(
|
||||||
|
isHeaderElement(m.target) ||
|
||||||
|
isHeaderElement(m.addedNodes[0]) ||
|
||||||
|
isHeaderElement(m.removedNodes[0])
|
||||||
|
)
|
||||||
|
) ||
|
||||||
|
(
|
||||||
|
m.type === 'characterData' &&
|
||||||
|
isHeaderElement(m.target.parentElement)
|
||||||
|
)
|
||||||
|
) findHeaders();
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
function startContentObserver() {
|
||||||
|
findHeaders();
|
||||||
|
contentObserver.disconnect();
|
||||||
|
contentObserver.observe(
|
||||||
|
document.querySelector('.notion-page-content'),
|
||||||
|
{
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
characterData: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function findHeaders() {
|
||||||
|
const outline = document.querySelector('.outliner');
|
||||||
|
if (!outline) return;
|
||||||
|
outline.textContent = '';
|
||||||
|
|
||||||
|
const pageContent = document.querySelector('.notion-page-content');
|
||||||
|
const headerBlocks = pageContent.querySelectorAll('[class*="header-block"]');
|
||||||
|
|
||||||
|
headerBlocks.forEach(block => {
|
||||||
|
const blockId = block.dataset.blockId.replace(/-/g, '');
|
||||||
|
const placeholder = block.querySelector('[placeholder]').getAttribute('placeholder');
|
||||||
|
const header = createElement(`
|
||||||
|
<div class="outline-header ${block.classList[1]}">
|
||||||
|
<a href="${window.location.pathname}#${blockId}"
|
||||||
|
placeholder="${placeholder}">${block.innerText}</a>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
outline.append(header);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function isHeaderElement(el) {
|
||||||
|
let placeholder;
|
||||||
|
if (el) {
|
||||||
|
if (
|
||||||
|
el.querySelector &&
|
||||||
|
el.querySelector('[placeholder]')
|
||||||
|
) {
|
||||||
|
placeholder = el.querySelector('[placeholder]').getAttribute('placeholder')
|
||||||
|
} else if (el.getAttribute) {
|
||||||
|
placeholder = el.getAttribute('placeholder');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!placeholder) placeholder = '';
|
||||||
|
return placeholder.includes('Heading');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
onLoad() {
|
||||||
|
// Find headers when switching panels
|
||||||
|
if (document.querySelector('.notion-page-content')) {
|
||||||
|
startContentObserver();
|
||||||
|
};
|
||||||
|
pageObserver.observe(document.body, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSwitch() {
|
||||||
|
pageObserver.disconnect();
|
||||||
|
contentObserver.disconnect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
196
mods/side-panel/app.css
Normal file
196
mods/side-panel/app.css
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
/*
|
||||||
|
* side panel
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
.notion-frame {
|
||||||
|
transition: padding-right 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
.enhancer-panel--container {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--theme--sidebar);
|
||||||
|
color: var(--theme--text_ui);
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: default;
|
||||||
|
transition: box-shadow 300ms ease-in, width 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#enhancer-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
pointer-events: auto;
|
||||||
|
background: var(--theme--sidebar);
|
||||||
|
cursor: auto;
|
||||||
|
max-height: 100%;
|
||||||
|
transition: transform 300ms ease-in-out,
|
||||||
|
opacity 300ms ease-in-out,
|
||||||
|
right 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
#enhancer-panel[data-locked="false"] {
|
||||||
|
max-height: calc(100vh - 120px);
|
||||||
|
box-shadow: var(--theme--box-shadow_strong) !important;
|
||||||
|
}
|
||||||
|
#enhancer-panel[data-full-height="true"] {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#enhancer-panel[data-locked="false"][data-full-height="true"] {
|
||||||
|
height: calc(100vh - 120px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--header {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 45px;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--theme--text);
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 2px 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
|
||||||
|
}
|
||||||
|
.enhancer-panel--header:hover {
|
||||||
|
background: var(--theme--interactive_hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--icon {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
margin-right: 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.enhancer-panel--icon svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--title {
|
||||||
|
margin-right: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--switcher-icon {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
fill: var(--theme--text_ui);
|
||||||
|
}
|
||||||
|
.enhancer-panel--switcher-icon svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--toggle {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: auto;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
border-radius: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
transition: background 20ms ease-in, opacity 300ms ease-in;
|
||||||
|
}
|
||||||
|
#enhancer-panel:hover .enhancer-panel--toggle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.enhancer-panel--toggle:hover {
|
||||||
|
background: var(--theme--interactive_hover);
|
||||||
|
}
|
||||||
|
.enhancer-panel--toggle svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
fill: var(--theme--text_ui);
|
||||||
|
transition: transform 400ms ease-in;
|
||||||
|
}
|
||||||
|
#enhancer-panel[data-locked="false"] .enhancer-panel--toggle svg {
|
||||||
|
transform: rotateZ(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#enhancer-panel--content {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
color: var(--theme--text);
|
||||||
|
font-size: var(--theme--font_body-size);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--resize {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 100vh;
|
||||||
|
width: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#enhancer-panel[data-locked="false"] .enhancer-panel--resize {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.enhancer-panel--resize div {
|
||||||
|
height: 100%;
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--overlay-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 999;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--switcher {
|
||||||
|
max-width: calc(100vw - 24px);
|
||||||
|
position: relative;
|
||||||
|
right: 14px;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 8px 0;
|
||||||
|
box-shadow: var(--theme--box-shadow_strong);
|
||||||
|
background: var(--theme--card);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enhancer-panel--switcher-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 14px;
|
||||||
|
color: var(--theme--text);
|
||||||
|
font-size: 14px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: background 0.4s ease;
|
||||||
|
}
|
||||||
|
.enhancer-panel--switcher-item:hover {
|
||||||
|
background: var(--theme--interactive_hover);
|
||||||
|
}
|
||||||
3
mods/side-panel/icons/double-chevron.svg
Normal file
3
mods/side-panel/icons/double-chevron.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
|
||||||
|
<path d="M7 12.025L8.225 13.25L14 7.125L8.225 1L7 2.225L11.55 7.125L7 12.025ZM0 12.025L1.225 13.25L7 7.125L1.225 1L8.56743e-07 2.225L4.55 7.125L0 12.025Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 250 B |
3
mods/side-panel/icons/reload.svg
Normal file
3
mods/side-panel/icons/reload.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path d="M14.66.27l-.81,3.56a8.35,8.35,0,0,1-3.7,16.28,8.35,8.35,0,0,1-6.29-10A8.42,8.42,0,0,1,5,7.39l2.64,2.72L10.05.27l-9.92,2L2.45,4.72a12,12,0,0,0,6.89,19A11.55,11.55,0,0,0,12,24,12,12,0,0,0,14.66.27Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 277 B |
3
mods/side-panel/icons/switcher.svg
Normal file
3
mods/side-panel/icons/switcher.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="11" viewBox="-1 -1 9 11">
|
||||||
|
<path d="M 3.5 0L 3.98809 -0.569442L 3.5 -0.987808L 3.01191 -0.569442L 3.5 0ZM 3.5 9L 3.01191 9.56944L 3.5 9.98781L 3.98809 9.56944L 3.5 9ZM 0.488094 3.56944L 3.98809 0.569442L 3.01191 -0.569442L -0.488094 2.43056L 0.488094 3.56944ZM 3.01191 0.569442L 6.51191 3.56944L 7.48809 2.43056L 3.98809 -0.569442L 3.01191 0.569442ZM -0.488094 6.56944L 3.01191 9.56944L 3.98809 8.43056L 0.488094 5.43056L -0.488094 6.56944ZM 3.98809 9.56944L 7.48809 6.56944L 6.51191 5.43056L 3.01191 8.43056L 3.98809 9.56944Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 596 B |
389
mods/side-panel/mod.js
Normal file
389
mods/side-panel/mod.js
Normal file
@ -0,0 +1,389 @@
|
|||||||
|
/*
|
||||||
|
* side panel
|
||||||
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||||
|
* (c) 2020 CloudHill
|
||||||
|
* under the MIT license
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const { createElement, getEnhancements } = require('../../pkg/helpers.js'),
|
||||||
|
path = require('path'),
|
||||||
|
fs = require('fs-extra');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
id: 'c8b1db83-ee37-45b4-bdb3-a7f3d36113db',
|
||||||
|
tags: ['extension', 'panel'],
|
||||||
|
name: 'side panel',
|
||||||
|
desc: 'adds a side panel to notion.',
|
||||||
|
version: '1.0.0',
|
||||||
|
author: 'CloudHill',
|
||||||
|
hacks: {
|
||||||
|
'renderer/preload.js'(store, __exports) {
|
||||||
|
// Load icons
|
||||||
|
let icons = {};
|
||||||
|
(async () => {
|
||||||
|
icons.doubleChevron = await fs.readFile( path.resolve(__dirname, 'icons/double-chevron.svg') );
|
||||||
|
icons.switcher = await fs.readFile( path.resolve(__dirname, 'icons/switcher.svg') );
|
||||||
|
icons.reload = await fs.readFile( path.resolve(__dirname, 'icons/reload.svg') );
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Load panel mods
|
||||||
|
let panelMods = getEnhancements().loaded.filter(mod =>
|
||||||
|
(mod.panel && (store('mods')[mod.id] || {}).enabled)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Get panel info
|
||||||
|
panelMods.forEach(mod => initMod(mod));
|
||||||
|
async function initMod(mod) {
|
||||||
|
try {
|
||||||
|
if (typeof mod.panel === 'object') {
|
||||||
|
// html
|
||||||
|
mod.panel.html = await fs.readFile(
|
||||||
|
path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`)
|
||||||
|
);
|
||||||
|
// name
|
||||||
|
if (!mod.panel.name) mod.panel.name = mod.name;
|
||||||
|
// icon
|
||||||
|
if (mod.panel.icon) {
|
||||||
|
const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`);
|
||||||
|
if (await fs.pathExists(iconPath))
|
||||||
|
mod.panel.icon = await fs.readFile(iconPath);
|
||||||
|
} else {
|
||||||
|
mod.panel.icon = mod.panel.name[0];
|
||||||
|
}
|
||||||
|
// js
|
||||||
|
if (mod.panel.js) {
|
||||||
|
const jsPath = `../${mod.dir}/${mod.panel.js}`;
|
||||||
|
if (await fs.pathExists(path.resolve(__dirname, jsPath)))
|
||||||
|
mod.panel.js = require(jsPath)(store(mod.id));
|
||||||
|
}
|
||||||
|
} else if (typeof mod.panel === 'string') {
|
||||||
|
mod.panel.icon = mod.name[0];
|
||||||
|
mod.panel.html = await fs.readFile(
|
||||||
|
path.resolve(__dirname, `../${mod.dir}/${mod.panel}`)
|
||||||
|
);
|
||||||
|
} else throw Error;
|
||||||
|
} catch (err) {
|
||||||
|
console.log('invalid panel mod: ' + mod.name);
|
||||||
|
panelMods = panelMods.filter(panelMod => panelMod !== mod);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('readystatechange', (event) => {
|
||||||
|
if (document.readyState !== 'complete') return false;
|
||||||
|
if (panelMods.length < 1) return;
|
||||||
|
|
||||||
|
const attempt_interval = setInterval(enhance, 500);
|
||||||
|
function enhance() {
|
||||||
|
let curPanel = {};
|
||||||
|
|
||||||
|
const frame = document.querySelector('.notion-frame');
|
||||||
|
if (!frame) return;
|
||||||
|
clearInterval(attempt_interval);
|
||||||
|
|
||||||
|
// Initialize panel
|
||||||
|
const container = createElement(
|
||||||
|
'<div class="enhancer-panel--container"></div>'
|
||||||
|
);
|
||||||
|
const panel = createElement(
|
||||||
|
`<div id="enhancer-panel"></div>`
|
||||||
|
);
|
||||||
|
|
||||||
|
frame.after(container);
|
||||||
|
container.appendChild(panel);
|
||||||
|
|
||||||
|
// Panel contents
|
||||||
|
const header = createElement(`
|
||||||
|
<div class="enhancer-panel--header">
|
||||||
|
<div class="enhancer-panel--icon"></div>
|
||||||
|
<div class="enhancer-panel--title"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
const toggle = createElement(
|
||||||
|
`<div class="enhancer-panel--toggle">${icons.doubleChevron}</div>`
|
||||||
|
);
|
||||||
|
const content = createElement(
|
||||||
|
'<div id="enhancer-panel--content"></div>'
|
||||||
|
);
|
||||||
|
const resize = createElement(`
|
||||||
|
<div class="enhancer-panel--resize">
|
||||||
|
<div style="cursor: col-resize;"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
panel.append(header, content, resize);
|
||||||
|
|
||||||
|
// Add switcher if there is more than one panel mods
|
||||||
|
if (panelMods.length > 1) {
|
||||||
|
header.addEventListener('click', renderSwitcher);
|
||||||
|
|
||||||
|
const switcherIcon = createElement(
|
||||||
|
`<div class="enhancer-panel--switcher-icon">${icons.switcher}</div>`
|
||||||
|
)
|
||||||
|
header.appendChild(switcherIcon);
|
||||||
|
} else header.addEventListener('click', togglePanel);
|
||||||
|
|
||||||
|
header.appendChild(toggle);
|
||||||
|
toggle.addEventListener('click', togglePanel);
|
||||||
|
|
||||||
|
// Restore lock state
|
||||||
|
if (store().locked === 'true') lockPanel();
|
||||||
|
else unlockPanel(false);
|
||||||
|
|
||||||
|
enableResize();
|
||||||
|
|
||||||
|
// Attempt to load last opened mod
|
||||||
|
let loaded = false;
|
||||||
|
if (store().last_open) {
|
||||||
|
panelMods.forEach(mod => {
|
||||||
|
if (mod.id === store().last_open) {
|
||||||
|
loadContent(mod);
|
||||||
|
loaded = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (!loaded) {
|
||||||
|
loadContent(panelMods[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadContent(mod) {
|
||||||
|
if (curPanel.js && curPanel.js.onSwitch) curPanel.js.onSwitch();
|
||||||
|
curPanel = mod.panel;
|
||||||
|
|
||||||
|
store().last_open = mod.id;
|
||||||
|
panel.querySelector('.enhancer-panel--title').innerHTML = mod.panel.name || mod.name;
|
||||||
|
|
||||||
|
// reload button
|
||||||
|
let reloadButton = document.querySelector('.enhancer-panel--reload-button');
|
||||||
|
if (reloadButton) reloadButton.remove();
|
||||||
|
if (mod.panel.reload) {
|
||||||
|
reloadButton = createElement(
|
||||||
|
`<div class="enhancer-panel--reload-button">${icons.reload}</div>`
|
||||||
|
)
|
||||||
|
reloadButton.addEventListener('click', e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
loadContent(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();
|
||||||
|
}
|
||||||
|
|
||||||
|
function unlockPanel(animate) {
|
||||||
|
panel.dataset.locked = 'false';
|
||||||
|
setPanelWidth(store().width);
|
||||||
|
|
||||||
|
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)`},
|
||||||
|
],
|
||||||
|
{ duration: 600, easing: 'ease-out' }
|
||||||
|
).onfinish = () => {
|
||||||
|
panel.addEventListener('mouseover', showPanel);
|
||||||
|
panel.addEventListener('mouseleave', hidePanel);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
panel.addEventListener('mouseover', showPanel);
|
||||||
|
panel.addEventListener('mouseleave', hidePanel);
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePanel(e) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (isLocked()) unlockPanel(true);
|
||||||
|
else lockPanel();
|
||||||
|
store().locked = panel.dataset.locked;
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPanel() {
|
||||||
|
if (!isLocked()) {
|
||||||
|
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 renderSwitcherItem(mod) {
|
||||||
|
if (mod.panel) {
|
||||||
|
const item = createElement(
|
||||||
|
`<div class="enhancer-panel--switcher-item">
|
||||||
|
<div class="enhancer-panel--icon">${mod.panel.icon}</div>
|
||||||
|
<div class="enhancer-panel--title">${mod.panel.name || mod.name}</div>
|
||||||
|
</div>`
|
||||||
|
);
|
||||||
|
item.addEventListener('click', () => loadContent(mod));
|
||||||
|
return item;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSwitcher() {
|
||||||
|
if (document.querySelector('.enhancer-panel--overlay-container')) return;
|
||||||
|
|
||||||
|
// Layer to close switcher
|
||||||
|
const overlayContainer = createElement(
|
||||||
|
'<div class="enhancer-panel--overlay-container"></div>'
|
||||||
|
);
|
||||||
|
overlayContainer.addEventListener('click', hideSwitcher)
|
||||||
|
document.querySelector('.notion-app-inner').appendChild(overlayContainer);
|
||||||
|
|
||||||
|
// Position switcher below header
|
||||||
|
const rect = header.getBoundingClientRect();
|
||||||
|
const div = createElement(`
|
||||||
|
<div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px; width: ${rect.width}px; height: ${rect.height}px ">
|
||||||
|
<div style="position: relative; top: 100%; pointer-events: auto;"></div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
// Render switcher
|
||||||
|
const switcher = createElement(
|
||||||
|
'<div class="enhancer-panel--switcher"></div>'
|
||||||
|
);
|
||||||
|
panelMods.forEach(mod =>
|
||||||
|
switcher.append(renderSwitcherItem(mod))
|
||||||
|
);
|
||||||
|
|
||||||
|
overlayContainer.appendChild(div);
|
||||||
|
div.firstElementChild.appendChild(switcher);
|
||||||
|
|
||||||
|
// Fade in
|
||||||
|
switcher.animate(
|
||||||
|
[ {opacity: 0}, {opacity: 1} ],
|
||||||
|
{ duration: 200 }
|
||||||
|
);
|
||||||
|
|
||||||
|
// Prevent panel from closing if unlocked
|
||||||
|
panel.removeEventListener('mouseleave', hidePanel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideSwitcher() {
|
||||||
|
const overlayContainer = document.querySelector('.enhancer-panel--overlay-container');
|
||||||
|
overlayContainer.removeEventListener('click', hideSwitcher);
|
||||||
|
|
||||||
|
// Fade out
|
||||||
|
document.querySelector('.enhancer-panel--switcher').animate(
|
||||||
|
[ {opacity: 1}, {opacity: 0} ],
|
||||||
|
{ duration: 200 }
|
||||||
|
).onfinish = () => overlayContainer.remove();
|
||||||
|
|
||||||
|
if (!isLocked()) panel.addEventListener('mouseleave', hidePanel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPanelWidth(width) {
|
||||||
|
store().width = width;
|
||||||
|
panel.style.width = width + 'px';
|
||||||
|
|
||||||
|
if (isLocked()) {
|
||||||
|
container.style.width = width + 'px';
|
||||||
|
frame.style.paddingRight = width + 'px';
|
||||||
|
panel.style.right = 0;
|
||||||
|
} else {
|
||||||
|
container.style.width = 0;
|
||||||
|
frame.style.paddingRight = 0;
|
||||||
|
panel.style.right = width + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function enableResize() {
|
||||||
|
const handle = resize.firstElementChild;
|
||||||
|
handle.addEventListener('mousedown', initDrag);
|
||||||
|
|
||||||
|
let startX, startWidth;
|
||||||
|
const div = createElement(
|
||||||
|
'<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;"></div>'
|
||||||
|
);
|
||||||
|
|
||||||
|
function initDrag(e) {
|
||||||
|
startX = e.clientX;
|
||||||
|
startWidth = store().width;
|
||||||
|
|
||||||
|
panel.appendChild(div);
|
||||||
|
|
||||||
|
// 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';
|
||||||
|
|
||||||
|
handle.style.cursor = '';
|
||||||
|
// Prevent panel from closing if unlocked
|
||||||
|
panel.removeEventListener('mouseleave', hidePanel);
|
||||||
|
|
||||||
|
document.body.addEventListener('mousemove', drag);
|
||||||
|
document.body.addEventListener('mouseup', stopDrag);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drag(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let width = startWidth + (startX - e.clientX);
|
||||||
|
if (width < 190) width = 190;
|
||||||
|
if (width > 480) width = 480;
|
||||||
|
setPanelWidth(width);
|
||||||
|
|
||||||
|
if (curPanel.js && curPanel.js.onResize) {
|
||||||
|
curPanel.js.onResize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopDrag() {
|
||||||
|
handle.style.cursor = 'col-resize';
|
||||||
|
panel.removeChild(div);
|
||||||
|
|
||||||
|
// Reset transitions
|
||||||
|
container.style.transition =
|
||||||
|
panel.style.transition =
|
||||||
|
frame.style.transition = '';
|
||||||
|
|
||||||
|
if (!isLocked()) panel.addEventListener('mouseleave', hidePanel);
|
||||||
|
|
||||||
|
document.body.removeEventListener('mousemove', drag);
|
||||||
|
document.body.removeEventListener('mouseup', stopDrag);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isLocked() {
|
||||||
|
if (panel.dataset.locked === 'true') return true;
|
||||||
|
else return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user