Skip to content

Commit 103c456

Browse files
committed
api and minimal setup examples
1 parent 2f63931 commit 103c456

12 files changed

+154
-10
lines changed
File renamed without changes.
File renamed without changes.
File renamed without changes.

examples/invoke_api.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3+
<title>feedback.js api example</title>
4+
<link rel="stylesheet" href="css/feedback.css" type="text/css" media="screen" />
5+
6+
</head>
7+
8+
<body>
9+
10+
<div class="hero-unit">
11+
<h1>Feedback.js</h1>
12+
<p>This page serves as an example for how feedback.js can be invoked through the API instead of the default feedback button</p>
13+
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
14+
</div>
15+
16+
<!-- Example row of columns -->
17+
<div class="row">
18+
<div class="span4">
19+
<h2>Heading</h2>
20+
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
21+
<p><a class="btn" href="#_">View details »</a></p>
22+
</div>
23+
<div class="span4">
24+
<h2>Heading</h2>
25+
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
26+
<p><a class="btn" href="#_">View details »</a></p>
27+
</div>
28+
<div class="span4">
29+
<h2>Heading</h2>
30+
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
31+
<p><a class="btn" href="#_">View details »</a></p>
32+
</div>
33+
</div>
34+
35+
<hr>
36+
37+
<footer>
38+
<p>Feedback.js - tell us more!</p>
39+
</footer>
40+
</div> <!-- /container -->
41+
42+
<!-- Le javascript -->
43+
<!-- Le javascript -->
44+
<script src="js/jquery.js"></script>
45+
<script src="js/feedback.js"></script>
46+
47+
<script type="text/javascript">
48+
$(document).ready(function() {
49+
var api = Feedback({
50+
h2cPath:'js/html2canvas.js',
51+
appendTo: document.createElement("div"), // don't add feedback button to page
52+
});
53+
54+
console.log(api);
55+
56+
// instead, let's open it after 2 seconds
57+
window.setTimeout(function(){
58+
api.open();
59+
}, 2000);
60+
61+
});
62+
</script>
63+
64+
</body></html>

feedbackjs-example/js/feedback.js examples/js/feedback.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ window.Feedback = function( options ) {
204204
modal.appendChild( modalBody );
205205
modal.appendChild( modalFooter );
206206

207-
button.parentNode.appendChild( modal );
207+
document.body.appendChild( modal );
208208
},
209209

210210

@@ -286,8 +286,12 @@ window.Feedback = function( options ) {
286286
button.setAttribute(H2C_IGNORE, true);
287287

288288
button.onclick = returnMethods.open;
289-
290-
((options.appendTo !== undefined) ? options.appendTo : document.body).appendChild( button );
289+
290+
if ( options.appendTo !== null ) {
291+
((options.appendTo !== undefined) ? options.appendTo : document.body).appendChild( button );
292+
}
293+
294+
return returnMethods;
291295
};
292296
window.Feedback.Page = function() {};
293297
window.Feedback.Page.prototype = {
File renamed without changes.
File renamed without changes.

examples/minimal.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
3+
<title>feedback.js minimal example</title>
4+
<link rel="stylesheet" href="css/feedback.css" type="text/css" media="screen" />
5+
6+
</head>
7+
8+
<body onload="Feedback({h2cPath:'js/html2canvas.js'});">
9+
10+
<div class="hero-unit">
11+
<h1>Feedback.js</h1>
12+
<p>This page serves as an example for how feedback.js is used. Click on the Feedback button on the bottom right of the screen to try it out</p>
13+
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
14+
</div>
15+
16+
<!-- Example row of columns -->
17+
<div class="row">
18+
<div class="span4">
19+
<h2>Heading</h2>
20+
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
21+
<p><a class="btn" href="#_">View details »</a></p>
22+
</div>
23+
<div class="span4">
24+
<h2>Heading</h2>
25+
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
26+
<p><a class="btn" href="#_">View details »</a></p>
27+
</div>
28+
<div class="span4">
29+
<h2>Heading</h2>
30+
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
31+
<p><a class="btn" href="#_">View details »</a></p>
32+
</div>
33+
</div>
34+
35+
<hr>
36+
37+
<footer>
38+
<p>Feedback.js - tell us more!</p>
39+
</footer>
40+
</div> <!-- /container -->
41+
42+
<!-- Le javascript -->
43+
<script src="js/feedback.js"></script>
44+
45+
</body></html>

feedback.js

+7-3
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ window.Feedback = function( options ) {
204204
modal.appendChild( modalBody );
205205
modal.appendChild( modalFooter );
206206

207-
button.parentNode.appendChild( modal );
207+
document.body.appendChild( modal );
208208
},
209209

210210

@@ -286,8 +286,12 @@ window.Feedback = function( options ) {
286286
button.setAttribute(H2C_IGNORE, true);
287287

288288
button.onclick = returnMethods.open;
289-
290-
((options.appendTo !== undefined) ? options.appendTo : document.body).appendChild( button );
289+
290+
if ( options.appendTo !== null ) {
291+
((options.appendTo !== undefined) ? options.appendTo : document.body).appendChild( button );
292+
}
293+
294+
return returnMethods;
291295
};
292296
window.Feedback.Page = function() {};
293297
window.Feedback.Page.prototype = {

0 commit comments

Comments
 (0)