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

Merge submodule contents for api/dev

Browse Source
This commit is contained in:
dragonwocky 2022-11-25 15:21:36 +11:00
commit da30befa5c
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
22 changed files with 2416 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
api/.github/workflows/update-parents.yml vendored Normal file
View File

@ -0,0 +1,29 @@
name: 'update parent repositories'
on:
push:
branches:
- dev
jobs:
sync:
name: update parent
runs-on: ubuntu-latest
strategy:
matrix:
repo: ['notion-enhancer/extension', 'notion-enhancer/desktop']
steps:
- name: checkout repo
uses: actions/checkout@v2
with:
token: ${{ secrets.CI_TOKEN }}
submodules: true
repository: ${{ matrix.repo }}
- name: pull updates
run: |
git pull --recurse-submodules
git submodule update --remote --recursive
- name: commit changes
uses: stefanzweifel/git-auto-commit-action@v4
with:
commit_message: '[${{ github.event.repository.name }}] ${{ github.event.head_commit.message }}'

21
api/LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

5
api/README.md Normal file
View File

@ -0,0 +1,5 @@
# notion-enhancer/api
the standard api available within the notion-enhancer
[read the docs online](https://notion-enhancer.github.io/documentation/api)

55
api/components/corner-action.css Normal file
View File

@ -0,0 +1,55 @@
/**
* notion-enhancer: 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
*/
#enhancer--corner-actions {
position: absolute;
bottom: 26px;
right: 26px;
z-index: 101;
cursor: default;
pointer-events: none;
display: flex;
flex-direction: row-reverse;
}
#enhancer--corner-actions > div {
position: static !important;
width: 36px;
height: 36px;
margin-left: 12px;
pointer-events: auto;
border-radius: 100%;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme--icon);
fill: var(--theme--icon);
background: var(--theme--ui_corner_action) !important;
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 0px 0px 1px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.15)) 0px 2px 4px !important;
user-select: none;
cursor: pointer;
}
#enhancer--corner-actions > div:hover {
background: var(--theme--ui_corner_action-hover) !important;
}
#enhancer--corner-actions > div:active {
background: var(--theme--ui_corner_action-active) !important;
}
#enhancer--corner-actions > div.hidden {
display: none;
}
#enhancer--corner-actions > div > svg {
width: 22px;
height: 22px;
color: var(--theme--icon);
fill: var(--theme--icon);
}

43
api/components/corner-action.mjs Normal file
View File

@ -0,0 +1,43 @@
/**
* notion-enhancer: 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
*/
'use strict';
/** shared notion-style elements */
import { web } from '../index.mjs';
let $stylesheet, $cornerButtonsContainer;
/**
* adds a button to notion's bottom right corner
* @param {string} icon - an svg string
* @param {function} listener - the function to call when the button is clicked
* @returns {Element} the appended corner action element
*/
export const addCornerAction = async (icon, listener) => {
if (!$stylesheet) {
$stylesheet = web.loadStylesheet('api/components/corner-action.css');
$cornerButtonsContainer = web.html`<div id="enhancer--corner-actions"></div>`;
}
await web.whenReady(['.notion-help-button']);
const $helpButton = document.querySelector('.notion-help-button'),
$onboardingButton = document.querySelector('.onboarding-checklist-button');
if ($onboardingButton) $cornerButtonsContainer.prepend($onboardingButton);
$cornerButtonsContainer.prepend($helpButton);
web.render(
document.querySelector('.notion-app-inner > .notion-cursor-listener'),
$cornerButtonsContainer
);
const $actionButton = web.html`<div class="enhancer--corner-action-button">${icon}</div>`;
$actionButton.addEventListener('click', listener);
web.render($cornerButtonsContainer, $actionButton);
return $actionButton;
};

33
api/components/feather.mjs Normal file
View File

@ -0,0 +1,33 @@
/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/** shared notion-style elements */
import { fs, web } from '../index.mjs';
let _$iconSheet;
/**
* generate an icon from the feather icons set
* @param {string} name - the name/id of the icon
* @param {object} attrs - an object of attributes to apply to the icon e.g. classes
* @returns {string} an svg string
*/
export const feather = async (name, attrs = {}) => {
if (!_$iconSheet) {
_$iconSheet = web.html`${await fs.getText('dep/feather-sprite.svg')}`;
}
attrs.style = (
(attrs.style ? attrs.style + ';' : '') +
'stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;'
).trim();
attrs.viewBox = '0 0 24 24';
return `<svg ${Object.entries(attrs)
.map(([key, val]) => `${web.escape(key)}="${web.escape(val)}"`)
.join(' ')}>${_$iconSheet.getElementById(name)?.innerHTML}</svg>`;
};

55
api/components/index.mjs Normal file
View File

@ -0,0 +1,55 @@
/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* shared notion-style elements
* @namespace components
*/
import * as _api from '../index.mjs'; // trick jsdoc
/**
* add a tooltip to show extra information on hover
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
* @param {string|HTMLElement} $content - markdown or element content of the tooltip
* @param {object=} options - configuration of how the tooltip should be displayed
* @param {number=} options.delay - the amount of time in ms the element needs to be hovered over
* for the tooltip to be shown (default: 100)
* @param {string=} options.offsetDirection - which side of the element the tooltip
* should be shown on: 'top', 'bottom', 'left' or 'right' (default: 'bottom')
* @param {number=} options.maxLines - the max number of lines that the content may be wrapped
* to, used to position and size the tooltip correctly (default: 1)
*/
export { addTooltip } from './tooltip.mjs';
/**
* generate an icon from the feather icons set
* @param {string} name - the name/id of the icon
* @param {object} attrs - an object of attributes to apply to the icon e.g. classes
* @returns {string} an svg string
*/
export { feather } from './feather.mjs';
/**
* adds a view to the enhancer's side panel
* @param {object} panel - information used to construct and render the panel
* @param {string} panel.id - a uuid, used to restore the last open view on reload
* @param {string} panel.icon - an svg string
* @param {string} panel.title - the name of the view
* @param {Element} panel.$content - an element containing the content of the view
* @param {function} panel.onBlur - runs when the view is selected/focused
* @param {function} panel.onFocus - runs when the view is unfocused/closed
*/
export { addPanelView } from './panel.mjs';
/**
* adds a button to notion's bottom right corner
* @param {string} icon - an svg string
* @param {function} listener - the function to call when the button is clicked
* @returns {Element} the appended corner action element
*/
export { addCornerAction } from './corner-action.mjs';

221
api/components/panel.css Normal file
View File

