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

menu options: toggles + selects

Browse Source
This commit is contained in:
dragonwocky 2020-08-04 15:32:04 +10:00
parent 4e953c198d
commit d40462aa1b
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
11 changed files with 667 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
DOCUMENTATION.md
View File

@ -41,12 +41,12 @@ module.exports = {
desc: String of markdown, desc: String of markdown,
version: String of semver, version: String of semver,
author: String of github_username, author: String of github_username,
options?: { options?: Array<{
key: String, key: String,
label: String, label: String,
type: String in ['toggle', 'select', 'input', 'file'], type: String in ['toggle', 'select', 'input', 'file'],
value: Boolean or Array<String> or String or null value: Boolean or Array<String> or String or null
}, }>,
hacks?: { hacks?: {
[k: 'insert-point' (e.g. 'main/createWindow.js')]: function (store) {} [k: 'insert-point' (e.g. 'main/createWindow.js')]: function (store) {}
} }
@ -87,7 +87,7 @@ each "hack" is a function taking 2 arguments.
1. the **`store`** argument, which allows access to the module 1. the **`store`** argument, which allows access to the module
settings/options defined in `mod.js` (those set in the menu, or used internally by the module). settings/options defined in `mod.js` (those set in the menu, or used internally by the module).
each module store is automatically saved to + loaded from `~/.notion-enhancer/id.json`. each module store is automatically saved to + loaded from `~/.notion-enhancer/id.json`.
it can be initialised with `const settings = store({ defaults })`, then used as if it were a normal object. it can be initialised/accessed with `store({ defaults })`, then used as if it were a normal object.
2. the **`__exports`** argument, which is the `module.exports` of the file being modded. 2. the **`__exports`** argument, which is the `module.exports` of the file being modded.
this can be used to call or replace functions from notion. this can be used to call or replace functions from notion.
@ -109,8 +109,7 @@ e.g.
module.exports = function (store, __exports) { module.exports = function (store, __exports) {
document.addEventListener('readystatechange', (event) => { document.addEventListener('readystatechange', (event) => {
if (document.readyState !== 'complete') return false; if (document.readyState !== 'complete') return false;
const settings = store({ name: 'dragonwocky' }); console.log(store({ name: 'dragonwocky' }).name);
console.log(settings.name);
}); });
}; };
// mod.js // mod.js

169
mods/core/buttons.js
View File

@ -6,93 +6,96 @@
'use strict'; 'use strict';
const __mod = require('./mod.js'), module.exports = (store) => {
store = require('../../pkg/store.js'), const path = require('path'),
settings = store(__mod.id, __mod.defaults), fs = require('fs-extra'),
path = require('path'), browser = require('electron').remote.getCurrentWindow(),
fs = require('fs-extra'), is_mac = process.platform === 'darwin',
browser = require('electron').remote.getCurrentWindow(), buttons = {
is_mac = process.platform === 'darwin', element: document.createElement('div'),
buttons = { insert: [
element: document.createElement('div'), 'alwaysontop',
insert: [ ...(store().frameless && !is_mac
'alwaysontop', ? ['minimize', 'maximize', 'close']
...(settings.frameless && !is_mac : []),
? ['minimize', 'maximize', 'close'] ],
: []), icons: {
], raw: {
icons: { alwaysontop: {
raw: { on: fs.readFile(
alwaysontop: { path.resolve(`${__dirname}/icons/alwaysontop_on.svg`)
on: fs.readFile( ),
path.resolve(`${__dirname}/icons/alwaysontop_on.svg`) off: fs.readFile(
), path.resolve(`${__dirname}/icons/alwaysontop_off.svg`)
off: fs.readFile( ),
path.resolve(`${__dirname}/icons/alwaysontop_off.svg`) },
minimize: fs.readFile(
path.resolve(`${__dirname}/icons/minimize.svg`)
), ),
maximize: {
on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)),
off: fs.readFile(
path.resolve(`${__dirname}/icons/maximize_off.svg`)
),
},
close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
}, },
minimize: fs.readFile(path.resolve(`${__dirname}/icons/minimize.svg`)), alwaysontop() {
maximize: { return browser.isAlwaysOnTop()
on: fs.readFile(path.resolve(`${__dirname}/icons/maximize_on.svg`)), ? buttons.icons.raw.alwaysontop.on
off: fs.readFile(path.resolve(`${__dirname}/icons/maximize_off.svg`)), : buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛'
},
minimize() {
return buttons.icons.raw.minimize; // '⚊'
},
maximize() {
return browser.isMaximized()
? buttons.icons.raw.maximize.on
: buttons.icons.raw.maximize.off; // '🗗' : '🗖'
},
close() {
return buttons.icons.raw.close; // '⨉'
}, },
close: fs.readFile(path.resolve(`${__dirname}/icons/close.svg`)),
}, },
alwaysontop() { actions: {
return browser.isAlwaysOnTop() async alwaysontop() {
? buttons.icons.raw.alwaysontop.on browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
: buttons.icons.raw.alwaysontop.off; // '🠙' : '🠛' this.innerHTML = await buttons.icons.alwaysontop();
},
minimize() {
browser.minimize();
},
async maximize() {
browser.isMaximized() ? browser.unmaximize() : browser.maximize();
this.innerHTML = await buttons.icons.maximize();
},
close() {
browser.close();
},
}, },
minimize() { };
return buttons.icons.raw.minimize; // '⚊'
},
maximize() {
return browser.isMaximized()
? buttons.icons.raw.maximize.on
: buttons.icons.raw.maximize.off; // '🗗' : '🗖'
},
close() {
return buttons.icons.raw.close; // '⨉'
},
},
actions: {
async alwaysontop() {
browser.setAlwaysOnTop(!browser.isAlwaysOnTop());
this.innerHTML = await buttons.icons.alwaysontop();
},
minimize() {
browser.minimize();
},
async maximize() {
browser.isMaximized() ? browser.unmaximize() : browser.maximize();
this.innerHTML = await buttons.icons.maximize();
},
close() {
browser.close();
},
},
};
(async () => { (async () => {
buttons.element.className = 'window-buttons-area'; buttons.element.className = 'window-buttons-area';
for (let btn of buttons.insert) { for (let btn of buttons.insert) {
buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[ buttons.element.innerHTML += `<button class="window-button" id="btn-${btn}">${await buttons.icons[
btn btn
]()}</button>`; ]()}</button>`;
setTimeout( setTimeout(
() => () =>
(document.querySelector(`.window-button#btn-${btn}`).onclick = (document.querySelector(`.window-button#btn-${btn}`).onclick =
buttons.actions[btn]), buttons.actions[btn]),
10 10
); );
} }
if (settings.frameless && !is_mac) { if (store().frameless && !is_mac) {
setInterval(async () => { setInterval(async () => {
const icon = (await buttons.icons.maximize()).toString(), const icon = (await buttons.icons.maximize()).toString(),
el = buttons.element.querySelector('#btn-maximize'); el = buttons.element.querySelector('#btn-maximize');
if (el.innerHTML != icon) el.innerHTML = icon; if (el.innerHTML != icon) el.innerHTML = icon;
}, 100); }, 100);
} }
})(); })();
module.exports = buttons; return buttons;
};

