README

JavaScripts，用于在Neos后端模块中通过媒体浏览器进行资产选择

安装

通过composer安装

composer require wwwision/neos-mediabrowserdialog

用法

在Neos后端模块的配置中，包含提供的dist.js文件

Neos:
  Neos:
    modules:
      'administration':
        submodules:
          'some-module':
            # ...
            additionalResources:
              javaScripts:
                - 'resource://Wwwision.Neos.MediaBrowserDialog/Public/dist.js'
              styleSheets:
                - 'resource://Wwwision.Neos.MediaBrowserDialog/Public/dist.css'

配置就绪后，可以将以下data属性添加到模块中的HTML元素中，以包含Neos媒体浏览器和/或资产预览

示例

简单资产选择

仅渲染输入字段和打开媒体浏览器的按钮

<div data-asset>
  <input type="text" name="assetId" data-asset-field/>
  <a href="#" data-asset-browse>
</div>

资产预览

渲染预览图像和先前选择的资产的标签

<div data-asset="{someAssetId}">
  <template data-asset-preview-template>
    <figure data-asset-hide-if-missing>
      <img style="width: 100px" data-asset-preview-image/>
      <figcaption data-asset-preview-label></figcaption>
    </figure>
    <span data-asset-hide-if-set>-</span>
  </template>
  <div data-asset-preview-container data-asset-hide-if-missing></div>
</div>

具有data-asset-hide-if-missing属性的元素在没有选择资产时将被隐藏。具有data-asset-hide-if-set属性的元素仅在未选择资产时才可见 - 这允许渲染回退。

示例 01（单张图片上传，流体）

以下示例渲染了一个隐藏字段和浏览按钮。如果选择了资产，则浏览按钮将被资产的标签和替换资产的按钮替换。如果点击标签，则打开媒体浏览器，允许检查或替换选定的资产。

此外，媒体浏览器将仅显示neos和someAssetSource资产源（请参阅资产约束）的文档和图像

<div data-asset="{someAssetId}" data-asset-constraints-media-types="application/*,image/*" data-asset-constraints-asset-sources="neos,someAssetSource">
  <template data-asset-preview-template>
    <a href="#" data-asset-browse>
      <i class="fas fa-camera icon-white"></i> <span data-asset-preview-label></span>
    </a>
    <a data-asset-replace href="#" class="neos-button" title="Replace asset">
      <i class="fas fa-trash icon-white"></i>
    </a>
    <f:form.hidden property="someAsset" value="{someAssetId}" data="{asset-field: true}" additionalAttributes="{disabled: true}" />
  </template>
  <div data-asset-preview-container data-asset-hide-if-missing></div>
  <div data-asset-hide-if-set>
    <a class="neos-button neos-button-icon" data-asset-browse>
      <i class="fas fa-camera icon-white"></i> Browse assets
    </a>
  </div>
</div>

示例 02（多张图片上传，流体）

以下示例渲染了一个{images}列表作为预览图像。每张图片旁边都有移动按钮和一个删除按钮，该按钮可以从列表中删除特定资产。列表下方有一个浏览按钮，允许选择更多图像，最后还有一个额外的按钮可以清空整个列表

<div data-asset="<f:for each='{images}' as='image'>{image.identifier},</f:for>"
     data-asset-constraints-media-types="image/*"
     data-asset-constraints-asset-sources="neos"
     data-asset-multiple>
  <template data-asset-preview-template>
    <div>
      <h2 data-asset-preview-label></h2>
      <img data-asset-preview-image />
      <f:form.hidden name="images[]" data="{asset-field: true}" additionalAttributes="{disabled: true}" />
      <a data-asset-move-up href="#" class="neos-button" title="Move this image one position up">
        <i class="fas fa-arrow-up icon-white"></i>
      </a>
      <a data-asset-move-down href="#" class="neos-button" title="Move this image one position down">
        <i class="fas fa-arrow-down icon-white"></i>
      </a>
      <a data-asset-replace href="#" class="neos-button neos-button-danger" title="Remove this image">
        <i class="fas fa-eraser icon-white"></i>
      </a>
    </div>
  </template>
  <div data-asset-preview-container data-asset-hide-if-missing></div>
  <div data-asset-hide-if-set>
    No images have been selected yet
  </div>
  <div class="neos-button-group">
    <div data-asset-hide-if-missing>
      <a href="#" class="neos-button" data-asset-browse>
        <i class="fas fa-camera icon-white"></i> Add image(s)
      </a>
      <a data-asset-replace href="#" class="neos-button" title="Remove all">
        <i class="fas fa-eraser icon-white"></i>
      </a>
    </div>
    <div data-asset-hide-if-set>
      <a class="neos-button neos-button-icon" data-asset-browse>
        <i class="fas fa-camera icon-white"></i> Add image(s)
      </a>
    </div>
  </div>
</div>

注意：为了正确映射多个资产，您可能需要在MVC控制器中明确允许它们

class SomeController extends ActionController {

    // ...

    protected function initializeUpdateAction(): void
    {
        $this->arguments->getArgument('images')->getPropertyMappingConfiguration()->allowAllProperties();
    }

    /**
     * @param array<ImageInterface> $images
     * @Flow\IgnoreValidation("$images")
     */
    public function updateAction(array $images = []): void
    {
        // ...
    }
    
}

事件

以下事件在具有data-asset属性的容器元素上分发

示例

document.querySelectorAll('[data-asset]').forEach(container => {
  container.addEventListener('assetChosen', e => console.log('Asset selected: ' + e.detail));
  container.addEventListener('assetRemoved', e => console.log('Asset removed'));
});

鸣谢

此包的想法和部分实现灵感来源于来自brandung GmbH的Alois Rietzler，谢谢！

贡献

以问题或拉取请求的形式的贡献非常受欢迎。

许可证

请参阅LICENSE