Reinstate Todoist nested-project name selectors

A previous release inadvertedly removed functionality from the Todoist integration. Project name is selected from the hierarchy of projects - projects in Todoist can be nested.

This partially reverts commit b3fbf2c.

The new feature for tags/labels is still intact.

Closes #1223.

src/scripts/content/todoist.js

@@ -1,32 +1,15 @@
 'use strict';
-
-function getProjectName(item) {
-  var projectItems = item.parentNode.getElementsByClassName('project_item__name');
-
-  if (projectItems.length > 0) {
-    return projectItems[0].textContent;
-  }
-
-  return item.closest('.list_editor').querySelector('a.project_link span').textContent;
-}
-
-function getTags(item) {
-  var tags = item.querySelectorAll('.labels_holder a:not(.label_sep)')
-
-  return Array.from(tags).map(function(tag) {
-    return tag.textContent;
-  });
-}
+/* global togglbutton, $ */
 
 togglbutton.render(
   '.task_item .content:not(.toggl)',
   { observe: true },
-  function(elem) {
+  function (elem) {
     var link,
       descFunc,
       container = $('.text', elem);
 
-    descFunc = function() {
+    descFunc = function () {
       var clone = container.cloneNode(true),
         i = 0,
         child = null;
@@ -60,10 +43,114 @@ togglbutton.render(
     link = togglbutton.createTimerLink({
       className: 'todoist',
       description: descFunc(),
-      projectName: getProjectName(elem),
+      projectName: getProjectNames(elem),
       tags: getTags(elem)
     });
 
     container.insertBefore(link, container.lastChild);
   }
-);
+);
+
+
+function getTags(container) {
+  var tags = container.querySelectorAll('.labels_holder a:not(.label_sep)')
+
+  return Array.from(tags).map(function (tag) {
+    return tag.textContent;
+  });
+}
+
+
+/*
+Projects may have a hierarchy in Todoist.
+
+The selector functions for project name take this into account.
+All project names found in the hierarchy will be passed to Toggl button,
+which will figure out what the lowest level existing project is.
+
+E.g.
+- Project hierarchy is MyProject > MySubProject > MyFeatureProject
+- Selector will find all three project names and pass to Toggl Button
+- Toggl Button will first check if MyFeatureProject exists, and if it doesn't, try to use the next parent etc.
+*/
+
+function getProjectNameFromLabel(elem) {
+  var projectLabel = '',
+    projectLabelEle = $('.project_item__name', elem.parentNode.parentNode);
+  if (projectLabelEle) {
+    projectLabel = projectLabelEle.textContent.trim();
+  }
+  return projectLabel;
+}
+
+var levelPattern = /(?:^|\s)indent_([0-9]*?)(?:\s|$)/;
+function getParentEle(sidebarCurrentEle) {
+  var curLevel, parentClass, parentCandidate;
+  curLevel = sidebarCurrentEle.className.match(levelPattern)[1];
+  parentClass = 'indent_' + (curLevel - 1);
+
+  parentCandidate = sidebarCurrentEle;
+  while (parentCandidate.previousElementSibling) {
+    parentCandidate = parentCandidate.previousElementSibling;
+    if (parentCandidate.classList.contains(parentClass)) {
+      break;
+    }
+  }
+  return parentCandidate;
+}
+
+function isTopLevelProject(sidebarCurrentEle) {
+  return sidebarCurrentEle.classList.contains('indent_1');
+}
+
+function getProjectNameHierarchy(sidebarCurrentEle) {
+  var parentProjectEle, projectName;
+  projectName = $('.name', sidebarCurrentEle).firstChild.textContent.trim();
+  if (isTopLevelProject(sidebarCurrentEle)) {
+    return [projectName];
+  }
+  parentProjectEle = getParentEle(sidebarCurrentEle);
+  return [projectName].concat(getProjectNameHierarchy(parentProjectEle));
+}
+
+function projectWasJustCreated(projectId) {
+  return projectId.startsWith('_');
+}
+
+function getSidebarCurrentEle(elem) {
+  var editorInstance,
+    projectId,
+    sidebarRoot,
+    sidebarColorEle,
+    sidebarCurrentEle;
+  editorInstance = elem.closest('.project_editor_instance');
+  if (editorInstance) {
+    projectId = editorInstance.getAttribute('data-project-id');
+    sidebarRoot = $('#project_list');
+    if (projectWasJustCreated(projectId)) {
+      sidebarCurrentEle = $('.current', sidebarRoot);
+    } else {
+      sidebarColorEle = $('#project_color_' + projectId, sidebarRoot);
+      if (sidebarColorEle) {
+        sidebarCurrentEle = sidebarColorEle.closest('.menu_clickable');
+      }
+    }
+  }
+  return sidebarCurrentEle;
+}
+
+function getProjectNames(elem) {
+  var projectNames, viewingInbox, sidebarCurrentEle;
+  viewingInbox = $('#filter_inbox.current, #filter_team_inbox.current');
+  if (viewingInbox) {
+    projectNames = ['Inbox'];
+  } else {
+    sidebarCurrentEle = getSidebarCurrentEle(elem);
+    if (sidebarCurrentEle) {
+      projectNames = getProjectNameHierarchy(sidebarCurrentEle);
+    } else {
+      projectNames = [getProjectNameFromLabel(elem)];
+    }
+  }
+  return projectNames;
+}