Add custom functions to readCallBack

[jsinnett]

I'm trying to implement a simple function that updates the tooltip box size for floating elements, see below. For my intro tour, the first step for each page doesn't link to any element and has significantly more text than the rest of the "steps". Therefore, I need to increase the width of the box. Ideally, this would be more versatile and could handle sizing for specific elements but this does the trick given my limited knowledge of JS.

/* Change size of tooltip box */
function updateBoxSize(targetElement){
    targetElement = jQuery(targetElement);
    if(targetElement.hasClass('introjsFloatingElement')){
        // adjust the size of these elements
        jQuery('.introjs-tooltip').css({
            'min-width': '400px',
            'max-width': '400px'
        });
    } else {
        jQuery('.introjs-tooltip').css({
            'min-width': '300px',
            'max-width': '300px'
        });
    }
}

I noticed there's the ability to read a callback function but it appears as if it's only set up for "switchTabs". When running the following code. I get the below error. Is the intention for readCallBack to only work with built in callback functions or custom ones as well?

Thanks!

  # start introjs when button is pressed with custom options and events
  observeEvent(input$app_help,
               introjs(session,
                       events = list("onafterchange" = readCallback("updateBoxSizing")),
                       options = list(steps = steps(),
                                      "nextLabel"="Next",
                                      "prevLabel"="Previous",
                                      "skipLabel"="Done"))
  )

Warning: Error in match.arg: 'arg' should be one of “switchTabs”

This code does do what I want but it'd be preferable to keep the JS code out of server.R

  # start introjs when button is pressed with custom options and events
  observeEvent(input$app_help,
               introjs(session,
                       events = list("onafterchange" = I("
                          targetElement = jQuery(targetElement)
                          if(targetElement.hasClass('introjsFloatingElement')){
                           $('.introjs-tooltip').css('min-width', '400px').css('max-width','400px');
                              } else {
                            $('.introjs-tooltip').css('min-width', '300px').css('max-width','300px');
                             }"
                       )),
                       options = list(steps = steps(),
                                      "nextLabel"="Next",
                                      "prevLabel"="Previous",
                                      "skipLabel"="Done"))
  )