website/static/demos/jquery.js
@@ -703,42 +703,21 @@ intervalB : Behavior Int
<chapter title="DOM Manipulation">
-<article title="Creating DOM elements">
+<article title="Time-varying DOM Elements">
<programlisting>
-TAG :: { attribute-name: attribute-value, ...} * HTMLElement * ... -> HTMLElement
-TAG :: HTMLElement * ... -> HTMLElement // no attributes
+TAG :: Behavior { attribute-name: attribute-value, ...} * Behavior HTMLElement * ... -> Behavior HTMLElement
+TAG :: Behavior HTMLElement * ... -> Behavior HTMLElement // no attributes
</programlisting>
-<p>Flapjax defines functions for building DOM elements compositionally. For each HTML element, Flapjax defines a function
-with the same name, that constructs the corresponding element.</p>
-
-<example>
-<programlisting>
-var anchor = A({href: 'http://www.flapjax-lang.org/'},'Flapjax');
-
-var list = UL(LI('Reactive Programming'),
- LI('JavaScript Framework'),
- LI({style: { 'font-weight': 'bold' }}, 'No Download Required!'));
-</programlisting>
-</example>
-
-</article>
-
-<article title="Time-varying DOM elements">
-
-<programlisting>
-TAGB :: Behavior { attribute-name: attribute-value, ...} * Behavior HTMLElement * ... -> Behavior HTMLElement
-TAGB :: Behavior HTMLElement * ... -> Behavior HTMLElement // no attributes
-</programlisting>
-
-<p>Flapjax includes support for DOM elements with time-varying components. For each HTML Element, Flapjax defines a
-function with the same name, suffixed with "B", that constructions the corresponding element.</p>
+<p>Flapjax includes support for DOM elements with time-varying components. For
+each HTML Element, Flapjax defines a function with the same name that
+constructions the corresponding element.</p>
<example>
<programlisting>
var secondsB = timerE(1000).collectE(0,function(_,x) { return x + 1; }).startsWith(0);
-var spanB = SPANB("We've been running for ",secondsB," seconds");
+var spanB = SPAN("We've been running for ",secondsB," seconds");
</programlisting>
<p>Note that this example intersperses a behavior (<code>spanB</code>) with constant values.</p>
doc/doc.html
@@ -1283,7 +1283,7 @@ var mapWithKeys = function(obj, f) {
var insertAfter = function(parent, newChild, refChild) {
- if (refChild.nextSibling) {
+ if (typeof refChild != "undefined" && refChild.nextSibling) {
parent.insertBefore(newChild, refChild.nextSibling);
}
else {
@@ -1607,7 +1607,6 @@ extractValueStaticB = function (domObj, triggerE) {
var result;
switch (objD.type) {
-
//TODO: checkbox.value instead of status?
case 'checkbox':
result = startsWith(
@@ -1728,6 +1727,7 @@ extractValueStaticB = function (domObj, triggerE) {
filterRepeatsE(
actualTriggerE.mapE(getter),getter()),
getter());
+ break;
default:
throw ('extractValueStaticB: unknown value type "' + objD.type + '"');
}
fx/flapjax-impl.js
@@ -1,9 +1,3 @@
-// Behavior contract is either a higher-order behavior or a flat (constant)
-// value
-// remove condE it is stupid
-// DOM contract list
-// dictionary contract (on $O)
-
{
function isHtml(x) {
fx/flapjax.jsi
@@ -86,7 +86,7 @@ contact mjames@gmail.com
#stop.disable, #play.disable { display:none; }
</style>
- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
+ <script type="text/javascript" src="/demos/jquery.js"></script>
<script type="text/javascript" src="/fx/flapjax.js"></script>
<script type="text/javascript">
website/static/demos/carousel.html
@@ -31,8 +31,7 @@ function collapsedItemsB(linksE,maxLength) {
.startsWith([ ])
.liftB(function (items) {
return items.length == 0 ? 'Type to start' : UL(items);
- })
- .switchB();
+ });
};
function loader() {
website/static/demos/delicious3.html
@@ -33,8 +33,7 @@ function collapsedItemsB(linksE,maxLength) {
.startsWith([ ])
.liftB(function (items) {
return items.length == 0 ? 'Type to start' : UL(items);
- })
- .switchB();
+ });
};
var historyE = function(nextE) {
@@ -57,8 +56,7 @@ var historyE = function(nextE) {
return map(function(item) { return item.anchor; },items);
})
.startsWith('No requests yet.')
- .liftB(function (anchors) { return DIV(anchors); })
- .switchB();
+ .liftB(function (anchors) { return DIV(anchors); });
var oldE = linksE.mapE(function(items) {
return mergeE.apply(this,
website/static/demos/delicious4.html
@@ -125,12 +125,12 @@ function loader() {
var extra = 10;
var backgroundBarB =
insertValueB(
- 'menu',
startsWith(
mergeE(
menuMouseLeaveE.constantE( (minSize + extra) + 'px'),
menuMouseOverE.constantE( (maxSize + extra) + 'px')),
(minSize + extra) + 'px'),
+ 'menu',
'style', 'height');
}
@@ -145,6 +145,6 @@ function loader() {
<div class="menuBox">Last item has a lot of text and it overflows nicely</div>
</div>
-<span id="msgs"/>
+<span id="msgs"></span>
</body>
</html>
website/static/demos/fisheye.html
@@ -36,7 +36,7 @@ function load(ignored_arg) {
// autoSave :: String * EventStream save
// -> { input: TEXTAREA, savedE: EventStream }
function autoSave(initial,saveE) {
- var input = TEXTAREA_(initial);
+ var input = TEXTAREA(initial);
var savedE =
getWebServiceObjectE(saveE.snapshotE($B(input)).mapE(save));
@@ -91,7 +91,7 @@ Last Saved: <span id='savedTime'></span>
<form>
<span id="inputPlaceholder"></span><br/>
-<input type='button' id='saveButton' value='Save Now'></input>
+<input type='button' id='saveButton' value='Save Now'/>
</form>
<p>The currently saved draft is:</p>
website/static/demos/persistent_drafts.html
@@ -1,7 +1,7 @@
<html>
<head>
-<title>Flapjax: Ping</title>
+<title>Flapjax: Flying Boxes</title>
<script type="text/javascript" src="/fx/flapjax.js"></script>
<script type="text/javascript">
@@ -87,7 +87,7 @@ function start() {
<body onload="javascript:start()">
<marquee direction="down">
-<font face="cursive" size="50">TODO: Boxes are not balls</font>
+<font face="cursive" size="50">direction=down</font>
</marquee>
website/static/demos/ping.html
@@ -120,15 +120,21 @@ function renderBehavior(b) {
return tuple(Math.floor((next.fst - prev.fst) / 10), next.snd) }));
- var asSpans = withWidths.mapE(theRealMap(function(p) {
- return SPAN(SPAN({ style: { width: p.fst,
- border: "1px solid black",
- margin: "0px",
- padding: "5px",
- float: "left",
- overflow: "hidden",
- backgroundColor: "pink" } },
- p.snd)) }));
+ var asSpans = withWidths.mapE(function(lst) {
+ var left = 0;
+ return theRealMap(function(p) {
+ var myLeft = left;
+ left = left + p.fst;
+ return SPAN(SPAN({ style: { width: p.fst,
+ border: "1px solid black",
+ left: myLeft,
+ margin: "0px",
+ padding: "5px",
+ position: "absolute",
+ overflow: "hidden",
+ backgroundColor: "pink" } },
+ p.snd))})
+ (lst)});
return asSpans.startsWith(empty).liftB(function(lst) {
return DIV.apply(this, listToArray(lst)) }) }
@@ -196,7 +202,7 @@ function compile(srcE) {
return srcE.mapE(function(src) {
if (src.doNotCompile) {
return oneE(src.txt) }
- else { console.log(src.txt);
+ else {
return getWebServiceObjectE(oneE({
url : "/fxserver/compile_expr",
request: "rawPost",
@@ -206,11 +212,15 @@ function compile(srcE) {
function interact(compileB) {
- var input = DIV({ style: { minWidth: "90%",
+ var input = DIV({ contentEditable: true });
+ var inputWrapper = DIV({ style: { minWidth: "90%", position: "absolute",
+ display: "inline" }},
+ input);
+ /* var input = DIV({ style: { minWidth: "90%",
position: "absolute",
display: "inline" },
contentEditable: true}, "");
-
+ */
var srcE = $E(input, "keypress").filterE(isAltEnterPressed)
.snapshotE(compileB).mapE(function(doNotCompile) {
@@ -238,7 +248,7 @@ function interact(compileB) {
DIV({ style: { fontSize: valE.constantE("14pt").startsWith("24pt"),
position: "relative",
width: "100%", } },
- "> ", input),
+ "> ", inputWrapper),
outputE.startsWith(constantB("")).switchB(),
nextE.startsWith(""));
website/static/demos/repl.js
@@ -65,7 +65,7 @@ startSec = Math.floor(start / 1000)
now = timerB(1000)
nowSec = Math.floor(now / 1000)
clickE = $E("reset", "click")
-clickSecE = clicks.snapshotE(nowSec)
+clickSecE = clickE.snapshotE(nowSec)
diff = nowSec - clickSecE.startsWith(startSec)
-- click Reset --
showTime(diff * 25)
website/static/demos/timer.html
@@ -98,7 +98,7 @@ function loader() {
insertValueB(notB(readyForSubmitB), 'submitter', 'disabled');
insertDomB(
- DIVB(
+ DIV(
{id: 'follower',
style:
{color: '#FFFFFF',
website/static/demos/validator.html
fx/prototype.js
5c954033d58cfea81458e1e0e04cbbc78b51e0a9
Arjun Guha
arjun@cs.brown.edu
http://github.com/arjunguha/flapjax/commit/4400bf1c66412d887386465e60b9b86d227c1e01
4400bf1c66412d887386465e60b9b86d227c1e01
2009-10-31T13:59:47-07:00
2009-10-31T09:30:53-07:00
Bugfixes to Flapjax. Updates to demos for latest Flapjax. Added jQuery.
8f504bbb4fcf0d99caf598aadfe6d7ffacefbd9a
Arjun Guha
arjun@cs.brown.edu