Porting a Drupal 7 module to Drupal 8 (a real life example) #4- making it work (almost)

Drupal 8’s beta version was released a few month ago and now it is time to start porting modules. To demonstrate how to do it, we’re going to use a real module called scroll_to_top, which allow us to scroll to top when we are reading an article and we want to go to the menu for example.

If you prefer watching videos, here is the screencast version of this series.

In this chapter of the series we are going to make our module work by adding correctly css and javascript files that its need to show up the button when the user scroll down.

hook_init() conversion

hook_init() is run at the beginning of the page request. It is typically used to set up global parameters that are needed later in the request. When this hook is called, the theme and all modules are already loaded in memory.

If we look at scroll_to_top.module in the Drupal 7 version we are going to see as such the following

 

chunk of scroll_to_top.module

<?php

/**
 * @file
 * Provide scroll to top link.
 */

/**
 * Implementation of hook_init().
 */
function scroll_to_top_init() {
  global $theme;
  if (variable_get('scroll_to_top_enable_admin_theme', TRUE)==TRUE || (variable_get('scroll_to_top_enable_admin_theme', TRUE)==FALSE && ($theme != variable_get('admin_theme')))) {
    drupal_add_css(drupal_get_path('module', 'scroll_to_top') . '/scroll_to_top.css', array('group' => CSS_DEFAULT, 'every_page' => TRUE));
    drupal_add_js(drupal_get_path('module', 'scroll_to_top') . '/scroll_to_top.js');
    drupal_add_js(array('scroll_to_top' => array('label' => t(variable_get('scroll_to_top_label', 'Back to top')))), 'setting');

    //building the css style
    $position = "";
    // Button position
    if (variable_get('scroll_to_top_position', 1)==1) {
      $position = "#back-top { right:40px; }";
    }
    if (variable_get('scroll_to_top_position', 1)==3) {
      $position = "#back-top { left:50%;margin:0px;}";
    }
    // Display label
    if (variable_get('scroll_to_top_display_text', TRUE)==FALSE) {
      $display = "span#link {display : none;}";
    }
    else {
      $display = "";
    }
    // background color on hover
    $bgcolor = "#back-top span#button { background-color: " . variable_get('scroll_to_top_bg_color_out', '#CCCCCC') . ";}";
    $bgcolor .= " #back-top span#button:hover {opacity:1;filter:alpha(opacity = 1);background-color: " . variable_get('scroll_to_top_bg_color_hover', '#777777') . ";}";
    $css = $position;
    $css .= $bgcolor;
    $css .= $display;
    drupal_add_css($css, 'inline');
  }
}

hook_init() was removed and Drupal 8 and replaced by services, but as you can see this module just charge css and javascript scripts inside it, so we have to replace hook_preprocess_page(&variable). It will look as such:

<?php

/**
 * @file
 * Provide scroll to top link.
 */

/**
 * Implementation of hook_init().
 */
function scroll_to_top_preprocess_page(&$variables) {

 $theme = \Drupal::theme()->getActiveTheme()->getName();
 $admin_theme = \Drupal::config('system.theme')->get('admin');

 $config = \Drupal::config('scroll_to_top.settings');

 if ($config->get('enable_admin_theme') == TRUE || ($config->get('enable_admin_theme') == FALSE && ($theme != $admin_theme))) {

  $variables['#attached']['library'][] = 'scroll_to_top/scroll_to_top';

  //building the css style
  $position = "";
  // Button position
  if ($config->get('position') == 1) {
    $position = "#back-top { right:40px; }";
  }
  if ($config->get('position') == 3) {
    $position = "#back-top { left:50%;margin:0px;}";
  }
  // Display label
  if ($config->get('display_text') == FALSE) {
    $display = "span#link {display : none;}";
  }
  else {
    $display = "";
  }

  // background color on hover
  $bgcolor = "#back-top span#button { background-color: " . $config->get('scroll_to_top_bg_color_out', '#CCCCCC') . ";}";
  $bgcolor .= " #back-top span#button:hover {opacity:1;filter:alpha(opacity = 1);background-color: " . $config->get('scroll_to_top_bg_color_hover', '#777777') . ";}";
  $css = $position;
  $css .= $bgcolor;
  $css .= $display;

  $variables['#attached']['js'][] = array('type' => 'setting', 'data' => array('label' => t($config->get('scroll_to_top_label'))));

  $variables['#attached']['css'][] = array('data' => $css, 'type' => 'inline');
 }
}

There are some differences, the first two are the way that we get the theme and admin theme name, we changed again the variable_get() by $config->get() and replaced the deprecated functions drupal_add_css() and drupal_add_js() by $variables['#attached']['library'][] = 'scroll_to_top/scroll_to_top';, with this we charge css and javascript files defined in scroll_to_top.libraries.yml (we are going to create it later), the convention to use library is <module_name>/<library_name>. And a final change is the way that we insert inline css and settings javascript script.

Now, we are going to define the library that we call in $variables['#attached']['library'][] = 'scroll_to_top/scroll_to_top';.

scroll_to_top:
  version: 1.x
  js:
    js/scroll_to_top.js: {}
  css:
    theme:
      css/scroll_to_top.css: {}
  dependecies:
    - core/jquery

As you can see, we defined the directory in a different place that they were in Drupal 7, so you have to save the files in the correct directories :).

Now, you are going to continue having some issues that we are going to cover in the next chapter.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s