218
mods/core/client.js
View File

@ -7,125 +7,123 @@
'use strict'; 'use strict';
module.exports = (defaults) => module.exports = (store, __exports) => {
function (store, __exports) { const electron = require('electron'),
const electron = require('electron'), helpers = require('../../pkg/helpers.js'),
settings = store(defaults), __notion = helpers.getNotion(),
helpers = require('../../pkg/helpers.js'), notionIpc = require(`${__notion.replace(
__notion = helpers.getNotion(), /\\/g,
notionIpc = require(`${__notion.replace( '/'
/\\/g, )}/app/helpers/notionIpc.js`);
'/'
)}/app/helpers/notionIpc.js`);
// additional hotkeys // additional hotkeys
document.defaultView.addEventListener('keyup', (event) => { document.defaultView.addEventListener('keyup', (event) => {
if (event.code === 'F5') window.reload(); if (event.code === 'F5') window.reload();
if (event.key === 'e' && (event.ctrlKey || event.metaKey)) if (event.key === 'e' && (event.ctrlKey || event.metaKey))
electron.ipcRenderer.send('enhancer:open-extension-menu'); electron.ipcRenderer.send('enhancer:open-extension-menu');
}); });
const attempt_interval = setInterval(enhance, 500); const attempt_interval = setInterval(enhance, 500);
async function enhance() { async function enhance() {
if (!document.querySelector('.notion-frame')) return; if (!document.querySelector('.notion-frame')) return;
clearInterval(attempt_interval); clearInterval(attempt_interval);
// scrollbars // scrollbars
if (settings.smooth_scrollbars) { if (store().smooth_scrollbars) {
document.body.classList.add('smooth-scrollbars'); document.body.classList.add('smooth-scrollbars');
// interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100); // interval_attempts.patchScrollbars = setInterval(patchScrollbars, 100);
// function patchScrollbars() { // function patchScrollbars() {
// const sidebar = document.querySelector( // const sidebar = document.querySelector(
// '.notion-scroller.vertical[style*="overflow: hidden auto;"]' // '.notion-scroller.vertical[style*="overflow: hidden auto;"]'
// ); // );
// if (!sidebar) return; // if (!sidebar) return;
// clearInterval(interval_attempts.patchScrollbars); // clearInterval(interval_attempts.patchScrollbars);
// sidebar.style.overflow = ''; // sidebar.style.overflow = '';
// setTimeout(() => { // setTimeout(() => {
// sidebar.style.overflow = 'hidden auto'; // sidebar.style.overflow = 'hidden auto';
// }, 10); // }, 10);
// } // }
} }
// frameless // frameless
if (settings.frameless) { if (store().frameless) {
document.body.classList.add('frameless'); document.body.classList.add('frameless');
// draggable area // draggable area
const dragarea = document.createElement('div'); const dragarea = document.createElement('div');
dragarea.className = 'window-dragarea'; dragarea.className = 'window-dragarea';
document.querySelector('.notion-topbar').prepend(dragarea); document.querySelector('.notion-topbar').prepend(dragarea);
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'--configured-dragarea_height', '--configured-dragarea_height',
`${settings.dragarea_height + 2}px` `${store().dragarea_height + 2}px`
); );
} }
// window buttons // window buttons
const buttons = require('./buttons.js'); const buttons = require('./buttons.js')(store);
document document
.querySelector('.notion-topbar > div[style*="display: flex"]') .querySelector('.notion-topbar > div[style*="display: flex"]')
.appendChild(buttons.element); .appendChild(buttons.element);
document document
.querySelector('.notion-history-back-button') .querySelector('.notion-history-back-button')
.parentElement.nextElementSibling.classList.add( .parentElement.nextElementSibling.classList.add(
'notion-topbar-breadcrumb' 'notion-topbar-breadcrumb'
); );
document document
.querySelector('.notion-topbar-share-menu') .querySelector('.notion-topbar-share-menu')
.parentElement.classList.add('notion-topbar-actions'); .parentElement.classList.add('notion-topbar-actions');
let sidebar_width; let sidebar_width;
function communicationLoop() { function communicationLoop() {
const getStyle = (prop) => const getStyle = (prop) =>
getComputedStyle(document.body).getPropertyValue(prop), getComputedStyle(document.body).getPropertyValue(prop),
mode = JSON.parse(localStorage.theme).mode; mode = JSON.parse(localStorage.theme).mode;
// ctrl+f theming // ctrl+f theming
notionIpc.sendNotionToIndex('search:set-theme', { notionIpc.sendNotionToIndex('search:set-theme', {
'mode': mode, 'mode': mode,
'colors': { 'colors': {
'white': getStyle(`--theme_${mode}--todo_ticked-fill`), 'white': getStyle(`--theme_${mode}--todo_ticked-fill`),
'blue': getStyle(`--theme_${mode}--primary`), 'blue': getStyle(`--theme_${mode}--primary`),
}, },
'borderRadius': 3, 'borderRadius': 3,
'textColor': getStyle(`--theme_${mode}--text`), 'textColor': getStyle(`--theme_${mode}--text`),
'popoverBackgroundColor': getStyle(`--theme_${mode}--card`), 'popoverBackgroundColor': getStyle(`--theme_${mode}--card`),
'popoverBoxShadow': `0 0 0 1px ${getStyle( 'popoverBoxShadow': `0 0 0 1px ${getStyle(
`--theme_${mode}--overlay` `--theme_${mode}--overlay`
)}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`, )}, 0 3px 6px ${getStyle(`--theme_${mode}--overlay`)}`,
'inputBoxShadow': `box-shadow: ${getStyle( 'inputBoxShadow': `box-shadow: ${getStyle(
`--theme_${mode}--primary` `--theme_${mode}--primary`
)} 0px 0px 0px 1px inset, ${getStyle( )} 0px 0px 0px 1px inset, ${getStyle(
`--theme_${mode}--primary_hover` `--theme_${mode}--primary_hover`
)} 0px 0px 0px 2px !important`, )} 0px 0px 0px 2px !important`,
'inputBackgroundColor': getStyle(`--theme_${mode}--main`), 'inputBackgroundColor': getStyle(`--theme_${mode}--main`),
'dividerColor': getStyle(`--theme_${mode}--table-border`), 'dividerColor': getStyle(`--theme_${mode}--table-border`),
'shadowOpacity': 0.2, 'shadowOpacity': 0.2,
}); });
// enhancer menu // enhancer menu
electron.ipcRenderer.send('enhancer:set-theme', { electron.ipcRenderer.send('enhancer:set-theme', {
mode, mode,
rules: require('./css/variables.json').map((rule) => [ rules: require('./css/variables.json').map((rule) => [
rule, rule,
getStyle(rule), getStyle(rule),
]), ]),
}); });
// draggable area resizing // draggable area resizing
const sidebar = document.querySelector('.notion-sidebar'); const sidebar = document.querySelector('.notion-sidebar');
if (settings.frameless && sidebar) { if (store().frameless && sidebar) {
let new_sidebar_width = let new_sidebar_width =
sidebar.style.height === 'auto' ? '0px' : sidebar.style.width; sidebar.style.height === 'auto' ? '0px' : sidebar.style.width;
if (sidebar_width !== new_sidebar_width) { if (sidebar_width !== new_sidebar_width) {
sidebar_width = new_sidebar_width; sidebar_width = new_sidebar_width;
electron.ipcRenderer.sendToHost( electron.ipcRenderer.sendToHost(
'enhancer:sidebar-width', 'enhancer:sidebar-width',
sidebar_width sidebar_width
); );
}
} }
} }
setInterval(communicationLoop, 500);
} }
}; setInterval(communicationLoop, 500);
}
};

