Skip to main content

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


The Google Summer of Code has reached the end of the week #4 which marks the end of the first month of the coding period i.e; Phase 1 of GSoC 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 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.

During this week, I've successfully implemented the logic to load the appropriate icon style library using two hooks hook_page_attachments() and hook_library_info_alter(). The hook_page_attachements() gets the configuration settings from the fontawesome_bundle.settings and using the library.discovery service to get the libraries defined in the fontawesome_bundle.libraries.yml and checking the values for the icon styles like solid, regular, light and brands and attaching the appropriate library. If all the icon styles are selected then the all.css/all.js file is attached to the page.

In the hook_library_info_alter() hook the path of the fontawesome icon library file is checked and if the files are not found in the local directory of the module then it uses the files from the external CDN (Content Delivery Network) and alters the library path.

I've created a sample form to test the module with a textfield and provided the value of the #autocomplete_route_name key as fontawesome_bundle.autocomplete and the code snippet is as follows:

$form['autocomplete_test'] = array(
    '#type' => 'textfield',
    '#title' => t('Search Icon'),
    '#default_value' => '',
    '#autocomplete_route_name' => 'fontawesome_bundle.autocomplete',
);

If I try to input some text then the autocomplete list is shown as in the following screenshot:


The Phase 1 of the Google Summer of Code has ended and also the icon_api (the main module) and fontawesome_bundle (the icon bundle) are successfully implemented with no bugs in them and they are tested by my mentor Chiranjeeb Mahanta. I've gone ahead and started for the Phase 2 and started implementing the Icon Menu and Icon Filter sub-modules.

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).

The challenge faced during this week was to find a way to alter the library location defined in the .libraries.yml file and was able to achieve that by using the hook_library_info_alter() hook.

For the next week, 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 as defined in the Week #1 of the coding period and this select field will have an ajax callback which will alter the #autocomplete_route_name value of the Search icon text field.

Comments

Post a Comment

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 Fi...
Post a Comment
Read more

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 ...
Post a Comment
Read more

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...
Post a Comment
Read more