scrolling-text/script.js at main · usamafayaz/scrolling-text · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
document.addEventListener("DOMContentLoaded", function () {
  // Check if there's saved data in sessionStorage and populate the fields
  const savedText = sessionStorage.getItem("scrollText");
  const savedTime = sessionStorage.getItem("scrollTime");
  const savedAutoScroll = sessionStorage.getItem("autoScroll");

  if (savedText) document.getElementById("inputText").value = savedText;
  if (savedTime) document.getElementById("scrollTime").value = savedTime;
  if (savedAutoScroll) {
    document.querySelector(
      `input[name="autoScroll"][value="${savedAutoScroll}"]`
    ).checked = true;
  }
});

document
  .getElementById("submitButton")
  .addEventListener("click", async function () {
    const inputText = document.getElementById("inputText").value;
    const scrollTime = document.getElementById("scrollTime").value || 20;
    const autoScroll = document.querySelector(
      'input[name="autoScroll"]:checked'
    ).value;

    // Check if inputText is empty
    if (!inputText) {
      alert("Please enter text to scroll!");
      return;
    }
    if (scrollTime < 5) {
      alert("Scroll Time must be greater than 5 seconds!");
      return;
    }

    // Save the input data to sessionStorage for potential future use
    sessionStorage.setItem("scrollText", inputText);
    sessionStorage.setItem("scrollTime", scrollTime);
    sessionStorage.setItem("autoScroll", autoScroll);

    const encodedText = encodeURIComponent(inputText);
    const originalUrl = `https://patorjk.com/misc/scrollingtext/timewaster.php?text=${encodedText}&autoscroll=${autoScroll}&duration=${scrollTime}`;
    const corsProxyUrl = `https://cors-anywhere.herokuapp.com/${originalUrl}`;

    try {
      const response = await fetch(corsProxyUrl);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      let htmlContent = await response.text();

      // Create a temporary element to parse the HTML
      const tempElement = document.createElement("div");
      tempElement.innerHTML = htmlContent;

      // Remove the controlArea div
      const controlArea = tempElement.querySelector("#controlArea");
      if (controlArea) {
        controlArea.remove();
      }

      // Remove all anchor tags
      const anchors = tempElement.querySelectorAll("a");
      anchors.forEach((anchor) => anchor.remove());

      // Get the cleaned HTML content
      htmlContent = tempElement.innerHTML;

      // Open a new tab
      const newTab = window.open("", "_blank");

      // Write the content to the new tab
      newTab.document.write(`
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Scrolling Text</title>
        <style>
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
          }
          body {
            background-color: black;
            color: white;
            font-family: "Courier New", monospace;
            display: flex;
            flex-direction: column;
          }
          #scrollContent {
            flex: 1;
            white-space: pre-wrap;
            font-size: 16px;
            padding: 20px;
            overflow-y: scroll;
            box-sizing: border-box;
            margin: 0;
          }
          #scrollContent::-webkit-scrollbar {
            width: 12px;
          }
          #scrollContent::-webkit-scrollbar-track {
            background: #000;
          }
          #scrollContent::-webkit-scrollbar-thumb {
            background-color: #333;
            border-radius: 6px;
            border: 3px solid #000;
          }
        </style>
      </head>
      <body>
        <div id="scrollContent">${htmlContent}</div>
        <script>
          function autoScrollContent(container, scrollTime) {
            const totalHeight = container.scrollHeight - container.clientHeight;
            const scrollPerMs = totalHeight / (scrollTime * 1000);
            let scrollPosition = 0;
            const startScroll = performance.now();

            function step(timestamp) {
              const elapsed = timestamp - startScroll;
              scrollPosition = elapsed * scrollPerMs;
              container.scrollTop = scrollPosition;

              if (scrollPosition < totalHeight) {
                requestAnimationFrame(step);
              }
            }

            requestAnimationFrame(step);
          }

          const scrollContainer = document.getElementById('scrollContent');
          if ("${autoScroll}" === "ON") {
            autoScrollContent(scrollContainer, ${scrollTime});
          }
        </script>
      </body>
      </html>
    `);

      newTab.document.close();
    } catch (error) {
      console.error("Error fetching data:", error);
      alert("Failed to fetch data. Please try again.");
    }
  });