Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(trello): optimize render for slow networks #2345

Merged
merged 4 commits into from
Nov 25, 2024
Merged

fix(trello): optimize render for slow networks #2345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ed2623
fix(trello): optimize render for slow networks
askides Oct 4, 2024
81d183b
feat(trello): add inject proposal
askides Oct 6, 2024
aed1fc2
feat(notion): make injection great again
askides Oct 6, 2024
7466ed5
fix(notion): bug on changing page
askides Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 60 additions & 56 deletions src/content/notion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@
* @urlAlias notion.so
* @urlRegex *://*.notion.so/*
*/
'use strict';
'use strict'

function createWrapper (link) {
const wrapper = document.createElement('div');
wrapper.classList.add('toggl-button-notion-wrapper');
wrapper.appendChild(link);
function createWrapper(link) {
const wrapper = document.createElement('div')
wrapper.classList.add('toggl-button-notion-wrapper')
wrapper.appendChild(link)

return wrapper;
return wrapper
}

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

const link = togglbutton.createTimerLink({
className: 'notion',
description: getDescription,
autoTrackable: true,
});
})

const wrapper = createWrapper(link);
const wrapper = createWrapper(link)

const root = elem.querySelector('.notion-topbar-share-menu');
const root = elem.querySelector('.notion-topbar-share-menu')
if (root) {
root.parentElement.prepend(wrapper);
root.parentElement.prepend(wrapper)
} else {
const selector = elem.querySelector('div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)')
if (!selector) return;
const selector = elem.querySelector(
'div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)',
)
if (!selector) return
selector.prepend(wrapper)
}
}
);

setTimeout(() => {
togglbutton.render(
'.notion-topbar-action-buttons',
{ observe: true, debounceInterval: 1000 },
function (elem) {
if (!elem) return;
const elements = document.querySelectorAll('.notion-topbar-action-buttons .toggl-button-notion-wrapper')
if(elements.length > 0) {
elements.forEach(element => element.remove())
},
)

togglbutton.inject(
{
node: 'main.notion-frame .notion-scroller:not(.toggl)',
renderer: function (elem) {
const elements = document.querySelectorAll(
'.notion-topbar-action-buttons .toggl-button-notion-wrapper',
)

if (elements.length > 0) {
elements.forEach((element) => element.remove())
}

elem.style.position = 'relative';

function getDescription () {
const controls = document.querySelector('.notion-page-controls');
const topBar = document.querySelector('.notion-topbar');
let title = '';
function getDescription() {
const controls = document.querySelector('.notion-page-controls')
const topBar = document.querySelector('.notion-topbar')
let title = ''

if (controls) {
if (controls.nextElementSibling) {
title = controls.nextElementSibling;
title = controls.nextElementSibling
} else {
const parent = controls.parentElement;
title = parent ? parent.nextElementSibling : '';
const parent = controls.parentElement
title = parent ? parent.nextElementSibling : ''
}
}
if (!title && topBar) {
const breadcrumbs = topBar.querySelector('div > .notranslate')
if (breadcrumbs) {
title = breadcrumbs.childNodes[breadcrumbs.childNodes.length - 1].querySelector('.notranslate:last-child')
title = breadcrumbs.childNodes[
breadcrumbs.childNodes.length - 1
].querySelector('.notranslate:last-child')
}
}

return title ? title.textContent.trim() : '';
return title ? title.textContent.trim() : ''
}

const link = togglbutton.createTimerLink({
className: 'notion',
description: getDescription,
});
})

const wrapper = createWrapper(link);
const wrapper = createWrapper(link)

elem.prepend(wrapper);
document.querySelector('.notion-topbar-action-buttons').prepend(wrapper)
},
'.notion-topbar .shadow-cursor-breadcrumb *,title'
);
}, 2000)
},
{ observe: true },
)

