Permalink
Browse files

Move graph style stuff to the data-style attribute, so browsers don't…

… strip invalid graph style stuff out of CSS. Fixes #19. Also, allow reinitialization of the graph so that styles don't carry over between problems.
  • Loading branch information...
1 parent 681b69a commit 4627f1f027d725fff976cfed40ea50e30f8e3be9 @osnr osnr committed May 25, 2011
Showing with 64 additions and 64 deletions.
  1. +9 −9 exercises/limits_1.html
  2. +55 −55 utils/graph.js
@@ -24,7 +24,7 @@
</div>
<p><code>\lim_{x\to<var>a</var>} \dfrac{<var>quadratic</var><var>LINE</var>}{<var>LINE</var>} \quad\quad = ?</code></p>
- <div class="graph" style="width: 400px; height: 400px; font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
+ <div class="graph" style="width: 400px; height: 400px;" data-style="font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
plot('(' + quadratic + LINE + ')/' + LINE);
ASdot([a, limtoa], 4, "black", "white");
</div>
@@ -55,7 +55,7 @@
</div>
<p><code>\lim_{x\to<var>a</var>} \dfrac{<var>abs_coef</var>|x + <var>abs_cons</var>|}{x + <var>abs_cons</var>} \quad\quad = ?</code></p>
- <div class="graph" style="width: 400px; height: 400px; font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
+ <div class="graph" style="width: 400px; height: 400px;" data-style="font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
line([-11, abs_coef * -1], [-1 * abs_cons, abs_coef * -1]);
line([-1 * abs_cons, abs_coef], [11, abs_coef]);
@@ -103,7 +103,7 @@
<var>d_cons</var> &\quad \text{if} \quad x = <var>a</var>\\
\end{array} \right.
\end{align*}</code></p>
- <div class="graph" style="width: 400px; height: 400px; font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
+ <div class="graph" style="width: 400px; height: 400px;" data-style="font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
plot(d_line);
ASdot([a, limtoa], 4, "black", "white");
ASdot([a, d_cons], 4, "blue", "blue");
@@ -135,7 +135,7 @@
</div>
<p><code>\lim_{x\to<var>a</var>} <var>q_lcoef</var>x^2 + <var>q_cons</var> \quad\quad = ?</code></p>
- <div class="graph" style="width: 400px; height: 400px; font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
+ <div class="graph" style="width: 400px; height: 400px;" data-style="font-size: 15px; font-family: sans-serif; font-style: bold; stroke: blue;" data-graph-type="plane">
plot(q_lcoef + 'x^2 + ' + q_cons);
</div>
<p class="solution"><code><var>limtoa</var></code></p>
@@ -153,7 +153,7 @@
<div class="hints">
<div>
<p>What happens as we approach <code>x = <var>a</var></code> from the left?</p>
- <div class="graph update" style="stroke: orange; marker: arrow;">
+ <div class="graph update" data-style="stroke: orange; marker: arrow;">
line([a > 0 ? 0 : a + a, 0], [a, 0]);
</div>
</div>
@@ -163,7 +163,7 @@
<tr><th><code>f(x)</code></th><td><var>curFunc(a - 0.1).toFixed(4)</var></td><td><var>curFunc(a - 0.01).toFixed(4)</var></td><td><var>curFunc(a - 0.001).toFixed(4)</var></td></tr>
</table>
It looks like <code>f(x)</code> is approaching <var>l_limtoa</var> from the left.
- <div class="graph update" style="stroke: purple;">
+ <div class="graph update" data-style="stroke: purple;">
line([a, 0], [a, l_limtoa]);
</div>
</div>
@@ -174,15 +174,15 @@
<tr><th><code>f(x)</code></th><td><var>curFunc(a + 0.1).toFixed(4)</var></td><td><var>curFunc(a + 0.01).toFixed(4)</var></td><td><var>curFunc(a + 0.001).toFixed(4)</var></td></tr>
</table>
It looks like <code>f(x)</code> is approaching <var>r_limtoa</var> from the right.
- <div class="graph update" style="stroke: green; marker: arrow;">
+ <div class="graph update" data-style="stroke: green; marker: arrow;">
line([a < 0 ? 0 : a + a, 0], [a, 0]);
</div>
- <div class="graph update" style="stroke: purple;">
+ <div class="graph update" data-style="stroke: purple;">
line([a, 0], [a, r_limtoa]);
</div>
</div>
<p class="final">So <code>\lim_{x\to<var>a</var>} = <var>limtoa</var></code></p>
</div>
</div>
</body>
-</html>
+</html>
View
@@ -66,7 +66,7 @@ var sec = function(x) { return 1/Math.cos(x) };
var csc = function(x) { return 1/Math.sin(x) };
var cot = function(x) { return 1/Math.tan(x) };
var xmin, xmax, ymin, ymax, xscl, yscl,
-xgrid, ygrid, xtick, ytick, initialized;
+xgrid, ygrid, xtick, ytick;
var picture, svgpicture, doc, width, height, a, b, c, d, i, n, p, t, x, y;
var paper;
@@ -129,54 +129,52 @@ function setText(st,id) {
function setBorder(x) { border = x }
function initPicture(x_min,x_max,y_min,y_max) {
- if (!initialized) {
- strokewidth = "1"; // pixel
- strokedasharray = null;
- stroke = "black"; // default line color
- fill = "none"; // default fill color
- fontstyle = "italic"; // default shape for text labels
- fontfamily = "times"; // default font
- fontsize = "16"; // default size
- fontweight = "normal";
- fontstroke = "none"; // default font outline color
- fontfill = "none"; // default font color
- marker = "none";
- initialized = true;
- if (x_min!=null) xmin = x_min;
- if (x_max!=null) xmax = x_max;
- if (y_min!=null) ymin = y_min;
- if (y_max!=null) ymax = y_max;
- if (xmin==null) xmin = -5;
- if (xmax==null) xmax = 5;
- if (typeof xmin != "number" || typeof xmax != "number" || xmin >= xmax)
- alert("Picture requires at least two numbers: xmin < xmax");
- else if (y_max != null && (typeof y_min != "number" ||
- typeof y_max != "number" || y_min >= y_max))
- alert("initPicture(xmin,xmax,ymin,ymax) requires numbers ymin < ymax");
- else {
- xunitlength = (width-2*border)/(xmax-xmin);
- yunitlength = xunitlength;
- //alert(xmin+" "+xmax+" "+ymin+" "+ymax)
- if (ymin==null) {
- origin = [-xmin*xunitlength+border,height/2];
- ymin = -(height-2*border)/(2*yunitlength);
- ymax = -ymin;
- } else {
- if (ymax!=null) yunitlength = (height-2*border)/(ymax-ymin);
- else ymax = (height-2*border)/yunitlength + ymin;
- origin = [-xmin*xunitlength+border,-ymin*yunitlength+border];
- }
- var node = paper.rect(0, 0, width, height);
-
- node.attr({
- "stroke": "white",
- "stroke-width": 0,
- "fill": "white"
- });
-
- border = defaultborder;
- return node;
+ strokewidth = "1"; // pixel
+ strokedasharray = null;
+ stroke = "black"; // default line color
+ fill = "none"; // default fill color
+ fontstyle = "italic"; // default shape for text labels
+ fontfamily = "times"; // default font
+ fontsize = "16"; // default size
+ fontweight = "normal";
+ fontstroke = "none"; // default font outline color
+ fontfill = "none"; // default font color
+ marker = "none";
+
+ if (x_min!=null) xmin = x_min;
+ if (x_max!=null) xmax = x_max;
+ if (y_min!=null) ymin = y_min;
+ if (y_max!=null) ymax = y_max;
+ if (xmin==null) xmin = -5;
+ if (xmax==null) xmax = 5;
+ if (typeof xmin != "number" || typeof xmax != "number" || xmin >= xmax)
+ alert("Picture requires at least two numbers: xmin < xmax");
+ else if (y_max != null && (typeof y_min != "number" ||
+ typeof y_max != "number" || y_min >= y_max))
+ alert("initPicture(xmin,xmax,ymin,ymax) requires numbers ymin < ymax");
+ else {
+ xunitlength = (width-2*border)/(xmax-xmin);
+ yunitlength = xunitlength;
+ //alert(xmin+" "+xmax+" "+ymin+" "+ymax)
+ if (ymin==null) {
+ origin = [-xmin*xunitlength+border,height/2];
+ ymin = -(height-2*border)/(2*yunitlength);
+ ymax = -ymin;
+ } else {
+ if (ymax!=null) yunitlength = (height-2*border)/(ymax-ymin);
+ else ymax = (height-2*border)/yunitlength + ymin;
+ origin = [-xmin*xunitlength+border,-ymin*yunitlength+border];
}
+ var node = paper.rect(0, 0, width, height);
+
+ node.attr({
+ "stroke": "white",
+ "stroke-width": 0,
+ "fill": "white"
+ });
+
+ border = defaultborder;
+ return node;
}
}
@@ -501,14 +499,10 @@ function grid(dx,dy) { // for backward compatibility
axes(dx,dy,null,dx,dy)
}
-function noaxes() {
- if (!initialized) initPicture();
-}
-
function axes(dx,dy,labels,gdx,gdy) {
//xscl=x is equivalent to xtick=x; xgrid=x; labels=true;
var x, y, ldx, ldy, lx, ly, lxp, lyp, pnode, st;
- if (!initialized) initPicture();
+
if (typeof dx=="string") { labels = dx; dx = null; }
if (typeof dy=="string") { gdx = dy; dy = null; }
if (xscl!=null) {dx = xscl; gdx = xscl; labels = dx}
@@ -813,15 +807,21 @@ jQuery.fn.graph = function() {
}
// Pre-populate all style information from the style attribute
- jQuery.each( jQuery(this).attr("style").split(/\s*;\s*/), function( i, prop ) {
+ jQuery.each( jQuery(this).data("style").split(/\s*;\s*/), function( i, prop ) {
// Properties are formatted using the typical CSS convention
var parts = prop.split(/:\s*/),
name = parts[0].replace(/-/g, ""),
value = parts[1];
-
+
// Only set the property if it already exists
if ( typeof present[ name ] !== "number" ) {
present[ name ] = value;
+ } else if ( name === "fontsize" ) {
+ // Special-case code for fontsize -- we have to strip the px from the css value
+ // since some graphing functions do math on the fontsize string (WTF?)
+
+ // Also fontsize's typeof *is* number when we check it ^^, but becomes a string later
+ present["fontsize"] = value.replace(/px/, "");
}
});

0 comments on commit 4627f1f

Please sign in to comment.