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
|
<style type="text/css">
#canvas { white-space: pre; font-family: Menlo, monospace; cursor: crosshair; }
.b { background: black; color: transparent }
</style>
<div id="canvas"></div>
<select id="color">
<option value="15" selected>light gray</option>
<option value="1">black</option>
<option value="2">blue</option>
<option value="3">green</option>
<option value="5">red</option>
<option value="6">magenta</option>
<option value="7">orange</option>
<option value="10">cyan</option>
</select>
<script>
var contentType = 'text/plain;charset=utf-8'
var fg = "15", bg = "0"
var cols = 80
var rows = 24
var dragging = false
var erasing = false
function init () {
build()
bind()
}
function build () {
var body = ""
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
body += "<span y='" + i + "' x='" + j + "'> </span>"
}
body += "<br>"
}
canvas.innerHTML = body
}
function bind () {
aa(document.querySelectorAll("span")).forEach(function(span){
span.addEventListener('mousedown', function(e){
e.preventDefault()
dragging = true
erasing = !! (span.className == "b")
span.className = erasing ? "" : "b"
span.innerHTML = erasing ? " " : "b"
})
span.addEventListener("mousemove", function(){
if (dragging) {
span.className = erasing ? "" : "b"
span.innerHTML = erasing ? " " : "b"
}
})
})
window.addEventListener('mouseup', function(){
dragging = erasing = false
})
color.addEventListener('change', function(){
fg = bg = color.value
var c = document.querySelector("option:checked").innerHTML
cssRule(".b", "background: " + c)
})
}
function aa (alike) {
return Array.prototype.slice.call(alike)
}
function ascii () {
var lines = []
canvas.innerText.split("\n").forEach(function(row){
if (row.indexOf("b") == -1) return
var last_c = " "
var line = ""
row.replace(/\s+$/,"").split("").forEach(function(c){
if (c == last_c) {
line += c
}
else {
if (c == "b") {
line += "\\x03" + fg + "," + bg + c
}
else {
line += "\\x03" + c
}
last_c = c
}
})
if (last_c == "b") {
line += "\\x03"
}
lines.push(line)
})
var txt = '/exec -out printf "' + lines.join("\\n") + '"\n'
return txt
}
document.body.addEventListener('copy', function (e) {
if (e.clipboardData) {
e.preventDefault();
e.clipboardData.setData(contentType, ascii());
}
if (window.clipboardData) {
e.returnValue = false;
window.clipboardData.setData(contentType, ascii());
}
}, false);
window.cssRule = function (selector, declaration) {
var x = document.styleSheets,y=x.length-1;
x[y].insertRule(selector+"{"+declaration+"}",x[y].cssRules.length);
};
init()
</script>
|
