Skip to content

Commit 614cf9e

Browse files
donquixotedonquixote
committed
Refactor javascript.
1 parent daef311 commit 614cf9e

File tree

6 files changed

+127
-109
lines changed

6 files changed

+127
-109
lines changed

‎collabora_online.module‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,6 @@ use Drupal\media\MediaInterface;
3434
*/
3535
function collabora_online_theme(): array {
3636
return [
37-
'collabora_online' => [
38-
'render element' => 'children',
39-
'template' => 'collabora-online',
40-
'variables' => [
41-
'accessToken' => 'test',
42-
'accessTokenTtl' => '86400',
43-
'iFrameStyle' => 'width:95%;',
44-
'closeButtonUrl' => '',
45-
'allowfullscreen' => '',
46-
'wopiSrc' => 'http://localhost:9980/',
47-
'wopiClient' => 'https://localhost:9980/',
48-
],
49-
],
5037
// This is the template for the field preview.
5138
'collabora_online_preview' => [
5239
'render element' => 'children',
@@ -59,15 +46,7 @@ function collabora_online_theme(): array {
5946
// This is the template for the complete page with embedding.
6047
'collabora_online_full' => [
6148
'template' => 'collabora-online-full',
62-
'variables' => [
63-
'accessToken' => 'test',
64-
'accessTokenTtl' => '86400',
65-
'iFrameStyle' => '',
66-
'closeButtonUrl' => '',
67-
'allowfullscreen' => '',
68-
'wopiSrc' => '/wopi/files/123',
69-
'wopiClient' => 'https://localhost:9980/',
70-
],
49+
'render element' => 'element',
7150
'file' => 'collabora_online.theme.inc',
7251
],
7352
];

‎collabora_online.theme.inc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ use Drupal\Core\Extension\ExtensionPathResolver;
1414
* Theme hook variables.
1515
*/
1616
function template_preprocess_collabora_online_full(array &$variables): void {
17+
$variables['content'] = $variables['element']['content'];
1718
/** @var \Drupal\Core\Extension\ExtensionPathResolver $path_resolver */
1819
$path_resolver = \Drupal::service(ExtensionPathResolver::class);
1920
$variables['module_path'] = $path_resolver->getPath('module', 'collabora_online');

‎js/cool.js‎

Lines changed: 88 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -9,72 +9,104 @@
99
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
1010
*/
1111

12-
function postMessage(msg) {
13-
document
14-
.getElementById('collabora-online-viewer')
15-
.contentWindow.postMessage(JSON.stringify(msg), '*');
16-
}
12+
(function (window) {
1713

18-
function postReady() {
19-
postMessage({ MessageId: 'Host_PostmessageReady' });
20-
postMessage({
21-
MessageId: 'Hide_Button',
22-
Values: {
23-
id: 'renamedocument'
14+
const iframeDefaultAttributes = {
15+
id: 'collabora-online-viewer',
16+
name: 'collabora-online-viewer',
17+
class: 'cool-frame__iframe',
18+
allow: 'clipboard-read *; clipboard-write *',
19+
};
20+
21+
function createElement(tag, attributes) {
22+
const element = document.createElement(tag);
23+
for (const k in attributes) {
24+
element.setAttribute(k, attributes[k]);
2425
}
25-
});
26-
}
26+
return element;
27+
}
2728

28-
function receiveMessage(close_button_url, event) {
29-
const msg = JSON.parse(event.data);
30-
if (!msg) {
31-
return;
29+
function buildAndSubmitForm(action, payload, target) {
30+
const form = createElement('form', {
31+
action,
32+
enctype: 'multipart/form-data',
33+
method: 'post',
34+
target,
35+
});
36+
for (const name in payload) {
37+
const input = createElement('input', {
38+
type: 'hidden',
39+
name,
40+
value: payload[name],
41+
});
42+
form.append(input);
43+
}
44+
document.body.append(form);
45+
form.submit();
46+
form.remove();
3247
}
3348

34-
switch (msg.MessageId) {
35-
case 'App_LoadingStatus':
36-
if (msg.Values && msg.Values.Status === 'Document_Loaded') {
37-
postReady();
38-
}
39-
break;
49+
function postToEditorFrame(iframe, id, values) {
50+
iframe.contentWindow.postMessage(JSON.stringify({
51+
MessageId: id,
52+
Values: values,
53+
}), '*');
54+
}
4055

41-
case 'UI_Close':
42-
if (close_button_url) {
43-
if (msg.Values && msg.Values.EverModified) {
44-
const reply = { MessageId: 'Action_Close' };
45-
postMessage(reply);
46-
}
47-
if (window.parent.location === window.location) {
48-
// eslint-disable-next-line no-restricted-globals
49-
document.location.href = close_button_url;
50-
} else {
51-
/* we send back the UI_Close message to the parent frame. */
52-
window.parent.postMessage(event.data);
56+
function receiveMessage(iframe, closeButtonUrl, event) {
57+
const msg = JSON.parse(event.data);
58+
if (!msg) {
59+
return;
60+
}
61+
const postToEditor = postToEditorFrame.bind(null, iframe);
62+
63+
switch (msg.MessageId) {
64+
case 'App_LoadingStatus':
65+
if (msg.Values && msg.Values.Status === 'Document_Loaded') {
66+
postToEditor('Host_PostmessageReady');
67+
postToEditor('Hide_Button', {id: 'renamedocument'});
5368
}
54-
}
55-
break;
56-
}
57-
}
69+
break;
5870

59-
function loadDocument(wopiClient, wopiSrc, options = {}) {
60-
let wopiUrl = `${wopiClient}WOPISrc=${wopiSrc}`;
61-
if (options.close_button_url) {
62-
wopiUrl += '&closebutton=true';
71+
case 'UI_Close':
72+
if (closeButtonUrl) {
73+
if (msg.Values && msg.Values.EverModified) {
74+
postToEditor('Action_Close');
75+
}
76+
if (window.parent.location === window.location) {
77+
// eslint-disable-next-line no-restricted-globals
78+
document.location.href = closeButtonUrl;
79+
}
80+
else {
81+
/* we send back the UI_Close message to the parent frame. */
82+
window.parent.postMessage(event.data);
83+
}
84+
}
85+
break;
86+
}
6387
}
6488

65-
window.addEventListener(
66-
'message',
67-
receiveMessage.bind(null, options.close_button_url),
68-
false,
69-
);
89+
document.addEventListener('DOMContentLoaded', function () {
90+
// Only one editor per page/frame is supported, because the iframe has an
91+
// id attribute that would clash otherwise.
92+
const placeholder_element = document.querySelector('[data-collabora-online-editor]');
93+
if (!placeholder_element) {
94+
return;
95+
}
96+
const json = placeholder_element.getAttribute('data-collabora-online-editor');
97+
const data = JSON.parse(json);
98+
const iframe = createElement('iframe', {
99+
...iframeDefaultAttributes,
100+
...data.iframe_attributes,
101+
});
102+
const div = createElement('div', {class: 'cool-frame'});
103+
div.appendChild(iframe);
104+
placeholder_element.after(div);
105+
placeholder_element.remove();
70106

71-
const formElem = document.getElementById('collabora-submit-form');
107+
window.addEventListener('message', receiveMessage.bind(null, iframe, data.close_button_url));
72108

73-
if (!formElem) {
74-
console.log('error: submit form not found');
75-
return;
76-
}
109+
buildAndSubmitForm(data.action, data.payload, iframe.id);
110+
});
77111

78-
formElem.action = wopiUrl;
79-
formElem.submit();
80-
}
112+
})(window);

‎src/Controller/ViewerController.php‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
use Drupal\collabora_online\Discovery\DiscoveryFetcherInterface;
1818
use Drupal\collabora_online\Exception\CollaboraNotAvailableException;
1919
use Drupal\collabora_online\Jwt\JwtTranscoderInterface;
20+
use Drupal\Component\Serialization\Json;
2021
use Drupal\Component\Utility\UrlHelper;
2122
use Drupal\Core\Config\ConfigFactoryInterface;
2223
use Drupal\Core\DependencyInjection\AutowireTrait;
@@ -194,6 +195,15 @@ protected function getViewerRender(MediaInterface $media, string $wopi_client_ur
194195

195196
// A trailing slash is optional in the configured URL.
196197
$wopi_base = rtrim($wopi_base, '/');
198+
$wopi_url = $wopi_base . '/cool/wopi/files/' . $media->id();
199+
$editor_url = Url::fromUri($wopi_client_url);
200+
$query = $editor_url->getOption('query') ?? [];
201+
$query['WOPISrc'] = $wopi_url;
202+
if ($close_button_url !== NULL) {
203+
$query['closebutton'] = 'true';
204+
}
205+
$editor_url->setOption('query', $query);
206+
197207
$expire_timestamp = $this->getExpireTimestamp();
198208
$access_token = $this->jwtTranscoder->encode(
199209
[
@@ -204,23 +214,39 @@ protected function getViewerRender(MediaInterface $media, string $wopi_client_ur
204214
$expire_timestamp,
205215
);
206216

207-
$render_array = [
208-
'#theme' => 'collabora_online_full',
209-
'#wopiClient' => $wopi_client_url,
210-
'#wopiSrc' => urlencode($wopi_base . '/cool/wopi/files/' . $media->id()),
211-
'#accessToken' => $access_token,
212-
// Convert to milliseconds.
213-
'#accessTokenTtl' => $expire_timestamp * 1000,
214-
'#allowfullscreen' => !$config->get('cool.allowfullscreen') ? '' : 'allowfullscreen',
215-
'#closeButtonUrl' => $close_button_url?->toString(),
217+
$data = [
218+
'action' => $editor_url->toString(),
219+
'payload' => [
220+
'access_token' => $access_token,
221+
'access_token_ttl' => $expire_timestamp * 1000,
222+
],
223+
'iframe_attributes' => [
224+
// The attributes are applied with javascript, where '' produces an
225+
// attribute without a value.
226+
...$config->get('cool.allowfullscreen') ? ['allowfullscreen' => ''] : [],
227+
],
228+
'close_button_url' => $close_button_url?->toString(),
229+
];
230+
231+
$placeholder_div = [
232+
'#type' => 'html_tag',
233+
'#tag' => 'div',
234+
'#attributes' => [
235+
'data-collabora-online-editor' => Json::encode($data),
236+
],
216237
'#attached' => [
217238
'library' => [
218239
'collabora_online/cool.frame',
219240
],
220241
],
221242
];
222243

223-
return $render_array;
244+
$html_wrapper = [
245+
'#theme' => 'collabora_online_full',
246+
'content' => $placeholder_div,
247+
];
248+
249+
return $html_wrapper;
224250
}
225251

226252
/**

‎templates/collabora-online-full.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
<link href="{{ file_url(module_path ~ '/css/cool.css') }}" rel="stylesheet" />
66
</head>
77
<body class="cool-editor__body">
8-
{{ include('collabora-online.html.twig') }}
8+
{{ content }}
99
</body>
1010
</html>

‎templates/collabora-online.html.twig‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)