dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 13:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix tab reordering and animations

Browse Source
This commit is contained in:
dragonwocky 2020-10-15 23:48:54 +11:00
parent 796fac9466
commit b10ec8f136
Signed by: dragonwocky
GPG Key ID: C7A48B7846AA706D
2 changed files with 63 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mods/core/createWindow.js
View File

@ -79,7 +79,7 @@ module.exports = (store, __exports) => {
}); });
electron.app.on('before-quit', () => (intended_quit = true)); electron.app.on('before-quit', () => (intended_quit = true));
window.loadURL(__exports.getIndexUrl(relativeUrl)); window.loadURL(__exports.getIndexUrl(relativeUrl));
window.webContents.openDevTools(); // window.webContents.openDevTools();
return window; return window;
}; };
return __exports.createWindow; return __exports.createWindow;

107
mods/core/render.js
View File

@ -43,6 +43,7 @@ module.exports = (store, __exports) => {
searchingPeekView: false, searchingPeekView: false,
zoomFactor: 1, zoomFactor: 1,
tabs: new Map([[0, ['notion.so', true]]]), tabs: new Map([[0, ['notion.so', true]]]),
slideIn: new Set(),
}; };
this.$titlebar = null; this.$titlebar = null;
this.$dragging = null; this.$dragging = null;
@ -74,52 +75,62 @@ module.exports = (store, __exports) => {
// draggable re-ordering // draggable re-ordering
const getTab = ($el) => { const getTab = ($el) => {
if ($el.tagName !== 'BUTTON') $el = $el.parentElement;
if ($el.innerText === '+') if ($el.innerText === '+')
return [null, document.querySelector('.tab.new')]; return [null, document.querySelector('.tab.new')];
if ($el.innerText === '×') $el = $el.parentElement; const tab = Object.entries(this.views.tabs).find(
if (!$el.innerText.endsWith('×')) $el = $el.parentElement; ([id, $node]) => $node === $el
return (
Object.entries(this.views.tabs).find(
([id, $node]) => $node === $el
) || []
); );
return tab ? [+tab[0], tab[1]] : [];
}; };
// document.addEventListener('dragstart', (event) => { document.addEventListener('dragstart', (event) => {
// if (!this.$titlebar) return; if (!this.$titlebar) return;
// this.$dragging = getTab(event.target)[0]; this.$dragging = getTab(event.target)[0];
// event.target.style.opacity = 0.5; event.target.style.opacity = 0.5;
// }); });
// document.addEventListener('dragend', (event) => { document.addEventListener('dragend', (event) => {
// if (!this.$titlebar) return; if (!this.$titlebar) return;
// event.target.style.opacity = ''; event.target.style.opacity = '';
// }); });
// document.addEventListener('dragover', (event) => { document.addEventListener('dragover', (event) => {
// if (!this.$titlebar) return; if (!this.$titlebar) return;
// event.preventDefault(); event.preventDefault();
// document document
// .querySelectorAll('.dragged-over') .querySelectorAll('.dragged-over')
// .forEach((el) => el.classList.remove('dragged-over')); .forEach((el) => el.classList.remove('dragged-over'));
// const tab = getTab(event.target); const tab = getTab(event.target);
// if (tab[1]) tab[1].classList.add('dragged-over'); if (tab[1]) tab[1].classList.add('dragged-over');
// }); });
// document.addEventListener('drop', (event) => { document.addEventListener('drop', (event) => {
// if (!this.$titlebar || this.$dragging === null) return; if (!this.$titlebar || this.$dragging === null) return;
// event.preventDefault(); event.preventDefault();
// document document
// .querySelectorAll('.dragged-over') .querySelectorAll('.dragged-over')
// .forEach((el) => el.classList.remove('dragged-over')); .forEach((el) => el.classList.remove('dragged-over'));
// document const from = getTab(this.views.tabs[+this.$dragging]),
// .querySelectorAll('.slideIn') to = getTab(event.target);
// .forEach((el) => el.classList.remove('slideIn')); if (from[0] !== to[0]) {
// const from = getTab(this.views.tabs[+this.$dragging]), if (to[1].classList.contains('new')) {
// to = getTab(event.target); const list = new Map(this.state.tabs);
// if (!from[1].classList.contains('new') && from[0] !== to[0]) list.delete(from[0]);
// to[1].parentElement.insertBefore(from[1], to[1]); list.set(from[0], this.state.tabs.get(from[0]));
// this.$dragging = null; this.setState({ tabs: list });
// document } else {
// .querySelector('#tabs') const list = [...this.state.tabs],
// .appendChild(document.querySelector('.tab.new')); fromIndex = list.findIndex(
// }); ([id, [title, open]]) => id === from[0]
),
toIndex = list.findIndex(([id, [title, open]]) => id === to[0]);
list.splice(
toIndex > fromIndex ? toIndex - 1 : toIndex,
0,
list.splice(fromIndex, 1)[0]
);
this.setState({ tabs: new Map(list) });
}
}
this.$dragging = null;
});
document.addEventListener('keyup', (event) => { document.addEventListener('keyup', (event) => {
if (!electron.remote.getCurrentWindow().isFocused()) return; if (!electron.remote.getCurrentWindow().isFocused()) return;
// switch between tabs via key modifier // switch between tabs via key modifier
@ -224,6 +235,7 @@ module.exports = (store, __exports) => {
state.get(id) ? state.get(id)[0] : 'notion.so', state.get(id) ? state.get(id)[0] : 'notion.so',
true, true,
]), ]),
slideIn: load ? this.state.slideIn.add(id) : this.state.slideIn,
}, },
async () => { async () => {
this.focusTab(); this.focusTab();
@ -251,6 +263,11 @@ module.exports = (store, __exports) => {
? idToNotionURL(store().default_page) ? idToNotionURL(store().default_page)
: current_src : current_src
); );
setTimeout(() => {
const slideIn = new Set(this.state.slideIn);
slideIn.delete(id);
this.setState({ slideIn });
}, 100);
// this.views.html[id].getWebContents().openDevTools(); // this.views.html[id].getWebContents().openDevTools();
} }
} }
@ -328,7 +345,6 @@ module.exports = (store, __exports) => {
]) ])
), ),
}); });
// this.forceUpdate();
const electronWindow = electron.remote.getCurrentWindow(); const electronWindow = electron.remote.getCurrentWindow();
if ( if (
event.target.id == this.views.current.id && event.target.id == this.views.current.id &&
@ -615,9 +631,10 @@ module.exports = (store, __exports) => {
'button', 'button',
{ {
className: className:
'tab' + (id === this.views.current.id ? ' current' : ''), 'tab' +
(id === this.views.current.id ? ' current' : '') +
(this.state.slideIn.has(id) ? ' slideIn' : ''),
draggable: true, draggable: true,
'data-linked': id,
onClick: (e) => { onClick: (e) => {
if (!e.target.classList.contains('close')) if (!e.target.classList.contains('close'))
this.openTab(id); this.openTab(id);