Skip to content

Commit 56b9c11

Browse files
author
Philip Guo
committed
Several changes:
- Added a local copy of jQuery 1.6 - Added an optional editCodeBaseURL parameter to ExecutionVisualizer - Organized dependencies for pytutor.js ... reference these files from HTML: <!-- requirements for pytutor.js --> <script type="text/javascript" src="js/d3.v2.min.js"></script> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> <script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <!-- for handling back button and URL hashes --> <script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script> <!-- for rendering SVG connectors --> <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <!-- for sliders and other UI elements --> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/pytutor.js"></script> <link rel="stylesheet" href="css/pytutor.css"/>
1 parent 85bf961 commit 56b9c11

File tree

7 files changed

+77
-62
lines changed

7 files changed

+77
-62
lines changed

‎PyTutorGAE/embedding-examples.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎PyTutorGAE/embedding-test.html‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,18 @@
44
<head>
55
<title>Online Python Tutor embedding test</title>
66

7-
<!-- jQuery 1.6.0 -->
8-
<!-- online version hosted by Google - use https for secure connections -->
9-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
10-
11-
<!-- jsPlumb library for rendering connectors -->
12-
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script>
13-
14-
<!-- jQuery UI -->
15-
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
16-
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
17-
18-
<!-- d3 -->
7+
<!-- requirements for pytutor.js -->
198
<script type="text/javascript" src="js/d3.v2.min.js"></script>
9+
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
10+
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <!-- for handling back button and URL hashes -->
11+
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script> <!-- for rendering SVG connectors -->
12+
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <!-- for sliders and other UI elements -->
13+
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
2014

2115
<script type="text/javascript" src="js/pytutor.js"></script>
2216
<link rel="stylesheet" href="css/pytutor.css"/>
2317

18+
2419
<script type="text/javascript" src="embedding-examples.js"></script>
2520

2621

‎PyTutorGAE/js/jquery-1.3.2.min.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎PyTutorGAE/js/jquery-1.6.min.js‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎PyTutorGAE/js/opt-frontend.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ var appMode = 'edit'; // 'edit' or 'visualize'
3535

3636
var preseededCode = null; // if you passed in a 'code=<code string>' in the URL, then set this var
3737
var preseededCurInstr = null; // if you passed in a 'curInstr=<number>' in the URL, then set this var
38+
var preseededMode = null; // if you passed in a 'mode=<mode string>' in the URL, then set this var
3839

3940

