-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tt
109 lines (84 loc) · 2.88 KB
/
index.tt
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
<!--
Credit goes to the Ruby on Rails team for this page
has been heavily based on the default Rails page that is
built with a scaffolded application.
Thanks a lot to them for their work.
See Ruby on Rails if you want a kickass framework in Ruby:
http://www.rubyonrails.org/
-->
<div id="page">
<div id="sidebar">
<ul id="sidebar-items">
<li>
<h3>Relations</h3>
<ul class="links">
<li><a href="http://padre.perlide.org/">Padre, the Perl IDE</a></li>
<li><a href="https://github.com/szabgab/Code-Explain">Code::Explain on Github</a></li>
<li><a href="https://github.com/szabgab/Code-Explain-Web">Code::Explain::Web on Github</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="header">
<h1>Type in some Perl code</h1>
<h2>Using Code::Explain Version <% code_explain_version %></h2>
<h2>Current restriction <% limit %> characters</h2>
</div>
<div id="getting-started">
<form method="GET">
<textarea name="code" rows="5" cols="40" id="code"><% code %></textarea>
<input type="button" value="Explain" id="explain">
</form>
<div id="error" style="display: none;">
The current length limitation is <div id="limit"></div>. This code is <div id="length"></div> characters long.
</div>
<div id="result" style="display: none;">
<b>Code:</b>
<div id="code_echo"></div>
<hr />
<b>Explanation:</b><br />
<div id="explanation"></div>
<hr />
<b>PPI Dump:</b><br />
<div id="ppi_dump"></div>
<hr />
<b>PPI Explain:</b><br />
<div id="ppi_explain"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#explain').click(function() {
var code = $('#code').val();
var data = { "code" : code };
//$('#result').slideToggle('fast', function() {});
$('#result').show('fast', function() {});
$('#code_echo').empty();
$('#explanation').empty();
$('#ppi_explain').empty();
$('#ppi_dump').empty();
var code_html = code;
code_html = code_html.replace(/</g, "<");
code_html = code_html.replace(/>/g, ">");
$('#code_echo').append(code_html);
$.post("/explain", data, function(resp) {
console.log('success');
console.log(resp);
var data = jQuery.parseJSON(resp);
$('#explanation').append(data["explanation"]);
var ppi_dump = data["ppi_dump"].join("\n");
$('#ppi_dump').append('<pre>' + ppi_dump + '</pre>');
var ppi_explain = '';
for(var i=0; i < data["ppi_explain"].length; i++) {
ppi_explain += '<b>' + data["ppi_explain"][i]["code"] + '</b>';
ppi_explain += data["ppi_explain"][i]["text"] + '<br>';
}
$('#ppi_explain').append(ppi_explain);
}).fail(function() {
//console.log('fail');
alert('fail');
});
//alert($('#code').val());
})
});
</script>