@ -0,0 +1,221 @@
/**
* notion-enhancer: 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
*/
:root {
--component--panel-width: 260px;
}
#enhancer--panel-hover-trigger {
height: 100vh;
width: 2.5rem;
max-height: 100%;
z-index: 999;
position: absolute;
top: 45px;
right: 0;
flex-grow: 0;
flex-shrink: 0;
transition: width 300ms ease-in-out;
}
#enhancer--panel-hover-trigger[data-enhancer-panel-pinned] {
/* taking up the physical space of the panel to move topbar buttons */
top: 0;
position: relative;
width: var(--component--panel-width);
}
.notion-frame {
transition: padding-right 300ms ease-in-out;
}
.notion-frame[data-enhancer-panel-pinned] {
padding-right: var(--component--panel-width);
}
.notion-cursor-listener > div[style*='flex-end'] {
transition: margin-right 300ms ease-in-out;
}
.notion-cursor-listener > div[style*='flex-end'][data-enhancer-panel-pinned],
#enhancer--panel[data-enhancer-panel-pinned] + div[style*='flex-end'] {
margin-right: var(--component--panel-width);
}
#enhancer--panel {
z-index: 999;
position: absolute;
background: var(--theme--bg_secondary);
width: var(--component--panel-width);
right: calc(-1 * var(--component--panel-width));
opacity: 0;
height: 100vh;
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
transition: 300ms ease-in;
margin-top: 5rem;
max-height: calc(100vh - 10rem);
}
#enhancer--panel-hover-trigger:hover + #enhancer--panel:not([data-enhancer-panel-pinned]),
#enhancer--panel:not([data-enhancer-panel-pinned]):hover {
opacity: 1;
transform: translateX(calc(-1 * var(--component--panel-width)));
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
}
#enhancer--panel[data-enhancer-panel-pinned] {
opacity: 1;
max-height: 100%;
margin-top: 0;
transform: translateX(calc(-1 * var(--component--panel-width)));
}
.enhancer--panel-view-title {
margin: 0;
height: 1em;
display: flex;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
}
.enhancer--panel-view-title svg,
.enhancer--panel-view-title img {
height: 1em;
width: 1em;
}
.enhancer--panel-view-icon {
margin-bottom: -2px;
}
.enhancer--panel-view-title .enhancer--panel-view-title-text {
font-size: 0.9em;
margin: 0 0 0 0.75em;
padding-bottom: 0.3em;
white-space: nowrap;
overflow: hidden;
}
#enhancer--panel-header {
font-size: 1.2rem;
font-weight: 600;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
padding: 0.75rem 0 0.75rem 1rem;
background: var(--theme--bg_secondary);
}
#enhancer--panel-header-title {
max-width: calc(100% - 4.25rem);
}
#enhancer--panel-header-title .enhancer--panel-view-title {
font-size: 1.2rem;
}
#enhancer--panel-header-title .enhancer--panel-view-title-text {
max-width: calc(100% - 1.75em);
position: relative;
}
#enhancer--panel-switcher-overlay-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
overflow: hidden;
}
#enhancer--panel-switcher {
max-width: 320px;
position: relative;
right: 14px;
border-radius: 3px;
padding: 8px 0;
background: var(--theme--bg_card);
box-shadow: var(--theme--ui_shadow, rgba(15, 15, 15, 0.05)) 0px 0px 0px 1px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.1)) 0px 3px 6px,
var(--theme--ui_shadow, rgba(15, 15, 15, 0.2)) 0px 9px 24px !important;
overflow: hidden;
}
.enhancer--panel-switcher-item {
display: flex;
align-items: center;
width: 100%;
padding: 8px 14px;
user-select: none;
cursor: pointer;
overflow: hidden;
position: relative;
background: var(--theme--bg_card);
}
#enhancer--panel-header:hover,
#enhancer--panel-header:focus-within,
.enhancer--panel-switcher-item:hover,
.enhancer--panel-switcher-item:focus {
background: var(--theme--ui_interactive-hover);
}
#enhancer--panel-header:active,
.enhancer--panel-switcher-item:active {
background: var(--theme--ui_interactive-active);
}
#enhancer--panel-content {
margin: 0.75rem 1rem;
font-size: 1rem;
}
#enhancer--panel-header-switcher {
padding: 4px;
}
#enhancer--panel-header-toggle {
margin-left: auto;
padding-right: 1rem;
height: 100%;
width: 2.5em;
opacity: 0;
display: flex;
}
#enhancer--panel-header-toggle > div {
margin: auto 0 auto auto;
}
#enhancer--panel-header-switcher,
#enhancer--panel-header-toggle > div {
color: var(--theme--icon_secondary);
height: 1em;
width: 1em;
cursor: pointer;
display: flex;
flex-direction: column;
transition: 300ms ease-in-out;
}
#enhancer--panel #enhancer--panel-header-toggle svg {
transition: 300ms ease-in-out;
}
#enhancer--panel:not([data-enhancer-panel-pinned]) #enhancer--panel-header-toggle svg {
transform: rotateZ(-180deg);
}
#enhancer--panel:hover #enhancer--panel-header-toggle {
opacity: 1;
}
#enhancer--panel-resize {
position: absolute;
left: -5px;
height: 100%;
width: 10px;
}
#enhancer--panel[data-enhancer-panel-pinned] #enhancer--panel-resize {
cursor: col-resize;
}
#enhancer--panel-resize div {
transition: background 150ms ease-in-out;
background: transparent;
width: 2px;
margin-left: 4px;
height: 100%;
}
#enhancer--panel[data-enhancer-panel-pinned] #enhancer--panel-resize:hover div {
background: var(--theme--ui_divider);
}

292
api/components/panel.mjs Normal file
View File

@ -0,0 +1,292 @@
/**
* notion-enhancer: 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
*/
'use strict';
/** shared notion-style elements */
import { web, components, registry } from '../index.mjs';
const _views = [],
svgExpand = web.raw`<svg 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"></path>
</svg>`;
let $stylesheet,
db,
// open + close
$notionFrame,
$notionRightSidebar,
$panel,
$hoverTrigger,
// resize
$resizeHandle,
dragStartX,
dragStartWidth,
dragEventsFired,
panelWidth,
// render content
$notionApp,
$pinnedToggle,
$panelTitle,
$header,
$panelContent,
$switcher,
$switcherTrigger,
$switcherOverlayContainer;
// open + close
const panelPinnedAttr = 'data-enhancer-panel-pinned',
isPinned = () => $panel.hasAttribute(panelPinnedAttr),
togglePanel = () => {
const $elems = [$notionFrame, $notionRightSidebar, $hoverTrigger, $panel].filter(
($el) => $el
);
if (isPinned()) {
closeSwitcher();
for (const $elem of $elems) $elem.removeAttribute(panelPinnedAttr);
} else {
for (const $elem of $elems) $elem.setAttribute(panelPinnedAttr, 'true');
}
db.set(['panel.pinned'], isPinned());
},
// resize
updateWidth = () => {
document.documentElement.style.setProperty('--component--panel-width', panelWidth + 'px');
db.set(['panel.width'], panelWidth);
},
resizeDrag = (event) => {
event.preventDefault();
dragEventsFired = true;
panelWidth = dragStartWidth + (dragStartX - event.clientX);
if (panelWidth < 190) panelWidth = 190;
if (panelWidth > 480) panelWidth = 480;
$panel.style.width = panelWidth + 'px';
$hoverTrigger.style.width = panelWidth + 'px';
$notionFrame.style.paddingRight = panelWidth + 'px';
if ($notionRightSidebar) $notionRightSidebar.style.right = panelWidth + 'px';
},
resizeEnd = (_event) => {
$panel.style.width = '';
$hoverTrigger.style.width = '';
$notionFrame.style.paddingRight = '';
if ($notionRightSidebar) $notionRightSidebar.style.right = '';
updateWidth();
$resizeHandle.style.cursor = '';
document.body.removeEventListener('mousemove', resizeDrag);
document.body.removeEventListener('mouseup', resizeEnd);
},
resizeStart = (event) => {
dragStartX = event.clientX;
dragStartWidth = panelWidth;
$resizeHandle.style.cursor = 'auto';
document.body.addEventListener('mousemove', resizeDrag);
document.body.addEventListener('mouseup', resizeEnd);
},
// render content
isSwitcherOpen = () => document.body.contains($switcher),
openSwitcher = () => {
if (!isPinned()) return togglePanel();
web.render($notionApp, $switcherOverlayContainer);
web.empty($switcher);
for (const view of _views) {
const open = $panelTitle.contains(view.$title),
$item = web.render(
web.html`<div class="enhancer--panel-switcher-item" tabindex="0" ${
open ? 'data-open' : ''
}></div>`,
web.render(
web.html`<span class="enhancer--panel-view-title"></span>`,
view.$icon.cloneNode(true),
view.$title.cloneNode(true)
)
);
$item.addEventListener('click', () => {
renderView(view);
db.set(['panel.open'], view.id);
});
web.render($switcher, $item);
}
const rect = $header.getBoundingClientRect();
web.render(
web.empty($switcherOverlayContainer),
web.render(
web.html`<div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px;
width: ${rect.width}px; height: ${rect.height}px;"></div>`,
web.render(
web.html`<div style="position: relative; top: 100%; pointer-events: auto;"></div>`,
$switcher
)
)
);
$switcher.querySelector('[data-open]').focus();
$switcher.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });
document.addEventListener('keydown', switcherKeyListeners);
},
closeSwitcher = () => {
document.removeEventListener('keydown', switcherKeyListeners);
$switcher.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200 }).onfinish = () =>
$switcherOverlayContainer.remove();
},
switcherKeyListeners = (event) => {
if (isSwitcherOpen()) {
switch (event.key) {
case 'Escape':
closeSwitcher();
event.stopPropagation();
break;
case 'Enter':
document.activeElement.click();
event.stopPropagation();
break;
case 'ArrowUp': {
const $prev = event.target.previousElementSibling;
($prev || event.target.parentElement.lastElementChild).focus();
event.stopPropagation();
break;
}
case 'ArrowDown': {
const $next = event.target.nextElementSibling;
($next || event.target.parentElement.firstElementChild).focus();
event.stopPropagation();
break;
}
}
}
},
renderView = (view) => {
const prevView = _views.find(({ $content }) => document.contains($content));
web.render(
web.empty($panelTitle),
web.render(
web.html`<span class="enhancer--panel-view-title"></span>`,
view.$icon,
view.$title
)
);
view.onFocus();
web.render(web.empty($panelContent), view.$content);
if (prevView) prevView.onBlur();
};
async function createPanel() {
await web.whenReady(['.notion-frame']);
$notionFrame = document.querySelector('.notion-frame');
$panel = web.html`<div id="enhancer--panel"></div>`;
$hoverTrigger = web.html`<div id="enhancer--panel-hover-trigger"></div>`;
$resizeHandle = web.html`<div id="enhancer--panel-resize"><div></div></div>`;
$panelTitle = web.html`<div id="enhancer--panel-header-title"></div>`;
$header = web.render(web.html`<div id="enhancer--panel-header"></div>`, $panelTitle);
$panelContent = web.html`<div id="enhancer--panel-content"></div>`;
$switcher = web.html`<div id="enhancer--panel-switcher"></div>`;
$switcherTrigger = web.html`<div id="enhancer--panel-header-switcher" tabindex="0">
${svgExpand}
</div>`;
$switcherOverlayContainer = web.html`<div id="enhancer--panel-switcher-overlay-container"></div>`;
const notionRightSidebarSelector = '.notion-cursor-listener > div[style*="flex-end"]',
detectRightSidebar = () => {
if (!document.contains($notionRightSidebar)) {
$notionRightSidebar = document.querySelector(notionRightSidebarSelector);
if (isPinned() && $notionRightSidebar) {
$notionRightSidebar.setAttribute(panelPinnedAttr, 'true');
}
}
};
$notionRightSidebar = document.querySelector(notionRightSidebarSelector);
web.addDocumentObserver(detectRightSidebar, [notionRightSidebarSelector]);
if (await db.get(['panel.pinned'])) togglePanel();
web.addHotkeyListener(await db.get(['panel.hotkey']), togglePanel);
$pinnedToggle.addEventListener('click', (event) => {
event.stopPropagation();
togglePanel();
});
web.render(
$panel,
web.render($header, $panelTitle, $switcherTrigger, $pinnedToggle),
$panelContent,
$resizeHandle
);
await enablePanelResize();
await createViews();
const cursorListenerSelector =
'.notion-cursor-listener > .notion-sidebar-container ~ [style^="position: absolute"]';
await web.whenReady([cursorListenerSelector]);
document.querySelector(cursorListenerSelector).before($hoverTrigger, $panel);
}
async function enablePanelResize() {
panelWidth = await db.get(['panel.width'], 240);
updateWidth();
$resizeHandle.addEventListener('mousedown', resizeStart);
$resizeHandle.addEventListener('click', () => {
if (dragEventsFired) {
dragEventsFired = false;
} else togglePanel();
});
}
function createViews() {
$notionApp = document.querySelector('.notion-app-inner');
$header.addEventListener('click', openSwitcher);
$switcherTrigger.addEventListener('click', openSwitcher);
$switcherOverlayContainer.addEventListener('click', closeSwitcher);
}
/**
* adds a view to the enhancer's side panel
* @param {object} panel - information used to construct and render the panel
* @param {string} panel.id - a uuid, used to restore the last open view on reload
* @param {string} panel.icon - an svg string
* @param {string} panel.title - the name of the view
* @param {Element} panel.$content - an element containing the content of the view
* @param {function} panel.onBlur - runs when the view is selected/focused
* @param {function} panel.onFocus - runs when the view is unfocused/closed
*/
export const addPanelView = async ({
id,
icon,
title,
$content,
onFocus = () => {},
onBlur = () => {},
}) => {
if (!$stylesheet) {
$stylesheet = web.loadStylesheet('api/components/panel.css');
}
if (!db) db = await registry.db('36a2ffc9-27ff-480e-84a7-c7700a7d232d');
if (!$pinnedToggle) {
$pinnedToggle = web.html`<div id="enhancer--panel-header-toggle" tabindex="0"><div>
${await components.feather('chevrons-right')}
</div></div>`;
}
const view = {
id,
$icon: web.render(
web.html`<span class="enhancer--panel-view-title-icon"></span>`,
icon instanceof Element ? icon : web.html`${icon}`
),
$title: web.render(web.html`<span class="enhancer--panel-view-title-text"></span>`, title),
$content,
onFocus,
onBlur,
};
_views.push(view);
if (_views.length === 1) await createPanel();
if (_views.length === 1 || (await db.get(['panel.open'])) === id) renderView(view);
};

