first commit

.Rbuildignore

@@ -0,0 +1,3 @@
+^faq\.Rproj$
+^\.Rproj\.user$
+^README\.Rmd$

.gitignore

@@ -0,0 +1 @@
+.Rproj.user

DESCRIPTION

@@ -0,0 +1,18 @@
+Package: faq
+Title: Create faq page 
+Version: 0.1.0
+Authors@R: 
+    person(given = "Jiena",
+           family = "McLellan",
+           role = c("aut", "cre"),
+           email = "[email protected]",
+           comment = c(ORCID = "YOUR-ORCID-ID"))
+Description: Create Frequently Asked Questions page for Shiny application.
+Suggests: knitr, rmarkdown
+VignetteBuilder: knitr
+License: MIT + file LICENSE
+Imports:
+    htmlwidgets
+Encoding: UTF-8
+LazyData: true
+RoxygenNote: 7.0.2

LICENSE

@@ -0,0 +1,2 @@
+YEAR: 2020
+COPYRIGHT HOLDER: Jiena Gu McLellan

NAMESPACE

@@ -0,0 +1,6 @@
+# Generated by roxygen2: do not edit by hand
+
+export(faq)
+export(faqOutput)
+export(renderFaq)
+import(htmlwidgets)

R/faq.R

@@ -0,0 +1,60 @@
+#' FAQ page
+#'
+#' Create FAQ page
+#'
+#' @param data df with question and answer columns
+#' @param width width of this widget
+#' @param height height of this widget
+#' @param elementId ellement ID of this widget
+#' @param title title for this widgets
+#'
+#' @import htmlwidgets
+#'
+#' @export
+faq <- function(data, width = NULL, height = NULL, elementId = NULL,
+                title = "Frequently Asked Questions") {
+
+  # forward options using x
+  x = list(
+    data = htmlwidgets:::toJSON(data),
+    title = title
+  )
+
+  # create widget
+  htmlwidgets::createWidget(
+    name = 'faq',
+    x,
+    width = width,
+    height = height,
+    package = 'faq',
+    elementId = elementId
+  )
+}
+
+#' Shiny bindings for faq
+#'
+#' Output and render functions for using faq within Shiny
+#' applications and interactive Rmd documents.
+#'
+#' @param outputId output variable to read from
+#' @param width,height Must be a valid CSS unit (like \code{'100\%'},
+#'   \code{'400px'}, \code{'auto'}) or a number, which will be coerced to a
+#'   string and have \code{'px'} appended.
+#' @param expr An expression that generates a faq
+#' @param env The environment in which to evaluate \code{expr}.
+#' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
+#'   is useful if you want to save an expression in a variable.
+#'
+#' @name faq-shiny
+#'
+#' @export
+faqOutput <- function(outputId, width = '100%', height = '400px'){
+  htmlwidgets::shinyWidgetOutput(outputId, 'faq', width, height, package = 'faq')
+}
+
+#' @rdname faq-shiny
+#' @export
+renderFaq <- function(expr, env = parent.frame(), quoted = FALSE) {
+  if (!quoted) { expr <- substitute(expr) } # force quoted
+  htmlwidgets::shinyRenderWidget(expr, faqOutput, env, quoted = TRUE)
+}

README.Rmd

@@ -0,0 +1,45 @@
+---
+output: github_document
+always_allow_html: true
+---
+
+<!-- README.md is generated from README.Rmd. Please edit that file -->
+
+```{r, include = FALSE}
+knitr::opts_chunk$set(
+  collapse = TRUE,
+  comment = "#>",
+  fig.path = "man/figures/README-",
+  out.width = "100%"
+)
+```
+
+# faq
+
+<!-- badges: start -->
+<!-- badges: end -->
+
+This is package is to create a FAQ (Frequently Asked Questions) page for Shiny application with desired data.frame. 
+
+
+## Installation
+
+``` r
+install.packages("faq")
+```
+
+## Introduction
+
+Simply create a data frame with `question` column and `answer` column. Then put this data frame into `faq()` function, we will get a nice FAQ page. 
+
+```{r ex1}
+library(faq)
+df <- data.frame(
+  question = c("Question1", "Question2", "Question3"),
+  answer = c("answer for question1", 
+             "question2 answer", 
+             "answer3")
+)
+faq::faq(data = df, elementId = "faq", title = "Frequently Asked Questions")
+```
+

README.md

