mrFeedback - Create box feedback: simple, complete, personalized

A simple component to create box feedback wich you can:

Show simple message;
Show message with personalized buttons and personalized function to trigger on click of the buttons;

View on Github Download zip

Try me

var feedback = {
    title:"My box title",
    msg:"This component is cool!!!", //you can pass simple text or html
    close: true
};
$uiMrFeedback.open(feedback);

Try me (with all options)

var functionClose = function(param){
    console.log("Instance dismissed with the param: " + param);  
};
var functionConnected = function(param1,param2){
    console.log(param1 + "! You have pressed the button " + param2);
};
var feedback = {
    title:"My box title",
    msg:"This component is cool!!!",
    theme:"ios",
    modal:true, /*with modal:true the animation option is disabled*/
    close: true,
    closeText:"Chiudi",
    fnClose:{
        func:functionClose,
        params:["Ok!"]
    },
    btnAction:[
        {
            text:"Button Yeah",
            func: functionConnected,
            params:["Excellent","Yeah"]
        },
        {
            text:"Button Noooo",
            func: functionConnected,
            params:["Damn","Noooo"]
        }
    ];
};
$uiMrFeedback.open(feedback);

Method 1: Install with bower

$ bower install mrFeedback

Method 2: Download the files

Download

<link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="dist/mrFeedback.css" />
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="dist/mrFeedback.js"></script>

Inject module "mrFeedbackMdl" into your app
Inject to your controller the $uiMrFeedback provider.

create a new instance of the plugin with the method $uiMrFeedback.open and passing the option's object:

var feedback = {
    title:"My box title", //mandatory
    msg:"This component is cool!!!", //mandatory
    close: true
};
var instance = $uiMrFeedback.open(feedback);

if you want you can change the value of the dynamic options for the instance:
```
instance.msg = "Message modified dynamically";
```
you can destroy the box also using the instance method .remove():
```
instance.remove();
```

Configuration	Possible value	Description
mrFeedbackConfigProvider.defaultTheme	bootstrap mac windows10 ios android facebook post-it post-it-alert	You can set the default theme value in your module configuration doing: mrFeedbackConfigProvider.defaultTheme = "facebook"
mrFeedbackConfigProvider.defaultAnimation	fade zoom slide-left slide-top flip	You can set the default animation value in your module configuration doing: mrFeedbackConfigProvider.defaultAnimation = "zoom"

Argument	Possible value	Description
title		A string that represent the title of the feedback.
msg		A string (text or html) that represent the message of the feedback.
theme	bootstrap mac windows10 ios android facebook post-it post-it-alert	A string that represent the theme used to render the box. The default theme depends on the browser user agent: mac: for Mac computer windows10: for Windows computer and devices ios: for iOS devices android: for Android devices You can overrides this default value in your module configuration doing: mrFeedbackConfigProvider.defaultTheme = "facebook"
notificationType	default warning danger info success	A string that represent the color of notification box. Valid only with theme = notification
notificationDelay		A number that represents the delay (in milliseconds) after which the box should close automatically. Valid only with theme = notification
animation	fade zoom slide-left slide-top flip	A string that represent the animation used to open and close the box. The default value is "fade". You can overrides this default value in your module configuration doing: mrFeedbackConfigProvider.defaultAnimation = "zoom". With modal:true the animation option is disabled.
modal	true false	A boolean use to open the box in modal state (with a layer that block interaction with other element). With modal:true the animation option is disabled.
close	true false	A boolean use to show or not the standard close button.
closeText		A string that represent the text visible in the close button.
fnClose		An object in wich you can configure a function that will run when the standard button close is clicked. The field of the object are: func: the function that you want to run params: an array of params that will be the arguments of the function
btnAction		An array of object that describe the buttons you want to create inside the box. Every object must contains: a field text with the string you want to put in the button a field func with the function you want to trigger when the button are clicked a field params that is an array of the arguments for the function
appendTo		A string that represent a jQuery element to append the box. Default is "body".

Title

Message

Theme

Notification type

Notification delay (in milliseconds - if empty box remain open)

Animation

Close button

Show

Buttons Action

Show

An array of object that describe the buttons you want to create inside the box. Every button must contains:

a field "text" with the string you want to put in the button
a field "func" with the function you want to trigger if the button are clicked
a field "params" that is an array of the arguments for the function

In this example we are created 2 button that print 2 different phrases in console

Auto Close

Is possible to set an option (autoClose:true) if you want dismiss the box when one of the button's action is clicked (works only with the option btnAction active)

Active

Create Feedback

You created instance n. {{$index}}

Title

Message

Close button

Show

Auto close

Active

Animation*

Theme*

Close instance

The field with * are not modifieble after the creation of the box.