31
api/components/tooltip.css Normal file
View File

@ -0,0 +1,31 @@
/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
#enhancer--tooltip {
font-family: var(--theme--font_sans);
background: var(--theme--ui_tooltip);
border-radius: 3px;
box-shadow: var(--theme--ui_shadow) 0px 1px 4px;
color: var(--theme--ui_tooltip-description);
display: none;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
max-width: 20rem;
overflow: hidden;
padding: 4px 8px;
position: absolute;
z-index: 999999999999999999;
pointer-events: none;
}
#enhancer--tooltip p {
margin: 0;
}
#enhancer--tooltip b,
#enhancer--tooltip strong {
font-weight: 500;
color: var(--theme--ui_tooltip-title);
}

118
api/components/tooltip.mjs Normal file
View File

@ -0,0 +1,118 @@
/**
* notion-enhancer: components
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/** shared notion-style elements */
import { fs, web } from '../index.mjs';
let $stylesheet, _$tooltip;
const countLines = ($el) =>
[...$el.getClientRects()].reduce(
(prev, val) => (prev.some((p) => p.y === val.y) ? prev : [...prev, val]),
[]
).length,
position = ($ref, offsetDirection, maxLines) => {
_$tooltip.style.top = `0px`;
_$tooltip.style.left = `0px`;
const rect = $ref.getBoundingClientRect(),
{ offsetWidth, offsetHeight } = _$tooltip,
pad = 6;
let x = rect.x,
y = Math.floor(rect.y);
if (['top', 'bottom'].includes(offsetDirection)) {
if (offsetDirection === 'top') y -= offsetHeight + pad;
if (offsetDirection === 'bottom') y += rect.height + pad;
x -= offsetWidth / 2 - rect.width / 2;
_$tooltip.style.left = `${x}px`;
_$tooltip.style.top = `${y}px`;
const testLines = () => countLines(_$tooltip.firstElementChild) > maxLines,
padEdgesX = testLines();
while (testLines()) {
_$tooltip.style.left = `${window.innerWidth - x > x ? x++ : x--}px`;
}
if (padEdgesX) {
x += window.innerWidth - x > x ? pad : -pad;
_$tooltip.style.left = `${x}px`;
}
_$tooltip.style.textAlign = 'center';
}
if (['left', 'right'].includes(offsetDirection)) {
y -= offsetHeight / 2 - rect.height / 2;
if (offsetDirection === 'left') x -= offsetWidth + pad;
if (offsetDirection === 'right') x += rect.width + pad;
_$tooltip.style.left = `${x}px`;
_$tooltip.style.top = `${y}px`;
_$tooltip.style.textAlign = 'start';
}
return true;
};
/**
* add a tooltip to show extra information on hover
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
* @param {string|HTMLElement} $content - markdown or element content of the tooltip
* @param {object=} options - configuration of how the tooltip should be displayed
* @param {number=} options.delay - the amount of time in ms the element needs to be hovered over
* for the tooltip to be shown (default: 100)
* @param {string=} options.offsetDirection - which side of the element the tooltip
* should be shown on: 'top', 'bottom', 'left' or 'right' (default: 'bottom')
* @param {number=} options.maxLines - the max number of lines that the content may be wrapped
* to, used to position and size the tooltip correctly (default: 1)
*/
export const addTooltip = async (
$ref,
$content,
{ delay = 100, offsetDirection = 'bottom', maxLines = 1 } = {}
) => {
if (!$stylesheet) {
$stylesheet = web.loadStylesheet('api/components/tooltip.css');
_$tooltip = web.html`<div id="enhancer--tooltip"></div>`;
web.render(document.body, _$tooltip);
}
if (!globalThis.markdownit) await import(fs.localPath('dep/markdown-it.min.js'));
const md = markdownit({ linkify: true });
if (!($content instanceof Element))
$content = web.html`<div style="display:inline">
${$content
.split('\n')
.map((text) => md.renderInline(text))
.join('<br>')}
</div>`;
let displayDelay;
$ref.addEventListener('mouseover', (_event) => {
if (!displayDelay) {
displayDelay = setTimeout(async () => {
if ($ref.matches(':hover')) {
if (_$tooltip.style.display !== 'block') {
_$tooltip.style.display = 'block';
web.render(web.empty(_$tooltip), $content);
position($ref, offsetDirection, maxLines);
await _$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 65 })
.finished;
}
}
displayDelay = undefined;
}, delay);
}
});
$ref.addEventListener('mouseout', async (_event) => {
displayDelay = undefined;
if (_$tooltip.style.display === 'block' && !$ref.matches(':hover')) {
await _$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 65 }).finished;
_$tooltip.style.display = '';
}
});
};

