trektor/scripts/content_script.js at 1ea21093741d22d55d3b2953593f2269174da59e · aboutsource/trektor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
async function addButton() {
  const sidebar = await awaitSelector(".window-sidebar", 10000);

  const module = document.createElement("div");
  module.classList.add("window-module", "u-clearfix");
  sidebar.prepend(module);

  const moduleHeading = document.createElement('h3');
  moduleHeading.innerText = 'Trektor';
  module.append(moduleHeading);

  const buttonList = document.createElement("div");
  buttonList.classList.add("u-clearfix");
  module.append(buttonList);

  const trackButton = document.createElement("span");
  trackButton.classList.add("button-link");
  buttonList.append(trackButton);

  const trackButtonIcon = document.createElement("span");
  trackButtonIcon.classList.add("icon-sm", "icon-clock", "trektor-button-icon");
  trackButton.append(trackButtonIcon);

  const trackButtonText = document.createElement("span");
  trackButtonText.innerText = "Trek Now";
  trackButton.append(trackButtonText);

  const addButton = document.createElement("span");
  addButton.classList.add("button-link", "add-button-link");
  addButton.innerText = "Toggl-Task hinzufügen";
  buttonList.append(addButton);

  trackButton.addEventListener("click", async () => {
    trackButtonIcon.classList.add("trektor-state-loading");

    try {
      await trektor.browser.runtime.sendMessage({
        action: "track",
        args: [window.location.pathname.split("/", 3)[2]],
      });
      trackButtonIcon.classList.replace("icon-clock", "icon-check-circle");
      window.setTimeout(() => trackButtonIcon.classList.replace("icon-check-circle", "icon-clock"), 2000);
    } catch (err) {
      if (window.confirm(err + "\n\n Open Trektor options page now?")) trektor.browser.runtime.sendMessage({ action: "options" });
    } finally {
      trackButtonIcon.classList.remove("trektor-state-loading");
    }
  });

  addButton.addEventListener("click", async () => {
    try {
      await trektor.browser.runtime.sendMessage({
        action: "addTask",
        args: [window.location.pathname.split("/", 3)[2]],
      });
    } catch (err) {
      if (window.confirm(err + "\n\n Open Trektor options page now?")) trektor.browser.runtime.sendMessage({ action: "options" });
    }
  });
}

function awaitSelector(selector, timeout) {
  const element = document.querySelector(".window-sidebar");
  if (element !== null) return Promise.resolve(element);

  return new Promise((resolve, reject) => {
    const interval = window.setInterval(() => {
      const element = document.querySelector(".window-sidebar");

      if (element !== null) {
        resolve(element);
        window.clearInterval(interval);
      } else if (timeout < 0) {
        reject(new Error("timeout"));
        window.clearInterval(interval);
      }
      timeout -= 100;
    }, 100);
  });
}

window.addEventListener("pushstate", () => {
  if (window.location.pathname.startsWith("/c/")) addButton();
});