Ie8 support

README.md

@@ -0,0 +1,16 @@
+Tangle
+======
+
+Tangle is a JavaScript library for creating **reactive documents**. Your
+readers can interactively explore possibilities, play with parameters, and see
+the document update immediately. Tangle is super-simple and easy to learn.
+
+For all of the documentation goodness you can handle, visit the 
+[Official Tangle Site](http://worrydream.com/Tangle/).
+
+Browser Support
+===============
+
+Tangle currently supports ie8+ and the stable versions of Chrome, Safari,
+Firefox and Opera.
+

TangleKit/BVTouchable.js

@@ -6,7 +6,7 @@
 //  (c) 2011 Bret Victor.  MIT open-source license.
 //
 
-(function () {
+(function ($) {
 
 var BVTouchable = this.BVTouchable = new Class ({
 
@@ -15,7 +15,7 @@ var BVTouchable = this.BVTouchable = new Class ({
 		this.delegate = delegate;
 		this.setTouchable(true);
 	},
-	
+
 
 	//----------------------------------------------------------------------------------
 	//
@@ -39,26 +39,26 @@ var BVTouchable = this.BVTouchable = new Class ({
 					touchCancel: this._touchCancel.bind(this)
 				};
 			}
-			this.element.addEvent("mousedown", this._mouseBound.mouseDown);
-			this.element.addEvent("touchstart", this._mouseBound.touchStart);
+			$(this.element).addEvent("mousedown", this._mouseBound.mouseDown);
+			$(this.element).addEvent("touchstart", this._mouseBound.touchStart);
 		}
 		else {
-			this.element.removeEvents("mousedown");
-			this.element.removeEvents("touchstart");
+			$(this.element).removeEvents("mousedown");
+			$(this.element).removeEvents("touchstart");
 		}
 	},
-	
+
 	touchDidGoDown: function (touches) { this.delegate.touchDidGoDown(touches); },
 	touchDidMove: function (touches) { this.delegate.touchDidMove(touches);  },
 	touchDidGoUp: function (touches) { this.delegate.touchDidGoUp(touches);  },
-	
+
 	_mouseDown: function (event) {
 		event.stop();
-		this.element.getDocument().addEvents({
+		$(this.element.getDocument()).addEvents({
 			mousemove: this._mouseBound.mouseMove,
 			mouseup: this._mouseBound.mouseUp
 		});
-	
+
 		this.touches = new BVTouches(event);
 		this.touchDidGoDown(this.touches);
 	},
@@ -73,9 +73,9 @@ var BVTouchable = this.BVTouchable = new Class ({
 		event.stop();
 		this.touches._goUpWithEvent(event);
 		this.touchDidGoUp(this.touches);
-		
+
 		delete this.touches;
-		this.element.getDocument().removeEvents({
+		$(this.element.getDocument()).removeEvents({
 			mousemove: this._mouseBound.mouseMove,
 			mouseup: this._mouseBound.mouseUp
 		});
@@ -84,40 +84,40 @@ var BVTouchable = this.BVTouchable = new Class ({
 	_touchStart: function (event) {
 		event.stop();
 		if (this.touches || event.length > 1) { this._touchCancel(event); return; }  // only-single touch for now
-		
-		this.element.getDocument().addEvents({
+
+		$(this.element.getDocument()).addEvents({
 			touchmove: this._mouseBound.touchMove,
 			touchend: this._mouseBound.touchEnd,
 			touchcancel: this._mouseBound.touchCancel
 		});
-	
+
 		this.touches = new BVTouches(event);
 		this.touchDidGoDown(this.touches);
 	},
-	
+
 	_touchMove: function (event) {
 		event.stop();
 		if (!this.touches) { return; }
 
 		this.touches._updateWithEvent(event);
 		this.touchDidMove(this.touches);
 	},
-	
+
 	_touchEnd: function (event) {
 		event.stop();
 		if (!this.touches) { return; }
 
 		this.touches._goUpWithEvent(event);
 		this.touchDidGoUp(this.touches);
-		
+
 		delete this.touches;
-		this.element.getDocument().removeEvents({
+		$(this.element.getDocument()).removeEvents({
 			touchmove: this._mouseBound.touchMove,
 			touchend: this._mouseBound.touchEnd,
 			touchcancel: this._mouseBound.touchCancel
 		});
 	},
-	
+
 	_touchCancel: function (event) {
 		this._touchEnd(event);
 	}
@@ -142,12 +142,14 @@ var BVTouches = this.BVTouches = new Class({
 		this.timestamp = event.event.timeStamp;
 		this.downTimestamp = this.timestamp;
 	},
-	
+
 	_updateWithEvent: function (event, isRemoving) {
+        var dx,
+            dy;
 		this.event = event;
 		if (!isRemoving) {
-			var dx = event.page.x - this.globalPoint.x;  // todo, transform to local coordinate space?
-			var dy = -event.page.y - this.globalPoint.y;
+			dx = event.page.x - this.globalPoint.x;  // todo, transform to local coordinate space?
+			dy = -event.page.y - this.globalPoint.y;
 			this.translation.x += dx;
 			this.translation.y += dy;
 			this.deltaTranslation.x += dx;
@@ -160,25 +162,25 @@ var BVTouches = this.BVTouches = new Class({
 		var dt = timestamp - this.timestamp;
 		var isSamePoint = isRemoving || (dx === 0 && dy === 0);
 		var isStopped = (isSamePoint && dt > 150);
-		
+
 		this.velocity.x = isStopped ? 0 : (isSamePoint || dt === 0) ? this.velocity.x : (dx / dt * 1000);
 		this.velocity.y = isStopped ? 0 : (isSamePoint || dt === 0) ? this.velocity.y : (dy / dt * 1000);
 		this.timestamp = timestamp;
 	},
-	
+
 	_goUpWithEvent: function (event) {
 		this._updateWithEvent(event, true);
 		this.count = 0;
-		
+
 		var didMove = Math.abs(this.translation.x) > 10 || Math.abs(this.translation.y) > 10;
 		var wasMoving = Math.abs(this.velocity.x) > 400 || Math.abs(this.velocity.y) > 400;
 		this.wasTap = !didMove && !wasMoving && (this.getTimeSinceGoingDown() < 300);
 	},
-	
+
 	getTimeSinceGoingDown: function () {
 		return this.timestamp - this.downTimestamp;
 	},
-	
+
 	resetDeltaTranslation: function () {
 		this.deltaTranslation.x = 0;
 		this.deltaTranslation.y = 0;
@@ -189,4 +191,4 @@ var BVTouches = this.BVTouches = new Class({
 
 //====================================================================================
 
-})();
+})(document.id);

TangleKit/TangleKit.js

@@ -7,7 +7,7 @@
 //
 
 
-(function () {
+(function ($) {
 
 
 //----------------------------------------------------------
@@ -19,15 +19,15 @@
 //  Attributes:  data-invert (optional):  show if false instead.
 
 Tangle.classes.TKIf = {
-    
+
     initialize: function (element, options, tangle, variable) {
         this.isInverted = !!options.invert;
     },
-    
+
     update: function (element, value) {
         if (this.isInverted) { value = !value; }
-        if (value) { element.style.removeProperty("display"); } 
-        else { element.style.display = "none" };
+        if (value) { element.style.removeProperty("display"); }
+        else { element.style.display = "none"; }
     }
 };
 
@@ -44,7 +44,7 @@ Tangle.classes.TKSwitch = {
 
     update: function (element, value) {
         element.getChildren().each( function (child, index) {
-            if (index != value) { child.style.display = "none"; } 
+            if (index != value) { child.style.display = "none"; }
             else { child.style.removeProperty("display"); }
         });
     }
@@ -75,7 +75,7 @@ Tangle.classes.TKSwitchPositiveNegative = {
 Tangle.classes.TKToggle = {
 
     initialize: function (element, options, tangle, variable) {
-        element.addEvent("click", function (event) {
+        $(element).addEvent("click", function (event) {
             var isActive = tangle.getValue(variable);
             tangle.setValue(variable, isActive ? 0 : 1);
         });
@@ -95,29 +95,29 @@ Tangle.classes.TKNumberField = {
 
     initialize: function (element, options, tangle, variable) {
         this.input = new Element("input", {
-    		type: "text",
-    		"class":"TKNumberFieldInput",
-    		size: options.size || 6
+            type: "text",
+            "class":"TKNumberFieldInput",
+            size: options.size || 6
         }).inject(element, "top");
-        
+
         var inputChanged = (function () {
             var value = this.getValue();
             tangle.setValue(variable, value);
         }).bind(this);
-        
-        this.input.addEvent("keyup",  inputChanged);
-        this.input.addEvent("blur",   inputChanged);
-        this.input.addEvent("change", inputChanged);
+
+        $(this.input).addEvent("keyup",  inputChanged);
+        $(this.input).addEvent("blur",   inputChanged);
+        $(this.input).addEvent("change", inputChanged);
 	},
-	
+
 	getValue: function () {
         var value = parseFloat(this.input.get("value"));
         return isNaN(value) ? 0 : value;
 	},
-	
+
 	update: function (element, value) {
-	    var currentValue = this.getValue();
-	    if (value !== currentValue) { this.input.set("value", "" + value); }
+        var currentValue = this.getValue();
+        if (value !== currentValue) { this.input.set("value", "" + value); }
 	}
 };
 
@@ -144,35 +144,35 @@ Tangle.classes.TKAdjustableNumber = {
         this.min = (options.min !== undefined) ? parseFloat(options.min) : 0;
         this.max = (options.max !== undefined) ? parseFloat(options.max) : 1e100;
         this.step = (options.step !== undefined) ? parseFloat(options.step) : 1;
-        
+
         this.initializeHover();
         this.initializeHelp();
         this.initializeDrag();
     },
 
 
     // hover
-    
+
     initializeHover: function () {
         this.isHovering = false;
-        this.element.addEvent("mouseenter", (function () { this.isHovering = true;  this.updateRolloverEffects(); }).bind(this));
-        this.element.addEvent("mouseleave", (function () { this.isHovering = false; this.updateRolloverEffects(); }).bind(this));
+        $(this.element).addEvent("mouseenter", (function () { this.isHovering = true;  this.updateRolloverEffects(); }).bind(this));
+        $(this.element).addEvent("mouseleave", (function () { this.isHovering = false; this.updateRolloverEffects(); }).bind(this));
     },
-    
+
     updateRolloverEffects: function () {
         this.updateStyle();
         this.updateCursor();
         this.updateHelp();
     },
-    
+
     isActive: function () {
         return this.isDragging || (this.isHovering && !isAnyAdjustableNumberDragging);
     },
 
     updateStyle: function () {
         if (this.isDragging) { this.element.addClass("TKAdjustableNumberDown"); }
         else { this.element.removeClass("TKAdjustableNumberDown"); }
-        
+
         if (!this.isDragging && this.isActive()) { this.element.addClass("TKAdjustableNumberHover"); }
         else { this.element.removeClass("TKAdjustableNumberHover"); }
     },
@@ -191,7 +191,7 @@ Tangle.classes.TKAdjustableNumber = {
         this.helpElement.setStyle("display", "none");
         this.helpElement.set("text", "drag");
     },
-    
+
     updateHelp: function () {
         var size = this.element.getSize();
         var top = -size.y + 7;
@@ -202,27 +202,27 @@ Tangle.classes.TKAdjustableNumber = {
 
 
     // drag
-    
+
     initializeDrag: function () {
         this.isDragging = false;
         new BVTouchable(this.element, this);
     },
-    
+
     touchDidGoDown: function (touches) {
         this.valueAtMouseDown = this.tangle.getValue(this.variable);
         this.isDragging = true;
         isAnyAdjustableNumberDragging = true;
         this.updateRolloverEffects();
         this.updateStyle();
     },
-    
+
     touchDidMove: function (touches) {
         var value = this.valueAtMouseDown + touches.translation.x / 5 * this.step;
         value = ((value / this.step).round() * this.step).limit(this.min, this.max);
         this.tangle.setValue(this.variable, value);
         this.updateHelp();
     },
-    
+
     touchDidGoUp: function (touches) {
         this.isDragging = false;
         isAnyAdjustableNumberDragging = false;
@@ -273,7 +273,7 @@ Tangle.formats.abs_e6 = function (value) {
 Tangle.formats.freq = function (value) {
     if (value < 100) { return "" + value.round(1) + " Hz"; }
     if (value < 1000) { return "" + value.round(0) + " Hz"; }
-    return "" + (value / 1000).round(2) + " KHz"; 
+    return "" + (value / 1000).round(2) + " KHz";
 };
 
 Tangle.formats.dollars = function (value) {
@@ -289,8 +289,8 @@ Tangle.formats.percent = function (value) {
 };
 
 
-    
+
 //----------------------------------------------------------
 
-})();
+})(document.id);