fix(Trello): update reflecting the new UI (#2339)

* chore(trello): code formatting

* fix(trello): make the side button work again

* fix(trello): task list support

* chore(Trello): remove console.log

Author: askides

src/content/trello.js

@@ -3,85 +3,101 @@
  * @urlAlias trello.com
  * @urlRegex *://trello.com/*
  */
-'use strict';
+'use strict'
 /* global createTag */
 
 const getProject = () => {
-  const project = document.querySelector('.board-header [data-testid="board-name-display"]')
-  return project ? project.textContent.trim() : '';
-};
+  const project = document.querySelector(
+    '.board-header [data-testid="board-name-display"]',
+  )
+  return project ? project.textContent.trim() : ''
+}
+
+const cardContainerSelector = '.window-wrapper'
 
-const cardContainerSelector = '.card-detail-window';
 togglbutton.render(
-  '.window-header:not(.toggl)',
-  { observe: true, debounceInterval: 300 },
+  '#card-back-name:not(.toggl)',
+  { observe: true, debounceInterval: 1000 },
   (elem) => {
-    const actionButton =
-      $('.js-move-card') ||
-      $('.js-copy-card') ||
-      $('.js-archive-card') ||
-      $('.js-more-menu');
-
-    if (!actionButton) {
-      return;
+    const actionsWrapper = $(
+      '#layer-manager-card-back section:nth-child(4) > ul',
+    )
+
+    if (!actionsWrapper) {
+      return
     }
 
     const getDescription = () => {
-      const description = $('.window-title h2', elem);
-      return description ? description.textContent.trim() : '';
-    };
+      const description = $('#card-back-name')
+      return description ? description.textContent.trim() : ''
+    }
+
+    const container = createTag('div', 'button-link trello-tb-wrapper')
 
-    const container = createTag('div', 'button-link trello-tb-wrapper');
     const link = togglbutton.createTimerLink({
       className: 'trello',
       description: getDescription,
       projectName: getProject,
-      container: cardContainerSelector
-    });
+      container: '[data-testid="card-back-name"]',
+    })
 
     // Pass through click on Trello button to the timer link
     container.addEventListener('click', (e) => {
-      link.click();
-    });
+      link.click()
+    })
+
+    container.appendChild(link)
 
-    container.appendChild(link);
-    actionButton.parentNode.insertBefore(container, actionButton);
+    actionsWrapper.prepend(container)
   },
-  cardContainerSelector
-);
+  cardContainerSelector,
+)
 
 /* Checklist buttons */
 togglbutton.render(
-  '.checklist-item-details:not(.toggl)',
-  { observe: true },
+  '[data-testid="check-item-container"]:not(.toggl)',
+  { observe: true, debounceInterval: 1000 },
   (elem) => {
     const getTitleText = () => {
-      const title = $('.window-title h2');
-      return title ? title.textContent.trim() : '';
-    };
+      const description = $('#card-back-name')
+      return description ? description.textContent.trim() : ''
+    }
 
     const getTaskText = () => {
-      const task = $('.checklist-item-details-text', elem);
-      return task ? task.textContent.trim() : '';
-    };
+      const task = $('.ak-renderer-wrapper', elem)
+      return task ? task.textContent.trim() : ''
+    }
 
     const getDescription = () => {
-      return `${getTitleText()} - ${getTaskText()}`;
-    };
+      return `${getTitleText()} - ${getTaskText()}`
+    }
 
     const link = togglbutton.createTimerLink({
       className: 'trello-list',
       buttonType: 'minimal',
       projectName: getProject,
       description: getDescription,
-      container: cardContainerSelector
-    });
-    const wrapper = document.createElement('span');
-    wrapper.classList.add('checklist-item-menu');
-    wrapper.style.display = 'flex';
-    wrapper.style.alignItems = 'center';
-    wrapper.appendChild(link);
-    elem.querySelector('.checklist-item-controls').appendChild(wrapper);
+      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)
   },
-  `.checklist-items-list, ${cardContainerSelector}`
-);
+  cardContainerSelector,
+)