106
api/electron.mjs Normal file
View File

@ -0,0 +1,106 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* access to electron renderer apis
* @namespace electron
*/
import * as _api from './index.mjs'; // trick jsdoc
/**
* access to the electron BrowserWindow instance for the current window
* see https://www.electronjs.org/docs/latest/api/browser-window
* @type {BrowserWindow}
* @process electron (renderer process)
*/
export const browser = globalThis.__enhancerElectronApi?.browser;
/**
* access to the electron webFrame instance for the current page
* see https://www.electronjs.org/docs/latest/api/web-frame
* @type {webFrame}
* @process electron (renderer process)
*/
export const webFrame = globalThis.__enhancerElectronApi?.webFrame;
/**
* send a message to the main electron process
* @param {string} channel - the message identifier
* @param {any} data - the data to pass along with the message
* @param {string=} namespace - a prefix for the message to categorise
* it as e.g. enhancer-related. this should not be changed unless replicating
* builtin ipc events.
* @process electron (renderer process)
*/
export const sendMessage = (channel, data, namespace = 'notion-enhancer') => {
if (globalThis.__enhancerElectronApi) {
globalThis.__enhancerElectronApi.ipcRenderer.sendMessage(channel, data, namespace);
}
};
/**
* send a message to the webview's parent renderer process
* @param {string} channel - the message identifier
* @param {any} data - the data to pass along with the message
* @param {string=} namespace - a prefix for the message to categorise
* it as e.g. enhancer-related. this should not be changed unless replicating
* builtin ipc events.
* @process electron (renderer process)
*/
export const sendMessageToHost = (channel, data, namespace = 'notion-enhancer') => {
if (globalThis.__enhancerElectronApi) {
globalThis.__enhancerElectronApi.ipcRenderer.sendMessageToHost(channel, data, namespace);
}
};
/**
* receive a message from either the main process or
* the webview's parent renderer process
* @param {string} channel - the message identifier to listen for
* @param {function} callback - the message handler, passed the args (event, data)
* @param {string=} namespace - a prefix for the message to categorise
* it as e.g. enhancer-related. this should not be changed unless replicating
* builtin ipc events.
* @process electron (renderer process)
*/
export const onMessage = (channel, callback, namespace = 'notion-enhancer') => {
if (globalThis.__enhancerElectronApi) {
globalThis.__enhancerElectronApi.ipcRenderer.onMessage(channel, callback, namespace);
}
};
/**
* require() notion app files
* @param {string} path - within notion/resources/app/ e.g. main/createWindow.js
* @process electron (main process)
*/
export const notionRequire = (path) => {
return globalThis.__enhancerElectronApi
? globalThis.__enhancerElectronApi.notionRequire(path)
: null;
};
/**
* get all available app windows excluding the menu
* @process electron (main process)
*/
export const getNotionWindows = () => {
return globalThis.__enhancerElectronApi
? globalThis.__enhancerElectronApi.getNotionWindows()
: null;
};
/**
* get the currently focused notion window
* @process electron (main process)
*/
export const getFocusedNotionWindow = () => {
return globalThis.__enhancerElectronApi
? globalThis.__enhancerElectronApi.getFocusedNotionWindow()
: null;
};

46
api/env.mjs Normal file
View File

@ -0,0 +1,46 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* environment-specific methods and constants
* @namespace env
*/
import * as env from '../env/env.mjs';
/**
* the environment/platform name code is currently being executed in
* @constant
* @type {string}
*/
export const name = env.name;
/**
* the current version of the enhancer
* @constant
* @type {string}
*/
export const version = env.version;
/**
* open the enhancer's menu
* @type {function}
*/
export const focusMenu = env.focusMenu;
/**
* focus an active notion tab
* @type {function}
*/
export const focusNotion = env.focusNotion;
/**
* reload all notion and enhancer menu tabs to apply changes
* @type {function}
*/
export const reload = env.reload;

137
api/fmt.mjs Normal file
View File

