Make all examples resize to the size of the browser window.

dipspb · May 5, 2011 · 063717f · 063717f
1 parent 3ddfd06
commit 063717f
Show file tree

Hide file tree

Showing 34 changed files with 76 additions and 49 deletions.
diff --git a/examples/Animated/Extruded.html b/examples/Animated/Extruded.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -69,5 +70,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Animated/Flock.html b/examples/Animated/Flock.html
@@ -3,19 +3,20 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
 		// Adapted from Flocking Processing example by Daniel Schiffman:
 		// http://processing.org/learning/topics/flocking.html
 
 		// Resize the document, whenever the window is resized, 
-		window.onresize = function(event) {
-			document.size = Element.getScrollBounds().size;
-			size = document.size;
-			heartPath.position = document.bounds.center;
-			document.redraw();
-		}
+		Event.add(window, {
+			resize: function(event) {
+				size = document.size;
+				heartPath.position = document.bounds.center;
+			}
+		});
 
 		document.currentStyle = {
 			strokeColor: 'white',
@@ -263,9 +264,6 @@
 			mouseDown = false,
 			boids = [];
 
-		// Call to resize the document to the current window size:
-		window.onresize();
-
 		// Add the boids:
 		for (var i = 0; i < 30; i++) {
 			var position = Point.random() * document.size;
@@ -296,11 +294,9 @@
 	<style>
 		body {
 			background: black;
-			margin: 0;
-			overflow: hidden;
 		}
 	</style>
 </head>
 <body>
-	<canvas id='canvas'></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Animated/RadialRainbows.html b/examples/Animated/RadialRainbows.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -67,5 +68,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Animated/Raster.html b/examples/Animated/Raster.html
diff --git a/examples/Animated/RoundedRectangles.html b/examples/Animated/RoundedRectangles.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -43,5 +44,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Animated/Smoothing.html b/examples/Animated/Smoothing.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -52,5 +53,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -31,7 +32,6 @@
 			path.smooth();
 			var placedSymbol = new PlacedSymbol(path);
 			placedSymbol.position = center;
-			//placedSymbol.bounds.center = center;
 			layer.appendBottom(placedSymbol);
 		}
 
@@ -47,5 +47,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Animated/lines.html b/examples/Animated/lines.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -46,5 +47,5 @@
 	</script>
 </head>
 <body style='background-color:black'>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/BouncingBalls.html b/examples/Scripts/BouncingBalls.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -95,5 +96,5 @@
 </head>
 <body>
 	<p>Click to add circles:</p>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/Chain.html b/examples/Scripts/Chain.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -31,10 +32,6 @@
 			path.smooth();
 		}
 
-		function onMouseDrag(event) {
-			onMouseMove(event);
-		}
-
 		function onMouseDown(event) {
 			path.selected = true;
 		}
@@ -45,5 +42,5 @@
 	</script>
 </head>
 <body style='background-color: black'>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/CurveTimeParametrization.html b/examples/Scripts/CurveTimeParametrization.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -42,5 +43,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/RotationRaster.html b/examples/Scripts/RotationRaster.html
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -26,5 +27,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -14,5 +15,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -28,5 +29,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -11,5 +12,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -20,5 +21,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -24,5 +25,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/strokeBounds.html b/examples/Scripts/strokeBounds.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -91,5 +92,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -41,5 +42,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Tools/BezierTool.html b/examples/Tools/BezierTool.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -78,5 +79,5 @@
 	Click and drag to add a points.<br/>
 	Drag segment handles and points to manipulate them. 
 	Close the path to start a new one.
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -29,5 +30,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
@@ -3,6 +3,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<title>Example</title>
+	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript">var root = '../../'</script>
 	<script type="text/javascript" src="../../src/load.js"></script>
 	<script type="text/paperscript" canvas="canvas">
@@ -22,5 +23,5 @@
 	</script>
 </head>
 <body>
-	<canvas id='canvas' width=1024 height=768></canvas>
+	<canvas id='canvas' resize='true'></canvas>
 </body>