Parlaklık için yaprakçık için özel olarak açılan popup'lar nasıl görüntülenir (gelişmiş)?

Question

Web uygulamaları oluşturmak için R parlak kullanıyorum ve bunların bir kısmı harika broşür özelliklerini kullanıyor.

customed ve advanced popup oluşturmak istiyorum, ancak nasıl devam edeceğimi bilmiyorum.

Biliyorsun github bu yazı için oluşturulan projede neler yapabileceğini görebilirsiniz veya doğrudan yılında, here

daha karmaşık açılır olduğunu tuhaf benim kodudur shinyapp.io bir çeşit garip bir şekilde R ve html birleştirerek ediyorum olarak ..

devam etmek daha iyi bir yolu var mı (ben server.R benim custompopup'i' tanımlayan yol bakınız)? Bu tür açılır pencereleri oluşturmak için iyi uygulamalar nelerdir? Tıklanan işaretçiye bağlı olarak bir grafik görüntülemeyi planlıyorsam, bunları önceden oluşturmalı mıyım yoksa bunları 'anında' yapabilmem mümkün mü? Bunu nasıl yapabilirim?

Bu konudaki görüşleriniz için şimdiden teşekkür ederiz, lütfen cevabınızı burada paylaşmaktan veya doğrudan github örneklerimi değiştirmekten çekinmeyin!

Selamlar

Answer 1

Bu yazı hala bazı ilgisi sanırım. İşte bu yüzden benim numaralı çözümümde, olası olası arayüz çıktılarını numaralı broşürlere ekleyebilirsiniz.

Biz bu aşağıdaki adımları yaparak elde edebilirsiniz:

• broşür standart açılır alanının içini karakteri olarak açılan UI öğesi yerleştirin. Karakterin anlamı, shiny.tag, ama sadece bir normal div. Örneğin. Klasik uiOutput("myID"), <div id="myID" class="shiny-html-output"><div> olur.

• Popup'lar, özel div için yaprakçık-açılır-bölmesini yerleştirilir. İçeriğinin değişip değişmediğini izlemek için bir EventListener ekliyoruz. (Not: açılan bu div tüm çocukların kaldırılmış demektir ki kaybolur Eğer, bu nedenle bu görünürlük hiçbir soru ama varoluş.)

• bir çocuk eklenmiş yani bir açılır pencere, olduğu zaman Görünüşe göre, biz açılır parlak içindeki tüm parlak girişleri/çıkışları bağlar. Böylece, cansız uiOutput olması gerektiği gibi içerikle doldurulur. (Bir Parlak otomatik olarak yapar ümit ederdi ama Bildiriler arka ucu tarafından doldurulur çünkü bu çıktıyı kayıt başarısız olur.)

  açılan silinir mi

• , Parlak da başarısız unbind o. Bu, sorunlu açılırsa, açılır pencereyi bir kez daha açarsanız ve bir istisna atar (çoğaltılmış kimlik). Dokümandan silindikten sonra artık bağlı değil.Bu nedenle, temel olarak, silinmiş öğeyi div numaralı bir atıma klonlayabiliriz. Burada düzgün bir şekilde bağlanamaz ve daha sonra iyice silebiliriz.

Bu geçici çözüm tüm yeteneklerini gösterir (Sanırım) örnek bir uygulaması oluşturulur ve kimsenin adapte olabilir, yeterince kolay tasarlanmıştır umuyoruz. Bu uygulamanın çoğu gösterilmek içindir, bu yüzden lütfen alakasız bölümleri olduğunu unutmayın.

library(leaflet) 
library(shiny) 

runApp(
    shinyApp(
    ui = shinyUI(
     fluidPage(

     # Copy this part here for the Script and disposal-div 
     uiOutput("script"), 
     tags$div(id = "garbage"), 
     # End of copy. 

     leafletOutput("map"), 
     verbatimTextOutput("Showcase") 
    ) 
    ), 

    server = function(input, output, session){ 

     # Just for Show 
     text <- NULL 
     makeReactiveBinding("text") 

     output$Showcase <- renderText({text}) 

     output$popup1 <- renderUI({ 
     actionButton("Go1", "Go1") 
     }) 

     observeEvent(input$Go1, { 
     text <<- paste0(text, "\n", "Button 1 is fully reactive.") 
     }) 

     output$popup2 <- renderUI({ 
     actionButton("Go2", "Go2") 
     }) 

     observeEvent(input$Go2, { 
     text <<- paste0(text, "\n", "Button 2 is fully reactive.") 
     }) 

     output$popup3 <- renderUI({ 
     actionButton("Go3", "Go3") 
     }) 

     observeEvent(input$Go3, { 
     text <<- paste0(text, "\n", "Button 3 is fully reactive.") 
     }) 
     # End: Just for show 

     # Copy this part. 
     output$script <- renderUI({ 
     tags$script(HTML(' 
      var target = document.querySelector(".leaflet-popup-pane"); 

      var observer = new MutationObserver(function(mutations) { 
      mutations.forEach(function(mutation) { 
       if(mutation.addedNodes.length > 0){ 
       Shiny.bindAll(".leaflet-popup-content"); 
       }; 
       if(mutation.removedNodes.length > 0){ 
       var popupNode = mutation.removedNodes[0].childNodes[1].childNodes[0].childNodes[0]; 

       var garbageCan = document.getElementById("garbage"); 
       garbageCan.appendChild(popupNode); 

       Shiny.unbindAll("#garbage"); 
       garbageCan.innerHTML = ""; 
       }; 
      });  
      }); 

      var config = {childList: true}; 

      observer.observe(target, config); 
     ')) 
     }) 
     # End Copy 

     # Function is just to lighten code. But here you can see how to insert the popup. 
     popupMaker <- function(id){ 
     as.character(uiOutput(id)) 
     } 

     output$map <- renderLeaflet({ 
     leaflet() %>% 
      addTiles() %>% 
      addMarkers(lat = c(10, 20, 30), lng = c(10, 20, 30), popup = lapply(paste0("popup", 1:3), popupMaker)) 
     }) 
    } 
), launch.browser = TRUE 
) 

Not: Senaryo sunucu tarafında eklenir neden Bir, merak edebilirsiniz. Karşılaştığım, aksi takdirde EventListener'ın eklenmesi başarısız oldu, çünkü Broşür haritası henüz başlatılmamış. Bazı jQuery bilgisiyle bahse girerim bu hile yapmaya gerek yoktur.

Bu sorunu çözmek zor bir işti, ama sanırım zamana değdi, şimdi Leaflet haritalarında ekstra fayda var. Bu düzeltmeyle iyi eğlenceler ve bununla ilgili sorularınız varsa lütfen sorun!