Skip to main content

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 to assemble an icon field."),
 *  category = @Translation("Icons"),
 *  default_widget = "icon_field_widget",
 *  default_formatter = "icon_field_formatter"
 * )
 */
For now the Icon Field schema defines three columns and they are bundle, icon and options. The bundle and icon are of type varchar and options is of type text. The isEmpty function returns true if the bundle and icon field are not specified and the code is as follows:
/**
 * {@inheritdoc}
 */
public function isEmpty() {
  $bundle = $this->get('bundle')->getValue();
  $icon = $this->get('icon')->getValue();

  return $bundle === NULL || $bundle === '' || $icon === NULL || $icon === '';
}

The following screenshot shows the Icon Field field item in the add new field list within the Icon category:

The IconFieldWidget.php file which resides in the src\Plugin\Field\FieldType directory defines the function getInstalledIconBundles() which returns the installed and enabled icon bundles as key/value pairs and the code is as follows:
/**
 * Returns the installed Icon bundles
 */
public function getInstalledIconBundles() {
  // Get the icon bundle list
  $icon_manager = \Drupal::service('plugin.manager.icon_bundle');
  $icon_definitions = $icon_manager->getDefinitions();
  $icon_bundle = array();

  foreach($icon_definitions as $icon_definition) {
    $icon_bundle[$icon_definition['autocomplete_route']] = $icon_definition['label'];
  }

  return $icon_bundle;
}

The formElement() defines the 6 fields and they are Icon Bundle, Search Icon, Icon Wrapper, Icon Wrapper classes, Wrap Link around the Icon, and Icon Link. The Icon Bundle and Icon Wraper are select fields, Wrap Link around the Icon is a checkbox and rest all are textfields. I've gone ahead and attached the Icon Field to the Article Content type and the following screenshot shows the result:

The challenges faced during this week are understanding the Field API and mapping the components from Drupal 7 to Drupal 8 since many things have been changed like hook are replaced with Plugin system. The series of articles from the drupal documentation helped me achieve the tasks.

For the next week, I'll be continuing with the implementation of the Icon Field sub-module by writing the Twig template and rendering in the Field Formatter and also checking all the code of the whole project for potential bugs and optimizing the code.

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