4041
var myVisualizer = null; // singleton ExecutionVisualizer instance
@@ -47,7 +48,7 @@ function enterEditMode() {
4748
var pyInputCodeMirror; // CodeMirror object that contains the input text
4849

4950
function setCodeMirrorVal(dat) {
50-
pyInputCodeMirror.setValue(dat);
51+
pyInputCodeMirror.setValue(dat.rtrim() /* kill trailing spaces */);
5152
}
5253

5354

@@ -68,8 +69,9 @@ $(document).ready(function() {
6869
$(window).bind("hashchange", function(e) {
6970
appMode = $.bbq.getState('mode'); // assign this to the GLOBAL appMode
7071

71-
// globals defined in pytutor.js
72+
// yuck, globals!
7273
preseededCode = $.bbq.getState('code');
74+
preseededMode = $.bbq.getState('mode');
7375

7476
if (!preseededCurInstr) { // TODO: kinda gross hack
7577
preseededCurInstr = Number($.bbq.getState('curInstr'));
@@ -85,9 +87,8 @@ $(document).ready(function() {
8587
if (!myVisualizer) {
8688
appMode = 'edit';
8789

88-
if (preseededCode) {
89-
// if you've pre-seeded 'code' and 'curInstr' params in the URL hash,
90-
// then punt for now ...
90+
if (preseededCode && preseededMode == 'visualize') {
91+
// punt for now ...
9192
}
9293
else {
9394
$.bbq.pushState({ mode: 'edit' }, 2 /* completely override other hash strings to keep URL clean */);

‎PyTutorGAE/js/pytutor.js‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,23 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2727
*/
2828

2929

30+
/* To import, put this at the top of your HTML page:
31+
32+
<!-- requirements for pytutor.js -->
33+
<script type="text/javascript" src="js/d3.v2.min.js"></script>
34+
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
35+
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <!-- for handling back button and URL hashes -->
36+
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script> <!-- for rendering SVG connectors -->
37+
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <!-- for sliders and other UI elements -->
38+
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
39+
40+
<script type="text/javascript" src="js/pytutor.js"></script>
41+
<link rel="stylesheet" href="css/pytutor.css"/>
42+
43+
*/
44+
45+
46+
3047
var curVisualizerID = 1; // global to uniquely identify each ExecutionVisualizer instance
3148

3249
// domRootID is the string ID of the root element where to render this instance
@@ -38,8 +55,9 @@ var curVisualizerID = 1; // global to uniquely identify each ExecutionVisualizer
3855
// startingInstruction - the (zero-indexed) execution point to display upon rendering
3956
// hideOutput - hide "Program output" and "Generate URL" displays
4057
// codeDivHeight - maximum height of #pyCodeOutputDiv (in pixels)
58+
// editCodeBaseURL - the base URL to visit when the user clicks 'Edit code'
4159
function ExecutionVisualizer(domRootID, dat, params) {
42-
this.curInputCode = dat.code;
60+
this.curInputCode = dat.code.rtrim(); // kill trailing spaces
4361
this.curTrace = dat.trace;
4462

4563
this.curInstr = 0;
@@ -125,7 +143,7 @@ ExecutionVisualizer.prototype.render = function() {
125143
<center>\
126144
<div id="pyCodeOutputDiv"/>\
127145
<div id="editCodeLinkDiv">\
128-
<button id="editBtn" class="medBtn" type="button">Edit code</button>\
146+
<a id="editBtn">Edit code</a>\
129147
</div>\
130148
<div id="executionSliderCaption">\
131149
Click here to focus and then use the left and right arrow keys to<br/>\
@@ -172,6 +190,18 @@ ExecutionVisualizer.prototype.render = function() {
172190
</table>');
173191

174192

193+
if (this.params.editCodeBaseURL) {
194+
var urlStr = $.param.fragment(this.params.editCodeBaseURL,
195+
{code: this.curInputCode},
196+
2);
197+
this.domRoot.find('#editBtn').attr('href', urlStr);
198+
}
199+
else {
200+
this.domRoot.find('#editBtn').attr('href', "#");
201+
this.domRoot.find('#editBtn').click(function(){return false;}); // DISABLE the link!
202+
}
203+
204+
175205
// create a persistent globals frame
176206
// (note that we need to keep #globals_area separate from #stack for d3 to work its magic)
177207
this.domRoot.find("#globals_area").append('<div class="stackFrame" id="'
@@ -191,7 +221,7 @@ ExecutionVisualizer.prototype.render = function() {
191221

192222
this.domRoot.find('#genUrlBtn').bind('click', function() {
193223
var urlStr = $.param.fragment(window.location.href,
194-
{code: myViz.curInputCode, curInstr: myViz.curInstr},
224+
{code: myViz.curInputCode, curInstr: myViz.curInstr, mode: 'visualize'},
195225
2);
196226
myViz.domRoot.find('#urlOutput').val(urlStr);
197227
});
@@ -553,7 +583,7 @@ ExecutionVisualizer.prototype.renderPyCodeOutput = function() {
553583
renderSliderBreakpoints();
554584
}
555585

556-
var lines = this.curInputCode.rtrim().split('\n');
586+
var lines = this.curInputCode.split('\n');
557587

558588
for (var i = 0; i < lines.length; i++) {
559589
var cod = lines[i];

‎PyTutorGAE/tutor.html‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,36 +32,28 @@
3232
<head>
3333
<title>Online Python Tutor (v3)</title>
3434

35-
<!-- jQuery 1.6.0 -->
36-
<!-- online version hosted by Google - use https for secure connections -->
37-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
35+
<!-- requirements for pytutor.js -->
36+
<script type="text/javascript" src="js/d3.v2.min.js"></script>
37+
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
38+
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <!-- for handling back button and URL hashes -->
39+
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script> <!-- for rendering SVG connectors -->
40+
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> <!-- for sliders and other UI elements -->
41+
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
3842

43+
<script type="text/javascript" src="js/pytutor.js"></script>
44+
<link rel="stylesheet" href="css/pytutor.css"/>
3945

40-
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script>
46+
47+
<!-- requirements for opt-frontend.js -->
4148

4249
<!-- codemirror.net online code editor -->
4350
<script type="text/javascript" src="js/codemirror/codemirror.js"></script>
4451
<link type="text/css" href="css/codemirror.css" rel="stylesheet" />
4552
<script type="text/javascript" src="js/codemirror/python.js"></script>
4653

47-
<!-- jsPlumb library for rendering connectors -->
48-
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script>
49-
50-
<!-- jQuery UI -->
51-
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
52-
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
53-
54-
<!-- d3 -->
55-
<script type="text/javascript" src="js/d3.v2.min.js"></script>
56-
57-
<!-- my own code -->
58-
<script type="text/javascript" src="js/pytutor.js"></script>
5954
<script type="text/javascript" src="js/opt-frontend.js"></script>
60-
61-
<link rel="stylesheet" href="css/pytutor.css"/>
6255
<link rel="stylesheet" href="css/opt-frontend.css"/>
6356

64-
6557
</head>
6658

6759
<body>

0 commit comments

Comments
 (0)