Skip to main content

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


The Google Summer of Code has reached the end of the week #5 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 Menu sub-module's form with the select field having the list of icon bundles installed and they will be fetched using the Plugin API and this select field will have an ajax callback which will alter the #autocomplete_route_name value of the Search icon text field.

During this week, I've implemented the form for the menu configuration page with the icon fields attached using the hook_form_alter() hook and this form will be visible to the form with the id menu_link_content_menu_link_content_form and menu_link_edit and as these form have the plugin ID stored at different locations the following snippet of code is used to fetch the desired plugin id from the appropriate form:
$settings = '';
if ($form_id == 'menu_link_edit') {
  $settings = $form_state->getBuildInfo()['args'][0]->getPluginId();
}
if ($form_id == 'menu_link_content_menu_link_content_form') {
  $settings = $form_state->getBuildInfo()['callback_object']->getEntity()->getPluginId();
}

This form will have all the fields wrapped in the Icon details field and has the following fields:
  • Icon Bundle - Lists all the installed icon bundles as select field.
  • Search Icon - Textfield which shows the icon based on the input and the icon available in the icon bundle specified.
  • Icon Wrapper - HTML element to wrap the icon in with two options i and span.
  • Icon Wrapper Classes - Textfield for class attribute value to be used for the icon.
  • Position - Where to place the icon with the options as Before Title, After Title, Invisible Title, and Replace Title.
  • Show In Breadcrumb - Whether to show the icon in the breadcrumb.
  • Title Wrapper - Checkbox for whether to wrap the title of the menu.
  • Title Wrapper Element - HTML element to wrap the title icon with.
  • Title Wrapper Class - Textfield for class attribute value for the title wrapper.
The above form field values will be stored in the icon_menu.settings configuration and once they are saved the cache.render cache will be cleared using the following code snippet:
\Drupal::service('cache.render')->invalidateAll();
The following screenshot shows the icon menu form in the menu settings page:
The following screenshot shows the autocomplete icon list of Font Awesome Bundle when typed in the Search Icon textfield:

The challenges faced during this week was to find a way to update the #autocomplete_route_name value for the Search Icon textfield when there is a change in the Icon Bundle select field and this was achieved using the AJAX Forms by regenerating the Search Icon textfield when there is a change in the Icon Bundle select field.

For the next week, I'll be implementing the a way to alter the menu link title using the template_preprocess_hook() and display the appropriate icon saved from the settings page of individual menu link and registering a new template for the menu link using Twig.

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