diff --git a/mods/side-panel/icons/double-chevron.svg b/mods/side-panel/icons/double-chevron.svg new file mode 100644 index 0000000..725d191 --- /dev/null +++ b/mods/side-panel/icons/double-chevron.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/mods/side-panel/icons/reload.svg b/mods/side-panel/icons/reload.svg new file mode 100644 index 0000000..d50b922 --- /dev/null +++ b/mods/side-panel/icons/reload.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/mods/side-panel/icons/switcher.svg b/mods/side-panel/icons/switcher.svg new file mode 100644 index 0000000..e47e262 --- /dev/null +++ b/mods/side-panel/icons/switcher.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/mods/side-panel/mod.js b/mods/side-panel/mod.js index 55a0a5f..bda7a63 100644 --- a/mods/side-panel/mod.js +++ b/mods/side-panel/mod.js @@ -20,6 +20,14 @@ module.exports = { author: 'CloudHill', hacks: { 'renderer/preload.js'(store, __exports) { + // Load icons + let icons = {}; + (async () => { + icons.doubleChevron = await fs.readFile( path.resolve(__dirname, 'icons/double-chevron.svg') ); + icons.switcher = await fs.readFile( path.resolve(__dirname, 'icons/switcher.svg') ); + icons.reload = await fs.readFile( path.resolve(__dirname, 'icons/reload.svg') ); + })(); + // Load panel mods let panelMods = getEnhancements().loaded.filter(mod => (mod.panel && (store('mods')[mod.id] || {}).enabled) @@ -31,29 +39,28 @@ module.exports = { try { if (typeof mod.panel === 'object') { // html - mod.panelHtml = await fs.readFile( + 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 - mod.panelIcon = mod.panel.name[0]; if (mod.panel.icon) { const iconPath = path.resolve(__dirname, `../${mod.dir}/${mod.panel.icon}`); if (await fs.pathExists(iconPath)) - mod.panelIcon = await fs.readFile(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.panelJs = jsPath; + mod.panel.js = require(jsPath)(store(mod.id)); } - // fullHeight - if (mod.panel.fullHeight) mod.panelFullHeight = mod.panel.fullHeight; } else if (typeof mod.panel === 'string') { - mod.panelIcon = mod.name[0]; - mod.panelHtml = await fs.readFile( + mod.panel.icon = mod.name[0]; + mod.panel.html = await fs.readFile( path.resolve(__dirname, `../${mod.dir}/${mod.panel}`) ); } else throw Error; @@ -62,13 +69,14 @@ module.exports = { panelMods = panelMods.filter(panelMod => panelMod !== mod); } } - + document.addEventListener('readystatechange', (event) => { if (document.readyState !== 'complete') return false; if (panelMods.length < 1) return; + const attempt_interval = setInterval(enhance, 500); function enhance() { - let curPanelJs; + let curPanel = {}; const frame = document.querySelector('.notion-frame'); if (!frame) return; @@ -77,37 +85,32 @@ module.exports = { // Initialize panel const container = createElement( '
' - ) + ); const panel = createElement( `
` - ) + ); frame.after(container); container.appendChild(panel); - + // Panel contents const header = createElement(`
- `) - const toggle = createElement(` -
- - - - -
- `) + `); + const toggle = createElement( + `
${icons.doubleChevron}
` + ); const content = createElement( '
' - ) + ); const resize = createElement(`
- `) + `); panel.append(header, content, resize); @@ -115,14 +118,9 @@ module.exports = { if (panelMods.length > 1) { header.addEventListener('click', renderSwitcher); - const switcherIcon = createElement(` -
- - - - -
- `) + const switcherIcon = createElement( + `
${icons.switcher}
` + ) header.appendChild(switcherIcon); } else header.addEventListener('click', togglePanel); @@ -150,23 +148,32 @@ module.exports = { } function loadContent(mod) { - if (curPanelJs && curPanelJs.onSwitch) curPanelJs.onSwitch(); - - if (mod.panelJs) { - curPanelJs = require(mod.panelJs)(store(mod.id)); - } else curPanelJs = null; + if (curPanel.js && curPanel.js.onSwitch) curPanel.js.onSwitch(); + curPanel = mod.panel; store().last_open = mod.id; - panel.querySelector('.enhancer-panel--title').innerText = mod.panel.name || mod.name; - panel.querySelector('.enhancer-panel--icon').innerHTML = mod.panelIcon; - document.getElementById('enhancer-panel--content').innerHTML = mod.panelHtml; - - if (mod.panelFullHeight) { - panel.dataset.fullHeight = mod.panelFullHeight; - } else panel.dataset.fullHeight = ''; + panel.querySelector('.enhancer-panel--title').innerHTML = mod.panel.name || mod.name; - if (curPanelJs && curPanelJs.onLoad) - curPanelJs.onLoad(); + // reload button + let reloadButton = document.querySelector('.enhancer-panel--reload-button'); + if (reloadButton) reloadButton.remove(); + if (mod.panel.reload) { + reloadButton = createElement( + `
${icons.reload}
` + ) + reloadButton.addEventListener('click', e => { + e.stopPropagation(); + loadContent(mod); + }) + panel.querySelector('.enhancer-panel--title').after(reloadButton); + } + + panel.querySelector('.enhancer-panel--icon').innerHTML = mod.panel.icon; + document.getElementById('enhancer-panel--content').innerHTML = mod.panel.html; + panel.dataset.fullHeight = mod.panel.fullHeight || false; + + if (curPanel.js && curPanel.js.onLoad) + curPanel.js.onLoad(); } function unlockPanel(animate) { @@ -192,8 +199,8 @@ module.exports = { hidePanel(); - if (curPanelJs && curPanelJs.onUnlock) { - curPanelJs.onUnlock(); + if (curPanel.js && curPanel.js.onUnlock) { + curPanel.js.onUnlock(); } } @@ -209,8 +216,8 @@ module.exports = { panel.removeEventListener('mouseover', showPanel); panel.removeEventListener('mouseleave', hidePanel); - if (curPanelJs && curPanelJs.onLock) { - curPanelJs.onLock(); + if (curPanel.js && curPanel.js.onLock) { + curPanel.js.onLock(); } } @@ -239,7 +246,7 @@ module.exports = { if (mod.panel) { const item = createElement( `
-
${mod.panelIcon}
+
${mod.panel.icon}
${mod.panel.name || mod.name}
` ); @@ -350,8 +357,8 @@ module.exports = { if (width > 480) width = 480; setPanelWidth(width); - if (curPanelJs && curPanelJs.onResize) { - curPanelJs.onResize(); + if (curPanel.js && curPanel.js.onResize) { + curPanel.js.onResize(); } }