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 'fas'. The getIconArray() function is responsible for returning the icon list and this list will be used by the Autocomplete controller class to narrow down the search of the icon. This function will parse the icons.yml file located in the metadata/ directory of the fontawesome_bundle sub-module and caches the icons list and stores it in the data bin of the cache with the id fontawesome_bundle.icon_list.

The following code snippet shows how the icon data is fetched from the cache:

$icons = \Drupal::cache('data')->get('fontawesome_bundle.iconlist');

The autocomplete controller class contains the function handleIcons() which is responsible for searching the icon and returning the result to the textfield as the JSON response when specified as the routing path to the #autocomplete_route_name to the textfield in the form and the route name for this controller class is fontawesome_bundle.autocomplete specified in the .routing.yml file.

The following is the code snippet from the AutocompleteController class which is the response array and stores the result with the keys value and label:

$response[] = [
    'value' => $icon,
    'label' => t('<i class=":prefix fa-:icon fa-fw fa-2x"></i> :icon', [
        ':prefix' => \Drupal\fontawesome_bundle\FontAwesomeIconData::determinePrefix($icon_data[$icon]['styles']),
        ':icon' => $icon,
    ]),
];

The $response array is returned as the JSON response using the Symfony's JsonResponse class:

return new JsonResponse($response);

In the previous coding week I had created the configuration form for the fontawesome_bundle sub-module but did not create the default configuration so in this week I've created the .config.yml file in the directory config/install/ and provided the default values for the configuration form.

The following screenshot shows the directory structure of the project until this point:

The challenges faced during this week were to understand the structure of the icons.yml file structure and parse the icon data using the Symfony's Yaml::parse function to fetch the icon data and save it in the cache and also how to narrow down the icon list and return it as the JSON repsonse.

For the next week, I'll be coding the fontawesome_bundle.module file to load the appropriate icon library as saved through the configuration form and altering the library location if the library does not exists in the local directory of the module.