FEATURE: Add IFrame Media Chooser API

In Flow applications or "traditional" Neos modules which are not implemented with React, you still sometimes
need to choose assets. The Media UI provides an extra entry point to allow this. The process works roughly as follows:

1) You open an iFrame, where you display the `IFrameMediaChooser` Controller.

2) The user can pick an image.

3) When the image is chosen, a JavaScript callback function in your outer frame (at location `window.NeosMediaBrowserCallbacks.assetChosen`)
   is called.

Author: skurfuerst

Classes/Controller/IframeMediaChooserController.php

@@ -0,0 +1,52 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Flowpack\Media\Ui\Controller;
+
+/*
+ * This file is part of the Flowpack.Media.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+
+use Neos\Flow\Annotations as Flow;
+use Neos\Fusion\View\FusionView;
+use Neos\Neos\Controller\Module\AbstractModuleController;
+
+/**
+ * This is the entry point for choosing Media by opening an iframe. This is useful for
+ * Flow applications or "traditional" non-React Neos Backend Modules.
+ *
+ * @Flow\Scope("singleton")
+ */
+class IframeMediaChooserController extends AbstractModuleController
+{
+    /**
+     * @var FusionView
+     */
+    protected $view;
+
+    /**
+     * @var string
+     */
+    protected $defaultViewObjectName = FusionView::class;
+
+    /**
+     * @var array
+     */
+    protected $viewFormatToObjectNameMap = [
+        'html' => FusionView::class,
+    ];
+
+    /**
+     * Renders the media chooser
+     */
+    public function indexAction(): void
+    {
+    }
+}

Classes/Eel/MediaChooserNeosConfigHelper.php

@@ -0,0 +1,57 @@
+<?php
+declare(strict_types=1);
+
+namespace Flowpack\Media\Ui\Eel;
+
+/*
+ * This file is part of the Flowpack.Media.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+
+use Neos\Flow\Annotations as Flow;
+use Neos\Eel\ProtectedContextAwareInterface;
+use Neos\Neos\Service\UserService;
+use Neos\Neos\Service\XliffService;
+
+/**
+ * This helper is used inside the view rendering of {@see IframeMediaChooserController},
+ * to set up a HTML environment as close as possible to the the Fluid-based backend modules.
+ *
+ * This is a workaround and should NOT be relied upon externally.
+ *
+ * @internal
+ */
+class MediaChooserNeosConfigHelper implements ProtectedContextAwareInterface
+{
+    /**
+     * @Flow\Inject
+     * @var UserService
+     */
+    protected $userService;
+
+    /**
+     * @Flow\Inject
+     * @var XliffService
+     */
+    protected $xliffService;
+
+    public function allowsCallOfMethod($methodName)
+    {
+        return true;
+    }
+
+    public function backendInterfaceLanguage()
+    {
+        return $this->userService->getInterfaceLanguage();
+    }
+
+    public function backendXliffCacheVersion()
+    {
+        return $this->xliffService->getCacheVersion();
+    }
+}

Classes/GraphQL/Resolver/Type/TagResolver.php

@@ -36,6 +36,7 @@ class TagResolver implements ResolverInterface
      */
     public function id(Tag $tag): string
     {
+        die("JA");
         return $this->persistenceManager->getIdentifierByObject($tag);
     }
 }

Configuration/Policy.yaml

@@ -4,6 +4,8 @@ privilegeTargets:
       matcher: 'method(public Flowpack\Media\Ui\Controller\MediaController->(.*)Action())'
     'Flowpack.Media.Ui:Queries':
       matcher: 'method(public Flowpack\Media\Ui\GraphQL\Resolver\(.*)Resolver->.*()) || method(t3n\GraphQL\Controller\GraphQLController->queryAction())'
+    'Flowpack.Media.Ui:IframeMediaChooser':
+      matcher: 'method(public Flowpack\Media\Ui\Controller\IframeMediaChooserController->(.*)Action())'
 
   'Neos\Neos\Security\Authorization\Privilege\ModulePrivilege':
     'Flowpack.Media.Ui:Backend.Module.Management.Media':

Configuration/Routes.yaml

@@ -5,3 +5,10 @@
       package: 't3n.GraphQL'
       variables:
         'endpoint': 'media-assets'
+
+- name: 'IFrame Media Chooser'
+  uriPattern: 'neos/media/asset-choice'
+  defaults:
+    '@package': 'Flowpack.Media.Ui'
+    '@controller': 'IframeMediaChooser'
+    '@action': 'index'

Configuration/Settings.GraphQL.yaml

@@ -10,8 +10,3 @@ t3n:
             resolverPathPattern: 'Flowpack\Media\Ui\GraphQL\Resolver\Type\{Type}Resolver'
             resolvers:
               AssetProxy: 'Flowpack\Media\Ui\GraphQL\Resolver\Type\AssetResolver'