@ -0,0 +1,137 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* helpers for formatting or parsing text
* @namespace fmt
*/
import { fs } from './index.mjs';
/**
* transform a heading into a slug (a lowercase alphanumeric string separated by hyphens),
* e.g. for use as an anchor id
* @param {string} heading - the original heading to be slugified
* @param {Set<string>=} slugs - a list of pre-generated slugs to avoid duplicates
* @returns {string} the generated slug
*/
export const slugger = (heading, slugs = new Set()) => {
heading = heading
.replace(/\s/g, '-')
.replace(/[^A-Za-z0-9-_]/g, '')
.toLowerCase();
let i = 0,
slug = heading;
while (slugs.has(slug)) {
i++;
slug = `${heading}-${i}`;
}
return slug;
};
/**
* generate a reasonably random uuidv4 string. uses crypto implementation if available
* (from https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid)
* @returns {string} a uuidv4
*/
export const uuidv4 = () => {
if (crypto?.randomUUID) return crypto.randomUUID();
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
(c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
);
};
/**
* log-based shading of an rgb color, from
* https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
* @param {number} shade - a decimal amount to shade the color.
* 1 = white, 0 = the original color, -1 = black
* @param {string} color - the rgb color
* @returns {string} the shaded color
*/
export const rgbLogShade = (shade, color) => {
const int = parseInt,
round = Math.round,
[a, b, c, d] = color.split(','),
t = shade < 0 ? 0 : shade * 255 ** 2,
p = shade < 0 ? 1 + shade : 1 - shade;
return (
'rgb' +
(d ? 'a(' : '(') +
round((p * int(a[3] == 'a' ? a.slice(5) : a.slice(4)) ** 2 + t) ** 0.5) +
',' +
round((p * int(b) ** 2 + t) ** 0.5) +
',' +
round((p * int(c) ** 2 + t) ** 0.5) +
(d ? ',' + d : ')')
);
};
/**
* pick a contrasting color e.g. for text on a variable color background
* using the hsp (perceived brightness) constants from http://alienryderflex.com/hsp.html
* @param {number} r - red (0-255)
* @param {number} g - green (0-255)
* @param {number} b - blue (0-255)
* @returns {string} the contrasting rgb color, white or black
*/
export const rgbContrast = (r, g, b) => {
return Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)) > 165.75
? 'rgb(0,0,0)'
: 'rgb(255,255,255)';
};
const patterns = {
alphanumeric: /^[\w\.-]+$/,
uuid: /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i,
semver:
/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/i,
email:
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i,
url: /^[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,64}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/i,
color: /^(?:#|0x)(?:[a-f0-9]{3}|[a-f0-9]{6})\b|(?:rgb|hsl)a?\([^\)]*\)$/i,
};
function test(str, pattern) {
const match = str.match(pattern);
return !!(match && match.length);
}
/**
* test the type of a value. unifies builtin, regex, and environment/api checks
* @param {unknown} value - the value to check
* @param {string|string[]} type - the type the value should be or a list of allowed values
* @returns {boolean} whether or not the value matches the type
*/
export const is = async (value, type, { extension = '' } = {}) => {
extension = !value || !value.endsWith || value.endsWith(extension);
if (Array.isArray(type)) {
return type.includes(value);
}
switch (type) {
case 'array':
return Array.isArray(value);
case 'object':
return value && typeof value === 'object' && !Array.isArray(value);
case 'undefined':
case 'boolean':
case 'number':
return typeof value === type && extension;
case 'string':
return typeof value === type && extension;
case 'alphanumeric':
case 'uuid':
case 'semver':
case 'email':
case 'url':
case 'color':
return typeof value === 'string' && test(value, patterns[type]) && extension;
case 'file':
return typeof value === 'string' && value && (await fs.isFile(value)) && extension;
}
return false;
};

55
api/fs.mjs Normal file
View File

@ -0,0 +1,55 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* environment-specific file reading
* @namespace fs
*/
import * as fs from '../env/fs.mjs';
/**
* get an absolute path to files within notion
* @param {string} path - relative to the root notion/resources/app/ e.g. renderer/search.js
* @process electron
*/
export const notionPath = fs.notionPath;
/**
* transform a path relative to the enhancer root directory into an absolute path
* @type {function}
* @param {string} path - a url or within-the-enhancer filepath
* @returns {string} an absolute filepath
*/
export const localPath = fs.localPath;
/**
* fetch and parse a json file's contents
* @type {function}
* @param {string} path - a url or within-the-enhancer filepath
* @param {FetchOptions=} opts - the second argument of a fetch() request
* @returns {unknown} the json value of the requested file as a js object
*/
export const getJSON = fs.getJSON;
/**
* fetch a text file's contents
* @type {function}
* @param {string} path - a url or within-the-enhancer filepath
* @param {FetchOptions=} opts - the second argument of a fetch() request
* @returns {string} the text content of the requested file
*/
export const getText = fs.getText;
/**
* check if a file exists
* @type {function}
* @param {string} path - a url or within-the-enhancer filepath
* @returns {boolean} whether or not the file exists
*/
export const isFile = fs.isFile;

21
api/index.cjs Normal file
View File

File diff suppressed because one or more lines are too long

31
api/index.mjs Normal file
View File

@ -0,0 +1,31 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
// compiles to .cjs for use in electron:
// npx -y esbuild insert/api/index.mjs --minify --bundle --format=cjs --outfile=insert/api/index.cjs
/** environment-specific methods and constants */
export * as env from './env.mjs';
/** environment-specific file reading */
export * as fs from './fs.mjs';
/** environment-specific data persistence */
export * as storage from './storage.mjs';
/** access to electron renderer apis */
export * as electron from './electron.mjs';
/** a basic wrapper around notion's unofficial api */
export * as notion from './notion.mjs';
/** helpers for formatting, validating and parsing values */
export * as fmt from './fmt.mjs';
/** interactions with the enhancer's repository of mods */
export * as registry from './registry.mjs';
/** helpers for manipulation of a webpage */
export * as web from './web.mjs';
/** shared notion-style elements */
export * as components from './components/index.mjs';

367
api/notion.mjs Normal file
View File

@ -0,0 +1,367 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* a basic wrapper around notion's content apis
* @namespace notion
*/
import { web, fs, fmt } from './index.mjs';
const standardiseUUID = (uuid) => {
if (uuid?.length === 32 && !uuid.includes('-')) {
uuid = uuid.replace(
/([\d\w]{8})([\d\w]{4})([\d\w]{4})([\d\w]{4})([\d\w]{12})/,
'$1-$2-$3-$4-$5'
);
}
return uuid;
};
/**
* unofficial content api: get a block by id
* (requires user to be signed in or content to be public).
* why not use the official api?
* 1. cors blocking prevents use on the client
* 2. the majority of blocks are still 'unsupported'
* @param {string} id - uuidv4 record id
* @param {string=} table - record type (default: 'block').
* may also be 'collection', 'collection_view', 'space', 'notion_user', 'discussion', or 'comment'
* @returns {Promise<object>} record data. type definitions can be found here:
* https://github.com/NotionX/react-notion-x/tree/master/packages/notion-types/src
*/
export const get = async (id, table = 'block') => {
id = standardiseUUID(id);
const json = await fs.getJSON('https://www.notion.so/api/v3/getRecordValues', {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ requests: [{ table, id }] }),
method: 'POST',
});
return json?.results?.[0]?.value || json;
};
/**
* get the id of the current user (requires user to be signed in)
* @returns {string} uuidv4 user id
*/
export const getUserID = () =>
JSON.parse(localStorage['LRU:KeyValueStore2:current-user-id'] || {}).value;
/**
* get the id of the currently open page
* @returns {string} uuidv4 page id
*/
export const getPageID = () =>
standardiseUUID(
web.queryParams().get('p') || location.pathname.split(/(-|\/)/g).reverse()[0]
);
let _spaceID;
/**
* get the id of the currently open workspace (requires user to be signed in)
* @returns {string} uuidv4 space id
*/
export const getSpaceID = async () => {
if (!_spaceID) _spaceID = (await get(getPageID())).space_id;
return _spaceID;
};
/**
* unofficial content api: search all blocks in a space
* (requires user to be signed in or content to be public).
* why not use the official api?
* 1. cors blocking prevents use on the client
* 2. the majority of blocks are still 'unsupported'
* @param {string=} query - query to search blocks in the space for
* @param {number=} limit - the max number of results to return (default: 20)
* @param {string=} spaceID - uuidv4 workspace id
* @returns {object} the number of total results, the list of matches, and related record values.
* type definitions can be found here: https://github.com/NotionX/react-notion-x/blob/master/packages/notion-types/src/api.ts
*/
export const search = async (query = '', limit = 20, spaceID = getSpaceID()) => {
spaceID = standardiseUUID(await spaceID);
const json = await fs.getJSON('https://www.notion.so/api/v3/search', {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
type: 'BlocksInSpace',
query,
spaceId: spaceID,
limit,
filters: {
isDeletedOnly: false,
excludeTemplates: false,
isNavigableOnly: false,
requireEditPermissions: false,
ancestors: [],
createdBy: [],
editedBy: [],
lastEditedTime: {},
createdTime: {},
},
sort: 'Relevance',
source: 'quick_find',
}),
method: 'POST',
});
return json;
};
/**
* unofficial content api: update a property/the content of an existing record
* (requires user to be signed in or content to be public).
* TEST THIS THOROUGHLY. misuse can corrupt a record, leading the notion client
* to be unable to parse and render content properly and throw errors.
* why not use the official api?
* 1. cors blocking prevents use on the client
* 2. the majority of blocks are still 'unsupported'
* @param {object} pointer - the record being updated
* @param {object} recordValue - the new raw data values to set to the record.
* for examples, use notion.get to fetch an existing block record.
* to use this to update content, set pointer.path to ['properties', 'title]
* and recordValue to an array of rich text segments. a segment is an array
* where the first value is the displayed text and the second value
* is an array of decorations. a decoration is an array where the first value
* is a modifier and the second value specifies it. e.g.
* [
* ['bold text', [['b']]],
* [' '],
* ['an italicised link', [['i'], ['a', 'https://github.com']]],
* [' '],
* ['highlighted text', [['h', 'pink_background']]],
* ]
* more examples can be creating a block with the desired content/formatting,
* then find the value of blockRecord.properties.title using notion.get.
* type definitions can be found here: https://github.com/NotionX/react-notion-x/blob/master/packages/notion-types/src/core.ts
* @param {string} pointer.recordID - uuidv4 record id
* @param {string=} pointer.recordTable - record type (default: 'block').
* may also be 'collection', 'collection_view', 'space', 'notion_user', 'discussion', or 'comment'
* @param {string=} pointer.property - the record property to update.
* for record content, it will be the default: 'title'.
* for page properties, it will be the property id (the key used in pageRecord.properties).
* other possible values are unknown/untested
* @param {string=} pointer.spaceID - uuidv4 workspace id
* @param {string=} pointer.path - the path to the key to be set within the record
* (default: [], the root of the record's values)
* @returns {boolean|object} true if success, else an error object
*/
export const set = async (
{ recordID, recordTable = 'block', spaceID = getSpaceID(), path = [] },
recordValue = {}
) => {
spaceID = standardiseUUID(await spaceID);
recordID = standardiseUUID(recordID);
const json = await fs.getJSON('https://www.notion.so/api/v3/saveTransactions', {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
requestId: fmt.uuidv4(),
transactions: [
{
id: fmt.uuidv4(),
spaceId: spaceID,
operations: [
{
pointer: {
table: recordTable,
id: recordID,
spaceId: spaceID,
},
path,
command: path.length ? 'set' : 'update',
args: recordValue,
},
],
},
],
}),
method: 'POST',
});
return json.errorId ? json : true;
};
/**
* unofficial content api: create and add a new block to a page
* (requires user to be signed in or content to be public).
* TEST THIS THOROUGHLY. misuse can corrupt a record, leading the notion client
* to be unable to parse and render content properly and throw errors.
* why not use the official api?
* 1. cors blocking prevents use on the client
* 2. the majority of blocks are still 'unsupported'
* @param {object} insert - the new record.
* @param {object} pointer - where to insert the new block
* for examples, use notion.get to fetch an existing block record.
* type definitions can be found here: https://github.com/NotionX/react-notion-x/blob/master/packages/notion-types/src/block.ts
* may also be 'collection', 'collection_view', 'space', 'notion_user', 'discussion', or 'comment'
* @param {object=} insert.recordValue - the new raw data values to set to the record.
* @param {object=} insert.recordTable - record type (default: 'block').
* may also be 'collection', 'collection_view', 'space', 'notion_user', 'discussion', or 'comment'
* @param {string=} pointer.prepend - insert before pointer.siblingID. if false, will be appended after
* @param {string=} pointer.siblingID - uuidv4 sibling id. if unset, the record will be
* inserted at the end of the page start (or the start if pointer.prepend is true)
* @param {string=} pointer.parentID - uuidv4 parent id
* @param {string=} pointer.parentTable - parent record type (default: 'block').
* @param {string=} pointer.spaceID - uuidv4 space id
* @param {string=} pointer.userID - uuidv4 user id
* instead of the end
* @returns {string|object} error object or uuidv4 of the new record
*/
export const create = async (
{ recordValue = {}, recordTable = 'block' } = {},
{
prepend = false,
siblingID = undefined,
parentID = getPageID(),
parentTable = 'block',
spaceID = getSpaceID(),
userID = getUserID(),
} = {}
) => {
spaceID = standardiseUUID(await spaceID);
parentID = standardiseUUID(parentID);
siblingID = standardiseUUID(siblingID);
const recordID = standardiseUUID(recordValue?.id ?? fmt.uuidv4()),
path = [],
args = {
type: 'text',
id: recordID,
version: 0,
created_time: new Date().getTime(),
last_edited_time: new Date().getTime(),
parent_id: parentID,
parent_table: parentTable,
alive: true,
created_by_table: 'notion_user',
created_by_id: userID,
last_edited_by_table: 'notion_user',
last_edited_by_id: userID,
space_id: spaceID,
permissions: [{ type: 'user_permission', role: 'editor', user_id: userID }],
};
if (parentTable === 'space') {
parentID = spaceID;
args.parent_id = spaceID;
path.push('pages');
args.type = 'page';
} else if (parentTable === 'collection_view') {
path.push('page_sort');
args.type = 'page';
} else {
path.push('content');
}
const json = await fs.getJSON('https://www.notion.so/api/v3/saveTransactions', {
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
requestId: fmt.uuidv4(),
transactions: [
{
id: fmt.uuidv4(),
spaceId: spaceID,
operations: [
{
pointer: {
table: parentTable,
id: parentID,
spaceId: spaceID,
},
path,
command: prepend ? 'listBefore' : 'listAfter',
args: {
...(siblingID ? { after: siblingID } : {}),
id: recordID,
},
},
{
pointer: {
table: recordTable,
id: recordID,
spaceId: spaceID,
},
path: [],
command: 'set',
args: {
...args,
...recordValue,
},
},
],
},
],
}),
method: 'POST',
});
return json.errorId ? json : recordID;
};
/**
* unofficial content api: upload a file to notion's aws servers
* (requires user to be signed in or content to be public).
* TEST THIS THOROUGHLY. misuse can corrupt a record, leading the notion client
* to be unable to parse and render content properly and throw errors.
* why not use the official api?
* 1. cors blocking prevents use on the client
* 2. the majority of blocks are still 'unsupported'
* @param {File} file - the file to upload
* @param {object=} pointer - where the file should be accessible from
* @param {string=} pointer.pageID - uuidv4 page id
* @param {string=} pointer.spaceID - uuidv4 space id
* @returns {string|object} error object or the url of the uploaded file
*/
export const upload = async (file, { pageID = getPageID(), spaceID = getSpaceID() } = {}) => {
spaceID = standardiseUUID(await spaceID);
pageID = standardiseUUID(pageID);
const json = await fs.getJSON('https://www.notion.so/api/v3/getUploadFileUrl', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify({
bucket: 'secure',
name: file.name,
contentType: file.type,
record: {
table: 'block',
id: pageID,
spaceId: spaceID,
},
}),
});
if (json.errorId) return json;
fetch(json.signedPutUrl, {
method: 'PUT',
headers: { 'content-type': file.type },
body: file,
});
return json.url;
};
/**
* redirect through notion to a resource's signed aws url for display outside of notion
* (requires user to be signed in or content to be public)
* @param src source url for file
* @param {string} recordID uuidv4 record/block/file id
* @param {string=} recordTable record type (default: 'block').
* may also be 'collection', 'collection_view', 'space', 'notion_user', 'discussion', or 'comment'
* @returns {string} url signed if necessary, else string as-is
*/
export const sign = (src, recordID, recordTable = 'block') => {
if (src.startsWith('/')) src = `https://notion.so${src}`;
if (src.includes('secure.notion-static.com')) {
src = new URL(src);
src = `https://www.notion.so/signed/${encodeURIComponent(
src.origin + src.pathname
)}?table=${recordTable}&id=${recordID}`;
}
return src;
};

