2 | [](https://travis-ci.org/RinteRface/fullPage) [](https://cran.r-project.org/package=fullPage)
3 |
4 | > Many of the amazing works of [Álvaro Trigo](https://alvarotrigo.com/) for Shiny!
5 |
6 | ```{r setup, include=FALSE}
7 | library(htmltools)
8 | ```
9 |
10 | ```{r, echo=FALSE}
11 | p(
12 | tags$a(
13 | href = "https://shiny.john-coene.com/fullPage",
14 | target = "_blank",
15 | class = "btn btn-default",
16 | "fullPage demo"
17 | ),
18 | tags$a(
19 | href = "https://shiny.john-coene.com/pagePiling",
20 | target = "_blank",
21 | class = "btn btn-warning",
22 | "pagePiling demo"
23 | ),
24 | tags$a(
25 | href = "https://shiny.john-coene.com/multiScroll",
26 | target = "_blank",
27 | class = "btn btn-success",
28 | "multiScroll demo"
29 | )
30 | )
31 | ```
32 |
33 | ## Installation
34 |
35 | Install the _stable_ version from CRAN:
36 |
37 | ```r
38 | install.packages("fullPage")
39 | ```
40 |
41 | Install the _dev_ version from [Github](https://github.com/RinteRface/fullPage) with:
42 |
43 | ``` r
44 | # install.packages("remotes")
45 | remotes::install_github("RinteRface/fullPage")
46 | ```
47 |
48 | ## Features
49 |
50 | * [fullPage.js](https://github.com/alvarotrigo/fullPage.js/) -- functions starting with `full`.
51 | * [pagePiling.js](https://github.com/alvarotrigo/pagePiling.js/) -- functions starting with `page`.
52 | * [multiScroll.js](https://github.com/alvarotrigo/multiscroll.js) -- functions starting with `multi`.
53 |
54 | All ships with:
55 |
56 | * [Milligram](https://milligram.io/) *grid, button, typography, and themes.*
57 |
58 |
--------------------------------------------------------------------------------
/R/fullGrid.R:
--------------------------------------------------------------------------------
1 | #' Add grid elements
2 | #'
3 | #' Add rows and columns.
4 | #'
5 | #' @param ... any element.
6 | #' @param width Width of column.
7 | #'
8 | #' @details Wrap columns in row function, see examples.
9 | #'
10 | #' @examples
11 | #' if(interactive()){
12 | #' library(shiny)
13 | #'
14 | #' ui <- pagePiling(
15 | #' center = TRUE,
16 | #' sections.color = c("#f3f3f3", "#f4f4f4"),
17 | #' pageSection(
18 | #' h1("Grid")
19 | #' ),
20 | #' pageSection(
21 | #' h1("Columns"),
22 | #' pageRow(
23 | #' pageColumn(
24 | #' h2("First Column"),
25 | #' p("Resize your screen to see columns in action.")
26 | #' ),
27 | #' pageColumn(
28 | #' h2("Second Column"),
29 | #' numericInput("obs", "observations", value = 20)
30 | #' ),
31 | #' pageColumn(
32 | #' h2("Thirs Column"),
33 | #' plotOutput("plot")
34 | #' )
35 | #' )
36 | #' )
37 | #' )
38 | #'
39 | #' server <- function(input, output){
40 | #' output$plot <- renderPlot({
41 | #' par(bg = "#f4f4f4")
42 | #' hist(rnorm(input$obs, 10, 3))
43 | #' })
44 | #' }
45 | #'
46 | #' shinyApp(ui, server)
47 | #' }
48 | #'
49 | #' @author John Coene, \email{jcoenep@@gmail.com}
50 | #'
51 | #' @rdname fullGrid
52 | #' @export
53 | fullRow <- function(...){
54 | shiny::tags$div(
55 | class = "row",
56 | ...
57 | )
58 | }
59 |
60 | #' @rdname fullGrid
61 | #' @export
62 | fullColumn <- function(..., width = 6){
63 | shiny::tags$div(
64 | class = paste0("col-md-", width),
65 | ...
66 | )
67 | }
68 |
69 | #' @rdname fullGrid
70 | #' @export
71 | pageRow <- fullRow
72 |
73 | #' @rdname fullGrid
74 | #' @export
75 | pageColumn <- fullColumn
76 |
77 | #' @rdname fullGrid
78 | #' @export
79 | multiRow <- fullRow
80 |
81 | #' @rdname fullGrid
82 | #' @export
83 | multiColumn <- fullColumn
84 |
--------------------------------------------------------------------------------
/inst/css/jquery.pagepiling.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * pagepiling.js 1.5.4
3 | *
4 | * https://github.com/alvarotrigo/pagePiling.js
5 | * @license MIT licensed
6 | *
7 | * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
8 | */body,html{overflow:hidden;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.pp-section{height:100%;position:absolute;width:100%}.pp-easing{-webkit-transition:all 1s cubic-bezier(.55,.085,0,.99);-moz-transition:all 1s cubic-bezier(.55,.085,0,.99);-o-transition:all 1s cubic-bezier(.55,.085,0,.99);transition:all 1s cubic-bezier(.55,.085,0,.99);-webkit-transition-timing-function:cubic-bezier(.55,.085,0,.99);-moz-transition-timing-function:cubic-bezier(.55,.085,0,.99);-o-transition-timing-function:cubic-bezier(.55,.085,0,.99);transition-timing-function:cubic-bezier(.55,.085,0,.99)}#pp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1}#pp-nav.right{right:17px}#pp-nav.left{left:17px}.pp-section.pp-table{display:table}.pp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}.pp-slidesNav{position:absolute;z-index:4;left:50%;opacity:1}.pp-slidesNav.bottom{bottom:17px}.pp-slidesNav.top{top:17px}#pp-nav ul,.pp-slidesNav ul{margin:0;padding:0}#pp-nav li,.pp-slidesNav li{display:block;width:14px;height:13px;margin:7px;position:relative}.pp-slidesNav li{display:inline-block}#pp-nav li a,.pp-slidesNav li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}#pp-nav li .active span,.pp-slidesNav .active span{background:#333}#pp-nav span,.pp-slidesNav span{top:2px;left:2px;width:8px;height:8px;border:1px solid #000;background:rgba(0,0,0,0);border-radius:50%;position:absolute;z-index:1}.pp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px}.pp-tooltip.right{right:20px}.pp-tooltip.left{left:20px}.pp-scrollable{overflow-y:scroll;height:100%}
9 | /*# sourceMappingURL=jquery.pagepiling.min.css.map */
10 |
--------------------------------------------------------------------------------
/vignettes/pagePiling.Rmd:
--------------------------------------------------------------------------------
1 | ---
2 | title: "pagePiling"
3 | author: "John Coene"
4 | date: "`r Sys.Date()`"
5 | output: rmarkdown::html_vignette
6 | vignette: >
7 | %\VignetteIndexEntry{pagePiling}
8 | %\VignetteEngine{knitr::rmarkdown}
9 | %\VignetteEncoding{UTF-8}
10 | ---
11 |
12 | ```{r setup, include = FALSE}
13 | knitr::opts_chunk$set(
14 | collapse = TRUE,
15 | comment = "#>"
16 | )
17 | ```
18 |
19 | You can run a local demo of fullPage with `demo("pagePiling", package = "fullPage")`.
20 |
21 | `fullPage` consists of section (`pageSection`), all the functions of relevant to pagePiling start in `page_`.Always initialise the page with `pagePiling`.
22 |
23 | The code looks like:
24 |
25 | ```r
26 | library(shiny)
27 | library(fullPage)
28 |
29 | options <- list(
30 | loopBottom = TRUE
31 | )
32 |
33 | ui <- pagePiling(
34 | sections.color = c('#f2f2f2', '#2C3E50', '#39C'),
35 | opts = options,
36 | menu = c("Section 1" = "section1",
37 | "Piling" = "section2",
38 | "Plots" = "section3",
39 | "Layers" = "section4"),
40 | pageSection(
41 | center = TRUE,
42 | menu = "section1",
43 | h1("Page piling")
44 | ),
45 | pageSection(
46 | menu = "section2",
47 | center = TRUE,
48 | h1("Section 2")
49 | ),
50 | pageSectionPlot(
51 | "plot",
52 | center = TRUE,
53 | menu = "section3",
54 | h1("Plot background")
55 | ),
56 | pageSectionPlot(
57 | "plot2",
58 | center = TRUE,
59 | menu = "section4",
60 | pageContainer(
61 | h1("Layer anything"),
62 | sliderInput(
63 | "bins",
64 | "Data Points",
65 | min = 100,
66 | max = 500,
67 | step = 25,
68 | value = 200
69 | )
70 | )
71 | )
72 | )
73 |
74 | server <- function(input, output){
75 |
76 | output$plot <- renderPlot({
77 | par(bg = "grey60")
78 | plot(mtcars$wt, mtcars$mpg)
79 | })
80 |
81 | output$plot2 <- renderPlot({
82 | par(bg = "grey80")
83 | hist(rnorm(input$bins, 100, 250))
84 | })
85 | }
86 |
87 | shinyApp(ui, server)
88 | ```
--------------------------------------------------------------------------------
/man/fp.Rd:
--------------------------------------------------------------------------------
1 | % Generated by roxygen2: do not edit by hand
2 | % Please edit documentation in R/fullPage.R
3 | \name{fullSection}
4 | \alias{fullSection}
5 | \alias{fullSlide}
6 | \alias{fullSectionImage}
7 | \alias{fullSlideImage}
8 | \alias{pageSection}
9 | \alias{pageSectionImage}
10 | \title{Sections and Slides}
11 | \usage{
12 | fullSection(..., menu = NULL, center = FALSE, class = "")
13 |
14 | fullSlide(..., menu = NULL, center = FALSE)
15 |
16 | fullSectionImage(..., img, menu = NULL, center = FALSE)
17 |
18 | fullSlideImage(..., img, menu = NULL, center = FALSE)
19 |
20 | pageSection(..., menu = NULL, center = FALSE, class = "")
21 |
22 | pageSectionImage(..., img, menu = NULL, center = FALSE)
23 | }
24 | \arguments{
25 | \item{...}{any element.}
26 |
27 | \item{menu}{menu link.}
28 |
29 | \item{center}{whether to center text horizontally.}
30 |
31 | \item{class}{A CSS class.}
32 |
33 | \item{img}{path to image.}
34 | }
35 | \description{
36 | Add sections and slides.
37 | }
38 | \details{
39 | \code{fullSectionImage} and \code{fullSlideImage} do not work in RStudio viewer, open in browser.
40 | }
41 | \examples{
42 | if(interactive()){
43 |
44 | library(shiny)
45 |
46 | ui <- fullPage(
47 | center = TRUE,
48 | opts = list(
49 | sectionsColor = c("#f3f3f3", "#4BBFC3")
50 | ),
51 | fullSection(h1("First section"), center = TRUE),
52 | fullSection(
53 | menu = "captureThisSection"
54 | ),
55 | fullSection(
56 | fullSlide(h2("Slide 1")),
57 | fullSlideImage(
58 | img = paste0(
59 | "https://raw.githubusercontent.com/alvarotrigo/",
60 | "fullPage.js/master/examples/imgs/bg5.jpg"),
61 | h2("Image background")
62 | )
63 | ),
64 | fullSectionImage( # will not show in viewer, open in browser
65 | img = paste0(
66 | "https://raw.githubusercontent.com/alvarotrigo/",
67 | "fullPage.js/master/examples/imgs/bg2.jpg"),
68 | h1("Image background")
69 | )
70 | )
71 |
72 | server <- function(input, output){
73 | observeEvent(input$captureThisSectionInput, {
74 | print("Section # 2 loaded")
75 | })
76 | }
77 |
78 | shinyApp(ui, server)
79 | }
80 |
81 | }
82 | \author{
83 | John Coene, \email{jcoenep@gmail.com}
84 | }
85 |
--------------------------------------------------------------------------------
/R/utils.R:
--------------------------------------------------------------------------------
1 | build_opts_fp <- function(opts = NULL){
2 |
3 | opts <- jsonlite::toJSON(opts, auto_unbox = T)
4 |
5 | paste0("
6 | var options = ", opts, ";
7 | $.extend(options, {'afterLoad': function(origin, destination, direction){
8 | Shiny.setInputValue('fp_origin', origin, {priority: 'event'});
9 | Shiny.setInputValue('fp_destination', destination, {priority: 'event'});
10 | Shiny.setInputValue('fp_direction', direction, {priority: 'event'});
11 | }});
12 | $(document).on('shiny:connected', function(event) {$('#fp').fullpage(options);});
13 | ")
14 | }
15 |
16 | build_opts_pp <- function(opts = NULL){
17 |
18 | opts <- jsonlite::toJSON(opts, auto_unbox = T)
19 |
20 | paste0("
21 | var options = ", opts, ";
22 | $.extend(options, {'afterLoad': function(anchorLink, index){
23 | Shiny.setInputValue('fp_anchor', anchorLink, {priority: 'event'});
24 | Shiny.setInputValue('fp_index', index, {priority: 'event'});
25 | }});
26 | $(document).on('shiny:connected', function(event) {$('#fp').pagepiling(options)});
27 | ")
28 | }
29 |
30 | build_opts_mp <- function(opts = NULL){
31 | opts <- jsonlite::toJSON(opts, auto_unbox = T)
32 |
33 | paste0("
34 | var options = ", opts, ";
35 | $.extend(options, {'afterLoad': function(anchorLink, index){
36 | $(document).on('shiny:connected', function(event) {
37 | Shiny.onInputChange('fp_anchor', anchorLink);
38 | Shiny.onInputChange('fp_index', index);
39 | });
40 | }});
41 | $(document).ready(function() {$('#fp').multiscroll(options);});
42 | ")
43 | }
44 |
45 |
46 | build_section <- function(menu = NULL, center = FALSE, class, ...){
47 | div <- shiny::tags$div(
48 | class = class,
49 | ...
50 | )
51 |
52 | if(!is.null(menu))
53 | div <- shiny::tagAppendAttributes(div, `data-anchor` = menu)
54 |
55 | if(isTRUE(center))
56 | div <- shiny::tagAppendAttributes(div, style = "text-align: center;")
57 |
58 | div
59 | }
60 |
61 | rand <- function(){
62 | rand_id <- paste0(tolower(sample(c(LETTERS, 1:9), 26 + 9)), collapse = "")
63 | paste0(sample(letters,1),rand_id)
64 | }
65 |
--------------------------------------------------------------------------------
/docs/docsearch.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 |
3 | // register a handler to move the focus to the search bar
4 | // upon pressing shift + "/" (i.e. "?")
5 | $(document).on('keydown', function(e) {
6 | if (e.shiftKey && e.keyCode == 191) {
7 | e.preventDefault();
8 | $("#search-input").focus();
9 | }
10 | });
11 |
12 | $(document).ready(function() {
13 | // do keyword highlighting
14 | /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */
15 | var mark = function() {
16 |
17 | var referrer = document.URL ;
18 | var paramKey = "q" ;
19 |
20 | if (referrer.indexOf("?") !== -1) {
21 | var qs = referrer.substr(referrer.indexOf('?') + 1);
22 | var qs_noanchor = qs.split('#')[0];
23 | var qsa = qs_noanchor.split('&');
24 | var keyword = "";
25 |
26 | for (var i = 0; i < qsa.length; i++) {
27 | var currentParam = qsa[i].split('=');
28 |
29 | if (currentParam.length !== 2) {
30 | continue;
31 | }
32 |
33 | if (currentParam[0] == paramKey) {
34 | keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20"));
35 | }
36 | }
37 |
38 | if (keyword !== "") {
39 | $(".contents").unmark({
40 | done: function() {
41 | $(".contents").mark(keyword);
42 | }
43 | });
44 | }
45 | }
46 | };
47 |
48 | mark();
49 | });
50 | });
51 |
52 | /* Search term highlighting ------------------------------*/
53 |
54 | function matchedWords(hit) {
55 | var words = [];
56 |
57 | var hierarchy = hit._highlightResult.hierarchy;
58 | // loop to fetch from lvl0, lvl1, etc.
59 | for (var idx in hierarchy) {
60 | words = words.concat(hierarchy[idx].matchedWords);
61 | }
62 |
63 | var content = hit._highlightResult.content;
64 | if (content) {
65 | words = words.concat(content.matchedWords);
66 | }
67 |
68 | // return unique words
69 | var words_uniq = [...new Set(words)];
70 | return words_uniq;
71 | }
72 |
73 | function updateHitURL(hit) {
74 |
75 | var words = matchedWords(hit);
76 | var url = "";
77 |
78 | if (hit.anchor) {
79 | url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor;
80 | } else {
81 | url = hit.url + '?q=' + escape(words.join(" "));
82 | }
83 |
84 | return url;
85 | }
86 |
--------------------------------------------------------------------------------
/man/fullPlot.Rd:
--------------------------------------------------------------------------------
1 | % Generated by roxygen2: do not edit by hand
2 | % Please edit documentation in R/fullPlot.R
3 | \name{fullSectionPlot}
4 | \alias{fullSectionPlot}
5 | \alias{fullSlidePlot}
6 | \alias{pageSectionPlot}
7 | \alias{multiSectionPlot}
8 | \title{Use plot as background}
9 | \usage{
10 | fullSectionPlot(
11 | outputId,
12 | ...,
13 | menu = NULL,
14 | center = FALSE,
15 | background = "rgba(255,255,255,0.5)"
16 | )
17 |
18 | fullSlidePlot(
19 | outputId,
20 | ...,
21 | menu = NULL,
22 | center = FALSE,
23 | background = "rgba(255,255,255,0.5)"
24 | )
25 |
26 | pageSectionPlot(
27 | outputId,
28 | ...,
29 | menu = NULL,
30 | center = FALSE,
31 | background = "rgba(255,255,255,0.5)"
32 | )
33 |
34 | multiSectionPlot(
35 | outputId,
36 | ...,
37 | menu = NULL,
38 | center = FALSE,
39 | background = "rgba(255,255,255,0.5)"
40 | )
41 | }
42 | \arguments{
43 | \item{outputId}{id passed to \code{\link[shiny]{plotOutput}}.}
44 |
45 | \item{...}{any children element.}
46 |
47 | \item{menu}{menu link.}
48 |
49 | \item{center}{whether to center text horizontally.}
50 |
51 | \item{background}{sets background to overlaying shiny inputs, set to \code{NULL} to remove.}
52 | }
53 | \description{
54 | Use a reactive plot as section or slide background.
55 | }
56 | \examples{
57 | if(interactive()){
58 |
59 | library(shiny)
60 |
61 | ui <- fullPage(
62 | opts = list(sectionsColor = c('#4BBFC3', '#7BAABE')),
63 | fullSection(h1("Full section plots"), center = TRUE),
64 | fullSectionPlot(
65 | "myPlot2",
66 | center = TRUE,
67 | fullContainer(
68 | h2("With a title")
69 | )
70 | ),
71 | fullSectionPlot(
72 | "myPlot",
73 | center = TRUE,
74 | fullContainer(
75 | h3("Layer anything you want"),
76 | selectInput(
77 | "select",
78 | "Choose y",
79 | choices = c("mpg", "drat", "wt")
80 | )
81 | )
82 | )
83 | )
84 |
85 | server <- function(input, output){
86 |
87 | output$myPlot <- renderPlot({
88 | plot(1:nrow(mtcars), mtcars[[input$select]])
89 | })
90 |
91 | output$myPlot2 <- renderPlot({
92 | plot(1:nrow(mtcars), mtcars[[input$select]])
93 | })
94 |
95 | }
96 |
97 | shinyApp(ui, server)
98 | }
99 | }
100 | \author{
101 | John Coene, \email{jcoenep@gmail.com}
102 | }
103 |
--------------------------------------------------------------------------------
/inst/jquery-3.2.1/jquery.easing.min.js:
--------------------------------------------------------------------------------
1 | (function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],function($){return factory($)})}else if(typeof module==="object"&&typeof module.exports==="object"){exports=factory(require("jquery"))}else{factory(jQuery)}})(function($){$.easing.jswing=$.easing.swing;var pow=Math.pow,sqrt=Math.sqrt,sin=Math.sin,cos=Math.cos,PI=Math.PI,c1=1.70158,c2=c1*1.525,c3=c1+1,c4=2*PI/3,c5=2*PI/4.5;function bounceOut(x){var n1=7.5625,d1=2.75;if(x<1/d1){return n1*x*x}else if(x<2/d1){return n1*(x-=1.5/d1)*x+.75}else if(x<2.5/d1){return n1*(x-=2.25/d1)*x+.9375}else{return n1*(x-=2.625/d1)*x+.984375}}$.extend($.easing,{def:"easeOutQuad",swing:function(x){return $.easing[$.easing.def](x)},easeInQuad:function(x){return x*x},easeOutQuad:function(x){return 1-(1-x)*(1-x)},easeInOutQuad:function(x){return x<.5?2*x*x:1-pow(-2*x+2,2)/2},easeInCubic:function(x){return x*x*x},easeOutCubic:function(x){return 1-pow(1-x,3)},easeInOutCubic:function(x){return x<.5?4*x*x*x:1-pow(-2*x+2,3)/2},easeInQuart:function(x){return x*x*x*x},easeOutQuart:function(x){return 1-pow(1-x,4)},easeInOutQuart:function(x){return x<.5?8*x*x*x*x:1-pow(-2*x+2,4)/2},easeInQuint:function(x){return x*x*x*x*x},easeOutQuint:function(x){return 1-pow(1-x,5)},easeInOutQuint:function(x){return x<.5?16*x*x*x*x*x:1-pow(-2*x+2,5)/2},easeInSine:function(x){return 1-cos(x*PI/2)},easeOutSine:function(x){return sin(x*PI/2)},easeInOutSine:function(x){return-(cos(PI*x)-1)/2},easeInExpo:function(x){return x===0?0:pow(2,10*x-10)},easeOutExpo:function(x){return x===1?1:1-pow(2,-10*x)},easeInOutExpo:function(x){return x===0?0:x===1?1:x<.5?pow(2,20*x-10)/2:(2-pow(2,-20*x+10))/2},easeInCirc:function(x){return 1-sqrt(1-pow(x,2))},easeOutCirc:function(x){return sqrt(1-pow(x-1,2))},easeInOutCirc:function(x){return x<.5?(1-sqrt(1-pow(2*x,2)))/2:(sqrt(1-pow(-2*x+2,2))+1)/2},easeInElastic:function(x){return x===0?0:x===1?1:-pow(2,10*x-10)*sin((x*10-10.75)*c4)},easeOutElastic:function(x){return x===0?0:x===1?1:pow(2,-10*x)*sin((x*10-.75)*c4)+1},easeInOutElastic:function(x){return x===0?0:x===1?1:x<.5?-(pow(2,20*x-10)*sin((20*x-11.125)*c5))/2:pow(2,-20*x+10)*sin((20*x-11.125)*c5)/2+1},easeInBack:function(x){return c3*x*x*x-c1*x*x},easeOutBack:function(x){return 1+c3*pow(x-1,3)+c1*pow(x-1,2)},easeInOutBack:function(x){return x<.5?pow(2*x,2)*((c2+1)*2*x-c2)/2:(pow(2*x-2,2)*((c2+1)*(x*2-2)+c2)+2)/2},easeInBounce:function(x){return 1-bounceOut(1-x)},easeOutBounce:bounceOut,easeInOutBounce:function(x){return x<.5?(1-bounceOut(1-2*x))/2:(1+bounceOut(2*x-1))/2}})});
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # fullPage
64 |
65 |
131 |
132 |
133 |
134 |
135 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/R/pagePiling.R:
--------------------------------------------------------------------------------
1 | #' Setup a page.
2 | #'
3 | #' Create a full scrolling page.
4 | #'
5 | #' @param ... any element.
6 | #' @param opts list of options, see details.
7 | #' @param sections.color character vector, i.e.: \code{c("blue", "red")}
8 | #' @param menu menu links as named vector.
9 | #' @param center horizontally center all sections.
10 | #'
11 | #' @details
12 | #' \itemize{
13 | #' \item{\code{direction} - takes \code{vertical} or \code{horizontal} - defines if the scroll is vertical or horizontal.}
14 | #' \item{\code{verticalCentered} - boolean.}
15 | #' \item{\code{scrollingSpeed} - scrolling transitions in milliseconds, numeric value i.e.: \code{700}.}
16 | #' \item{\code{easing} - character string - takes \code{swing} or \code{linear}.}
17 | #' \item{\code{loopBottom} - boolean - defines whether scrolling down in the last section should scroll to the first one or not.}
18 | #' \item{\code{loopTop} - boolean - defines whether scrolling up in the first section should scroll to the last one or not.}
19 | #' \item{\code{css3} - boolean - defines whether to use JavaScript or CSS3 transforms to scroll within sections. Useful to speed up the movement in tablet and mobile devices with browsers supporting CSS3. If this option is set to true and the browser doesn't support CSS3, a jQuery fallback will be used instead.}
20 | #' \item{\code{navigation} - boolean - if set, it will show a navigation bar made up of small circles.}
21 | #' \item{\code{touchSensitivity} - numeric value - defines a percentage of the browsers window width/height, and how far a swipe must measure for navigating to the next section.}
22 | #' \item{\code{keyboardScrolling} - boolean - defines if the content can be navigated using the keyboard.}
23 | #' \item{\code{animateAnchor} - boolean - defines whether the load of the site when given an anchor will scroll with animation to its destination or will directly load on the given section.}
24 | #' }
25 | #'
26 | #' @examples
27 | #' if(interactive()){
28 | #' # Run de demo
29 | #' demo("pagePiling", package = "fullPage")
30 | #'
31 | #' # Or
32 | #' library(shiny)
33 | #'
34 | #' options <- list(
35 | #' loopBottom = TRUE
36 | #' )
37 | #'
38 | #' ui <- pagePiling(
39 | #' center = TRUE,
40 | #' sections.color = c('#f2f2f2', '#2C3E50', '#39C'),
41 | #' opts = options,
42 | #' menu = c("Section 1" = "section1",
43 | #' "Piling" = "section2",
44 | #' "Plots" = "section3",
45 | #' "Reactive" = "section4",
46 | #' "Images" = "images"),
47 | #' pageSection(
48 | #' menu = "section1",
49 | #' h1("Page piling")
50 | #' ),
51 | #' pageSection(
52 | #' menu = "section2",
53 | #' h1("Section 2")
54 | #' ),
55 | #' pageSectionPlot(
56 | #' "plot",
57 | #' menu = "section3",
58 | #' h1("Plot background")
59 | #' ),
60 | #' pageSectionPlot(
61 | #' "plot2",
62 | #' menu = "section4",
63 | #' pageContainer(
64 | #' h1("Reactive background"),
65 | #' sliderInput(
66 | #' "bins",
67 | #' "Data Points",
68 | #' min = 100,
69 | #' max = 500,
70 | #' step = 25,
71 | #' value = 200
72 | #' )
73 | #' )
74 | #' ),
75 | #' pageSectionImage( # will not show in viewer, open in browser
76 | #' menu = "image",
77 | #' img = paste0(
78 | #' "https://raw.githubusercontent.com/alvarotrigo/",
79 | #' "fullPage.js/master/examples/imgs/bg2.jpg"),
80 | #' h1("Image background")
81 | #' )
82 | #' )
83 | #'
84 | #' server <- function(input, output){
85 | #'
86 | #' output$plot <- renderPlot({
87 | #' par(bg = "grey60")
88 | #' plot(mtcars$wt, mtcars$mpg)
89 | #' })
90 | #'
91 | #' output$plot2 <- renderPlot({
92 | #' par(bg = "grey80")
93 | #' hist(rnorm(input$bins, 100, 250))
94 | #' })
95 | #' }
96 | #'
97 | #' shinyApp(ui, server)
98 | #' }
99 | #'
100 | #' @author John Coene, \email{jcoenep@@gmail.com}
101 | #'
102 | #' @seealso \href{Official documentation}{https://github.com/alvarotrigo/pagePiling.js/}.
103 | #'
104 | #' @export
105 | pagePiling <- function(..., sections.color, opts = list(), menu = NULL, center = FALSE){
106 |
107 | if(missing(sections.color))
108 | stop("must pass sections.color", call. = FALSE)
109 |
110 | # add anchors to JS
111 | opts <- append(opts, list(sectionsColor = sections.color))
112 |
113 | # build menu
114 | if(!is.null(menu)){
115 |
116 | # unordered list ot append to
117 | ul <- shiny::tags$ul(
118 | id = "tocMenu"
119 | )
120 |
121 | # loop through items add list
122 | for(i in 1:length(menu)){
123 |
124 | if(!length(names(menu)))
125 | stop("Menu must be a named vector", call. = FALSE)
126 |
127 | li <- shiny::tags$li(
128 | `data-menuanchor` = unname(menu[i]),
129 | shiny::tags$a(
130 | href = paste0("#", unname(menu[i])),
131 | names(menu)[i]
132 | )
133 | )
134 |
135 | # append to unordered list
136 | ul <- shiny::tagAppendChild(ul, li)
137 | }
138 |
139 | # add menu anchors
140 | opts$anchors <- unname(menu)
141 | opts$menu <- "#tocMenu"
142 |
143 | # build body
144 | body <- shiny::tags$body(
145 | ul,
146 | shiny::tags$div(
147 | id = "fp",
148 | ...
149 | )
150 | )
151 | } else { # no menu
152 | body <- shiny::tags$body(
153 | shiny::tags$div(
154 | id = "fp",
155 | ...
156 | )
157 | )
158 | }
159 |
160 | if(isTRUE(center))
161 | body <- shiny::tagAppendAttributes(body, style = "text-align: center;")
162 |
163 | shiny::tags$html(
164 | shiny::tags$head(
165 | shiny::bootstrapLib(),
166 | shiny::includeCSS(
167 | system.file("css/styles.css", package = "fullPage")
168 | ),
169 | shiny::includeCSS(
170 | system.file("css/jquery.pagepiling.min.css", package = "fullPage")
171 | ),
172 | shiny::includeScript(
173 | system.file("js/jquery.pagepiling.min.js", package = "fullPage")
174 | ),
175 | shiny::tags$script(
176 | build_opts_pp(opts)
177 | )
178 | ),
179 | body
180 | )
181 | }
182 |
--------------------------------------------------------------------------------
/docs/articles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
136 |
148 |
149 |
150 |
159 |
137 |
146 |
147 |
138 |
140 |
141 | License
139 |YEAR: 2017 142 | COPYRIGHT HOLDER: John Coene 143 |144 | 145 |
64 |
65 |
131 |
132 |
133 |
134 |
135 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
--------------------------------------------------------------------------------
/docs/authors.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
136 |
154 |
155 |
164 |
137 |
153 |
138 |
140 |
141 | Articles
139 |
142 |
152 | All vignettes
143 | 144 | 145 |-
146 |
- Callbacks 147 |
- fullPage 148 |
- multiScroll 149 |
- pagePiling 150 |
64 |
65 |
131 |
132 |
133 |
134 |
135 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
--------------------------------------------------------------------------------
/docs/articles/callbacks.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
136 |
161 |
162 |
171 |
137 |
150 |
151 |
159 |
160 |
138 |
141 |
142 |
149 | Changelog
139 | Source:NEWS.md
140 |
29 |
96 |
97 |
98 |
99 |
176 |
177 |
178 |
179 |
180 |
181 |
--------------------------------------------------------------------------------
/R/fullButton.R:
--------------------------------------------------------------------------------
1 | #' Add buttons
2 | #'
3 | #' Add buttons to your \code{\link{fullPage}}, \code{\link{pagePiling}} and \code{\link{multiPage}}.
4 | #'
5 | #' @param outline,clear set outline or clear button.
6 | #' @param ... any other element
7 | #' @param section,slide target section and/or slide.
8 | #' @param fun Javascript function to pass to button.
9 | #'
10 | #' @details See example for \code{*Custom} button.
11 | #'
12 | #' @examples
13 | #' library(shiny)
14 | #'
15 | #' if(interactive()){
16 | #'
17 | #' ui <- fullPage(
18 | #'
19 | #' center = TRUE,
20 | #'
21 | #' fullSection(
22 | #' center = TRUE,
23 | #' h1("Buttons")
24 | #' ),
25 | #' fullSection(
26 | #' fullButton("Visit site", href = "https://john-coene.com")
27 | #' ),
28 | #' fullSection(
29 | #' fullButtonDown("Move Down", outline = TRUE)
30 | #' ),
31 | #' fullSection(
32 | #' fullButtonUp("Move up")
33 | #' ),
34 | #' fullSection(
35 | #' fullButtonTo("Move to first section", section = 1)
36 | #' ),
37 | #' fullSection(
38 | #' center = TRUE,
39 | #' fullSlide(
40 | #' fullButtonRight("Slide right", clear = TRUE)
41 | #' ),
42 | #' fullSlide(
43 | #' fullButtonLeft("Slide left", clear = TRUE)
44 | #' )
45 | #' ),
46 | #' fullSection(
47 | #' p("Disables keyboard scrolling"),
48 | #' fullButtonCustom("Custom button",
49 | #' fun = "$.fn.fullpage.setKeyboardScrolling(false, 'down, right');")
50 | #' )
51 | #' )
52 | #'
53 | #' server <- function(input, output){}
54 | #'
55 | #' shinyApp(ui, server)
56 | #' }
57 | #' @author John Coene, \email{jcoenep@@gmail.com}
58 | #'
59 | #' @rdname button
60 | #' @export
61 | fullButton <- function(..., outline = FALSE, clear = FALSE){
62 |
63 | if(isTRUE(clear) && isTRUE(outline))
64 | stop("can online set outline or clear, not both", call. = FALSE)
65 |
66 | cl <- "button"
67 | if(isTRUE(outline)) cl <- paste(cl, "button-outline")
68 | if(isTRUE(clear)) cl <- paste(cl, "button-clear")
69 |
70 | shiny::tags$a(
71 | class = cl,
72 | ...
73 | )
74 | }
75 |
76 | #' @rdname button
77 | #' @export
78 | fullButtonTo <- function(..., section, slide = 0, outline = FALSE, clear = FALSE){
79 |
80 | if(missing(section))
81 | stop("must pass section", call. = FALSE)
82 |
83 | id <- rand()
84 |
85 | button <- fullButton(..., id = id, outline = outline, clear = clear)
86 |
87 | if(!inherits(section, "numeric"))
88 | section <- paste0("'", section, "'")
89 |
90 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.fullpage.moveTo(", section, ", ", slide, ");});")
91 |
92 | shiny::tagList(
93 | shiny::tags$head(
94 | shiny::tags$script(
95 | JS
96 | )
97 | ),
98 | button
99 | )
100 | }
101 |
102 | #' @rdname button
103 | #' @export
104 | fullButtonUp <- function(..., outline = FALSE, clear = FALSE){
105 |
106 | id <- rand()
107 |
108 | button <- fullButton(..., id = id, outline = outline, clear = clear)
109 |
110 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.fullpage.moveSectionUp();});")
111 |
112 | shiny::tagList(
113 | shiny::tags$head(
114 | shiny::tags$script(
115 | JS
116 | )
117 | ),
118 | button
119 | )
120 | }
121 |
122 | #' @rdname button
123 | #' @export
124 | fullButtonDown <- function(..., outline = FALSE, clear = FALSE){
125 |
126 | id <- rand()
127 |
128 | button <- fullButton(..., id = id, outline = outline, clear = clear)
129 |
130 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.fullpage.moveSectionDown();});")
131 |
132 | shiny::tagList(
133 | shiny::tags$head(
134 | shiny::tags$script(
135 | JS
136 | )
137 | ),
138 | button
139 | )
140 | }
141 |
142 | #' @rdname button
143 | #' @export
144 | fullButtonRight <- function(..., outline = FALSE, clear = FALSE){
145 |
146 | id <- rand()
147 |
148 | button <- fullButton(..., id = id, outline = outline, clear = clear)
149 |
150 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.fullpage.moveSlideRight();});")
151 |
152 | shiny::tagList(
153 | shiny::tags$head(
154 | shiny::tags$script(
155 | JS
156 | )
157 | ),
158 | button
159 | )
160 | }
161 |
162 | #' @rdname button
163 | #' @export
164 | fullButtonLeft <- function(..., outline = FALSE, clear = FALSE){
165 |
166 | id <- rand()
167 |
168 | button <- fullButton(..., id = id, outline = outline, clear = clear)
169 |
170 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.fullpage.moveSlideLeft();});")
171 |
172 | shiny::tagList(
173 | shiny::tags$head(
174 | shiny::tags$script(
175 | JS
176 | )
177 | ),
178 | button
179 | )
180 | }
181 |
182 | #' @rdname button
183 | #' @export
184 | fullButtonCustom <- function(..., fun, outline = FALSE, clear = FALSE){
185 | if(missing(fun))
186 | stop("missing function")
187 |
188 |
189 | id <- rand()
190 |
191 | button <- fullButton(..., id = id, outline = outline, clear = clear)
192 |
193 | JS <- paste0("$(document).on('click', '#", id, "', function(){", fun, "});")
194 |
195 | shiny::tagList(
196 | shiny::tags$head(
197 | shiny::tags$script(
198 | JS
199 | )
200 | ),
201 | button
202 | )
203 | }
204 |
205 | #' @rdname button
206 | #' @export
207 | pageButton <- fullButton
208 |
209 | #' @rdname button
210 | #' @export
211 | multiButton <- fullButton
212 |
213 | #' @rdname button
214 | #' @export
215 | pageButtonUp <- function(..., outline = FALSE, clear = FALSE){
216 |
217 | id <- rand()
218 |
219 | button <- fullButton(..., id = id, outline = outline, clear = clear)
220 |
221 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.pagepiling.moveSectionUp();});")
222 |
223 | shiny::tagList(
224 | shiny::tags$head(
225 | shiny::tags$script(
226 | JS
227 | )
228 | ),
229 | button
230 | )
231 | }
232 |
233 | #' @rdname button
234 | #' @export
235 | pageButtonDown <- function(..., outline = FALSE, clear = FALSE){
236 |
237 | id <- rand()
238 |
239 | button <- fullButton(..., id = id, outline = outline, clear = clear)
240 |
241 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.pagepiling.moveSectionDown();});")
242 |
243 | shiny::tagList(
244 | shiny::tags$head(
245 | shiny::tags$script(
246 | JS
247 | )
248 | ),
249 | button
250 | )
251 | }
252 |
253 | #' @rdname button
254 | #' @export
255 | pageButtonTo <- function(..., section, outline = FALSE, clear = FALSE){
256 |
257 | if(missing(section))
258 | stop("must pass section", call. = FALSE)
259 |
260 | id <- rand()
261 |
262 | button <- fullButton(..., id = id, outline = outline, clear = clear)
263 |
264 | if(!inherits(section, "numeric"))
265 | section <- paste0("'", section, "'")
266 |
267 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.pagepiling.moveTo(", section, ");});")
268 |
269 | shiny::tagList(
270 | shiny::tags$head(
271 | shiny::tags$script(
272 | JS
273 | )
274 | ),
275 | button
276 | )
277 | }
278 |
279 | #' @rdname button
280 | #' @export
281 | multiButtonUp <- function(..., outline = FALSE, clear = FALSE){
282 |
283 | id <- rand()
284 |
285 | button <- fullButton(..., id = id, outline = outline, clear = clear)
286 |
287 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.multiscroll.moveSectionDown();});")
288 |
289 | shiny::tagList(
290 | shiny::tags$head(
291 | shiny::tags$script(
292 | JS
293 | )
294 | ),
295 | button
296 | )
297 | }
298 |
299 | #' @rdname button
300 | #' @export
301 | multiButtonDown <- function(..., outline = FALSE, clear = FALSE){
302 |
303 | id <- rand()
304 |
305 | button <- fullButton(..., id = id, outline = outline, clear = clear)
306 |
307 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.multiscroll.moveSectionDown();});")
308 |
309 | shiny::tagList(
310 | shiny::tags$head(
311 | shiny::tags$script(
312 | JS
313 | )
314 | ),
315 | button
316 | )
317 | }
318 |
319 | #' @rdname button
320 | #' @export
321 | multiButtonTo <- function(..., section, outline = FALSE, clear = FALSE){
322 |
323 | if(missing(section))
324 | stop("must pass section", call. = FALSE)
325 |
326 | id <- rand()
327 |
328 | button <- fullButton(..., id = id, outline = outline, clear = clear)
329 |
330 | if(!inherits(section, "numeric"))
331 | section <- paste0("'", section, "'")
332 |
333 | JS <- paste0("$(document).on('click', '#", id, "', function(){$.fn.multiscroll.moveTo(", section, ");});")
334 |
335 | shiny::tagList(
336 | shiny::tags$head(
337 | shiny::tags$script(
338 | JS
339 | )
340 | ),
341 | button
342 | )
343 | }
344 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
100 |
165 |
166 |
167 |
175 |
101 |
158 |
159 |
160 |
163 |
164 |
102 |
109 |
110 |
111 |
112 |
113 |
114 | Callbacks
103 |John Coene
104 | 105 |2020-01-23
106 | 107 | Source:vignettes/callbacks.Rmd
108 | callbacks.RmdCallbacks let you pick up on events, i.e.: which slide is currently being viewed. For instance, it comes in handy to display animations at the right moment! Below are the callbacks available to each family of functions:
115 |fullPage
116 |-
117 |
-
118 |
input$fp_origin: origin slide
119 | -
120 |
input$fp_destination: destination slide
121 | -
122 |
input$fp_direction: scroll direction
123 |
pagePiling & multiScroll
125 |-
126 |
-
127 |
input$fp_anchor: slide anchor
128 | -
129 |
input$fp_index: slide index
130 |
Demo:
132 |library(shiny)
133 | library(fullPage)
134 |
135 | ui <- fullPage(
136 | fullSection(
137 | menu = "first",
138 | center = TRUE,
139 | h1("Callbacks")
140 | ),
141 | fullSection(
142 | menu = "second",
143 | center = TRUE,
144 | h3("Slide"),
145 | verbatimTextOutput("slide")
146 | )
147 | )
148 |
149 | server <- function(input, output){
150 |
151 | output$slide <- renderPrint({
152 | input$fp_origin # returns menu
153 | })
154 |
155 | }
156 |
157 | shinyApp(ui, server)
29 |
96 |
97 |
98 |
99 |
197 |
198 |
199 |
200 |
201 |
202 |
--------------------------------------------------------------------------------
/inst/js/jquery.pagepiling.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * pagepiling.js 1.5.4
3 | *
4 | * https://github.com/alvarotrigo/pagePiling.js
5 | * @license MIT licensed
6 | *
7 | * Copyright (C) 2016 alvarotrigo.com - A project by Alvaro Trigo
8 | */
9 | !function(e,n,t,o){"use strict";e.fn.pagepiling=function(i){function a(e){e.addClass("pp-table").wrapInner('')}function s(n){var t=e(".pp-section.active").index(".pp-section"),o=n.index(".pp-section");return t>o?"up":"down"}function c(n,t){var o={destination:n,animated:t,activeSection:e(".pp-section.active"),anchorLink:n.data("anchor"),sectionIndex:n.index(".pp-section"),toMove:n,yMovement:s(n),leavingSection:e(".pp-section.active").index(".pp-section")+1};if(!o.activeSection.is(n)){"undefined"==typeof o.animated&&(o.animated=!0),"undefined"!=typeof o.anchorLink&&v(o.anchorLink,o.sectionIndex),o.destination.addClass("active").siblings().removeClass("active"),o.sectionsToMove=p(o),"down"===o.yMovement?(o.translate3d=U(),o.scrolling="-100%",Z.css3||o.sectionsToMove.each(function(n){n!=o.activeSection.index(".pp-section")&&e(this).css(u(o.scrolling))}),o.animateSection=o.activeSection):(o.translate3d="translate3d(0px, 0px, 0px)",o.scrolling="0",o.animateSection=n),e.isFunction(Z.onLeave)&&Z.onLeave.call(this,o.leavingSection,o.sectionIndex+1,o.yMovement),r(o),A(o.anchorLink),z(o.anchorLink,o.sectionIndex),W=o.anchorLink;var i=(new Date).getTime();Q=i}}function r(n){Z.css3?(w(n.animateSection,n.translate3d,n.animated),n.sectionsToMove.each(function(){w(e(this),n.translate3d,n.animated)}),setTimeout(function(){l(n)},Z.scrollingSpeed)):(n.scrollOptions=u(n.scrolling),n.animated?n.animateSection.animate(n.scrollOptions,Z.scrollingSpeed,Z.easing,function(){d(n),l(n)}):(n.animateSection.css(u(n.scrolling)),setTimeout(function(){d(n),l(n)},400)))}function l(n){e.isFunction(Z.afterLoad)&&Z.afterLoad.call(this,n.anchorLink,n.sectionIndex+1)}function p(n){var t;return t="down"===n.yMovement?e(".pp-section").map(function(t){if(t
100 |
186 |
187 |
188 |
196 |
101 |
102 |
103 |
104 |
105 |
147 |
148 |
184 |
185 |
106 |
109 |
110 |
146 | 111 |113 |Many of the amazing works of Álvaro Trigo for Shiny!
112 |
114 | fullPage demo 115 | pagePiling demo 116 | multiScroll demo 117 |
118 |
119 |
123 |
126 |
127 | 120 | Installation
121 |Install the stable version from CRAN:
122 |install.packages("fullPage")Install the dev version from Github with:
124 |# install.packages("remotes")
125 | remotes::install_github("RinteRface/fullPage")
128 |
145 | 129 | Features
130 |-
131 |
-
132 | fullPage.js – functions starting with
full.
133 | -
134 | pagePiling.js – functions starting with
page.
135 | -
136 | multiScroll.js – functions starting with
multi.
137 |
All ships with:
139 |-
140 |
- 141 | Milligram grid, button, typography, and themes. 142 | 143 |
