TogglLibrary.js

@@ -9,6 +9,10 @@
  */
 
 function TogglButtonGM(selector, renderer) {
+ 
+  function debug() {
+    //console.debug.apply(console, prepend("TogglLibrary:", arguments));
+  }
 
   var
     $activeApiUrl = null,
@@ -22,7 +26,13 @@ function TogglButtonGM(selector, renderer) {
     $clientMap = {},
     $projectMap = {},
     $instances = {};
-
+  
+  if (!renderer.renderOriginLink) {
+    renderer.renderOriginLink = (backReferenceColumn, originUrl) => {
+      backReferenceColumn.innerHTML = "<a href=\""+originUrl+"\">Origin</a>";
+    };
+  }
+  
   init(selector, renderer);
 
   function init(selector, renderer, apiUrl) {
@@ -162,6 +172,86 @@ function TogglButtonGM(selector, renderer) {
     }
   }
 
+  function getIdFromEntry(entryNode) {
+    return Number.parseInt(entryNode.querySelector("input[type=\"checkbox\"]").getAttribute("data-id"), 10);
+  }
+  
+  function decorateEntry(entry) {
+      debug("Decorating entry", entry);
+      // Additional column for all entries, to keep column alignment
+      let renderTarget = entry.querySelector("div.paragon-decoration");
+      if (!renderTarget) {
+        renderTarget = document.createElement("div");
+        renderTarget.classList.add("paragon-decoration");
+        const duration = entry.querySelector("div.duration-container");
+        entry.insertBefore(renderTarget, duration);
+      }
+      
+      const id = getIdFromEntry(entry);
+      // URL will only be found within script that has it in its database
+      // Multiple scripts are not supposed to have URL's for same entries, so they won't be in conflict while rendering decoration
+      const originUrl = GM_getValue("_url["+id+"]", null);
+      if (originUrl) {
+        debug("Origin for entry: " + id + ": " + originUrl);
+        renderer.renderOriginLink(renderTarget, originUrl);
+      }
+  }  
+  
+  function forEachNode(nodeList, consumer) {
+    for (var entry of nodeList) {
+      consumer(entry);
+    }
+  }
+
+  // Decorates node if is an entry or its nested entries
+  function decorateAllEntriesIn(node) {
+    debug("Decorating all in:", node);
+    if (node.nodeName == "LI" && node.classList.contains("entry")) {
+      decorateEntry(node);
+    } else if (node.querySelectorAll) {
+      forEachNode(node.querySelectorAll("li.entry"), decorateEntry);
+    }
+  }
+    
+  function prepend(value, array) {
+    var newArray = Array.prototype.slice.call(array);
+    newArray.unshift(value);
+    return newArray;
+  }
+  
+  function waitForElement(element, query) {
+    return new Promise((resolve, reject) => {
+      const observer = new MutationObserver(function(mutations) {
+        const result = element.querySelector(query);
+        if (result) {
+          debug("Matched query:", query, result);
+          resolve(result);
+          observer.disconnect();
+        }
+      });
+      observer.observe(element, {childList: true, subtree:true});
+    }); 
+  }
+  
+  const togglTimerUrl = /https:\/\/(?:www\.)toggl\.com\/app\/timer/;
+  this.tryDecorateTimer = () => {
+    if (!togglTimerUrl.test(window.location.href))
+      return;
+    GM_addStyle("li.entry div.paragon-decoration { width:3em; padding:16px; }");
+    waitForElement(document, "#time-entry-list").then(timeEntryList => {
+      const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          debug("Mutation:", mutation.type, " target:", mutation.target, "added:", mutation.addedNodes, "removed:", mutation.removedNodes);
+          forEachNode(mutation.addedNodes,decorateAllEntriesIn);
+          if (mutation.removedNodes.length > 0) // Entry editing removes decoration
+            decorateAllEntriesIn(mutation.target);
+        })
+      });
+      observer.observe(timeEntryList, { subtree:true, childList: true });
+      decorateAllEntriesIn(timeEntryList);
+    });
+  };
+  
   this.clickLinks = function() {
     for (i in $instances) {
       $instances[i].clickLink();
@@ -411,6 +501,9 @@ function TogglButtonGM(selector, renderer) {
           responseData = JSON.parse(res.responseText);
           entryId = responseData && responseData.data && responseData.data.id;
           $curEntryId = entryId;
+          if (params.storeEntryUrl) {
+            GM_setValue('_url['+entryId+']', window.location.href);
+          }
           document.dispatchEvent(new CustomEvent('TogglButtonGMUpdateStatus'));
         }
       });