224
api/registry-validation.mjs Normal file
View File

@ -0,0 +1,224 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
import { fmt, registry } from './index.mjs';
const check = async (
mod,
key,
value,
types,
{
extension = '',
error = `invalid ${key} (${extension ? `${extension} ` : ''}${types}): ${JSON.stringify(
value
)}`,
optional = false,
} = {}
) => {
let test;
for (const type of Array.isArray(types) ? [types] : types.split('|')) {
if (type === 'file') {
test =
value && !value.startsWith('http')
? await fmt.is(`repo/${mod._dir}/${value}`, type, { extension })
: false;
} else test = await fmt.is(value, type, { extension });
if (test) break;
}
if (!test) {
if (optional && (await fmt.is(value, 'undefined'))) return true;
if (error) mod._err(error);
return false;
}
return true;
};
const validateEnvironments = async (mod) => {
mod.environments = mod.environments ?? registry.supportedEnvs;
const isArray = await check(mod, 'environments', mod.environments, 'array');
if (!isArray) return false;
return mod.environments.map((tag) =>
check(mod, 'environments.env', tag, registry.supportedEnvs)
);
},
validateTags = async (mod) => {
const isArray = await check(mod, 'tags', mod.tags, 'array');
if (!isArray) return false;
const categoryTags = ['core', 'extension', 'theme', 'integration'],
containsCategory = mod.tags.filter((tag) => categoryTags.includes(tag)).length;
if (!containsCategory) {
mod._err(
`invalid tags (must contain at least one of 'core', 'extension', 'theme' or 'integration'):
${JSON.stringify(mod.tags)}`
);
return false;
}
const isTheme = mod.tags.includes('theme'),
hasThemeMode = mod.tags.includes('light') || mod.tags.includes('dark'),
isBothThemeModes = mod.tags.includes('light') && mod.tags.includes('dark');
if (isTheme && (!hasThemeMode || isBothThemeModes)) {
mod._err(
`invalid tags (themes must be either 'light' or 'dark', not neither or both):
${JSON.stringify(mod.tags)}`
);
return false;
}
return mod.tags.map((tag) => check(mod, 'tags.tag', tag, 'string'));
},
validateAuthors = async (mod) => {
const isArray = await check(mod, 'authors', mod.authors, 'array');
if (!isArray) return false;
return mod.authors.map((author) => [
check(mod, 'authors.author.name', author.name, 'string'),
check(mod, 'authors.author.email', author.email, 'email', { optional: true }),
check(mod, 'authors.author.homepage', author.homepage, 'url'),
check(mod, 'authors.author.avatar', author.avatar, 'url'),
]);
},
validateCSS = async (mod) => {
const isArray = await check(mod, 'css', mod.css, 'object');
if (!isArray) return false;
const tests = [];
for (const dest of ['frame', 'client', 'menu']) {
if (!mod.css[dest]) continue;
let test = await check(mod, `css.${dest}`, mod.css[dest], 'array');
if (test) {
test = mod.css[dest].map((file) =>
check(mod, `css.${dest}.file`, file, 'file', { extension: '.css' })
);
}
tests.push(test);
}
return tests;
},
validateJS = async (mod) => {
const isArray = await check(mod, 'js', mod.js, 'object');
if (!isArray) return false;
const tests = [];
for (const dest of ['frame', 'client', 'menu']) {
if (!mod.js[dest]) continue;
let test = await check(mod, `js.${dest}`, mod.js[dest], 'array');
if (test) {
test = mod.js[dest].map((file) =>
check(mod, `js.${dest}.file`, file, 'file', { extension: '.mjs' })
);
}
tests.push(test);
}
if (mod.js.electron) {
const isArray = await check(mod, 'js.electron', mod.js.electron, 'array');
if (isArray) {
for (const file of mod.js.electron) {
const isObject = await check(mod, 'js.electron.file', file, 'object');
if (!isObject) {
tests.push(false);
continue;
}
tests.push([
check(mod, 'js.electron.file.source', file.source, 'file', {
extension: '.cjs',
}),
// referencing the file within the electron app
// existence can't be validated, so only format is
check(mod, 'js.electron.file.target', file.target, 'string', {
extension: '.js',
}),
]);
}
} else tests.push(false);
}
return tests;
},
validateOptions = async (mod) => {
const isArray = await check(mod, 'options', mod.options, 'array');
if (!isArray) return false;
const tests = [];
for (const option of mod.options) {
const key = 'options.option',
optTypeValid = await check(mod, `${key}.type`, option.type, registry.optionTypes);
if (!optTypeValid) {
tests.push(false);
continue;
}
option.environments = option.environments ?? registry.supportedEnvs;
tests.push([
check(mod, `${key}.key`, option.key, 'alphanumeric'),
check(mod, `${key}.label`, option.label, 'string'),
check(mod, `${key}.tooltip`, option.tooltip, 'string', {
optional: true,
}),
check(mod, `${key}.environments`, option.environments, 'array').then((isArray) => {
if (!isArray) return false;
return option.environments.map((environment) =>
check(mod, `${key}.environments.env`, environment, registry.supportedEnvs)
);
}),
]);
switch (option.type) {
case 'toggle':
tests.push(check(mod, `${key}.value`, option.value, 'boolean'));
break;
case 'select': {
let test = await check(mod, `${key}.values`, option.values, 'array');
if (test) {
test = option.values.map((value) =>
check(mod, `${key}.values.value`, value, 'string')
);
}
tests.push(test);
break;
}
case 'text':
case 'hotkey':
tests.push(check(mod, `${key}.value`, option.value, 'string'));
break;
case 'number':
case 'color':
tests.push(check(mod, `${key}.value`, option.value, option.type));
break;
case 'file': {
let test = await check(mod, `${key}.extensions`, option.extensions, 'array');
if (test) {
test = option.extensions.map((ext) =>
check(mod, `${key}.extensions.extension`, ext, 'string')
);
}
tests.push(test);
break;
}
}
}
return tests;
};
/**
* internally used to validate mod.json files and provide helpful errors
* @private
* @param {object} mod - a mod's mod.json in object form
* @returns {boolean} whether or not the mod has passed validation
*/
export async function validate(mod) {
let conditions = [
check(mod, 'name', mod.name, 'string'),
check(mod, 'id', mod.id, 'uuid'),
check(mod, 'version', mod.version, 'semver'),
validateEnvironments(mod),
check(mod, 'description', mod.description, 'string'),
check(mod, 'preview', mod.preview, 'file|url', { optional: true }),
validateTags(mod),
validateAuthors(mod),
validateCSS(mod),
validateJS(mod),
validateOptions(mod),
];
do {
conditions = await Promise.all(conditions.flat(Infinity));
} while (conditions.some((condition) => Array.isArray(condition)));
return conditions.every((passed) => passed);
}