/**
* @name Notion Calendar
Expand All @@ -102,18 +107,17 @@ togglbutton.render(
'div[data-context-panel-root]:not(.toggl)',
{ observe: true },
function (elem) {
if (!elem) return;
function getDescription () {
const descriptionElem = elem.querySelector('div[contenteditable="true"]');
return descriptionElem ? descriptionElem.textContent.trim() : '';
if (!elem) return
function getDescription() {
const descriptionElem = elem.querySelector('div[contenteditable="true"]')
return descriptionElem ? descriptionElem.textContent.trim() : ''
}
if(!window.location.hostname.includes('calendar.notion.so')) return;
if (!window.location.hostname.includes('calendar.notion.so')) return
const link = togglbutton.createTimerLink({
className: 'notion-calendar',
description: getDescription
});

elem.firstChild.prepend(link);
}
);
description: getDescription,
})

elem.firstChild.prepend(link)
},
)
154 changes: 73 additions & 81 deletions src/content/trello.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,92 +13,84 @@ const getProject = () => {
return project ? project.textContent.trim() : ''
}

const cardContainerSelector = '.window-wrapper'

togglbutton.render(
'#card-back-name:not(.toggl)',
{ observe: true, debounceInterval: 1000 },
(elem) => {
const actionsWrapper = $(
'#layer-manager-card-back section:nth-child(4) > ul',
)

if (!actionsWrapper) {
return
}

const getDescription = () => {
const description = $('#card-back-name')
return description ? description.textContent.trim() : ''
}

const container = createTag('div', 'button-link trello-tb-wrapper')

const link = togglbutton.createTimerLink({
className: 'trello',
description: getDescription,
projectName: getProject,
container: '[data-testid="card-back-name"]',
autoTrackable: true,
})

// Pass through click on Trello button to the timer link
container.addEventListener('click', (e) => {
link.click()
})

container.appendChild(link)
const getCardName = () => {
return document.querySelector('#card-back-name')?.textContent.trim()
}

actionsWrapper.prepend(container)
togglbutton.inject(
{
node: '[data-testid="card-back-move-card-button"]:not(.toggl)',
renderer: (element) => {
const container = createTag('li', 'button-link trello-tb-wrapper')

const link = togglbutton.createTimerLink({
className: 'trello',
description: getCardName,
projectName: getProject,
container: '[data-testid="card-back-name"]',
autoTrackable: true,
})

// Pass through click on Trello button to the timer link
container.addEventListener('click', (e) => {
link.click()
})

container.appendChild(link)

element.parentNode.parentNode.prepend(container, element)
},
},
cardContainerSelector,
{ observe: true },
)

/* Checklist buttons */
togglbutton.render(
'[data-testid="check-item-container"]:not(.toggl)',
{ observe: true, debounceInterval: 1000 },
(elem) => {
const getTitleText = () => {
const description = $('#card-back-name')
return description ? description.textContent.trim() : ''
}

const getTaskText = () => {
const task = $('.ak-renderer-wrapper', elem)
return task ? task.textContent.trim() : ''
}

const getDescription = () => {
return `${getTitleText()} - ${getTaskText()}`
}

const link = togglbutton.createTimerLink({
className: 'trello-list',
buttonType: 'minimal',
projectName: getProject,
description: getDescription,
container: '[data-testid="card-back-name"]',
})
const wrapper = document.createElement('span')
wrapper.classList.add('checklist-item-menu')
wrapper.style.display = 'flex'
wrapper.style.alignItems = 'center'
wrapper.style.marginLeft = '4px'
wrapper.appendChild(link)

// Add StopPropagation to prevent the card from closing.
wrapper.addEventListener('click', (e) => {
e.preventDefault()
e.stopPropagation()

// Click on the Toggl button
link.querySelector('button').click()
})

elem
.querySelector('[data-testid="check-item-hover-buttons"]')
.appendChild(wrapper)
togglbutton.injectMany(
{
node: '[data-testid="check-item-hover-buttons"]:not(.toggl)',
renderer: (elements) => {
// Loop through all the checklist items.
for (const element of elements) {
const getTaskText = () => {
return (
element.parentNode
.querySelector('.ak-renderer-wrapper')
?.textContent.trim() ?? ''
)
}

const getDescription = () => {
return `${getCardName()} - ${getTaskText()}`
}

const link = togglbutton.createTimerLink({
className: 'trello-list',
buttonType: 'minimal',
projectName: getProject,
description: getDescription,
container: '[data-testid="card-back-name"]',
})

const wrapper = document.createElement('span')
wrapper.classList.add('checklist-item-menu')
wrapper.style.display = 'flex'
wrapper.style.alignItems = 'center'
wrapper.style.marginLeft = '4px'
wrapper.appendChild(link)

// Add StopPropagation to prevent the card from closing.
wrapper.addEventListener('click', (e) => {
e.preventDefault()
e.stopPropagation()

// Click on the Toggl button
link.querySelector('button').click()
})

element.appendChild(wrapper)
}
},
},
cardContainerSelector,
{ observe: true },
)
Loading