Chapter 3. Diving into the Core of impress.js

The readability and extendibility of impress.js code makes it easy for developers to provide their own implementations of the functions. Although we can use the provided syntax and create impressive visualizations, it is important to dig into the core code and explore the functionalities as developers.

The developer of impress.js wants to keep the library as simple as possible by providing the main presentation creation functionalities. In order to figure out the true potential of the library, we have to take advantage of its open source license and add new functionalities by customizing the core code. Throughout this chapter, we are going to explore the main core functions and see how we can effectively use them to create better presentations.

In this chapter, we are going to cover the following topics:

• impress.js configuration

• Understanding the impress API functions

• Automating presentations

• Creating custom transition timing

• impress.js step events

• How...

impress.js configuration

We have worked with the default configurations of impress.js up to this point. Generally, these configurations are capable enough to handle any kind of presentation or application created with the library. In certain advanced scenarios, the user might need to alter these configuration options to achieve custom functionality. Hence we are going to cover the default configurations in this section.

Default configurations

Default configurations of the impress library are located in the impress.js file using the defaults variable. The following code shows the default configuration options and their respective values:

var defaults = {
      width: 1024,
      height: 768,
      maxScale: 1,
      minScale: 0,      
      perspective: 1000,      
      transitionDuration: 1000
};

Let's get an idea about each of these options in detail:

• width: This option is used to control the width in the window scaling process. This value is converted into pixels through the code. Using a...

Understanding the impress API functions

impress.js comes up with four useful API functions that can be used to customize the functionality of presenting information in various techniques. We have already worked with the init function throughout the previous chapters. In this section, we are going to focus on three more API functions. Before we dig into the details, let's create an impress object to use API functions, using the following code:

var api = impress();

We used impress().init throughout the previous chapters to initialize presentations. In order to use API, we need the impress object as given in the preceding code. Once created we can call API methods on the impress object with ease.

The following list contains the impress.js API methods and their respective functionality:

• api.init(): This method initializes the presentation

• api.next(): This method moves to the next step of the presentation

• api.prev(): This method moves to the previous step of the presentation

• api.goto(id): This method...

Automating presentations

In real life, presentations will be used with manual controlling on most occasions since it is hard to automate presentations with predefined time intervals. You never know how much time it will take to explain a slide and whether the audience will come to you with questions expecting you to answer.

Automating presentations can be used to improve your skills as a presenter. You are not always going to get enough time to do your presentation. Sometimes, you will be bound to deliver the presentation in a limited time period. In such scenarios, you can automate the presentation using certain intervals and try to match the explanations with step transitions to get some practice for a live occasion. Here, we are going to discuss how to use API functions to automate presentations.

The first thing we have to do is create a few steps for the presentation. Since we have already created some presentations, you should be familiar with the syntax. Once the steps are completed...

Creating custom transition timing

We have to start this process by defining a custom format to store steps and transition durations. We will be using a JavaScript array which looks like the following:

var step_transitions = [
            { "slide": 1, "duration":3000 },
            { "slide": 2, "duration":5000 },
            { "slide": 1, "duration":5000 },
            { "slide": 3, "duration":5000 },
    ];

We are using step number and duration between each step transition in the given array. Only a few astute readers will notice that the step numbers are not in order. That means we can use any step number at any given time making the automation bidirectional instead of forwards or backwards.

Tip

You can create an automated flow of your presentation steps with this technique. Moving forward or backward in any given time is as simple as placing a record in the step_transitions array.

Now, let's go through the implementation of this automation technique:

