5 min read

Week10 - Responsive Toolbars

2015-03-11
Week10 - Responsive Toolbars

htmlwidgets News This Week

htmlwidgets are getting so popular that it is very difficult to keep up with them. Hopefully, we’ll soon have a gallery of built and in-process htmlwidgets, since it now seems beyond my ability to keep up with all the developments. I’ll give away one little hint for those who want to be on the cutting edge. Just do this Github search, and you’ll likely see all the newest and latest.

htmlwidgets Iteration

I have noticed some interesting things being done over at DiagrammeR with exportSVG, qtlcharts, and DT with some revolutionary Shiny integration.

Videos

So far, videos on htmlwidgets have been limited, but that changed this week with three new videos from very credible sources (except for one).

  1. rOpenSci call with Ramnath Vaidyanathan
  2. RStudio webinar on htmlwidgets with Yihui Xie
  3. useR Birmigham, Alabama Presentation by me

This Week’s Widget - navr | Responsive Toolbars and Nav

Responsive-Nav is a delightfully tiny and dependency-free JavaScript library for reponsive nav toolbars. Much like last’s week widget sortableR, this week’s widget should fit in nicely nearly anywhere. The only reason you might choose not to use would be if you have decided to include the much heavier Bootstrap. Otherwise, this little powerhouse can serve you in all sorts of helpful and pretty ways.

Getting Started

navr has not achieved CRAN status yet, so for now we will install with devtools::install_github as shown in the code below.

devtools::install_github("timelyportfolio/navr")

Simple Example

library(navr)
library(htmltools)

# navr loves htmltools::tags, and I do too
#   so let's use them

tagList(
  tags$div(
    id = "simple-toolbar"
    ,style="width:100%;height:300px;border: dashed 0.2em lightgray;"
    ,tags$h1( "Div in Need of Toolbar" )
    ,tags$p( "If all goes well, you should see something that resembles a toolbar.
      This toolbar is built in R using the htmlwidget "
      , tags$a(tags$code("navr"),href = "https://github.com/timelyportfolio/navr")
      ," which wraps the tiny, dependency-free powerhouse "
      ,tags$a(tags$code("responsive-nav.js"),href = "http://responsive-nav.com/")
      ,".  Isn't open source great?  For bonus points, open this in a mobile device"
      ,"or make your screen small enough to see the hamburger icon"
      , tags$span( class="fa fa-bars" )
      ,"."
    )
  )
  ,navr(
    "#simple-toolbar"  # id of selector for the div above
    ,tagList(
      tags$ul(style = "float:left;"
        ,tags$li(tags$a("worthless1"),href="")  # for now just text
        ,tags$li(tags$a("worthless2"),href="") # for now just text
      )
    )
    , options = list( insert = "after" )
  )
)

htmlwidget Example

I can imagine a scenario where one of our htmlwidget friends might need a toolbar. Let’s say a DiagrammeR diagram wants to add a toolbar for exporting the rendered SVG. We could do something like this.

library(DiagrammeR)

gV <- grViz(
  "digraph{ DiagrammeR -> HTML; navr -> HTML; HTML -> beautiful; }"
  , height = 300, width = 600
)

tagList(
  # wrap diagram in a div since a lot of htmlwidgets clear contents
  tags$div(id = "diagram-needs-toolbar"
    ,gV
  )
  ,navr(
    selector = "#diagram-needs-toolbar"
    # use HTML instead of tags
    ,taglist = HTML("
      <ul>
        <li><a onclick = 'exportSVG()' href = '#diagram-needs-toolbar'>Export to SVG</a></li>
      </ul>
    "
    )
  )
  ,tags$script("
    function exportSVG(){
      window.open(
        [
          'data:;base64,',
          window.btoa((new XMLSerializer()).serializeToString(
              document.getElementById('diagram-needs-toolbar')
                .getElementsByTagName('svg')[0]
          ))
        ].join('')
      )
    }
  ")
)

Stylish Hover Effects

We can apply these stylish hover effects from Ian Lunn with the helper function add_hover. There are lots of different effects. Let’s try pop and float.

library(htmltools)
library(navr)

# build a simple nav
n1 <- navr(
  selector = "#pop-toolbar"
  ,taglist = tagList(
    tags$ul(
      tags$li(style="border: solid 0.1em white;","Popper")
      ,tags$li(style="border: solid 0.1em white;","Popping")
    )
  )
)
# make a copy to show another effect
n2 <- n1
n2$x$taglist = tagList(
  tags$ul(
    tags$li(style="border: solid 0.1em white;","Floater")
    ,tags$li(style="border: solid 0.1em white;","Floating")
  )
)


tagList(
  tags$div(
    id = "pop-toolbar"
    ,style="width:300px;height:300px;border: dashed 0.2em lightgray;"
    ,tags$h3("Hover Effects")
    ,"Hover effects are nice and let our users know that our
      navr actually does something.  Just wait until you see our navr with icons."
  )
  ,add_hover(n1,"pop")
  ,add_hover(n2,"float")
)

Awesome Font-Awesome Icons

Font-Awesome are the nice open-source MIT-licensed icons in Bootstrap. add_font makes it easy to use these icons in our toolbar. Even neater, the hover effects shown below play very nicely with Font-Awesome, so I would encourage add_hover + add_font_awesome. If you’re in shiny, no need to use add_font_awesome since Bootstrap already gives you these icons.

library(htmltools)
library(navr)

# build a simple nav
n1 <- navr(
  selector = "#icon-toolbar"
  ,taglist = tagList(
    tags$ul(style="line-height:120px; text-align:center; vertical-align:middle;"
      ,tags$li(
        style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;"
        , class="fa fa-beer fa-4x"
      )
      ,tags$li(
        style="border: solid 0.1em white;border-radius:100%;line-height:inherit;width:130px;height:130px;"
        , class="fa fa-bell fa-4x"
      )
    )
  )
)

tagList(
  tags$div(
    id = "icon-toolbar"
    ,style="width:300px;height:300px;border: dashed 0.2em lightgray; float:left;"
    ,tags$h3("Icon with Hover Effects")
    ,"Hover effects are even nicer when they work with icons, especially our easy
    to add Font-Awesome icons."
  )
  ,add_hover(add_font_awesome(n1),"fade")
)

Thanks

Thanks so much for all the work by

  • Viljami for Responsive-Nav
  • IanLunn for Hover.css
  • Dave Gundy for Font-Awesome
  • Ramnath Vaidyanathan and RStudio for htmlwidgets
  • all the contributors to R