..

worrydream · Jun 11, 2011 · 6ee450d · 6ee450d
1 parent 460e203
commit 6ee450d
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 66 deletions.
diff --git a/Examples/CookieExample.js b/Examples/CookieExample.js
@@ -13,5 +13,4 @@ window.addEvent('domready', function () {
         update: function () { this.calories = this.cookies * 50; },
     });
 
-
 });
diff --git a/Tangle.js b/Tangle.js
@@ -23,7 +23,7 @@
 //
 //
 
-Tangle = function (rootElement, modelClass) {
+var Tangle = this.Tangle = function (rootElement, modelClass) {
 
     var tangle = this;
     tangle.element = rootElement;
@@ -32,8 +32,9 @@ Tangle = function (rootElement, modelClass) {
     tangle.setValue = setValue;
     tangle.setValues = setValues;
 
-    var model;
-    var settersByVariableName = {};
+    var _model;
+    var _settersByVariableName = {};
+    var _varargConstructorsByArgCount = [];
 
 
     //----------------------------------------------------------
@@ -55,10 +56,10 @@ Tangle = function (rootElement, modelClass) {
 
         // build a list of elements with class or data-var attributes
 
-		for (var i = 0, length = elements.length; i < length; i++) {
+        for (var i = 0, length = elements.length; i < length; i++) {
             var element = elements[i];
             if (element.getAttribute("class") || element.getAttribute("data-var")) {
-            	interestingElements.push(element);
+                interestingElements.push(element);
             }
         }
 
@@ -109,11 +110,7 @@ Tangle = function (rootElement, modelClass) {
             var args = [ element, tangle ];
             if (varNames) { args = args.concat(varNames); }
 
-            var View = function () { };
-            View.prototype = clas;
-
-            var view = new View();  // todo mootools class
-            if (view.initialize) { view.initialize.apply(view,args); }
+            var view = constructClass(clas, args);
 
             if (!views) { views = []; }
             views.push(view);
@@ -122,6 +119,28 @@ Tangle = function (rootElement, modelClass) {
         return views;
     }
 
+    function constructClass(clas, args) {
+        if (typeof clas !== "function") {  // class is prototype object
+            var View = function () { };
+            View.prototype = clas;
+            var view = new View();
+            if (view.initialize) { view.initialize.apply(view,args); }
+            return view;
+        }
+        else {  // class is constructor function, which we need to "new" with varargs (but no built-in way to do so)
+            var ctor = _varargConstructorsByArgCount[args.length];
+            if (!ctor) {
+                var ctorArgs = [];
+                for (var i = 0; i < args.length; i++) { ctorArgs.push("args[" + i + "]"); }
+                var ctorString = "(function (clas,args) { return new clas(" + ctorArgs.join(",") + "); })";
+                console.log(ctorString);
+                ctor = eval(ctorString);
+                _varargConstructorsByArgCount[args.length] = ctor;
+            }
+            return ctor(clas,args);
+        }
+    }
+
 
     //----------------------------------------------------------
     //
@@ -137,9 +156,9 @@ Tangle = function (rootElement, modelClass) {
     }
 
     function getSprintfFormatter(formatAttribute) {
-    	if (!sprintf || !formatAttribute.test(/\%/)) { return null; }
-    	var formatter = function (value) { return sprintf(formatAttribute, value); };
-    	return formatter;
+        if (!sprintf || !formatAttribute.test(/\%/)) { return null; }
+        var formatter = function (value) { return sprintf(formatAttribute, value); };
+        return formatter;
     }
 
 
@@ -161,7 +180,7 @@ Tangle = function (rootElement, modelClass) {
         }
 
         for (var i = 0; i < varNames.length; i++) {
-            addSetterForVariable(varNames[i], setter);  //  todo, how to avoid being called 3 times
+            addSetterForVariable(varNames[i], setter);
         }
     }
 
@@ -178,12 +197,12 @@ Tangle = function (rootElement, modelClass) {
     }
 
     function addSetterForVariable(varName, setter) {
-        if (!settersByVariableName[varName]) { settersByVariableName[varName] = []; }
-        settersByVariableName[varName].push(setter);
+        if (!_settersByVariableName[varName]) { _settersByVariableName[varName] = []; }
+        _settersByVariableName[varName].push(setter);
     }
 
     function applySettersForVariable(varName, value) {
-        var setters = settersByVariableName[varName];
+        var setters = _settersByVariableName[varName];
         if (!setters) { return; }
         for (var i = 0, length = setters.length; i < length; i++) {
             setters[i](value);
@@ -196,7 +215,7 @@ Tangle = function (rootElement, modelClass) {
     // variables
 
     function getValue(varName) {
-        var value = model[varName];
+        var value = _model[varName];
         if (value === undefined) { log("Tangle: unknown variable: " + varName);  return 0; }
         return value;
     }
@@ -212,11 +231,11 @@ Tangle = function (rootElement, modelClass) {
 
         for (var varName in obj) {
             var value = obj[varName];
-            var oldValue = model[varName];
+            var oldValue = _model[varName];
             if (oldValue === undefined) { log("Tangle: setting unknown variable: " + varName);  return; }
             if (oldValue === value) { continue; }  // don't update if new value is the same
 
-            model[varName] = value;
+            _model[varName] = value;
             applySettersForVariable(varName, value);
             didChangeValue = true;
         }
@@ -230,32 +249,32 @@ Tangle = function (rootElement, modelClass) {
     // model
 
     function setModel(modelClass) {
-        var ModelClass = function () { };  // todo mootools class
+        var ModelClass = function () { };
         ModelClass.prototype = modelClass;
-
-        model = new ModelClass();
+        _model = new ModelClass;
+
         updateModel(true);  // initialize and update
     }
 
     function updateModel(shouldInitialize) {
         var ShadowModel = function () {};
-        ShadowModel.prototype = model;
+        ShadowModel.prototype = _model;
         var shadowModel = new ShadowModel;
 
         if (shouldInitialize) { shadowModel.initialize(); }
         shadowModel.update();
 
         var changedVarNames = [];
         for (var varName in shadowModel) {
-            if (model[varName] !== shadowModel[varName]) {
-                model[varName] = shadowModel[varName];
+            if (_model[varName] !== shadowModel[varName]) {
+                _model[varName] = shadowModel[varName];
                 changedVarNames.push(varName);
             }
         }
 
         for (var i = 0, length = changedVarNames.length; i < length; i++) {
             var varName = changedVarNames[i];
-            applySettersForVariable(varName, model[varName]);
+            applySettersForVariable(varName, _model[varName]);
         }
     }
 

diff --git a/TangleKit/TangleKit.js b/TangleKit/TangleKit.js
@@ -78,7 +78,6 @@ Tangle.classes.TKToggle = {
 };
 
 
-
 //----------------------------------------------------------
 //
 //  TKAdjustableNumber

diff --git a/download.html b/download.html
@@ -23,10 +23,10 @@
 <h1><a href="./">tangle</a></h1>
 <h3>explorable explanations made easy</h3>
 
-<div id="menu">
-    <a id="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
-    <a id="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
-    <a id="menuDownload" href="download.html">Download</a>
+<div class="menu">
+    <a class="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuDownload" href="download.html">Download</a>
 </div>
 
 </div> <!-- header -->
@@ -38,16 +38,16 @@ <h3>explorable explanations made easy</h3>
 <div id="body" class="small">
 
 
-<h2>Download Tangle 0.1.0</h2>
+<h2>Download Tangle</h2>
 
 <p><b><a href="Downloads/Tangle-0.1.0.zip">Tangle-0.1.0.zip</a></b> &mdash; released June 14, 2011</p>
 
 <p>Or visit the project on <a href="https://github.com/worrydream/Tangle">github</a>.</p>
 
 
-<h2>What You'll Get</h2>
+<h2>What You Get</h2>
 
-<p><b><a href="Tangle.js">Tangle.js</a></b> is a lightweight library that provides a simple API for tangling up the values in your document.  Tangle.js has no depenencies, and works with any JavaScript framework, or none at all.</p>
+<p><b><a href="Tangle.js">Tangle.js</a></b> is a lightweight library that provides a simple API for tangling up the values in your document.  Tangle.js has no dependencies, and works with any JavaScript framework, or none at all.</p>
 
 <p><b><a href="TangleKit/">TangleKit</a></b> is an optional collection of UI components that let your readers adjust values and visualize the results.  You can grab whichever components you want, use them, extend them, modify them, or just learn from them and make your own.  TangleKit also includes (and depends on) a few helpful libraries, such as <a href="http://mootools.net/">MooTools</a>, <a href="http://www.diveintojavascript.com/projects/javascript-sprintf">sprintf</a>, and BVTouchable.</p>
 
@@ -61,7 +61,7 @@ <h2>How You Can Help</h2>
 
 <ul style="margin-left:20px; list-style-type:disc;">
 <li>Let us know if the API makes it difficult to do something you want to do.</li>
-<li>Contribute UI components (Tangle classes) for possible inclusion with TangleKit.</li>
+<li>Contribute Tangle classes and formats for possible inclusion with TangleKit.</li>
 <li>Contribute documents you've made for possible inclusion in the examples.</li>
 <li>Report bugs.</li>
 <li>Tell your friends!</li>
@@ -79,7 +79,11 @@ <h2>How You Can Help</h2>
 <div id="footer">
 <div id="footerShadow"></div>
 
-<p>Next: See more examples.</p>
+<div class="menu">
+    <a class="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuDownload" href="download.html">Download</a>
+</div>
 
 </div> <!-- footer -->
 

diff --git a/guide.html b/guide.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <base target="_top">
+
+    <title>Tangle: Getting Started</title>
+	<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="Fonts/BorisBlackBloxx/stylesheet.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+
+</head>
+
+<body>
+<div id="everything">
+
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- header -->
+
+<div id="header">
+
+<h1><a href="./">tangle</a></h1>
+<h3>explorable explanations made easy</h3>
+
+<div class="menu">
+    <a class="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuDownload" href="download.html">Download</a>
+</div>
+
+</div> <!-- header -->
+
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- body -->
+
+<div id="body" class="small">
+
+
+<h2>Getting Started</h2>
+
+
+
+</div> <!-- body -->
+
+
+<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<!-- footer -->
+
+<div id="footer">
+<div id="footerShadow"></div>
+
+<div class="menu">
+    <a class="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuDownload" href="download.html">Download</a>
+</div>
+
+</div> <!-- footer -->
+
+
+</div> <!-- everything -->
+</body></html>
diff --git a/index.html b/index.html
@@ -38,10 +38,10 @@
 <h1><a href="./">tangle</a></h1>
 <h3>explorable explanations made easy</h3>
 
-<div id="menu">
-    <a id="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
-    <a id="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
-    <a id="menuDownload" href="download.html">Download</a>
+<div class="menu">
+    <a class="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuDownload" href="download.html">Download</a>
 </div>
 
 </div> <!-- header -->
@@ -167,7 +167,11 @@ <h6>Analysis:</h6>
 <div id="footer">
 <div id="footerShadow"></div>
 
-<p>Next: See more examples.</p>
+<div class="menu">
+    <a class="menuGuide" href="guide.html">Getting Started</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuReference" href="reference.html">API Reference</a> &nbsp; &nbsp; &nbsp;
+    <a class="menuDownload" href="download.html">Download</a>
+</div>
 
 </div> <!-- footer -->