Skip to content

Commit 073a7c9

Browse files
askidesaskides
authored
fix(trello): optimize render for slow networks (#2345)
* fix(trello): optimize render for slow networks * feat(trello): add inject proposal * feat(notion): make injection great again * fix(notion): bug on changing page
1 parent 4dfdcbf commit 073a7c9

File tree

2 files changed

+133
-137
lines changed

2 files changed

+133
-137
lines changed

‎src/content/notion.js

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
* @urlAlias notion.so
44
* @urlRegex *://*.notion.so/*
55
*/
6-
'use strict';
6+
'use strict'
77

8-
function createWrapper (link) {
9-
const wrapper = document.createElement('div');
10-
wrapper.classList.add('toggl-button-notion-wrapper');
11-
wrapper.appendChild(link);
8+
function createWrapper(link) {
9+
const wrapper = document.createElement('div')
10+
wrapper.classList.add('toggl-button-notion-wrapper')
11+
wrapper.appendChild(link)
1212

13-
return wrapper;
13+
return wrapper
1414
}
1515

1616
// Selectors here are madness, it works for as of Dec 4th 2019
@@ -19,79 +19,84 @@ togglbutton.render(
1919
'.notion-peek-renderer:not(.toggl)',
2020
{ observe: true },
2121
function (elem) {
22-
if (!elem) return;
23-
function getDescription () {
24-
const descriptionElem = elem.querySelector('.notion-peek-renderer .notion-scroller h1[contenteditable]');
25-
return descriptionElem ? descriptionElem.textContent.trim() : '';
22+
if (!elem) return
23+
function getDescription() {
24+
const descriptionElem = elem.querySelector(
25+
'.notion-peek-renderer .notion-scroller h1[contenteditable]',
26+
)
27+
return descriptionElem ? descriptionElem.textContent.trim() : ''
2628
}
2729

2830
const link = togglbutton.createTimerLink({
2931
className: 'notion',
3032
description: getDescription,
3133
autoTrackable: true,
32-
});
34+
})
3335

34-
const wrapper = createWrapper(link);
36+
const wrapper = createWrapper(link)
3537

36-
const root = elem.querySelector('.notion-topbar-share-menu');
38+
const root = elem.querySelector('.notion-topbar-share-menu')
3739
if (root) {
38-
root.parentElement.prepend(wrapper);
40+
root.parentElement.prepend(wrapper)
3941
} else {
40-
const selector = elem.querySelector('div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)')
41-
if (!selector) return;
42+
const selector = elem.querySelector(
43+
'div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)',
44+
)
45+
if (!selector) return
4246
selector.prepend(wrapper)
4347
}
44-
}
45-
);
46-
47-
setTimeout(() => {
48-
togglbutton.render(
49-
'.notion-topbar-action-buttons',
50-
{ observe: true, debounceInterval: 1000 },
51-
function (elem) {
52-
if (!elem) return;
53-
const elements = document.querySelectorAll('.notion-topbar-action-buttons .toggl-button-notion-wrapper')
54-
if(elements.length > 0) {
55-
elements.forEach(element => element.remove())
48+
},
49+
)
50+
51+
togglbutton.inject(
52+
{
53+
node: 'main.notion-frame .notion-scroller:not(.toggl)',
54+
renderer: function (elem) {
55+
const elements = document.querySelectorAll(
56+
'.notion-topbar-action-buttons .toggl-button-notion-wrapper',
57+
)
58+
59+
if (elements.length > 0) {
60+
elements.forEach((element) => element.remove())
5661
}
5762

58-
elem.style.position = 'relative';
59-
60-
function getDescription () {
61-
const controls = document.querySelector('.notion-page-controls');
62-
const topBar = document.querySelector('.notion-topbar');
63-
let title = '';
63+
function getDescription() {
64+
const controls = document.querySelector('.notion-page-controls')
65+
const topBar = document.querySelector('.notion-topbar')
66+
let title = ''
6467

6568
if (controls) {
6669
if (controls.nextElementSibling) {
67-
title = controls.nextElementSibling;
70+
title = controls.nextElementSibling
6871
} else {
69-
const parent = controls.parentElement;
70-
title = parent ? parent.nextElementSibling : '';
72+
const parent = controls.parentElement
73+
title = parent ? parent.nextElementSibling : ''
7174
}
7275
}
7376
if (!title && topBar) {
7477
const breadcrumbs = topBar.querySelector('div > .notranslate')
7578
if (breadcrumbs) {
76-
title = breadcrumbs.childNodes[breadcrumbs.childNodes.length - 1].querySelector('.notranslate:last-child')
79+
title = breadcrumbs.childNodes[
80+
breadcrumbs.childNodes.length - 1
81+
].querySelector('.notranslate:last-child')
7782
}
7883
}
7984

80-
return title ? title.textContent.trim() : '';
85+
return title ? title.textContent.trim() : ''
8186
}
8287

8388
const link = togglbutton.createTimerLink({
8489
className: 'notion',
8590
description: getDescription,
86-
});
91+
})
8792

88-
const wrapper = createWrapper(link);
93+
const wrapper = createWrapper(link)
8994

90-
elem.prepend(wrapper);
95+
document.querySelector('.notion-topbar-action-buttons').prepend(wrapper)
9196
},
92-
'.notion-topbar .shadow-cursor-breadcrumb *,title'
93-
);
94-
}, 2000)
97+
},
98+
{ observe: true },
99+
)
95100

