Merge pull request #576 from drgrice1/add_js_attribs_and_gt_defer

Add a third optional argument to ADD_JS_FILE to add script tag attributes (defer, async, etc)
openwebwork · May 27, 2021 · 5ae626b · 5ae626b
2 parents 8adee5e + 43e78e1
commit 5ae626b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 26 deletions.
diff --git a/macros/PG.pl b/macros/PG.pl
@@ -190,7 +190,7 @@ =head4 ADD_CSS_FILE
 =cut
 
 sub ADD_CSS_FILE {
-  my ($file, $external) = shift;
+  my ($file, $external) = @_;
   push(@{$PG->{flags}{extra_css_files}}, { file => $file, external => $external });
 }
 
@@ -203,16 +203,21 @@ =head4 ADD_JS_FILE
 
 If external is 1, it is assumed the full url is provided.  If external is 0 or
 not given, then file name will be prefixed with the webwork2/htdocs/ directory.
+
+Additional attributes can be passed as a hash reference in the optional third
+argument.  These attributes will be added as attributes to the script tag.
+
 For example:
 
 	ADD_JS_FILE("js/apps/Base64/Base64.js");
 	ADD_JS_FILE("//web.geogebra.org/4.4/web/web.nocache.js", 1);
+	ADD_JS_FILE("js/apps/GraphTool/graphtool.min.js", 0, { id => "gt_script", defer => undef });
 
 =cut
 
 sub ADD_JS_FILE {
-	my ($file, $external) = @_;
-	push(@{$PG->{flags}{extra_js_files}}, { file => $file, external => $external });
+	my ($file, $external, $attributes) = @_;
+	push(@{$PG->{flags}{extra_js_files}}, { file => $file, external => $external, attributes => $attributes });
 }
 
 sub AskSage {

diff --git a/macros/parserGraphTool.pl b/macros/parserGraphTool.pl
@@ -176,15 +176,11 @@ =head1 OPTIONS
 =cut
 
 sub _parserGraphTool_init {
-	if ($main::displayMode ne 'TeX' && $main::displayMode ne 'PTX' && !$main::GraphToolHeaderSet) {
-		main::TEXT(
-			'<link rel="stylesheet" type="text/css" href="/webwork2_files/js/vendor/jsxgraph/jsxgraph.css">' .
-			'<link rel="stylesheet" type="text/css" href="/webwork2_files/js/apps/GraphTool/graphtool.css">' .
-			'<script type="text/javascript" src="/webwork2_files/js/vendor/jsxgraph/jsxgraphcore.js"></script>' .
-			'<script type="text/javascript" src="/webwork2_files/js/apps/GraphTool/graphtool.min.js"></script>'
-		);
-		$main::GraphToolHeaderSet = 1;
-	}
+	ADD_CSS_FILE("js/vendor/jsxgraph/jsxgraph.css");
+	ADD_CSS_FILE("js/apps/GraphTool/graphtool.css");
+	ADD_JS_FILE("js/vendor/jsxgraph/jsxgraphcore.js", 0, { defer => undef });
+	ADD_JS_FILE("js/apps/GraphTool/graphtool.min.js", 0, { defer => undef });
+
 	main::PG_restricted_eval('sub GraphTool { parser::GraphTool->new(@_) }');
 }
 
@@ -355,16 +351,14 @@ sub constructJSXGraphOptions
 {
 	my $self = shift;
 	return if defined($self->{JSXGraphOptions});
-	$self->{JSXGraphOptions} = <<END_OPTS;
-{
-	boundingBox: [${\join(",", @{$self->{bBox}})}],
-	defaultAxes: {
-		x: { ticks: { ticksDistance: $self->{ticksDistanceX}, minorTicks: $self->{minorTicksX}} },
-		y: { ticks: { ticksDistance: $self->{ticksDistanceY}, minorTicks: $self->{minorTicksY}} }
-	},
-	grid: { gridX: $self->{gridX}, gridY: $self->{gridY} }
-}
-END_OPTS
+	$self->{JSXGraphOptions} = JSON->new->encode({
+			boundingBox => $self->{bBox},
+			defaultAxes => {
+				x => { ticks => { ticksDistance => $self->{ticksDistanceX}, minorTicks => $self->{minorTicksX}} },
+				y => { ticks => { ticksDistance => $self->{ticksDistanceY}, minorTicks => $self->{minorTicksY}} }
+			},
+			grid => { gridX => $self->{gridX}, gridY => $self->{gridY} }
+		});
 }
 
 # Produce a hidden answer rule to contain the JavaScript result and insert the graphbox div and
@@ -497,7 +491,8 @@ sub ans_rule {
 		$self->constructJSXGraphOptions;
 		my $ans_name = $self->ANS_NAME;
 		$out .= "<div id='${ans_name}_graphbox' class='graphtool-container'></div>" .
-			"<script>graphTool('${ans_name}_graphbox', { " .
+			"<script>window.addEventListener('DOMContentLoaded', function() {
+			graphTool('${ans_name}_graphbox', { " .
 			"htmlInputId: '${ans_name}', " .
 			"staticObjects: '" . join(',', @{$self->{staticObjects}}) . "'," .
 			"snapSizeX: $self->{snapSizeX}," .
@@ -506,7 +501,7 @@ sub ans_rule {
 			"customTools: {$customTools}," .
 			"availableTools: ['" . join("','", @{$self->{availableTools}}) . "']," .
 			"JSXGraphOptions: $self->{JSXGraphOptions}," .
-			"});</script>";
+			"});});</script>";
 	}
 
 	return $out;
@@ -526,7 +521,7 @@ sub cmp_preprocess {
 		$ans->{preview_latex_string} = <<"END_ANS";
 <div id='${ans_name}_student_ans_graphbox' class='graphtool-answer-container'></div>
 <script>
-jQuery(function() {
+window.addEventListener("DOMContentLoaded", function() {
 	graphTool("${ans_name}_student_ans_graphbox", {
 		staticObjects: "$graphObjs",
 		isStatic: true,
@@ -558,7 +553,7 @@ sub cmp {
 		$cmp->{rh_ans}{correct_ans_latex_string} = << "END_ANS";
 <div id='${ans_name}_correct_ans_graphbox' class='graphtool-answer-container'></div>
 <script>
-jQuery(function() {
+window.addEventListener("DOMContentLoaded", function() {
 	graphTool("${ans_name}_correct_ans_graphbox", {
 		staticObjects: "$graphObjs",
 		isStatic: true,