From cb7838350fbfe8120d8b12c727841eb3d0a8ab67 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Fri, 10 Dec 2021 23:36:56 +1100 Subject: [PATCH] tabs: inter-window drag, titles & icons --- repo/font-chooser/fonts.css | 2 +- repo/font-chooser/fonts.mjs | 2 +- repo/font-chooser/mod.json | 2 +- repo/integrated-titlebar/tabs.mjs | 8 -- repo/tabs/client.mjs | 40 ++++++++ repo/tabs/main.cjs | 14 +++ repo/tabs/mod.json | 6 +- repo/tabs/rendererIndex.cjs | 146 +++++++++++++++++++++--------- repo/tabs/tabs.css | 11 +++ 9 files changed, 177 insertions(+), 54 deletions(-) create mode 100644 repo/tabs/client.mjs create mode 100644 repo/tabs/main.cjs diff --git a/repo/font-chooser/fonts.css b/repo/font-chooser/fonts.css index f118c8d..7d5b32e 100644 --- a/repo/font-chooser/fonts.css +++ b/repo/font-chooser/fonts.css @@ -1,6 +1,6 @@ /** * notion-enhancer: font chooser - * (c) 2021 TorchAtlas (https://bit.ly/torchatlas/) + * (c) 2021 TorchAtlas (https://github.com/torchatlas/) * (c) 2021 admiraldus (https://github.com/admiraldus) * (c) 2021 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license diff --git a/repo/font-chooser/fonts.mjs b/repo/font-chooser/fonts.mjs index 5d78cac..5d344d3 100644 --- a/repo/font-chooser/fonts.mjs +++ b/repo/font-chooser/fonts.mjs @@ -1,6 +1,6 @@ /** * notion-enhancer: font chooser - * (c) 2021 TorchAtlas (https://bit.ly/torchatlas/) + * (c) 2021 TorchAtlas (https://github.com/torchatlas/) * (c) 2021 admiraldus (https://github.com/admiraldus * (c) 2021 dragonwocky (https://dragonwocky.me/) * (https://notion-enhancer.github.io/) under the MIT license diff --git a/repo/font-chooser/mod.json b/repo/font-chooser/mod.json index f1fe6fe..9d36d8a 100644 --- a/repo/font-chooser/mod.json +++ b/repo/font-chooser/mod.json @@ -7,7 +7,7 @@ "authors": [ { "name": "TorchAtlas", - "homepage": "https://bit.ly/torchatlas/", + "homepage": "https://github.com/torchatlas/", "avatar": "https://avatars.githubusercontent.com/u/12666855" } ], diff --git a/repo/integrated-titlebar/tabs.mjs b/repo/integrated-titlebar/tabs.mjs index a8ceb07..e3dacaa 100644 --- a/repo/integrated-titlebar/tabs.mjs +++ b/repo/integrated-titlebar/tabs.mjs @@ -15,14 +15,6 @@ import { createWindowButtons } from './buttons.mjs'; windowActionsSelector = '#window-actions'; await web.whenReady([windowActionsSelector]); - // const $tabs = document.querySelector(topbarActionsSelector), - // $dragarea = web.html`
`; - // $tabs.prepend($dragarea); - // document.documentElement.style.setProperty( - // '--integrated_titlebar--dragarea-height', - // dragareaHeight + 'px' - // ); - const $topbarActions = document.querySelector(windowActionsSelector), $windowButtons = await createWindowButtons(api, db); web.render($topbarActions, $windowButtons); diff --git a/repo/tabs/client.mjs b/repo/tabs/client.mjs new file mode 100644 index 0000000..961f0d4 --- /dev/null +++ b/repo/tabs/client.mjs @@ -0,0 +1,40 @@ +/** + * notion-enhancer: theming + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'use strict'; + +export default async function ({ electron }, db) { + let title = '', + icon = ''; + const notionSetWindowTitle = __electronApi.setWindowTitle, + imgIconSelector = + '.notion-topbar > div > :nth-child(2) > .notion-focusable:last-child .notion-record-icon img', + nativeIconSelector = + '.notion-topbar > div > :nth-child(2) > .notion-focusable:last-child .notion-record-icon [role="image"]', + getIcon = () => { + const $imgIcon = document.querySelector(imgIconSelector), + $nativeIcon = document.querySelector(nativeIconSelector); + if ($imgIcon) { + return $imgIcon.style.background.replace( + /url\("\/images/, + 'url("notion://www.notion.so/images' + ); + } + if ($nativeIcon) return $nativeIcon.ariaLabel; + return ''; + }, + updateTitle = (newTitle = title) => { + if (!newTitle) return; + title = newTitle; + icon = getIcon(); + electron.sendMessageToHost('set-tab-title', title); + electron.sendMessageToHost('set-tab-icon', icon); + notionSetWindowTitle(title); + }; + __electronApi.setWindowTitle = (newTitle) => updateTitle(newTitle); + document.addEventListener('focus', updateTitle); + electron.onMessage('trigger-title-update', () => updateTitle()); +} diff --git a/repo/tabs/main.cjs b/repo/tabs/main.cjs new file mode 100644 index 0000000..395cf8e --- /dev/null +++ b/repo/tabs/main.cjs @@ -0,0 +1,14 @@ +/** + * notion-enhancer: tabs + * (c) 2021 dragonwocky (https://dragonwocky.me/) + * (https://notion-enhancer.github.io/) under the MIT license + */ + +'use strict'; + +module.exports = async function ({}, db, __exports, __eval) { + const electron = require('electron'); + electron.ipcMain.on('notion-enhancer:close-tab', (event, { window, id }) => { + electron.webContents.fromId(window).send('notion-enhancer:close-tab', id); + }); +}; diff --git a/repo/tabs/mod.json b/repo/tabs/mod.json index fa97f56..794ac28 100644 --- a/repo/tabs/mod.json +++ b/repo/tabs/mod.json @@ -17,7 +17,11 @@ "frame": ["tabs.css"] }, "js": { - "electron": [{ "source": "rendererIndex.cjs", "target": "renderer/index.js" }] + "client": ["client.mjs"], + "electron": [ + { "source": "main.cjs", "target": "main/main.js" }, + { "source": "rendererIndex.cjs", "target": "renderer/index.js" } + ] }, "options": [ { diff --git a/repo/tabs/rendererIndex.cjs b/repo/tabs/rendererIndex.cjs index 5a838dc..439da97 100644 --- a/repo/tabs/rendererIndex.cjs +++ b/repo/tabs/rendererIndex.cjs @@ -15,6 +15,8 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export let focusedTab, xIcon; const tabCache = new Map(); class Tab { + id = fmt.uuidv4(); + $notion = web.html` `; - $tabTitle = web.html`v0.11.0 plan v0.11.0 plan v0.11.0 plan v0.11.0 plan`; + $tabIcon = web.html``; + $tabTitle = web.html``; $closeTab = web.html`${xIcon}`; $tab = web.render( - web.html`
`, + web.html`
`, + this.$tabIcon, this.$tabTitle, this.$closeTab ); - constructor($tabs, $root, notionUrl = 'notion://www.notion.so/') { + 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); @@ -50,21 +65,23 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export this.$tab.addEventListener('click', (event) => { if (event.target !== this.$closeTab && !this.$closeTab.contains(event.target)) { - this.focusTab(); + this.focus(); } }); - this.$closeTab.addEventListener('click', () => this.closeTab()); + this.$closeTab.addEventListener('click', () => this.close()); - this.focusTab(); - this.$tab.animate([{ width: '0px' }, { width: `${this.$tab.clientWidth}px` }], { - duration: 100, - easing: 'ease-in', - }).finished; - this.listenToNotion(); + 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 focusTab() { + async focus() { document.querySelectorAll('.notion-webview, .search-webview').forEach(($webview) => { if (![this.$notion, this.$search].includes($webview)) $webview.style.display = ''; }); @@ -77,9 +94,10 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export this.focusNotion(); focusedTab = this; } - async closeTab() { + 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'; @@ -90,10 +108,21 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export this.$tab.remove(); this.$notion.remove(); this.$search.remove(); - if (focusedTab === this) $sibling.click(); } 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()); } @@ -101,6 +130,9 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export document.activeElement?.blur?.(); this.$notion.blur(); this.$notion.focus(); + requestAnimationFrame(() => { + notionIpc.sendIndexToNotion(this.$notion, 'notion-enhancer:trigger-title-update'); + }); } focusSearch() { document.activeElement?.blur?.(); @@ -108,7 +140,7 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export this.$search.focus(); } - listenToNotion() { + addNotionListeners() { const fromNotion = (channel, listener) => notionIpc.receiveIndexFromNotion.addListener(this.$notion, channel, listener), fromSearch = (channel, listener) => @@ -149,6 +181,11 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export 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; @@ -194,65 +231,90 @@ module.exports = async function ({ components, env, web, fmt, fs }, db, __export 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; }, - resetTabs = () => { + 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, - title: $draggedTab.children[0].innerText, - url: tabCache.get($draggedTab.id).$notion.src, + 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) { - resetTabs(); + clearDragStatus(); $target.classList.add('dragged-over'); event.preventDefault(); } }); - $header.addEventListener('dragend', (event) => { - resetTabs(); - $draggedTab.style.opacity = ''; - $draggedTab = undefined; - }); document.addEventListener('drop', (event) => { const eventData = JSON.parse(event.dataTransfer.getData('text')), + $target = getDragTarget(event.target) || $tabs, sameWindow = eventData.window === electronWindow.webContents.id, - $target = getDragTarget(event.target), - movement = - $target && - (!sameWindow || - ($target !== $draggedTab && - $target !== $draggedTab.nextElementSibling && - ($target.matches('#tabs') ? $target.lastElementChild !== $draggedTab : true))); - if (movement) { - if (sameWindow) { - if ($target.matches('#tabs')) { - $target.append($draggedTab); - } else $target.before($draggedTab); - } + 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(); }); - - $newTab.addEventListener('click', () => { - new Tab($tabs, $root, url.parse(window.location.href, true).query.path); - }); - $newTab.click(); + $header.addEventListener('dragend', (event) => resetDraggedTabs()); }; }; diff --git a/repo/tabs/tabs.css b/repo/tabs/tabs.css index d2c3173..7f57848 100644 --- a/repo/tabs/tabs.css +++ b/repo/tabs/tabs.css @@ -42,6 +42,7 @@ header { display: flex; flex-grow: 1; flex-shrink: 1; + width: 14em; max-width: 14em; overflow: hidden; padding: 6.4px 9.6px 6.4px 9.6px; @@ -55,6 +56,16 @@ header { border-bottom: 3px solid var(--theme--ui_divider); -webkit-app-region: no-drag; } +.tab .tab-icon { + font-size: 14px; + margin-right: 6px; +} +.tab .tab-icon[style*='background'] { + width: 14px; + height: 14px; + align-self: center; + margin-right: 8px; +} .tab .tab-title { white-space: nowrap; overflow: hidden;