mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-05 05:09:03 +00:00
new extension: panel-sites (#313)
This commit is contained in:
Ryo Hilmawan
GitHub
parent
4998b34cbe
commit
b76c04428c
12
mods/panel-sites/app.css
Normal file
12
mods/panel-sites/app.css
Normal file
@ -0,0 +1,12 @@
|
||||
/*
|
||||
* panel sites
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
.panel-site {
|
||||
border: none;
|
||||
flex: 1;
|
||||
background: white;
|
||||
}
|
||||
28
mods/panel-sites/mod.js
Normal file
28
mods/panel-sites/mod.js
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* panel sites
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
id: '0d541743-eb2c-4d77-83a8-3b2f5e8e5dff',
|
||||
tags: ['extension', 'panel'],
|
||||
name: 'panel sites',
|
||||
desc: 'embed sites on the site panel.',
|
||||
version: '1.0.0',
|
||||
author: 'CloudHill',
|
||||
options: [
|
||||
{
|
||||
key: 'sites',
|
||||
label: 'list of sites',
|
||||
type: 'file',
|
||||
extensions: ['json'],
|
||||
},
|
||||
],
|
||||
panel: {
|
||||
js: 'panel.js'
|
||||
}
|
||||
};
|
||||
45
mods/panel-sites/panel.js
Normal file
45
mods/panel-sites/panel.js
Normal file
@ -0,0 +1,45 @@
|
||||
/*
|
||||
* panel sites
|
||||
* (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (c) 2020 CloudHill
|
||||
* under the MIT license
|
||||
*/
|
||||
|
||||
const electron = require('electron')
|
||||
|
||||
module.exports = (store) => {
|
||||
let iframe;
|
||||
const mainWindow = electron.remote.getCurrentWindow();
|
||||
const originalUserAgent = mainWindow.webContents.getUserAgent();
|
||||
const mobileUserAgent =
|
||||
'Mozilla/5.0 (Linux; Android 7.0; SM-G930V Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.125 Mobile Safari/537.36'
|
||||
|
||||
// bypass x-frame-options
|
||||
mainWindow.webContents.session.webRequest.onHeadersReceived((details, callback) => {
|
||||
const responseHeaders = Object.entries(details.responseHeaders)
|
||||
.filter( h => !/x-frame-options/i.test(h[0]) );
|
||||
callback({
|
||||
responseHeaders: Object.fromEntries(responseHeaders)
|
||||
});
|
||||
});
|
||||
|
||||
// handle opening mobile sites
|
||||
function setUserAgent(userAgent) {
|
||||
mainWindow.webContents.session.webRequest.onBeforeSendHeaders((details, callback) => {
|
||||
details.requestHeaders['User-Agent'] = userAgent;
|
||||
callback({ cancel: false, requestHeaders: details.requestHeaders });
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
onLoad() {
|
||||
iframe = document.querySelector('.panel-site');
|
||||
if (iframe.hasAttribute('mobile-user-agent'))
|
||||
setUserAgent(mobileUserAgent);
|
||||
},
|
||||
onSwitch() {
|
||||
if (iframe.hasAttribute('mobile-user-agent'))
|
||||
setUserAgent(originalUserAgent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -29,56 +29,11 @@ module.exports = {
|
||||
})();
|
||||
|
||||
// Load panel mods
|
||||
let panelMods = getEnhancements().loaded.filter(mod =>
|
||||
(mod.panel && (store('mods')[mod.id] || {}).enabled)
|
||||
);
|
||||
|
||||
// Get panel info
|
||||
let panelMods =
|
||||
getEnhancements().loaded.filter(
|
||||
mod => (mod.panel && (store('mods')[mod.id] || {}).enabled)
|
||||
);
|
||||
panelMods.forEach(mod => initMod(mod));
|
||||
async function initMod(mod) {
|
||||
try {
|
||||
if (typeof mod.panel === 'object') {
|
||||
// html
|
||||
mod.panel.html = await fs.readFile(
|
||||
path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`)
|
||||
);
|
||||
// name
|
||||
if (!mod.panel.name) mod.panel.name = mod.name;
|
||||
// icon
|
||||
if (mod.panel.icon) {
|
||||
const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`);
|
||||
if (await fs.pathExists(iconPath))
|
||||
mod.panel.icon = await fs.readFile(iconPath);
|
||||
} else {
|
||||
mod.panel.icon = mod.panel.name[0];
|
||||
}
|
||||
// js
|
||||
if (mod.panel.js) {
|
||||
const jsPath = `../${mod.dir}/${mod.panel.js}`;
|
||||
if (await fs.pathExists(path.resolve(__dirname, jsPath))) {
|
||||
mod.panel.js = require(jsPath)((...args) => {
|
||||
if (!args.length) return store(mod.id, mod.defaults);
|
||||
if (args.length === 1 && typeof args[0] === 'object')
|
||||
return store(mod.id, { ...mod.defaults, ...args[0] });
|
||||
const other_mod = modules.find((m) => m.id === args[0]);
|
||||
return store(args[0], {
|
||||
...(other_mod ? other_mod.defaults : {}),
|
||||
...(args[1] || {})
|
||||
})
|
||||
}, __exports);
|
||||
}
|
||||
}
|
||||
} else if (typeof mod.panel === 'string') {
|
||||
mod.panel.icon = mod.name[0];
|
||||
mod.panel.html = await fs.readFile(
|
||||
path.resolve(__dirname, `../${mod.dir}/${mod.panel}`)
|
||||
);
|
||||
} else throw Error;
|
||||
} catch (err) {
|
||||
console.log('invalid panel mod: ' + mod.name);
|
||||
panelMods = panelMods.filter(panelMod => panelMod !== mod);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('readystatechange', (event) => {
|
||||
if (document.readyState !== 'complete') return false;
|
||||
@ -167,11 +122,9 @@ module.exports = {
|
||||
loadContent(mod);
|
||||
loaded = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
if (!loaded) {
|
||||
loadContent(panelMods[0]);
|
||||
});
|
||||
}
|
||||
if (!loaded) loadContent(panelMods[0]);
|
||||
|
||||
function loadContent(mod) {
|
||||
if (curPanel.js && curPanel.js.onSwitch) curPanel.js.onSwitch();
|
||||
@ -181,7 +134,7 @@ module.exports = {
|
||||
panel.querySelector('.enhancer-panel--title').innerHTML = mod.panel.name || mod.name;
|
||||
|
||||
// Reload button
|
||||
let reloadButton = document.querySelector('.enhancer-panel--reload-button');
|
||||
let reloadButton = panel.querySelector('.enhancer-panel--reload-button');
|
||||
if (reloadButton) reloadButton.remove();
|
||||
if (mod.panel.reload) {
|
||||
reloadButton = createElement(
|
||||
@ -282,17 +235,19 @@ module.exports = {
|
||||
}
|
||||
|
||||
function renderSwitcher() {
|
||||
if (document.querySelector('.enhancer-panel--overlay-container')) return;
|
||||
if (panel.querySelector('.enhancer-panel--overlay-container')) return;
|
||||
|
||||
// Layer to close switcher
|
||||
const overlayContainer = createElement(
|
||||
'<div class="enhancer-panel--overlay-container"></div>'
|
||||
);
|
||||
overlayContainer.addEventListener('click', hideSwitcher)
|
||||
document.querySelector('.notion-app-inner').appendChild(overlayContainer);
|
||||
document
|
||||
.querySelector('.notion-app-inner')
|
||||
.appendChild(overlayContainer);
|
||||
|
||||
// Position switcher below header
|
||||
const rect = header.getBoundingClientRect();
|
||||
const rect = panel.querySelector('.enhancer-panel--header').getBoundingClientRect();
|
||||
const div = createElement(`
|
||||
<div style="position: fixed; top: ${rect.top}px; left: ${rect.left}px; width: ${rect.width}px; height: ${rect.height}px ">
|
||||
<div style="position: relative; top: 100%; pointer-events: auto;"></div>
|
||||
@ -349,7 +304,7 @@ module.exports = {
|
||||
}
|
||||
|
||||
function enableResize() {
|
||||
const handle = resize.firstElementChild;
|
||||
const handle = panel.querySelector('.enhancer-panel--resize div');
|
||||
handle.addEventListener('mousedown', initDrag);
|
||||
|
||||
let startX, startWidth;
|
||||
@ -410,6 +365,107 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// INITIALIZATION FUNCTIONS
|
||||
|
||||
async function initMod(mod) {
|
||||
// load panel sites
|
||||
if (mod.id === '0d541743-eb2c-4d77-83a8-3b2f5e8e5dff') {
|
||||
panelMods = panelMods.filter(panelMod => panelMod !== mod);
|
||||
return panelMods.push(...initPanelSites(mod));
|
||||
}
|
||||
try {
|
||||
if (typeof mod.panel === 'object') {
|
||||
// html
|
||||
mod.panel.html = await fs.readFile(
|
||||
path.resolve(__dirname, `../${mod.dir}/${mod.panel.html}`)
|
||||
);
|
||||
// name
|
||||
if (!mod.panel.name) mod.panel.name = mod.name;
|
||||
// icon
|
||||
if (mod.panel.icon) {
|
||||
const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`);
|
||||
if (await fs.pathExists(iconPath))
|
||||
mod.panel.icon = await fs.readFile(iconPath);
|
||||
} else {
|
||||
mod.panel.icon = mod.panel.name[0];
|
||||
}
|
||||
// js
|
||||
if (mod.panel.js) {
|
||||
const jsPath = `../${mod.dir}/${mod.panel.js}`;
|
||||
if (await fs.pathExists(path.resolve(__dirname, jsPath))) {
|
||||
mod.panel.js = require(jsPath)(loadStore(mod), __exports);
|
||||
}
|
||||
}
|
||||
} else if (typeof mod.panel === 'string') {
|
||||
mod.panel.icon = mod.name[0];
|
||||
mod.panel.html = await fs.readFile(
|
||||
path.resolve(__dirname, `../${mod.dir}/${mod.panel}`)
|
||||
);
|
||||
} else throw Error;
|
||||
} catch (err) {
|
||||
console.log('invalid panel mod: ' + mod.name);
|
||||
panelMods = panelMods.filter(panelMod => panelMod !== mod);
|
||||
}
|
||||
}
|
||||
|
||||
function initPanelSites(mod) {
|
||||
let panelSites = [];
|
||||
const sitesPath = store(mod.id).sites;
|
||||
if (sitesPath) {
|
||||
try {
|
||||
const sites = require(sitesPath);
|
||||
const invalid = false;
|
||||
const sitePanelJs = require('../panel-sites/panel.js')(loadStore(mod), __exports);
|
||||
|
||||
const frameUrl = function(url, mobile) {
|
||||
if (!/(^https?:\/\/)/.test(url)) url = 'https://' + url;
|
||||
return `<iframe src=${url} class="panel-site" ${mobile ? 'mobile-user-agent' : ''}></iframe>`;
|
||||
}
|
||||
|
||||
sites.forEach(site => {
|
||||
if (site.url && site.name) {
|
||||
|
||||
// get url and icon
|
||||
const iframe = frameUrl(site.url, site.mobile);
|
||||
const icon = `<img style="width: 100%; height: 100%;"
|
||||
src="${site.icon || `https://www.google.com/s2/favicons?domain=${site.url}`}" />`;
|
||||
|
||||
const panelMod = {
|
||||
id: `${mod.id}-${site.url}`,
|
||||
panel: {
|
||||
name: site.name,
|
||||
html: iframe,
|
||||
icon: icon,
|
||||
js: sitePanelJs,
|
||||
fullHeight: true,
|
||||
reload: true,
|
||||
},
|
||||
}
|
||||
panelSites.push(panelMod);
|
||||
} else invalid = true;
|
||||
});
|
||||
if (invalid) throw Error;
|
||||
}
|
||||
catch (err) {
|
||||
console.log('panel site error');
|
||||
}
|
||||
}
|
||||
return panelSites;
|
||||
}
|
||||
|
||||
function loadStore(mod) {
|
||||
return (...args) => {
|
||||
if (!args.length) return store(mod.id, mod.defaults);
|
||||
if (args.length === 1 && typeof args[0] === 'object')
|
||||
return store(mod.id, { ...mod.defaults, ...args[0] });
|
||||
const other_mod = modules.find((m) => m.id === args[0]);
|
||||
return store(args[0], {
|
||||
...(other_mod ? other_mod.defaults : {}),
|
||||
...(args[1] || {})
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user