Skip to main content

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 Plugin System"
  • Learnt the Routing system to create the controller class where the installed and enabled Icon bundles are listed.
  • Implement the Font Awesome bundle using the plugins defined by the main Icon module.
  • Implement the Icon autocomplete controller to allow users to fetch the icon listing based on the input of the user.
  • Implement the Icon data fetcher class which will fetch the icon and provide the Icons which are in accordance with the configuration settings of the specific bundle(in our case it will be from the Font Awesome bundle).
For the first week, As in the previous blog post I've mentioned that my mentor gave me the task to fix all the issues related to the Icon Block module and created a new branch(8.x-2.x) with all the bug fixes. I implemented the plugin system with the controller to display the installed/enabled Icon bundles and the skeleton for the fontawesome_bundle sub-module which is an Icon bundle. The following tasks were done by me for the first week of the coding period:
  • Created the .info.yml file to make the module visible and .permissions.yml file to declare permission for the module and the permissions are "administer icons" and "view icons".
  • Created the .routing.yml file to define the path(/admin/config/icons/overview) and controller namespace where the Icon bundle listing is shown.
  • Created the .services.yml file to define the plugin manager class(in our project it is IconBundleManager).
  • Defined the Annotation(for our project it is IconBundle) and the annotation has 4 fields and are id, label, description, and config_route and Controller class(IconBundleController).
  • Defined the Interface and base class called IconBundleBase and IconBundleInterface to specify the basic methods provided by the Icon bundle.
  • Lastly, created the skeleton for the fontawesome_bundle with the Implementation residing in the Plugin/IconBundle directory of the src/ folder of the icon bundle.
The directory structure for the module as of now is as shown in the image below:
The following screenshot shows the output of the controller class accessed from the path /admin/config/icons/overview with no bundles installed/enabled:

The following screenshot shows the output of the controller class accessed from the path /admin/config/icons/overview with no bundles installed/enabled:

The following screenshot shows the output of /admin/config/icons/overview with the fontawesome_bundle enabled:


During this first week of the coding period there were few difficulties that I've faced like I wasn't sure how to Implement the Plugin system in Drupal 8 and how can I make the Icon bundles be listed on the main modules controller page(/admin/config/icons/overview). I've accomplished these difficulties/challenges by going through the Drupal 8 Documentation on Plugin API, reading articles by drupalize.me (this article was very helpful for me) and referring to the notes on api.drupal.org.
Summing up, The above mentioned are the concepts that I learned and implemented during this week and hope to finish the project on time and learn new things along the way.
For the next week, I will be creating the Form page using the Form API for the Font Awesome's Configure Bundle button which is provided in the Icon bundle listing page and define the libraries for the Font Awesome Icon bundle in the libraries.yml file.

Cheers!!

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