Tag: PURE

I’m implementing the javascript library Annotorious which allow to add annotations on an image. My goal is to be able to link content with part of the image select with Annotorious. When we select a zone, Annotorious open a form we can personalize to add information we want link with the zone. In my case, I added a fieldtext but I want it uses the autocomplete but I don’t know how to activate this behavior.

Regarding the code in core/lib/Drupal/Core/Render/Element/FormElement.php, the form element add the class ‘form-autocomplete’ and the attributes ‘data-autocomplete-path’ equals to the url of an autocomplete function on his input and inject the library core/drupal.autocomplete. Regarding this, I tried to reproduce the same behavior. But I guess something is missing because my field doesn’t query my endpoint when I typed in it but I don’t know why. I was also thinking this maybe doesn’t work because it’s add by javascript after the loading of the page but in this case, I don’t know how to solve this problem.

Here my code:

My widget field:

class ImagePinWidget extends ImageWidget {

  public static function process($element, FormStateInterface $form_state, $form) {
    $element = parent::process($element, $form_state, $form);

    $element('preview')('#attributes') = array('id' => array('my-image'));

    $element('#attached')('library')() = 'my_module/image-pin';
    $element('#theme') = 'image_pin_widget';

    return $element;
  }

}

My my_module.libraries.yml

recogito-annotorious:
  version: 1.x
  css:
    component:
      /libraries/annotorious/annotorious.min.css: { minified: true }
  js:
    /libraries/annotorious/annotorious.min.js: { minified: true }

annotorious-toolbar:
  version: 1.x
  js:
    https://cdn.jsdelivr.net/npm/@recogito/annotorious-toolbar@latest/dist/annotorious-toolbar.min.js: { type: external, minified: true }

image-pin:
  version: 1.0.0
  css:
    component:
      css/image-pin.css: {}
  js:
    js/image_pin.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - my_module/recogito-annotorious
    - core/drupal.autocomplete
    - my_module/annotorious-toolbar

image_pin.js:

(function ($, Drupal, drupalSettings, Annotorious) {

  'use strict';

  Drupal.behaviors.redacto_form_image_pin = {
    attach: function (context) {
      var config = {
        image:'my-image',
        widgets: (
          Drupal.behaviors.my_module_image_pin.nodeSelectorWidget,
        ),
      };

      var anno = Annotorious.init(config);

      Annotorious.Toolbar(anno, document.getElementById('toolbar'));
    },

    /**
     * Dynamic behavior when the status changes.
     *
     * @param $status
     */
    nodeSelectorWidget: function (args) {

      // 4. This part renders the UI elements
      var createField = function() {
        var input = document.createElement('input');

        input.classList.add('form-autocomplete');
        input.setAttribute('data-autocomplete-path', '/fr/autocomplete/custom');

        return input;
      }

      var container = document.createElement('div');
      container.className = 'nodeselector-widget';

      container.appendChild(createField());

      return container;

    }

  };

})(jQuery, Drupal, drupalSettings, Annotorious);

I precise the path /fr/autocomplete/insects return correctly a json list of content and autocomplete create in a usual form works correctly with it. Example of autocomplete I do in an usual drupal form with this custom autocomplete:

$element('test_autocomplete') = (
     '#type' => 'textfield',
     '#title' => t('Autocomplete Articles'),
     '#autocomplete_route_name' => 'my_module.custom_autocomplete',
   );