diff --git a/.Rbuildignore b/.Rbuildignore index f1e03bf..0bcdb48 100644 --- a/.Rbuildignore +++ b/.Rbuildignore @@ -10,5 +10,3 @@ ^.*/rsconnect$ ^cran-comments\.md$ ^vignettes$ - - diff --git a/DESCRIPTION b/DESCRIPTION index 5636635..0a104fc 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -31,7 +31,7 @@ Imports: methods URL: https://github.com/ijlyttle/bsplus BugReports: https://github.com/ijlyttle/bsplus/issues -RoxygenNote: 5.0.1 +RoxygenNote: 6.0.0.9000 Suggests: testthat, shiny, covr, diff --git a/_pkgdown.yml b/_pkgdown.yml index cdba3b3..21243f3 100644 --- a/_pkgdown.yml +++ b/_pkgdown.yml @@ -116,6 +116,7 @@ articles: - collapse - accordion - accordion_sidebar + - general_accordion_sidebar - tooltip_popover - modal - carousel diff --git a/docs/articles/accordion.html b/docs/articles/accordion.html index 96b3487..615c538 100644 --- a/docs/articles/accordion.html +++ b/docs/articles/accordion.html @@ -1,8 +1,20 @@ -Accordion • bsplus + + + + + +Accordion • bsplus + + + + + + +
-
+ + + + + + +
@@ -41,7 +60,7 @@

Accordion

Ian Lyttle

-

2017-01-26

+

2017-02-05

@@ -51,10 +70,15 @@

2017-01-26

library("bsplus")

The bs_accordion() family is an extension of the bs_collapse() family. An accordion is a set of collapsible panels constructed such that one panel, at most, is open at a time.

There are three functions in this family:

-

The bs_accordion() function takes a single argument, a unique id for the accordion frameowrk.

+ +

The bs_accordion() function takes a single argument, a unique id for the accordion frameowrk.

To add a panel to an accordion, use the bs_append() function. Its arguments are the tag of the accordion, the title of the panel, which will generally be text, and the content of the panel, which can be HTML.

The appearance of panels can be modified using the bs_set_opts() function. Its first argument is the accordion tag, its other arguments are panel_type, which controls the appearance of following panels, and use_heading_link, which, if TRUE, makes the entire headings of following panels of into links, rather than just the title.

The default panel_type is "default", the default for use_heading_link is FALSE.

@@ -69,7 +93,8 @@

2017-01-26

Rhythm guitar, vocals
@@ -77,7 +102,8 @@

<

Bass guitar, vocals
@@ -85,7 +111,8 @@

<

Lead guitar, vocals
@@ -93,7 +120,8 @@

<

Drums, vocals
@@ -117,7 +145,8 @@

<
@@ -125,7 +154,8 @@

@@ -133,7 +163,8 @@

@@ -141,7 +172,8 @@

@@ -149,7 +181,8 @@

@@ -157,7 +190,8 @@

@@ -165,7 +199,8 @@

-

Reference

+

+ Reference

For more information, please see the Bootstrap JavaScript page.

@@ -174,8 +209,10 @@

Contents

-
+ +

@@ -189,6 +226,8 @@

Contents

Site built with pkgdown.

-
+ +
- + + diff --git a/docs/articles/accordion_sidebar.html b/docs/articles/accordion_sidebar.html index 15b9846..7dd73d8 100644 --- a/docs/articles/accordion_sidebar.html +++ b/docs/articles/accordion_sidebar.html @@ -1,8 +1,20 @@ -Accordion Sidebar • bsplus + + + + + +Accordion Sidebar • bsplus + + + + + + +
-
+ +

+ +
+ +
+
@@ -41,7 +60,7 @@

Accordion Sidebar

Ian Lyttle

-

2017-01-26

+

2017-02-05

@@ -51,10 +70,15 @@

2017-01-26

library("bsplus")

An accordion-sidebar can be useful to provide another dimension for your shiny apps. For example, you can use shiny navbarPage() for major groupings, then bs_accordion_sidebar() panels for minor groupings within each major grouping.

There are three functions in this family:

-

The bs_accordion_sidebar() function is used to instantiate the accordion sidebar. Its argument, are a unique id, Boostrap column-specifications spec_side and spec_main, and an indication of the relative position of the side panel to the main panel.

+ +

The bs_accordion_sidebar() function is used to instantiate the accordion sidebar. Its argument, are a unique id, Boostrap column-specifications spec_side and spec_main, and an indication of the relative position of the side panel to the main panel.

To add a panel set to an accordion sidebar, use the bs_append() function. Its arguments are the tag of the accordion sidebar, the title_side of the side panel, which will generally be text, the content_side of the side panel, which can be HTML (might be shiny inputs), and the content_main of the main panel, which can also be HTML (might be shiny outputs).

The appearance of panel sets can be modified using the bs_set_opts() function. Its first argument is the accordion sidebar tag, its other arguments are panel_type_active and panel_type_inactive, which control the appearance of following panels, and use_main_enclosure, which, if TRUE, encloses the content of the main panel in an HTML <panel/>.

The default panel_type_active is "success", for panel_type_inactive it is "primary", the default for use_main_enclosure is TRUE.

@@ -85,7 +109,8 @@

