htmlwidgets :: scaffoldWidget kullanarak yeni bir paket için harici js kütüphaneleri dahil etmek için parlak bir uygulamaya gidin

Question

slick javascript kitaplığından (http://kenwheeler.github.io/slick/) etkilendim ve onu parlak uygulamalar/flexboard sayfalarına dahil etmek istiyorum.

Ben kaygan js kütüphane dahil Ar htmlwidgets paketini kullanmak istiyorum, bu yüzden şu ...

gerçekleştirerek, online belgeler ( http://www.htmlwidgets.org/develop_intro.html) önerildiği gibi bir paket oluşturmak için deneyerek başladı

devtools::create("slick")    
setwd("slick")       
htmlwidgets::scaffoldWidget("slick") 

Ben https://github.com/kenwheeler/slick/archive/1.6.0.zip

gelen js kütüphane indirilen ve böyle biraz görünen bir dosya yapısına sahip olacak şekilde paketin yapısına yerleştirdi.

R/ 
| slick.R 

inst/ 
|-- htmlwidgets/ 
| |-- slick.js 
| |-- slick.yaml 
| |-- lib/ 
| | |-- slick-1.6.0/ 
| | | |-- slick/ 
| | | | |-- slick.min.js 
| | | | |-- slick.js 
| | | | |-- slick.css 
| | | | |-- slick-theme.css 

Benim slick.yaml dosya şöyle

...

dependencies: 
    - name: slick 
    version: 1.6.0 
    src: htmlwidgets/lib/slick-1.6.0 
    script: 
     - slick/slick.min.js 
     - slick/slick.js 
    stylesheet: 
     - slick/slick.css 
     - slick/slick-theme.css 

Ama gerçekten url'lerin bir vektör alabilir inst/htmlwidget/slick.js dosyası ve bir şekilde R/slick.R dosyayı nasıl ayarlanacağını olarak şaşırıp ve onları parlak bir uygulamada görüntüleyin. Bunun nedeni, sağlanan örnek olarak benzer bir girdi veri konseptiyle eşleşmemesidir.

tekrarlanabilirlik için ve pakette örneklerde verilmiştir aynı URL'leri kullanmaya, ben içindekiler olarak kullanmak istiyorum tutucu img url'lerin bir vektör sağlanması ediyorum. Atlı karıncadaki her görüntü için.

image_vec <- paste0("http://placehold.it/350x300?text=",seq(1:9)) 

Belki? ...

lapply(image_vec,function(y){div(img(src=y))}) 

Her zaman olduğu gibi bu konuda herhangi bir yardım çok takdir böyle bir şey kullanmak gerekebilir.

DÜZENLEME

Benim yeni slick.yaml dosyası aşağıdaki ... @ güzel cevabı yazının sonunda ... Eksik bir şey gibi görünüyor?

dependencies: 
    - name: jquery 
    version: 3.1.0 
    src: htmlwidgets/lib 
    script: 
     - jquery-3.1.0.min.js 
    - name: slick 
    version: 1.6.0 
    src: htmlwidgets/lib/slick-1.6.0 
    script: 
     - slick/slick.min.js 
     - slick/slick.js 
    stylesheet: 
     - slick/slick.css 
     - slick/slick-theme.css 

ve şimdi dosya yapısı aşağıdaki gibi görünür:

R/ 
| slick.R 

inst/ 
|-- htmlwidgets/ 
| |-- slick.js 
| |-- slick.yaml 
| |-- lib/ 
| | |-- jquery-3.1.0.min.js 
| | |-- slick-1.6.0/ 
| | | |-- slick/ 
| | | | |-- slick.min.js 
| | | | |-- slick.js 
| | | | |-- slick.css 
| | | | |-- slick-theme.css 

ve benim /inst/htmlwidgets/slick.jshtmlwidgets_0.6 bir girişim, kullanıyor aşağıdaki

İşte

HTMLWidgets.widget({ 

    name: 'slick', 

    type: 'output', 

    factory: function(el, width, height) { 

    // TODO: define shared variables for this instance 
    // create new slick object witht the given id? 
    var sl = new slick(el.id); 



    return { 

      renderValue: function(x) { 
        //add class to the div and center it 
        el.setAttribute("class",x.class); 
        el.style.margin = "auto"; 

        //add images to the div 
        content='';  
        for(var image in x.message) 
        { 
         content += '<div><img src="' + x.message[image] + '"/></div>'; 
        } 
        el.innerHTML = content; 

        //initialize the slider. 
        $(document).ready(function(){ 
         $("."+x.class).slick(x.options);  
        }); 

     }, 

     resize: function(width, height) { 

     // TODO: code to re-render the widget with a new size 

     } 

    }; 
    } 
}); 

Answer 1

benziyor: For

bağımlılıklar, yaml dosya loo Aynı ks, sadece slick yukarıdaki jQuery ekledi:

dependencies: 
    - name: jquery 
    version: 3.1.0 
    src: htmlwidgets/lib 
    script: 
     - jquery-3.1.0.min.js 
    - name: slick ... 

Bunu here almak ve lib klasöre koyabilirsiniz.Eğer esas gerekir slick.js yılında

slick <- function(message, class="slick_slider", options = list(), width = NULL, height = NULL) { 

    # forward options using x 
    x = list(
    message = message, 
    class = class, 
    options = options 
) 
... 

:

slick.R dosyada, seçenekleri eklemek için slick fonksiyonun argümanları değiştirmek ve JS koduna tüm argümanları ileri x değiştirmeniz gerekir div için/içerik resimleri eklemek için renderValue değiştirip döner bandı görüntüler:

renderValue: function(x) { 
      //add class to the div and center it 
      el.setAttribute("class",x.class) 
      el.style.margin = "auto"; 

      //add images to the div 
      content='';  
      for(var image in x.message) 
      { 
      content += '<div><img src="' + x.message[image] + '"/></div>'; 
      } 
      el.innerHTML = content; 

      //initialize the slider. 
      $(document).ready(function(){ 
      $("."+x.class).slick(x.options);  
      }); 

     } 

bunukullanarak yükledikten sonra, bir shiny app kullanabilirsiniz:

library(shiny) 
library(htmlwidgets) 
library(slick) 

server <- function(input, output) { 
    output$test_slick <- renderSlick({  
    slick(paste0("http://placehold.it/350x300?text=",1:9), 
      options=list(dots=TRUE,autoplay=TRUE)) 
}) 
} 

ui <- fluidPage(
    tags$style(HTML("body {background-color: #2682d5}")), 
    slickOutput('test_slick',width="350px",height="300px") 
) 

shinyApp(ui = ui, server = server)