diff --git a/README b/README deleted file mode 100644 index e69de29..0000000 diff --git a/README.md b/README.md new file mode 100644 index 0000000..1425dff --- /dev/null +++ b/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. + diff --git a/TangleKit/BVTouchable.js b/TangleKit/BVTouchable.js index d0d4a5e..28e470d 100644 --- a/TangleKit/BVTouchable.js +++ b/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,17 +84,17 @@ 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; } @@ -102,22 +102,22 @@ var BVTouchable = this.BVTouchable = new Class ({ 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); diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js index ca5dd12..880e997 100644 --- a/TangleKit/TangleKit.js +++ b/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,7 +144,7 @@ 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(); @@ -152,19 +152,19 @@ Tangle.classes.TKAdjustableNumber = { // 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); }, @@ -172,7 +172,7 @@ Tangle.classes.TKAdjustableNumber = { 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,12 +202,12 @@ 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; @@ -215,14 +215,14 @@ Tangle.classes.TKAdjustableNumber = { 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);