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 #3 | Icon API

The Google Summer of Code has reached the end of the week #3 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 working on implementing the Autocomplete controller class which will display the icons list based on the search keyword provided by the query string and Font Awesome Icon data class which is responsible for parsing and caching the icon data from the icons.yml file provided by the fontawesome icon library. During this week I've implemented the Icon data class called  FontAwesomeIconData class with two functions/methods which are getIconArray() and determinePrefix().  The determinePrefix() function takes the style of icon as a parameter and determines the prefix to be used for that icon. For instance, if the icon style contains brands then it returns ' fab ' otherwise it returns 

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

The Coding phase of Google Summer of Code 2019 commenced in the last week on May 27, which marks the end of the Community bonding period. As stated in my previous post , the community bonding period gives the students an opportunity to build affinity with the community and learn more about the project and the organization. Currently, I am working on porting Icon API module to Drupal 8, under the guidance of Chiranjeeb Mahanta , which integrates the Icons into the Blocks, Menu Items, Fields and the content using the shortcodes and it makes the website look beautiful by using the right Icon at the right place. For the first phase/month of the coding period I plan to port the following features: Learnt how to implement the Plugin API which will allow the new Icons bundles to be integrated into the main module and the Icon bundles can accessed from any of the sub-modules. To understand the plugin system the article which helped me understand it is " Unraveling the Drupal 8

Community Bonding with Drupal | GSoC'19

This year I got selected into Google Summer of Code (GSoC'19) under Drupal for the project " Complete porting of Icon API to Drupal 8 ". The Icon API is a module which integrates the icons throughout the drupal site. This blog post focuses on Community bonding period with Drupal for GSoC'19. This year, accepted proposals/projects were announced on May 6, 23:30 IST. The selected students are supposed to participate in the Community bonding before the coding phase actually begins. The coding phase starts from May 27 and ends on August 26 with three project evaluations. The Community bonding period is almost a month long and the students are supposed to contact their mentors to discuss the project, learn more about the organisation's they are contributing to, learn the essentials APIs or technologies required to complete the project. I contacted my mentor Chiranjeeb Mahanta who was the GSoC'17 student worked on the project Porting Wish list module to Drupa