Skip to content

Commit c2f23e0

Browse files
author
Philip Guo
committed
get rid of all global uses of $(___)
1 parent fc5ee07 commit c2f23e0

File tree

2 files changed

+39
-40
lines changed

2 files changed

+39
-40
lines changed

‎PyTutorGAE/js/opt-frontend.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2929

3030
// Pre-reqs: pytutor.js and jquery.ba-bbq.min.js should be imported BEFORE this file
3131

32-
var appMode = 'edit'; // 'edit', 'visualize', or 'grade' (only for question.html)
32+
var appMode = 'edit'; // 'edit' or 'visualize'
3333

3434
var preseededCode = null; // if you passed in a 'code=<code string>' in the URL, then set this var
3535
var preseededCurInstr = null; // if you passed in a 'curInstr=<number>' in the URL, then set this var
@@ -107,7 +107,7 @@ $(document).ready(function() {
107107

108108
// do this AFTER making #pyOutputPane visible, or else
109109
// jsPlumb connectors won't render properly
110-
myVisualizer.render();
110+
myVisualizer.updateOutput();
111111

112112
// customize edit button click functionality AFTER rendering (TODO: awkward!)
113113
$('#pyOutputPane #editBtn').click(function() {

‎PyTutorGAE/js/pytutor.js‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ function ExecutionVisualizer(inputCode, traceData, startingInstruction, domRootI
6767

6868

6969
this.hasRendered = false;
70+
71+
this.render(); // go for it!
7072
}
7173

7274

@@ -144,9 +146,7 @@ ExecutionVisualizer.prototype.render = function() {
144146

145147

146148
this.domRoot.find('#genUrlBtn').bind('click', function() {
147-
// override mode with 'visualize' ...
148149
var urlStr = jQuery.param.fragment(window.location.href, {code: myViz.curInputCode, curInstr: myViz.curInstr}, 2);
149-
150150
myViz.domRoot.find('#urlOutput').val(urlStr);
151151
});
152152

@@ -251,7 +251,7 @@ ExecutionVisualizer.prototype.render = function() {
251251
// before it can receive focus and thus receive keyboard events. Set it here:
252252
this.domRoot.attr('tabindex', '0');
253253
this.domRoot.css('outline', 'none'); // don't display a tacky border when focused
254-
this.domRoot.focus();
254+
255255

256256
this.domRoot.keydown(function(k) {
257257
if (!myViz.keyStuckDown) {
@@ -348,12 +348,12 @@ ExecutionVisualizer.prototype.renderPyCodeOutput = function() {
348348
var sliderOverlay = myViz.domRootD3.select('#executionSliderFooter')
349349
.append('svg')
350350
.attr('id', 'sliderOverlay')
351-
.attr('width', $('#executionSlider').width())
351+
.attr('width', myViz.domRoot.find('#executionSlider').width())
352352
.attr('height', 12);
353353

354354
var xrange = d3.scale.linear()
355355
.domain([0, myViz.curTrace.length - 1])
356-
.range([0, $('#executionSlider').width()]);
356+
.range([0, myViz.domRoot.find('#executionSlider').width()]);
357357

358358
sliderOverlay.selectAll('rect')
359359
.data(myViz.sortedBreakpointsList)
@@ -504,7 +504,7 @@ ExecutionVisualizer.prototype.renderPyCodeOutput = function() {
504504
}
505505

506506

507-
$('#pyCodeOutputDiv').empty();
507+
myViz.domRoot.find('#pyCodeOutputDiv').empty();
508508

509509
// maps this.codeOutputLines to both table columns
510510
this.domRootD3.select('#pyCodeOutputDiv')
@@ -580,10 +580,11 @@ ExecutionVisualizer.prototype.renderPyCodeOutput = function() {
580580
}
581581

582582

583-
// TODO: call this when the window gets resized
584583
ExecutionVisualizer.prototype.updateOutput = function() {
585584
var myViz = this; // to prevent confusion of 'this' inside of nested functions
586585

586+
this.domRoot.focus(); // grab focus so that keyboard shortcuts can work
587+
587588
assert(this.curTrace);
588589

589590
this.domRoot.find('#urlOutput').val(''); // blank out
@@ -598,34 +599,34 @@ ExecutionVisualizer.prototype.updateOutput = function() {
598599
// and DON'T highlight any lines of code in the code display
599600
if (this.curInstr == (totalInstrs-1)) {
600601
if (this.instrLimitReached) {
601-
$("#vcrControls #curInstr").html("Instruction limit reached");
602+
myViz.domRoot.find("#vcrControls #curInstr").html("Instruction limit reached");
602603
}
603604
else {
604-
$("#vcrControls #curInstr").html("Program has terminated");
605+
myViz.domRoot.find("#vcrControls #curInstr").html("Program has terminated");
605606
}
606607
}
607608
else {
608-
$("#vcrControls #curInstr").html("About to run step " + (this.curInstr + 1) + " of " + (totalInstrs-1));
609+
myViz.domRoot.find("#vcrControls #curInstr").html("About to run step " + (this.curInstr + 1) + " of " + (totalInstrs-1));
609610
}
610611

611612

612-
$("#vcrControls #jmpFirstInstr").attr("disabled", false);
613-
$("#vcrControls #jmpStepBack").attr("disabled", false);
614-
$("#vcrControls #jmpStepFwd").attr("disabled", false);
615-
$("#vcrControls #jmpLastInstr").attr("disabled", false);
613+
myViz.domRoot.find("#vcrControls #jmpFirstInstr").attr("disabled", false);
614+
myViz.domRoot.find("#vcrControls #jmpStepBack").attr("disabled", false);
615+
myViz.domRoot.find("#vcrControls #jmpStepFwd").attr("disabled", false);
616+
myViz.domRoot.find("#vcrControls #jmpLastInstr").attr("disabled", false);
616617

617618
if (this.curInstr == 0) {
618-
$("#vcrControls #jmpFirstInstr").attr("disabled", true);
619-
$("#vcrControls #jmpStepBack").attr("disabled", true);
619+
myViz.domRoot.find("#vcrControls #jmpFirstInstr").attr("disabled", true);
620+
myViz.domRoot.find("#vcrControls #jmpStepBack").attr("disabled", true);
620621
}
621622
if (this.curInstr == (totalInstrs-1)) {
622-
$("#vcrControls #jmpLastInstr").attr("disabled", true);
623-
$("#vcrControls #jmpStepFwd").attr("disabled", true);
623+
myViz.domRoot.find("#vcrControls #jmpLastInstr").attr("disabled", true);
624+
myViz.domRoot.find("#vcrControls #jmpStepFwd").attr("disabled", true);
624625
}
625626

626627

627628
// PROGRAMMATICALLY change the value, so evt.originalEvent should be undefined
628-
$('#executionSlider').slider('value', this.curInstr);
629+
myViz.domRoot.find('#executionSlider').slider('value', this.curInstr);
629630

630631

631632
// render error (if applicable):
@@ -634,24 +635,23 @@ ExecutionVisualizer.prototype.updateOutput = function() {
634635
assert(curEntry.exception_msg);
635636

636637
if (curEntry.exception_msg == "Unknown error") {
637-
$("#errorOutput").html('Unknown error: Please email a bug report to philip@pgbovine.net');
638+
myViz.domRoot.find("#errorOutput").html('Unknown error: Please email a bug report to philip@pgbovine.net');
638639
}
639640
else {
640-
$("#errorOutput").html(htmlspecialchars(curEntry.exception_msg));
641+
myViz.domRoot.find("#errorOutput").html(htmlspecialchars(curEntry.exception_msg));
641642
}
642643

643-
$("#errorOutput").show();
644+
myViz.domRoot.find("#errorOutput").show();
644645

645646
hasError = true;
646647
}
647648
else {
648649
if (!this.instrLimitReached) { // ugly, I know :/
649-
$("#errorOutput").hide();
650+
myViz.domRoot.find("#errorOutput").hide();
650651
}
651652
}
652653

653654

654-
655655
function highlightCodeLine(curLine, hasError, isTerminated) {
656656
myViz.domRootD3.selectAll('#pyCodeOutputDiv td.lineNo')
657657
.attr('id', function(d) {return 'lineNo' + d.lineNumber;})
@@ -693,10 +693,10 @@ ExecutionVisualizer.prototype.updateOutput = function() {
693693

694694
// returns True iff lineNo is visible in pyCodeOutputDiv
695695
function isOutputLineVisible(lineNo) {
696-
var lineNoTd = $('#lineNo' + lineNo);
696+
var lineNoTd = myViz.domRoot.find('#lineNo' + lineNo);
697697
var LO = lineNoTd.offset().top;
698698

699-
var codeOutputDiv = $('#pyCodeOutputDiv');
699+
var codeOutputDiv = myViz.domRoot.find('#pyCodeOutputDiv');
700700
var PO = codeOutputDiv.offset().top;
701701
var ST = codeOutputDiv.scrollTop();
702702
var H = codeOutputDiv.height();
@@ -708,10 +708,10 @@ ExecutionVisualizer.prototype.updateOutput = function() {
708708

709709
// smoothly scroll pyCodeOutputDiv so that the given line is at the center
710710
function scrollCodeOutputToLine(lineNo) {
711-
var lineNoTd = $('#lineNo' + lineNo);
711+
var lineNoTd = myViz.domRoot.find('#lineNo' + lineNo);
712712
var LO = lineNoTd.offset().top;
713713

714-
var codeOutputDiv = $('#pyCodeOutputDiv');
714+
var codeOutputDiv = myViz.domRoot.find('#pyCodeOutputDiv');
715715
var PO = codeOutputDiv.offset().top;
716716
var ST = codeOutputDiv.scrollTop();
717717
var H = codeOutputDiv.height();
@@ -720,7 +720,6 @@ ExecutionVisualizer.prototype.updateOutput = function() {
720720
}
721721

722722

723-
724723
// smoothly scroll code display
725724
if (!isOutputLineVisible(curLine)) {
726725
scrollCodeOutputToLine(curLine);
@@ -749,15 +748,15 @@ ExecutionVisualizer.prototype.updateOutput = function() {
749748
// render stdout:
750749

751750
// keep original horizontal scroll level:
752-
var oldLeft = $("#pyStdout").scrollLeft();
753-
$("#pyStdout").val(curEntry.stdout);
751+
var oldLeft = myViz.domRoot.find("#pyStdout").scrollLeft();
752+
myViz.domRoot.find("#pyStdout").val(curEntry.stdout);
754753

755-
$("#pyStdout").scrollLeft(oldLeft);
754+
myViz.domRoot.find("#pyStdout").scrollLeft(oldLeft);
756755
// scroll to bottom, though:
757-
$("#pyStdout").scrollTop($("#pyStdout")[0].scrollHeight);
756+
myViz.domRoot.find("#pyStdout").scrollTop(myViz.domRoot.find("#pyStdout")[0].scrollHeight);
758757

759758

760-
// finally, render all the data structures!!!
759+
// finally, render all of the data structures
761760
this.renderDataStructures();
762761
}
763762

@@ -1221,7 +1220,7 @@ ExecutionVisualizer.prototype.renderDataStructures = function() {
12211220
// wrap ALL compound objects in a heapObject div so that jsPlumb
12221221
// connectors can point to it:
12231222
d3DomElement.append('<div class="heapObject" id="heap_object_' + objID + '"></div>');
1224-
d3DomElement = $('#heap_object_' + objID);
1223+
d3DomElement = myViz.domRoot.find('#heap_object_' + objID);
12251224

12261225

12271226
renderedObjectIDs.set(objID, 1);
@@ -1551,9 +1550,9 @@ ExecutionVisualizer.prototype.renderDataStructures = function() {
15511550
}
15521551
}
15531552

1554-
// clear everything, then just activate $(this) one ...
1555-
$(".stackFrame").removeClass("highlightedStackFrame");
1556-
$('#' + frameID).addClass("highlightedStackFrame");
1553+
// clear everything, then just activate this one ...
1554+
myViz.domRoot.find(".stackFrame").removeClass("highlightedStackFrame");
1555+
myViz.domRoot.find('#' + frameID).addClass("highlightedStackFrame");
15571556
}
15581557

15591558

0 commit comments

Comments
 (0)