Skip to main content

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 and with the file extending the FIlterBase class of the Filter API.

The Regular Expression for detecting the pattern in the content is the following:
/\[icon_api:([^:]*):([^\]]*)\]/
The Filter API annotation takes 4 fields and they are id, title, description, and type. There are 4 filter types and they are:
  • TYPE_MARKUP_LANGUAGE 
  • TYPE_HTML_RESTRICTOR 
  • TYPE_TRANSFORM_REVERSIBLE 
  • TYPE_TRANSFORM_IRREVERSIBLE
The above Filter types are defined in the \Drupal\filter\Plugin\FilterInterface and for our Icon Filter module the TYPE_MARKUP_LANGUAGE was used as we are altering the content.

In the main Icon API module I've created a custom theme hook using the hook_theme() which is responsible for rendering the icon and the Twig code is as follows:
{#
  Icon API Twig template for displaying the icon
#}
{% set default_class = '' %}
{% if attributes is empty %}
  {% set default_class = 'fa-2x' %}
{% endif %}
<{{ wrapper }} class="fa fa-{{ icon }} {{ default_class }} {{ attributes|join(' ') }}"></{{ wrapper }}>
The above Twig snippet is rendered using the renderer service and the code snippet is as follows:
\Drupal::service('renderer')->render($tree);
Where $tree is the structured array tree for the icon_api theme.

Once the Icon Filter module is installed then the entry of this filter module with the title "Convert [icon_api:%bundle:%icon] tags" will be visible in the Enabled Filters section. The entry will be shown at the path /admin/config/content/formats in all of the text formats as shown in the screenshot below:

I've enabled the "Convert [icon_api:%bundle:%icon] tags" filter module and gone ahead and created a article and added some content to it as shows in the screenshot below:
After saving the article and visiting the article page shows the rendered icons instead of the pattern and the screenshot is as follows:

The challenges faced during this week is to get the pattern match and replace it with the icon by using the Twig template and rendering using the renderer service.

For the next week, I'll be refactoring the code of the Icon Block module and making it compatible with the Icon API module and adding a feature to select the Icon bundle to be used in the Block forms.

Comments

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 Filters. Ic

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 #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