Permalink
Browse files

cleaning up, bumping to v0.1.0

  • Loading branch information...
worrydream committed Jun 14, 2011
1 parent 80a178e commit 283dc17688124ed8cb407b2ed325c9ca8f0908a0
Showing with 114 additions and 27 deletions.
  1. +6 −4 Examples/CookieExample.js
  2. +8 −8 Tangle.js
  3. +1 −1 TangleKit/TangleKit.css
  4. +54 −4 TangleKit/TangleKit.js
  5. +1 −1 download.html
  6. +38 −4 guide.html
  7. +4 −4 index.html
  8. +1 −1 reference.html
  9. +1 −0 style.css
View
@@ -20,9 +20,11 @@ window.addEvent('domready', function () {
}
};
- [ "cookieExample", "cookieExample2", "cookieExample3" ].each( function (id) {
+ for (var i = 1; ; i++) {
+ var id = "cookieExample" + ((i > 1) ? i : "");
var element = document.getElementById(id);
- if (element) { new Tangle(element,model); }
- });
-
+ if (!element) { break; }
+ new Tangle(element,model);
+ }
+
});
View
@@ -1,6 +1,6 @@
//
// Tangle.js
-// Tangle 0.0.1
+// Tangle 0.1.0
//
// Created by Bret Victor on 5/2/10.
// (c) 2011 Bret Victor. MIT open-source license.
@@ -67,8 +67,8 @@ var Tangle = this.Tangle = function (rootElement, modelClass) {
}
// initialize interesting elements in this list. (Can't traverse "elements"
- // directly, because "elements" is "live", and views that change the node tree
- // will change "elements" mid-traversal.)
+ // directly, because elements is "live", and views that change the node tree
+ // will change elements mid-traversal.)
for (var i = 0, length = interestingElements.length; i < length; i++) {
var element = interestingElements[i];
@@ -103,7 +103,7 @@ var Tangle = this.Tangle = function (rootElement, modelClass) {
}
}
- function getViewsForElement(element, classNames, varNames) {
+ function getViewsForElement(element, classNames, varNames) { // initialize classes
var views = null;
for (var i = 0, length = classNames.length; i < length; i++) {
@@ -123,7 +123,7 @@ var Tangle = this.Tangle = function (rootElement, modelClass) {
return views;
}
- function getOptionsForElement(element) {
+ function getOptionsForElement(element) { // might use dataset someday
var options = {};
var attributes = element.attributes;
@@ -230,7 +230,7 @@ var Tangle = this.Tangle = function (rootElement, modelClass) {
//
// setters
- function addViewSettersForElement(element, varNames, view) {
+ function addViewSettersForElement(element, varNames, view) { // element has a class with an update method
var setter;
if (varNames.length <= 1) {
setter = function (value) { view.update(element, value); };
@@ -246,7 +246,7 @@ var Tangle = this.Tangle = function (rootElement, modelClass) {
addSetterForVariables(setter, varNames);
}
- function addFormatSettersForElement(element, varNames, formatter) {
+ function addFormatSettersForElement(element, varNames, formatter) { // tangle is injecting a formatted value itself
var span = null;
var setter = function (value) {
if (!span) {
@@ -348,7 +348,7 @@ var Tangle = this.Tangle = function (rootElement, modelClass) {
}
function updateModel(shouldInitialize) {
- var ShadowModel = function () {};
+ var ShadowModel = function () {}; // make a shadow object, so we can see exactly which properties changed
ShadowModel.prototype = _model;
var shadowModel = new ShadowModel;
View
@@ -1,6 +1,6 @@
/*
* TangleKit.css
- * Tangle 0.0.1
+ * Tangle 0.1.0
*
* Created by Bret Victor on 6/10/11.
* (c) 2011 Bret Victor. MIT open-source license.
View
@@ -1,6 +1,6 @@
//
// TangleKit.js
-// Tangle 0.0.1
+// Tangle 0.1.0
//
// Created by Bret Victor on 6/10/11.
// (c) 2011 Bret Victor. MIT open-source license.
@@ -15,7 +15,8 @@
// TKIf
//
// Shows the element if value is true (non-zero), hides if false.
-// Add the data-invert="1" attribute to hide if false instead.
+//
+// Attributes: data-invert (optional): show if false instead.
Tangle.classes.TKIf = {
@@ -35,6 +36,8 @@ Tangle.classes.TKIf = {
// TKSwitch
//
// Shows the element's nth child if value is n.
+//
+// False or true values will show the first or second child respectively.
Tangle.classes.TKSwitch = {
@@ -48,12 +51,12 @@ Tangle.classes.TKSwitch = {
//----------------------------------------------------------
//
-// TKPlusMinus
+// TKSwitchPositiveNegative
//
// Shows the element's first child if value is positive or zero.
// Shows the element's second child if value is negative.
-Tangle.classes.TKPlusMinus = {
+Tangle.classes.TKSwitchPositiveNegative = {
update: function (element, value) {
Tangle.classes.TKSwitch.update(element, value < 0);
@@ -78,11 +81,54 @@ Tangle.classes.TKToggle = {
};
+//----------------------------------------------------------
+//
+// TKNumberField
+//
+// An input box where a number can be typed in.
+//
+// Attributes: data-size (optional): width of the box in characters
+
+Tangle.classes.TKNumberField = {
+
+ initialize: function (element, options, tangle, variable) {
+ this.input = new Element("input", {
+ 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);
+ },
+
+ 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); }
+ }
+};
+
+
//----------------------------------------------------------
//
// TKAdjustableNumber
//
// Drag a number to adjust.
+//
+// Attributes: data-min (optional): minimum value
+// data-max (optional): maximum value
+// data-step (optional): granularity of adjustment (can be fractional)
var isAnyAdjustableNumberDragging = false; // hack for dragging one value over another one
@@ -191,6 +237,10 @@ Tangle.classes.TKAdjustableNumber = {
//
// formats
//
+// Most of these are left over from older versions of Tangle,
+// before parameters and printf were available. They should
+// be redesigned.
+//
function formatValueWithPrecision (value,precision) {
if (Math.abs(value) >= 100) { precision--; }
View
@@ -42,7 +42,7 @@ <h3>explorable explanations made easy</h3>
<h2>Download Tangle</h2>
-<p><b><a href="https://github.com/downloads/worrydream/Tangle/Tangle-0.0.1.zip">Tangle-0.0.1.zip</a></b> &mdash; released June 14, 2011</p>
+<p><b><a href="https://github.com/downloads/worrydream/Tangle/Tangle-0.1.0.zip">Tangle-0.1.0.zip</a></b> &mdash; released June 14, 2011</p>
<p>Visit the project on <a href="https://github.com/worrydream/Tangle">GitHub</a>.</p>
View
@@ -247,7 +247,7 @@ <h6>model</h6>
<h6>new Tangle</h6>
-<p>We can now create the tangle. Instead of writing out the <code>rootElement</code> and <code>model</code> as separate variables, we typically just define them inline, like so:</p>
+<p>We can now create the tangle. Instead of writing out the <code>rootElement</code> and <code>model</code> separately, we typically just define them inline, like so:</p>
<pre>
var tangle = new Tangle (document.getElementById("calorieCalculator"), {
@@ -266,7 +266,7 @@ <h6>new Tangle</h6>
<p>That's all there is to the JavaScript.</p>
-<h2>Formats</h2>
+<h2>Formats and Classes</h2>
<p>We're almost done. But when we try it out, we get this:</p>
@@ -278,7 +278,12 @@ <h2>Formats</h2>
<div class="exampleBottom"></div>
</div>
-<p>Our <code>dailyPercent</code> is perhaps a little more precise than necessary. To tell Tangle how to properly display that variable, we can specify a format. In the HTML, we add a <code><b>data-format</b></code> attribute:</p>
+<p>Our <code>dailyPercent</code> is perhaps a little more precise than necessary. To tell Tangle how to properly display that variable, we can specify a format.</p>
+
+
+<h6>Formats</h6>
+
+<p>In the HTML, we add a <code><b>data-format</b></code> attribute:</p>
<pre>
That's &lt;span data-var="dailyPercent" <strong>data-format="%.0f"</strong>&gt;%&lt;/span&gt;
@@ -298,9 +303,38 @@ <h2>Formats</h2>
</div>
+<h6>Classes</h6>
+
+<p>Currently, we can adjust the <code>cookies</code> variable by dragging it, thanks to the <code>TKAdjustableNumber</code> class that we specified:</p>
+
+<pre>
+&lt;span data-var="cookies" class="<b>TKAdjustableNumber</b>"&gt;
+</pre>
+
+<p>Perhaps you don't like dragging, and would rather let your readers type in a number instead. We can simply switch the class to <code>TKNumberField</code>:</p>
+
+<pre>
+&lt;span data-var="cookies" class="<strong>TKNumberField</strong>"&gt;
+</pre>
+
+<p>And our statement becomes:</p>
+
+<div id="cookieExample4" class="example">
+ <div class="exampleTop"></div>
+ <div class="exampleCenter">
+ <p>When you eat <span data-var="cookies" class="TKNumberField" data-size="3"> cookies</span>, you consume <b data-var="calories"> calories</b>. That's <span data-var="dailyPercent" data-format="%.0f">%</span> of your recommended daily calories.</p>
+ </div>
+ <div class="exampleBottom"></div>
+</div>
+
+<p>TangleKit contains a growing selection of classes, and you can define your own classes easily.</p>
+
+
<h2>Possibilities</h2>
-<p>We just worked through a very simple example, to give you a taste of what you can tangle. </p>
+<p>We just worked through a very simple example, to give you a taste of what you can tangle. But there's so much more you can do.</p>
+
+
View
@@ -131,12 +131,12 @@ <h6>Analysis:</h6>
<span data-var="newAdmissionAppliesToEveryone" class="TKToggle TKSwitch"><span>those who paid the charge</span><span>everyone</span></span>.
</p>
- <p>This would <span data-var="deltaBudget" class="TKPlusMinus"><span>collect an extra</span><span>lose</span></span>
+ <p>This would <span data-var="deltaBudget" class="TKSwitchPositiveNegative"><span>collect an extra</span><span>lose</span></span>
$<span data-var="deltaBudget" data-format="abs_e6"></span> million
($<span data-var="taxCollected" data-format="e6"></span> million from the tax,
- <span data-var="deltaRevenue" class="TKPlusMinus"><span>plus</span><span>minus</span></span>
+ <span data-var="deltaRevenue" class="TKSwitchPositiveNegative"><span>plus</span><span>minus</span></span>
$<span data-var="deltaRevenue" data-format="abs_e6"></span> million
- <span data-var="deltaRevenue" class="TKPlusMinus"><span>additional</span><span>lost</span></span> revenue from admission)
+ <span data-var="deltaRevenue" class="TKSwitchPositiveNegative"><span>additional</span><span>lost</span></span> revenue from admission)
for a total state park budget of $<span data-var="budget" data-format="e6"></span> million.
<span data-var="scenarioIndex" class="TKSwitch">
@@ -153,7 +153,7 @@ <h6>Analysis:</h6>
</p>
<p>Park attendance would
- <span data-var="deltaVisitorCount" class="TKPlusMinus"><span>rise</span><span>fall</span></span> by
+ <span data-var="deltaVisitorCount" class="TKSwitchPositiveNegative"><span>rise</span><span>fall</span></span> by
<span data-var="relativeVisitorCount" data-format="percent"></span>, to
<span data-var="newVisitorCount" data-format="e6"></span> million visits each year.</p>
</div>
View
@@ -279,7 +279,7 @@ <h4>initialize</h4>
};
</pre>
-<p>The <code>options</code> paramater is described below.</p>
+<p>The <code>options</code> parameter is described below.</p>
<h4>update</h4>
View
@@ -191,6 +191,7 @@ a:hover {
ul {
list-style-type: none;
+ margin-top:5px;
}
li {

0 comments on commit 283dc17

Please sign in to comment.