Skip to main content

GSoC'19 Coding Period | Week #11 | Icon API


The Google Summer of Code has reached the end of the week #11 of the coding period with my project "Complete porting of Icons API to Drupal 8" being progressing smoothly with interesting challenges along the way.

In my previous blog post, I had mentioned that I'd be fixing the autocomplete issue with the Icon Field module and looking for any bugs in the whole project.

During this week, I've implemented the autocomplete update thing in the Icon Field module and the following code is called when there is a change in the select field using the ajax:
/**
 *
 * Returns the 'Search icon' textfield
 */
public function updateIconField(array &$form, FormStateInterface $form_state) {
    // Get the delta
    $delta = $form['#icon_field_delta'];

    // Get the field name
    $field_name = $form['#icon_field_name'];

    $icon_form = $form[$field_name]['widget']['' . $delta . '']['icon'];

    // Get the current icon bundle key
    $value = $form_state->getTriggeringElement()['#value'];

    // Set the autocomplete route name to the current icon bundle key
    $icon_form['#autocomplete_route_name'] = $value;

    // Set the default value
    $icon_form['#value'] = '';

    // Set the autocomplete atttribute
    $icon_form['#attributes']['data-autocomplete-path'] = Url::fromRoute($value)->toString();

    return $icon_form;
  }
The following is the code of the Icon Bundle select field and Search Icon textfield along with the $field_name and $form_field_id variables.
// Get the field name
$field_name = $items->getFieldDefinition()->getName();

$form['#icon_field_name'] = $field_name;
$form['#icon_field_delta'] = $delta;

$form_field_id = 'icon_field-field-wrapper-' . $field_name . '-' . $delta;

// ............

$element['bundle'] = [
  '#title' => $this->t('Icon Bundle'),
  '#type' => 'select',
  '#description' => t('Choose the icon bundle to display the icons using the autocomplete.'),
  '#default_value' => key($icon_bundle), //$items[$delta]->get('bundle')->getValue(),
  '#options' => $icon_bundle,
  '#ajax' => [
    'callback' => '\Drupal\icon_field\Plugin\Field\FieldWidget\IconFieldWidget::updateIconField',
    'event' => 'change',
    'wrapper' => $form_field_id,
  ],
];

$element['icon'] = [
  '#title' => $this->t('Search Icon'),
  '#type' => 'textfield',
  '#prefix' => '<div id="' . $form_field_id . '">',
  '#suffix' => '</div>',
  '#default_value' => $items[$delta]->get('icon')->getValue(),
  '#autocomplete_route_name' => $form_state->getValue('bundle') ? $form_state->getValue('bundle') : key($icon_bundle),
];

// ........
The above solution is working fine but when there are multiple fields it is not updating the intended Search Icon textfield's autocomplete and I've tried various ways to make it work for the multiple field and finally my mentor Chiranjeeb Mahanta suggested to just go with the plain textfield. The select field for the Icon Bundle is just for the User Experience(UX) which allows users to select the specific bundle and search for the icons in that specific bundle and it won't make any difference in the functionality if the textfield is used. The following screenshot shows the Icon Field widget with the Icon Bundle and Icon name as textfields:

The project "Complete porting of Icons API to Drupal 8" is successfully ported along with new features added which were not present in the Drupal 7 version and everything is implemented as proposed in the project proposal and what was discussed with my mentor.

The challenges faced during this week are implementing the update of the Search Icons textfields #autocomplete_route_name when there is a change in the Icon Bundle select field.

For the next week, I'll be working on finding the potential bugs in the whole project and changing the fa class in the HTML tags class with the specific icon style class name and also displaying messages in the admin panel when there is a configuration error.

Comments

Popular posts from this blog

GSoC'19 Coding Period | Week #10 | Icon API

The Google Summer of Code has reached the end of the week #10 of the coding period with my project " Complete porting of Icons API to Drupal 8 " being progressing smoothly with interesting challenges along the way. In my previous blog post , I had mentioned that I'll be finishing the Icon Field submodule and checking the whole project code to find the potential bugs or future errors. During this week, I've implemented the Field Formatter and wrote a twig template to render the icon which was defined using the hook_theme() in the icon_field.module file. The twig template(defined in templates/icon-field.html.twig ) to render the icons is as follows: {# Icon Field Twig template for displaying the icon #} {% if link is not empty %} <a href="{{ link }}"> {% endif %} <{{ wrapper }} class="fa fa-{{ icon }} {{ wrapper_classes|join(' ') }}"></{{ wrapper }}> {% if link is not empty %} </a> {% endif %} In th

GSoC'19 Coding Period | Week #12 | Icon API

The Google Summer of Code has reached the end of the week #12 of the coding period which marks the end of the 3 month long GSoC program with my project " Complete porting of Icons API to Drupal 8 " successfully implemented as planned. During this 12 week, I've managed to port the 6 modules from the Drupal 7 to Drupal 8 with some features added and some features removed and following are the modules: Icon API:  This is the main module which is responsible for providing the interface to all the other modules. Fontawesome Bundle:  This is an Icon Bundle which is responsible for loading the icons and supporting the core sub-modules. This was not present in the Drupal 7 version of the module. Icon Block:  This module is responsible for integrating the icons into the Blocks. Icon Menu:  This module is responsible for integrating the icons into the Menu items. Icon Filter:  This module is responsible for integrating the icons into the content using the Filters. Ic

GSoC'19 Coding Period | Week #5 | Icon API

The Google Summer of Code has reached the end of the week #5 of the coding period with my project " Complete porting of Icons API to Drupal 8 " being progressing smoothly with interesting challenges along the way. In my previous blog post , I had mentioned that I'll be implementing the Icon Menu sub-module's form with the select field having the list of icon bundles installed and they will be fetched using the Plugin API and this select field will have an ajax callback which will alter the #autocomplete_route_name value of the Search icon text field. During this week, I've implemented the form for the menu configuration page with the icon fields attached using the hook_form_alter() hook and this form will be visible to the form with the id  menu_link_content_menu_link_content_form and menu_link_edit and as these form have the plugin ID stored at different locations the following snippet of code is used to fetch the desired plugin id from the appropr