2017-01-26

Rhythm guitar, vocals
@@ -93,7 +118,8 @@

Bass guitar, vocals
@@ -101,7 +127,8 @@

Lead guitar, vocals
@@ -109,7 +136,8 @@

Drums, vocals
@@ -140,8 +168,8 @@

-

As you can see, the sidebar acts like a bs_accordion(), but there are a couple of important differences. First, a sidebar panel’s class changes according to its being open or not. Second, the state (show-hide) of each component’s main panel is determined by the state of its side panel.

-

When showing him a preview of this work, Carson Sievert asked a crazy question, “can you nest those things?” Well, apparently you can.

+

As you can see, the sidebar acts like a bs_accordion(), but there are a couple of important differences. First, a sidebar panel’s class changes according to its being open or not. Second, the state (show-hide) of each component’s main panel is determined by the state of its side panel.

+

When showing him a preview of this work, Carson Sievert asked a crazy question, “can you nest those things?” Well, apparently you can.

Note that the outer accordion-sidebar has use_main_enclosure set to FALSE, while each inner accordion-sidebar has it set to TRUE.

bs_accordion_sidebar(id = "the_beatles") %>%
   bs_set_opts(use_main_enclosure = FALSE) %>%
@@ -214,7 +242,8 @@ 

 

 
 

 

@@ -222,7 +251,8 @@ 

 
 

 

@@ -230,7 +260,8 @@ 

 
 

 

@@ -238,7 +269,8 @@ 

 
 

 

@@ -253,7 +285,8 @@ 

 

 
 

 
1960-1969

@@ -261,7 +294,8 @@ 

 

 
 

 
1968-1980

@@ -289,7 +323,8 @@ 

 

 
 

 
1960-1970

@@ -297,7 +332,8 @@ 

 

 
 

 
1970-

@@ -325,7 +361,8 @@ 

 

 
 

 
1960-1970

@@ -333,7 +370,8 @@ 

 

 
 

 
1968-2001

@@ -361,7 +399,8 @@ 

 

 
 

 
1962-1970

@@ -369,7 +408,8 @@ 

 

 
 

 
1970-

@@ -406,7 +446,7 @@ 

+
+

   

 
   
 
-      

+      
+

 
-  
+  
+
diff --git a/docs/articles/carousel.html b/docs/articles/carousel.html
index 5781ea2..ce529a3 100644
--- a/docs/articles/carousel.html
+++ b/docs/articles/carousel.html
@@ -1,8 +1,20 @@
 
-Carousel • bsplus
+
+
+
+
+
+Carousel • bsplus
+
+
+
+
+
+
+
     

       

-

+      
+

+
+  

+
+

+
 
       
       

@@ -41,7 +60,7 @@
       
Carousel

                         
Ian Lyttle

             
-            
2017-01-26

+            
2017-02-05

           

 
     
@@ -50,9 +69,13 @@ 
2017-01-26

 
library("htmltools")
 library("bsplus")

 
A carousel can be useful to cycle through slides with related content. There like the accordion, there are two main functions:

-
  • bs_carousel(), used to establish the carousel framework, with arguments id, use_indicators, for the “dots” indicating the slide, and use_controls, for the directional controls at either side.
    • 
-
  • bs_append(), used to add a slide containing content, which is HTML, and an optional caption.
    • 
-
The content and caption arguments can be composed using the helper functions bs_carousel_image(), which returs a centered-image tag, and bs_carousel_caption() with text arguments title and body.

+
    
+
  • 
+bs_carousel(), used to establish the carousel framework, with arguments id, use_indicators, for the “dots” indicating the slide, and use_controls, for the directional controls at either side.
    • 
+
  • 
+bs_append(), used to add a slide containing content, which is HTML, and an optional caption.
    • 
+

+
The content and caption arguments can be composed using the helper functions bs_carousel_image(), which returs a centered-image tag, and bs_carousel_caption() with text arguments title and body.

 
bs_carousel(id = "the_beatles", use_indicators = TRUE) %>%
   bs_append(
     content = bs_carousel_image(src = "img/john.jpg"),
@@ -71,11 +94,13 @@ 
2017-01-26

     caption = bs_carousel_caption("Ringo Starr", "Drums, vocals")
   ) 

 
 

-
 Reference

+

+ Reference

 
For more information, please see the Bootstrap JavaScript page.

 

 

@@ -150,8 +182,10 @@ 
 
         

       
Contents

-      

+      
+

       

 
 

@@ -165,6 +199,8 @@ 
Contents

   
Site built with pkgdown.

 

 
-      

+      
+

 
-  
+  
+
diff --git a/docs/articles/collapse.html b/docs/articles/collapse.html
index fb2bb48..0891d80 100644
--- a/docs/articles/collapse.html
+++ b/docs/articles/collapse.html
@@ -1,8 +1,20 @@
 
-Collapse • bsplus
+
+
+
+
+
+Collapse • bsplus
+
+
+
+
+
+
+
     

       

-

+      
+

+
+  

+
+

+
 
       
       

@@ -41,7 +60,7 @@
       
Collapse

                         
Ian Lyttle

             
-            
2017-01-26

+            
2017-02-05

           

 
     
@@ -67,7 +86,8 @@ 
2017-01-26

   bs_attach_collapse("yeah")
