Unverified Commit 747c9125 authored by Mateu Aguiló Bosch's avatar Mateu Aguiló Bosch Committed by Mateu Aguiló Bosch
Browse files

Issue #3304989 by e0ipso: Allow component selection on embed

parent 870f45cd

cl_block.libraries.yml

+4 −0
Original line number Diff line number Diff line
@@ -2,3 +2,7 @@ settings: 
  css:

    component:

      css/settings.css: { }

dialog:

  css:

    component:

      css/dialog.css: { }

config/schema/cl_block.schema.yml

+27 −0
Original line number Diff line number Diff line
@@ -24,3 +24,30 @@ cl_block.settings: 
      sequence:

        type: string



filter_settings.cl_block:

  type: filter

  label: 'Embed CL Component'

  mapping:

    filters:

      type: mapping

      mapping:

        types:

          type: sequence

          label: 'Types'

          sequence:

            type: string

        statuses:

          type: sequence

          label: 'Statuses'

          sequence:

            type: string

        forbidden:

          type: sequence

          label: 'Forbidden'

          sequence:

            type: string

        allowed:

          type: sequence

          label: 'Allowed'

          sequence:

            type: string

css/dialog.css

0 → 100644
+6 −0
Original line number Diff line number Diff line 
.ui-dialog.cl-block-select-dialog {

  min-width: 60%;

}

.ui-dialog.cl-block-select-dialog .ui-dialog-titlebar {

  background-image: linear-gradient(to right, #cc00ff, #ff00b2);

}

js/plugins/clcomponents/plugin.js

+7 −5
Original line number Diff line number Diff line
@@ -17,7 +17,7 @@ 
    return null;

  }



  CKEDITOR.plugins.add('clcomponent', {

  var pluginDefinition = {

    // This plugin requires the Widgets System defined in the 'widget' plugin.

    requires: 'widget',
@@ -54,12 +54,13 @@ 
          }



          var embed_button_id = data.id ? data.id : existingValues['data-embed-button'];



          var title = existingElement

            ? `${editor.config.ClComponent_dialogTitleEdit} ${existingElement.$.querySelector('cl-component').getAttribute('data-entity-label')}`

            : editor.config.ClComponent_dialogTitleAdd;

          var dialogSettings = {

            title: existingElement ? editor.config.ClComponent_dialogTitleEdit : editor.config.ClComponent_dialogTitleAdd,

            title: title,

            dialogClass: 'cl-block-select-dialog',

            resizable: false,

            minWidth: 800

          };



          var saveCallback = function (values) {
@@ -262,7 +263,8 @@ 
        }

      });

    }

  });

  };

  CKEDITOR.plugins.add('clcomponent', pluginDefinition);



  /**

   * Get the surrounding clcomponent widget element.

src/Form/ClBlockDialog.php

+37 −19
Original line number Diff line number Diff line
@@ -2,11 +2,10 @@ 


namespace Drupal\cl_block\Form;



use Drupal\cl_components\Component\Component;

use Drupal\cl_components\Component\ComponentDiscovery;

use Drupal\cl_components\Exception\ComponentNotFoundException;

use Drupal\Component\Serialization\Json;

use Drupal\Core\Ajax\AddCssCommand;

use Drupal\Component\Utility\Crypt;

use Drupal\Core\Ajax\AjaxResponse;

use Drupal\Core\Ajax\CloseModalDialogCommand;

use Drupal\Core\Ajax\HtmlCommand;
@@ -75,8 +74,14 @@ class ClBlockDialog extends FormBase { 
    // Initialize URL element with form attributes, if present.

    $cl_component = $values['attributes'] ?? [];

    $cl_component += $input['attributes'] ?? [];

    // If we use the user input directly, the component ID value is in the

    // 'radios'.

    if ($cl_component['data-component-id']['radios'] ?? FALSE) {

      $cl_component['data-component-id'] = $cl_component['data-component-id']['radios'];

    }

    // The default values are set directly from \Drupal::request()->request,

    // provided by the editor plugin opening the dialog.

    $initial_default_value = $input['editor_object']['data-component-id'] ?? NULL;

    if (!$form_state->get('cl_component')) {

      $form_state->set('cl_component', $input['editor_object'] ?? []);

    }
@@ -85,12 +90,6 @@ class ClBlockDialog extends FormBase { 
      'data-component-id' => $embed_button->getTypeSetting('component_id'),

      'data-component-settings' => [],

    ];

    try {

      $component = $this->componentDiscovery->find($cl_component['data-component-id']);

    }

    catch (ComponentNotFoundException $e) {

      return $form;

    }



    if (is_string($cl_component['data-component-settings'])) {

      $cl_component['data-component-settings'] = Json::decode($cl_component['data-component-settings']);
@@ -98,26 +97,34 @@ class ClBlockDialog extends FormBase { 


    $form_state->set('cl_component', $cl_component);



    $dialog_form_id = sprintf('cl-block-dialog-form--%s', Crypt::randomBytesBase64(6));

    $form['#tree'] = TRUE;

    $form['#attached']['library'][] = 'editor/drupal.editor.dialog';

    $form['#prefix'] = '<div id="cl-block-dialog-form">';

    $form['#attached']['library'][] = 'cl_block/dialog';

    $form['#prefix'] = sprintf('<div id="%s">', $dialog_form_id);

    $form['#suffix'] = '</div>';

    $form['#limit_validation_errors'] = [];

    $form['#attributes']['class'] = ['cl-block-dialog-form'];



    $form['attributes'] = [

      '#type' => 'container',

      'data-component-id' => [

        '#type' => 'value',

        '#value' => $cl_component['data-component-id'],

      ],

      'data-component-settings' => [

        '#type' => 'container',

        '#tree' => TRUE,

        '#attributes' => [

          'id' => 'cl-block-element-settings',

        ],

        '#type' => 'cl_component_selector',

        '#title' => $this->t('CL Component'),

        '#required' => TRUE,

        '#default_value' => $cl_component['data-component-id'] ?? NULL,

        '#attributes' => ['style' => sprintf('display: %s;', $initial_default_value ? 'none' : 'block')],

        '#ajax' => [

          'wrapper' => $dialog_form_id,

        ],

      ],

    ];

    try {

      $component = $this->componentDiscovery->find($cl_component['data-component-id'] ?? '');

    }

    catch (ComponentNotFoundException $e) {

      return $form;

    }



    $component_form = [

      '#tree' => TRUE,
@@ -180,6 +187,14 @@ class ClBlockDialog extends FormBase { 
        '#token_types' => ['node', 'user'],

      ];

    }

    $form['attributes']['data-component-settings'] = [

      '#type' => 'container',

      '#tree' => TRUE,

      '#attributes' => [

        'id' => 'cl-block-element-settings',

      ],

      '#required' => TRUE,

    ];

    $form['attributes']['data-component-settings'] += $component_form;



    $form['attributes']['data-embed-button'] = [
@@ -280,7 +295,10 @@ class ClBlockDialog extends FormBase { 
  public function componentDataProcessCallback(array &$element, FormStateInterface $form_state, array $form): array {

    // Store the array parents for our element so that we can retrieve the

    // twig block settings in our AJAX callback.

    $form_state->set([$form['#id'], 'twig_block_array_parents'], $element['#array_parents']);

    $form_state->set([

      $form['#id'],

      'twig_block_array_parents',

    ], $element['#array_parents']);

    try {

      $component = $this->componentDiscovery->find($form_state->getValue([

        'attributes',