mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-06 05:29:02 +00:00
321 lines
11 KiB
JavaScript
321 lines
11 KiB
JavaScript
/**
|
|
* notion-enhancer: tabs
|
|
* (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
module.exports = async function ({ components, env, web, fmt, fs }, db, __exports, __eval) {
|
|
const url = require('url'),
|
|
electron = require('electron'),
|
|
electronWindow = electron.remote.getCurrentWindow(),
|
|
notionIpc = env.notionRequire('helpers/notionIpc');
|
|
|
|
let focusedTab, xIcon;
|
|
const tabCache = new Map();
|
|
class Tab {
|
|
id = fmt.uuidv4();
|
|
|
|
$notion = web.html`
|
|
<webview class="notion-webview" partition="persist:notion"
|
|
preload="file://${fs.notionPath('renderer/preload.js')}"
|
|
webpreferences="spellcheck=yes, enableremotemodule=yes"
|
|
></webview>
|
|
`;
|
|
$search = web.html`
|
|
<webview class="search-webview" partition="persist:notion"
|
|
preload="file://${fs.notionPath('renderer/search.js')}"
|
|
src="file:///${fs.notionPath('renderer/search.html')}"
|
|
webpreferences="spellcheck=no, enableremotemodule=yes"
|
|
></webview>
|
|
`;
|
|
|
|
$tabIcon = web.html`<span class="tab-icon"></span>`;
|
|
$tabTitle = web.html`<span class="tab-title"></span>`;
|
|
$closeTab = web.html`<span class="tab-close">${xIcon}</span>`;
|
|
$tab = web.render(
|
|
web.html`<div class="tab" draggable="true" id="${this.id}"></div>`,
|
|
this.$tabIcon,
|
|
this.$tabTitle,
|
|
this.$closeTab
|
|
);
|
|
|
|
constructor(
|
|
$tabs,
|
|
$root,
|
|
{
|
|
notionUrl = 'notion://www.notion.so/',
|
|
cancelAnimation = false,
|
|
icon = '',
|
|
title = 'notion.so',
|
|
} = {}
|
|
) {
|
|
this.$notion.src = notionUrl;
|
|
this.$tabTitle.innerText = title;
|
|
this.setIcon(icon);
|
|
tabCache.set(this.$tab.id, this);
|
|
|
|
web.render($tabs, this.$tab);
|
|
web.render($root, this.$search);
|
|
web.render($root, this.$notion);
|
|
electronWindow.on('focus', () => {
|
|
if (focusedTab === this) this.$notion.focus();
|
|
});
|
|
|
|
this.$tab.addEventListener('click', (event) => {
|
|
if (event.target !== this.$closeTab && !this.$closeTab.contains(event.target)) {
|
|
this.focus();
|
|
}
|
|
});
|
|
this.$closeTab.addEventListener('click', () => this.close());
|
|
|
|
if (!cancelAnimation) {
|
|
this.$tab.animate([{ width: '0px' }, { width: `${this.$tab.clientWidth}px` }], {
|
|
duration: 100,
|
|
easing: 'ease-in',
|
|
}).finished;
|
|
}
|
|
this.focus();
|
|
this.addNotionListeners();
|
|
return this;
|
|
}
|
|
|
|
async focus() {
|
|
document.querySelectorAll('.notion-webview, .search-webview').forEach(($webview) => {
|
|
if (![this.$notion, this.$search].includes($webview)) $webview.style.display = '';
|
|
});
|
|
document.querySelectorAll('.tab.current').forEach(($tab) => {
|
|
if ($tab !== this.$tab) $tab.classList.remove('current');
|
|
});
|
|
this.$tab.classList.add('current');
|
|
this.$notion.style.display = 'flex';
|
|
this.$search.style.display = 'flex';
|
|
this.focusNotion();
|
|
focusedTab = this;
|
|
}
|
|
async close() {
|
|
const $sibling = this.$tab.nextElementSibling || this.$tab.previousElementSibling;
|
|
if ($sibling) {
|
|
if (!focusedTab || focusedTab === this) $sibling.click();
|
|
const width = `${this.$tab.clientWidth}px`;
|
|
this.$tab.style.width = 0;
|
|
this.$tab.style.pointerEvents = 'none';
|
|
await this.$tab.animate([{ width }, { width: '0px' }], {
|
|
duration: 100,
|
|
easing: 'ease-out',
|
|
}).finished;
|
|
this.$tab.remove();
|
|
this.$notion.remove();
|
|
this.$search.remove();
|
|
} else electronWindow.close();
|
|
}
|
|
|
|
setIcon(icon) {
|
|
if (icon.startsWith('url(')) {
|
|
// img
|
|
this.$tabIcon.style.background = icon;
|
|
this.$tabIcon.innerText = '';
|
|
} else {
|
|
// unicode (native)
|
|
this.$tabIcon.innerText = icon;
|
|
this.$tabIcon.style.background = '';
|
|
}
|
|
}
|
|
|
|
webContents() {
|
|
return electron.remote.webContents.fromId(this.$notion.getWebContentsId());
|
|
}
|
|
focusNotion() {
|
|
document.activeElement?.blur?.();
|
|
this.$notion.blur();
|
|
this.$notion.focus();
|
|
requestAnimationFrame(() => {
|
|
notionIpc.sendIndexToNotion(this.$notion, 'notion-enhancer:trigger-title-update');
|
|
});
|
|
}
|
|
focusSearch() {
|
|
document.activeElement?.blur?.();
|
|
this.$search.blur();
|
|
this.$search.focus();
|
|
}
|
|
|
|
addNotionListeners() {
|
|
const fromNotion = (channel, listener) =>
|
|
notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener),
|
|
fromSearch = (channel, listener) =>
|
|
notionIpc.receiveIndexFromSearch.addListener(this.$search, channel, listener),
|
|
toSearch = (channel, data) => notionIpc.sendIndexToSearch(this.$search, channel, data);
|
|
|
|
this.$notion.addEventListener('dom-ready', () => {
|
|
this.focusNotion();
|
|
|
|
const navigateHistory = (event, cmd) => {
|
|
const swipe = event === 'swipe',
|
|
back = swipe ? cmd === 'left' : cmd === 'browser-backward',
|
|
fwd = swipe ? cmd === 'right' : cmd === 'browser-forward';
|
|
if (back && this.$notion.canGoBack()) this.$notion.goBack();
|
|
if (fwd && this.$notion.canGoForward()) this.$notion.goForward();
|
|
};
|
|
electronWindow.addListener('app-command', (e, cmd) => navigateHistory('app-cmd', cmd));
|
|
electronWindow.addListener('swipe', (e, dir) => navigateHistory('swipe', dir));
|
|
|
|
this.webContents().addListener('found-in-page', (event, result) => {
|
|
const matches = result
|
|
? { count: result.matches, index: result.activeMatchOrdinal }
|
|
: { count: 0, index: 0 };
|
|
toSearch('search:result', matches);
|
|
});
|
|
});
|
|
|
|
notionIpc.proxyAllMainToNotion(this.$notion);
|
|
|
|
fromNotion('search:start', () => this.startSearch());
|
|
fromNotion('search:stop', () => this.stopSearch());
|
|
fromNotion('search:set-theme', (theme) => toSearch('search:set-theme', theme));
|
|
fromSearch('search:clear', () => this.clearSearch());
|
|
fromSearch('search:stop', () => this.stopSearch());
|
|
fromSearch('search:next', (query) => this.searchNext(query));
|
|
fromSearch('search:prev', (query) => this.searchPrev(query));
|
|
|
|
fromNotion('zoom', (zoomFactor) => {
|
|
this.webContents().setZoomFactor(zoomFactor);
|
|
});
|
|
|
|
fromNotion('notion-enhancer:set-tab-title', (title) => {
|
|
this.$tabTitle.innerText = title;
|
|
});
|
|
fromNotion('notion-enhancer:set-tab-icon', (icon) => this.setIcon(icon));
|
|
}
|
|
|
|
#firstQuery = true;
|
|
startSearch() {
|
|
this.$search.classList.add('search-active');
|
|
this.focusSearch();
|
|
notionIpc.sendIndexToSearch(this.$search, 'search:start');
|
|
notionIpc.sendIndexToNotion(this.$search, 'search:started');
|
|
}
|
|
clearSearch() {
|
|
this.#firstQuery = true;
|
|
this.webContents().stopFindInPage('clearSelection');
|
|
}
|
|
stopSearch() {
|
|
this.$search.classList.remove('search-active');
|
|
this.focusNotion();
|
|
this.clearSearch();
|
|
notionIpc.sendIndexToSearch(this.$search, 'search:reset');
|
|
notionIpc.sendIndexToNotion(this.$notion, 'search:stopped');
|
|
}
|
|
searchNext(query) {
|
|
this.webContents().findInPage(query, {
|
|
forward: true,
|
|
findNext: !this.#firstQuery,
|
|
});
|
|
this.#firstQuery = false;
|
|
}
|
|
searchPrev(query) {
|
|
this.webContents().findInPage(query, {
|
|
forward: false,
|
|
findNext: !this.#firstQuery,
|
|
});
|
|
this.#firstQuery = false;
|
|
}
|
|
}
|
|
|
|
window['__start'] = async () => {
|
|
const $header = web.html`<header></header>`,
|
|
$tabs = web.html`<div id="tabs"></div>`,
|
|
$newTab = web.html`<div class="new-tab">${await components.feather('plus')}</div>`,
|
|
$root = document.querySelector('#root'),
|
|
$windowActions = web.html`<div id="window-actions"></div>`;
|
|
document.body.prepend(web.render($header, $tabs, $newTab, $windowActions));
|
|
xIcon = await components.feather('x');
|
|
|
|
$newTab.addEventListener('click', () => {
|
|
new Tab($tabs, $root);
|
|
});
|
|
electron.ipcRenderer.on('notion-enhancer:close-tab', (event, id) => {
|
|
const tab = tabCache.get(id);
|
|
if (tab) tab.close();
|
|
});
|
|
|
|
new Tab($tabs, $root, {
|
|
notionUrl: url.parse(window.location.href, true).query.path,
|
|
cancelAnimation: true,
|
|
});
|
|
|
|
let $draggedTab;
|
|
const getDragTarget = ($el) => {
|
|
while (!$el.matches('.tab, header, body')) $el = $el.parentElement;
|
|
if ($el.matches('header')) $el = $el.firstElementChild;
|
|
return $el.matches('#tabs, .tab') ? $el : undefined;
|
|
},
|
|
clearDragStatus = () => {
|
|
document
|
|
.querySelectorAll('.dragged-over')
|
|
.forEach(($el) => $el.classList.remove('dragged-over'));
|
|
},
|
|
resetDraggedTabs = () => {
|
|
if ($draggedTab) {
|
|
clearDragStatus();
|
|
$draggedTab.style.opacity = '';
|
|
$draggedTab = undefined;
|
|
}
|
|
};
|
|
$header.addEventListener('dragstart', (event) => {
|
|
$draggedTab = getDragTarget(event.target);
|
|
$draggedTab.style.opacity = 0.5;
|
|
const tab = tabCache.get($draggedTab.id);
|
|
event.dataTransfer.setData(
|
|
'text',
|
|
JSON.stringify({
|
|
window: electronWindow.webContents.id,
|
|
tab: $draggedTab.id,
|
|
icon: tab.$tabIcon.innerText || tab.$tabIcon.style.background,
|
|
title: tab.$tabTitle.innerText,
|
|
url: tab.$notion.src,
|
|
})
|
|
);
|
|
});
|
|
$header.addEventListener('dragover', (event) => {
|
|
const $target = getDragTarget(event.target);
|
|
if ($target) {
|
|
clearDragStatus();
|
|
$target.classList.add('dragged-over');
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
document.addEventListener('drop', (event) => {
|
|
const eventData = JSON.parse(event.dataTransfer.getData('text')),
|
|
$target = getDragTarget(event.target) || $tabs,
|
|
sameWindow = eventData.window === electronWindow.webContents.id,
|
|
tabMovement =
|
|
!sameWindow ||
|
|
($target &&
|
|
$target !== $draggedTab &&
|
|
$target !== $draggedTab.nextElementSibling &&
|
|
($target.matches('#tabs') ? $target.lastElementChild !== $draggedTab : true));
|
|
if (!sameWindow) {
|
|
electron.ipcRenderer.send('notion-enhancer:close-tab', {
|
|
window: eventData.window,
|
|
id: eventData.tab,
|
|
});
|
|
const transferred = new Tab($tabs, $root, {
|
|
notionUrl: eventData.url,
|
|
cancelAnimation: true,
|
|
icon: eventData.icon,
|
|
title: eventData.title,
|
|
});
|
|
$draggedTab = transferred.$tab;
|
|
}
|
|
if (tabMovement) {
|
|
if ($target.matches('#tabs')) {
|
|
$target.append($draggedTab);
|
|
} else $target.before($draggedTab);
|
|
}
|
|
resetDraggedTabs();
|
|
});
|
|
$header.addEventListener('dragend', (event) => resetDraggedTabs());
|
|
};
|
|
};
|