dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-05 05:09: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));
window.loadURL(__exports.getIndexUrl(relativeUrl));
window.webContents.openDevTools();
// window.webContents.openDevTools();
return window;
};
return __exports.createWindow;

107
mods/core/render.js
View File

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