Flexdashboard introJS - PullRequest
Новая
       18

Flexdashboard introJS

0 голосов
/ 26 апреля 2018

Я пытаюсь внедрить introjs в flexdashboard (блестящая среда выполнения), но я не уверен, что вызывает проблемы. Моя реализация introjs в flexdashboard ниже основана на блестящей реализации, которая прекрасно работает, см., Например, следующее: https://github.com/FrissAnalytics/shinyJsTutorials/tree/master/tutorials/materials4/BasicDemoIntroJS.

Обратите внимание, что приведенный ниже код вызывает три файла: introjs.min.css, intro.min.js и app.js, каждый из которых находится в предыдущем URL.

Ожидается, что actionButton вызовет введение, соответствующее элементам, определенным в переменной 'steps'. 

title: "IntroJS Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    social: menu
    source_code: embed
    runtime: shiny
---

```{r setup, include=FALSE}

library(devtools)
library(flexdashboard)
library(shiny)
library(jsonlite)
library(data.table)


# create help data table
steps <- data.table(step = c(1, 2), element = paste0('#step', c(1, 2)), intro = paste0('text step ', c(1, 2)), position = 'bottom')

# set help content
session$sendCustomMessage(type = 'setHelpContent', message = list(steps = toJSON(steps) ))

# listen to the action button
observeEvent(input$help,{

  # on click, send custom message to start help
  session$sendCustomMessage(type = 'startHelp', message = list(""))

})

# Include IntroJS styling
includeCSS("introjs.min.css")

# Include IntroJS library
includeScript("intro.min.js")

# Include IntroJS styling
includeCSS("app.js")


```

### Intro Elements

```{r}

fluidRow(
     column(4, div(id="step1", class="well", "element1")),
     column(4, div(id="step2", class="well", "element2")),
     column(4, div(id="step3", class="well", "element3"))
)

fluidRow(
     column(4, div(id="step4", class="well", "element4")),
     column(4, div(id="step5", class="well", "element5")),
     column(4, div(id="step6", class="well", "element6"))
)


```

### actionButton

```{r}

# action button
actionButton(inputId="help", label="start", class="btn-success")


```
...