url-notepad/expanded.html at main · padril/url-notepad · 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
<!-- Copyright (C) 2023 Leo Peckham -->

<!DOCTYPE html>
<html>
    <head>
        <link rel="icon" type="image/x-icon" href="https://art.pixilart.com/sr22cf18a765fa2.png">
        <title>
            Notepad
        </title>
        <style>
            ::-webkit-scrollbar {
                width: 14px;
            }
            ::-webkit-scrollbar-track {
                background: #222;
            }
            ::-webkit-scrollbar-thumb {
                background: #333;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #775;
            }
        </style>
    </head>
    <body style="background-color: #222;
                margin: 0;
                font: 28px monospace;">
        <div style="margin: 2vh;
                    padding: 2vh;
                    border-radius: 10px;
                    background-color: #333;
                    min-height: 92vh;
                    display: flex;">
            <div id="lines" style="color: #555;
                            min-width: 2ch;
                            text-align: right;
                            margin: 0 1ch 0 0;">
                <span id="line1">1</span>
            </div>
            <textarea id="editor" spellcheck="false" contenteditable="true"
                    style="font: inherit;
                           resize: none;
                           padding: 0;
                           margin: 0;
                           width: 100%;
                           color: #ffe;
                           outline: 0;
                           background-color: #333;
                           border: 0;"></textarea>
        </div>
        <script>
            let editor = document.getElementById("editor");
            let last_line = 1;
            let last_line_count = 1;

            function getBrs(text) {
                temp = document.createElement('span');
                temp.style.font = window.getComputedStyle(editor).font;
                temp.style.fontSize = window.getComputedStyle(editor).fontSize;
                temp.style.position = 'absolute';
                temp.style.visibility = 'hidden';
                temp.style['white-space'] = 'nowrap';
                temp.textContent = text;
                document.body.appendChild(temp);
                let line_width = temp.getBoundingClientRect().width;
                document.body.removeChild(temp);
                return`<br>`.repeat(line_width / editor.scrollWidth);
            }

            editor.addEventListener("keydown", function(e) {
                if (e.key == "Tab") {
                    e.preventDefault();
                    var start = this.selectionStart;
                    var end = this.selectionEnd;
                    this.value = this.value.substring(0,start) + "    "
                        + this.value.substring(end);
                    this.selectionEnd = start + 4;
                }
                });

            editor.addEventListener("input", function(e) {
                lines = this.value.split(/\r\n|\r|\n/);
                if (last_line_count != lines.length) {
                    document.getElementById("lines").innerHTML = [...Array(lines.length).keys()]
                        .map(i => `<span id="line${i + 1}">${i + 1}${getBrs(lines[i])}</span>`)
                        .join("<br>");
                        last_line_count = lines.length;
                }
                });

            editor.addEventListener("keydown",   checkcaret);
            editor.addEventListener("mousedown", checkcaret);
            editor.addEventListener("paste",     checkcaret);
            editor.addEventListener("input",     checkcaret);
            editor.addEventListener("cut",       checkcaret);
            function checkcaret() {
                setTimeout(function() {
                    let start = editor.selectionStart;
                    let line = editor.value.substring(0, start)
                                           .split(/\r\n|\r|\n/).length;
                    let lines = editor.value.split(/\r\n|\r|\n/);
                    if (last_line_count == lines.length) {
                        document.getElementById(`line${line}`).innerHTML = `${line}${getBrs(lines[line - 1])}`;
                        document.getElementById(`line${line}`).style.color="#996";
                    }
                    if (last_line != line) {
                        try {
                            document.getElementById(`line${last_line}`)
                                .style.color="#555";
                        } catch {};
                    };
                    last_line = line;
                    } ,0)
                };

        </script>
    </body>
</html>