geco-toolbox/geco-o.planning-row-highlight.user.js at main · vanilla-reply/geco-toolbox · 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
// ==UserScript==
// @name         GECO-O - Planning Table – Row & Column Highlight on Hover
// @namespace    http://tampermonkey.net/
// @version      2.1.2
// @description  Highlights the entire row and month header when hovering over any cell in the planning table
// @author       Roman Allenstein <r.allenstein@reply.de>
// @match        https://geco.reply.com/GeCoO/Project/ManagePlanning.aspx?*
// @grant        none
// @run-at       document-end
// @downloadURL  https://github.com/vanilla-reply/geco-toolbox/raw/refs/heads/main/geco-o.planning-row-highlight.user.js
// @updateURL    https://github.com/vanilla-reply/geco-toolbox/raw/refs/heads/main/geco-o.planning-row-highlight.user.js
// ==/UserScript==

(function () {
  "use strict";

  const ROW_COLOR = "rgba(255, 235, 59, 0.25)";
  const HEADER_COLOR = "rgba(66, 165, 245, 0.30)";

  // Inject styles
  const style = document.createElement("style");
  style.textContent = `
    .table--planning .table__row.tm-row-highlight,
    .table--planning .tbody.table__row.tm-row-highlight {
      background-color: ${ROW_COLOR} !important;
    }
    .table--planning .table__row.tm-row-highlight .table__cell,
    .table--planning .tbody.table__row.tm-row-highlight .table__cell {
      background-color: ${ROW_COLOR} !important;
    }
    .table--planning .month.table__head .table__cell.tm-col-highlight {
      background-color: ${HEADER_COLOR} !important;
    }
  `;
  document.head.appendChild(style);

  function highlightRow(userId, highlight) {
    if (!userId) return;
    document.querySelectorAll(`.table--planning .table__row[data-user-id="${CSS.escape(userId)}"], .table--planning .tbody.table__row[data-user-id="${CSS.escape(userId)}"]`)
      .forEach(row => row.classList.toggle("tm-row-highlight", highlight));
  }

  function highlightMonth(month, highlight) {
    if (!month) return;
    document.querySelectorAll(`.table--planning .month.table__row.table__head .table__cell[data-month="${CSS.escape(month)}"]`)
      .forEach(cell => cell.classList.toggle("tm-col-highlight", highlight));
  }

  // Event delegation for hover
  document.addEventListener("mouseenter", e => {
    if (!e.target.closest) return; // Skip non-Element targets (text nodes, etc.)

    const cell = e.target.closest(".table--planning .table__cell[data-month]");
    if (cell) highlightMonth(cell.getAttribute("data-month"), true);

    const row = e.target.closest(".table--planning .table__row[data-user-id], .table--planning .tbody.table__row[data-user-id]");
    if (row) highlightRow(row.getAttribute("data-user-id"), true);
  }, true);

  document.addEventListener("mouseleave", e => {
    if (!e.target.closest) return; // Skip non-Element targets (text nodes, etc.)

    const cell = e.target.closest(".table--planning .table__cell[data-month]");
    if (cell) highlightMonth(cell.getAttribute("data-month"), false);

    const row = e.target.closest(".table--planning .table__row[data-user-id], .table--planning .tbody.table__row[data-user-id]");
    if (row) highlightRow(row.getAttribute("data-user-id"), false);
  }, true);
})();