allow to close editor

src/Bundle/ChillWopiBundle/chill.webpack.config.js

@@ -0,0 +1,6 @@
+// this file loads all assets from the Chill person bundle
+module.exports = function(encore, entries)
+{
+    encore.addEntry('page_wopi_editor', __dirname + '/src/Resources/public/page/editor/index.js');
+    //home/julien/dev/département-vendee/chill/vendor/chill-project/chill-bundles/src/Bundle/ChillWopiBundle/src/Resources/public/page/editor/index.js
+};

src/Bundle/ChillWopiBundle/src/Controller/Test.php

@@ -16,6 +16,7 @@ use Chill\WopiBundle\Service\Controller\ResponderInterface;
 use Exception;
 use loophp\psr17\Psr17Interface;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 use Symfony\Component\Routing\RouterInterface;
 use Symfony\Component\Security\Core\Security;
@@ -61,7 +62,7 @@ final class Test
         $storedObject = $this->storedObjectRepository->findOneBy(['filename' => $fileId]);
 
         if (null === $storedObject) {
-            throw new Exception(sprintf('Unable to find object named %s', $fileId));
+            throw new NotFoundHttpException(sprintf('Unable to find object named %s', $fileId));
         }
 
         if ([] === $discoverExtension = $this->wopiDiscovery->discoverMimeType($storedObject->getType())) {
@@ -86,6 +87,7 @@ final class Test
                                 ],
                                 UrlGeneratorInterface::ABSOLUTE_URL
                             ),
+                        'closebutton' => 1
                     ]
                 )
             );
@@ -93,7 +95,7 @@ final class Test
         return $this
             ->responder
             ->render(
-                '@Wopi/Editor/page.html.twig',
+                '@ChillWopi/Editor/page.html.twig',
                 $configuration
             );
 

src/Bundle/ChillWopiBundle/src/Resources/public/page/editor/index.js

@@ -0,0 +1,46 @@
+require('./index.scss');
+
+window.addEventListener('DOMContentLoaded', function(e) {
+    let frameholder = document.getElementById('frameholder');
+    let office_frame = document.createElement('iframe');
+    office_frame.name = 'office_frame';
+    office_frame.id = 'office_frame';
+
+    // The title should be set for accessibility
+    office_frame.title = 'Office Frame';
+
+    // This attribute allows true fullscreen mode in slideshow view
+    // when using PowerPoint's 'view' action.
+    office_frame.setAttribute('allowfullscreen', 'true');
+
+    // The sandbox attribute is needed to allow automatic redirection to the O365 sign-in page in the business user flow
+    office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox');
+    frameholder.appendChild(office_frame);
+
+    document.getElementById('office_form').submit();
+    console.log(office_frame);
+
+    const url = new URL(editor_url);
+    const editor_domain = url.origin;
+
+    window.addEventListener("message", function(message) {
+        if (message.origin !== editor_domain) {
+            return;
+        }
+
+        let data = JSON.parse(message.data);
+
+        if ('UI_Close' === data.MessageId) {
+            closeEditor();
+        }
+    });
+
+});
+
+function closeEditor() {
+   let
+       params = new URLSearchParams(window.location.search),
+       returnPath = params.get('returnPath');
+
+   window.location.assign(returnPath);
+}

src/Bundle/ChillWopiBundle/src/Resources/public/page/editor/index.scss

@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  -ms-content-zooming: none;
+}
+
+#office_frame {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  border: none;
+  display: block;
+}

src/Bundle/ChillWopiBundle/src/Resources/views/Editor/embedded.html.twig

@@ -0,0 +1,36 @@
+<style type="text/css">
+    #office_frame {
+        width: 100%;
+        height: 800px;
+        margin: 0;
+        border: none;
+        display: block;
+    }
+</style>
+
+<form id="office_form" name="office_form" target="office_frame" action="{{ server }}" method="post">
+    <input name="access_token" value="{{ access_token }}" type="hidden" />
+    <input name="access_token_ttl" value="{{ access_token_ttl }}" type="hidden" />
+</form>
+
+<span id="frameholder"></span>
+
+<script type="text/javascript">
+    var frameholder = document.getElementById('frameholder');
+    var office_frame = document.createElement('iframe');
+    office_frame.name = 'office_frame';
+    office_frame.id = 'office_frame';
+
+    // The title should be set for accessibility
+    office_frame.title = 'Office Frame';
+
+    // This attribute allows true fullscreen mode in slideshow view
+    // when using PowerPoint's 'view' action.
+    office_frame.setAttribute('allowfullscreen', 'true');
+
+    // The sandbox attribute is needed to allow automatic redirection to the O365 sign-in page in the business user flow
+    office_frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-top-navigation allow-popups-to-escape-sandbox');
+    frameholder.appendChild(office_frame);
+
+    document.getElementById('office_form').submit();
+</script>

src/Bundle/ChillWopiBundle/src/Resources/views/Editor/page.html.twig

@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+
+    <!-- Enable IE Standards mode -->
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+
+    <link rel="shortcut icon" href="{{ favIconUrl }}" />
+    <script type="text/javascript">
+        const editor_url = "{{ server|escape('js') }}";
+    </script>
+    {{ encore_entry_link_tags('page_wopi_editor') }}
+    {{ encore_entry_script_tags('page_wopi_editor') }}
+</head>
+
+<body>
+
+    <form id="office_form" name="office_form" target="office_frame" action="{{ server }}" method="post">
+        <input name="access_token" value="{{ access_token }}" type="hidden" />
+        <input name="access_token_ttl" value="{{ access_token_ttl }}" type="hidden" />
+    </form>
+
+    <span id="frameholder"></span>
+
+</body>
+</html>