FancyLineWrapper/FancyLineWrapper.html at master · rkanter/FancyLineWrapper · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fancy Line Wrapper</title>
    <link rel="stylesheet" href="styles.css"/>
    <!-- Icon from https://icons8.com/icon/q-7YCXE1jTFn/word-wrap with -->
    <!-- background=#395B64 (copyOutputButton background) and color=#333 (body background) -->
    <link rel="icon" type="image/x-icon" href="icons8-word-wrap-96.png">
    <script src="jquery-3.6.3.min.js"></script>
    <script>
    $(document).ready(function() {
        <!-- Loads previous data on refresh -->
        if (localStorage["inputTextAreaData"]) {
            $("#inputTextArea").val(window.localStorage["inputTextAreaData"]);
        }
        if (localStorage["lineLength"]) {
            $("#lineLengthField").val(window.localStorage["lineLength"]);
        }
        syncOutputTextArea()

        <!-- Copies text to clipboard; this also clears the textareas, but that's okay because the above -->
        <!-- localstorage handles repopulating it -->
        $('#copyOutputButton').on('click', () => {
          navigator.clipboard.writeText($("#outputTextArea").val());
        });

        <!-- When the user types or pastes something into the inputTextArea, sync it to the outputTextArea -->
        $("#inputTextArea").on("input", () => syncOutputTextArea());

        <!-- Show the settings modal when the settings button is clicked -->
        $('#settingsButton').on('click', () => {
            $("#settingsModal").show();
        });

        <!-- Hide the settings modal when the close button is clicked -->
        $('#settingsCloseButton').on('click', () => {
            $("#settingsModal").hide();
        });

        <!-- When the user types or pastes something into the lineLengthField, sync the line length and update -->
        $("#lineLengthField").on("input", () => {
            localStorage["lineLength"] = $("#lineLengthField").val();
            syncOutputTextArea()
        });
    });
    function syncOutputTextArea() {
        localStorage["inputTextAreaData"] = $("#inputTextArea").val();
        var lineLength = getLineLength();
        console.log(lineLength);
        var output = "";
        var lines = $("#inputTextArea").val().split('\n')
        lines.forEach(function(nextLine) {
            nextLine = cleanLine(nextLine);
            var currentOutputLine = ""
            var listIndentLevel = determineListIndentLevel(nextLine);
            if (listIndentLevel > 1) {
                currentOutputLine += " ".repeat(listIndentLevel - 2);
            }
            var words = nextLine.trim().split(/\s+/);
            words.forEach(function(nextWord) {
                if (currentOutputLine.length + nextWord.length > lineLength) {
                    currentOutputLine = removeLastCharIfNeeded(currentOutputLine)
                    output += currentOutputLine + '\n';
                    currentOutputLine = "";
                    if (listIndentLevel > 0) {
                        currentOutputLine += " ".repeat(listIndentLevel);
                    }
                }
                currentOutputLine += nextWord + ' ';
            })
            currentOutputLine = removeLastCharIfNeeded(currentOutputLine)
            output += currentOutputLine + '\n';
        })
        output = removeLastCharIfNeeded(output);
        $("#outputTextArea").val(output);
        <!-- Set the line length of the text areas -->
        $("#inputTextArea").attr('cols', lineLength);
        $("#outputTextArea").attr('cols', lineLength);
    }
    function removeLastCharIfNeeded(str) {
      if (str.length > 1) {
        return str.substr(0, str.length - 1);
      }
      return str;
    }
    function cleanLine(line) {
        // Replace "fancy" quotes with plain ones
        line = line.replaceAll("“", "\"");
        line = line.replaceAll("”", "\"");
        return line;
    }
    function determineListIndentLevel(line) {
        const indentLevelPattern = /^( *)\- .*/
        var match = line.match(indentLevelPattern);
        if (match != null) {
            return match[1].length + 2;
        }
        return -1;
    }
    function getLineLength() {
        var lineLength = localStorage["lineLength"];
        if (lineLength === undefined) {
            lineLength = 80;
        }
        return lineLength;
    }
    </script>
</head>
<body>
<h1>Fancy Line Wrapper</h1>
<textarea id="inputTextArea" class="inputTextArea" placeholder="Enter text here" cols="80" rows="15" autofocus></textarea>
<!-- We put these in a form to help align the copyOutputButton with the outputTextArea -->
<form id="outputForm" class="outputForm">
    <textarea id="outputTextArea" class="outputTextArea" placeholder="Get text here" cols="80" rows="15" readonly></textarea>
    <button id="copyOutputButton" class="copyOutputButton">
        <!-- Icon from https://clipground.com/images/copy-4.png -->
        <img src="copy-4.png" title="Click to Copy" class="copyOutputButtonImage">
    </button>
</form>
</br>
<button id="settingsButton" class="settingsButton">Settings</button>
<!-- The Modal -->
<div id="settingsModal" class="settingsModal">
    <!-- Modal content -->
    <div class="settingsModalContent">
        <span id="settingsCloseButton" class="settingsCloseButton">&times;</span>
        <p><h3>Settings</h3>
        <label for="lineLengthField">Line Length:</label>
        <input id="lineLengthField" type="number" class="inputTextArea" value="80">
    </div>
</div>
</br>
</br>
<a href="../FancyLineWrapper" target="_blank">README</a>
</body>
</html>