Javascript 如何在ShinyApp中使用自定义htmlwidget？waypoints.js

我使用

waypoint.js

JavaScript库创建了一个

htmlwidget

。然而，我真的不知道如何将它转移到我的ShinyApp中

我想有一个由3-5块组成的图像，爆炸，类似于当你在建造家具或玩具时，鼠标移动到上面时，爆炸的零件装配列表

在我的

waypoint.R

文件中，我有以下内容：

waypoint <- function(message, width = NULL, height = NULL) {

  # forward options using x
  x = list(
    message = message
  )

  # create widget
  htmlwidgets::createWidget(
    name = 'waypoint',
    x,
    width = width,
    height = height,
    package = 'waypointR'
  )
}

waypointOutput <- function(outputId, width = '100%', height = '400px'){
  shinyWidgetOutput(outputId, 'waypoint', width, height, package = 'waypointR')
}
renderWaypoint <- function(expr, env = parent.frame(), quoted = FALSE) {
  if (!quoted) { expr <- substitute(expr) } # force quoted
  shinyRenderWidget(expr, waypointOutput, env, quoted = TRUE)
}

我的问题是当我需要将此转移到我的ShinyApp时。除了使用

waypointOutput

和

renderwypoint

之外，我不知道该去哪里

    this.explode = function() {
        $('#top').animate({
            top:topTop
        },400, function() {
            // animation complete
            $('#tempWrapper').fadeIn(250);
        });
        $('#bottom').animate({
            top:bottomTop
        },400, function() {
            // animation complete
        });
    }
    this.implode = function() {
        $('#tempWrapper').fadeOut(250);
        $('#top').animate({
            top:middleTop
        },400, function() {
            // animation complete
            $('#tempWrapper').fadeOut(0);
        });
        $('#bottom').animate({
            top:middleTop
        },400, function() {
            // animation complete
        });
    }

 // Add Waypoints
$('#middle').waypoint(function(direction) {
    if (direction == "down") {
        this.implodeHouse();
    } else {
        this.explodeHouse();
    }
}.bind(this),{
    offset:'0%'
});
$('#middle').waypoint(function(direction) {
    if (direction == "down") {
        this.explode();
    } else {
        this.implode();
    }
}.bind(this),{
    offset:'50%'
});