Package 'r2resize'

Title: 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.
Authors: Obinna Obianom [aut, cre]
Maintainer: Obinna Obianom <[email protected]>
License: MIT + file LICENSE
Version: 1.9.2
Built: 2024-11-25 19:33:14 UTC
Source: CRAN

Help Index


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

version

jQuery version

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

theme.color

theme color for resizer and table e.g. black or #000000

position

position of the resize toolbar e.g. top or bottom

font.size

size of the page font in px e.g. 14px

font.color

color of the page font in e.g. darkblue or #006699

tables

boolean. TRUE or FALSE, to add resize toobar to tables

images

boolean. TRUE or FALSE, to add resize toobar to images

line.color

color of the resizer track e.g. red or #f5f5f5

thumb.width

width of the resizer thumb e.g. 25

thumb.height

height of the resizer thumb e.g. 25

line.width

width of the resizer track e.g. 200

line.height

height of the resizer track e.g. 10

dim.units

unit for the height and width of the track or thumb

default.image.width

default width of all images on the page e.g. 100

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

...

list of image containers, see example below

height.px

height of container as numeric

width.px

width of container as numeric

border.color

color of border of each container

border.width.px

width of the container border

active.panel

the active panel or container e.g. 1

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

...

content of the card

bg.color

content background color

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

...

content of the card

bg.color

content background color

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

...

list of image containers, see example below

height.px

height of container as numeric

width.px

width of container as numeric

border.color

color of border of each container

border.width.px

width of the container border

active.panel

the active panel or container e.g. 1. Use 0 to make all panels inactive

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

imageid

one or more IDs of a div containing images

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

...

content of container

bg.color

content background color e.g red, black or #333333

border.color

border color of container e.g. red or #f5f5f5

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

left

content on the left or top

right

content on the right or bottom

splitter.color

splitter color e.g red, black or #333333

bg.left.color

left panel color e.g red, black or #333333

left.bg.url

left panel background image e.g image1.png or https://..image1.png

right.bg.url

right panel background image e.g image1.png or https://..image1.png

bg.right.color

right panel color e.g red, black or #333333

border.color

border color of the container e.g. red or #f5f5f5

position

position of divider or splitter

text.left.color

color of left panel text

text.right.color

color of right panel text

min.height

minimum height of the panel

left.width

width of the left panel e.g. 100 percent or 500 px

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

left

content on the left or top

right

content on the right or bottom

bg.left.color

left panel color e.g red, black or #333333

bg.right.color

right panel color e.g red, black or #333333

border.color

border color of the container e.g. red or #f5f5f5

text.left.color

color of left panel text

text.right.color

color of right panel text

slider.position

position of the slider in percent

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

...

content of the container

title

title of the header

width

width of the container

bg.color

background color of the content area

border.color

color of the container border

header.text.color

color of the header text

body.text.color

color of the content text

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")