angular-bootstrap-feedback

Overview

A user feedback modal with screenshot and highlighting functionality built around Angular 1.5+.

Features

• Angular component(s)
• Modal popup
• User can create Screenshots
• User can highlight screenshots
• Include custom inputs

View Demo

Requirements

• angular - 1.5.0+
• bootstrap - 3.3.6+
• angular-bootstrap - 1.3.2+
• html2canvas - 0.4.1+

Installation

Bower

bower install angular-bootstrap-feedback --save

npm

npm install angular-bootstrap-feedback --save

Manual

Or, you can download source files straight from this repo, they're located in the dist folder. Just include the minified version of both .js and .css files.

• src/css/angular.bootstrap.feedback.styles.css
• src/lib/angular.bootstrap.feedback.output.js
• src/lib/angular.bootstrap.feedback.templates.js

Or, Minified

• dist/angular.bootstrap.feedback.min.css
• dist/angular.bootstrap.feedback.min.js

Usage

Make sure you have the required bower_components and included them in your html page as well as the angular-bootstrap-feedback files:

1. Injection

Inject the angular.bootstrap.feedback provider into your module

    var myApp = angular.module('myApp', [
        'angular.bootstrap.feedback'
    ]);

2. Options

Create an options object on the controller. All options are optional, see below for a detailed explanation of each property.

    myApp.controller('appController', ['angularBootstrapFeedbackFactory',
 
    function(feedbackFactory) {
        $scope.options = {
          modalTitle: 'Feedback',
          takeScreenshotButtonText: "Take screenshot",
          submitButtonText: "Submit",
          sendFeedbackButtonText: "Send Feedback",
          cancelScreenshotOptionsButtonText: "Cancel",
          takeScreenshotOptionsButtonText: "Take Screenshot",
          takeScreenshotButtonPressed: takeScreenshotButtonPressed,
          submitButtonPressed: submitButtonPressed,
          sendFeedbackButtonPressed: sendFeedbackButtonPressed,
          cancelScreenshotOptionsButtonPressed: cancelScreenshotOptionsButtonPressed,
          takeScreenshotOptionsButtonPressed: takeScreenshotOptionsButtonPressed,
          screenshotTaken: screenshotTaken,
          highlightDrawn: highlightDrawn,
          modalDismissed: modalDismissed
        }
 
        function takeScreenshotButtonPressed() {}
        function submitButtonPressed(form) {}
        function sendFeedbackButtonPressed() {}
        function cancelScreenshotOptionsButtonPressed() {}
        function takeScreenshotOptionsButtonPressed() {}
        function screenshotTaken(image, canvas) {}
        function highlightDrawn(element) {}
        function modalDismissed() {}
    }]);

3. Setup HTML

The angular components are split into 2 elements:

• angular-bootstrap-feedback
• angular-bootstrap-feedback-screenshot

Please note, the screenshot component is not required.

    <angular-bootstrap-feedback options="options">
        <div class="row">
          <div class="col-lg-6">
            // Your custom inputs here
          </div>
 
          <div class="col-lg-6">
            <angular-bootstrap-feedback-screenshot></angular-bootstrap-feedback-screenshot>
          </div>
        </div>
      </angular-bootstrap-feedback>

Options

Text properties

Event callbacks

Contributing

Pull requests and issues are welcome.