Entity Browser

frontify.services.yml

@@ -11,3 +11,7 @@ services:
     arguments: [ '@entity_type.manager', '@request_stack', '@views.executable', '@form_builder', '@media_library.opener_resolver' ]
     decorates: media_library.ui_builder
     decoration_priority: 1
+
+  frontify.fields.ui:
+    class: Drupal\frontify\FrontifyFieldsUi
+    arguments: ['@config.factory']

js/frontify_media_form.js

@@ -6,7 +6,6 @@
 (function () {
   Drupal.frontifyMediaForm = {
     handleFinder(el) {
-      console.log('Frontify media form');
       el.addEventListener('click', async element => {
         element.currentTarget.disabled = true;
         // Handle unlimited fields.

js/frontify_media_library.js

@@ -7,7 +7,11 @@
   Drupal.frontifyMediaLibrary = {
     handleFinder(openFrontifyButton) {
       openFrontifyButton.addEventListener('click', async (button) => {
-        const $mediaLibraryWrapper = document.querySelector('.frontify-media-library-wrapper');
+        button.preventDefault();
+
+        const wrapperClass = drupalSettings.Frontify.wrapper_class || '.frontify-media-library-wrapper';
+
+        const $mediaLibraryWrapper = document.querySelector(wrapperClass);
         const $finderWrapper = $mediaLibraryWrapper.querySelector('.frontify-finder-wrapper');
 
         const $frontifyNameField = $mediaLibraryWrapper.querySelector('.js-form-item-name');
@@ -25,7 +29,9 @@
         // Drupal states are not working out, so we disable the add
         // button here until a selection is done in the finder.
         const $addToDrupalButton = $mediaLibraryWrapper.querySelector('.add-to-drupal');
-        $addToDrupalButton.disabled = true;
+        if ($addToDrupalButton) {
+          $addToDrupalButton.disabled = true;
+        }
 
         try {
           // Instantiate the Frontify finder.
@@ -94,11 +100,13 @@
 
             $frontifyNameField.style.display = 'block';
 
-            $addToDrupalButton.disabled = false;
             button.target.style.display = 'none';
             button.target.disabled = false;
             $finderWrapper.style.display = 'none';
             $finderWrapper.replaceChildren();
+            if ($addToDrupalButton) {
+              $addToDrupalButton.disabled = false;
+            }
           });
 
           // Add listener for user abortion.
@@ -109,11 +117,13 @@
 
             $frontifyNameField.style.display = 'none';
 
-            $addToDrupalButton.disabled = true;
             button.target.style.display = 'block';
             button.target.disabled = false;
             $finderWrapper.style.display = 'none';
             $finderWrapper.replaceChildren();
+            if ($addToDrupalButton) {
+              $addToDrupalButton.disabled = true;
+            }
           });
 
           $finderWrapper.style.display = 'flex';
@@ -124,9 +134,11 @@
           }
           // Re-enable the submit button and the input field.
           $frontifyNameField.style.display = 'block';
-          $addToDrupalButton.disabled = false;
           button.target.style.display = 'none';
           button.target.disabled = false;
+          if ($addToDrupalButton) {
+            $addToDrupalButton.disabled = false;
+          }
         }
       });
       // Trigger on initial load.

modules/frontify_entity_browser/README.md

@@ -0,0 +1,3 @@
+# Frontify Entity Browser Module
+
+This module provides an Entity browser widget that can be used to select files using the Frontify library via entity browser.

modules/frontify_entity_browser/config/schema/frontify_entity_browser.schema.yml

@@ -0,0 +1,7 @@
+entity_browser.browser.widget.frontify_finder:
+  type: mapping
+  label: 'Frontify Finder widget configuration'
+  mapping:
+    submit_text:
+      type: text
+      label: 'Submit button text'

modules/frontify_entity_browser/frontify_entity_browser.info.yml

@@ -0,0 +1,8 @@
+name: 'Frontify Entity Browser'
+type: module
+description: 'Integration Frontify Finder with Entity Browser.'
+package: Frontify
+core_version_requirement: ^10 || ^11
+dependencies:
+  - frontify:frontify
+  - entity_browser:entity_browser

modules/frontify_entity_browser/src/Plugin/EntityBrowser/Widget/FrontifyFinder.php

@@ -0,0 +1,153 @@
+<?php
+
+namespace Drupal\frontify_entity_browser\Plugin\EntityBrowser\Widget;
+
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\entity_browser\WidgetBase;
+use Drupal\file\FileInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Exposes the Frontify Finder.
+ *
+ * @EntityBrowserWidget(
+ *   id = "frontify_finder",
+ *   label = @Translation("Frontify Finder"),
+ *   description = @Translation("Expose the Frontify Finder."),
+ *   auto_select = TRUE
+ * )
+ */
+class FrontifyFinder extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    $instance = parent::create($container, $configuration, $plugin_id, $plugin_definition);
+    return $instance;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    return array_merge(parent::defaultConfiguration(), [
+      'submit_text' => $this->t('Select'),
+    ]);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getForm(array &$original_form, FormStateInterface $form_state, array $additional_widget_parameters) {
+    $form = parent::getForm($original_form, $form_state, $additional_widget_parameters);
+
+    /** @var \Drupal\frontify\FrontifyFieldsUi $fontifyFieldUiService */
+    $fontifyFieldUiService = \Drupal::service('frontify.fields.ui');
+
+    $fields = $fontifyFieldUiService->mediaLibraryUi('.entity-browser-form');
+
+    if (isset($fields['message'])) {
+      return $fields;
+    }
+
+    $form = array_merge($form, $fields);
+
+//    $config = \Drupal::config('frontify.settings');
+//
+//    $form['frontify_wrapper_overlay'] = [
+//      '#type' => 'container',
+//      '#attributes' => [
+//        'class' => ['frontify-wrapper-finder-overlay'],
+//      ],
+//    ];
+//
+//    $form['frontify_wrapper_overlay']['frontify_wrapper'] = [
+//      '#type' => 'container',
+//      '#attributes' => [
+//        'class' => ['frontify-finder-wrapper'],
+//      ],
+//    ];
+//
+//    $form['open'] = [
+//      '#type' => 'button',
+//      '#value' => $this->t('Open Frontify'),
+//      '#attributes' => [
+//        'class' => ['frontify-finder-open-button', 'btn', 'btn-primary'],
+//        'id' => ['frontify-asset-insert-button'],
+//      ],
+//      '#attached' => [
+//        'library' => [
+//          'frontify/frontify_once',
+//          'frontify/frontify_media_library',
+//        ],
+//        'drupalSettings' => [
+//          'Frontify' => [
+//            'context' => 'media_library',
+//            'wrapper_class' => '.entity-browser-form',
+//            'api_url' => $config->get('frontify_api_url'),
+//            'debug_mode' => $config->get('debug_mode'),
+//          ],
+//        ],
+//      ],
+//      '#limit_validation_errors' => [],
+//    ];
+//
+//    $form['uri'] = [
+//      '#type' => 'url',
+//      '#default_value' => '',
+//      '#element_validate' => [[static::class, 'validateUriElement']],
+//      '#maxlength' => 2048,
+//      '#attributes' => [
+//        'class' => ['frontify-asset-link-url', 'hidden'],
+//      ],
+//    ];
+//    $form['frontify_fields'] = [
+//      '#type' => 'details',
+//      '#title' => $this->t('Frontify fields'),
+//      '#open' => FALSE,
+//      '#attributes' => [
+//        'class' => ['frontify-asset-details'],
+//      ],
+//    ];
+//    $form['frontify_fields']['name'] = [
+//      '#type' => 'textfield',
+//      '#title' => $this->t('Name'),
+//      '#default_value' => '',
+//      '#maxlength' => 255,
+//      '#attributes' => [
+//        'class' => ['frontify-asset-name'],
+//      ],
+//    ];
+//    $form['frontify_fields']['id'] = [
+//      '#type' => 'textfield',
+//      '#title' => $this->t('ID'),
+//      '#default_value' => '',
+//      '#maxlength' => 255,
+//      '#attributes' => [
+//        'class' => ['frontify-asset-id'],
+//      ],
+//    ];
+//    // @todo we could optionally use a JSON field.
+//    $form['frontify_fields']['metadata'] = [
+//      '#type' => 'textarea',
+//      '#title' => $this->t('Metadata'),
+//      '#default_value' => '',
+//      '#description' => $this->t(
+//        'Snapshot of the metadata used during the import.'
+//      ),
+//      '#attributes' => [
+//        'class' => ['frontify-asset-metadata'],
+//      ],
+//    ];
+
+    return $form;
+  }
+
+  protected function prepareEntities(array $form, FormStateInterface $form_state) {
+    // TODO: Implement prepareEntities() method.
+    return [];
+  }
+
+}

src/Form/FrontifyMediaImageForm.php

@@ -120,105 +120,16 @@ public function buildForm(array $form, FormStateInterface $form_state) {
    * {@inheritdoc}
    */
   protected function buildInputElement(array $form, FormStateInterface $form_state) {
-    $config = \Drupal::config('frontify.settings');
-    $frontifyApiUrl = $config->get('frontify_api_url');
-    $frontifyDebugMode = $config->get('debug_mode');
-
-    if (empty($frontifyApiUrl)) {
-      $form['message'] = [
-        '#theme' => 'status_messages',
-        '#message_list' => [
-          'error' => [$this->t('Frontify API URL is not set. Please configure it in the Frontify settings.')],
-        ],
-      ];
-      return $form;
-    }
-
-    // Add a container to group the input elements for styling purposes.
-    $form['container'] = [
-      '#type' => 'container',
-      '#attributes' => [
-        'class' => ['frontify-media-library-wrapper'],
-      ],
-    ];
+    /** @var \Drupal\frontify\FrontifyFieldsUi $fontifyFieldUiService */
+    $fontifyFieldUiService = \Drupal::service('frontify.fields.ui');
 
-    $form['container']['open'] = [
-      '#type' => 'button',
-      '#value' => $this->t('Open Frontify'),
-      '#attributes' => [
-        'class' => ['frontify-finder-open-button', 'btn', 'btn-primary'],
-        'id' => ['frontify-finder-open-button'],
-      ],
-      '#attached' => [
-        'library' => [
-          'frontify/frontify_once',
-          'frontify/frontify_media_library',
-        ],
-        'drupalSettings' => [
-          'Frontify' =>
-            [
-              'context' => 'media_library',
-              'api_url' => $frontifyApiUrl,
-              'debug_mode' => $frontifyDebugMode === 1,
-            ],
-        ],
-      ],
-      '#limit_validation_errors' => [],
-    ];
+    $fields = $fontifyFieldUiService->mediaLibraryUi();
 
-    $form['container']['frontify_finder_wrapper'] = [
-      '#type' => 'container',
-      '#attributes' => [
-        'class' => ['frontify-finder-wrapper'],
-      ],
-    ];
+    if (isset($fields['message'])) {
+      return $fields;
+    }
 
-    $form['container']['name_wrapper']['name'] = [
-      '#type' => 'textfield',
-      '#title' => $this->t('Frontify image name'),
-      '#maxlength' => 255,
-      '#required' => TRUE,
-      '#attributes' => [
-        'class' => ['frontify-name'],
-      ],
-    ];
-    $form['container']['frontify_fields'] = [
-      '#title' => $this->t('Frontify fields'),
-      '#type' => 'details',
-      '#open' => FALSE,
-      '#attributes' => [
-        'class' => [
-          'frontify-fields',
-          $frontifyDebugMode !== 1 ? 'visually-hidden' : '',
-        ],
-      ],
-    ];
-    $form['container']['frontify_fields']['id'] = [
-      '#type' => 'textfield',
-      '#title' => $this->t('Frontify image id'),
-      '#maxlength' => 255,
-      '#required' => TRUE,
-      '#attributes' => [
-        'class' => ['frontify-id'],
-      ],
-    ];
-    $form['container']['frontify_fields']['uri'] = [
-      '#type' => 'url',
-      '#title' => $this->t('Frontify image URL'),
-      '#maxlength' => 2048,
-      '#required' => TRUE,
-      '#attributes' => [
-        'class' => ['frontify-image-uri'],
-      ],
-    ];
-    $form['container']['frontify_fields']['metadata'] = [
-      '#type' => 'textarea',
-      '#title' => $this->t('Frontify image metadata'),
-      '#required' => TRUE,
-      '#attributes' => [
-        'class' => ['frontify-image-metadata'],
-      ],
-    ];
+    $form = array_merge($form, $fields);
 
     $form['container']['submit'] = [
       '#type' => 'submit',