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

Popular posts from this blog

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 #9 | Icon API

The Google Summer of Code has reached the end of the week #9 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 implementing the Icon Field sub-module using the Field API with the Field Type, Field Widget and Field Formatter which will allow the users to specify the icon for the content type. During this week, I've implemented the Field Type, Field Widget and Field Formatter using the Plugin API and Annotations. The annotation for the Field Type which resides in the src\Plugin\Field\FieldType\IconFieldItem.php is as follows: /** * Plugin Implementation of the 'icon_field' field type. * @FieldType( * id = "icon_field", * label = @Translation("Icon Field"), * module = "icon_field", * description = @Translation("Store a bundle and icon in the database t

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

The Google Summer of Code has reached the end of the week #7 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 implementing the Icon Filter sub-module which will find and replace the pattern with the icon. The module replaces the following pattern with the icon: [icon:%bundle:%icon] where %bundle = Icon bundle machine name and             %icon = Icon name in the icon bundle During this week, I've searched on Google for implementing the Filter API in Drupal 8 and then I found Creating a Custom Filter in Drupal 8 article on lullabot.com which helped me in understanding and implementing the Icon Filter sub-module. In the Drupal 7 version of Icon Filter module was developed using the hooks but in the Drupal 8 it was replaced with the Plugin system which resides in the src/Plugin/Filter directory