-
Notifications
You must be signed in to change notification settings - Fork 0
/
hello_tangle.html
132 lines (121 loc) · 4.83 KB
/
hello_tangle.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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>hello_tangle.nim</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🐳</text></svg>">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel='stylesheet' href='https://unpkg.com/normalize.css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/pietroppeter/nimib/assets/atom-one-light.css'>
<style>
.nb-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.nb-small {
font-size: 0.8rem;
}
button.nb-small {
float: right;
padding: 2px;
padding-right: 5px;
padding-left: 5px;
}
section#source {
display:none
}
.nb-output {
line-height: 1.15;
}
</style>
</head>
<script type="text/javascript" src="Tangle.js"></script>
<!-- TangleKit (not really optional) -->
<link rel="stylesheet" href="TangleKit/TangleKit.css" type="text/css">
<script type="text/javascript" src="TangleKit/mootools.js"></script>
<script type="text/javascript" src="TangleKit/sprintf.js"></script>
<script type="text/javascript" src="TangleKit/BVTouchable.js"></script>
<script type="text/javascript" src="TangleKit/TangleKit.js"></script>
<body>
<header>
<div class="nb-box">
<span><a href=".">🏡</a></span>
<span><code>hello_tangle.nim</code></span>
<span><a href="https://github.com/nimib-land/groviglio"><svg aria-hidden="true" width="1.2em" height="1.2em" style="vertical-align: middle;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59c.4.07.55-.17.55-.38c0-.19-.01-.82-.01-1.49c-2.01.37-2.53-.49-2.69-.94c-.09-.23-.48-.94-.82-1.13c-.28-.15-.68-.52-.01-.53c.63-.01 1.08.58 1.23.82c.72 1.21 1.87.87 2.33.66c.07-.52.28-.87.51-1.07c-1.78-.2-3.64-.89-3.64-3.95c0-.87.31-1.59.82-2.15c-.08-.2-.36-1.02.08-2.12c0 0 .67-.21 2.2.82c.64-.18 1.32-.27 2-.27c.68 0 1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82c.44 1.1.16 1.92.08 2.12c.51.56.82 1.27.82 2.15c0 3.07-1.87 3.75-3.65 3.95c.29.25.54.73.54 1.48c0 1.07-.01 1.93-.01 2.2c0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" fill="#000"></path></svg></a></span>
</div>
<hr>
</header><main>
<p>This is an example reactive document using <a href="https://github.com/worrydream/Tangle">tangle.js</a> in nimib.</p>
<script type="text/javascript">
function setUpTangle () {
var element = document.getElementById("example");
var tangle = new Tangle(element, {
initialize: function () {
this.cookies = 4;
this.caloriesPerCookie = 50;
},
update: function () {
this.calories = this.cookies * this.caloriesPerCookie;
}
});
}
window.onload = setUpTangle;
</script>
<p id="example">
When you eat <span data-var="cookies" class="TKAdjustableNumber" data-min="2" data-max="100"> cookies</span>, you
will consume <span data-var="calories"></span> calories.
</p>
</main>
<footer>
<hr>
<div class="nb-box">
<span><span class="nb-small">made with <a href="https://pietroppeter.github.io/nimib/">nimib 🐳</a></span></span>
<span></span>
<span><button class="nb-small" id="show" onclick="toggleSourceDisplay()">Show Source</button></span>
</div>
</footer>
<section id="source">
<pre><code class="nim hljs"><span class="hljs-keyword">import</span> nimib
<span class="hljs-keyword">import</span> tangle
nbInit
nb.useTangle
nbText: <span class="hljs-string">"This is an example reactive document using [tangle.js](https://github.com/worrydream/Tangle) in nimib."</span>
nbRawHtml: <span class="hljs-string">"""
<script type="text/javascript">
function setUpTangle () {
var element = document.getElementById("example");
var tangle = new Tangle(element, {
initialize: function () {
this.cookies = 4;
this.caloriesPerCookie = 50;
},
update: function () {
this.calories = this.cookies * this.caloriesPerCookie;
}
});
}
window.onload = setUpTangle;
</script>
<p id="example">
When you eat <span data-var="cookies" class="TKAdjustableNumber" data-min="2" data-max="100"> cookies</span>, you
will consume <span data-var="calories"></span> calories.
</p>
"""</span>
nbSave
</code></pre>
</section><script>
function toggleSourceDisplay() {
var btn = document.getElementById("show")
var source = document.getElementById("source");
if (btn.innerHTML=="Show Source") {
btn.innerHTML = "Hide Source";
source.style.display = "block";
} else {
btn.innerHTML = "Show Source";
source.style.display = "none";
}
}
</script></body>
</html>