-

Reference

+

+ Reference

For more information, please see the Bootstrap JavaScript page.

@@ -76,8 +96,10 @@

Contents

-
+ +

@@ -91,6 +113,8 @@

Contents

Site built with pkgdown.

-
+ +
- + + diff --git a/docs/articles/general_accordion_sidebar.html b/docs/articles/general_accordion_sidebar.html new file mode 100644 index 0000000..c088211 --- /dev/null +++ b/docs/articles/general_accordion_sidebar.html @@ -0,0 +1,292 @@ + + + + + + + +Generalized Accordion Sidebar • bsplus + + + + + + +
+
+ + + +
+
+
+

Generalized Accordion Sidebar

+

Ian Lyttle

+ +

2017-02-05

+
+ + + +
+
library("bsplus")
+

Our first task is to see if we can nest accordions. Imagine that this will be what we would see as the sidebar.

+
bs_accordion(id = "beatles") %>%
+  bs_append(
+    title = "John Lennon",
+    content = 
+      bs_accordion(id = "john") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1960-1969"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1968-1980"
+      ) 
+  ) %>%
+  bs_append(
+    title = "Paul McCartney",
+    content = 
+      bs_accordion(id = "paul") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1960-1970"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1970-"
+      ) 
+  ) %>%  
+  bs_append(
+    title = "George Harrison",
+    content = 
+      bs_accordion(id = "george") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1960-1970"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1968-2001"
+      ) 
+  ) %>%
+  bs_append(
+    title = "Ringo Starr",
+    content =
+      bs_accordion(id = "ringo") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1962-1970"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1970-"
+      ) 
+  )
+
+
+ +
+
+
+
+ +
+
1960-1969
+
+
+
+ +
+
1968-1980
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
1960-1970
+
+
+
+ +
+
1970-
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
1960-1970
+
+
+
+ +
+
1968-2001
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
1962-1970
+
+
+
+ +
+
1970-
+
+
+
+
+
+
+
+

It appears that we can nest accordions!

+
+
+ + + +
+ + +
+

Developed by Ian Lyttle.

+
+ +
+

Site built with pkgdown.

+
+ +
+
+ + + diff --git a/docs/articles/index.html b/docs/articles/index.html index 35c1da5..4e2840a 100644 --- a/docs/articles/index.html +++ b/docs/articles/index.html @@ -75,7 +75,7 @@
-

Vignette reference version 0.1.0

+

Vignette reference version 0.1.0.9000

@@ -97,6 +97,7 @@

