Porting a Drupal 7 module to Drupal 8 (a real life example) #5- css and js modifications

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 some bit changes in the css and javascript scripts that our module brings in the Drupal 7 version.

CSS changes

So, the first thing that we are going to do is to change the reference of the arrow image (remember we changed our css and our image directory).

/* arrow icon (span tag) */
#back-top span#button , #back-top-prev span#button-prev{
  width: 50px;
  height: 50px;
  display: block;
  margin-bottom: 7px;
  background-color: #ddd; 
  background-position: center center;
  background-repeat: no-repeat;	
  background-image: url('../images/up-arrow.png') ;
  opacity:0.8;
  filter:alpha(opacity = 80);
  /* rounded corners */
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  /* background color transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

About CSS in Drupal and Internet Explorer is necessary to mention that since Drupal 8 just Internet Explorer 9 and higher versions are supported (see this this issue). So, we are going to remove IE hacks… Wiiii!

/*
Back to top button
*/
#back-top {
  position: fixed;
  bottom: 10px;
  margin-left: 20px;
  z-index:499;
}
#back-top a,  #back-top-prev a {
  width: 50px;
  display: block;
  text-align: center;
  font: 11px/100% Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbb;
  /* background color transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}

Now, we are almost ready, the last thing we are going to do is to adapt the javascript code following this issue and replacing the $(element).handle(function (){}) way by the $(element).on(handle,function (){}) way of jQuery 1.7 version and higher. We also changed the way to check if a checkbox is checked and the function that is called when a input in the form is changed.

scroll_to_top.js

(function ($, Drupal, drupalSettings) {

/**
* Toggle the visibility of the scroll to top link.
*/
  Drupal.behaviors.scroll_to_top = {

    attach: function (context) {
      // append  back to top link top body if it is not
      var exist = jQuery('#back-top').length; // exist = 0 if element doesn't exist
      if (exist == 0) { // this test is for fixing the ajax bug
        $('body').append("<p id='back-top'><a href='#top'><span id='button'></span><span id='link'>" + drupalSettings.label + "</span></a></p>");
      }

      // Preview function
      $("#scroll-to-top-form").on('change', 'input', function () {
        // building the style for preview
        var style = "<style>#scroll-to-top-prev-container #back-top-prev span#button-prev{ background-color:" + $("#edit-scroll-to-top-bg-color-out").val() + ";} #scroll-to-top-prev-container #back-top-prev span#button-prev:hover{ background-color:" + $("#edit-scroll-to-top-bg-color-hover").val() + " }</style>"
        // building the html content of preview
        var html = "<p id='back-top-prev' style='position:relative;'><a href='#top'><span id='button-prev'></span><span id='preview-link'>";
        // if label enabled display it
        if ($("#edit-scroll-to-top-display-text").prop('checked')) {
          html += $("#edit-scroll-to-top-label").val();
        }
        html += "</span></a></p>";
        // update the preview
        $("#scroll-to-top-prev-container").html(style + html);
      });

      $("#back-top").hide();
      $(function () {
        $(window).scroll(function () {
          if ($(this).scrollTop() > 100) {
            $('#back-top').fadeIn();
          } else {
            $('#back-top').fadeOut();
          }
        });

        // scroll body to 0px on click
        $('#back-top a').on('click', function () {
          $('body,html').animate({
            scrollTop: 0
          }, 800);
          return false;
        });
      });
    }
  };
})(jQuery, Drupal, drupalSettings);

And with this chapter we finished our series, I hope you enjoyed it and it works :).

Anuncios

Un comentario en “Porting a Drupal 7 module to Drupal 8 (a real life example) #5- css and js modifications

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