96101
/**
97102
* @name Notion Calendar
@@ -102,18 +107,17 @@ togglbutton.render(
102107
'div[data-context-panel-root]:not(.toggl)',
103108
{ observe: true },
104109
function (elem) {
105-
if (!elem) return;
106-
function getDescription () {
107-
const descriptionElem = elem.querySelector('div[contenteditable="true"]');
108-
return descriptionElem ? descriptionElem.textContent.trim() : '';
110+
if (!elem) return
111+
function getDescription() {
112+
const descriptionElem = elem.querySelector('div[contenteditable="true"]')
113+
return descriptionElem ? descriptionElem.textContent.trim() : ''
109114
}
110-
if(!window.location.hostname.includes('calendar.notion.so')) return;
115+
if (!window.location.hostname.includes('calendar.notion.so')) return
111116
const link = togglbutton.createTimerLink({
112117
className: 'notion-calendar',
113-
description: getDescription
114-
});
115-
116-
elem.firstChild.prepend(link);
117-
}
118-
);
118+
description: getDescription,
119+
})
119120

121+
elem.firstChild.prepend(link)
122+
},
123+
)

‎src/content/trello.js

Lines changed: 73 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -13,92 +13,84 @@ const getProject = () => {
1313
return project ? project.textContent.trim() : ''
1414
}
1515

16-
const cardContainerSelector = '.window-wrapper'
17-
18-
togglbutton.render(
19-
'#card-back-name:not(.toggl)',
20-
{ observe: true, debounceInterval: 1000 },
21-
(elem) => {
22-
const actionsWrapper = $(
23-
'#layer-manager-card-back section:nth-child(4) > ul',
24-
)
25-
26-
if (!actionsWrapper) {
27-
return
28-
}
29-
30-
const getDescription = () => {
31-
const description = $('#card-back-name')
32-
return description ? description.textContent.trim() : ''
33-
}
34-
35-
const container = createTag('div', 'button-link trello-tb-wrapper')
36-
37-
const link = togglbutton.createTimerLink({
38-
className: 'trello',
39-
description: getDescription,
40-
projectName: getProject,
41-
container: '[data-testid="card-back-name"]',
42-
autoTrackable: true,
43-
})
44-
45-
// Pass through click on Trello button to the timer link
46-
container.addEventListener('click', (e) => {
47-
link.click()
48-
})
49-
50-
container.appendChild(link)
16+
const getCardName = () => {
17+
return document.querySelector('#card-back-name')?.textContent.trim()
18+
}
5119

52-
actionsWrapper.prepend(container)
20+
togglbutton.inject(
21+
{
22+
node: '[data-testid="card-back-move-card-button"]:not(.toggl)',
23+
renderer: (element) => {
24+
const container = createTag('li', 'button-link trello-tb-wrapper')
25+
26+
const link = togglbutton.createTimerLink({
27+
className: 'trello',
28+
description: getCardName,
29+
projectName: getProject,
30+
container: '[data-testid="card-back-name"]',
31+
autoTrackable: true,
32+
})
33+
34+
// Pass through click on Trello button to the timer link
35+
container.addEventListener('click', (e) => {
36+
link.click()
37+
})
38+
39+
container.appendChild(link)
40+
41+
element.parentNode.parentNode.prepend(container, element)
42+
},
5343
},
54-
cardContainerSelector,
44+
{ observe: true },
5545
)
5646

5747
/* Checklist buttons */
58-
togglbutton.render(
59-
'[data-testid="check-item-container"]:not(.toggl)',
60-
{ observe: true, debounceInterval: 1000 },
61-
(elem) => {
62-
const getTitleText = () => {
63-
const description = $('#card-back-name')
64-
return description ? description.textContent.trim() : ''
65-
}
66-
67-
const getTaskText = () => {
68-
const task = $('.ak-renderer-wrapper', elem)
69-
return task ? task.textContent.trim() : ''
70-
}
71-
72-
const getDescription = () => {
73-
return `${getTitleText()} - ${getTaskText()}`
74-
}
75-
76-
const link = togglbutton.createTimerLink({
77-
className: 'trello-list',
78-
buttonType: 'minimal',
79-
projectName: getProject,
80-
description: getDescription,
81-
container: '[data-testid="card-back-name"]',
82-
})
83-
const wrapper = document.createElement('span')
84-
wrapper.classList.add('checklist-item-menu')
85-
wrapper.style.display = 'flex'
86-
wrapper.style.alignItems = 'center'
87-
wrapper.style.marginLeft = '4px'
88-
wrapper.appendChild(link)
89-
90-
// Add StopPropagation to prevent the card from closing.
91-
wrapper.addEventListener('click', (e) => {
92-
e.preventDefault()
93-
e.stopPropagation()
94-
95-
// Click on the Toggl button
96-
link.querySelector('button').click()
97-
})
9848

99-
elem
100-
.querySelector('[data-testid="check-item-hover-buttons"]')
101-
.appendChild(wrapper)
49+
togglbutton.injectMany(
50+
{
51+
node: '[data-testid="check-item-hover-buttons"]:not(.toggl)',
52+
renderer: (elements) => {
53+
// Loop through all the checklist items.
54+
for (const element of elements) {
55+
const getTaskText = () => {
56+
return (
57+
element.parentNode
58+
.querySelector('.ak-renderer-wrapper')
59+
?.textContent.trim() ?? ''
60+
)
61+
}
62+
63+
const getDescription = () => {
64+
return `${getCardName()} - ${getTaskText()}`
65+
}
66+
67+
const link = togglbutton.createTimerLink({
68+
className: 'trello-list',
69+
buttonType: 'minimal',
70+
projectName: getProject,
71+
description: getDescription,
72+
container: '[data-testid="card-back-name"]',
73+
})
74+
75+
const wrapper = document.createElement('span')
76+
wrapper.classList.add('checklist-item-menu')
77+
wrapper.style.display = 'flex'
78+
wrapper.style.alignItems = 'center'
79+
wrapper.style.marginLeft = '4px'
80+
wrapper.appendChild(link)
81+
82+
// Add StopPropagation to prevent the card from closing.
83+
wrapper.addEventListener('click', (e) => {
84+
e.preventDefault()
85+
e.stopPropagation()
86+
87+
// Click on the Toggl button
88+
link.querySelector('button').click()
89+
})
90+
91+
element.appendChild(wrapper)
92+
}
93+
},
10294
},
103-
cardContainerSelector,
95+
{ observe: true },
10496
)

0 commit comments

Comments
 (0)