R / Shiny всплывающие ссылки на вкладку iframe требуют двойного щелчка, чтобы изменить вкладки и ссылку на цель на странице - PullRequest
Новая
       91

R / Shiny всплывающие ссылки на вкладку iframe требуют двойного щелчка, чтобы изменить вкладки и ссылку на цель на странице

0 голосов
/ 28 апреля 2020

Я не javascript человек, поэтому надеюсь, что я правильно сформулирую этот вопрос ... У меня есть приложение R / Shiny Leaflet, разложенное на bootstrap Fluidpage в двух частях:

  • левый столбец iFrame с тремя вкладками , заполненными xml файлами и
  • правый столбец с картой листовок с всплывающими окнами, связанными с вкладки левого столбца

Карта листовок имеет POI, у которых есть всплывающие окна со ссылкой на данные в левом столбце - при необходимости переключаясь между тремя вкладками и связываясь с указанными c частями страниц , При переходе от одной вкладки к другой возникает проблема.

Ожидаемый результат: если щелкнуть ссылку во всплывающем окне карты листовки, изменится вкладка и go на правильное место (цель) на странице.

Что происходит: Для изменения вкладки требуется один щелчок, а для перехода к нужному разделу текста требуется еще один щелчок. Существуют некоторые различия в том, как он работает в разных браузерах, но он не работает идеально ни в одном из протестированных мной (Chrome, Safari и Firefox).

Вопрос: Есть ли способ в javascript сделать все это в один клик? Если нет, могу ли я каким-то образом смоделировать двойной щелчок одним щелчком мыши?

Ниже приведен урезанный воспроизводимый пример, который я также привел здесь (нажмите на фигуру над Францией, чтобы увидеть ссылки на три вкладки): http://readingmadrid.com: 3838 / test /

ui 

ui <- fluidPage(

  fluidRow(

    column(3,
           "",

           tags$head(tags$style(type='text/css', ".nav-tabs {font-size: 10px} ")),
            tabsetPanel(id='lefttabsetPanel',selected='placestab',
                       tabPanel(value="placestab",title='LUGARES',tags$iframe(name="myiframe2",seamless="seamless",src="http://45.56.98.26:8080/exist/rest/db/madrid/xml/tds-placeography.xml",style='height:95vh; width:25vw')
                       ), 
                       tabPanel(value="peopletab",title='PERSONAS',tags$iframe(name="myiframe",seamless="seamless",src="http://45.56.98.26:8080/exist/rest/db/madrid/xml/tds-people.xml",style='height:95vh; width:25vw')
                                ),

tabPanel(value="workstab",title='OBRAS',tags$iframe(name="myiframe3",seamless="seamless",src="http://45.56.98.26:8080/exist/rest/db/madrid/xml/tds-works.xml",style='height:95vh; width:25vw')
                       )
   ))
   ,
    column(9,
           "",

  tabsetPanel(id='my_tabsetPanel',
              tabPanel('Tiempo de silencio (Global: Click on a Country)',withSpinner(leafletOutput(outputId="mymap",height = "95vh"),color="#cd0000",type = 5)
              )
  )
)
  )
)

global 

library(shiny)
library(leaflet)
# for htmlescape
library(htmltools)
# for spinner
library(shinycssloaders)

tdsfrance<- structure(list(placeref = "PLACEFRANCIA", placename = "France", 
                             placetype = "region,country", placeworks = "TDS", geometry = structure(list(
                               structure(list(list(structure(c(-2.3828125000000178,5.878906249999982,5.878906249999982,-2.3828125000000178,-2.3828125000000178,49.65329735987195,49.65329735987195,43.50063229559385,43.50063229559385,49.65329735987195 ), .Dim = c(5L, 2L)))), class = c("XY", 
                                                                                                                                   "MULTIPOLYGON", "sfg"))), class = c("sfc_MULTIPOLYGON", 
                                                                                                                                                                       "sfc"), precision = 0, bbox = structure(c(xmin = -2.3828125000000178, 
                                                                                                                                                                                                                 ymin = 43.50063229559385, xmax = 5.878906249999982, ymax = 49.65329735987195
                                                                                                                                                                       ), class = "bbox"), crs = structure(list(epsg = NA_integer_, 
                                                                                                                                                                                                                proj4string = NA_character_), class = "crs"), n_empty = 0L)), sf_column = "geometry", agr = structure(c(placeref = NA_integer_, 
                                                                                                                                                                                                                                                                                                                        placename = NA_integer_, placetype = NA_integer_, placeworks = NA_integer_
                                                                                                                                                                                                                ), .Label = c("constant", "aggregate", "identity"), class = "factor"), row.names = 39L, class = c("sf", 
                                                                                                                                                                                                                                                                                                                  "data.frame"))

server 

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

  observeEvent(input$linkclickplaces,{
    updateTabsetPanel(session, inputId="lefttabsetPanel", selected="placestab")

  })
  observeEvent(input$linkclickpeople,{
    updateTabsetPanel(session, inputId="lefttabsetPanel", selected="peopletab")

  })
  observeEvent(input$linkclickworks,{
    updateTabsetPanel(session, inputId="lefttabsetPanel", selected="workstab")

  })


### MAP 1
  output$mymap <- renderLeaflet({
    m <- leaflet() %>% 
      setView(lng=-3.6898447, lat=40.4142174, zoom=3 ) %>%
addTiles(options = providerTileOptions(noWrap = TRUE), group="Open") %>% 
addPolygons(data = tdsfrance, popup = HTML(sprintf("<div class='leaflet-popup-scrolled' style='font-size:10px;max-width:200px;max-height:150px; '><b><a href='http://45.56.98.26:8080/exist/rest/db/madrid/xml/tds-placeography.xml#PLACEFRANCIA' target='myiframe2' onclick='Shiny.onInputChange(\"linkclickplaces\",  Math.random())'>FRANCE</a> (click link):</b><br><b>Persona histórica:</b> <a href='http://45.56.98.26:8080/exist/rest/db/madrid/xml/tds-people.xml#PERSPROUST'  target='myiframe' onclick='Shiny.onInputChange(\"linkclickpeople\",  Math.random())'>Marcel Proust</a><br>
                         <b>Obras:</b> <a href='http://45.56.98.26:8080/exist/rest/db/madrid/xml/tds-works.xml#OBRAVILLERADIEUSE'  target='myiframe3' onclick='Shiny.onInputChange(\"linkclickworks\",  Math.random())'>La ville radieuse</a><br><BR></div>", SIMPLIFY = F))
        ,weight = 0.75,  group = "Países", fillColor ="gold", highlightOptions = highlightOptions(color = "orange", weight = 2, bringToFront = TRUE)) 

 })

}
...