diff --git a/src/content/trello.js b/src/content/trello.js index 13a95d5a4..e649eec89 100644 --- a/src/content/trello.js +++ b/src/content/trello.js @@ -13,92 +13,84 @@ const getProject = () => { return project ? project.textContent.trim() : '' } -const cardContainerSelector = '.window-wrapper' - -togglbutton.render( - '[data-testid="card-back-make-template-button"]:not(.toggl)', - { observe: true, debounceInterval: 2000 }, - (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 }, )