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

api hooks - enabling core mods to extend the api

Browse Source 
moved tooltips to one, preparing to set up sidebar
This commit is contained in:
dragonwocky 2021-10-02 00:12:30 +10:00
parent 8d377e1ac2
commit a7549cd9db
15 changed files with 206 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
extension/api/registry-validation.mjs
View File

@ -148,6 +148,22 @@ const check = async (
});
tests.push(test);
}
if (mod.js.hook) {
if (mod.tags.includes('core')) {
const test = check(mod, 'js.hook', mod.js.hook, 'file', {
extension: '.mjs',
});
tests.push(test);
} else {
registry._errors.push({
source: mod._dir,
message: `js.hook (only core mods can register hooks): ${JSON.stringify(
mod.tags
)}`,
});
tests.push(false);
}
}
return tests;
});
},

1
extension/api/registry.mjs
View File

@ -25,6 +25,7 @@ export const _cache = [],
export const core = [
'a6621988-551d-495a-97d8-3c568bca2e9e',
'0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
'36a2ffc9-27ff-480e-84a7-c7700a7d232d',
];
/**

48
extension/api/web.mjs
View File

@ -17,7 +17,7 @@ const _hotkeyEventListeners = [],
_documentObserverListeners = [],
_documentObserverEvents = [];
let _$tooltip, _$tooltipStylesheet, _hotkeyEvent, _documentObserver;
let _hotkeyEvent, _documentObserver;
import '../dep/jscolor.min.js';
/** color picker with alpha channel using https://jscolor.com/ */
@ -160,52 +160,6 @@ export const icon = (name, attrs = {}) => {
.join(' ')}><use xlink:href="${fs.localPath('dep/feather-sprite.svg')}#${name}" /></svg>`;
};
/**
* add a tooltip to show extra information on hover
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
* @param {string} text - the markdown content of the tooltip
*/
export const tooltip = ($ref, text) => {
if (!_$tooltip) {
_$tooltip = html`<div id="enhancer--tooltip"></div>`;
_$tooltipStylesheet = html`<style>
#enhancer--tooltip {
position: absolute;
background: var(--theme--ui_tooltip);
font-size: 11.5px;
padding: 0.15rem 0.4rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
border-radius: 3px;
max-width: 20rem;
display: none;
}
#enhancer--tooltip p {
margin: 0.25rem 0;
}
#enhancer--tooltip p:first-child {
color: var(--theme--ui_tooltip-title);
}
#enhancer--tooltip p:not(:first-child) {
color: var(--theme--ui_tooltip-description);
}
</style>`;
render(document.head, _$tooltipStylesheet);
render(document.body, _$tooltip);
}
text = fmt.md.render(text);
$ref.addEventListener('mouseover', (event) => {
_$tooltip.innerHTML = text;
_$tooltip.style.display = 'block';
});
$ref.addEventListener('mousemove', (event) => {
_$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
_$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
});
$ref.addEventListener('mouseout', (event) => {
_$tooltip.style.display = '';
});
};
/**
* register a hotkey listener to the page
* @param {array} keys - the combination of keys that will trigger the hotkey.

30
extension/launcher.js
View File

@ -13,16 +13,28 @@
page = location.pathname.split(/[/-]/g).reverse()[0].length === 32;
if (site || page) {
import(chrome.runtime.getURL('api/_.mjs')).then(async (api) => {
const { registry, web } = api;
import(chrome.runtime.getURL('api/_.mjs')).then(async ({ ...api }) => {
const { fs, registry, web } = api,
insert = async (mod) => {
for (const sheet of mod.css?.client || []) {
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
}
for (let script of mod.js?.client || []) {
script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
script.default(api, await registry.db(mod.id));
}
return true;
};
for (const mod of await registry.list((mod) => registry.core.includes(mod.id))) {
if (mod.js?.hook) {
let script = mod.js.hook;
script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
api[mod.name] = await script.default(api, await registry.db(mod.id));
}
await insert(mod);
}
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
for (const sheet of mod.css?.client || []) {
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
}
for (let script of mod.js?.client || []) {
script = await import(chrome.runtime.getURL(`repo/${mod._dir}/${script}`));
script.default(api, await registry.db(mod.id));
}
if (!registry.core.includes(mod.id)) await insert(mod);
}
const errors = await registry.errors();
if (errors.length) {

2
extension/manifest.json
View File

@ -19,7 +19,7 @@
"page": "repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.html",
"open_in_tab": true
},
"web_accessible_resources": ["api/*", "dep/*", "icon/*", "repo/*"],
"web_accessible_resources": ["env.mjs", "api/*", "dep/*", "icon/*", "repo/*"],
"content_scripts": [
{
"matches": ["https://*.notion.so/*", "https://*.notion.site/*"],

38
extension/repo/components@36a2ffc9-27ff-480e-84a7-c7700a7d232d/hook.mjs Normal file
View File

@ -0,0 +1,38 @@
/*
* notion-enhancer core: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
* (https://notion-enhancer.github.io/) under the MIT license
*/
let _$tooltip;
export default function (api, db) {
const { web, fmt } = api;
return {
/**
* add a tooltip to show extra information on hover
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
* @param {string} text - the markdown content of the tooltip
*/
tooltip: ($ref, text) => {
if (!_$tooltip) {
_$tooltip = web.html`<div id="enhancer--tooltip"></div>`;
web.render(document.body, _$tooltip);
}
text = fmt.md.render(text);
$ref.addEventListener('mouseover', (event) => {
_$tooltip.innerHTML = text;
_$tooltip.style.display = 'block';
});
$ref.addEventListener('mousemove', (event) => {
_$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
_$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
});
$ref.addEventListener('mouseout', (event) => {
_$tooltip.style.display = '';
});
},
};
}

38
extension/repo/components@36a2ffc9-27ff-480e-84a7-c7700a7d232d/mod.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "components",
"id": "36a2ffc9-27ff-480e-84a7-c7700a7d232d",
"version": "0.2.0",
"description": "notion-style elements reuseable by other mods, inc. tooltips and the side panel.",
"tags": ["core"],
"authors": [
{
"name": "dragonwocky",
"email": "thedragonring.bod@gmail.com",
"homepage": "https://dragonwocky.me/",
"avatar": "https://dragonwocky.me/avatar.jpg"
},
{
"name": "CloudHill",
"email": "rh.cloudhill@gmail.com",
"homepage": "https://github.com/CloudHill",
"avatar": "https://avatars.githubusercontent.com/u/54142180"
}
],
"js": {
"hook": "hook.mjs"
},
"css": {
"client": ["tooltip.css", "sidebar.css"],
"menu": ["tooltip.css"],
"frame": ["tooltip.css"]
},
"options": [
{
"type": "hotkey",
"key": "side-panel-hotkey",
"label": "toggle side panel hotkey",
"value": "Ctrl+Alt+\\",
"tooltip": "opens the side panel in notion - will only work if a mod is making use of it."
}
]
}

6
extension/repo/components@36a2ffc9-27ff-480e-84a7-c7700a7d232d/sidebar.css Normal file
View File

@ -0,0 +1,6 @@
/*
* notion-enhancer core: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (c) 2021 CloudHill <rl.cloudhill@gmail.com> (https://github.com/CloudHill)
* (https://notion-enhancer.github.io/) under the MIT license
*/

25
extension/repo/components@36a2ffc9-27ff-480e-84a7-c7700a7d232d/tooltip.css Normal file
View File

@ -0,0 +1,25 @@
/*
* notion-enhancer core: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
#enhancer--tooltip {
position: absolute;
background: var(--theme--ui_tooltip);
font-size: 11.5px;
padding: 0.15rem 0.4rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
border-radius: 3px;
max-width: 20rem;
display: none;
}
#enhancer--tooltip p {
margin: 0.25rem 0;
}
#enhancer--tooltip p:first-child {
color: var(--theme--ui_tooltip-title);
}
#enhancer--tooltip p:not(:first-child) {
color: var(--theme--ui_tooltip-description);
}

22
extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/components.mjs → extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/blocks.mjs
View File

@ -6,11 +6,11 @@
'use strict';
import { fmt, web } from '../../api/_.mjs';
import { api, profileDB } from './loader.mjs';
import { notifications } from './notifications.mjs';
import { profileDB } from './menu.mjs';
const { fmt, web, components } = api;
export const components = {
export const blocks = {
preview: (url) => web.html`<img
class="mod-preview"
src="${web.escape(url)}"
@ -57,13 +57,13 @@ export const components = {
export const options = {
toggle: async (mod, opt) => {
const checked = await profileDB.get([mod.id, opt.key], opt.value),
$toggle = components.toggle(opt.label, checked),
$toggle = blocks.toggle(opt.label, checked),
$tooltip = web.html`${web.icon('info', { class: 'input-tooltip' })}`,
$label = $toggle.children[0],
$input = $toggle.children[1];
if (opt.tooltip) {
$label.prepend($tooltip);
web.tooltip($tooltip, opt.tooltip);
components.tooltip($tooltip, opt.tooltip);
}
$input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.checked);
@ -89,7 +89,7 @@ export const options = {
${$options.join('')}
</select>`,
$icon = web.html`${web.icon('chevron-down', { class: 'input-icon' })}`;
if (opt.tooltip) web.tooltip($tooltip, opt.tooltip);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip);
$select.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $select.value);
notifications.onChange();
@ -105,7 +105,7 @@ export const options = {
),
$input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
$icon = web.html`${web.icon('type', { class: 'input-icon' })}`;
if (opt.tooltip) web.tooltip($tooltip, opt.tooltip);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip);
$input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange();
@ -121,7 +121,7 @@ export const options = {
),
$input = web.html`<input type="number" class="input" value="${value}">`,
$icon = web.html`${web.icon('hash', { class: 'input-icon' })}`;
if (opt.tooltip) web.tooltip($tooltip, opt.tooltip);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip);
$input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange();
@ -153,7 +153,7 @@ export const options = {
onInput: paint,
onChange: paint,
});
if (opt.tooltip) web.tooltip($tooltip, opt.tooltip);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip);
$input.addEventListener('change', async (event) => {
await profileDB.set([mod.id, opt.key], $input.value);
notifications.onChange();
@ -175,7 +175,7 @@ export const options = {
$icon = web.html`${web.icon('file', { class: 'input-icon' })}`,
$filename = web.html`<span>${web.escape(filename || 'none')}</span>`,
$latest = web.render(web.html`<button class="file-latest">Latest: </button>`, $filename);
if (opt.tooltip) web.tooltip($tooltip, opt.tooltip);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip);
$input.addEventListener('change', (event) => {
const file = event.target.files[0],
reader = new FileReader();
@ -208,7 +208,7 @@ export const options = {
),
$input = web.html`<input type="text" class="input" value="${web.escape(value)}">`,
$icon = web.html`${web.icon('command', { class: 'input-icon' })}`;
if (opt.tooltip) web.tooltip($tooltip, opt.tooltip);
if (opt.tooltip) components.tooltip($tooltip, opt.tooltip);
$input.addEventListener('keydown', async (event) => {
event.preventDefault();
const pressed = [],

32
extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/loader.mjs Normal file
View File

@ -0,0 +1,32 @@
/*
* notion-enhancer core: menu
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
import * as _api from '../../api/_.mjs';
export const api = { ..._api },
{ fs, registry, web } = api;
export const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
profileName = await registry.profileName(),
profileDB = await registry.profileDB();
const insert = (mod) => {
for (const sheet of mod.css?.menu || []) {
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
}
};
for (const mod of await registry.list((mod) => registry.core.includes(mod.id))) {
if (mod.js?.hook) {
let script = mod.js.hook;
script = await import(fs.localPath(`repo/${mod._dir}/${script}`));
api[mod.name] = await script.default(api, await registry.db(mod.id));
}
await insert(mod);
}
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
if (!registry.core.includes(mod.id)) await insert(mod);
}

32
extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.mjs
View File

@ -6,24 +6,14 @@
'use strict';
import { env, fs, storage, registry, web } from '../../api/_.mjs';
export const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e'),
profileName = await registry.profileName(),
profileDB = await registry.profileDB();
import { api, db, profileName, profileDB } from './loader.mjs';
import './styles.mjs';
import { notifications } from './notifications.mjs';
import { components, options } from './components.mjs';
import { blocks, options } from './blocks.mjs';
const { env, fs, storage, registry, web } = api;
web.addHotkeyListener(await db.get(['hotkey']), env.focusNotion);
for (const mod of await registry.list((mod) => registry.enabled(mod.id))) {
for (const sheet of mod.css?.menu || []) {
web.loadStylesheet(`repo/${mod._dir}/${sheet}`);
}
}
const loadTheme = async () => {
document.documentElement.className =
(await db.get(['theme'], 'light')) === 'dark' ? 'dark' : '';
@ -204,7 +194,7 @@ const _$modListCache = {},
},
mod: async (mod) => {
const $mod = web.html`<div class="mod" data-id="${web.escape(mod.id)}"></div>`,
$toggle = components.toggle('', await registry.enabled(mod.id));
$toggle = blocks.toggle('', await registry.enabled(mod.id));
$toggle.addEventListener('change', async (event) => {
if (event.target.checked && mod.tags.includes('theme')) {
const mode = mod.tags.includes('light') ? 'light' : 'dark',
@ -233,8 +223,8 @@ const _$modListCache = {},
}
$mod.className = 'mod-selected';
const fragment = [
web.render(components.title(mod.name), components.version(mod.version)),
components.tags(mod.tags),
web.render(blocks.title(mod.name), blocks.version(mod.version)),
blocks.tags(mod.tags),
await generators.options(mod),
];
web.render(web.empty($options), ...fragment);
@ -244,7 +234,7 @@ const _$modListCache = {},
web.render(
$mod,
mod.preview
? components.preview(
? blocks.preview(
mod.preview.startsWith('http')
? mod.preview
: fs.localPath(`repo/${mod._dir}/${mod.preview}`)
@ -252,10 +242,10 @@ const _$modListCache = {},
: '',
web.render(
web.html`<div class="mod-body"></div>`,
web.render(components.title(mod.name), components.version(mod.version)),
components.tags(mod.tags),
components.description(mod.description),
components.authors(mod.authors),
web.render(blocks.title(mod.name), blocks.version(mod.version)),
blocks.tags(mod.tags),
blocks.description(mod.description),
blocks.authors(mod.authors),
mod.environments.includes(env.name) && !registry.core.includes(mod.id)
? $toggle
: ''

5
extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/notifications.mjs
View File

@ -6,10 +6,9 @@
'use strict';
import { env, fs, storage, fmt, registry, web } from '../../api/_.mjs';
const db = await registry.db('a6621988-551d-495a-97d8-3c568bca2e9e');
import { api } from './loader.mjs';
import { tw } from './styles.mjs';
const { env, fs, storage, fmt, registry, web } = api;
export const notifications = {
$container: web.html`<div class="notifications-container"></div>`,

3
extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/router.mjs
View File

@ -6,7 +6,8 @@
'use strict';
import { web } from '../../api/_.mjs';
import { api } from './loader.mjs';
const { web } = api;
let _defaultView = '';
const _views = new Map();

1
extension/repo/registry.json
View File

@ -1,6 +1,7 @@
[
"menu@a6621988-551d-495a-97d8-3c568bca2e9e",
"theming@0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
"components@36a2ffc9-27ff-480e-84a7-c7700a7d232d",
"tweaks@5174a483-c88d-4bf8-a95f-35cd330b76e2",
"bypass-preview@cb6fd684-f113-4a7a-9423-8f0f0cff069f",
"calendar-scroll@b1c7db33-dfee-489a-a76c-0dd66f7ed29a"