Skip to main content

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


The Google Summer of Code has reached the end of the week #6 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 part where the icon is displayed in the menu link title as saved through the configuration page of the menu link.

During this week, I've successfully implemented what I've mentioned in my previous blog and the icons are displaying on the menu link title and this was achieved using the template_preprocess_menu() hook and plugin id for the menu link is stored in the following tree path of the array:

$plugin_id = $variables['items'][index]['original_link']->getPluginId();

The following code snippet of the function is responsible for displaying the code on the menu link item:
function _icon_menu_get_icon_tag($tag, $icon, $classes, $title, $position, $title_wrapper, $title_wrapper_element, $title_classes) {
  $markup = '<' . $tag . ' class="fa fa-' . $icon . ' ' . $classes . '"></' . $tag . '>';
  if ($title_wrapper) {
    $title = '<' . $title_wrapper_element . ' ' . (!empty($title_classes) ? 'class="' . $title_classes . '"' : '') . '> ' . $title . '</' . $title_wrapper_element . '>';
  }
  switch ($position) {
    case 'title_before':
      $markup .= $title;
      break;
    case 'title_after':
      $markup = $title . $markup;
      break;
    case 'title_invisible':
      $markup .= '';
      break;
    case 'title_replace':
      $markup = $markup . '';
      break;
  }
  return Markup::create($markup);
}
The following screenshot shows the configuration form of the Home menu link item:
 The following screenshot shows the home page with the icon displayed as saved through the configuration:

The challenge faced during this week was to fetch the plugin id of the menu link by looking at the tree of the key/value pairs using the Devel module and find the pattern in the tree and check the plugin id against the list of plugin ids saved from the configuration form.

For the next week, I'll be implementing the Icon Filter module using the Filter API and processing the result using the regular expression to detect the pattern and replace the occurrence of the pattern with the icon.

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