@@ -0,0 +1,44 @@
+
+<!-- README.md is generated from README.Rmd. Please edit that file -->
+
+# faq
+
+<!-- badges: start -->
+
+<!-- badges: end -->
+
+This is package is to create a FAQ (Frequently Asked Questions) page for
+Shiny application with desired data.frame.
+
+## Installation
+
+``` r
+install.packages("faq")
+```
+
+## Introduction
+
+Simply create a data frame with `question` column and `answer` column.
+Then put this data frame into `faq()` function, we will get a nice FAQ
+page.
+
+``` r
+library(faq)
+df <- data.frame(
+  question = c("Question1", "Question2", "Question3"),
+  answer = c("answer for question1", 
+             "question2 answer", 
+             "answer3")
+)
+faq::faq(data = df, elementId = "faq", title = "Frequently Asked Questions")
+```
+
+<!--html_preserve-->
+
+<div id="faq" class="faq html-widget" style="width:100%;height:480px;">
+
+</div>
+
+<script type="application/json" data-for="faq">{"x":{"data":{"question":["Question1","Question2","Question3"],"answer":["answer for question1","question2 answer","answer3"]},"title":"Frequently Asked Questions"},"evals":[],"jsHooks":[]}</script>
+
+<!--/html_preserve-->

faq.Rproj

@@ -0,0 +1,21 @@
+Version: 1.0
+
+RestoreWorkspace: No
+SaveWorkspace: No
+AlwaysSaveHistory: Default
+
+EnableCodeIndexing: Yes
+UseSpacesForTab: Yes
+NumSpacesForTab: 2
+Encoding: UTF-8
+
+RnwWeave: Sweave
+LaTeX: pdfLaTeX
+
+AutoAppendNewline: Yes
+StripTrailingWhitespace: Yes
+
+BuildType: Package
+PackageUseDevtools: Yes
+PackageInstallArgs: --no-multiarch --with-keep.source
+PackageRoxygenize: rd,collate,namespace

inst/htmlwidgets/faq.js

@@ -0,0 +1,60 @@
+HTMLWidgets.widget({
+
+  name: 'faq',
+
+  type: 'output',
+
+  factory: function(el, width, height) {
+
+    return {
+
+      renderValue: function(x) {
+
+        faq(el, x);
+
+      },
+
+      resize: function(width, height) {}
+
+    };
+  }
+});
+
+
+function faq(el, x){
+  var jsonData = x.data
+
+var faq = document.getElementById(el.id);
+var title = document.createElement("H1");
+var titletext = document.createTextNode(x.title);
+title.appendChild(titletext);
+faq.appendChild(title);
+
+for (var i = 0; i < jsonData.answer.length; i++) {
+
+   let wrapperdiv = document.createElement("div");
+       wrapperdiv.classList.add("wrapper");
+   let contentdiv = document.createElement("div");
+    contentdiv.classList.add("content");
+   let ptag = document.createElement("p");
+   ptag.innerHTML = jsonData.answer[i];
+   contentdiv.appendChild(ptag);
+
+    let questiondiv = document.createElement("button");
+    questiondiv.classList.add("collapsible");
+    questiondiv.innerHTML = jsonData.question[i];
+
+    questiondiv.addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  });
+  wrapperdiv.appendChild(questiondiv);
+  wrapperdiv.appendChild(contentdiv);
+  faq.appendChild(wrapperdiv);
+}
+}

inst/htmlwidgets/faq.yaml

@@ -0,0 +1,6 @@
+dependencies:
+  - name: faq
+    version: 0.1.0
+    src: htmlwidgets/lib
+    style:
+      - style.css

inst/htmlwidgets/lib/style.css

@@ -0,0 +1,48 @@
+.collapsible {
+  background-color: #F0F0F0;
+  color: black;
+  cursor: pointer;
+  padding: 38px;
+  width: 100%;
+  border: 0;
+  font-weight: bold;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  padding-left: 80px;
+}
+
+
+.active, .collapsible:hover {
+  background-color: #E8E8E8;
+}
+
+.wrapper{
+  border-bottom: 2px solid #FFF;
+}
+
+
+.collapsible:after {
+  content: '\002B';
+  font-size: 28px;
+  color: black;
+  font-weight: bold;
+  position: relative;
+  float:left;
+  margin-left: -50px;
+  margin-right: 5px;
+  margin-top: -8px;
+}
+
+.active:after {
+  content: "\2212";
+}
+
+.content {
+  padding-left: 80px;
+  padding-right:20px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+  background-color: #f0f0f0;
+}