Skip to main content

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


The Google Summer of Code has reached the end of the week #8 which marks the end of the two month 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 refactoring the code for the Icon Block which was implemented during the application period of the GSoC but there was a lot of hardcoding and it had no option to select the icon bundle and for this week I've refactored the code of the Icon Block module and made it compatible with the Icon API and Font Awesome Bundle.

During this week, I've removed some hardcode from the Icon Block sub-module like importing the fixed libraries and fetching the icon data from that library. The Icon Block module was made to get the icon bundle list and update the search form with the selected autocomplete_route_name using the ajax.

The following code snippet fetches the Icon bundle list using the plugin system and the array $icon_bundle will have all the list of icon bundles installed:
// Get the icon bundle list
$icon_manager = \Drupal::service('plugin.manager.icon_bundle');
$icon_definitions = $icon_manager->getDefinitions();
$icon_bundle = array();
foreach($icon_definitions as $icon_definition) {
  $icon_bundle[$icon_definition['autocomplete_route']] = $icon_definition['label'];
}
The following code snippet is for the select field which lists all the icon bundles and when there is a change in the select field the textfield of the search gets updated with the autocomplete_route_name of the search field:
$form['settings']['icon_selector']['icon_bundle'] = array(
  '#type' => 'select',
  '#title' => t('Icon Bundle'),
  '#description' => t('Choose the icon bundle to display the icons using the autocomplete.'),
  '#default_value' => key($icon_bundle),
  '#options' => $icon_bundle,
  '#ajax' => [
    'callback' => '_icon_block_update_icon_bundle',
    'event' => 'change',
    'wrapper' => 'icon_block-field-wrapper'
  ],
);
The following code is for the search textfield with dynamic #autocomplete_route_name :
$form['settings']['icon_selector']['icon'] = array(
  '#type' => 'textfield',
  '#title' => t('Search Icon'),
  '#prefix' => '<div id="icon_block-field-wrapper">',
  '#suffix' => '</div>',
  '#default_value' => $config->get($tag . 'icon') ? $config->get($tag . 'icon') : '',
  '#autocomplete_route_name' => isset($form_state->getValue('settings')['icon_selector']['icon_bundle']) ? $form_state->getValue('settings')['icon_selector']['icon_bundle'] : key($icon_bundle),
);

After installing and enabling the Icon Bundle when we go to any of the Block configuration form we'll see the form with various textfields in the Icon details section and the following screenshot shows the configuration form of the search block:
Once the configuration form is saved and if we visit the homepage where the Search block is placed we'll see that the icon has been integrated and as shown in the screenshot below:

The Phase 2 of the Google Summer of Code has ended and in this phase I've successfully implemented 3 sub-modules namely Icon Menu, Icon Filter and Icon Block with no bugs in them and they are tested by my mentor Chiranjeeb Mahanta.

The project repository can be found on the Drupal module page(Click here to go to drupal's module page) and also alternative repository is hosted at Github (Click here to go to Icon API's github repository).

For the next week, I'll be implementing the Icon Field module using the Field API with the Field Type, Field Widget and Field Formatter. The icons will be displayed using the Field Formatter and there also will be the option to add the link which when clicked on the icon redirect to the link in the new tab.

Comments

Popular posts from this blog

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 #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

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