r2resize: In-Text Resize for Images, Tables and Fancy Resize Containers in 'shiny', 'rmarkdown' and 'quarto' Documents

Description

Automatic resizing toolbar for containers, images and tables. Various resizer or expandable container functionalities are also included. Most suitable to include in 'shiny', 'markdown' and 'quarto' documents.

Author(s)

Maintainer: Obinna Obianom idonshayo@gmail.com

See Also

Useful links:

• https://r2resize.obi.obianom.com

• Report bugs at https://github.com/oobianom/r2resize/issues

Attach jQuery to current document

Description

The current function allows inclusion of jQuery in an HTML output

Usage

add.JQuery(version = "3.5.1")

Arguments

Value

script tag with jQuery link

Note

This function holds significance across the entire package, particularly in scenarios where a specific HTML output lacks the inclusion of the jQuery script required by other functions within this package. It serves as a crucial mechanism for ensuring that functionalities within the package remain operable even when the necessary jQuery script is absent from the HTML page by default knitting. By providing a fallback option, this function enhances the robustness and reliability of the package, allowing it to gracefully handle situations where jQuery is not explicitly included. Its role is pivotal in maintaining consistent behavior and functionality across diverse HTML environments, thereby facilitating seamless integration and usage of the package across various web development contexts.

Examples

add.JQuery()
add.JQuery("3.7.0") # add a specific version

Configure toolbar settings for the page

Description

Set options for the inclusion of sizing toolbar in documents

Usage

add.resizer(
  theme.color = NULL,
  position = c("top", "bottom"),
  font.size = NULL,
  font.color = NULL,
  tables = TRUE,
  images = TRUE,
  line.color = NULL,
  thumb.width = NULL,
  thumb.height = NULL,
  line.width = NULL,
  line.height = NULL,
  dim.units = "px",
  default.image.width = NULL
)

Arguments

Value

Inclusion of mini toolbar for images and tables within a page

Examples for r2resize

More examples and demo pages for this function are located at this link - https://r2resize.obi.obianom.com.

Examples

# default settings
r2resize::add.resizer()

# add resizer to only images
r2resize::add.resizer(
  tables = FALSE,
  images = TRUE
 )


# add resizer to only tables
r2resize::add.resizer(
  tables = TRUE,
  images = FALSE
 )


# add resizer to both images
r2resize::add.resizer(
  tables = TRUE,
  images = TRUE
 )

# set position of the resize toolbar
r2resize::add.resizer(
  position = "top" #this is the default, another is 'bottom'
 )

# set resizer line color, height and width
r2resize::add.resizer(
  line.color = "green",
  line.width = 150,
  line.height = 5
 )


#declare more arguments including default image size
r2resize::add.resizer(
  theme.color = "blue",
  position = "top",
  font.size = "12px",
  font.color = "brown",
  tables = TRUE,
  images = TRUE,
  line.color = "green",
  line.width = 150,
  line.height = 5,
  default.image.width = "40%"
) # customized settings

Hover elastic card container

Description

Automatic elastic card holder for images or navigation items

Usage

elastiCard(
  ...,
  height.px = NULL,
  width.px = NULL,
  border.color = "white",
  border.width.px = 1,
  active.panel = 1
)

Arguments

Value

Multiple cards with hover elastic functionality

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#basic example with texts alone
r2resize::elastiCard(
  item1 = c(
  icon = "edit",
  title="Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua. Ut enim ad
  minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea
  commodo consequat.",
  subtitle="A cool subtitle",
  text.color="blue"),
  item2 = c(
  title="Duis aute irure dolor in reprehenderit
  in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.",
  subtitle="A cool subtitle",
  text.color = "brown"
 )
)


#basic example with background image and texts
r2resize::elastiCard(
  item1 = c(
  bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
  icon = "edit",
  title="Sample text 1",
  subtitle="A cool subtitle"),
  item2 = c(
  bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
  title="Sample text 2",
  subtitle="A cool subtitle",
  text.color = "brown"
  )
)

