feat(checkvist): Add checkvist integration

README.md

@@ -23,6 +23,7 @@ out of the way and focus on real work.
 - [Bugherd](https://www.bugherd.com/)
 - [Bugzilla](https://bugzilla.mozilla.org/)
 - [CapsuleCRM](http://www.capsulecrm.com/)
+- [Checkvist](https://checkvist.com)
 - [ClickUp](https://clickup.com/)
 - [CLOUDES](http://cloudes.me/)
 - [Clubhouse](https://clubhouse.io/)

src/scripts/content/checkvist.js

@@ -0,0 +1,77 @@
+'use strict';
+/* global togglbutton, $ */
+
+togglbutton.render(
+  '.task:not(.toggl)',
+  { observe: true },
+  element => {
+    // by default the toggl button is shown on the right
+    // however, if the list title is tagged with #togglLeft, the toggl button is shown on the left
+    const tasksBlock = $('#tasks_block');
+    if ($('#header_span ~ .tag_togglLeft') && !tasksBlock.matches('.togglLeft')) {
+      tasksBlock.classList.add('togglLeft');
+    }
+
+    // parents is a function to get all parent nodes of a node
+    // taken from https://stackoverflow.com/questions/8729193/how-to-get-all-parent-nodes-of-given-element-in-pure-javascript#comment85476662_8729274
+    const parents = node => (
+      node.parentElement
+        ? parents(node.parentElement)
+        : []
+    ).concat([node]);
+
+    // most information (e.g. tags) of a task is stored in its coreDiv
+    // therefore parentTasks is a list of all parent tasks' coreDivs
+    // the order is reversed so that closer parents come first
+    const parentTasks = parents(element)
+      .filter(parent => parent.matches('.task'))
+      .map(parent => $('.coreDiv', parent))
+      .reverse();
+    const currentTask = parentTasks.shift();
+
+    // by default only leaf tasks are togglized
+    // however, togglization can be limited to branches tagged with #togglize or #togglizeAll:
+    // - in a branch tagged with #togglizeAll, all tasks are togglized
+    // - in a branch tagged with #togglize, only its leaf tasks are togglized
+    const togglizeTaggedOnly = $('.tag_togglize') || $('.tag_togglizeAll');
+    const togglizeThis = !currentTask.matches('.task_closed') && (
+      togglizeTaggedOnly
+        ? (
+          $('#header_span ~ .tag_togglizeAll') || parentTasks.some(parent => parent.matches('.tag_togglizeAll'))
+        ) || (
+          ($('#header_span ~ .tag_togglize') || parentTasks.some(parent => parent.matches('.tag_togglize'))) &&
+          element.matches('.leafItem')
+        )
+        : element.matches('.leafItem')
+    );
+    if (!togglizeThis) {
+      return;
+    }
+
+    // helper function to extract the task text of a task
+    const getTaskText = elem => $('.userContent', elem).textContent.trim();
+
+    const descriptionSelector = () => getTaskText(currentTask);
+
+    // by default the project is the text of the immediate parent
+    // however, if a parent is tagged with #togglProject, the project is the text of this parent
+    const projectSelector = () => {
+      const taggedParent = parentTasks.find(parent => parent.matches('.tag_togglProject'));
+      return getTaskText(taggedParent || parentTasks[0]);
+    };
+
+    const tagsSelector = () => [...currentTask.classList]
+      .filter(item => item.startsWith('tag_') && !item.startsWith('tag_toggl'))
+      .map(item => item.substring(4));
+
+    const link = togglbutton.createTimerLink({
+      className: 'checkvist',
+      buttonType: 'minimal',
+      description: descriptionSelector,
+      projectName: projectSelector,
+      tags: tagsSelector
+    });
+
+    currentTask.appendChild(link);
+  }
+);

src/scripts/origins.js

@@ -83,6 +83,10 @@ export default {
     url: '*://*.capsulecrm.com/*',
     name: 'CapsuleCRM'
   },
+  'checkvist.com': {
+    url: '*://checkvist.com/*',
+    name: 'Checkvist'
+  },
   'clickup.com': {
     url: '*://*.clickup.com/*',
     name: 'ClickUp'

src/styles/style.css

@@ -1552,3 +1552,45 @@ body.notion-body.dark .toggl-button.notion {
   font-weight: bold;
   position: relative;
   top: -3px;
+}
+
+/********* CHECKVIST *********/
+.toggl-button.checkvist {
+  position: absolute;
+  top: 7px;
+  right: -43px;
+  opacity: 0;
+}
+
+.toggl-button.checkvist.active,
+.toggl-button.checkvist:hover,
+.selectedTask > .toggl-button.checkvist,
+.task.toggl > .coreDiv:hover .toggl-button.checkvist {
+  opacity: 1;
+}
+
+#tasks_block:not(.togglLeft) .coreDiv {
+  margin-right: 35px;
+}
+
+#tasks_block.togglLeft ul.topLevel {
+  padding-left: 48px;
+}
+
+#tasks_block.togglLeft .toggl-button.checkvist {
+  left: -43px;
+}
+
+#tasks_block.togglLeft .task.toggl > .coreDiv::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 100%;
+  width: 45px;
+}
+
+.tag[class^="tag_toggl"],
+.tag[class*=" tag_toggl"] {
+  display: none;
+}