Skip to content

Commit 3a10dbe

Browse files
divyaashrithadivyaashritha
authored
Add custom methods (#47)
1 parent 8bc080f commit 3a10dbe

File tree

10 files changed

+1800
-1556
lines changed

10 files changed

+1800
-1556
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ Next Release
22
-------------
33
1.9.0
44
------
5+
* Add custom methods #47
56
* Add generic options object to App init. #46
67

78
1.8.1

‎README.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,21 @@ XFC.Provider.init({
227227
})
228228
```
229229

230+
If the app and framework wants to register new custom methods with JSONRPC, it may pass in an customMethods object and Provider
231+
can call custom events on the frame using invoke method.
232+
233+
```js
234+
XFC.Consumer.mount(
235+
document.body,
236+
'http://localprovider.com:8080/example/provider.html',
237+
{ customMethods: { add(x, y) { return Promise.resolve(x + y); } } }
238+
);
239+
```
240+
241+
```js
242+
XFC.Provider.invoke('add', [1, 2]);
243+
```
244+
230245
### Launching Fullscreen
231246
An application may request to launch a pagelet fullscreen within the consumer application.
232247

‎example/initialization/1_e_index.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<title>Embedded Content Consuming Site</title>
5+
<meta charset="utf-8" />
6+
<script src="http://localhost:8080/xfc.js"></script>
7+
<style>
8+
iframe {
9+
width: 100%;
10+
border: none;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
html[hidden] { display: none; }
15+
.xfc[data-status='mounted'] {
16+
border: 5px dashed #000;
17+
}
18+
.xfc[data-status='launched'] {
19+
border: 5px dashed #00F;
20+
}
21+
.xfc[data-status='authorized'] {
22+
border: 5px dashed #0F0;
23+
}
24+
.grid {
25+
display: flex;
26+
flex-flow: row wrap;
27+
}
28+
.grid div {
29+
padding: 20px;
30+
}
31+
#c1 {
32+
border: 5px dashed #000;
33+
}
34+
#c2 {
35+
border: 5px dashed #00F;
36+
}
37+
#c3 {
38+
border: 5px dashed #0F0;
39+
}
40+
</style>
41+
</head>
42+
<body>
43+
<div>
44+
<h2>The following are XFC's statuses (mounted, launched, authorized).</h2>
45+
</div>
46+
<div class="grid">
47+
<div id="c1">
48+
<h2>mounted app</h2>
49+
</div>
50+
<p></p>
51+
<div id="c2">
52+
<h2>launched app</h2>
53+
</div>
54+
<p></p>
55+
<div id="c3">
56+
<h2>authorized app</h2>
57+
</div>
58+
</div>
59+
<p>This example shows that customMethods are called</p>
60+
<script>
61+
XFC.Consumer.init()
62+
frame = XFC.Consumer.mount(document.body, 'http://localprovider.com:8080/example/initialization/1_e_provider.html');
63+
setTimeout(function(){ frame.invoke('add', [1, 2]).then(result => { console.log('result',result)}); }, 3000);
64+
65+
</script>
66+
</body>
67+
</html>

‎example/initialization/1_e_provider.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<title>HealtheLife Trusted Site</title>
5+
<meta charset="utf-8" />
6+
<style>
7+
body {
8+
padding-bottom: 5px;
9+
}
10+
html[hidden] { display: none; }
11+
</style>
12+
<script src="http://localhost:8080/xfc.js"></script>
13+
</head>
14+
<body>
15+
<div>
16+
<h1>1. Initialization</h1>
17+
</div>
18+
<script type="text/javascript">
19+
const customMethods = {
20+
add(x,y) {
21+
return Promise.resolve(x + y);
22+
},
23+
}
24+
XFC.Provider.init(
25+
{
26+
acls: ['*'],
27+
customMethods,
28+
}
29+
)
30+
</script>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)