150
mods/core/create.js
View File

@ -7,84 +7,78 @@
'use strict'; 'use strict';
module.exports = (defaults) => module.exports = (store, __exports) => {
function (store, __exports) { const electron = require('electron'),
const electron = require('electron'), allWindows = () =>
allWindows = () => electron.BrowserWindow.getAllWindows().filter(
electron.BrowserWindow.getAllWindows().filter( (win) => win.getTitle() !== 'notion-enhancer menu'
(win) => win.getTitle() !== 'notion-enhancer menu' ),
), // createWindow = __exports.createWindow,
// createWindow = __exports.createWindow, path = require('path'),
path = require('path'), helpers = require('../../pkg/helpers.js'),
settings = store(defaults), __notion = helpers.getNotion();
helpers = require('../../pkg/helpers.js'),
__notion = helpers.getNotion();
__exports.createWindow = function (relativeUrl) { __exports.createWindow = function (relativeUrl) {
if (!relativeUrl) relativeUrl = ''; if (!relativeUrl) relativeUrl = '';
const window_state = require(`${__notion.replace( const window_state = require(`${__notion.replace(
/\\/g, /\\/g,
'/' '/'
)}/app/node_modules/electron-window-state/index.js`)({ )}/app/node_modules/electron-window-state/index.js`)({
defaultWidth: 1320, defaultWidth: 1320,
defaultHeight: 860, defaultHeight: 860,
}), }),
rect = { rect = {
x: window_state.x, x: window_state.x,
y: window_state.y, y: window_state.y,
width: window_state.width, width: window_state.width,
height: window_state.height, height: window_state.height,
}, },
focused_window = electron.BrowserWindow.getFocusedWindow(); focused_window = electron.BrowserWindow.getFocusedWindow();
if (focused_window && !focused_window.isMaximized()) { if (focused_window && !focused_window.isMaximized()) {
rect.x = focused_window.getPosition()[0] + 20; rect.x = focused_window.getPosition()[0] + 20;
rect.y = focused_window.getPosition()[1] + 20; rect.y = focused_window.getPosition()[1] + 20;
rect.width = focused_window.getSize()[0]; rect.width = focused_window.getSize()[0];
rect.height = focused_window.getSize()[1]; rect.height = focused_window.getSize()[1];
}
const window = new electron.BrowserWindow({
show: false,
backgroundColor: '#ffffff',
titleBarStyle: 'hiddenInset',
frame: !store().frameless,
webPreferences: {
preload: path.resolve(`${__notion}/app/renderer/index.js`),
webviewTag: true,
session: electron.session.fromPartition('persist:notion'),
},
...rect,
});
window.once('ready-to-show', function () {
if (
!store().openhidden ||
allWindows().some((win) => win.isVisible() && win.id != window.id)
) {
window.show();
window.focus();
if (store().maximized) window.maximize();
if (
(focused_window && focused_window.isFullScreen()) ||
window_state.isFullScreen
)
window.setFullScreen(true);
} }
const window = new electron.BrowserWindow({ });
show: false, let intended_quit = false;
backgroundColor: '#ffffff', window.on('close', (e) => {
titleBarStyle: 'hiddenInset', if (intended_quit || !store().close_to_tray || allWindows().length > 1) {
frame: !settings.frameless, window_state.saveState(window);
webPreferences: { window = null;
preload: path.resolve(`${__notion}/app/renderer/index.js`), } else {
webviewTag: true, e.preventDefault();
session: electron.session.fromPartition('persist:notion'), window.hide();
}, }
...rect, });
}); electron.app.on('before-quit', () => (intended_quit = true));
window.once('ready-to-show', function () { window.loadURL(__exports.getIndexUrl(relativeUrl));
if ( return window;
!settings.openhidden ||
allWindows().some((win) => win.isVisible() && win.id != window.id)
) {
window.show();
window.focus();
if (settings.maximized) window.maximize();
if (
(focused_window && focused_window.isFullScreen()) ||
window_state.isFullScreen
)
window.setFullScreen(true);
}
});
let intended_quit = false;
window.on('close', (e) => {
if (
intended_quit ||
!settings.close_to_tray ||
allWindows().length > 1
) {
window_state.saveState(window);
window = null;
} else {
e.preventDefault();
window.hide();
}
});
electron.app.on('before-quit', () => (intended_quit = true));
window.loadURL(__exports.getIndexUrl(relativeUrl));
return window;
};
}; };
};

