Refactor javascript

collabora_online.module

@@ -34,19 +34,6 @@ use Drupal\media\MediaInterface;
  */
 function collabora_online_theme(): array {
   return [
-    'collabora_online' => [
-      'render element' => 'children',
-      'template' => 'collabora-online',
-      'variables' => [
-        'accessToken' => 'test',
-        'accessTokenTtl' => '86400',
-        'iFrameStyle' => 'width:95%;',
-        'closebutton' => '',
-        'allowfullscreen' => '',
-        'wopiSrc' => 'http://localhost:9980/',
-        'wopiClient' => 'https://localhost:9980/',
-      ],
-    ],
     // This is the template for the field preview.
     'collabora_online_preview' => [
       'render element' => 'children',
@@ -59,15 +46,7 @@ function collabora_online_theme(): array {
     // This is the template for the complete page with embedding.
     'collabora_online_full' => [
       'template' => 'collabora-online-full',
-      'variables' => [
-        'accessToken' => 'test',
-        'accessTokenTtl' => '86400',
-        'iFrameStyle' => '',
-        'closebutton' => '',
-        'allowfullscreen' => '',
-        'wopiSrc' => '/wopi/files/123',
-        'wopiClient' => 'https://localhost:9980/',
-      ],
+      'render element' => 'element',
       'file' => 'collabora_online.theme.inc',
     ],
   ];
@@ -108,11 +87,14 @@ function collabora_online_entity_operation(EntityInterface $entity): array {
     return [];
   }
 
+  $options = [];
+  $options['query'] = \Drupal::destination()->getAsArray();
+
   $entries = [
     'collabora_online_view' => [
       'title' => t("View in Collabora Online"),
       'weight' => 50,
-      'url' => CollaboraUrl::previewMedia($media),
+      'url' => CollaboraUrl::previewMedia($media, $options),
     ],
   ];
 
@@ -123,7 +105,7 @@ function collabora_online_entity_operation(EntityInterface $entity): array {
     $entries['collabora_online_edit'] = [
       'title' => t("Edit in Collabora Online"),
       'weight' => 50,
-      'url' => CollaboraUrl::editMedia($media),
+      'url' => CollaboraUrl::editMedia($media, $options),
     ];
   }
 

collabora_online.theme.inc

@@ -14,6 +14,7 @@ use Drupal\Core\Extension\ExtensionPathResolver;
  *   Theme hook variables.
  */
 function template_preprocess_collabora_online_full(array &$variables): void {
+  $variables['content'] = $variables['element']['content'];
   /** @var \Drupal\Core\Extension\ExtensionPathResolver $path_resolver */
   $path_resolver = \Drupal::service(ExtensionPathResolver::class);
   $variables['module_path'] = $path_resolver->getPath('module', 'collabora_online');

js/cool.js

@@ -9,74 +9,104 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-function postMessage(msg) {
-  document
-    .getElementById('collabora-online-viewer')
-    .contentWindow.postMessage(JSON.stringify(msg), '*');
-}
+(function (window) {
 
-function postReady() {
-  postMessage({ MessageId: 'Host_PostmessageReady' });
-  postMessage({
-    MessageId: 'Hide_Button',
-    Values: {
-      id: 'renamedocument'
+  const iframeDefaultAttributes = {
+    id: 'collabora-online-viewer',
+    name: 'collabora-online-viewer',
+    class: 'cool-frame__iframe',
+    allow: 'clipboard-read *; clipboard-write *',
+  };
+
+  function createElement(tag, attributes) {
+    const element = document.createElement(tag);
+    for (const k in attributes) {
+      element.setAttribute(k, attributes[k]);
     }
-  });
-}
+    return element;
+  }
 
-function receiveMessage(hasCloseButton, event) {
-  const msg = JSON.parse(event.data);
-  if (!msg) {
-    return;
+  function buildAndSubmitForm(action, payload, target) {
+    const form = createElement('form', {
+      action,
+      enctype: 'multipart/form-data',
+      method: 'post',
+      target,
+    });
+    for (const name in payload) {
+      const input = createElement('input', {
+        type: 'hidden',
+        name,
+        value: payload[name],
+      });
+      form.append(input);
+    }
+    document.body.append(form);
+    form.submit();
+    form.remove();
   }
 
-  switch (msg.MessageId) {
-    case 'App_LoadingStatus':
-      if (msg.Values && msg.Values.Status === 'Document_Loaded') {
-        postReady();
-      }
-      break;
+  function postToEditorFrame(iframe, id, values) {
+    iframe.contentWindow.postMessage(JSON.stringify({
+      MessageId: id,
+      Values: values,
+    }), '*');
+  }
 
-    case 'UI_Close':
-      if (hasCloseButton) {
-        if (msg.Values && msg.Values.EverModified) {
-          const reply = { MessageId: 'Action_Close' };
-          postMessage(reply);
-        }
-        if (window.parent.location === window.location) {
-          // eslint-disable-next-line no-restricted-globals
-          history.back();
-        } else {
-          /* we send back the UI_Close message to the parent frame. */
-          window.parent.postMessage(event.data);
+  function receiveMessage(iframe, closeButtonUrl, event) {
+    const msg = JSON.parse(event.data);
+    if (!msg) {
+      return;
+    }
+    const postToEditor = postToEditorFrame.bind(null, iframe);
+
+    switch (msg.MessageId) {
+      case 'App_LoadingStatus':
+        if (msg.Values && msg.Values.Status === 'Document_Loaded') {
+          postToEditor('Host_PostmessageReady');
+          postToEditor('Hide_Button', {id: 'renamedocument'});
         }
-      }
-      break;
-  }
-}
+        break;
 
-function loadDocument(wopiClient, wopiSrc, options = null) {
-  let hasCloseButton = false;
-  let wopiUrl = `${wopiClient}WOPISrc=${wopiSrc}`;
-  if (options && options.closebutton === true) {
-    wopiUrl += '&closebutton=true';
-    hasCloseButton = true;
+      case 'UI_Close':
+        if (closeButtonUrl) {
+          if (msg.Values && msg.Values.EverModified) {
+            postToEditor('Action_Close');
+          }
+          if (window.parent.location === window.location) {
+            // eslint-disable-next-line no-restricted-globals
+            document.location.href = closeButtonUrl;
+          }
+          else {
+            /* we send back the UI_Close message to the parent frame. */
+            window.parent.postMessage(event.data);
+          }
+        }
+        break;
+    }
   }
 
-  window.addEventListener(
-    'message',
-    receiveMessage.bind(null, hasCloseButton),
-    false,
-  );
+  document.addEventListener('DOMContentLoaded', function () {
+    // Only one editor per page/frame is supported, because the iframe has an
+    // id attribute that would clash otherwise.
+    const placeholder_element = document.querySelector('[data-collabora-online-editor]');
+    if (!placeholder_element) {
+      return;
+    }
+    const json = placeholder_element.getAttribute('data-collabora-online-editor');
+    const data = JSON.parse(json);
+    const iframe = createElement('iframe', {
+      ...iframeDefaultAttributes,
+      ...data.iframe_attributes,
+    });
+    const div = createElement('div', {class: 'cool-frame'});
+    div.appendChild(iframe);
+    placeholder_element.after(div);
+    placeholder_element.remove();
 
-  const formElem = document.getElementById('collabora-submit-form');
+    window.addEventListener('message', receiveMessage.bind(null, iframe, data.close_button_url));
 
-  if (!formElem) {
-    console.log('error: submit form not found');
-    return;
-  }
+    buildAndSubmitForm(data.action, data.payload, iframe.id);
+  });
 
-  formElem.action = wopiUrl;
-  formElem.submit();
-}
+})(window);

phpstan.neon

@@ -14,4 +14,3 @@ parameters:
     - "#^Unsafe usage of new static\\(\\).$#"
     # Allow to omit `<mixed>` as iterable or generic type qualifier.
     - identifier: missingType.iterableValue
-    - identifier: missingType.generics

src/CollaboraUrl.php

@@ -19,6 +19,9 @@
 
 /**
  * Static methods to build urls.
+ *
+ * The main purpose is not having to remember route names and route parameter
+ * names, which then cannot be verified by static analysis.
  */
 class CollaboraUrl {
 
@@ -27,25 +30,29 @@ class CollaboraUrl {
    *
    * @param \Drupal\media\MediaInterface $media
    *   Media entity that holds the file to open in the viewer.
+   * @param array $options
+   *   See \Drupal\Core\Url::fromUri() for details.
    *
    * @return \Drupal\Core\Url
    *   Editor url to visit as full-page, or to embed in an iframe.
    */
-  public static function previewMedia(MediaInterface $media): Url {
-    return Url::fromRoute('collabora-online.view', ['media' => $media->id()]);
+  public static function previewMedia(MediaInterface $media, array $options = []): Url {
+    return Url::fromRoute('collabora-online.view', ['media' => $media->id()], $options);
   }
 
   /**
    * Gets a url to open media in Collabora in edit mode.
    *
    * @param \Drupal\media\MediaInterface $media
    *   Media entity that holds the file to open in the editor.
+   * @param array $options
+   *   See \Drupal\Core\Url::fromUri() for details.
    *
    * @return \Drupal\Core\Url
    *   Editor url to visit as full-page, or to embed in an iframe.
    */
-  public static function editMedia(MediaInterface $media): Url {
-    return Url::fromRoute('collabora-online.edit', ['media' => $media->id()]);
+  public static function editMedia(MediaInterface $media, array $options = []): Url {
+    return Url::fromRoute('collabora-online.edit', ['media' => $media->id()], $options);
   }
 
 }