Updating examples

mattpodwysocki · mattpodwysocki · commit 6809e2f4dc1a · 2012-03-22T01:11:29.000-04:00
diff --git a/examples/canvaspaint.html b/examples/canvaspaint.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+	<head>
+        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
+        <script src="rx.min.js" type="text/javascript"></script>
+        <script src="rx.jquery.js" type="text/javascript"></script>
+		<script type="text/javascript">
+
+			function getOffset(event) {
+				return { 
+					offsetX: event.offsetX === undefined ? event.layerX : event.offsetX,
+	 				offsetY: event.offsetY === undefined ? event.layerY : event.offsetY
+ 				};
+			}
+
+			$(function () {
+				var canvas = document.getElementById('tutorial');
+				if (canvas.getContext) {
+					var ctx = canvas.getContext('2d');
+					ctx.beginPath();
+
+					var cv = $('#tutorial');
+
+					// Calculate mouse deltas
+					var mouseMoves = cv.onAsObservable('mousemove')
+					, mouseDiffs = mouseMoves.bufferWithCount(2, 1).select(function (x) {
+						return { first: getOffset(x[0]), second: getOffset(x[1]) };
+					})
+
+					// Merge mouse down and mouse up
+					, mouseButton = cv.onAsObservable('mousedown').select(function (x) { return true; })
+						.merge(cv.onAsObservable('mouseup').select(function (x) { return false; }))
+
+					// Determine whether to paint or lift
+					, paint = mouseButton.select(function (down) { return down ? mouseDiffs : mouseDiffs.take(0) }).switchLatest();
+
+					// Paint the results
+					paint.subscribe(function (x) {
+						ctx.moveTo(x.first.offsetX, x.first.offsetY);
+						ctx.lineTo(x.second.offsetX, x.second.offsetY);
+						ctx.stroke();
+					});
+				}
+			});
+		</script>
+	</head>
+	<body>
+		<canvas id="tutorial" width="640" height="480"></canvas>
+	</body>
+</html>
diff --git a/examples/dragndrop.html b/examples/dragndrop.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+	<head>
+        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
+        <script src="rx.min.js" type="text/javascript"></script>
+        <script src="rx.jquery.js" type="text/javascript"></script>
+		<script type="text/javascript">
+
+			$(function () {
+
+				var dragTarget = $('#dragTarget')
+
+				// Get the three major events
+				, mouseup = dragTarget.onAsObservable('mouseup')
+				, mousemove = dragTarget.onAsObservable('mousemove')
+				, mousedown = dragTarget.onAsObservable('mousedown').select(function (event) {
+					// calculate offsets when mouse down
+					event.preventDefault();
+					return { left: event.clientX - dragTarget.offset().left, top: event.clientY - dragTarget.offset().top };
+				})
+
+				// Combine mouse down with mouse move until mouse up
+				, mousedrag = mousedown.selectMany(function(imageOffset) {
+					return mousemove.select(function (pos) {
+						// calculate offsets from mouse down to mouse moves
+						return {
+							left: pos.clientX - imageOffset.left, top: pos.clientY - imageOffset.top
+						};
+					}).takeUntil(mouseup);
+				});
+
+				mousedrag.subscribe (function (pos) {
+					// Update position
+					$('#dragTarget').css({top: pos.top, left: pos.left});
+				});
+			});
+		</script>
+	</head>
+	<body>
+		<div id="dragTarget"
+		     style="background-color: #000000; border: 1px solid #666666;
+		            color: #ffffff; padding: 10px; position: absolute;
+		            font-family: sans-serif; cursor: move">
+		Drag Me!
+		</div>
+	</body>
+</html>