$(document).ready(function(){
    var time_frame...

impress.js step events

JavaScript provides a list of in-built events and we can also use event listener functions on those events. Likewise, we can also create our own custom events. impress.js provides two custom events for handling step transition functionality. stepenter and stepleave is used in the core code to handle these events. Let's take a look at the implementation in the impress.js file:

root.addEventListener("impress:stepenter", function (event) {
    event.target.classList.remove("past");
    event.target.classList.remove("future");
    event.target.classList.add("present");
}, false);

root.addEventListener("impress:stepleave", function (event) {
    event.target.classList.remove("present");
    event.target.classList.add("past");
}, false);

In each step transition, the stepleave event of the current step is fired first, followed by the stepenter event of the next step. Inside the stepenter event, we remove the past and future classes and add the present class to make it an active...

How to use the step class

impress.js uses the step class to identify an item as a step in the presentation and apply necessary effects. At any given stage, each step has one of the three classes present, past, or future. In the previous chapters, we learned how to use these classes to provide custom functionality. Now we are going to look at the life cycle of a step using these three classes.

Each step on the impress presentation is given the class future on initialization. When the step becomes the current active step, the present class will be assigned and the future class will be removed. In the next step transition, the current step is assigned the class past and next step becomes present. After that the last step presentation will start again from the beginning and present class will be assigned. This cycle continues until you stop the presentation.

Tip

The step will have the future class only once throughout the presentation. Even if you run the presentation multiple times, the future...

Working with keyboard configurations

Having control over your presentation is essential in situations where we have time constraints for completing the presentation. We can either choose to run the presentation manually or automatically as we did in the previous section. In either case, control options play a vital role. impress.js comes in with in-built key configurations for controlling the presentation. Throughout this section, we will be covering default impress keys and how to configure your own for custom functionality.

Default keyboard configurations

The main functionality of any presentation is to step forward or backward. Impress uses Tab, the Space bar, Page Down, the down arrow, and the right arrow as the keys for navigating forward. Backward navigation is done using Page Up, the left arrow, and the up arrow keys. Let's see how keyboard configurations are created inside the code.

Inside the impress core

Keyboard configurations are created inside the impress.js file but first we'll...

Assigning custom keys for custom events

We might not be familiar with the default keys used for impress presentations. In such cases, we can assign our own keys for existing functions and new keys for new functions. Let's see how we can modify the code to add new keys to existing functionalities. Let's add the letter p for previous and n for next.

document.addEventListener("keyup", function ( event ) {
    if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode === 78 || event.keyCode === 80  ) {
        switch( event.keyCode ) {
            case 80: // letter p
            
            // key codes for default previous keys 
                     api.prev();
                     break;
            case 78:  // letter n
            
           // key codes for default next keys
                     api.next();
                     break;
        }

Each key in the keyboard has a specific...

Adding new keys for new events

We can create new functions and assign custom keys to impress presentations by modifying the existing switch statement. Earlier, I mentioned the necessity for having an overview step. We'll just add the letter o as the key for the overview step. The implementation for the overview step keys will look as follows:

case 79:
      var overview_step  = document.getElementById("overview");
      api.goto(overview_step);
      break;

First, we have to find the overview of the presentation using its ID. 79 will be the key code for the letter o. We assume that #overview will be used for the overview step of any presentation. Once we get the element, we can use the goto function to directly traverse to the overview slide.

Now, let's create two new functions to traverse to the first and last slide of the presentation, using the following code snippet:

case 70:
    api.goto(0);
    break;

case 76:
    api.goto(-1);
    break;

In the code given, 70 and 76 will be the key codes...

Handling the step click event

Apart from the keys discussed in the previous section, impress.js provides a click event on each step. We can directly move to any step by clicking on the step.

Tip

Ideally we should see more than one slide to use the click event. Generally, we will have steps covering the complete width and height of the screen, so we can only use click event in an overview step for most cases.

Let's see how the click event is handled inside the core impress code:

document.addEventListener("click", function ( event ) {
    var target = event.target;
    // find closest step element that is not active
    while ( !(target.classList.contains("step") && !target.classList.contains("active")) &&
        (target !== document.documentElement) ) {
        target = target.parentNode;
    }

    if ( api.goto(target) ) {
        event.preventDefault();
    }
}, false);

This code first gets the target element on the click event. Then, it checks if it contains the step class...

Summary

impress.js provides well organized source code for customizing existing functionalities and extending core functionalities by adding new sections. Default configuration options are provided for general purpose usage. Customizations can be made to default configurations to suit your needs.

The library is built upon four simplified API functions for presentation, initialization, and transition. We can take advantage of the API functions by specifying and calling them in our own code to provide custom behaviors, such as automating presentations.

Step transitions are build upon well organized processes using CSS classes. Each step, at any given time, is given a specific state and it can be used to add different behaviors to presentations.

Finally, we discussed keyboard configurations and managing your own keys for impress functions. Before moving on to the next chapter, I recommend you work with demo files and understand the core concepts properly.

In the next chapter, we are going to look...