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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Prototype Console</title>
<script src="../dist/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Prototype.Console = Class.create();
Prototype.Console.prototype = {
initialize: function(element, form, input) {
this.element = $(element);
this.form = $(form);
this.input = $(input);
this.context = window.eval.bind(window);
this.registerCallbacks();
document.title = 'Prototype Console ' + Prototype.Version;
Field.activate(this.input);
},
registerCallbacks: function() {
Event.observe(this.form, 'submit', function(event) {
this.eval($F(this.input));
this.input.value = '';
Field.activate(this.input);
Event.stop(event);
}.bind(this));
},
log: function(type, message) {
new Insertion.Bottom(this.element,
'<tr class="' + type + '"><td>' +
message.escapeHTML() + '</td></tr>');
Element.scrollTo(this.form);
},
eval: function(expression) {
if (expression.match(/^\s*$/)) return;
try {
this.log('input', expression);
window.$_ = this.context.call(window, expression);
this.log('output', Object.inspect($_));
} catch (e) {
this.log('error', e.toString());
}
},
clear: function() {
this.element.innerHTML = '';
}
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.console {
width: 100%;
border-collapse: collapse;
margin-bottom: 50px;
}
.console td {
padding: 5px;
font-family: monospace;
font-size: 14px;
}
.console tr.input td {
background-color: #eee;
font-weight: bold;
}
.console tr.error td,
.console tr.output td {
color: #333;
border-bottom: 1px solid #ccc;
}
.console tr.error td {
color: #f00;
}
#input-form {
width: 100%;
background-color: #f0f5b8;
border-top: 1px solid #333;
padding: 10px;
position: fixed;
height: 25px;
bottom: 0;
margin: 0;
}
</style>
</head>
<body>
<table class="console">
<tbody id="console">
</tbody>
</table>
<form id="input-form">
<input type="text" size="60" id="input" />
<input type="submit" value="Evaluate" />
</form>
<script type="text/javascript">
window.console = new Prototype.Console('console', 'input-form', 'input');
</script>
</body>
</html>
|
