Add help popover for regex format

Fixes #20

R/gadget_ui.R

@@ -13,22 +13,26 @@ regexplain_gadget_ui <- function(text = NULL, pattern = NULL, start_page = "Text
       selected = match.arg(start_page, c("Text", "RegEx", "Output", "Help")),
       # --- UI - Tab - Text ----
       miniTabPanel(
-        "Text", icon = icon('file-text-o'),
+        "Text",
+        icon = icon("file-text-o"),
         miniContentPanel(
           fillCol(
-            textAreaInputAlt('text',
-                             label = "Text to search or parse",
-                             value = paste(text, collapse = "\n"),
-                             resize = "both",
-                             width = "100%",
-                             height="90%",
-                             placeholder = "Paste, enter, or edit your sample text here.")
+            textAreaInputAlt(
+              "text",
+              label = "Text to search or parse",
+              value = paste(text, collapse = "\n"),
+              resize = "both",
+              width = "100%",
+              height = "90%",
+              placeholder = "Paste, enter, or edit your sample text here."
+            )
           )
         )
       ),
       # ---- UI - Tab - Regex ----
       miniTabPanel(
-        "RegEx", icon = icon('terminal'),
+        "RegEx",
+        icon = icon("terminal"),
         miniContentPanel(
           tags$div(
             id = "regexPage",
@@ -39,26 +43,56 @@ regexplain_gadget_ui <- function(text = NULL, pattern = NULL, start_page = "Text
               tags$div(
                 class = "col-12",
                 textInputCode(
-                  'pattern', 'RegEx', width = "100%",
+                  "pattern",
+                  HTML(
+                    "RegEx",
+                    format(
+                      # <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="content">Click to toggle popover</button>
+                      tags$button(
+                        id = "regex-format-help",
+                        type = "button",
+                        class = "btn btn-sm btn-link",
+                        style = "line-height: 1;padding: 0;font-size: inherit;",
+                        `data-toggle` = "popover",
+                        `data-trigger` = "hover",
+                        `data-placement` = "bottom",
+                        `data-content` = paste(
+                          "<p>Enter your regular expressions in",
+                          "<em>standard RegExp</em> format.</p>",
+                          "<p>In other words, <strong>use single slashes</strong> <code>\\</code>",
+                          "rather than double slahes <code>\\\\</code>.</p>"
+                        ),
+                        title = "Regular Expression Format",
+                        shiny::icon("question-circle", "fa-sm")
+                      )
+                    )
+                  ),
+                  width = "100%",
                   value = pattern,
                   placeholder = "Standard RegEx, e.g. \\w+_\\d{2,4}\\s+",
-                  tags$span(class = "input-group-btn",
-                            actionButton("library_show", "Library", class = "btn-primary")
+                  tags$span(
+                    class = "input-group-btn",
+                    id = "library_show_container",
+                    actionButton("library_show", "Library", class = "btn-primary")
                   )
+                ),
+                tags$script(
+                  "const $regexHelp = $('#regex-format-help');
+                  $regexHelp.popover({html: true});"
                 )
               )
             ),
             fluidRow(
               id = "regexOptions",
               checkboxGroupInput(
-                'regex_options',
+                "regex_options",
                 label = HTML(
                   '<div style="font-size: 1.25rem;">',
-                  'Option Groups: ',
+                  "Option Groups: ",
                   '<span style="color: #337ab7;">RegExplain</span>,',
                   '<span style="color: #5cb85c;">All</span>, ',
                   '<span style="color: #f0ad4e;">Base only</span>',
-                  '</div>'
+                  "</div>"
                 ),
                 inline = TRUE,
                 width = "90%",
@@ -68,40 +102,48 @@ regexplain_gadget_ui <- function(text = NULL, pattern = NULL, start_page = "Text
                   "ignore.case",
                   "fixed",
                   "perl",
-                  "useBytes"),
+                  "useBytes"
+                ),
                 choiceNames = list(
                   HTML('<span style="color: #337ab7;">Global</span>'),
                   HTML('<span style="color: #337ab7;">Break Lines</span>'),
                   HTML('<span style="color: #5cb85c;">Ignore Case</span>'),
                   HTML('<span style="color: #5cb85c;">Fixed/Literal</span>'),
                   HTML('<span style="color: #f0ad4e;">Perl Style</span>'),
-                  HTML('<span style="color: #f0ad4e;">Use Bytes</span>')),
-                selected = c('text_break_lines', 'perl')
+                  HTML('<span style="color: #f0ad4e;">Use Bytes</span>')
+                ),
+                selected = c("text_break_lines", "perl")
               )
             ),
             tags$div(
               id = "regexResult",
               class = "gadget-result",
               style = "overflow-y: scroll; height: 100%; max-height: calc(100% - 90px);",
-              htmlOutput('result')
+              htmlOutput("result")
             )
           )
         )
       ),
       # ---- UI - Tab - Output ----
       miniTabPanel(
-        "Output", icon = icon("table"),
+        "Output",
+        icon = icon("table"),
         miniContentPanel(
           fillCol(
             flex = c(1, 3),
             inputPanel(
               tags$div(
-                width = "100%;",
-                selectInput('regexFn', label = 'Apply Function',
-                            choices = regexFn_choices),
-                tags$span(class = "help-block",
-                          style = "font-size:1.25rem; margin-top:-10px; margin-bottom:0px; margin-left:4px;",
-                          "Adjust options in RegEx tab")
+                width = "100%",
+                selectInput(
+                  "regexFn",
+                  label = "Apply Function",
+                  choices = regexFn_choices
+                ),
+                tags$span(
+                  class = "help-block",
+                  style = "font-size:1.25rem; margin-top:-10px; margin-bottom:0px; margin-left:4px;",
+                  "Adjust options in RegEx tab"
+                )
               ),
               uiOutput("output_sub")
             ),
@@ -116,7 +158,8 @@ regexplain_gadget_ui <- function(text = NULL, pattern = NULL, start_page = "Text
       ),
       # ---- UI - Tab - Help ----
       miniTabPanel(
-        "Help", icon = icon("support"),
+        "Help",
+        icon = icon("support"),
         generate_help_ui(cheatsheet_only = FALSE)
       )
     )

inst/styles/gadget.css

@@ -71,9 +71,10 @@ dd {
 #regexInput {
   padding: 0 15px 15px 10px;
 }
-#library_show {
-  margin-top: 25px;
-  padding-left: 10px;
+#library_show_container {
+  position: absolute;
+  bottom: 0;
+  right: 60px;
 }
 .gadget-result {
   border: 1px solid #ccc;