-          assetUsage:
-            typeDefs: 'resource://Flowpack.Media.Ui/Private/GraphQL/schema.root.graphql'
-            resolverPathPattern: 'Flowpack\Media\Ui\GraphQL\Resolver\Type\{Type}Resolver'
-            resolvers:
-              AssetProxy: 'Flowpack\Media\Ui\GraphQL\Resolver\Type\AssetResolver'

Configuration/Settings.Neos.yaml

@@ -34,3 +34,7 @@ Neos:
         stylesheets:
           Flowpack.Media.Ui:AssetEditor:
             resource: resource://Flowpack.Media.Ui/Public/AssetEditor/Plugin.css
+
+  Fusion:
+    defaultContext:
+      'FlowpackMediaUi.MediaChooserNeosConfig': 'Flowpack\Media\Ui\Eel\MediaChooserNeosConfigHelper'

Readme.md

@@ -88,6 +88,50 @@ Neos:
           showSimilarAssets: true
 ```
 
+### choose assets by rendering media selection iFrame
+
+In Flow applications or "traditional" Neos modules which are not implemented with React, you still sometimes
+need to choose assets. The Media UI provides an extra entry point to allow this. The process works roughly as follows:
+
+1) You open an iFrame, where you display the `IFrameMediaChooser` Controller.
+
+2) The user can pick an image.
+
+3) When the image is chosen, a JavaScript callback function in your outer frame (at location `window.NeosMediaBrowserCallbacks.assetChosen`)
+   is called.
+
+
+**How to set this up in detail?**
+
+1) You need to grant the `Flowpack.Media.Ui:IframeMediaChooser` privilegeTarget if you want to use this feature.
+   Add the following to your `Policy.yaml`, and adjust the role names as you need it for your use-case:
+   
+   ```yaml
+   roles:
+    'Neos.Neos:AbstractEditor':
+      privileges:
+        -
+          privilegeTarget: 'Flowpack.Media.Ui:IframeMediaChooser'
+          permission: GRANT
+   ```
+
+2) Define the callback function `window.NeosMediaBrowserCallbacks.assetChosen(assetId)`:
+
+   ```js
+   window.NeosMediaBrowserCallbacks = {
+       assetChosen: (assetId) => {
+           // do whatever you need to do here
+       }
+   }
+   ```
+
+3) Open the `IFrameMediaChooser` controller in an iframe. To generate the URL to open,
+   you can use the following `UriBuilder` invocation:
+   
+   ```php
+   return $uriBuilder->uriFor('index', [], 'IframeMediaChooser', 'Flowpack.Media.Ui');
+   ```
+
 ## Architecture
 
 ### API / GraphQL

Resources/Private/Fusion/Root.fusion

@@ -1 +1,2 @@
+include: resource://Neos.Fusion/Private/Fusion/Root.fusion
 include: **/*

Resources/Private/Fusion/Views/IframeMediaChooserController.fusion

@@ -0,0 +1,42 @@
+// This is the rendering of the stand-alone Iframe Media Selection mode.
+// It emulates the Fluid-based backend layout and calls the Neos JS Bootstrap,
+// so that the Media Selection UI can access e.g. the Neos translations as usual.
+//
+// This whole file is a WORKAROUND and should only be used until we can move some of this
+// into the Neos Core.
+Flowpack.Media.Ui.IframeMediaChooserController {
+    index = Neos.Fusion:Component {
+        mediaModule = Flowpack.Media.Ui:MediaModule
+
+        _neosJavascriptBasePath = ${StaticResource.uri('Neos.Neos', 'Public/JavaScript')}
+        _initScript = ${'<script>window.NeosCMS = {}; window.NeosCMS.Configuration = {}; window.NeosCMS.Configuration.neosJavascriptBasePath = ' + Json.stringify(this._neosJavascriptBasePath) + ';</script>'}
+
+        _xliffAsJsonUri = Neos.Fusion:UriBuilder {
+            package = 'Neos.Neos'
+            controller = 'Backend\\Backend'
+            action = 'xliffAsJson'
+            arguments {
+                locale = ${FlowpackMediaUi.MediaChooserNeosConfig.backendInterfaceLanguage()}
+                version = ${FlowpackMediaUi.MediaChooserNeosConfig.backendXliffCacheVersion()}
+            }
+            absolute = true
+        }
+
+        renderer = afx`
+            <html>
+            <head>
+                <link rel="stylesheet" href={StaticResource.uri('Neos.Neos', 'Public/Styles/Minimal.css')} />
+                <link rel="stylesheet" href={StaticResource.uri('Flowpack.Media.Ui', 'Public/Assets/main.bundle.css')} />
+
+                <link rel="neos-xliff" href={props._xliffAsJsonUri} />
+            </head>
+            <body class="neos neos-module" style="background-color: #222">
+                {props.mediaModule}
+                {props._initScript}
+                <script src={StaticResource.uri('Neos.Neos', 'Public/JavaScript/Main.min.js')}></script>
+                <script src={StaticResource.uri('Flowpack.Media.Ui', 'Public/Assets/main.bundle.js')}></script>
+            </body>
+            </html>
+        `
+    }
+}