Writing the javascript functions

Before we write our javascript, let's figure out what we need. So what do we really want our app really do? Let's revisit our list from earlier.

Our app will do three things.

1. Toggle between a light and dark theme, and display the name of the current theme
2. Save the selected theme for later use
3. Load the last theme selected and set it as default when the app is started

This gives us an idea of what we want our app to do conceptually, so let's work through each item to get a better idea of the specific functions we will need.

1. Toggle between a light and dark theme

All of our styles are defined in the css file and are associated with two classes: .light-theme and .dark-theme. We want to apply either style to an element (in our ui) of our choice so we will need a function that adds a theme to any element and one that removes a theme from any element.

We will need another function to tie these together as it's still unclear what theme we want to add if another theme is present. We will need a function that finds the current css theme.

2. Save the selected theme for later use

It would be great if we could save the selected theme so that when the user starts the app again, their last used theme is loaded by default. So let's write a function that saves this information somewhere.

3. Load the last theme selected and set it as default when the app is started

To apply the last used theme, we will need a function that retrieves the last used theme from wherever it is stored and apply it. So we will need some function to load our save preferences and then set it as default.

We also want to display the name of the current them on the page so we will need a function that sends the theme name to some output element.

To summarize, we will want seven functions: add a css class, remove a css class, find the css class (i.e., theme), save the current theme, load the last theme, set last theme as default theme, and a function to display the name of the current theme.

Let's start writing our functions.

The Add and Remove functions

First, we will write a function that adds our a css class to an element of our choice. We will use the function querySelector() to find our element that we name. We can access the classes of an element using classList and then apply a new class using add().

var addCSS = function(elem, css){
    var target = document.querySelector(elem);
    target.classList.add(css);
}

The remove css function works in the same way except we will use remove() instead.

var removeCSS = function(elem, css){
    var target = document.querySelector(elem);
    target.classList.remove(css);
}

Document is used as we are saying to look anywhere in our document for this element. querySelector is generally used for finding elements by class name, but it can also be used for finding elements by tag name, id, or other attribute. There are other selector methods available. See Locating DOM elements using selectors for other methods. In this example, I'm using a single function for selecting elements for simplicity and demonstration purposes only. Ideally, you would want a function that selected elements by id (using getElementById) and another function that selects elements by class name (using querySelector or querySelectorAll).

Finding the current theme

How will we know what theme is already present? To determine the current theme, we will write a function that reads the css class of the element of our choice and returns the theme. We will also want to define a default theme for the app in the event there isn't one saved or it cannot be found.

// master app default theme
var appDefaultTheme = "light-theme";

// find function
var findCSS = function(elem){
    var target = document.querySelector(elem);
    var css = Array.from(target.classList)[0];
    if(typeof css === "undefined" || css === null){
        return appDefaultTheme;
    } else {
        return css;
    }
}

To get the current css class of the element, the css classes will need to be converted into an array. Since we are only targeting the <body> element which has only one class, the function will take the first element in that array (hence the [0]). If you are targeting another element that has more classes applied, you will need to adjust position in the array that you want to select or you write another function that matches the classes with the class of your choice. Since our example is simple, we will stick to the basics.

This function also has some logic to determine if the css them is undefined (i.e., there aren't any classes applied) and to return a default (in this case light theme). The main reason for using a default theme is that shiny automatically creates the document body (<body>) as opposed to having to manually define it using tags$body(). We could easily set the default theme by calling tags$body(class="light-theme"). However, this would produce nested <body> tags. which isn't ideal and can cause some problems with selector paths. Instead, we will leave out the tags$body() and target the <body> tag with javascript.

Save and load functions

Next, we will write two functions that handle the storage and retrival of our theme preferences. We will write a generic function that saves whatever value we pass to localStorage and a function that loads the value from localStorage. We will use setItem for saving and getItem for loading.

It's important to note that there are differences in storage methods. The localStorage method is fine for very basic information (like setting default themes), but it isn't really a good method for sensitive information. See this dev.to post on localStorage vs sessionStorage for more information and links for further reading.

Here's our save function.

var save = function(value){
    localStorage.setItem("theme", value);
}

And the load function.

var load = function(){
    return localStorage.getItem("theme");
}

For more information, please vist Mozilla's Using the Web Storage API article.

Set default theme function

Now that we have written our save and load functions, we can write our set default function. This function will load the information and apply the theme according to what was saved (using our addCSS function). We will also want some logic to set a default theme (to the element of our choice) if there isn't any information in our local storage. Here's the function.

var setDefault = function(elem){
    var defaultTheme = load();
    if(typeof defaultTheme === "undefined" || defaultTheme === null){
        addCSS(elem, appDefaultTheme);
    } else {
        addCSS(elem, defaultTheme);
    }
}

Display current theme name

Finally, we want to display the name of the theme in our app. We want to select the element of our choice and update it's content with the name of the current theme. We will use a different selector method from our add and remove functions. This time we will use getElementById and use .innerHTML to set the text of the element.

var setInnerHTMLById = function(id, string){
    var elem = document.getElementById(id);
    elem.innerHTML = string;
}

There we have it! All of our javascript functions are written.

Module Patterns

Before we move on to registering our functions, I want to touch on another aspect of our js code.

If you look in the index.js file, you will notice that all of the js functions are assigned to a few objects styles, file, and text. The functions are structured in a Revealing Module Pattern which allows us to group similar functions into a single object and then use them as needed. This approach is recommended as it's good for decluttering the namespace and for resuability of functions across projects. Once you have written a series of modules, you can load your modules and start writing your javascript as normal without the need for rewritting or copy/pasting across projects.

These functions can be called by first specifying the object, and then the function. For example:

// use the save function
file.save(...);

// use the add css function
styles.addCSS(...);

// use more than one 
function myfunction(...){
    styles.addCSS(...);
    text.setInnerHTMLById(...);
}

shiny.addCustomMessageHandler("setDefaultTheme", function(value){

    // run our set default function - the value is the name of the element we want to apply our style to
    file.setDefault(value) 

    // find the name of the theme applied and update text
    var currentTheme = styles.findCSS(value);
    text.setInnerHtmlById("themeStatus", currentTheme);

})

Shiny.addCustomMessageHandler("toggleTheme", function(value){

   // find theme and init a var to write the name of the new theme
    var currentTheme = styles.findCSS(value);
    var newTheme = '';

    // run logic
    if (currentTheme === "dark-theme") {
        styles.removeCSS(value, "dark-theme");
        styles.addCSS(value, "light-theme");
        newTheme = "light-theme";
    } else {
        styles.removeCSS(value, "light-theme");
        styles.addCSS(value, "dark-theme");
        newTheme = "dark-theme";
    }

    // save theme and update output element
    text.setInnerHtmlById("themeStatus", newTheme);
    file.save(newTheme);

});

server <- function(input, output, session){

    # set default theme (only on app startup)
    session$sendCustomMessage("defaultTheme", "body")

    # event when button is clicked
    observeEvent(input$toggle, {
        session$sendCustomMessage("toggleTheme", "body")
    })
}

install.packages("shiny")
shiny::runGithub(repo="shinyAppTutorials", username="davidruvolo51", subdir="js-handlers")