Create an Emphasis Card

Description

Emphasis container

Usage

empahsisCard(..., bg.color = NULL)

Arguments

Value

container with a moving border to denote emphasis

More examples for r2resize

More examples and demo pages are located at this link - https://r2resize.obi.obianom.com.

Examples

#make a simple emphasis card
#add as much content as need
r2resize::empahsisCard(
  "sample rpkg.net 1",
  "sample rpkg.net 2 "
)


#specify the color of the background
r2resize::empahsisCard(
  "sample rpkg.net 1",
  "sample rpkg.net 2 ",
  bg.color = "brown"
)

Create an Emphasis Card

Description

Emphasis container

Usage

emphasisCard(..., bg.color = NULL)

Arguments

Value

container with a moving border to denote emphasis

More examples for r2resize

More examples and demo pages are located at this link - https://r2resize.obi.obianom.com.

Examples

#make a simple emphasis card
#add as much content as need
r2resize::empahsisCard(
  "sample rpkg.net 1",
  "sample rpkg.net 2 "
)


#specify the color of the background
r2resize::empahsisCard(
  "sample rpkg.net 1",
  "sample rpkg.net 2 ",
  bg.color = "brown"
)

Flexible card container

Description

Expandable flexible card holder for images or navigation items

Usage

flexCard(
  ...,
  height.px = NULL,
  width.px = NULL,
  border.color = "white",
  border.width.px = 1,
  active.panel = 1
)

Arguments

Value

Multiple cards with flex functionality

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

r2resize::flexCard(
  item1 = c(
  bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
  icon = "edit",
  title="Sample text 1",
  subtitle="A cool subtitle"),
  item2 = c(
  bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
  icon = "edit",
  title="Sample text 2",
  subtitle="A cool subtitle",
  icon.color = "blue",
  text.color = "brown"
  )
)

Elegant viewer functionality for images

Description

Elegant image viewer and resizer for images

Usage

shinyExpandImage(imageid = c())

Arguments

Value

Feature that allows images to be easily expanded and viewed

Use case

Use in a shiny application for image(s) that you'd like to carry a viewer feature on click.

When the image is clicked, it is expanded and toolbars appear to allow the user to in zoom in or out, as well as download the image.

if there are multiple images within the imageid holder, then they are automatically ordered at the bottom for ease of transition.

Examples

# simple expansion for 2 images in a shiny app
if (interactive()) {
  shiny::shinyApp(
    ui = shiny::fluidPage(
      shinyExpandImage(c("ccgal1")),
      htmltools::tags$div(
        id = "ccgal1",
        htmltools::tags$a(
          href = "https://r2resize.obi.obianom.com/m/1b.jpg",
          htmltools::tags$img(
          src = "https://r2resize.obi.obianom.com/m/1b.jpg",
          alt="sample text for image 1")
        ),
        htmltools::tags$a(
          href = "https://r2resize.obi.obianom.com/m/1.jpg",
          htmltools::tags$img(
          src = "https://r2resize.obi.obianom.com/m/1.jpg",
          alt="sample text for image 2")
        )
      )
    ),
    server = (function(input, output) {})
  )
}

Resizable container content holder

Description

Highly customizable and resizable container content holder

Usage

sizeableCard(..., bg.color = NULL, border.color = NULL)

Arguments

Value

Container with a resizing toolbar feature on the right

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#simple sizeable card attribute
r2resize::sizeableCard(
  "sample rpkg.net text"
)


#specify the background color for the card
r2resize::sizeableCard(
  "sample r2resume text",
  bg.color = "lightgray"
)


#specify the border color additionally
r2resize::sizeableCard(
  "sample r2resume text",
  bg.color = "lightgray",
  border.color="black"
)

Resizable split screen container

Description

Highly customizable and resizable split screen container

Usage