160
api/registry.mjs Normal file
View File

@ -0,0 +1,160 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* interactions with the enhancer's repository of mods
* @namespace registry
*/
import { env, fs, storage } from './index.mjs';
import { validate } from './registry-validation.mjs';
/**
* mod ids whitelisted as part of the enhancer's core, permanently enabled
* @constant
* @type {string[]}
*/
export const core = [
'a6621988-551d-495a-97d8-3c568bca2e9e',
'0f0bf8b6-eae6-4273-b307-8fc43f2ee082',
'36a2ffc9-27ff-480e-84a7-c7700a7d232d',
];
/**
* all environments/platforms currently supported by the enhancer
* @constant
* @type {string[]}
*/
export const supportedEnvs = ['linux', 'win32', 'darwin', 'extension'];
/**
* all available configuration types
* @constant
* @type {string[]}
*/
export const optionTypes = ['toggle', 'select', 'text', 'number', 'color', 'file', 'hotkey'];
/**
* the name of the active configuration profile
* @returns {string}
*/
export const profileName = () => storage.get(['currentprofile'], 'default');
/**
* the root database for the current profile
* @returns {object} the get/set functions for the profile's storage
*/
export const profileDB = async () => storage.db(['profiles', await profileName()]);
let _list;
const _errors = [];
/**
* list all available mods in the repo
* @param {function} filter - a function to filter out mods
* @returns {array} a validated list of mod.json objects
*/
export const list = async (filter = (mod) => true) => {
if (!_list) {
// deno-lint-ignore no-async-promise-executor
_list = new Promise(async (res, _rej) => {
const passed = [];
for (const dir of await fs.getJSON('repo/registry.json')) {
try {
const mod = {
...(await fs.getJSON(`repo/${dir}/mod.json`)),
_dir: dir,
_err: (message) => _errors.push({ source: dir, message }),
};
if (await validate(mod)) passed.push(mod);
} catch {
_errors.push({ source: dir, message: 'invalid mod.json' });
}
}
res(passed);
});
}
const filtered = [];
for (const mod of await _list) if (await filter(mod)) filtered.push(mod);
return filtered;
};
/**
* list validation errors encountered when loading the repo
* @returns {{ source: string, message: string }[]} error objects with an error message and a source directory
*/
export const errors = async () => {
await list();
return _errors;
};
/**
* get a single mod from the repo
* @param {string} id - the uuid of the mod
* @returns {object} the mod's mod.json
*/
export const get = async (id) => {
return (await list((mod) => mod.id === id))[0];
};
/**
* checks if a mod is enabled: affected by the core whitelist,
* environment and menu configuration
* @param {string} id - the uuid of the mod
* @returns {boolean} whether or not the mod is enabled
*/
export const enabled = async (id) => {
const mod = await get(id);
if (!mod.environments.includes(env.name)) return false;
if (core.includes(id)) return true;
return (await profileDB()).get(['_mods', id], false);
};
/**
* get a default value of a mod's option according to its mod.json
* @param {string} id - the uuid of the mod
* @param {string} key - the key of the option
* @returns {string|number|boolean|undefined} the option's default value
*/
export const optionDefault = async (id, key) => {
const mod = await get(id),
opt = mod.options.find((opt) => opt.key === key);
if (!opt) return undefined;
switch (opt.type) {
case 'toggle':
case 'text':
case 'number':
case 'color':
case 'hotkey':
return opt.value;
case 'select':
return opt.values[0];
case 'file':
return undefined;
}
};
/**
* access the storage partition of a mod in the current profile
* @param {string} id - the uuid of the mod
* @returns {object} an object with the wrapped get/set functions
*/
export const db = async (id) => {
const db = await profileDB();
return storage.db(
[id],
async (path, fallback = undefined) => {
if (typeof path === 'string') path = [path];
if (path.length === 2) {
// profiles -> profile -> mod -> option
fallback = (await optionDefault(id, path[1])) ?? fallback;
}
return db.get(path, fallback);
},
db.set
);
};

65
api/storage.mjs Normal file
View File

@ -0,0 +1,65 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* environment-specific data persistence
* @namespace storage
*/
import * as storage from '../env/storage.mjs';
/**
* get persisted data
* @type {function}
* @param {string[]} path - the path of keys to the value being fetched
* @param {unknown=} fallback - a default value if the path is not matched
* @returns {Promise} value ?? fallback
*/
export const get = storage.get;
/**
* persist data
* @type {function}
* @param {string[]} path - the path of keys to the value being set
* @param {unknown} value - the data to save
* @returns {Promise} resolves when data has been saved
*/
export const set = storage.set;
/**
* create a wrapper for accessing a partition of the storage
* @type {function}
* @param {string[]} namespace - the path of keys to prefix all storage requests with
* @param {function=} get - the storage get function to be wrapped
* @param {function=} set - the storage set function to be wrapped
* @returns {object} an object with the wrapped get/set functions
*/
export const db = storage.db;
/**
* add an event listener for changes in storage
* @type {function}
* @param {onStorageChangeCallback} callback - called whenever a change in
* storage is initiated from the current process
*/
export const addChangeListener = storage.addChangeListener;
/**
* remove a listener added with storage.addChangeListener
* @type {function}
* @param {onStorageChangeCallback} callback
*/
export const removeChangeListener = storage.removeChangeListener;
/**
* @callback onStorageChangeCallback
* @param {object} event
* @param {string} event.path- the path of keys to the changed value
* @param {string=} event.new - the new value being persisted to the store
* @param {string=} event.old - the previous value associated with the key
*/

