Skip to content

Commit 9ac1f1c

Browse files
thomasleplusthomasleplus
committed
Set oninput listeners programatically
1 parent 7a5d26c commit 9ac1f1c

File tree

2 files changed

+128
-86
lines changed

2 files changed

+128
-86
lines changed

‎_layouts/default.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{% seo %}
1111
</head>
1212

13-
<body onload="fillSection(document.getElementById('bookmarklets'), '{{site.github.repository_nwo}}');">
13+
<body onload="init('{{site.github.repository_nwo}}');">
1414

1515
<header>
1616
<div class="container">
@@ -30,11 +30,11 @@ <h2>{{ site.description | default: site.github.project_tagline }}</h2>
3030
<hr>
3131
<h3>Editor</h3>
3232
<h4>Name</h4>
33-
<input class="container" style="background: rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.15); padding: 10px; font-size: 16px; color: #d0d0d0; border-radius: 2px; word-wrap: normal; overflow: auto; overflow-y: hidden;" type="text" id="mininame" name="mininame" value="Bookmarklet" oninput="document.getElementById('minified').textContent = document.getElementById('mininame').value;">
33+
<input class="container" style="background: rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.15); padding: 10px; font-size: 16px; color: #d0d0d0; border-radius: 2px; word-wrap: normal; overflow: auto; overflow-y: hidden;" type="text" id="mininame" name="mininame" value="Hello, world!">
3434
<h4 style="margin-top: 10px;">Source code</h4>
35-
<textarea class="container" style="height: 20em; background: rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.15); padding: 10px; font-size: 16px; color: #d0d0d0; border-radius: 2px; word-wrap: normal; overflow: auto; overflow-y: hidden;" id="plaintext" name="plaintext" oninput="document.getElementById('minified').href = minify(document.getElementById('plaintext').value);">"use strict";</textarea>
35+
<textarea class="container" style="height: 20em; background: rgba(0,0,0,0.9); border: 1px solid rgba(255,255,255,0.15); padding: 10px; font-size: 16px; color: #d0d0d0; border-radius: 2px; word-wrap: normal; overflow: auto; overflow-y: hidden;" id="plaintext" name="plaintext">"use strict";&#013;&#010;alert( 'Hello, world!');</textarea>
3636
<h4 style="margin-top: 10px;">Result</h4>
37-
<a id="minified" href="javascript:(function()%7B%22use%20strict%22%7D)()">Bookmarklet</a>
37+
<a id="minified" href="javascript:(function()%7B%22use%20strict%22%3B%20alert('Hello%2C%20world!')%3B%7D)()">Hello, world!</a>
3838
</section>
3939
</div>
4040

‎javascripts/fill.js‎

Lines changed: 124 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,133 @@
11
"use strict";
22

33
function minify(js) {
4-
return 'javascript:(function()%7B' + encodeURIComponent(js.replace(/[\r\n\t]+/gm, ' ').replace(/\x20+/gm, ' ').trim()) + '%7D)()';
4+
return (
5+
"javascript:(function()%7B" +
6+
encodeURIComponent(
7+
js
8+
.replace(/[\r\n\t]+/gm, " ")
9+
.replace(/\x20+/gm, " ")
10+
.trim(),
11+
) +
12+
"%7D)()"
13+
);
514
}
615

716
function normalize(s) {
8-
return s.replaceAll(/[^a-zA-Z0-9\x21\$\x26\x27\(\)\*\+\x2c\x2d\.\/\x3a\x3b\x3d\?\x40_]/g, '-').replaceAll(/\x2d+/g, '-');
17+
return s
18+
.replaceAll(
19+
/[^a-zA-Z0-9\x21\$\x26\x27\(\)\*\+\x2c\x2d\.\/\x3a\x3b\x3d\?\x40_]/g,
20+
"-",
21+
)
22+
.replaceAll(/\x2d+/g, "-");
923
}
1024

