Skip to content

Commit 27adb81

Browse files
andersevenrudandersevenrud
committed
Simplified example
1 parent b426690 commit 27adb81

File tree

2 files changed

+8
-126
lines changed

2 files changed

+8
-126
lines changed

‎data/index.html

-58
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<!-- Only resources and scaling definitions will be relevant here -->
5-
</head>
63
<body>
7-
<!-- Initial content -->
84
<h1>Hello World</h1>
9-
10-
<!-- Our dynamic output -->
11-
<div id="output"></div>
12-
13-
<!-- Add scripts lastly -->
14-
<script>
15-
(function() {
16-
// Cache our process id from initial handshake
17-
var processId;
18-
19-
/**
20-
* OS.js expects you to send a message with the format:
21-
* {pid, args}
22-
*/
23-
function postMessage() {
24-
top.postMessage({
25-
pid: processId,
26-
args: Array.prototype.slice.call(arguments)
27-
}, '*');
28-
}
29-
30-
/**
31-
* Handle messages
32-
*/
33-
window.addEventListener('message', function(ev) {
34-
var message = ev.data || {};
35-
var output = document.getElementById('output');
36-
37-
switch (message.method) {
38-
// When we get handshake from the OS.js process,
39-
// answer with something
40-
case 'init':
41-
processId = message.args[0];
42-
43-
output.appendChild(document.createTextNode('OS.js said hello!'));
44-
console.warn('[Iframe] OS.js sent init method from application', message.args, processId);
45-
postMessage({method: 'yo', args: [1, 2, 3]});
46-
break;
47-
48-
// After communication is establised, the OS.js process
49-
// will emit this event.
50-
case 'yo':
51-
var text = message.args[0];
52-
output.appendChild(document.createTextNode(text));
53-
break;
54-
55-
// Anything else will just be logged to console
56-
default:
57-
console.warn('[Iframe] OS.js sent', message);
58-
break;
59-
}
60-
});
61-
})();
62-
</script>
635
</body>
646
</html>

‎index.js

+8-68
Original file line numberDiff line numberDiff line change
@@ -30,68 +30,6 @@
3030
import osjs from 'osjs';
3131
import {name as applicationName} from './metadata.json';
3232

33-
const createSimpleIframe = (core, proc) => ($content, win) => {
34-
const iframe = document.createElement('iframe');
35-
iframe.style.width = '100%';
36-
iframe.style.height = '100%';
37-
iframe.setAttribute('border', '0');
38-
39-
const src = proc.resource('/data/index.html');
40-
iframe.src = src;
41-
42-
$content.appendChild(iframe);
43-
};
44-
45-
const createIframe = (core, proc) => ($content, win) => {
46-
47-
// Create a new bus for our messaging
48-
const bus = core.make('osjs/event-handler', 'MyIframeApplicationWindow');
49-
50-
// Get path to iframe content
51-
const src = proc.resource('/data/index.html');
52-
53-
// Create DOM element
54-
const iframe = document.createElement('iframe');
55-
iframe.style.width = '100%';
56-
iframe.style.height = '100%';
57-
iframe.setAttribute('border', '0');
58-
59-
iframe.addEventListener('load', () => {
60-
const ref = iframe.contentWindow;
61-
62-
// This will proxy the window focus events to iframe
63-
win.on('focus', () => ref.focus());
64-
win.on('blur', () => ref.blur());
65-
66-
// Create message sending wrapper
67-
const sendMessage = msg => ref.postMessage(msg, window.location.href);
68-
69-
// After connection is established, this handler will process
70-
// all events coming from iframe.
71-
proc.on('message', data => {
72-
console.warn('[Application', 'Iframe sent', data);
73-
bus.emit(data.method, sendMessage, ...data.args);
74-
});
75-
76-
bus.on('yo', (send, args) => sendMessage({
77-
method: 'yo',
78-
args: ['MyIframeApplication says hello']
79-
}));
80-
81-
// Send the process ID to our iframe to establish communication
82-
sendMessage({
83-
method: 'init',
84-
args: [proc.pid]
85-
});
86-
});
87-
88-
// Finally set the source and attach
89-
iframe.src = src;
90-
91-
// Attach
92-
$content.appendChild(iframe);
93-
};
94-
9533
// Creates the internal callback function when OS.js launches an application
9634
// Note the first argument is the 'name' taken from your metadata.json file
9735
const register = (core, args, options, metadata) => {
@@ -111,12 +49,14 @@ const register = (core, args, options, metadata) => {
11149
position: {left: 700, top: 200}
11250
})
11351
.on('destroy', () => proc.destroy())
114-
115-
// Create an iframe with messaging etc
116-
.render(createIframe(core, proc));
117-
118-
// Or just a simple standard iframe
119-
// .render(createIframe(core, proc));
52+
.render($content => {
53+
const iframe = document.createElement('iframe');
54+
iframe.style.width = '100%';
55+
iframe.style.height = '100%';
56+
iframe.src = proc.resource('/data/index.html');
57+
iframe.setAttribute('border', '0');
58+
$content.appendChild(iframe);
59+
});
12060

12161
return proc;
12262
};

0 commit comments

Comments
 (0)