Componentes personalizados en el módulo JFU

El módulo JFU trae algunos componentes, pero a veces no es suficiente para cubrir algunas necesidades especiales en nuestra implementación. 

Conociendo las dificultades el módulo JFU nos da la posibilidad de agregar componentes  por medio de código personalizado.

JFU

Conceptos básicos para la implementación de un nuevo componente.

Json
JFU trabaja en una estructura Json, para ello es obligatorio definir una estructura Json en el nuevo componente, es importante tener en cuenta la ubicación de dicho archivo, en nuestro módulo personalizado seria la siguiente "component_models->new_component->new_component.json".

Ejemplo de una estructura Json.

{
  "type": "new_component",
  "label": "New Component",
  "module_name": "",
  "title": "",
  "subtitle": "",
  "options": {
    "full_width": false,
    "custom_classes": "",
    "selected_class": ""
  },
  "items": {
    "type": "new_component_wrapper",
    "items" : [
      {
        "type": "new_component_item",
        "title": "",
        "body": {
          "type": "text",
          "value": "",
          "format": "advance_html"
        }
      }
    ]
  }
}

Templates
JFU maneja un template para cada componente. En nuestro caso es igual.
La estructura de la carpeta sería la siguiente "templates->components->new_component.html.twig" en nuestro módulo personalizado. 

Definiremos un template principal y en este llamaremos a los templates de cada componente. La ubicación de este template principal estará a la misma altura de la carpeta “components”, este template se registrará en el hook_jfu_add_template(). 
Ejemplo del código del template principal.

<div class="jfu--component jfu-type--{{ json_array.type}}">
  {% if json_array.type %}
    {% include '@custom_module/components/' ~ json_array.type ~ '.html.twig' with { 'json_array': json_array, 'components_config': components_config } %}
  {% endif %}
</div>

Hooks

Jfu implementa los siguientes hooks.

hook_jfu_add_components()

/**
* Implements hook_jfu_add_components().
*/

hook_jfu_add_components(array &$added_components) {
 $added_components[‘new_component’] = [
    ‘image' => TRUE o FALSE,
    'responsive_image' => TRUE o FALSE,
    'allow_classes' => 0,
    'allow_select_class' => 0,
    'class_list' => '',
    'module_name' => ‘custom_mudule_name’
  ];
}

hook_jfu_attached()

/**
* Implements hook_jfu_attached().
*/

function hook_jfu_attached(&$jfu_attached) {
  $jfu_attached = 'library defined in custom_module.libraries.yml’;
}

hook_jfu_add_template()

/**
 * Implements hook_jfu_add_template().
 */

function hook_jfu_add_template(&$template) {
  $template = 'Template defined in hook_theme';
}

Formulario y visualización del Json

JFU trabaja con Vue.js para el formulario y la visualización del Json, es importante definir los siguientes componentes(Vue.js).
display-new_component

Parámetros disponibles

• o_data: Un objeto con toda la data del nuevo componente.
• index: La posición del componente en un campo múltiple.
• field_name: El nombre del campo.
• cardinality: La cardinalidad del campo.
• is_load: Comprueba si el componente se cargó o no.
• options: Objeto con opciones de configuración.

Ejemplo.

Vue.component('display-new_component', {
  props: ['o_data', 'index', 'field_name', 'is_load', 'cardinality', 'options'],
  data: function () {
    return {
      isActive: true
    };
  },
  methods: {
    activeToggle: function() {
      this.isActive = !this.isActive;
    }
  },
  template: `
    <div class="component-item--wrapper" draggable="true" v-on:dragstart="dragStart($event, index)" v-on:dragend="dragEnd($event, field_name)">
      <a v-show="cardinality != 1" class="tabledrag-handle" title="Drag to re-order">
        <div class="handle">&nbsp;</div>
      </a>
      <div class="jfu-toggle" v-on:click="activeToggle">
        <label>{{ o_data.label }}</label>
        <span class="jfu-toggle-trigger-icon" v-bind:class="{'is-active' :isActive}"></span>
      </div>
      <div class="accordion-item--content" v-bind:class="{'is-active' :isActive}">
        <display-content-new_component v-bind:o_data="o_data" v-bind:options="options"></display-content-new_component>
        <display-operations v-bind:index="index" v-bind:field_name="field_name" v-bind:is_load="is_load" v-bind:type="o_data.type"></display-operations>
      </div>
    </div>
  `
});

// Define component display content new component
Vue.component('display-content-new_component', {
  props: ['o_data', 'options'],
  template: `......`
});

form-new_component

Parámetros disponibles

• o_json: Un objeto con toda la data del nuevo componente.
• edit_index: El índice del componente al momento de editar.
• field_name: El nombre del campo.
• components: Objeto de todo los componentes.
• options: Objeto con opciones de configuración.

Ejemplo.

// Define component form new_component'
Vue.component('form-new_component', {
  props: ['o_json', 'edit_index', 'index', 'field_name', 'components', 'options'],
  template: `
    <form v-on:submit.prevent="edit_index === '' ? addToJfu($event) : updateToJfu($event, o_json.type, edit_index)">
      <form-elements-new_component v-bind:o_json="o_json" v-bind:field_name="field_name" v-bind:ckid="field_name + '-jfu-editor-new_component" v-bind:index="0" v-bind:options="options"></form-elements-new_component>
      <div class="error-messages" style="display: none;">
        <span>Image field is required.</span>
      </div>
      <input class="link-to link-to-add" type="submit" value="Save" />
    </form>
  `
});

// Define component form elements form-elements-new_component
Vue.component('form-elements-new_component', {
  props: ['o_json', 'index', 'field_name', 'ckid', 'options'],
  template: `......`
});

Componentes(Vue.js) disponibles

JFU provee componentes(Vue.js) para poder ser reutilizados.

Imagen

Parámetros

• o_image: El objeto de la imagen.
• field_name: El nombre del campo.
• subindex: El índice de la posición.
• component: El nombre del nuevo componente.
• options: Las opciones de configuración.
• subindexitem: Aquí se puede enviar solo dos parámetros “image” o “responsive_image”.

<form-image v-bind:o_image="'o_image.image" v-bind:field_name="field_name" v-bind:subindex="subindex" v-bind:index="index" v-bind:component="component" v-bind:options="options" v-bind:subindexitem="'image'"></form-image>

Ckeditor

Parámetros

• o_json: El objeto del body.
• ckid: “field_name + '-jfu-editor-new_component'”.

<form-text v-bind:o_json="o_json.body" v-bind:ckid="ckid"></form-text>

Enlace

 

Parámetros

• o_link: El objeto del enlace.
• field_name: El nombre del campo.
• options: Las opciones de configuración.

<form-link v-bind:o_link="o_json.link" v-bind:field_name="field_name" v-bind:options="options"></form-link>