splitCard(
  left,
  right,
  splitter.color = NULL,
  bg.left.color = NULL,
  left.bg.url = NULL,
  right.bg.url = NULL,
  bg.right.color = NULL,
  border.color = NULL,
  position = c("vertical", "horizontal"),
  text.left.color = "black",
  text.right.color = "black",
  min.height = NULL,
  left.width = NULL
)

Arguments

Value

Resizeable split screen container

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#basic attributes
r2resize::splitCard(
  "Sample text",
  "Sample text 2"
)

#specify background color for each side
r2resize::splitCard(
  "Sample r2symbols 1",
  "Sample nextGen 1",
  bg.right.color = "white",
  bg.left.color = "lightgray",
  position = "vertical"
)

#add the split card attribute on vertical
r2resize::splitCard(
  "Sample shinyStorePlus",
  "Sample nextGen 1",
  bg.right.color = "white",
  bg.left.color = "lightgray",
  border.color = "black",
  text.left.color = "black",
  text.right.color = "black",
  position = "vertical"
)


#specify width of the left container
#specify height of the entire panel
r2resize::splitCard(
  "pkg card.pro",
  "pkg r2social",
  bg.right.color = "white",
  bg.left.color = "lightgray",
  border.color = "black",
  text.left.color = "black",
  text.right.color = "black",
  min.height = '400px',
  left.width = "80%"
)


# specify split card on the horizontal position
r2resize::splitCard(
  "Sample sciRmdTheme 1",
  "Sample nextGen 1",
  bg.right.color = "white",
  bg.left.color = "lightgray",
  border.color = "gray",
  text.left.color = "black",
  text.right.color = "black",
  position = "horizontal"
)

Re sizable split screen container version 2

Description

Highly customizable and re sizable split screen container version 2

Usage

splitCard2(
  left,
  right,
  bg.left.color = NULL,
  bg.right.color = NULL,
  border.color = NULL,
  text.left.color = "black",
  text.right.color = "black",
  slider.position = charNum1to100
)

Arguments

Value

Realizable split screen container style 2

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Examples

#Use the default split card 2 function
#add a question on one side, and answer on the other
r2resize::splitCard2(
  shiny::tags$h1("Question 1"),
  shiny::tags$h1("Answer 1"),
  slider.position = "40"
)

#specify the backgroun color for the sides
r2resize::splitCard2(
  "Sample r2symbols 1",
  "Sample nextGen 1",
  bg.right.color = "white",
  bg.left.color = "lightgray"
)


#alter the border color
#specify the text color for each side
r2resize::splitCard2(
  "Sample shinyStorePlus",
  "Sample nextGen 1",
  bg.right.color = "white",
  bg.left.color = "lightgray",
  border.color = "black",
  text.left.color = "black",
  text.right.color = "black"
)

##change the text color from one side to the other
r2resize::splitCard2(
  "Sample sciRmdTheme 1",
  "Sample nextGen 1",
  bg.right.color = "white",
  bg.left.color = "lightgray",
  border.color = "gray",
  text.left.color = "red",
  text.right.color = "blue"
)

Resizable Moveable Expandable Window Card

Description

Easily expandable and resizable content container holder

Usage

windowCard(
  ...,
  title = "Sample title",
  width = "50%",
  bg.color = NULL,
  border.color = NULL,
  header.text.color = NULL,
  body.text.color = NULL
)

Arguments

Value

A window-like card container that is expandable and resizable

Examples for r2resize

More examples and demo pages are located at this link - https://rpkg.net/package/r2resize.

Note

Please note that only one windowCard may be created by page

Examples

#simple window card with default attributes
#shows up centered on the screen
r2resize::windowCard("sample r2symbols text")


#specify the width of the window card
#specify the title
#specify the header color
#speciy other features
r2resize::windowCard(
title = "Sample Window card",
width = "500px",
bg.color = "white",
border.color = "brown",
header.text.color = "white",
body.text.color = "black")