manu.bz-github-site/notepad.html at main · m-manu/manu.bz-github-site · 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
<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Notepad</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="Just a text area to type stuff and save it **locally**"/>
    <meta charset="UTF-8"/>
    <style>
        body {
            height: 100%;
        }

        textarea {
            width: 100%;
            height: 100vh;
            font-family: Consolas, 'Courier New', Courier, monospace;
            font-size: x-large;
        }
    </style>
    <script>
        "use strict";

        // Every how seconds should the text be saved locally?
        const SAVE_FREQUENCY = 1;

        // Every how many 'saves' should the text be saved to a "backup"?
        const FREQUENCY_OF_BACKUP = 60;

        // internal
        let number = 0;

        function saveText() {
            const text = document.getElementById('text').value;
            const textInStorage = window.localStorage.getItem("text");
            if (textInStorage !== text) {
                window.localStorage.setItem("text", text);
            }
            number++;
            if (number % FREQUENCY_OF_BACKUP === 0) {
                const textBackupInStorage = window.localStorage.getItem("textBackup");
                if (text !== textBackupInStorage) {
                    window.localStorage.setItem("textBackup", text);
                }
            }
        }

        function loadText() {
            document.getElementById('text').value = window.localStorage.getItem("text");
        }

        function loadTextFromBackup() {
            const shouldOverwrite = window.confirm("Do you want to overwrite the current text with text retrieved from backup?");
            if (shouldOverwrite) {
                document.getElementById('text').value = window.localStorage.getItem("textBackup");
            }
        }

        function handleTab(event) {
            if (event.key === 'Tab') {
                event.preventDefault();
                const start = this.selectionStart;
                const end = this.selectionEnd;
                // set textarea value to: text before caret + tab + text after caret
                this.value = this.value.substring(0, start) + "\t" + this.value.substring(end);
                // put caret at right position again
                this.selectionStart = start + 1;
                this.selectionEnd = start + 1;
            }
        }

        // Command+Shift+Z in Mac or Ctrl+Shift+Z in Windows
        function handleModifierShiftZ(event) {
            const isModifierPressed = event.metaKey || event.ctrlKey; // Both Command and Ctrl
            const isShiftPressed = event.shiftKey;
            const isZPressed = event.key === 'Z' || event.key === 'z';
            // If (Command OR Ctrl) + Shift + Z combination is pressed
            if (isModifierPressed && isShiftPressed && isZPressed) {
                event.preventDefault();
                loadTextFromBackup();
            }
        }

        function initialize() {
            // Handle some keys
            document.getElementById('text').addEventListener('keydown', handleTab);
            document.getElementById('text').addEventListener('keydown', handleModifierShiftZ);
            // Load from local storage
            loadText();
            // Save contents every second
            window.setInterval(saveText, 1000 * SAVE_FREQUENCY);
        }

        document.addEventListener('DOMContentLoaded', initialize);
    </script>
</head>
<body>
<label for="text"></label><textarea id="text" autocomplete="off"></textarea>
</body>
</html>