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

The Google Summer of Code has reached the end of the week #2 of the coding period with the project 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 configuration form for the fontawesome_bundle sub-module for integrating the Icon bundles into the main icon_api module with the Configure Bundle from the Icon bundles listing page redirecting to this form and defining the .libraries.yml to define the paths for the Fontawesome icons location (.js and .css files).

During the second week of the GSoC'19 coding period I have first implemented the configuration form using the Form API and learned about using the dependency injection and injecting the \Drupal\Core\Asset\LibraryDiscovery class first by specifying it as the first parameter of the constructor and injecting the LibraryDiscovery class using the library.discovery service through the \Symfony\Component\DependencyInjection\ContainerInterface interface by using the get method provided by the Symfony framework.

When implementing the Forms there are mainly three methods and they are buildForm(), validateForm() and submitForm(). The buildForm() method is used to define the fields of the form by using the Render arrays and for this form I've used three fields and they are details, textfield, select and checkbox fields. The details field acts as the container for other fields and it can be made expanded by specifying the '#open' => TRUE key/value pair in the form field array. The configuration form has the following fields:

• Bundle method select field which specifies which method to use and there are only two options and they are SVG with JS and Web Fonts with CSS which uses the .js and .css files respectively.
• The Use External/Local file checkbox field which when checked uses the .js or .css file from the external location based on the Bundle method select field. This field makes use of #states which displays or hides when the specified conditions are met.
• The Partial File Configuration fieldset has 4 checkboxes which specify which style of icon to load and the icon styles are Solid, Light, Regular, and Brands. The icon styles Solid and Brands are free whereas Light and Regular icon styles requires PRO version.

The following screenshot shows the form of the fontawesome_bundle configuration which can be accessed from admin/config/icons/fontawesome:

The .libraries.yml file defines the location for each bundle method along with the icon style for each bundle method extension as fontawesome_bundle.svg.base and fontawesome_bundle.webfonts.base and more definitions which have the dependencies on the above two library extensions.

There are few challenges/difficulties faced during this week and they are understanding and using the Dependency injection in the Forms and specifying every extension of the library in the .libraries.yml file having a dependency on the extension of the bundle method and using the references in the YAML files to improve code reusability.

For the next week, I'll be implementing the Autocomplete controller class which will help the sub-modules to get the icon results when typed in the textfield and implementing the Icon Data class which will help to parse and cache the icon names.