11-
async function fillSection(section, path) {
12-
var content = [];
13-
console.debug('Fetching index');
14-
var index = await fetch('https://raw.githubusercontent.com/' + path + '/main/javascripts/index.json')
15-
.then((response) => response.json())
16-
.catch(console.error);
17-
console.debug('Fetched index');
18-
content.push(document.createElement('hr'));
19-
var toc = document.createElement('section');
20-
content.push(toc);
21-
toc.id = 'toc';
22-
var ttoc = document.createElement('h3');
23-
toc.appendChild(ttoc);
24-
ttoc.textContent = 'Examples (' + index.length + ')';
25-
var ul = document.createElement('ul');
26-
toc.appendChild(ul);
27-
for (let i = 0; i < index.length; i++) {
28-
var li = document.createElement('li');
29-
ul.appendChild(li);
30-
li.innerHTML = '<a href="#' + encodeURIComponent(normalize(index[i].name)) + '">' + index[i].name + '</a>';
31-
}
32-
var loading = document.getElementById('loading');
33-
for (let i = 0; i < index.length; i++) {
34-
loading.textContent += '.';
35-
content.push(document.createElement('hr'));
36-
console.debug('Adding ' + index[i].name);
37-
var bookmarklet = document.createElement('section');
38-
content.push(bookmarklet);
39-
bookmarklet.className = 'bookmarklet';
40-
var title = document.createElement('h3');
41-
bookmarklet.appendChild(title);
42-
var tlink = document.createElement('a');
43-
title.appendChild(tlink);
44-
tlink.className = 'name';
45-
tlink.id = normalize(index[i].name);
46-
tlink.textContent = index[i].name;
47-
var desc = document.createElement('h4');
48-
bookmarklet.appendChild(desc);
49-
desc.textContent = 'Description';
50-
var description = document.createElement('p');
51-
bookmarklet.appendChild(description);
52-
description.textContent = index[i].description;
53-
console.debug('Fetching source code for ' + index[i].name);
54-
var js = await fetch('https://raw.githubusercontent.com/' + path + '/main/javascripts/' + encodeURIComponent(index[i].name) + '.js')
55-
.then((response) => response.text())
56-
.catch(console.error);
57-
console.debug('Fetched source code for ' + index[i].name);
58-
var book = document.createElement('h4');
59-
bookmarklet.appendChild(book);
60-
book.textContent = 'Bookmarklet';
61-
var instructions = document.createElement('p');
62-
bookmarklet.appendChild(instructions);
63-
instructions.innerHTML = 'Drag and drop or bookmark this link: <a href="' + minify(js) + '">' + index[i].name + '</a>';
64-
var code = document.createElement('h4');
65-
bookmarklet.appendChild(code);
66-
code.textContent = 'Source code';
67-
var pre = document.createElement('pre');
68-
bookmarklet.appendChild(pre);
69-
pre.className = 'highlight';
70-
var source = document.createElement('code');
71-
pre.appendChild(source);
72-
source.textContent = js.trim();
73-
var edit = document.createElement('a');
74-
bookmarklet.appendChild(edit);
75-
edit.textContent = "Edit it!"
76-
edit.href = "#editor";
77-
edit.onclick = function(a1, a2) {
78-
return function() {
79-
var e1 = document.getElementById('plaintext');
80-
e1.value = a1;
81-
e1.dispatchEvent(new Event('input'));
82-
var e2 = document.getElementById('mininame');
83-
e2.value = a2;
84-
e2.dispatchEvent(new Event('input'));
85-
}
86-
}(js, index[i].name);
87-
}
88-
content.push(document.createElement('hr'));
89-
section.replaceChildren(...content);
25+
async function init(path) {
26+
document.getElementById("mininame").oninput = function () {
27+
document.getElementById("minified").textContent =
28+
document.getElementById("mininame").value;
29+
};
30+
document.getElementById("plaintext").oninput = function () {
31+
document.getElementById("minified").href = minify(
32+
document.getElementById("plaintext").value,
33+
);
34+
};
35+
var content = [];
36+
console.debug("Fetching index");
37+
var index = await fetch(
38+
"https://raw.githubusercontent.com/" +
39+
path +
40+
"/main/javascripts/index.json",
41+
)
42+
.then((response) => response.json())
43+
.catch(console.error);
44+
console.debug("Fetched index");
45+
content.push(document.createElement("hr"));
46+
var toc = document.createElement("section");
47+
content.push(toc);
48+
toc.id = "toc";
49+
var ttoc = document.createElement("h3");
50+
toc.appendChild(ttoc);
51+
ttoc.textContent = "Examples (" + index.length + ")";
52+
var ul = document.createElement("ul");
53+
toc.appendChild(ul);
54+
for (let i = 0; i < index.length; i++) {
55+
var li = document.createElement("li");
56+
ul.appendChild(li);
57+
li.innerHTML =
58+
'<a href="#' +
59+
encodeURIComponent(normalize(index[i].name)) +
60+
'">' +
61+
index[i].name +
62+
"</a>";
63+
}
64+
var loading = document.getElementById("loading");
65+
for (let i = 0; i < index.length; i++) {
66+
loading.textContent += ".";
67+
content.push(document.createElement("hr"));
68+
console.debug("Adding " + index[i].name);
69+
var bookmarklet = document.createElement("section");
70+
content.push(bookmarklet);
71+
bookmarklet.className = "bookmarklet";
72+
var title = document.createElement("h3");
73+
bookmarklet.appendChild(title);
74+
var tlink = document.createElement("a");
75+
title.appendChild(tlink);
76+
tlink.className = "name";
77+
tlink.id = normalize(index[i].name);
78+
tlink.textContent = index[i].name;
79+
var desc = document.createElement("h4");
80+
bookmarklet.appendChild(desc);
81+
desc.textContent = "Description";
82+
var description = document.createElement("p");
83+
bookmarklet.appendChild(description);
84+
description.textContent = index[i].description;
85+
console.debug("Fetching source code for " + index[i].name);
86+
var js = await fetch(
87+
"https://raw.githubusercontent.com/" +
88+
path +
89+
"/main/javascripts/" +
90+
encodeURIComponent(index[i].name) +
91+
".js",
92+
)
93+
.then((response) => response.text())
94+
.catch(console.error);
95+
console.debug("Fetched source code for " + index[i].name);
96+
var book = document.createElement("h4");
97+
bookmarklet.appendChild(book);
98+
book.textContent = "Bookmarklet";
99+
var instructions = document.createElement("p");
100+
bookmarklet.appendChild(instructions);
101+
instructions.innerHTML =
102+
'Drag and drop or bookmark this link: <a href="' +
103+
minify(js) +
104+
'">' +
105+
index[i].name +
106+
"</a>";
107+
var code = document.createElement("h4");
108+
bookmarklet.appendChild(code);
109+
code.textContent = "Source code";
110+
var pre = document.createElement("pre");
111+
bookmarklet.appendChild(pre);
112+
pre.className = "highlight";
113+
var source = document.createElement("code");
114+
pre.appendChild(source);
115+
source.textContent = js.trim();
116+
var edit = document.createElement("a");
117+
bookmarklet.appendChild(edit);
118+
edit.textContent = "Edit it!";
119+
edit.href = "#editor";
120+
edit.onclick = (function (a1, a2) {
121+
return function () {
122+
var e1 = document.getElementById("plaintext");
123+
e1.value = a1;
124+
e1.dispatchEvent(new Event("input"));
125+
var e2 = document.getElementById("mininame");
126+
e2.value = a2;
127+
e2.dispatchEvent(new Event("input"));
128+
};
129+
})(js, index[i].name);
130+
}
131+
content.push(document.createElement("hr"));
132+
document.getElementById("bookmarklets").replaceChildren(...content);
90133
}
91-

0 commit comments

Comments
 (0)