301
api/web.mjs Normal file
View File

@ -0,0 +1,301 @@
/**
* notion-enhancer: api
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
* (https://notion-enhancer.github.io/) under the MIT license
*/
'use strict';
/**
* helpers for manipulation of a webpage
* @namespace web
*/
import { fs } from './index.mjs';
let _hotkeyListenersActivated = false,
_hotkeyEventListeners = [],
_documentObserver,
_documentObserverListeners = [];
const _documentObserverEvents = [];
/**
* wait until a page is loaded and ready for modification
* @param {array=} selectors - wait for the existence of elements that match these css selectors
* @returns {Promise} a promise that will resolve when the page is ready
*/
export const whenReady = (selectors = []) => {
return new Promise((res, _rej) => {
const onLoad = () => {
const interval = setInterval(isReady, 100);
function isReady() {
const ready = selectors.every((selector) => document.querySelector(selector));
if (!ready) return;
clearInterval(interval);
res(true);
}
isReady();
};
if (document.readyState !== 'complete') {
document.addEventListener('readystatechange', (_event) => {
if (document.readyState === 'complete') onLoad();
});
} else onLoad();
});
};
/**
* parse the current location search params into a usable form
* @returns {Map<string, string>} a map of the url search params
*/
export const queryParams = () => new URLSearchParams(window.location.search);
/**
* replace special html characters with escaped versions
* @param {string} str
* @returns {string} escaped string
*/
export const escape = (str) =>
str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/'/g, '&#39;')
.replace(/"/g, '&quot;')
.replace(/\\/g, '&#x5C;');
/**
* a tagged template processor for raw html:
* stringifies, minifies, and syntax highlights
* @example web.raw`<p>hello</p>`
* @returns {string} the processed html
*/
export const raw = (str, ...templates) => {
const html = str
.map(
(chunk) =>
chunk +
(['string', 'number'].includes(typeof templates[0])
? templates.shift()
: escape(JSON.stringify(templates.shift(), null, 2) ?? ''))
)
.join('');
return html.includes('<pre')
? html.trim()
: html
.split(/\n/)
.map((line) => line.trim())
.filter((line) => line.length)
.join(' ');
};
/**
* create a single html element inc. attributes and children from a string
* @example web.html`<p>hello</p>`
* @returns {Element} the constructed html element
*/
export const html = (str, ...templates) => {
const $fragment = document.createRange().createContextualFragment(raw(str, ...templates));
return $fragment.children.length === 1 ? $fragment.children[0] : $fragment.children;
};
/**
* appends a list of html elements to a parent
* @param $container - the parent element
* @param $elems - the elements to be appended
* @returns {Element} the updated $container
*/
export const render = ($container, ...$elems) => {
$elems = $elems
.map(($elem) => ($elem instanceof HTMLCollection ? [...$elem] : $elem))
.flat(Infinity)
.filter(($elem) => $elem);
$container.append(...$elems);
return $container;
};
/**
* removes all children from an element without deleting them/their behaviours
* @param $container - the parent element
* @returns {Element} the updated $container
*/
export const empty = ($container) => {
while ($container.firstChild && $container.removeChild($container.firstChild));
return $container;
};
/**
* loads/applies a css stylesheet to the page
* @param {string} path - a url or within-the-enhancer filepath
*/
export const loadStylesheet = (path) => {
const $stylesheet = html`<link
rel="stylesheet"
href="${path.startsWith('https://') ? path : fs.localPath(path)}"
/>`;
render(document.head, $stylesheet);
return $stylesheet;
};
/**
* copy text to the clipboard
* @param {string} str - the string to copy
* @returns {Promise<void>}
*/
export const copyToClipboard = async (str) => {
try {
await navigator.clipboard.writeText(str);
} catch {
const $el = document.createElement('textarea');
$el.value = str;
$el.setAttribute('readonly', '');
$el.style.position = 'absolute';
$el.style.left = '-9999px';
document.body.appendChild($el);
$el.select();
document.execCommand('copy');
document.body.removeChild($el);
}
};
/**
* read text from the clipboard
* @returns {Promise<string>}
*/
export const readFromClipboard = () => {
return navigator.clipboard.readText();
};
const triggerHotkeyListener = (event, hotkey) => {
const inInput = document.activeElement.nodeName === 'INPUT' && !hotkey.listenInInput;
if (inInput) return;
const modifiers = {
metaKey: ['meta', 'os', 'win', 'cmd', 'command'],
ctrlKey: ['ctrl', 'control'],
shiftKey: ['shift'],
altKey: ['alt'],
},
pressed = hotkey.keys.every((key) => {
key = key.toLowerCase();
for (const modifier in modifiers) {
const pressed = modifiers[modifier].includes(key) && event[modifier];
if (pressed) {
// mark modifier as part of hotkey
modifiers[modifier] = [];
return true;
}
}
if (key === 'space') key = ' ';
if (key === 'plus') key = '+';
if (key === event.key.toLowerCase()) return true;
});
if (!pressed) return;
// test for modifiers not in hotkey
// e.g. to differentiate ctrl+x from ctrl+shift+x
for (const modifier in modifiers) {
const modifierPressed = event[modifier],
modifierNotInHotkey = modifiers[modifier].length > 0;
if (modifierPressed && modifierNotInHotkey) return;
}
hotkey.callback(event);
};
/**
* register a hotkey listener to the page
* @param {array|string} keys - the combination of keys that will trigger the hotkey.
* key codes can be tested at http://keycode.info/ and are case-insensitive.
* available modifiers are 'alt', 'ctrl', 'meta', and 'shift'.
* can be provided as a + separated string.
* @param {function} callback - called whenever the keys are pressed
* @param {object=} opts - fine-tuned control over when the hotkey should be triggered
* @param {boolean=} opts.listenInInput - whether the hotkey callback should be triggered
* when an input is focused
* @param {boolean=} opts.keydown - whether to listen for the hotkey on keydown.
* by default, hotkeys are triggered by the keyup event.
*/
export const addHotkeyListener = (
keys,
callback,
{ listenInInput = false, keydown = false } = {}
) => {
if (typeof keys === 'string') keys = keys.split('+');
_hotkeyEventListeners.push({ keys, callback, listenInInput, keydown });
if (!_hotkeyListenersActivated) {
_hotkeyListenersActivated = true;
document.addEventListener('keyup', (event) => {
for (const hotkey of _hotkeyEventListeners.filter(({ keydown }) => !keydown)) {
triggerHotkeyListener(event, hotkey);
}
});
document.addEventListener('keydown', (event) => {
for (const hotkey of _hotkeyEventListeners.filter(({ keydown }) => keydown)) {
triggerHotkeyListener(event, hotkey);
}
});
}
};
/**
* remove a listener added with web.addHotkeyListener
* @param {function} callback
*/
export const removeHotkeyListener = (callback) => {
_hotkeyEventListeners = _hotkeyEventListeners.filter(
(listener) => listener.callback !== callback
);
};
/**
* add a listener to watch for changes to the dom
* @param {onDocumentObservedCallback} callback
* @param {string[]=} selectors
*/
export const addDocumentObserver = (callback, selectors = []) => {
if (!_documentObserver) {
const handle = (queue) => {
while (queue.length) {
const event = queue.shift(),
matchesAddedNode = ($node, selector) =>
$node instanceof Element &&
($node.matches(selector) ||
$node.matches(`${selector} *`) ||
$node.querySelector(selector)),
matchesTarget = (selector) =>
event.target.matches(selector) ||
event.target.matches(`${selector} *`) ||
[...event.addedNodes].some(($node) => matchesAddedNode($node, selector));
for (const listener of _documentObserverListeners) {
if (!listener.selectors.length || listener.selectors.some(matchesTarget)) {
listener.callback(event);
}
}
}
};
_documentObserver = new MutationObserver((list, _observer) => {
if (!_documentObserverEvents.length)
requestIdleCallback(() => handle(_documentObserverEvents));
_documentObserverEvents.push(...list);
});
_documentObserver.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
});
}
_documentObserverListeners.push({ callback, selectors });
};
/**
* remove a listener added with web.addDocumentObserver
* @param {onDocumentObservedCallback} callback
*/
export const removeDocumentObserver = (callback) => {
_documentObserverListeners = _documentObserverListeners.filter(
(listener) => listener.callback !== callback
);
};
/**
* @callback onDocumentObservedCallback
* @param {MutationRecord} event - the observed dom mutation event
*/