mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 13:19:03 +00:00
542 lines
17 KiB
JavaScript
542 lines
17 KiB
JavaScript
/*
|
|
* notion-enhancer
|
|
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* under the MIT license
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
const url = require('url'),
|
|
path = require('path'),
|
|
{ __notion } = require('../../pkg/helpers.js'),
|
|
config = require(`${__notion}/app/config.js`),
|
|
constants = require(`${__notion}/app/shared/constants.js`),
|
|
notion_intl = require(`${__notion}/app/shared/notion-intl/index.js`),
|
|
notionIpc = require(`${__notion}/app/helpers/notionIpc.js`),
|
|
localizationHelper = require(`${__notion}/app/helpers/localizationHelper.js`),
|
|
koMessages = require(`${__notion}/app/i18n/ko_KR/messages.json`),
|
|
schemeHelpers = require(`${__notion}/app/shared/schemeHelpers.js`),
|
|
React = require(`${__notion}/app/node_modules/react/index.js`),
|
|
ReactDOM = require(`${__notion}/app/node_modules/react-dom/index.js`);
|
|
|
|
module.exports = (store, __exports) => {
|
|
if (store().tabs) {
|
|
class Index extends React.PureComponent {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.state = {
|
|
error: false,
|
|
searching: false,
|
|
searchingPeekView: false,
|
|
zoomFactor: 1,
|
|
tabs: 2,
|
|
};
|
|
this.notionElm = [];
|
|
this.loadedElms = [];
|
|
this.reactTabs = [];
|
|
this.handleNotionRef = (notionElm) => {
|
|
this.notionElm.push(notionElm);
|
|
};
|
|
this.searchElm = null;
|
|
this.handleSearchRef = (searchElm) => {
|
|
this.searchElm = searchElm;
|
|
};
|
|
this.handleReload = () => {
|
|
this.setState({ error: false });
|
|
setTimeout(() => {
|
|
if (this.notionElm.length) {
|
|
this.notionElm.forEach(($notion) => {
|
|
if ($notion.isWaitingForResponse()) $notion.reload();
|
|
});
|
|
}
|
|
}, 50);
|
|
};
|
|
window['newtab'] = () => {
|
|
this.setState({ tabs: this.state.tabs + 1 });
|
|
setTimeout(() => this.addListeners(), 100);
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
this.addListeners();
|
|
}
|
|
addListeners() {
|
|
const searchElm = this.searchElm;
|
|
const notionElm = this.notionElm;
|
|
if (!searchElm || !notionElm.length) {
|
|
return;
|
|
}
|
|
|
|
notionElm
|
|
.filter(($notion) => !this.loadedElms.includes($notion))
|
|
.forEach(($notion) => {
|
|
this.loadedElms.push($notion);
|
|
$notion.addEventListener('did-fail-load', (error) => {
|
|
// logger.info('Failed to load:', error);
|
|
if (error.errorCode === -3) {
|
|
return;
|
|
}
|
|
if (
|
|
!error.validatedURL.startsWith(
|
|
schemeHelpers.getSchemeUrl({
|
|
httpUrl: config.default.baseURL,
|
|
protocol: config.default.protocol,
|
|
})
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
this.setState({ error: true });
|
|
});
|
|
notionIpc.receiveIndexFromNotion.addListener(
|
|
$notion,
|
|
'search:start',
|
|
(isPeekView) => {
|
|
this.setState({
|
|
searching: true,
|
|
searchingPeekView: isPeekView,
|
|
});
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
searchElm.focus();
|
|
notionIpc.sendIndexToSearch(searchElm, 'search:start');
|
|
notionIpc.sendIndexToNotion(searchElm, 'search:started');
|
|
}
|
|
);
|
|
notionIpc.receiveIndexFromNotion.addListener(
|
|
$notion,
|
|
'search:stop',
|
|
() => {
|
|
notionIpc.sendIndexToSearch(searchElm, 'search:reset');
|
|
this.setState({
|
|
searching: false,
|
|
});
|
|
this.lastSearchQuery = undefined;
|
|
$notion.getWebContents().stopFindInPage('clearSelection');
|
|
notionIpc.sendIndexToNotion($notion, 'search:stopped');
|
|
}
|
|
);
|
|
notionIpc.receiveIndexFromSearch.addListener(
|
|
searchElm,
|
|
'search:next',
|
|
(query) => {
|
|
$notion.getWebContents().findInPage(query, {
|
|
forward: true,
|
|
findNext: query === this.lastSearchQuery,
|
|
});
|
|
this.lastSearchQuery = query;
|
|
}
|
|
);
|
|
notionIpc.receiveIndexFromSearch.addListener(
|
|
searchElm,
|
|
'search:prev',
|
|
(query) => {
|
|
$notion.getWebContents().findInPage(query, {
|
|
forward: false,
|
|
findNext: query === this.lastSearchQuery,
|
|
});
|
|
this.lastSearchQuery = query;
|
|
}
|
|
);
|
|
notionIpc.receiveIndexFromSearch.addListener(
|
|
searchElm,
|
|
'search:clear',
|
|
() => {
|
|
this.lastSearchQuery = undefined;
|
|
$notion.getWebContents().stopFindInPage('clearSelection');
|
|
}
|
|
);
|
|
notionIpc.receiveIndexFromSearch.addListener(
|
|
searchElm,
|
|
'search:stop',
|
|
() => {
|
|
this.lastSearchQuery = undefined;
|
|
$notion.getWebContents().stopFindInPage('clearSelection');
|
|
this.setState({ searching: false });
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
$notion.focus();
|
|
notionIpc.sendIndexToNotion($notion, 'search:stopped');
|
|
}
|
|
);
|
|
$notion.addEventListener('dom-ready', () => {
|
|
$notion
|
|
.getWebContents()
|
|
.addListener('found-in-page', (event, result) => {
|
|
const matches = result
|
|
? {
|
|
count: result.matches,
|
|
index: result.activeMatchOrdinal,
|
|
}
|
|
: { count: 0, index: 0 };
|
|
notionIpc.sendIndexToSearch(
|
|
searchElm,
|
|
'search:result',
|
|
matches
|
|
);
|
|
});
|
|
notionIpc.proxyAllMainToNotion($notion);
|
|
});
|
|
notionIpc.receiveIndexFromNotion.addListener(
|
|
$notion,
|
|
'search:set-theme',
|
|
(theme) => {
|
|
notionIpc.sendIndexToSearch(
|
|
searchElm,
|
|
'search:set-theme',
|
|
theme
|
|
);
|
|
}
|
|
);
|
|
notionIpc.receiveIndexFromNotion.addListener(
|
|
$notion,
|
|
'zoom',
|
|
(zoomFactor) => {
|
|
$notion.getWebContents().setZoomFactor(zoomFactor);
|
|
searchElm.getWebContents().setZoomFactor(zoomFactor);
|
|
this.setState({ zoomFactor });
|
|
}
|
|
);
|
|
let electronWindow;
|
|
try {
|
|
electronWindow = electron.remote.getCurrentWindow();
|
|
} catch (error) {
|
|
notionIpc.sendToMain('notion:log-error', {
|
|
level: 'error',
|
|
from: 'index',
|
|
type: 'GetCurrentWindowError',
|
|
error: error.message,
|
|
});
|
|
}
|
|
if (!electronWindow) {
|
|
this.setState({ error: true });
|
|
this.handleReload();
|
|
return;
|
|
}
|
|
electronWindow.on('focus', (e) => {
|
|
$notion.focus();
|
|
});
|
|
$notion.addEventListener('dom-ready', function () {
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
document.activeElement.blur();
|
|
}
|
|
$notion.blur();
|
|
$notion.focus();
|
|
});
|
|
electronWindow.addListener('app-command', (e, cmd) => {
|
|
const webContents = $notion.getWebContents();
|
|
if (cmd === 'browser-backward' && webContents.canGoBack()) {
|
|
webContents.goBack();
|
|
} else if (
|
|
cmd === 'browser-forward' &&
|
|
webContents.canGoForward()
|
|
) {
|
|
webContents.goForward();
|
|
}
|
|
});
|
|
electronWindow.addListener('swipe', (e, dir) => {
|
|
const webContents = $notion.getWebContents();
|
|
if (dir === 'left' && webContents.canGoBack()) {
|
|
webContents.goBack();
|
|
} else if (dir === 'right' && webContents.canGoForward()) {
|
|
webContents.goForward();
|
|
}
|
|
});
|
|
const sendFullScreenChangeEvent = () => {
|
|
notionIpc.sendIndexToNotion(
|
|
$notion,
|
|
'notion:full-screen-changed'
|
|
);
|
|
};
|
|
electronWindow.addListener(
|
|
'enter-full-screen',
|
|
sendFullScreenChangeEvent
|
|
);
|
|
electronWindow.addListener(
|
|
'leave-full-screen',
|
|
sendFullScreenChangeEvent
|
|
);
|
|
electronWindow.addListener(
|
|
'enter-html-full-screen',
|
|
sendFullScreenChangeEvent
|
|
);
|
|
electronWindow.addListener(
|
|
'leave-html-full-screen',
|
|
sendFullScreenChangeEvent
|
|
);
|
|
});
|
|
}
|
|
renderSearchContainer() {
|
|
return React.createElement(
|
|
'div',
|
|
{ style: this.getSearchContainerStyle() },
|
|
React.createElement('webview', {
|
|
id: 'search',
|
|
style: this.getSearchWebviewStyle(),
|
|
ref: this.handleSearchRef,
|
|
partition: constants.electronSessionPartition,
|
|
preload: `file://${path.resolve(
|
|
`${__notion}/app/renderer/search.js`
|
|
)}`,
|
|
src: `file://${path.resolve(
|
|
`${__notion}/app/renderer/search.html`
|
|
)}`,
|
|
})
|
|
);
|
|
}
|
|
renderNotionContainer() {
|
|
this.reactTabs = [
|
|
...this.reactTabs,
|
|
...new Array(this.state.tabs - this.reactTabs.length)
|
|
.fill(0)
|
|
.map((i) =>
|
|
React.createElement('webview', {
|
|
className: 'notion',
|
|
style: Index.notionWebviewStyle,
|
|
ref: this.handleNotionRef,
|
|
partition: constants.electronSessionPartition,
|
|
preload: path.resolve(`${__notion}/app/renderer/preload.js`),
|
|
src: this.props.notionUrl,
|
|
})
|
|
),
|
|
];
|
|
return React.createElement(
|
|
'div',
|
|
{ style: this.getNotionContainerStyle() },
|
|
...this.reactTabs
|
|
);
|
|
}
|
|
renderErrorContainer() {
|
|
return React.createElement(
|
|
'div',
|
|
{ style: this.getErrorContainerStyle() },
|
|
React.createElement('img', {
|
|
style: Index.frontImageStyle,
|
|
src: './onboarding-offline.png',
|
|
}),
|
|
React.createElement(
|
|
'div',
|
|
{ style: Index.frontMessageStyle },
|
|
React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(notion_intl.FormattedMessage, {
|
|
id: 'desktopLogin.offline.title',
|
|
defaultMessage: 'Welcome to <strong>Notion</strong>!',
|
|
values: {
|
|
strong: (...chunks) =>
|
|
React.createElement('strong', null, chunks),
|
|
},
|
|
})
|
|
),
|
|
React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(notion_intl.FormattedMessage, {
|
|
id: 'desktopLogin.offline.message',
|
|
defaultMessage: 'Connect to the internet to get started.',
|
|
})
|
|
)
|
|
),
|
|
React.createElement(
|
|
'div',
|
|
null,
|
|
React.createElement(
|
|
'button',
|
|
{ style: Index.reloadButtonStyle, onClick: this.handleReload },
|
|
React.createElement(notion_intl.FormattedMessage, {
|
|
id:
|
|
'desktopLogin.offline.retryConnectingToInternetButton.label',
|
|
defaultMessage: 'Try again',
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
renderDragRegion() {
|
|
return React.createElement('div', { style: Index.dragRegionStyle });
|
|
}
|
|
render() {
|
|
const notionLocale = localizationHelper.getNotionLocaleFromElectronLocale(
|
|
window.navigator.language
|
|
),
|
|
result = React.createElement(
|
|
notion_intl.IntlProvider,
|
|
{
|
|
locale: notionLocale,
|
|
messages: notionLocale === 'ko-KR' ? koMessages : {},
|
|
},
|
|
this.renderDragRegion(),
|
|
this.renderNotionContainer(),
|
|
this.renderSearchContainer(),
|
|
this.renderErrorContainer()
|
|
);
|
|
this.addListeners();
|
|
return result;
|
|
}
|
|
getNotionContainerStyle() {
|
|
const style = {
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
display: this.state.error ? 'none' : 'flex',
|
|
};
|
|
return style;
|
|
}
|
|
getErrorContainerStyle() {
|
|
const style = {
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
display: this.state.error ? 'flex' : 'none',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
padding: 24,
|
|
paddingBottom: '8vh',
|
|
};
|
|
return style;
|
|
}
|
|
getSearchWebviewStyle() {
|
|
const style = {
|
|
width: '100%',
|
|
height: '100%',
|
|
transition: 'transform 70ms ease-in',
|
|
transform: 'translateY(-100%)',
|
|
pointerEvents: 'none',
|
|
};
|
|
if (this.state.searching) {
|
|
style.transition = 'transform 70ms ease-out';
|
|
style.transform = 'translateY(0%)';
|
|
style.pointerEvents = 'auto';
|
|
}
|
|
return style;
|
|
}
|
|
getSearchContainerStyle() {
|
|
const style = {
|
|
position: 'fixed',
|
|
overflow: 'hidden',
|
|
pointerEvents: 'none',
|
|
padding: '0 20px',
|
|
top:
|
|
(this.state.searchingPeekView
|
|
? 0
|
|
: process.platform === 'darwin'
|
|
? 37
|
|
: 45) * this.state.zoomFactor,
|
|
right: (48 - 24) * this.state.zoomFactor,
|
|
width: 440 * this.state.zoomFactor,
|
|
height: 72 * this.state.zoomFactor,
|
|
};
|
|
return style;
|
|
}
|
|
}
|
|
Index.frontMessageStyle = {
|
|
paddingTop: 16,
|
|
paddingBottom: 16,
|
|
textAlign: 'center',
|
|
lineHeight: 1.4,
|
|
fontSize: 17,
|
|
letterSpacing: '-0.01em',
|
|
color: '#424241',
|
|
fontWeight: 500,
|
|
};
|
|
Index.reloadButtonStyle = {
|
|
background: '#fefaf8',
|
|
border: '1px solid #f1cbca',
|
|
boxSizing: 'border-box',
|
|
boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.1)',
|
|
borderRadius: 3,
|
|
lineHeight: 'normal',
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
letterSpacing: '-0.03em',
|
|
color: '#d8615c',
|
|
paddingLeft: 12,
|
|
paddingRight: 12,
|
|
height: 36,
|
|
};
|
|
Index.frontImageStyle = {
|
|
width: 300,
|
|
maxWidth: '100%',
|
|
};
|
|
Index.notionWebviewStyle = {
|
|
width: '100%',
|
|
height: '100%',
|
|
};
|
|
Index.dragRegionStyle = {
|
|
position: 'absolute',
|
|
zIndex: 9999,
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 2,
|
|
pointerEvents: 'none',
|
|
WebkitAppRegion: 'drag',
|
|
};
|
|
|
|
window['__start'] = () => {
|
|
const parsed = url.parse(window.location.href, true),
|
|
notionUrl =
|
|
parsed.query.path ||
|
|
schemeHelpers.getSchemeUrl({
|
|
httpUrl: config.default.baseURL,
|
|
protocol: config.default.protocol,
|
|
});
|
|
delete parsed.search;
|
|
delete parsed.query;
|
|
const plainUrl = url.format(parsed);
|
|
window.history.replaceState(undefined, undefined, plainUrl);
|
|
document.title = localizationHelper
|
|
.createIntlShape(
|
|
localizationHelper.getNotionLocaleFromElectronLocale(
|
|
window.navigator.language
|
|
)
|
|
)
|
|
.formatMessage(
|
|
notion_intl.defineMessages({
|
|
documentTitle: {
|
|
id: 'desktop.documentTitle',
|
|
defaultMessage: 'Notion Desktop',
|
|
},
|
|
}).documentTitle
|
|
);
|
|
const rootElm = document.getElementById('root');
|
|
ReactDOM.render(
|
|
React.createElement(Index, { notionUrl: notionUrl }),
|
|
rootElm
|
|
);
|
|
};
|
|
} else {
|
|
const __start = window['__start'];
|
|
|
|
window['__start'] = () => {
|
|
__start();
|
|
const dragarea = document.querySelector(
|
|
'#root [style*="-webkit-app-region: drag"]'
|
|
),
|
|
default_styles = dragarea.getAttribute('style');
|
|
if (store().tiling_mode) {
|
|
dragarea.style.display = 'none';
|
|
} else {
|
|
document
|
|
.getElementById('notion')
|
|
.addEventListener('ipc-message', (event) => {
|
|
if (event.channel !== 'enhancer:sidebar-width') return;
|
|
dragarea.setAttribute(
|
|
'style',
|
|
`${default_styles} top: 2px; height: ${
|
|
store().dragarea_height
|
|
}px; left: ${event.args[0]};`
|
|
);
|
|
});
|
|
}
|
|
};
|
|
}
|
|
};
|