dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-19 19:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

use svg icon files instead of defining them inline

Browse Source
This commit is contained in:
CloudHill 2020-11-26 18:38:09 +07:00
parent f74eda48b5
commit 2d484526b4
4 changed files with 69 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
mods/side-panel/icons/double-chevron.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 250 B

3
mods/side-panel/icons/reload.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 277 B

3
mods/side-panel/icons/switcher.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 596 B

107
mods/side-panel/mod.js
View File

@ -20,6 +20,14 @@ module.exports = {
author: 'CloudHill', author: 'CloudHill',
hacks: { hacks: {
'renderer/preload.js'(store, __exports) { '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 // Load panel mods
let panelMods = getEnhancements().loaded.filter(mod => let panelMods = getEnhancements().loaded.filter(mod =>
(mod.panel && (store('mods')[mod.id] || {}).enabled) (mod.panel && (store('mods')[mod.id] || {}).enabled)
@ -31,29 +39,28 @@ module.exports = {
try { try {
if (typeof mod.panel === 'object') { if (typeof mod.panel === 'object') {
// html // html
mod.panelHtml = await fs.readFile( mod.panel.html = await fs.readFile(
path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`) path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`)
); );
// name // name
if (!mod.panel.name) mod.panel.name = mod.name; if (!mod.panel.name) mod.panel.name = mod.name;
// icon // icon
mod.panelIcon = mod.panel.name[0];
if (mod.panel.icon) { if (mod.panel.icon) {
const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`); const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`);
if (await fs.pathExists(iconPath)) if (await fs.pathExists(iconPath))
mod.panelIcon = await fs.readFile(iconPath); mod.panel.icon = await fs.readFile(iconPath);
} else {
mod.panel.icon = mod.panel.name[0];
} }
// js // js
if (mod.panel.js) { if (mod.panel.js) {
const jsPath = `../${mod.dir}/${mod.panel.js}`; const jsPath = `../${mod.dir}/${mod.panel.js}`;
if (await fs.pathExists(path.resolve(__dirname, jsPath))) if (await fs.pathExists(path.resolve(__dirname, jsPath)))
mod.panelJs = jsPath; mod.panel.js = require(jsPath)(store(mod.id));
} }
// fullHeight
if (mod.panel.fullHeight) mod.panelFullHeight = mod.panel.fullHeight;
} else if (typeof mod.panel === 'string') { } else if (typeof mod.panel === 'string') {
mod.panelIcon = mod.name[0]; mod.panel.icon = mod.name[0];
mod.panelHtml = await fs.readFile( mod.panel.html = await fs.readFile(
path.resolve(__dirname, `../${mod.dir}/${mod.panel}`) path.resolve(__dirname, `../${mod.dir}/${mod.panel}`)
); );
} else throw Error; } else throw Error;
@ -66,9 +73,10 @@ module.exports = {
document.addEventListener('readystatechange', (event) => { document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false; if (document.readyState !== 'complete') return false;
if (panelMods.length < 1) return; if (panelMods.length < 1) return;
const attempt_interval = setInterval(enhance, 500); const attempt_interval = setInterval(enhance, 500);
function enhance() { function enhance() {
let curPanelJs; let curPanel = {};
const frame = document.querySelector('.notion-frame'); const frame = document.querySelector('.notion-frame');
if (!frame) return; if (!frame) return;
@ -77,10 +85,10 @@ module.exports = {
// Initialize panel // Initialize panel
const container = createElement( const container = createElement(
'<div class="enhancer-panel--container"></div>' '<div class="enhancer-panel--container"></div>'
) );
const panel = createElement( const panel = createElement(
`<div id="enhancer-panel"></div>` `<div id="enhancer-panel"></div>`
) );
frame.after(container); frame.after(container);
container.appendChild(panel); container.appendChild(panel);
@ -91,23 +99,18 @@ module.exports = {
<div class="enhancer-panel--icon"></div> <div class="enhancer-panel--icon"></div>
<div class="enhancer-panel--title"></div> <div class="enhancer-panel--title"></div>
</div> </div>
`) `);
const toggle = createElement(` const toggle = createElement(
<div class="enhancer-panel--toggle"> `<div class="enhancer-panel--toggle">${icons.doubleChevron}</div>`
<svg viewBox="0 0 14 14" class="doubleChevron"> );
<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">
</path>
</svg>
</div>
`)
const content = createElement( const content = createElement(
'<div id="enhancer-panel--content"></div>' '<div id="enhancer-panel--content"></div>'
) );
const resize = createElement(` const resize = createElement(`
<div class="enhancer-panel--resize"> <div class="enhancer-panel--resize">
<div style="cursor: col-resize;"></div> <div style="cursor: col-resize;"></div>
</div> </div>
`) `);
panel.append(header, content, resize); panel.append(header, content, resize);
@ -115,14 +118,9 @@ module.exports = {
if (panelMods.length > 1) { if (panelMods.length > 1) {
header.addEventListener('click', renderSwitcher); header.addEventListener('click', renderSwitcher);
const switcherIcon = createElement(` const switcherIcon = createElement(
<div class="enhancer-panel--switcher-icon"> `<div class="enhancer-panel--switcher-icon">${icons.switcher}</div>`
<svg viewBox="-1 -1 9 11" class="expand"> )
<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">
</path>
</svg>
</div>
`)
header.appendChild(switcherIcon); header.appendChild(switcherIcon);
} else header.addEventListener('click', togglePanel); } else header.addEventListener('click', togglePanel);
@ -150,23 +148,32 @@ module.exports = {
} }
function loadContent(mod) { function loadContent(mod) {
if (curPanelJs && curPanelJs.onSwitch) curPanelJs.onSwitch(); if (curPanel.js && curPanel.js.onSwitch) curPanel.js.onSwitch();
curPanel = mod.panel;
if (mod.panelJs) {
curPanelJs = require(mod.panelJs)(store(mod.id));
} else curPanelJs = null;
store().last_open = mod.id; store().last_open = mod.id;
panel.querySelector('.enhancer-panel--title').innerText = mod.panel.name || mod.name; panel.querySelector('.enhancer-panel--title').innerHTML = mod.panel.name || mod.name;
panel.querySelector('.enhancer-panel--icon').innerHTML = mod.panelIcon;
document.getElementById('enhancer-panel--content').innerHTML = mod.panelHtml;
if (mod.panelFullHeight) { // reload button
panel.dataset.fullHeight = mod.panelFullHeight; let reloadButton = document.querySelector('.enhancer-panel--reload-button');
} else panel.dataset.fullHeight = ''; 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);
}
if (curPanelJs && curPanelJs.onLoad) panel.querySelector('.enhancer-panel--icon').innerHTML = mod.panel.icon;
curPanelJs.onLoad(); 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) { function unlockPanel(animate) {
@ -192,8 +199,8 @@ module.exports = {
hidePanel(); hidePanel();
if (curPanelJs && curPanelJs.onUnlock) { if (curPanel.js && curPanel.js.onUnlock) {
curPanelJs.onUnlock(); curPanel.js.onUnlock();
} }
} }
@ -209,8 +216,8 @@ module.exports = {
panel.removeEventListener('mouseover', showPanel); panel.removeEventListener('mouseover', showPanel);
panel.removeEventListener('mouseleave', hidePanel); panel.removeEventListener('mouseleave', hidePanel);
if (curPanelJs && curPanelJs.onLock) { if (curPanel.js && curPanel.js.onLock) {
curPanelJs.onLock(); curPanel.js.onLock();
} }
} }
@ -239,7 +246,7 @@ module.exports = {
if (mod.panel) { if (mod.panel) {
const item = createElement( const item = createElement(
`<div class="enhancer-panel--switcher-item"> `<div class="enhancer-panel--switcher-item">
<div class="enhancer-panel--icon">${mod.panelIcon}</div> <div class="enhancer-panel--icon">${mod.panel.icon}</div>
<div class="enhancer-panel--title">${mod.panel.name || mod.name}</div> <div class="enhancer-panel--title">${mod.panel.name || mod.name}</div>
</div>` </div>`
); );
@ -350,8 +357,8 @@ module.exports = {
if (width > 480) width = 480; if (width > 480) width = 480;
setPanelWidth(width); setPanelWidth(width);
if (curPanelJs && curPanelJs.onResize) { if (curPanel.js && curPanel.js.onResize) {
curPanelJs.onResize(); curPanel.js.onResize();
} }
} }