Presentations From My Website

Problem

I wanted to have a way to give presentations from my website so that I did not have to keep track of them in separate files. Yes, I could have included the presentations in the repository to keep track of them. However, I wanted something that I could use that would showcase my skills working with web technology.

I had looked at other websites that offered documentation platforms, which included navigating those pages like a book, but my entire website did not need to be navigated like a book or documentation website. Only specified sections of the website needed to function in this manner.

Solution

With the help of AI and the MDN Web Docs, I was able to come up with javascript code and HTML so that I can have a slide show on my website. I will be tweaking and making changes to the code over time, but this is what I cam up with.

The below code was not the first version of the code that I came up with. The code below was the first version that was used in production, but was reached after multiple interations of testing and getting the features that I wanted in the code.

After all, I would be using my website to give presentations. Need to make sure that it works and others are able to utilize it as well.

const dNone = "d-none";
const dataUrl = "data-url";
const titleElement = document.getElementById("slideTitle");
const bodyElement = document.getElementById("slideBody");
const previousLink = document.getElementById("previousLink");
const nextLink = document.getElementById("nextLink");

function addSlideShowNavigation() {
    if (bodyElement === null) {
        return;
    }

    titleElement.classList.add(dNone);
    bodyElement.classList.add(dNone);

    if (nextLink !== null) {
        nextLink.addEventListener("click", (event) => {
            event.preventDefault();
            goToNextSlide();
        });
    }

    if (previousLink !== null) {
        previousLink.addEventListener("click", (event) => {
            event.preventDefault();
            goToPreviousSlide();
        });
    }

    document.addEventListener("keyup", (event) => {
        if (event.key === 'ArrowRight') {
            goToNextSlide();
        }
        else if (event.key === 'ArrowLeft') {
            goToPreviousSlide();
        }
    });
}

function goToPreviousSlide() {
    if (bodyElement === null) {
        return;
    }
    else if (!bodyElement.classList.contains(dNone)) {
        bodyElement.classList.add(dNone);
    }
    else if (!titleElement.classList.contains(dNone)) {
        bodyElement.classList.add(dNone);
        titleElement.classList.add(dNone);
    }
    else if (previousLink !== null) {
        window.location.href = previousLink.getAttribute(dataUrl);
    }
}

function goToNextSlide() {
    if (bodyElement === null) {
        return;
    }
    else if (titleElement.classList.contains(dNone)) {
        titleElement.classList.remove(dNone);
    }
    else if (bodyElement.classList.contains(dNone)) {
        bodyElement.classList.remove(dNone);
        titleElement.classList.remove(dNone);
    } else if (nextLink !== null) {
        window.location.href = nextLink.getAttribute(dataUrl);
    }
}

addSlideShowNavigation();

When the page is loaded, the addSlideShowNavigation() method is called to enable the event listeners. The listeners are waiting for keyup event or for the "Previous" and "Next" links to be clicked. Depending on which elements are visible to the user, by checking if specific elements have a "d-none" class included, the event does the next step. This makes the webpage function similiar to PowerPoint or LibreOffice Presenter works when moving through the presentation.

The code looks for specific elements to be on the page. If those elements are not on the page, then it knows that this page is not part of a slide show, and will exit early (some say "fail fast") out of the addSlideShowNavigation() method.

I use the constants to keep from having to retype the same class names or element ids repeatedly. From a maintenance perspective, if the maintainers of Bootstrap decide to change the name of the class, I only have to update it in one place. The other places that the value is used, refer to the variable and not the string.

I set it up so that the links can be used to navigate, but also the arrow keys on the keyboard can be used. It is possible to set up other keys to navigate the presentation, like how PowerPoint and Impress do, but I do not need that many ways of accomplishing the same task. Thus limited the keys that can be used for this purpose.

The goToNextSlide() and goToPreviousSlide() methods do as they are named. A series of checks are performed to determine whether it should go to the next slide or to hide or display content on the page.

When the page is loaded, the content is hidden by default using the d-none Bootstrap class. As the user moves forward or backwards through the presentation, the necessary elements appear or disappear.

Some have asked why I do not use any JavaScript frameworks? The reason is that with the features that I need on a lot of the sites that I build and maintain, an entire framework is not needed. As you can see, the code required to implement this slide show functionality is abuot 70 lines, including the white space. Most frameworks are thousands, if not millions, of lines of code. Why have the additional over head of those thousands of lines, when the same can be accomplished with less than 100.

Testing it out, it works well. I did consider looking into making the slides and their content fade it, but that is a "nice to have" feature and not something that is required.

Technology Used

• Mkdocs (static site generator)
• Javascript
• HTML
• Bootstrap 5