OnePass/ui.js at main · moii-dev/OnePass · 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
85
86
/**
 * ui.js – Handles theme modes (Dark/Light), Accent Color pickers, and horizontal scrolling marquee.
 */

const ACCENT_COLOR_MAP = {
  white: { accent: "#ffffff", hover: "#e0e0e0", glow: "rgba(255, 255, 255, 0.12)", text: "#000000" },
  green: { accent: "#3ecf8e", hover: "#4de09e", glow: "rgba(62, 207, 142, 0.12)", text: "#000000" },
  blue: { accent: "#1a73e8", hover: "#3b82f6", glow: "rgba(26, 115, 232, 0.12)", text: "#ffffff" },
  purple: { accent: "#a855f7", hover: "#c084fc", glow: "rgba(168, 85, 247, 0.12)", text: "#ffffff" },
  orange: { accent: "#f97316", hover: "#fb923c", glow: "rgba(249, 115, 22, 0.12)", text: "#ffffff" }
};

export function applyAccentColor(colorName, dotsList, themeMode) {
  let vars = ACCENT_COLOR_MAP[colorName] || ACCENT_COLOR_MAP.white;

  if (themeMode === "light" && colorName === "white") {
    // In light theme, the default "white" accent color maps to a premium dark slate
    vars = { accent: "#111827", hover: "#1f2937", glow: "rgba(17, 24, 39, 0.08)", text: "#ffffff" };
  }

  document.documentElement.style.setProperty("--accent", vars.accent);
  document.documentElement.style.setProperty("--accent-hover", vars.hover);
  document.documentElement.style.setProperty("--accent-glow", vars.glow);
  document.documentElement.style.setProperty("--accent-text", vars.text);

  dotsList.forEach(dot => {
    if (dot.dataset.color === colorName) {
      dot.classList.add("color-dot--active");
    } else {
      dot.classList.remove("color-dot--active");
    }
  });
}

export function applyThemeMode(themeMode) {
  if (themeMode === "light") {
    document.body.classList.add("theme-light");
  } else {
    document.body.classList.remove("theme-light");
  }
}

/* ================================================================
   Horizontal Scroll on Hover for Long Texts
   ================================================================ */
let activeScrollIntervals = new Map();

export function startHorizontalScroll(element) {
  stopHorizontalScroll(element);
  const limit = element.scrollWidth - element.clientWidth;
  if (limit <= 0) return;

  let dir = 1;
  let pauseTicks = 0;

  const interval = setInterval(() => {
    if (pauseTicks > 0) {
      pauseTicks--;
      return;
    }

    if (dir === 1) {
      element.scrollLeft += 1;
      if (element.scrollLeft >= limit) {
        dir = -1;
        pauseTicks = 40; // Approx 1s pause
      }
    } else {
      element.scrollLeft -= 1;
      if (element.scrollLeft <= 0) {
        dir = 1;
        pauseTicks = 40;
      }
    }
  }, 25);

  activeScrollIntervals.set(element, interval);
}

export function stopHorizontalScroll(element) {
  if (activeScrollIntervals.has(element)) {
    clearInterval(activeScrollIntervals.get(element));
    activeScrollIntervals.delete(element);
  }
  element.scrollTo({ left: 0, behavior: "smooth" });
}