Function families

  • Accordion
  • Carousel
  • Collapse
    • +
  • Generalized Accordion Sidebar
  • Modals
  • Shiny-input help links
  • Tooltips and popovers
    • diff --git a/docs/articles/modal.html b/docs/articles/modal.html index 06ac79a..13af3ee 100644 --- a/docs/articles/modal.html +++ b/docs/articles/modal.html @@ -1,8 +1,20 @@ -Modals • bsplus + + + + + +Modals • bsplus + + + + + + +
    -
    + +
    + +
    + +
    +
    @@ -41,7 +60,7 @@

    Modals

    Ian Lyttle

    -

    2017-01-26

    +

    2017-02-05

    @@ -56,7 +75,7 @@

    2017-01-26

    @@ -75,9 +94,9 @@ 
    tags$button(type = "button", class = "btn btn-default", "New button, same modal") %>%
   bs_attach_modal(id_modal = "modal")
    -

    Let’s look at a more-involved example using all of the arguments for bs_modal().

    +

    Let’s look at a more-involved example using all of the arguments for bs_modal().

    In the example above, body is text; usually, you will want the body to HTML. One way to compose the HTML for the body is to write it as a Markdown file, then use the helper function shiny::includeMarkdown() to render it into into HTML.

    -

    The default footer is simply a “Close” button, which is made using the helper function bs_modal_closebutton(). You can compose your own footer, using this function to customize your close-button.

    +

    The default footer is simply a “Close” button, which is made using the helper function bs_modal_closebutton(). You can compose your own footer, using this function to customize your close-button.

    Finally, the size can be "small", "medium", or "large" - the defualt is "medium".

    bs_modal(
   id = "modal_markdown", 
@@ -94,17 +113,20 @@ 
 
    
 
    
 
 
 
    
-
    4th-level headers work well
    
+
    
+
    4th-level headers work well
    
 
 
    We can do our regular Markdown stuff in modal windows.
    
 
-
    • \(F = ma\)
      • 
+
        
+
      • \(F = ma\)
        • 
 
      • \(E = mc^2\)
        • 
-
    
+
+
    
 
    
 
 Hello!
@@ -118,7 +140,8 @@ 
   bs_attach_modal(id_modal = "modal_markdown")
    -

    Reference

    +

    + Reference

    For more information, please see the Bootstrap JavaScript page.

    @@ -127,8 +150,10 @@

    Contents

    -
    + + @@ -142,6 +167,8 @@

    Contents

    Site built with pkgdown.

    - + + - + + diff --git a/docs/articles/overview.html b/docs/articles/overview.html index 89999ed..123f532 100644 --- a/docs/articles/overview.html +++ b/docs/articles/overview.html @@ -1,8 +1,20 @@ -Overview • bsplus + + + + + +Overview • bsplus + + + + + + +
    -
    + + + + + + +
    @@ -41,25 +60,30 @@

    Overview

    Ian Lyttle

    -

    2017-01-26

    +

    2017-02-05

    One of the goals of bsplus is to provide access to some useful Bootstrap components for rmarkdown html-documents and shiny apps:

    -

    • collapse

      • +

      Another goal is to provide some tools to help build shiny apps.

      - +

      Another goal is to provide some tools to help build shiny apps.

      +

      The philosophy of this package is to allow you to work with Bootstrap JavaScript components using HTML, while smoothing some of the rough edges. Even though some of the functions here are useful only in shiny apps, please note that none of the functions in this package depend on the server side of shiny - only the UI side.

      +
    +

    The philosophy of this package is to allow you to work with Bootstrap JavaScript components using HTML, while smoothing some of the rough edges. Even though some of the functions here are useful only in shiny apps, please note that none of the functions in this package depend on the server side of shiny - only the UI side.

    -

    Collapse

    +

    + Collapse

    A collapsible element is attached to a button or link, which is used to show (or hide) the element.

    The first step is to create the collapsible element, using bs_collapse() with an id. By default, this element is initially hidden.

    bs_collapse(
@@ -76,12 +100,17 @@ 
     To see more of the collapse function-family, please see its article.
    -

    Accordion

    +

    + Accordion

    An accordion is a set of collapsible panels constructed such that one panel, at most, is open at a time.

    There are two main functions:

    -
    • bs_accordion(), used to establish the accordion framework
      • -
    • bs_append(), used to add a panel (title and content) to the accordion.
      • -

    Generally, title will be text, and content can be HTML.

    +
      +
    • +bs_accordion(), used to establish the accordion framework
      • +
    • +bs_append(), used to add a panel (title and content) to the accordion.
      • +
    +

    Generally, title will be text, and content can be HTML.

    bs_accordion(id = "meet_the_beatles") %>%
   bs_append(title = "John", content = "Rhythm guitar, vocals") %>%
   bs_append(title = "Paul", content = "Bass guitar, vocals") %>%
@@ -90,7 +119,8 @@ 
     
 
    
 
@@ -100,7 +130,8 @@ 
    
 
@@ -110,7 +141,8 @@ 
    
 
@@ -120,7 +152,8 @@ 
    
 
@@ -129,15 +162,20 @@ 
    bs_accordion() function-family, including how to make the entire banner “clickable” and how to change the class of the panels, please see its article.
    
+
    To see more of the bs_accordion() function-family, including how to make the entire banner “clickable” and how to change the class of the panels, please see its article.
    
 
    
 
    
-
     Accordion sidebar
    
+
    
+ Accordion sidebar
    
 
    An accordion-sidebar can be useful to provide another dimension for your shiny apps. For example, you can use shiny navbarPage() for major groupings, then bs_accordion_sidebar() panels for minor groupings within each major grouping.
    
 
    There like the accordion, there are two main functions:
    
-
    • bs_accordion_sidebar(), used to establish the accordion-sidebar framework
      • 
-
    • bs_append(), used to add a side panel (title_side and content_side) and a main panel (content_main) to the accordion sidebar
      • 
-
    Generally, title_side will be text, content_side can be HTML (shiny inputs), as well as content_main (shiny outputs).
    
+
      
+
    • 
+bs_accordion_sidebar(), used to establish the accordion-sidebar framework
      • 
+
    • 
+bs_append(), used to add a side panel (title_side and content_side) and a main panel (content_main) to the accordion sidebar
      • 
+
    
+
    Generally, title_side will be text, content_side can be HTML (shiny inputs), as well as content_main (shiny outputs).
    
 
    bs_accordion_sidebar(id = "beatles") %>%
   bs_append(
     title_side = "John Lennon", 
@@ -164,7 +202,8 @@ 
     <
 
    
 
    
 
 
    
 
    Rhythm guitar, vocals
    
@@ -172,7 +211,8 @@ 
    
 
    
 
 
    
 
    Bass guitar, vocals
    
@@ -180,7 +220,8 @@ 
    
 
    
 
 
    
 
    Lead guitar, vocals
    
@@ -188,7 +229,8 @@ 
    
 
    
 
 
    
 
    Drums, vocals
    
@@ -219,7 +261,7 @@ 
    
 
    
 
    
-
    As you can see, the sidebar acts like a bs_accordion(), but there are a couple of important differences. First, a sidebar panel’s class changes according to its being open or not. Second, the state (show-hide) of each component’s main panel is determined by the state of its side panel.
    
+
    As you can see, the sidebar acts like a bs_accordion(), but there are a couple of important differences. First, a sidebar panel’s class changes according to its being open or not. Second, the state (show-hide) of each component’s main panel is determined by the state of its side panel.
    
 
    This extra functionality is implemented using some JavaScript code inserted into your page using the use_bs_accordion_sidebar() function. You will have to do this only once per page; I have found that it works best to include after all of the accordion-sidebars are defined, perhaps as one of the last elements in a shiny UI.
    
 
    use_bs_accordion_sidebar()
    
 
    To see more of the bs_accordion_sidebar() function-family, including how to change the active/inactive classes, size and placement of the sidebar and main panels, and formatting of the main panel, please see its article. You can also see this in action in a shiny app.
    
 
    
 
+
+
    
+
 
       
       
    
@@ -41,7 +60,7 @@
       
    Shiny-input help links
    
                         
    Ian Lyttle
    
             
-            
    2017-01-26
    
+            
    2017-02-05
    
           
    
 
     
@@ -49,11 +68,13 @@ 
    2017-01-26
    
 
    
 
    library("htmltools")
 library("bsplus")
    
-
    Let’s consider a shiny input. One way to put unobtrusive help into a shiny input is to embed a help icon into its label, having associated the help icon with the help documentation. This suggests three steps:
    
-
    1. Create a help icon. You can use shiny::icon() or shiny_iconlink() (which simply wraps the icon in an HTML link).
      2. 
+
      Let’s consider a shiny input. One way to put unobtrusive help into a shiny input is to embed a help icon into its label, having associated the help icon with the help documentation. This suggests three steps:
      
+
        
+
      1. Create a help icon. You can use shiny::icon() or shiny_iconlink() (which simply wraps the icon in an HTML link).
        2. 
 
      2. Associate the help icon with your help documentation. Here, you can use bs_embed_tooltip(), bs_embed_popover() or bs_attach_modal().
        3. 
 
      3. Embed your help icon into the shiny input. You can use shinyInput_label_embed().
        4. 
-
      Here’s an example of everything put together:
      
+
    
+
    Here’s an example of everything put together:
    
 
    selectInput(
   inputId = "letter",
   label = "Label with popover help",
@@ -65,14 +86,17 @@ 
    2017-01-26
    
     title = "Letter", content = "Choose a favorite", placement = "left"
   )
 )
    
-
    As of writing, I don’t know how to include operable shiny inputs in an html document, outside of the shiny runtime. To see these functions in action, you can refer to this shiny app, which you can also run locally using:
    
+
    As of writing, I don’t know how to include operable shiny inputs in an html document, outside of the shiny runtime. To see these functions in action, you can refer to this shiny app, which you can also run locally using:
    
 
    shiny::runApp(system.file("shiny", "tooltip_popover_modal", package = "bsplus"))
    
 
    
-
    
+
+
    
 
    To promote consistency, the following convention is proposed:
    
-
    • For links (activated by clicking), embed a shiny::icon("info-circle"), the default for shiny_iconlink().
      • 
+
        
+
      • For links (activated by clicking), embed a shiny::icon("info-circle"), the default for shiny_iconlink().
        • 
 
      • For elements activated by hovering, embed a shiny::icon("info").
        • 
-
    
+
+
    
   
    
 
   
 
-      
    
+      
+
    
 
-  
+  
+
diff --git a/docs/articles/tooltip_popover.html b/docs/articles/tooltip_popover.html
index a3da4f4..e913198 100644
--- a/docs/articles/tooltip_popover.html
+++ b/docs/articles/tooltip_popover.html
@@ -1,8 +1,20 @@
 
-Tooltips and popovers • bsplus
+
+
+
+
+
+Tooltips and popovers • bsplus
+
+
+
+
+
+
+
     
    
       
    
-
    
+      
+
    
+
+  
    
+
+
    +
    @@ -41,7 +60,7 @@

    Tooltips and popovers

    Ian Lyttle

    -

    2017-01-26

    +

    2017-02-05

    @@ -68,7 +87,8 @@

    2017-01-26

    -

    Reference

    +

    + Reference

    For more information, please see the Bootstrap JavaScript page on tooltips or popovers.

    @@ -77,8 +97,10 @@

    Contents

    -
    + +

    @@ -92,6 +114,8 @@

    Contents

    Site built with pkgdown.

    - + + - + + diff --git a/docs/index.html b/docs/index.html index dc78bf0..8358e73 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,8 +1,20 @@ -Adds Functionality to the R Markdown + Shiny Bootstrap Framework • bsplus + + + + + +Adds Functionality to the R Markdown + Shiny Bootstrap Framework • bsplus + + + + + + +
    -
    + + + + + + +
    -

    bsplus

    +

    + bsplus

    @@ -53,13 +73,15 @@

    Introduction

    -

    To see all of this in action, you are referred to the overview article at this package’s pkgdown site.

    +

    To see all of this in action, you are referred to the overview article at this package’s pkgdown site.

    The goals of this package are:

    -
    • to provide a framework to use Bootstrap’s JavaScript-markup API: http://getbootstrap.com/javascript/ +
        +
      • to provide a framework to use Bootstrap’s JavaScript-markup API: http://getbootstrap.com/javascript/
      • to provide functions that work for both rmarkdown HTML documents and for shiny apps - the only exceptions are some functions that work with only the UI side of shiny.
      • to promote composition of HTML using pipes.
        • -
      +
    +

    Highlights

    @@ -75,14 +97,15 @@

    Function families

    In this package, there are function families for:

    -
    + +

    Grammar and vocabulary

    One of the goals of this package is to implement consistent grammar and vocabulary. To keep the namespace clean(er), many of the functions have the prefix bs_.

    -

    Let’s start with the conventions used to name the functions:

    -

    • bs_noun(), used to create a tag. For example, use bs_accordion() to create an accordion panel-set.

      • +

      Let’s start with the conventions used to name the functions:

      +
        +

      • bs_noun(), used to create a tag. For example, use bs_accordion() to create an accordion panel-set.

      • bs_verb(tag, ...), used to take an action on a tag. For example, use bs_append() to append a panel to an accordion panel-set.

      • bs_verb_noun(tag, ...) used to take an action on a tag using a thing. For example, use bs_embed_tooltip() to embed a tooltip into a tag.

      • use_bs_noun() used to add a bit of Javascript to your HTML, just like the shinyjs function useShinyJS(). This is necessary for bs_accordion_sidebar(), bs_embed_tooltip(), or bs_embed_popover() to work properly.

        • -
      +
    +

    Nouns

    Often we use the words element and tag interchangeably - we are talking about HTML elements. In the grammar of this documentation (and package), it can be useful to think about direct objects and indirect objects, so the word tag is used to denote direct objects, and the words element or thing are used to denote indirect objects.

    @@ -121,7 +149,8 @@

    Verbs

    -
    • +
        +
      • bs_append(tag, ...) used to append something to a tag, perhaps a panel into an accordion-group.
      • bs_attach_foo(tag, ...) used to attach the id of an element (foo) to another tag, for example, you could create a modal window using bs_modal(), then you could attach the id of the modal window to the tag using bs_attach_modal() @@ -131,11 +160,14 @@

      • bs_set_opts(tag, ...) used to set some options for the items yet to be appended to a tag.
        • -

      Let’s consider the differences between append, attach, and embed:

      -
      • You can append more than one element to a tag, i.e., you could append multiple panels to an accordion-group.
        • +
      +

      Let’s consider the differences between append, attach, and embed:

      +
        +
      • You can append more than one element to a tag, i.e., you could append multiple panels to an accordion-group.
      • You can attach only one id of a thing to a tag. When we are attaching, we attach the id of an element, not the element itself. However, we can attach an id of an element to more than one tag.
        • -
      • You can embed only one thing into a tag. i.e., into a given tag, you can embed a tooltip or a popover, modifying the tag’s attributes and setting a child element in the tag.
        • -
    +
  • You can embed only one thing into a tag. i.e., into a given tag, you can embed a tooltip or a popover, modifying the tag’s attributes and setting a child element in the tag.
    • + +

    @@ -151,20 +183,31 @@

    + + +

    Dev status

    +
      +
    • Travis-CI Build Status
      • +
    • Coverage Status
      • +
    • CRAN_Status_Badge
      • +
    + +
    @@ -176,6 +219,8 @@

    Developers

    • Ian Lyttle
      pkgdown.

    -
    + + - + + diff --git a/docs/news/index.html b/docs/news/index.html index 0948e02..f24e83e 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -82,17 +82,26 @@

    Change log All releases

    +
    +

    + bsplus 0.1.0.9000

    +
      +
    • version bump for development
      • +
    +

    bsplus 0.1.0

    -
    + +
    @@ -100,6 +109,7 @@

    Contents

    diff --git a/docs/reference/bs_set_data.html b/docs/reference/bs_set_data.html index cfffb09..b56325e 100644 --- a/docs/reference/bs_set_data.html +++ b/docs/reference/bs_set_data.html @@ -133,10 +133,8 @@

    See a

    Examples

    library("htmltools")
-library("lubridate")
    #> 
-#> Attaching package: ‘lubridate’
    #> The following object is masked from ‘package:base’:
-#> 
-#>     date
    
+library("lubridate")
+
 tags$div() %>%
   bs_set_data(
     target = "#foobar",
diff --git a/docs/reference/index.html b/docs/reference/index.html
index ffe0455..abef1d0 100644
--- a/docs/reference/index.html
+++ b/docs/reference/index.html
@@ -78,7 +78,7 @@
   
    
     
    
       
    Function reference
    
-      
    version 0.1.0
    
+      
    version 0.1.0.9000
    
     
    
 
     
    
@@ -111,7 +111,7 @@ 
    Accordion-sidebar panel-group
    
       
       
       
    Accordion panel-group
    
@@ -121,7 +121,7 @@ 
    Collapsible element
    
       
           
    Tooltip, popover, and modal window
    
       
    
@@ -162,11 +162,11 @@ 
    Modal window
    
       
           
    
       
    
-
    Carousels are used to contain sets of “content”, while showing one element of the set at a time. Generally, the content are images, but it can be any HTML. One way that a this could be a more-useful tool if an “easy” way can be found to populate a carousel with images produced by gganimate.
    
+
    Carousels are used to contain sets of “content”, while showing one element of the set at a time. Generally, the content are images, but it can be any HTML. One way that a this could be a more-useful tool if an “easy” way can be found to populate a carousel with images produced by gganimate.
    
 
    
diff --git a/man/bs_accordion.Rd b/man/bs_accordion.Rd
index 9cbf5e2..290685b 100644
--- a/man/bs_accordion.Rd
+++ b/man/bs_accordion.Rd
@@ -71,4 +71,3 @@ bs_accordion(id = "meet_the_beatles") \%>\%
 \seealso{
 \url{http://getbootstrap.com/javascript/#collapse-example-accordion}
 }
-
diff --git a/man/bs_accordion_sidebar.Rd b/man/bs_accordion_sidebar.Rd
index 9299d94..f6b626a 100644
--- a/man/bs_accordion_sidebar.Rd
+++ b/man/bs_accordion_sidebar.Rd
@@ -2,9 +2,9 @@
 % Please edit documentation in R/accordion_sidebar.R, R/append.R, R/set_opts.R
 \name{bs_accordion_sidebar}
 \alias{bs_accordion_sidebar}
+\alias{use_bs_accordion_sidebar}
 \alias{bs_append.bsplus_accordion_sidebar}
 \alias{bs_set_opts.bsplus_accordion_sidebar}
-\alias{use_bs_accordion_sidebar}
 \title{Accordion-sidebar panel-group}
 \usage{
 bs_accordion_sidebar(id, spec_side = c(width = 4, offset = 0),
@@ -101,4 +101,3 @@ bs_accordion_sidebar(id = "meet_the_beatles") \%>\%
 use_bs_accordion_sidebar()
 }
 }
-
diff --git a/man/bs_append.Rd b/man/bs_append.Rd
index ec96d4a..2fcc52f 100644
--- a/man/bs_append.Rd
+++ b/man/bs_append.Rd
@@ -28,4 +28,3 @@ This would be used when we want to add items to a collection
   \code{\link{bs_carousel}}
 }
 \keyword{internal}
-
diff --git a/man/bs_attr.Rd b/man/bs_attr.Rd
index bf4c79f..fcc43e1 100644
--- a/man/bs_attr.Rd
+++ b/man/bs_attr.Rd
@@ -3,9 +3,10 @@
 \docType{methods}
 \name{bs_attr}
 \alias{bs_attr}
-\alias{bs_attr,Duration-method}
 \alias{bs_attr.default}
 \alias{bs_attr.logical}
+\alias{bs_attr}
+\alias{bs_attr,Duration-method}
 \title{Convert a value to be used as an html attribute}
 \usage{
 bs_attr(x)
@@ -32,4 +33,3 @@ character
 }
 }
 \keyword{internal}
-
diff --git a/man/bs_carousel.Rd b/man/bs_carousel.Rd
index 93de213..e3e8459 100644
--- a/man/bs_carousel.Rd
+++ b/man/bs_carousel.Rd
@@ -66,4 +66,3 @@ bs_carousel(id = "with_the_beatles") \%>\%
 \url{http://getbootstrap.com/javascript/#carousel},
   \code{\link{bs_carousel_image}}, \code{\link{bs_carousel_caption}}
 }
-
diff --git a/man/bs_carousel_caption.Rd b/man/bs_carousel_caption.Rd
index b20cce5..ba9ca51 100644
--- a/man/bs_carousel_caption.Rd
+++ b/man/bs_carousel_caption.Rd
@@ -20,4 +20,3 @@ Helper function to generate HTML for a carousel caption.
 \seealso{
 \code{\link{bs_carousel}}
 }
-
diff --git a/man/bs_carousel_image.Rd b/man/bs_carousel_image.Rd
index 553a879..456c790 100644
--- a/man/bs_carousel_image.Rd
+++ b/man/bs_carousel_image.Rd
@@ -23,4 +23,3 @@ but adding a class to center the image in the carousel.
 \seealso{
 \code{\link{bs_carousel}}
 }
-
diff --git a/man/bs_collapse.Rd b/man/bs_collapse.Rd
index 031a0c7..74fef0e 100644
--- a/man/bs_collapse.Rd
+++ b/man/bs_collapse.Rd
@@ -1,8 +1,8 @@
 % Generated by roxygen2: do not edit by hand
 % Please edit documentation in R/collapse.R
 \name{bs_collapse}
-\alias{bs_attach_collapse}
 \alias{bs_collapse}
+\alias{bs_attach_collapse}
 \title{Collapsible element}
 \usage{
 bs_collapse(id, content = NULL, show = FALSE)
@@ -70,4 +70,3 @@ tags$button(type = "button", class = "btn btn-default", "She Loves You") \%>\%
 \seealso{
 \url{https://getbootstrap.com/javascript/#collapse}
 }
-
diff --git a/man/bs_embed_popover.Rd b/man/bs_embed_popover.Rd
index 6853aa1..7b059d4 100644
--- a/man/bs_embed_popover.Rd
+++ b/man/bs_embed_popover.Rd
@@ -47,4 +47,3 @@ tags$button(type = "button", class = "btn btn-default", "A button") \%>\%
 \code{\link{bs_embed_tooltip}},
   \url{http://getbootstrap.com/javascript/#popovers}
 }
-
diff --git a/man/bs_embed_tooltip.Rd b/man/bs_embed_tooltip.Rd
index e41300b..f3d4561 100644
--- a/man/bs_embed_tooltip.Rd
+++ b/man/bs_embed_tooltip.Rd
@@ -42,4 +42,3 @@ tags$button(type = "button", class = "btn btn-default", "I'm a button") \%>\%
 \seealso{
 \code{\link{bs_embed_popover}}, \url{http://getbootstrap.com/javascript/#tooltips}
 }
-
diff --git a/man/bs_modal.Rd b/man/bs_modal.Rd
index b7e34dd..e1eb9e0 100644
--- a/man/bs_modal.Rd
+++ b/man/bs_modal.Rd
@@ -1,9 +1,9 @@
 % Generated by roxygen2: do not edit by hand
 % Please edit documentation in R/modal.R
 \name{bs_modal}
-\alias{bs_attach_modal}
 \alias{bs_modal}
 \alias{bs_modal_closebutton}
+\alias{bs_attach_modal}
 \title{Modal window}
 \usage{
 bs_modal(id, title, body, footer = bs_modal_closebutton(title = "Close"),
@@ -87,4 +87,3 @@ tags$button(type = "button", class = "btn btn-default", "Click for modal") \%>\%
 \seealso{
 \code{shiny::\link[shiny]{includeMarkdown}}
 }
-
diff --git a/man/bs_set_data.Rd b/man/bs_set_data.Rd
index afce605..89d7809 100644
--- a/man/bs_set_data.Rd
+++ b/man/bs_set_data.Rd
@@ -1,8 +1,8 @@
 % Generated by roxygen2: do not edit by hand
 % Please edit documentation in R/set_attr.R
 \name{bs_set_data}
-\alias{bs_set_aria}
 \alias{bs_set_data}
+\alias{bs_set_aria}
 \title{Sets Bootstrap data- and aria- attributes.}
 \usage{
 bs_set_data(tag, ...)
@@ -59,4 +59,3 @@ tags$div() \%>\%
 \seealso{
 \href{http://getbootstrap.com/javascript}{Boostrap Javascript Components}
 }
-
diff --git a/man/bs_set_opts.Rd b/man/bs_set_opts.Rd
index cc6ff7a..fdc0624 100644
--- a/man/bs_set_opts.Rd
+++ b/man/bs_set_opts.Rd
@@ -27,4 +27,3 @@ This would be used when we want to set options for adding items
 \code{\link{bs_accordion}}, \code{\link{bs_accordion_sidebar}},
 }
 \keyword{internal}
-
diff --git a/man/pipe.Rd b/man/pipe.Rd
index 5f76047..18a1055 100644
--- a/man/pipe.Rd
+++ b/man/pipe.Rd
@@ -10,4 +10,3 @@
 Like dplyr, bsplus also uses the pipe function, \code{\%>\%} to turn
 function composition into a series of imperative statements.
 }
-
diff --git a/man/render_html_fragment.Rd b/man/render_html_fragment.Rd
index ccaf87c..ad47d4d 100644
--- a/man/render_html_fragment.Rd
+++ b/man/render_html_fragment.Rd
@@ -33,4 +33,3 @@ my_file <- system.file("markdown", "modal.md", package = "bsplus")
 render_html_fragment(my_file)
 }
 }
-
diff --git a/man/shinyInput_label_embed.Rd b/man/shinyInput_label_embed.Rd
index 40ae90a..9350fc1 100644
--- a/man/shinyInput_label_embed.Rd
+++ b/man/shinyInput_label_embed.Rd
@@ -39,4 +39,3 @@ numericInput(inputId = "foo", label = "Enter a number", value = 0) \%>\%
 \seealso{
 \code{\link{shiny_iconlink}}
 }
-
diff --git a/man/shiny_iconlink.Rd b/man/shiny_iconlink.Rd
index a05c485..502b470 100644
--- a/man/shiny_iconlink.Rd
+++ b/man/shiny_iconlink.Rd
@@ -32,4 +32,3 @@ shiny_iconlink() \%>\%
   \code{shiny::\link[shiny]{icon}}, \code{\link{bs_attach_modal}},
   \code{\link{bs_embed_popover}}, \code{\link{bs_embed_tooltip}}
 }
-
diff --git a/vignettes/general_accordion_sidebar.Rmd b/vignettes/general_accordion_sidebar.Rmd
new file mode 100644
index 0000000..3cef646
--- /dev/null
+++ b/vignettes/general_accordion_sidebar.Rmd
@@ -0,0 +1,69 @@
+---
+title: "Generalized Accordion Sidebar"
+author: "Ian Lyttle"
+date: "`r Sys.Date()`"
+---
+
+```{r}
+library("bsplus")
+```
+
+Our first task is to see if we can nest accordions. Imagine that this will be what we would see as the sidebar.
+
+```{r}
+bs_accordion(id = "beatles") %>%
+  bs_append(
+    title = "John Lennon",
+    content = 
+      bs_accordion(id = "john") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1960-1969"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1968-1980"
+      ) 
+  ) %>%
+  bs_append(
+    title = "Paul McCartney",
+    content = 
+      bs_accordion(id = "paul") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1960-1970"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1970-"
+      ) 
+  ) %>%  
+  bs_append(
+    title = "George Harrison",
+    content = 
+      bs_accordion(id = "george") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1960-1970"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1968-2001"
+      ) 
+  ) %>%
+  bs_append(
+    title = "Ringo Starr",
+    content =
+      bs_accordion(id = "ringo") %>%
+      bs_append(
+        title = "Beatles",
+        content = "1962-1970"
+      ) %>%
+      bs_append(
+        title = "Solo",
+        content = "1970-"
+      ) 
+  )
+```
+
+It appears that we can nest accordions!