Hola compañeros.
La realización del sistema Javascript, la tengo hecha. Es muy muy sencilla.
Mi problema viene en ver cómo incrustarla / meterla dentro de Drupal como módulo.
Por más que estoy intentando hacer un módulo Custom, no consigo hacerlo.
He conseguido crear un campo custom, "MapPositions" y me saca 2 inputs de tipo texto para la posición X e Y que capturaré con Javascript.
Pero en dicho módulo, no consigo hacer que me carge CSS y javascript, por lo que no soy capaz de hacer que se ejecute el Javascript que he desarrollado.
Mi módulo consta de la siguiente estructura:
+modules
---- + custom
-------- + officespointselector
------------ + css
---------------- OfficesPointSelector.css
------------ + js
---------------- OfficesPointSelector.js
------------ + src
---------------- + Plugin
-------------------- + Field
------------------------ + FieldFormatter
---------------------------- OfficesPointSelectorDefaultFormatter.php
------------------------ + FieldType
---------------------------- OfficesPointSelector.php
------------------------ + FieldWidget
---------------------------- OfficesPointSelectorDefaultWidget.php
------------ officespointselector.info.yml
------------ officespointselector.libraries.yml
Como digo, el Módulo, funciona correctamente, dado que aparecen bien los 2 campos de tipo texto con los labels que yo he definido, etc.
El problema viene cuando intento que el módulo incorpore JS y CSS, y ninguno de estos es insertado ni ejecutado:
officespointselector.info.yml
Código:
name: OfficesPointSelector
description: Interacso Modile: Define a point into a map to set position of office
# The type must be 'module' and the package must be 'Field types'
type: module
package: Field types
core: 8.x
libraries:
- officespointselector/officespointselector
# The list of dependencies must contains the 'field' value
dependencies:
- field
Código:
officespointselector:
version: 1.x
css:
theme:
css/OfficesPointSelector.css: {}
js:
js/OfficesPointSelector.js: {}
dependencies:
- core/jquery
Código PHP:
<?php
namespace DrupalofficespointselectorPluginFieldFieldFormatter;
use DrupalCoreFieldFieldItemListInterface;
use DrupalCoreFieldFormatterBase;
use Drupal;
/**
* Plugin implementation of the 'OfficesPointSelectorDefaultFormatter' formatter.
*
* @FieldFormatter(
* id = "OfficesPointSelectorDefaultFormatter",
* label = @Translation("Offices Point Select"),
* field_types = {
* "OfficesPointSelector"
* }
* )
*/
class OfficesPointSelectorDefaultFormatter extends FormatterBase {
/**
* Define how the field type is showed.
*
* Inside this method we can customize how the field is displayed inside
* pages.
*/
public function viewElements(FieldItemListInterface $items, $langcode) {
$elements = [];
foreach ($items as $delta => $item) {
$elements[$delta] = [
'#type' => 'markup',
'#markup' => $item->posX . ', ' . $item->posY
];
}
return $elements;
}
} // class
src/Plugin/field/FieldType/OfficesPointSelector.php Código PHP:
<?php
namespace DrupalofficespointselectorPluginFieldFieldType;
use DrupalCoreFieldFieldItemBase;
use DrupalCoreTypedDataDataDefinition;
use DrupalCoreFieldFieldStorageDefinitionInterface as StorageDefinition;
/**
* Plugin implementation of the 'officespointselector' field type.
*
* @FieldType(
* id = "OfficesPointSelector",
* label = @Translation("OfficesPointSelector"),
* description = @Translation("Define a point into a map"),
* category = @Translation("Custom"),
* default_widget = "OfficesPointSelectorDefaultWidget",
* default_formatter = "OfficesPointSelectorDefaultFormatter"
* )
*/
class OfficesPointSelector extends FieldItemBase {
/**
* Field type properties definition.
*
* Inside this method we defines all the fields (properties) that our
* custom field type will have.
*
* Here there is a list of allowed property types: https://goo.gl/sIBBgO
*/
public static function propertyDefinitions(StorageDefinition $storage) {
$properties = [];
$properties['posX'] = DataDefinition::create('string')
->setLabel(t('Position X'));
$properties['posY'] = DataDefinition::create('string')
->setLabel(t('Position Y'));
return $properties;
}
/**
* Field type schema definition.
*
* Inside this method we defines the database schema used to store data for
* our field type.
*
* Here there is a list of allowed column types: https://goo.gl/YY3G7s
*/
public static function schema(StorageDefinition $storage) {
$columns = [];
$columns['posX'] = [
'type' => 'char',
'length' => 4,
];
$columns['posY'] = [
'type' => 'char',
'length' => 4,
];
return [
'columns' => $columns,
'indexes' => [],
];
}
/**
* Define when the field type is empty.
*
* This method is important and used internally by Drupal. Take a moment
* to define when the field fype must be considered empty.
*/
public function isEmpty() {
$isEmpty =
empty($this->get('posX')->getValue()) &&
empty($this->get('posY')->getValue());
return $isEmpty;
}
} // class
src/Plugin/field/FieldWidget/OfficesPointSelectorDefaultWidget.php Código PHP:
<?php
namespace DrupalofficespointselectorPluginFieldFieldWidget;
use Drupal;
use DrupalCoreFieldFieldItemListInterface;
use DrupalCoreFieldWidgetBase;
use DrupalCoreFormFormStateInterface;
/**
* Plugin implementation of the 'OfficesPointSelectorDefaultWidget' widget.
*
* @FieldWidget(
* id = "OfficesPointSelectorDefaultWidget",
* label = @Translation("Offices Point Select"),
* field_types = {
* "OfficesPointSelector"
* }
* )
*/
class OfficesPointSelectorDefaultWidget extends WidgetBase {
/**
* Define the form for the field type.
*
* Inside this method we can define the form used to edit the field type.
*
* Here there is a list of allowed element types: https://goo.gl/XVd4tA
*/
public function formElement(
FieldItemListInterface $items,
$delta,
Array $element,
Array &$form,
FormStateInterface $formState
) {
// X position
$element['posX'] = [
'#type' => 'textfield',
'#title' => t('Position X'),
// Set here the current value for this field, or a default value (or
// null) if there is no a value
'#default_value' => isset($items[$delta]->posX) ?
$items[$delta]->posX : null,
'#empty_value' => '',
'#placeholder' => t('Position X'),
];
// Y position
$element['posY'] = [
'#type' => 'textfield',
'#title' => t('Position Y'),
'#default_value' => isset($items[$delta]->posY) ?
$items[$delta]->posY : null,
'#empty_value' => '',
'#placeholder' => t('Position Y'),
];
return $element;
}
} // class
css/OfficesPointSelector.css
Código:
body {
background-color:red;
}
Código:
jQuery(document).ready(function () {
alert ("");
});
Esto es todo el montaje, pero no veo por ningún lado que mi ADMIN de drupal incluya las librerías correspondientes de mi módulo para poder ejecutar el JS, ni los CSS.
¿qué estoy haciendo mal?
Gracias!!!