diff --git a/DESCRIPTION b/DESCRIPTION index 910f2de..6f02bf1 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,8 +1,8 @@ Package: shinyFeedback Type: Package Title: Displays User Feedback Next to Shiny Inputs -Version: 0.0.1.9000 -Date: 2016-12-12 +Version: 0.0.2 +Date: 2016-12-19 Authors@R: person("Andy", "Merlino", email = "merlinoa88@gmail.com", role = c("aut", "cre")) Description: Easily display user feedback next to Shiny inputs. The feedback message is displayed when the feedback condition evaluates to TRUE. diff --git a/NEWS.md b/NEWS.md index c132c9a..c161bc3 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,4 +1,9 @@ -# shinyFeedback 0.0.1.9000 +# shinyFeedback 0.0.2 + +- support for `shiny::selectInput()` +- feedback messages are not longer displayed for non supported `shiny::*Input()`s +- support for multiple feedbacks for a single shiny input +- Font Awesome icons can now be used # shinyFeedback 0.0.1 diff --git a/inst/srcjs/checkFeedback.js b/inst/srcjs/checkFeedback.js index 50de857..81c064f 100644 --- a/inst/srcjs/checkFeedback.js +++ b/inst/srcjs/checkFeedback.js @@ -39,20 +39,20 @@ // the Shiny input. // // @param message - // @param $el the element that the feedback us being displayed around. - // @param $label input label - // @param $group input group + // @param $eInput the input element + // @param $eLabel the label element + // @param $egroup the form-group element // - function feedbackHandler(message, $el, $label, $group) { + function feedbackHandler(message, $eInput, $eLabel, $eGroup) { var inp = inputs[message.inputId]; function removeFeedback() { - $label.css("color", "#333"); - $el.removeAttr("style"); + $eLabel.css("color", "#333"); + $eInput.removeAttr("style"); if (message.icon) { $("#" + message.inputId + "-icon").remove(); - $group.removeClass("has-feedback"); + $eGroup.removeClass("has-feedback"); } if (message.text) { $("#" + message.inputId + "-text").remove(); @@ -75,15 +75,18 @@ inp.toggle(message.feedbackId); // display feedback - $label.css("color", message.color); - $el.css("border", "1px solid " + message.color); + if (message.color) { + $eLabel.css("color", message.color); + $eInput.css("border", "1px solid " + message.color); + } + if (message.text) { - $("

"+ message.text +"


").insertAfter($el); + $("

"+ message.text +"


").insertAfter($eInput); } if (message.icon) { - $group.addClass("has-feedback"); - $("" + message.icon + "").insertAfter($el); + $eGroup.addClass("has-feedback"); + $("" + message.icon + "").insertAfter($eInput); } } } @@ -99,13 +102,13 @@ function feedbackSelectize(message) { var $input = findInput(message.inputId); var $label = $input.parent().siblings("label"); - var $formGroup = $input.parent().eq(1); + var $formGroup = $input.parent(); // the SELECT html tag does not actually contain the input that is displayed // find the the displayed input box here var $inputDisplayed = $input .siblings(".selectize-control") - .children(".selectize-input"); + .find(".selectize-input"); feedbackHandler(message, $inputDisplayed, $label, $formGroup); } @@ -114,7 +117,7 @@ function feedbackSelect(message) { var $input = findInput(message.inputId); var $label = $input.parent().siblings("label"); - var $formGroup = $input.parent().eq(1); + var $formGroup = $input.parent(); feedbackHandler(message, $input, $label, $formGroup); } diff --git a/vignettes/shinyFeedback-intro.Rmd b/vignettes/shinyFeedback-intro.Rmd index 6f7915b..b9d2f3b 100644 --- a/vignettes/shinyFeedback-intro.Rmd +++ b/vignettes/shinyFeedback-intro.Rmd @@ -11,7 +11,7 @@ vignette: > ## Functionality -The `shinyFeedback` package creates a user friendly message that appears along side a `shiny` input. A feedback message is shown when the `shiny` input's value meets some condition. Here are pictures of a few `shiny` inputs with `feeback` messages displayed: +The `shinyFeedback` package creates a user friendly message that appears along side a `shiny` input. Here are pictures of `shiny` inputs with feeback messages displayed: ![](feedback-screenshot.png) @@ -66,22 +66,23 @@ The above app uses the `feedbackWarning()` function to display a default warning ## The `feedback` function -The primary function provided by `shinyFeedback` is `feedback()`. `feedback()` allows you to set feedback message color, icons, and text. The feedback is displayed when the expression supplied to the `condition` argument evaluates to TRUE. +The primary function provided by `shinyFeedback` is `feedback()`. `feedback()` creates messages similar to those shown in the image at the top of this vignette. The color, icon, and text of the feedback message can be customized. To use `feedback()`, you will want to call it from inside a `shiny` observer (either `shiny::observe()` or `shiny::observeEvent()`). ## Handy `feedback` wrappers `shinyFeedback` has 3 convenient wrappers functions: + - `feedbackWarning()` - `feedbackDanger()` - `feedbackSuccess()` -The above functions provide default arguments for all the formal arguments in the `feedback` function other than `inputId` and `condition`. A live app using these function is available [here](https://merlinoa.shinyapps.io/shinyfeedbackapp/). +The above functions provide default arguments for all the formal arguments in the `feedback` function other than `inputId` and `condition`. A live app using these functions is available [here](https://merlinoa.shinyapps.io/shinyfeedbackapp/). ## Multiple `feedback`s -When assigning multiple `feedback()`s to a single input, place the `feedback()`s in the same `shiny` observer. The `feedback()`s further down in the body of the observer will override the higher `feedback()`s if multiple `feedback()` function conditions evaluate to TRUE. +When assigning multiple `feedback()`s to a single input (e.g. you want to display a certain feedback message if the input value >= 1, and a different feedback value if the input is >= 2), place the `feedback()`s in the same `shiny` observer. The `feedback()`s further down in the body of the observer will override the higher `feedback()`s if multiple `feedback()` function conditions evaluate to TRUE. ```{r, eval = FALSE} ui <- fluidPage(