flyd
Version:
The less is more, modular, functional reactive programming library
208 lines (207 loc) • 5.16 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sum – a Flyd demo</title>
<link href='http://fonts.googleapis.com/css?family=Inconsolata|Josefin+Sans:400,300' rel='stylesheet' type='text/css'>
<style>
* {
font-family: 'Josefin Sans', sans-serif;
}
body {
text-align: center;
font-size: 1.0em;
}
.column {
text-align: left;
}
@media (min-width: 400px) {
.column {
display: inline-block;
width: 21em;
vertical-align: top;
max-width: 100%;
}
}
@media (min-width: 450px) {
.center-column {
width: 5em;
}
}
@media (min-width: 800px) {
.right-column {
text-align: left;
margin-left: .4em;
}
.center-column {
text-align: center;
}
.left-column {
text-align: right;
margin-right: .4em;
}
}
@media (min-width: 900px) {
body { font-size: 1.1em; }
}
@media (min-width: 950px) {
body { font-size: 1.2em; }
}
@media (min-width: 1050px) {
body { font-size: 1.3em; }
}
@media (min-width: 1200px) {
body { font-size: 1.4em; }
}
a, code {
transition: .1s ease all;
}
h1 {
font-weight: 300;
font-size: 3.6em;
}
.title-container {
}
h1, h2, p {
margin: 15px 0;
}
.title-container h1 {
margin-top: 28px;
}
code {
font-family: 'Inconsolata';
background: #ececec;
padding: 0 .1em;
}
.code-block {
white-space: pre;
padding: .5em;
display: block;
font-size: .9em;
}
#sumBox {
font-weight: bold;
}
.a-exe a {
cursor: pointer;
font-family: 'Inconsolata';
color: #6851ff;
background: #ececec;
padding: 0 .1em;
}
.a-exe {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.a-exe a:active {
color: yellow;
background: black;
}
</style>
<script type="text/javascript" src="../../flyd.js"></script>
<script type="text/javascript">
var stream = flyd.stream;
var x, y; // Let x and y be globals
document.addEventListener('DOMContentLoaded', function() {
var sumBox = document.getElementById('sumBox');
var xBox = document.getElementById('xBox');
var yBox = document.getElementById('yBox');
x = stream(10);
y = stream(20);
var sum = flyd.combine(function(x, y) {
return x() + y();
}, [x, y]);
flyd.map(function(sum) {
sumBox.innerHTML = sum;
}, sum);
flyd.map(function(x) {
if (typeof x !== 'number') { // Use called x or y with invalid value
console.log('Numbers only, please!');
}
xBox.innerHTML = x;
}, x);
flyd.map(function(y) {
if (typeof y !== 'number') { // Use called x or y with invalid value
console.log('Numbers only, please!');
}
yBox.innerHTML = y;
}, y);
// Do animations
function animate(s, elm) {
flyd.map(function() {
elm.style.background = 'black';
elm.style.color = 'yellow';
setTimeout(function() {
elm.style.background = '#ececec';
elm.style.color = 'black';
}, 220);
}, s);
}
animate(x, xBox);
animate(y, yBox);
animate(sum, sumBox);
});
</script>
</head>
<body>
<div class="title-container">
<h1>Sum</h1>
</div>
<div class="column left-column a-exe">
<h2>Execute</h2>
<p>
Also try calling <code>x</code> and <code>y</code> in your browser console.
</p>
<p>
<a onclick="x(1)">x(1)</a>
<a onclick="x(2)">x(2)</a>
<a onclick="x(3)">x(3)</a>
<a onclick="x(5)">x(5)</a>
<a onclick="x(8)">x(8)</a>
<a onclick="x(13)">x(13)</a>
</p>
<p>
<a onclick="y(1)">y(1)</a>
<a onclick="y(2)">y(2)</a>
<a onclick="y(3)">y(3)</a>
<a onclick="y(5)">y(5)</a>
<a onclick="y(8)">y(8)</a>
<a onclick="y(13)">y(13)</a>
</p>
<p>
<a onclick="x(x()+1)">x(x() + 1)</a>
<a onclick="x(x()-1)">x(x() - 1)</a>
</p>
<p>
<a onclick="y(y()+1)">y(y() + 1)</a>
<a onclick="y(y()-1)">y(y() - 1)</a>
</p>
</div>
<div class="column center-column">
<h2>Result</h2>
<p>
<code>x</code> is <code id="xBox">...</code>
</p>
<p>
<code>y</code> is <code id="yBox">...</code>
</p>
<p>
<code>sum</code> is <code id="sumBox">...</code>
</p>
</div>
<div class="column right-column">
<h2>Source code</h2>
<code class="code-block">var x = stream(10);
var y = stream(20);
var sum = flyd.combine(function(x, y) {
return x() + y();
}, [x, y]);
var elm = document.getElementById('sumBox');
flyd.map(function(s) {
elm.innerHTML = s;
}, sum);</code>
</div>
</body>
</html>