-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo-jsfunctions.html
126 lines (123 loc) · 5.68 KB
/
demo-jsfunctions.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="document-eden/document-eden.css" />
<script src="js-eden/js/lib/jquery-3.5.1.min.js"></script>
<script src="js-eden/js/core/jseden.min.js"></script>
<script src="js-eden/plugins/jseden-plugins.min.js"></script>
<script src="js-eden/js/ui/jseden-ui.min.js"></script>
<script src="document-eden/document-eden.min.js"></script>
<script>
URLUtil.prefix = "js-eden/";
window.allReadyResolve;
window.allReady = new Promise((resolve)=>{ window.allReadyResolve = resolve});
setTimeout(()=>{
window.edenProjectLoaded.then(window.allReadyResolve);
},100);
window.DE = window.DocumentEden;
</script>
<!-- User defined jsFunctions -->
<script>
let jsFunctions = {};
jsFunctions.square = (n)=>{
return n * n;
};
jsFunctions.cube = (n)=>{
return n * n * n;
}
jsFunctions.multiply = ([a,b])=>{
return a * b;
}
jsFunctions["waitasecond"] = (n)=>{
let myPromise = new Promise((resolve,reject)=>{
setTimeout(()=>{
let result = n * n;
resolve(result);
},500*n);
});
return myPromise;
}
//Or define the function as async
jsFunctions["getReadme"] = async (filename)=>{
const response = await fetch(filename);
const text = await response.text();
return text;
}
</script>
<script type="text/jseden">
jsCall is ${{DocumentEden.callJSFunction(this,context,scope)}}$::jsName = jsName, params = params;
n = 5;
n2 is jsCall with jsName = "square", params = [n];
n3 is jsCall with jsName = "cube", params = [n];
nm is jsCall with jsName = "multiply", params = [n,m];
second is jsCall with jsName = "waitasecond", params = [n];
doubleSecond is second * 2;
text is jsCall with jsName = "getReadme", params = [fileName];
secondExplanation is "Loading..." if second == @ else "Ready";
seconds is second with n is 1..5;
n_multi is n3 with n is 1..4;
</script>
<style>
.jseden-extract{
font-family: 'Courier New', Courier, monospace;
color:darkblue;
font-size: small;
font-weight: bold;
}
.js-extract{
font-family: 'Courier New', Courier, monospace;
color: darkgreen;
font-size: small;
font-weight: bold;
}
</style>
</head>
<body>
<p>This page demonstrates how to call JavaScript functions from JSEden code.</p>
<p>The functions used on this page illustrate how to pass parameters and retrieve return values from basic JavaScript functions - there is no need for these particular functions (as the maths functions already exist in JSEden — e.g. <span class="jseden-extract">b is pow(a,2)</span>).</p>
<hr>
<p>The source of this page shows how the functions are called.</p>
<p>In the JSEden <span class="js-extract">script type="text/jseden"</span> tag:</p>
<ul>
<li>The <span class="jseden-extract">jsCall</span> definition allows for arbitrary functions to be called from the <span class="js-extract">jsFunctions</span> object</li>
<li>It passes the context/scope to the <span class="js-extract">callJSFunction</span> function, which retrieves the <span class="jseden-extract">jsName</span> (function name) from the context/scope and calls the appropriate function from the <span class="js-extract">jsFunctions</span> object, using the parameters from the supplied <span class="jseden-extract">params</span> observable</li>
</ul>
<p>In the JavaScript <span class="js-extract">script</span> tag:</p>
<ul>
<li>A <span class="js-extract">jsFunctions</span> object stores functions that can be called from JSEden</li>
<li>Each function unpacks the <span class="jseden-extract">params</span> object into separate parameters to the JavaScript function</li>
</ul>
<p>Each JSEden definition passes an observable called <span class="jseden-extract">params</span> that define parameters that are required by that function. These ensure the params passed to the JavaScript function via the <span class="jseden-extract">jsCall</span> definition have the current scope, e.g.:</p>
<ul>
<li><span class="jseden-extract">n2 is jsCall with jsName = "square", params = [n];</span></li>
<li><span class="jseden-extract">nm is jsCall with jsName = "multiply", params = [n,m];</span></li>
</ul>
<p>Whenever any of the observables within the <span class="jseden-extract">params</span> list are modified, the JavaScript function will be re-evaluated.</p>
<p>Support for 'promises' is currently broken, but will be updated soon</p>
<!-- <p>Functions can return promises (or simply defined as async) - the value of the definition will be set when the promise resolves.</p> -->
<hr>
<p>n: £n=5£</p>
<p>n<sup>2</sup>: £n2£</p>
<!-- <p>n<sup>3</sup>: £n3£</p> -->
<p>m: £m=6£</p>
<p>m<sup>2</sup>: £n2 with n is m£</p>
<!-- <p>m<sup>3</sup>: £n3 with n is m£</p> -->
<p>n × m: £nm£</p>
<p>£secondExplanation£</p>
<p>£second£</p>
<p>£doubleSecond£</p>
<hr>
<p>The below text is populated from £fileName=README.md|LICENSE£</p>
<pre>£text£</pre>
<hr>
<p>This text is extended with a <span class="jseden-extract">with</span> to load from gruntfile.js</p>
<pre>£text with fileName="gruntfile.js"£</pre>
<hr>
<p>This doesn't work yet (but note how it counts up twice - possibly just an update problem?)</p>
<p>£seconds£</p>
<p>£n_multi£</p>
</body>
</html>