49
mods/core/css/menu.css
View File

@ -60,7 +60,6 @@ main {
} }
main section { main section {
border-radius: 2px; border-radius: 2px;
padding: 0.75em;
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
@ -118,6 +117,7 @@ s {
#alerts [role='alert'] { #alerts [role='alert'] {
display: flex; display: flex;
padding: 0.75em;
} }
#alerts [role='alert']::before { #alerts [role='alert']::before {
content: '!'; content: '!';
@ -180,6 +180,12 @@ s {
background: var(--theme_local--sidebar); background: var(--theme_local--sidebar);
border: 1px solid var(--theme_local--table-border); border: 1px solid var(--theme_local--table-border);
} }
#modules section > div {
padding: 0.75em;
}
.notion-light-theme #modules section {
background: var(--theme_local--main);
}
#modules section h3, #modules section h3,
#modules section p { #modules section p {
@ -187,6 +193,13 @@ s {
font-size: 1rem; font-size: 1rem;
} }
/* #modules section .meta .toggle input + label .switch:before {
background: linear-gradient(
90deg,
var(--theme_local--text_green),
var(--theme_local--bg_green)
);
} */
#modules section .desc { #modules section .desc {
margin: 0.3em 0 0.4em 0; margin: 0.3em 0 0.4em 0;
font-size: 0.9em; font-size: 0.9em;
@ -236,19 +249,51 @@ s {
/* module options */ /* module options */
#modules .disabled .options {
display: none;
}
#modules section .options {
border-top: 1px solid var(--theme_local--table-border);
background: var(--theme_local--card);
}
#modules section .options p {
font-size: 0.9em;
}
#modules section .options p:not(:last-child) {
padding-bottom: 0.5em;
border-bottom: 0.5px solid var(--theme_local--table-border);
margin-bottom: 0.5em;
}
select {
width: 100%;
margin: 0.25em 0;
font-size: 0.9rem;
padding: 0.4rem 0.2rem;
border: none;
color: var(--theme_local--text);
background: var(--theme_local--main);
}
.toggle * { .toggle * {
cursor: pointer; cursor: pointer;
} }
.toggle input { .toggle input {
display: none; display: none;
} }
.toggle input + label {
display: flex;
}
.toggle input + label .name {
flex-basis: calc(100% - 2.25em);
}
.toggle input + label .switch { .toggle input + label .switch {
position: relative; position: relative;
margin-top: 0.5em; margin-top: 0.5em;
float: right; float: right;
height: 0.65em; height: 0.65em;
width: 2em; width: 2em;
background: var(--theme_local--card); background: var(--theme_local--main);
border-radius: 5px; border-radius: 5px;
} }
.toggle input + label .switch:before { .toggle input + label .switch:before {

146
mods/core/menu.js
View File

@ -6,14 +6,13 @@
'use strict'; 'use strict';
const __mod = require('./mod.js'), const store = require('../../pkg/store.js'),
store = require('../../pkg/store.js'),
helpers = require('../../pkg/helpers.js'), helpers = require('../../pkg/helpers.js'),
electron = require('electron'), electron = require('electron'),
browser = electron.remote.getCurrentWindow(); browser = electron.remote.getCurrentWindow();
window['__start'] = async () => { window['__start'] = async () => {
const buttons = require('./buttons.js'); const buttons = require('./buttons.js')(() => ({ frameless: true }));
document.querySelector('#menu-titlebar').appendChild(buttons.element); document.querySelector('#menu-titlebar').appendChild(buttons.element);
document.defaultView.addEventListener('keyup', (event) => { document.defaultView.addEventListener('keyup', (event) => {
@ -61,10 +60,11 @@ window['__start'] = async () => {
) )
.then((res) => res.json()) .then((res) => res.json())
.then((res) => { .then((res) => {
const version = { const raw_v = require('./mod.js').version,
local: __mod.version.split(/[~-]/g)[0], version = {
repo: res.tag_name.slice(1), local: raw_v.split(/[~-]/g)[0],
}; repo: res.tag_name.slice(1),
};
if (version.local == version.repo) return; if (version.local == version.repo) return;
// compare func from https://github.com/substack/semver-compare // compare func from https://github.com/substack/semver-compare
version.sorted = [version.local, version.repo].sort((a, b) => { version.sorted = [version.local, version.repo].sort((a, b) => {
@ -87,7 +87,7 @@ window['__start'] = async () => {
run <code>npm i -g notion-enhancer</code><br> run <code>npm i -g notion-enhancer</code><br>
(or <code>yarn global add notion-enhancer</code>),<br> (or <code>yarn global add notion-enhancer</code>),<br>
<u>and</u> <code>notion-enhancer apply</code>.` <u>and</u> <code>notion-enhancer apply</code>.`
: `local build <b>v${__mod.version}</b> is unstable.` : `local build <b>v${raw_v}</b> is unstable.`
).prepend(); ).prepend();
}); });
@ -108,13 +108,12 @@ window['__start'] = async () => {
).append(); ).append();
} }
// mod options // mod info + options
function markdown(string) { function markdown(string) {
const parsed = string const parsed = string
.split('\n') .split('\n')
.map((line) => .map((line) =>
line line
// todo: stop e.g. whole chunk of ~~thin~~g~~ being selected
.trim() .trim()
.replace(/\s+/g, ' ') .replace(/\s+/g, ' ')
// > quote // > quote
@ -148,56 +147,121 @@ window['__start'] = async () => {
.join(''); .join('');
return parsed; return parsed;
} }
let modified_notice;
function modified() {
if (modified_notice) return;
modified_notice = createAlert(
'info',
`changes may not apply until app restart.`
);
modified_notice.append();
}
const $modules = document.querySelector('#modules'); const $modules = document.querySelector('#modules');
for (let mod of modules.loaded.sort((a, b) => { for (let mod of modules.loaded.sort((a, b) =>
return a.tags.includes('core') || a.tags.includes('core') ||
store('mods', { [a.id]: { pinned: false } }).pinned store('mods', { [a.id]: { pinned: false } }).pinned
? -1 ? -1
: b.tags.includes('core') || : b.tags.includes('core') ||
store('mods', { [b.id]: { pinned: false } }).pinned store('mods', { [b.id]: { pinned: false } }).pinned
? 1 ? 1
: a.name.localeCompare(b.name); : a.name.localeCompare(b.name)
})) { )) {
const menuStore = store('mods', { [mod.id]: { enabled: false } }); const menuStore = store('mods', { [mod.id]: { enabled: false } });
mod.store = store(mod.id);
mod.elem = createElement(` mod.elem = createElement(`
<section class="${ <section class="${
mod.tags.includes('core') || menuStore[mod.id].enabled mod.tags.includes('core') || menuStore[mod.id].enabled
? 'enabled' ? 'enabled'
: 'disabled' : 'disabled'
}" id="${mod.id}"> }" id="${mod.id}">
<h3 ${ <div class="meta">
mod.tags.includes('core') <h3 ${
? `>${mod.name}` mod.tags.includes('core')
: `class="toggle"> ? `>${mod.name}`
<input type="checkbox" id="enable_${mod.id}" ${ : `class="toggle">
menuStore[mod.id].enabled ? 'checked' : '' <input type="checkbox" id="enable_${mod.id}"
} /> ${menuStore[mod.id].enabled ? 'checked' : ''} />
<label for="enable_${mod.id}"> <label for="enable_${mod.id}">
${mod.name} <span class="name">${mod.name}</span>
<div class="switch"> <span class="switch"><span class="dot"></span></span>
<div class="dot"></div> </label>`
</div> }</h3>
</label>` <p class="tags">${mod.tags
}</h3> .map((tag) => (tag.startsWith('#') ? tag : `#${tag}`))
<p class="tags">${mod.tags .join(' ')}</p>
.map((tag) => (tag.startsWith('#') ? tag : `#${tag}`)) <div class="desc">${markdown(mod.desc)}</div>
.join(' ')}</p> <p>
<div class="desc">${markdown(mod.desc)}</div> <a href="https://github.com/${mod.author}" class="author">
<p> <img src="https://github.com/${mod.author}.png" />
<a href="https://github.com/${mod.author}" class="author"> ${mod.author}
<img src="https://github.com/${mod.author}.png" /> </a>
${mod.author} <span class="version">v${mod.version}</span>
</a> </p>
<span class="version">v${mod.version}</span> </div>
</p> ${
mod.options && mod.options.length ? '<div class="options"></div>' : ''
}
</section> </section>
`); `);
const $enable = mod.elem.querySelector(`#enable_${mod.id}`); const $enable = mod.elem.querySelector(`#enable_${mod.id}`);
if ($enable) if ($enable)
$enable.addEventListener('click', (event) => { $enable.addEventListener('click', (event) => {
menuStore[mod.id].enabled = $enable.checked; menuStore[mod.id].enabled = $enable.checked;
mod.elem.className = menuStore[mod.id].enabled ? 'enabled' : 'disabled';
}); });
const $options = mod.elem.querySelector('.options');
if ($options)
for (const opt of mod.options) {
let $opt;
switch (opt.type) {
case 'toggle':
$opt = createElement(`
<p class="toggle">
<input type="checkbox" id="toggle_${mod.id}--${opt.key}"
${store(mod.id)[opt.key] ? 'checked' : ''} />
<label for="toggle_${mod.id}--${opt.key}">
<span class="name">${opt.label}</span>
<span class="switch"><span class="dot"></span></span>
</label>
</p>
`);
const $opt_checkbox = $opt.querySelector(
`#toggle_${mod.id}--${opt.key}`
);
$opt_checkbox.addEventListener('change', (event) => {
store(mod.id)[opt.key] = $opt_checkbox.checked;
modified();
});
$options.appendChild($opt);
break;
case 'select':
$opt = createElement(`
<p class="select">
<label for="select_${mod.id}--${opt.key}">${opt.label}</label>
<select id="select_${mod.id}--${opt.key}">
${opt.value
.map((val) => `<option value="${val}">${val}</option>`)
.join('')}
</select>
</p>
`);
const $opt_select = $opt.querySelector(
`#select_${mod.id}--${opt.key}`
);
$opt_select.value = store(mod.id)[opt.key];
$opt_select.addEventListener('change', (event) => {
store(mod.id)[opt.key] = $opt_select.value;
modified();
});
$options.appendChild($opt);
break;
case 'input':
break;
case 'file':
break;
}
}
$modules.append(mod.elem); $modules.append(mod.elem);
} }
}; };

64
mods/core/mod.js
View File

@ -6,16 +6,6 @@
'use strict'; 'use strict';
const defaults = {
openhidden: false,
maximized: false,
close_to_tray: true,
frameless: true,
dragarea_height: 15,
smooth_scrollbars: true,
hotkey: 'CmdOrCtrl+Shift+A',
};
module.exports = { module.exports = {
id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082', id: '0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
tags: ['core', 'extension'], tags: ['core', 'extension'],
@ -24,12 +14,54 @@ module.exports = {
![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`, ![](https://preview.redd.it/vtiw9ulqlt951.png?width=1368&format=png&auto=webp&s=733d8b27ec62151c7858b4eca463f809ead6395a)`,
version: require('../../package.json').version, version: require('../../package.json').version,
author: 'dragonwocky', author: 'dragonwocky',
options: [], options: [
{
key: 'openhidden',
label: 'hide app on open',
type: 'toggle',
value: false,
},
{
key: 'maximized',
label: 'auto-maximise windows',
type: 'toggle',
value: false,
},
{
key: 'close_to_tray',
label: 'close window to the tray',
type: 'toggle',
value: true,
},
{
key: 'frameless',
label: 'integrate titlebar into notion',
type: 'toggle',
value: true,
},
{
key: 'dragarea_height',
label: 'height of frameless dragarea',
type: 'input',
value: 15,
},
{
key: 'smooth_scrollbars',
label: 'integrate scrollbars into notion',
type: 'toggle',
value: true,
},
{
key: 'hotkey',
label: 'window display hotkey',
type: 'input',
value: 'CmdOrCtrl+Shift+A',
},
],
hacks: { hacks: {
'main/main.js': require('./tray.js')(defaults), 'main/main.js': require('./tray.js'),
'main/createWindow.js': require('./create.js')(defaults), 'main/createWindow.js': require('./create.js'),
'renderer/index.js': require('./render.js')(defaults), 'renderer/index.js': require('./render.js'),
'renderer/preload.js': require('./client.js')(defaults), 'renderer/preload.js': require('./client.js'),
}, },
defaults,
}; };

42
mods/core/render.js
View File

@ -6,28 +6,28 @@
'use strict'; 'use strict';
module.exports = (defaults) => module.exports = (store, __exports) => {
function (store, __exports) { const __start = window['__start'];
const __start = window['__start'],
settings = store(defaults);
window['__start'] = function () { window['__start'] = function () {
__start(); __start();
const dragarea = document.querySelector( const dragarea = document.querySelector(
'#root [style*="-webkit-app-region: drag"]' '#root [style*="-webkit-app-region: drag"]'
), ),
default_styles = dragarea.getAttribute('style'); default_styles = dragarea.getAttribute('style');
// document.body.innerText = document.body.innerHTML; // document.body.innerText = document.body.innerHTML;
document document
.getElementById('notion') .getElementById('notion')
.addEventListener('ipc-message', (event) => { .addEventListener('ipc-message', (event) => {
if (event.channel !== 'enhancer:sidebar-width') return; if (event.channel !== 'enhancer:sidebar-width') return;
dragarea.setAttribute( dragarea.setAttribute(
'style', 'style',
`${default_styles} top: 2px; height: ${settings.dragarea_height}px; left: ${event.args[0]};` `${default_styles} top: 2px; height: ${
); store().dragarea_height
}); }px; left: ${event.args[0]};`
}; );
});
}; };
};

320
mods/core/tray.js
View File

@ -9,176 +9,174 @@
let tray, enhancer_menu; let tray, enhancer_menu;
module.exports = (defaults) => module.exports = (store, __exports) => {
function (store, __exports) { const electron = require('electron'),
const electron = require('electron'), path = require('path'),
path = require('path'), is_mac = process.platform === 'darwin',
is_mac = process.platform === 'darwin', is_win = process.platform === 'win32',
is_win = process.platform === 'win32', helpers = require('../../pkg/helpers.js'),
settings = store(defaults), __notion = helpers.getNotion();
helpers = require('../../pkg/helpers.js'),
__notion = helpers.getNotion();
electron.app.on('ready', () => { electron.app.on('ready', () => {
tray = new electron.Tray( tray = new electron.Tray(
is_win is_win
? path.resolve(`${__dirname}/icons/windows.ico`) ? path.resolve(`${__dirname}/icons/windows.ico`)
: new electron.nativeImage.createFromPath( : new electron.nativeImage.createFromPath(
path.resolve(`${__dirname}/icons/mac+linux.png`) path.resolve(`${__dirname}/icons/mac+linux.png`)
).resize({ ).resize({
width: 16, width: 16,
height: 16, height: 16,
}) })
); );
electron.ipcMain.on('enhancer:set-theme', (event, arg) => { electron.ipcMain.on('enhancer:set-theme', (event, arg) => {
if (!enhancer_menu) return; if (!enhancer_menu) return;
enhancer_menu.webContents.send('enhancer:set-theme', arg); enhancer_menu.webContents.send('enhancer:set-theme', arg);
});
electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu);
function calculateWindowPos(width, height) {
const screen = electron.screen.getDisplayNearestPoint({
x: tray.getBounds().x,
y: tray.getBounds().y,
}); });
electron.ipcMain.on('enhancer:open-extension-menu', openExtensionMenu); // left
if (screen.workArea.x > 0)
function calculateWindowPos(width, height) { return {
const screen = electron.screen.getDisplayNearestPoint({ x: screen.workArea.x,
x: tray.getBounds().x, y: screen.workArea.height - height,
y: tray.getBounds().y, };
}); // top
// left if (screen.workArea.y > 0)
if (screen.workArea.x > 0)
return {
x: screen.workArea.x,
y: screen.workArea.height - height,
};
// top
if (screen.workArea.y > 0)
return {
x: Math.round(
tray.getBounds().x + tray.getBounds().width / 2 - width / 2
),
y: screen.workArea.y,
};
// right
if (screen.workArea.width < screen.bounds.width)
return {
x: screen.workArea.width - width,
y: screen.bounds.height - height,
};
// bottom
return { return {
x: Math.round( x: Math.round(
tray.getBounds().x + tray.getBounds().width / 2 - width / 2 tray.getBounds().x + tray.getBounds().width / 2 - width / 2
), ),
y: screen.workArea.height - height, y: screen.workArea.y,
}; };
} // right
if (screen.workArea.width < screen.bounds.width)
return {
x: screen.workArea.width - width,
y: screen.bounds.height - height,
};
// bottom
return {
x: Math.round(
tray.getBounds().x + tray.getBounds().width / 2 - width / 2
),
y: screen.workArea.height - height,
};
}
function openExtensionMenu() { function openExtensionMenu() {
if (enhancer_menu) return enhancer_menu.show(); if (enhancer_menu) return enhancer_menu.show();
const window_state = require(`${__notion.replace( const window_state = require(`${__notion.replace(
/\\/g, /\\/g,
'/' '/'
)}/app/node_modules/electron-window-state/index.js`)({ )}/app/node_modules/electron-window-state/index.js`)({
file: 'menu-windowstate.json', file: 'menu-windowstate.json',
path: helpers.data_folder, path: helpers.data_folder,
defaultWidth: 275, defaultWidth: 275,
defaultHeight: 600, defaultHeight: 600,
});
electron.shell.openExternal(JSON.stringify(window_state));
enhancer_menu = new electron.BrowserWindow({
show: true,
frame: false,
titleBarStyle: 'hiddenInset',
x:
window_state.x ||
calculateWindowPos(window_state.width, window_state.height).x,
y:
window_state.y ||
calculateWindowPos(window_state.width, window_state.height).y,
width: window_state.width,
height: window_state.height,
webPreferences: {
preload: path.resolve(`${__dirname}/menu.js`),
nodeIntegration: true,
session: electron.session.fromPartition('persist:notion'),
},
});
enhancer_menu.loadURL('enhancement://core/menu.html');
enhancer_menu.on('close', (e) => {
window_state.saveState(enhancer_menu);
enhancer_menu = null;
});
}
const contextMenu = electron.Menu.buildFromTemplate([
{
type: 'normal',
label: 'Bug Report',
click: () => {
electron.shell.openExternal(
'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md'
);
},
},
{
type: 'normal',
label: 'Feature Request',
click: () => {
electron.shell.openExternal(
'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md'
);
},
},
{
type: 'separator',
},
{
type: 'normal',
label: 'Docs',
click: () => {
electron.shell.openExternal(
'https://github.com/dragonwocky/notion-enhancer/tree/js'
);
},
},
{
type: 'normal',
label: 'Enhancements',
accelerator: 'CommandOrControl+E',
click: openExtensionMenu,
},
{
type: 'separator',
},
{
label: 'Quit',
role: 'quit',
},
]);
tray.setContextMenu(contextMenu);
tray.setToolTip('Notion');
function showWindows() {
const windows = electron.BrowserWindow.getAllWindows();
if (is_mac) electron.app.show();
if (settings.maximized) windows.forEach((win) => [win.maximize()]);
else windows.forEach((win) => win.show());
electron.app.focus({ steal: true });
}
function hideWindows() {
const windows = electron.BrowserWindow.getAllWindows();
windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]);
if (is_mac) electron.app.hide();
}
tray.on('click', () => {
const windows = electron.BrowserWindow.getAllWindows();
if (windows.some((win) => win.isVisible())) hideWindows();
else showWindows();
}); });
electron.globalShortcut.register(settings.hotkey, () => { electron.shell.openExternal(JSON.stringify(window_state));
const windows = electron.BrowserWindow.getAllWindows(); enhancer_menu = new electron.BrowserWindow({
if (windows.some((win) => win.isFocused() && win.isVisible())) show: true,
hideWindows(); frame: false,
else showWindows(); titleBarStyle: 'hiddenInset',
x:
window_state.x ||
calculateWindowPos(window_state.width, window_state.height).x,
y:
window_state.y ||
calculateWindowPos(window_state.width, window_state.height).y,
width: window_state.width,
height: window_state.height,
webPreferences: {
preload: path.resolve(`${__dirname}/menu.js`),
nodeIntegration: true,
session: electron.session.fromPartition('persist:notion'),
},
}); });
enhancer_menu.loadURL('enhancement://core/menu.html');
enhancer_menu.on('close', (e) => {
window_state.saveState(enhancer_menu);
enhancer_menu = null;
});
}
const contextMenu = electron.Menu.buildFromTemplate([
{
type: 'normal',
label: 'Bug Report',
click: () => {
electron.shell.openExternal(
'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=bug&template=bug-report.md'
);
},
},
{
type: 'normal',
label: 'Feature Request',
click: () => {
electron.shell.openExternal(
'https://github.com/dragonwocky/notion-enhancer/issues/new?labels=enhancement&template=feature-request.md'
);
},
},
{
type: 'separator',
},
{
type: 'normal',
label: 'Docs',
click: () => {
electron.shell.openExternal(
'https://github.com/dragonwocky/notion-enhancer/tree/js'
);
},
},
{
type: 'normal',
label: 'Enhancements',
accelerator: 'CommandOrControl+E',
click: openExtensionMenu,
},
{
type: 'separator',
},
{
label: 'Quit',
role: 'quit',
},
]);
tray.setContextMenu(contextMenu);
tray.setToolTip('Notion');
function showWindows() {
const windows = electron.BrowserWindow.getAllWindows();
if (is_mac) electron.app.show();
if (store().maximized) windows.forEach((win) => [win.maximize()]);
else windows.forEach((win) => win.show());
electron.app.focus({ steal: true });
}
function hideWindows() {
const windows = electron.BrowserWindow.getAllWindows();
windows.forEach((win) => [win.isFocused() && win.blur(), win.hide()]);
if (is_mac) electron.app.hide();
}
tray.on('click', () => {
const windows = electron.BrowserWindow.getAllWindows();
if (windows.some((win) => win.isVisible())) hideWindows();
else showWindows();
}); });
}; electron.globalShortcut.register(store().hotkey, () => {
const windows = electron.BrowserWindow.getAllWindows();
if (windows.some((win) => win.isFocused() && win.isVisible()))
hideWindows();
else showWindows();
});
});
};

6
pkg/helpers.js
View File

@ -127,7 +127,11 @@ function getEnhancements() {
modules.IDs.includes(mod.id) || modules.IDs.includes(mod.id) ||
!mod.name || !mod.name ||
!mod.version || !mod.version ||
!mod.author !mod.author ||
(mod.options &&
!mod.options.every((opt) =>
['toggle', 'select', 'input', 'file'].includes(opt.type)
))
) )
throw Error; throw Error;
modules.loaded.push({ modules.loaded.push({

16
pkg/loader.js
View File

@ -52,14 +52,22 @@ module.exports = function (__file, __exports) {
document.querySelector('head').appendChild(style); document.querySelector('head').appendChild(style);
}); });
} }
if (mod.hacks && mod.hacks[__file]) if (mod.hacks && mod.hacks[__file]) {
mod.defaults = {};
for (let opt of mod.options || [])
mod.defaults[opt.key] = Array.isArray(opt.value)
? opt.value[0]
: opt.value;
mod.hacks[__file]( mod.hacks[__file](
(...args) => (...args) =>
args.length === 1 !args.length
? store(mod.id, args[0]) ? store(mod.id, mod.defaults)
: store(args[0], args[1]), : args.length === 1
? store(mod.id, { ...mod.defaults, ...args[0] })
: store(args[0], { ...mod.defaults, ...args[1] }),
__exports __exports
); );
}
} }
} }
}; };