-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
95 lines (87 loc) · 4.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
</head>
<body>
<article>
<h1>@curvenote/components</h1>
<p>
The goal of <code>@curvenote/components</code> is to provide web-components for interactive scientific writing, reactive documents and <a href="//explorabl.es/">explorable explanations</a>.
Included in <code>@curvenote/components</code> are ways to create, update and display variables as text, inputs, sliders and switches.
</p>
<h2>Tangled Cookies</h2>
<r-scope name="untangle">
<r-var name="simple" value="false" type="Boolean"></r-var>
<p>
<code>@curvenote/components</code> are heavily inspired by <a href="http://worrydream.com/Tangle/guide.html">tangle.js</a>, updated to be use web-components!
This means you can declaratively write your variables and how to display them in <code>html</code> markup.
To get an idea of what that looks like, let's take the canonical example of <emph>Tangled Cookies</emph> - a simple reactive document to encourage you to not eat more than <r-action :click="{'demo1.cookies':42, 'demo2.cookies':42, simple:false}">42 cookies</r-action> in one day.
</p>
<r-switch bind="simple" label="Simple Example"></r-switch>
<r-checkbox bind="simple" label="Simple Example"></r-checkbox>
<r-button :click="{simple: !simple}" :label="`${(simple ? 'Show' : 'Hide')} Advanced Example`" style="float: right; margin-right: 5px;"></r-button>
<r-visible :visible="simple">
<r-scope name="demo1">
<r-demo>
<r-var name="cookies" value="3" format=".4"></r-var>
<p>
When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>,
you consume <r-display :value="cookies * 50" format=".0f"/></r-display> calories.
</p>
</r-demo>
</r-scope>
</r-visible>
<r-visible :visible="!simple">
<r-scope name="demo2">
<r-demo>
<r-var name="cookies" value="3" format=".4"></r-var>
<r-var name="caloriesPerCookie" value="50"></r-var>
<r-var name="dailyCalories" value="2100"></r-var>
<r-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></r-var>
<r-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></r-var>
<p>
When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>,
you consume <r-display bind="calories"></r-display> calories.<br>
That's <r-display bind="dailyPercent"></r-display> of your recommended daily calories.
</p>
<r-range bind="cookies" min="2" max="100"></r-range>
<script type="text/javascript">
function logToConsole(value, calories) {
console.log("Working! value=", value, "calories=", calories);
return {cookies: value}
}
</script>
<r-range :value="cookies" :change="logToConsole(value, calories)" min="2" max="100"></r-range>
</r-demo>
</r-scope>
</r-visible>
</r-scope>
<r-var name="place" value="somewhere" type="String"></r-var>
<r-radio bind="place" labels="home,work,play"></r-radio>
<r-select bind="place" labels="home,work,play"></r-select>
<r-input bind="place"></r-input>
<r-scope name="snells">
<r-var name="theta1" value="0.7853981633974483"></r-var>
<r-var name="v1" value="400"></r-var>
<r-var name="v2" value="500"></r-var>
<r-var name="theta2" :value="Math.asin(v2 * Math.sin(theta1) / v1)"></r-var>
<r-var name="thetac" :value="Math.asin(v1 / v2)"></r-var>
<br>
$\theta_1$: <r-dynamic :value="theta1 * 180 / Math.PI" :change="{theta1: value * Math.PI / 180}" min="0" max="90" after="º"></r-dynamic><br>
$\theta_2$: <r-visible :visible="!isFinite(theta2)">No Refraction Wave</r-visible>
<r-visible :visible="isFinite(theta2)">
<r-display :value="theta2*180/Math.PI"></r-display>º
</r-visible><br>
$v_1$: <r-range bind="v1" min="100" :max="v2" step="10" width="100px"></r-range>
<r-display bind="v1"></r-display> m/s<br>
$v_2$: <r-range bind="v2" :min="v1" max="2000" step="10" width="100px"></r-range>
<r-display bind="v2"></r-display> m/s<br>
</r-scope>
<p>Test a range with step less than 1</p>
<r-range min="0" max="1" step="0.01" width="100px"></r-range>
</article>
</body>
</html>