-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
368 lines (271 loc) · 13.8 KB
/
index.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Highlight Textarea Component</title>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Open+Sans:wght@400&display=swap" rel="stylesheet">
<link href="./texthighlighter.css" rel="stylesheet">
<script src="texthighlighter.js"></script>
<style>
body {
font-family: 'Open Sans', sans-serif;
color: #0a4ba0;
}
h1 {
font-family: 'Bungee', sans-serif;
text-transform: uppercase;
text-shadow: -1px -1px 0 #0a4ba0, 1px -1px 0 #0a4ba0, -1px 1px 0 #0a4ba0, 1px 1px 0 #0a4ba0;
font-size: 54px;
color: #fffffd;
margin: -45px 0 0;
letter-spacing: 3px;
}
main {
max-width: 1000px;
width: 100%;
margin: 20px auto;
}
main > div {
margin-top: -2.2em;
}
button {
border: 1px solid #0a4ba0;
background-color: #bbb7ff;
color: #fff;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
cursor: pointer;
text-shadow: 1px 1px 0 #222;
padding: 10px 15px 7px;
transition: all 0.4s ease;
}
button:hover {
background-color: #0a4ba0;
color: #fff;
}
textarea {
width: calc(100% - 34px);
height: 350px;
padding: 8px 16px;
font-size: 18px;
color: #444;
margin-top: 10px;
background-color: #ffffe1;
scroll-behavior: smooth;
}
hr {
margin: 30px 0;
border-style: solid;
}
div#txtbox {
padding: 2px 5px;
border: 1px solid #eee;
outline: none;
display: inline-block;
width: 244px;
white-space: nowrap;
overflow: hidden;
}
input[type=text] {
max-width: 250px;
padding: 5px 10px;
font-size: 16px;
}
select {
padding: 6px 10px;
font-size: 16px;
}
nav {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
nav > span {
display: inline-block;
margin-bottom: 5px;
}
nav > span#hoppers {
white-space: nowrap;
}
nav > span.clear {
flex-grow: 1;
text-align: right;
}
.count {
font-size: 14px;
}
.hidden {
display: none;
}
.smalltitle {
margin-top: 0;
}
</style>
</head>
<body>
<main>
<h1>Text Highlighter</h1>
<div>
<p class="smalltitle">Javascript class to highlight search results on a textarea without interfering with its operation</p>
<textarea id="txt" spellcheck="false">
THE EGG
By: Andy Weir
You were on your way home when you died.
It was a car accident. Nothing particularly remarkable, but fatal nonetheless. You left behind a wife and two children. It was a painless death. The EMTs tried their best to save you, but to no avail. Your body was so utterly shattered you were better off, trust me.
And that’s when you met me.
“What… what happened?” You asked. “Where am I?”
“You died,” I said, matter-of-factly. No point in mincing words.
“There was a… a truck and it was skidding…”
“Yup,” I said.
“I… I died?”
“Yup. But don’t feel bad about it. Everyone dies,” I said.
You looked around. There was nothingness. Just you and me. “What is this place?” You asked. “Is this the afterlife?”
“More or less,” I said.
“Are you god?” You asked.
“Yup,” I replied. “I’m God.”
“My kids… my wife,” you said.
“What about them?”
“Will they be all right?”
“That’s what I like to see,” I said. “You just died and your main concern is for your family. That’s good stuff right there.”
You looked at me with fascination. To you, I didn’t look like God. I just looked like some man. Or possibly a woman. Some vague authority figure, maybe. More of a grammar school teacher than the almighty.
“Don’t worry,” I said. “They’ll be fine. Your kids will remember you as perfect in every way. They didn’t have time to grow contempt for you. Your wife will cry on the outside, but will be secretly relieved. To be fair, your marriage was falling apart. If it’s any consolation, she’ll feel very guilty for feeling relieved.”
“Oh,” you said. “So what happens now? Do I go to heaven or hell or something?”
“Neither,” I said. “You’ll be reincarnated.”
“Ah,” you said. “So the Hindus were right,”
“All religions are right in their own way,” I said. “Walk with me.”
You followed along as we strode through the void. “Where are we going?”
“Nowhere in particular,” I said. “It’s just nice to walk while we talk.”
“So what’s the point, then?” You asked. “When I get reborn, I’ll just be a blank slate, right? A baby. So all my experiences and everything I did in this life won’t matter.”
“Not so!” I said. “You have within you all the knowledge and experiences of all your past lives. You just don’t remember them right now.”
I stopped walking and took you by the shoulders. “Your soul is more magnificent, beautiful, and gigantic than you can possibly imagine. A human mind can only contain a tiny fraction of what you are. It’s like sticking your finger in a glass of water to see if it’s hot or cold. You put a tiny part of yourself into the vessel, and when you bring it back out, you’ve gained all the experiences it had.
“You’ve been in a human for the last 48 years, so you haven’t stretched out yet and felt the rest of your immense consciousness. If we hung out here for long enough, you’d start remembering everything. But there’s no point to doing that between each life.”
“How many times have I been reincarnated, then?”
“Oh lots. Lots and lots. An in to lots of different lives.” I said. “This time around, you’ll be a Chinese peasant girl in 540 AD.”
“Wait, what?” You stammered. “You’re sending me back in time?”
“Well, I guess technically. Time, as you know it, only exists in your universe. Things are different where I come from.”
“Where you come from?” You said.
“Oh sure,” I explained “I come from somewhere. Somewhere else. And there are others like me. I know you’ll want to know what it’s like there, but honestly you wouldn’t understand.”
“Oh,” you said, a little let down. “But wait. If I get reincarnated to other places in time, I could have interacted with myself at some point.”
“Sure. Happens all the time. And with both lives only aware of their own lifespan you don’t even know it’s happening.”
“So what’s the point of it all?”
“Seriously?” I asked. “Seriously? You’re asking me for the meaning of life? Isn’t that a little stereotypical?”
“Well it’s a reasonable question,” you persisted.
I looked you in the eye. “The meaning of life, the reason I made this whole universe, is for you to mature.”
“You mean mankind? You want us to mature?”
“No, just you. I made this whole universe for you. With each new life you grow and mature and become a larger and greater intellect.”
“Just me? What about everyone else?”
“There is no one else,” I said. “In this universe, there’s just you and me.”
You stared blankly at me. “But all the people on earth…”
“All you. Different incarnations of you.”
“Wait. I’m everyone!?”
“Now you’re getting it,” I said, with a congratulatory slap on the back.
“I’m every human being who ever lived?”
“Or who will ever live, yes.”
“I’m Abraham Lincoln?”
“And you’re John Wilkes Booth, too,” I added.
“I’m Hitler?” You said, appalled.
“And you’re the millions he killed.”
“I’m Jesus?”
“And you’re everyone who followed him.”
You fell silent.
“Every time you victimized someone,” I said, “you were victimizing yourself. Every act of kindness you’ve done, you’ve done to yourself. Every happy and sad moment ever experienced by any human was, or will be, experienced by you.”
You thought for a long time.
“Why?” You asked me. “Why do all this?”
“Because someday, you will become like me. Because that’s what you are. You’re one of my kind. You’re my child.”
“Whoa,” you said, incredulous. “You mean I’m a god?”
“No. Not yet. You’re a fetus. You’re still growing. Once you’ve lived every human life throughout all time, you will have grown enough to be born.”
“So the whole universe,” you said, “it’s just…”
“An egg.” I answered. “Now it’s time for you to move on to your next life.”
And I sent you on your way.
</textarea>
<p><b>Enter a search term below to start you search!</b>
<ul>
<li>Then choose the case sensitivity of the search and if it'll be free or words only. </li>
<li>Next, click the SEARCH button or hit ENTER to start a search. </li>
<li> If you get any results, you can use the PREV (◀) and NEXT (▶) buttons <i>(that only appear after something is highlighted)</i> to navigate them. </li>
<li>You can also use the resize handler to change the box's dimensions and see the result markings adjust in real time. </li>
<li>Finally, click the CLEAR button to remove any highlighted items and reset the class or just type a new search term and click SEARCH again. </li>
</ul>
</p>
<hr>
<nav>
<span>
<input type="text" id="find" onkeypress="preGo(event)" placeholder="Enter search term" />
<select id="sens">
<option value="">Insensitive</option>
<option value="1">Sensitive</option>
</select>
<select id="word">
<option value="">Free Search</option>
<option value="1">Words Only</option>
</select>
</span>
<span>
<button onclick="markText()">Search</button>
</span>
<span id="hoppers" class="hidden">
<button onclick="move('p')">◀</button>
<button onclick="move('n')">▶</button>
</span>
<span class="clear">
<button onclick="cls()">Clear</button>
</span>
</nav>
<div class="found"><span id="count"></span> Found</div>
<br><br>
</div>
</main>
<script>
let tarea, hilite, find, count, hoppers;
function preGo(evt) {
if (evt.key === "Enter") {
event.preventDefault();
markText();
}
}
function markText() {
let arg = document.getElementById('find').value;
let sens = document.getElementById('sens').value;
let word = document.getElementById('word').value;
if (arg) {
hilite.search(arg, sens, word);
count.textContent = hilite.count();
hopperButtons();
}
}
function cls() {
hilite.clear();
count.textContent = '0';
find.value = '';
hopperButtons();
find.focus();
}
function move(op) {
if (op == 'p') { hilite.prev(); } else { hilite.next(); }
}
function inputHandler() {
count.textContent = hilite.count();
hopperButtons();
}
function hopperButtons() {
+count.textContent ? hoppers.classList.remove('hidden') : hoppers.classList.add('hidden');
}
document.addEventListener('DOMContentLoaded', function() {
tarea = document.getElementById('txt');
find = document.getElementById('find');
count = document.getElementById('count');
hoppers = document.getElementById('hoppers');
hilite = new textHighlight(tarea);
count.textContent = '0';
tarea.addEventListener('input', inputHandler);
inputHandler();
});
</script>
</body>
</html>