Feedback
Feedback lets you send us suggestions about our products. We welcome problem reports, feature ideas and general comments.
Start by writing a brief description:
Next we\'ll let you identify areas of the page related to your description.
Please enter a description.
',
78 | highlighter:'Feedback
Click and drag on the page to help us better understand your feedback. You can move this dialog if it\'s in the way.
Feedback
Description
Additional info
None
Browser Info
Page Info
Page Structure
Screenshot
Please enter a description.
Feedback
Thank you for your feedback. We value every piece of feedback we receive.
We cannot respond individually to every one, but we will use your comments as we strive to improve your experience.
Feedback
Sadly an error occured while sending your feedback. Please try again.
';r.initialBox&&(k+=r.tpl.description);k+=r.tpl.highlighter+r.tpl.overview+'
';
82 | a("body").append(k);moduleStyle={position:"absolute",left:"0px",top:"0px"};canvasAttr={width:g,height:d};a("#feedback-module").css(moduleStyle);a("#feedback-canvas").attr(canvasAttr).css("z-index","30000");r.initialBox||(a("#feedback-highlighter-back").remove(),n=!0,a("#feedback-canvas").css("cursor","crosshair"),a("#feedback-helpers").show(),a("#feedback-welcome").hide(),a("#feedback-highlighter").show());a("#feedback-highlighter").on("mousedown",function(b){var c=a(this).addClass("feedback-draggable"),
83 | d=c.outerHeight(),e=c.outerWidth(),g=c.offset().top+d-b.pageY,h=c.offset().left+e-b.pageX;c.css("z-index",4E4).parents().on("mousemove",function(b){_top=b.pageY+g-d;_left=b.pageX+h-e;_bottom=d-b.pageY;_right=e-b.pageX;0>_left&&(_left=0);0>_top&&(_top=0);_right>a(window).width()&&(_left=a(window).width()-e);_left>a(window).width()-e&&(_left=a(window).width()-e);_bottom>a(document).height()&&(_top=a(document).height()-d);_top>a(document).height()-d&&(_top=a(document).height()-d);a(".feedback-draggable").offset({top:_top,
84 | left:_left}).on("mouseup",function(){a(this).removeClass("feedback-draggable")})});b.preventDefault()}).on("mouseup",function(){a(this).removeClass("feedback-draggable");a(this).parents().off("mousemove mousedown")});var e=a("#feedback-canvas")[0].getContext("2d");e.fillStyle="rgba(102,102,102,0.5)";e.fillRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height());rect={};drag=!1;highlight=1;post={};r.postBrowserInfo&&(post.browser={},post.browser.appCodeName=navigator.appCodeName,post.browser.appName=
85 | navigator.appName,post.browser.appVersion=navigator.appVersion,post.browser.cookieEnabled=navigator.cookieEnabled,post.browser.onLine=navigator.onLine,post.browser.platform=navigator.platform,post.browser.userAgent=navigator.userAgent,post.browser.plugins=[],a.each(navigator.plugins,function(a){post.browser.plugins.push(navigator.plugins[a].name)}),a("#feedback-browser-info").show());r.postURL&&(post.url=document.URL,a("#feedback-page-info").show());r.postHTML&&(post.html=a("html").html(),a("#feedback-page-structure").show());
86 | r.postBrowserInfo||r.postURL||r.postHTML||a("#feedback-additional-none").show();a(document).on("mousedown","#feedback-canvas",function(b){n&&(rect.startX=b.pageX-a(this).offset().left,rect.startY=b.pageY-a(this).offset().top,rect.w=0,rect.h=0,drag=!0)});a(document).on("mouseup",function(){if(n){drag=!1;var b=rect.startY,c=rect.startX,d=rect.w,f=rect.h;dtype="highlight";0!=d&&0!=f&&(0>d&&(c+=d,d*=-1),0>f&&(b+=f,f*=-1),b+f>a(document).height()&&(f=a(document).height()-b),c+d>a(document).width()&&(d=
87 | a(document).width()-c),0==highlight&&(dtype="blackout"),a("#feedback-helpers").append(''),x(e),rect.w=0)}});a(document).on("mousemove",function(b){n&&drag&&(a("#feedback-highlighter").css("cursor","default"),rect.w=b.pageX-a("#feedback-canvas").offset().left-rect.startX,rect.h=b.pageY-a("#feedback-canvas").offset().top-rect.startY,
88 | e.clearRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),e.fillStyle="rgba(102,102,102,0.5)",e.fillRect(0,0,a("#feedback-canvas").width(),a("#feedback-canvas").height()),a(".feedback-helper").each(function(){"highlight"==a(this).attr("data-type")&&A(e,parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height())}),1==highlight&&(A(e,rect.startX,rect.startY,rect.w,rect.h),e.clearRect(rect.startX,rect.startY,rect.w,rect.h)),a(".feedback-helper").each(function(){"highlight"==
89 | a(this).attr("data-type")&&e.clearRect(parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height())}),a(".feedback-helper").each(function(){"blackout"==a(this).attr("data-type")&&(e.fillStyle="rgba(0,0,0,1)",e.fillRect(parseInt(a(this).css("left"),10),parseInt(a(this).css("top"),10),a(this).width(),a(this).height()))}),0==highlight&&(e.fillStyle="rgba(0,0,0,0.5)",e.fillRect(rect.startX,rect.startY,rect.w,rect.h)))});if(r.highlightElement){var b=[],q=[],t=0;a(document).on("mousemove click",
90 | "#feedback-canvas",function(c){if(n){x(e);q=[];a("#feedback-canvas").css("cursor","crosshair");a("* :not(body,script,iframe,div,section,.feedback-btn,#feedback-module *)").each(function(){"true"!==a(this).attr("data-highlighted")&&c.pageX>a(this).offset().left&&c.pageX
27 |
40 |
41 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/base64.js:
--------------------------------------------------------------------------------
1 | // This code was written by Tyler Akins and has been placed in the
2 | // public domain. It would be nice if you left this header intact.
3 | // Base64 code from Tyler Akins -- http://rumkin.com
4 |
5 | var Base64 = (function () {
6 | var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
7 |
8 | var obj = {
9 | /**
10 | * Encodes a string in base64
11 | * @param {String} input The string to encode in base64.
12 | */
13 | encode: function (input) {
14 | var output = "";
15 | var chr1, chr2, chr3;
16 | var enc1, enc2, enc3, enc4;
17 | var i = 0;
18 |
19 | do {
20 | chr1 = input.charCodeAt(i++);
21 | chr2 = input.charCodeAt(i++);
22 | chr3 = input.charCodeAt(i++);
23 |
24 | enc1 = chr1 >> 2;
25 | enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
26 | enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
27 | enc4 = chr3 & 63;
28 |
29 | if (isNaN(chr2)) {
30 | enc3 = enc4 = 64;
31 | } else if (isNaN(chr3)) {
32 | enc4 = 64;
33 | }
34 |
35 | output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) +
36 | keyStr.charAt(enc3) + keyStr.charAt(enc4);
37 | } while (i < input.length);
38 |
39 | return output;
40 | },
41 |
42 | /**
43 | * Decodes a base64 string.
44 | * @param {String} input The string to decode.
45 | */
46 | decode: function (input) {
47 | var output = "";
48 | var chr1, chr2, chr3;
49 | var enc1, enc2, enc3, enc4;
50 | var i = 0;
51 |
52 | // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
53 | input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
54 |
55 | do {
56 | enc1 = keyStr.indexOf(input.charAt(i++));
57 | enc2 = keyStr.indexOf(input.charAt(i++));
58 | enc3 = keyStr.indexOf(input.charAt(i++));
59 | enc4 = keyStr.indexOf(input.charAt(i++));
60 |
61 | chr1 = (enc1 << 2) | (enc2 >> 4);
62 | chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
63 | chr3 = ((enc3 & 3) << 6) | enc4;
64 |
65 | output = output + String.fromCharCode(chr1);
66 |
67 | if (enc3 != 64) {
68 | output = output + String.fromCharCode(chr2);
69 | }
70 | if (enc4 != 64) {
71 | output = output + String.fromCharCode(chr3);
72 | }
73 | } while (i < input.length);
74 |
75 | return output;
76 | }
77 | };
78 |
79 | return obj;
80 | })();
81 | if (typeof exports !== 'undefined') {
82 | // Github = exports;
83 | module.exports = Base64;
84 | } else {
85 | window.Base64 = Base64;
86 | }
87 |
88 |
--------------------------------------------------------------------------------
/src/feedback.css:
--------------------------------------------------------------------------------
1 | .feedback-btn {
2 | font-size: 14px;
3 | width: auto;
4 | padding: 10px 20px;
5 | letter-spacing: 1px;
6 | -webkit-font-smoothing: antialiased;
7 | font-size: 18px;
8 | font-family: Helvetica, sans-serif;
9 | outline: 0;
10 | background-clip: padding-box;
11 | z-index: 40000;
12 | }
13 | .feedback-btn.feedback-placement-bottom {
14 | position: fixed;
15 | bottom: -3px;
16 | right: 60px;
17 | }
18 | .feedback-btn.feedback-placement-left {
19 | position: fixed;
20 | left: -40px;
21 | top: 50%;
22 | -ms-transform: rotate(90deg); /* IE 9 */
23 | -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
24 | transform: rotate(90deg);
25 | height: 50px;
26 | }
27 | #feedback-module p { font-size: 13px }
28 | #feedback-note-tmp {
29 | width: 444px;
30 | height: auto;
31 | min-height: 90px;
32 | outline: none;
33 | font-family: Arial,sans-serif;
34 | padding: 4px;
35 | }
36 | #feedback-note-tmp:focus,
37 | #feedback-overview-note:focus { border: 1px solid #64b7cc }
38 | #feedback-canvas {
39 | position: absolute;
40 | top: 0;
41 | left: 0;
42 | }
43 | #feedback-welcome {
44 | top: 30%;
45 | left: 50%;
46 | margin-left: -270px;
47 | display: block;
48 | position: fixed;
49 | }
50 | .feedback-logo {
51 | background: url(icons.png) -0px -0px no-repeat;
52 | width: 34px;
53 | margin-bottom: 16px;
54 | font-size: 16px;
55 | font-weight: normal;
56 | line-height: 32px;
57 | padding-left: 40px;
58 | height: 32px;
59 | }
60 | .feedback-next-btn {
61 | width: 72px;
62 | height: 29px;
63 | line-height: 27px;
64 | float: right;
65 | font-size: 13px;
66 | padding: 0 8px;
67 | }
68 | .feedback-back-btn {
69 | width: 72px;
70 | height: 29px;
71 | line-height: 27px;
72 | float: right;
73 | font-size: 13px;
74 | padding: 0 8px;
75 | margin-right: 20px;
76 | }
77 | .feedback-submit-btn {
78 | width: 72px;
79 | height: 29px;
80 | line-height: 27px;
81 | float: right;
82 | font-size: 13px;
83 | padding: 0 8px;
84 | }
85 | .feedback-close-btn {
86 | width: 72px;
87 | height: 29px;
88 | line-height: 27px;
89 | float: right;
90 | font-size: 13px;
91 | padding: 0 8px;
92 | }
93 | .feedback-helper {
94 | background: rgba(0,0,0,0);
95 | cursor: default;
96 | }
97 | .feedback-helper[data-type="highlight"]>.feedback-helper-inner { background: rgba(0,68,255,0.1) }
98 | #feedback-close {
99 | cursor: pointer;
100 | position: absolute;
101 | background: url(icons.png) -0px -64px;
102 | width: 30px;
103 | height: 30px;
104 | }
105 | .feedback-wizard-close {
106 | cursor: pointer;
107 | position: absolute;
108 | top: 2px;
109 | right: 2px;
110 | background: url(icons.png) -0px -34px;
111 | width: 30px;
112 | height: 30px;
113 | opacity: 0.65;
114 | }
115 | .feedback-wizard-close:hover { opacity: 1 }
116 | #feedback-welcome-error,
117 | #feedback-overview-error {
118 | display: none;
119 | color: #f13e3e;
120 | float: right;
121 | margin-right: 30px;
122 | font-size: 13px;
123 | line-height: 29px;
124 | }
125 | #feedback-overview-error { margin-top: 20px }
126 | #feedback-highlighter {
127 | display: none;
128 | bottom: 100px;
129 | right: 100px;
130 | position: fixed;
131 | width: 540px;
132 | height: 275px;
133 | }
134 | #feedback-overview {
135 | display: none;
136 | top: 10%;
137 | left: 50%;
138 | margin-left: -420px;
139 | position: fixed;
140 | width: 840px!important;
141 | height: auto;
142 | }
143 | #feedback-submit-error,
144 | #feedback-submit-success {
145 | top: 30%;
146 | left: 50%;
147 | margin-left: -300px;
148 | display: block;
149 | position: fixed;
150 | width: 600px;
151 | height: auto;
152 | }
153 | .feedback-btn-gray {
154 | text-align: center;
155 | cursor: pointer;
156 | font-family: 'Open sans';
157 | border: 1px solid #dcdcdc;
158 | border: 1px solid rgba(0,0,0,0.1);
159 | color: #444;
160 | border-radius: 2px;
161 | background-color: #f5f5f5;
162 | background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
163 | background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
164 | background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
165 | background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
166 | background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
167 | }
168 | .feedback-btn-gray:hover {
169 | color: #333;
170 | border: 1px solid #c6c6c6;
171 | background-color: #f8f8f8;
172 | background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
173 | background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
174 | background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
175 | background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
176 | background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
177 | }
178 | .feedback-btn-blue {
179 | text-align: center;
180 | cursor: pointer;
181 | border-radius: 2px;
182 | background-color: #357ae8;
183 | background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
184 | background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
185 | background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
186 | background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
187 | background-image: linear-gradient(top,#4d90fe,#357ae8);
188 | border: 1px solid #2f5bb7;
189 | color: #fff;
190 | }
191 | #feedback-note-tmp,
192 | #feedback-overview-note { resize: none }
193 | #feedback-welcome,
194 | #feedback-highlighter,
195 | #feedback-overview,
196 | #feedback-submit-success,
197 | #feedback-submit-error {
198 | font-family: Helvetica,Arial,sans-serif;
199 | z-index: 40000;
200 | background: #fff;
201 | border: 1px solid rgba(0,0,0,.333);
202 | padding: 30px 42px;
203 | width: 540px;
204 | border: 1px solid rgba(0,0,0,.333);
205 | outline: 0;
206 | -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.2);
207 | -moz-box-shadow: 0 4px 16px rgba(0,0,0,.2);
208 | box-shadow: 0 4px 16px rgba(0,0,0,.2);
209 | background: #fff;
210 | background-clip: padding-box;
211 | box-sizing: border-box;
212 | -moz-box-sizing: border-box;
213 | -webkit-box-sizing: border-box;
214 | -webkit-transform: translateZ();
215 | }
216 | .feedback-sethighlight,
217 | .feedback-setblackout {
218 | -webkit-box-shadow: none;
219 | -moz-box-shadow: none;
220 | box-shadow: none;
221 | background-color: #f5f5f5;
222 | background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
223 | background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
224 | background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
225 | background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
226 | background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
227 | color: #444;
228 | border: 1px solid #dcdcdc;
229 | border: 1px solid rgba(0,0,0,0.1);
230 | -webkit-border-radius: 2px;
231 | -moz-border-radius: 2px;
232 | border-radius: 2px;
233 | cursor: default;
234 | font-size: 11px;
235 | font-weight: bold;
236 | text-align: center;
237 | white-space: nowrap;
238 | margin-right: 16px;
239 | height: 30px;
240 | line-height: 28px;
241 | min-width: 90px;
242 | outline: 0;
243 | padding: 0 8px;
244 | display: inline-block;
245 | float: left;
246 | }
247 | .feedback-setblackout {
248 | margin-top: 10px;
249 | clear: both;
250 | }
251 | .feedback-sethighlight div {
252 | background: url(icons.png) 0px -94px;
253 | width: 16px;
254 | height: 16px;
255 | margin-top: 7px;
256 | float: left;
257 | }
258 | .feedback-setblackout div {
259 | background: url(icons.png) -16px -94px;
260 | width: 16px;
261 | height: 16px;
262 | margin-top: 7px;
263 | float: left;
264 | }
265 | .feedback-sethighlight:hover,
266 | .feedback-setblackout:hover {
267 | -webkit-box-shadow: none;
268 | -moz-box-shadow: none;
269 | box-shadow: none;
270 | background-color: #f8f8f8;
271 | background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
272 | background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
273 | background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
274 | background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
275 | background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
276 | border: 1px solid #c6c6c6;
277 | color: #333;
278 | }
279 | .feedback-active {
280 | -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
281 | -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
282 | box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
283 | background-color: #eee;
284 | background-image: -webkit-linear-gradient(top,#eee,#e0e0e0);
285 | background-image: -moz-linear-gradient(top,#eee,#e0e0e0);
286 | background-image: -ms-linear-gradient(top,#eee,#e0e0e0);
287 | background-image: -o-linear-gradient(top,#eee,#e0e0e0);
288 | background-image: linear-gradient(top,#eee,#e0e0e0);
289 | border: 1px solid #ccc;
290 | color: #333;
291 | }
292 | #feedback-highlighter label {
293 | float: left;
294 | margin: 0 0 0 10px;
295 | line-height: 30px;
296 | font-size: 13px;
297 | font-weight: normal;
298 | }
299 | #feedback-highlighter label.lower { margin-top: 10px }
300 | .feedback-buttons {
301 | float: right;
302 | margin-top: 20px;
303 | clear: both;
304 | }
305 | #feedback-module h3 {
306 | font-weight: bold;
307 | font-size: 15px;
308 | margin: 8px 0;
309 | }
310 | .feedback-additional { margin-bottom: 20px!important }
311 | #feedback-overview-description { float: left }
312 | #feedback-overview-note {
313 | width: 314px;
314 | padding: 4px;
315 | height: 90px;
316 | outline: none;
317 | font-family: Helvetica, Arial,sans-serif;
318 | }
319 | #feedback-overview-screenshot { float: right }
320 | .feedback-screenshot {
321 | max-width: 396px;
322 | padding: 1px;
323 | border: 1px solid #adadad;
324 | }
325 | #feedback-overview-description-text span {
326 | font-size: 14px;
327 | margin: 8px 0;
328 | color: #666;
329 | padding-left: 10px;
330 | background: url(icons.png) -30px -34px no-repeat;
331 | margin-left: 26px;
332 | }
333 | #feedback-browser-info,
334 | #feedback-page-info,
335 | #feedback-page-structure,
336 | #feedback-additional-none {
337 | margin-top: 16px;
338 | display: none;
339 | }
340 |
--------------------------------------------------------------------------------
/src/feedback.js:
--------------------------------------------------------------------------------
1 | // feedback.js
2 | // 2013, Kázmér Rapavi, https://github.com/ivoviz/feedback
3 | // Licensed under the MIT license.
4 |
5 | (function($){
6 |
7 | $.feedback = function(options) {
8 |
9 | var settings = $.extend({
10 | imgurURL: '',
11 | serverURL: '',
12 | githubpath: '',
13 | placement: 'bottom',
14 | hexColor: '#146eb4',
15 | postBrowserInfo: true,
16 | postHTML: true,
17 | postURL: true,
18 | proxy: undefined,
19 | letterRendering: false,
20 | initButtonText: 'Feedback',
21 | strokeStyle: 'black',
22 | shadowColor: 'black',
23 | shadowOffsetX: 1,
24 | shadowOffsetY: 1,
25 | shadowBlur: 10,
26 | lineJoin: 'bevel',
27 | lineWidth: 3,
28 | html2canvasURL: 'html2canvas.js',
29 | tpl: {
30 | description: 'Feedback
Feedback lets you send us suggestions about our products. We welcome problem reports, feature ideas and general comments.
Start by writing a brief description:
Next we\'ll let you identify areas of the page related to your description.
Please enter a description.
Feedback
Click and drag on the page to help us better understand your feedback. You can move this dialog if it\'s in the way.
Feedback
Description
Additional info
None
Browser Info
Page Info
Page Structure
Screenshot
Please enter a description.
Feedback
Thank you for your feedback. We value every piece of feedback we receive.
We cannot respond individually to every one, but we will use your comments as we strive to improve your experience.
Feedback
Sadly an error occured while sending your feedback. Please try again.
';
62 |
63 | if (settings.initialBox) {
64 | tpl += settings.tpl.description;
65 | }
66 |
67 | tpl += settings.tpl.highlighter + settings.tpl.overview + '
';
68 |
69 | $('body').eq(0).append(tpl);
70 |
71 | moduleStyle = {
72 | 'position': 'absolute',
73 | 'left': '0px',
74 | 'top': '0px'
75 | };
76 | canvasAttr = {
77 | 'width': w,
78 | 'height': h
79 | };
80 |
81 | $('#feedback-module').css(moduleStyle);
82 | $('#feedback-canvas').attr(canvasAttr).css('z-index', '30000');
83 |
84 | if (!settings.initialBox) {
85 | $('#feedback-highlighter-back').remove();
86 | canDraw = true;
87 | $('#feedback-canvas').css('cursor', 'crosshair');
88 | $('#feedback-helpers').show();
89 | $('#feedback-welcome').hide();
90 | $('#feedback-highlighter').show();
91 | }
92 |
93 | $('#feedback-highlighter').on('mousedown', function(e) {
94 | var $d = $(this).addClass('feedback-draggable'),
95 | drag_h = $d.outerHeight(),
96 | drag_w = $d.outerWidth(),
97 | pos_y = $d.offset().top + drag_h - e.pageY,
98 | pos_x = $d.offset().left + drag_w - e.pageX;
99 | $d.css('z-index', 40000).parents().on('mousemove', function(e) {
100 | _top = e.pageY + pos_y - drag_h;
101 | _left = e.pageX + pos_x - drag_w;
102 | _bottom = drag_h - e.pageY;
103 | _right = drag_w - e.pageX;
104 |
105 | if (_left < 0) _left = 0;
106 | if (_top < 0) _top = 0;
107 | if (_right > $(window).width())
108 | _left = $(window).width() - drag_w;
109 | if (_left > $(window).width() - drag_w)
110 | _left = $(window).width() - drag_w;
111 | if (_bottom > $(document).height())
112 | _top = $(document).height() - drag_h;
113 | if (_top > $(document).height() - drag_h)
114 | _top = $(document).height() - drag_h;
115 |
116 | $('.feedback-draggable').offset({
117 | top: _top,
118 | left: _left
119 | }).on("mouseup", function() {
120 | $(this).removeClass('feedback-draggable');
121 | });
122 | });
123 | e.preventDefault();
124 | }).on('mouseup', function(){
125 | $(this).removeClass('feedback-draggable');
126 | $(this).parents().off('mousemove mousedown');
127 | });
128 |
129 | var ctx = $('#feedback-canvas')[0].getContext('2d');
130 |
131 | ctx.fillStyle = 'rgba(102,102,102,0.5)';
132 | ctx.fillRect(0, 0, $('#feedback-canvas').width(), $('#feedback-canvas').height());
133 |
134 | rect = {};
135 | drag = false;
136 | highlight = 1,
137 | post = {};
138 |
139 | if (settings.postBrowserInfo) {
140 | post.browser = {};
141 | post.browser.appCodeName = navigator.appCodeName;
142 | post.browser.appName = navigator.appName;
143 | post.browser.appVersion = navigator.appVersion;
144 | post.browser.cookieEnabled = navigator.cookieEnabled;
145 | post.browser.onLine = navigator.onLine;
146 | post.browser.platform = navigator.platform;
147 | post.browser.userAgent = navigator.userAgent;
148 | post.browser.plugins = [];
149 |
150 | $.each(navigator.plugins, function(i) {
151 | post.browser.plugins.push(navigator.plugins[i].name);
152 | });
153 | $('#feedback-browser-info').show();
154 | }
155 |
156 | if (settings.postURL) {
157 | post.url = document.URL;
158 | $('#feedback-page-info').show();
159 | }
160 |
161 | if (settings.postHTML) {
162 | post.html = $('html').html();
163 | $('#feedback-page-structure').show();
164 | }
165 |
166 | if (!settings.postBrowserInfo && !settings.postURL && !settings.postHTML)
167 | $('#feedback-additional-none').show();
168 |
169 | $(document).on('mousedown', '#feedback-canvas', function(e) {
170 | if (canDraw) {
171 |
172 | rect.startX = e.pageX - $(this).offset().left;
173 | rect.startY = e.pageY - $(this).offset().top;
174 | rect.w = 0;
175 | rect.h = 0;
176 | drag = true;
177 | }
178 | });
179 |
180 | $(document).on('mouseup', function(){
181 | if (canDraw) {
182 | drag = false;
183 |
184 | var dtop = rect.startY,
185 | dleft = rect.startX,
186 | dwidth = rect.w,
187 | dheight = rect.h;
188 | dtype = 'highlight';
189 |
190 | if (dwidth == 0 || dheight == 0) return;
191 |
192 | if (dwidth < 0) {
193 | dleft += dwidth;
194 | dwidth *= -1;
195 | }
196 | if (dheight < 0) {
197 | dtop += dheight;
198 | dheight *= -1;
199 | }
200 |
201 | if (dtop + dheight > $(document).height())
202 | dheight = $(document).height() - dtop;
203 | if (dleft + dwidth > $(document).width())
204 | dwidth = $(document).width() - dleft;
205 |
206 | if (highlight == 0)
207 | dtype = 'blackout';
208 |
209 | $('#feedback-helpers').append('');
210 |
211 | redraw(ctx);
212 | rect.w = 0;
213 | }
214 |
215 | });
216 |
217 | $(document).on('mousemove', function(e) {
218 | if (canDraw && drag) {
219 | $('#feedback-highlighter').css('cursor', 'default');
220 |
221 | rect.w = (e.pageX - $('#feedback-canvas').offset().left) - rect.startX;
222 | rect.h = (e.pageY - $('#feedback-canvas').offset().top) - rect.startY;
223 |
224 | ctx.clearRect(0, 0, $('#feedback-canvas').width(), $('#feedback-canvas').height());
225 | ctx.fillStyle = 'rgba(102,102,102,0.5)';
226 | ctx.fillRect(0, 0, $('#feedback-canvas').width(), $('#feedback-canvas').height());
227 | $('.feedback-helper').each(function() {
228 | if ($(this).attr('data-type') == 'highlight')
229 | drawlines(ctx, parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
230 | });
231 | if (highlight==1) {
232 | drawlines(ctx, rect.startX, rect.startY, rect.w, rect.h);
233 | ctx.clearRect(rect.startX, rect.startY, rect.w, rect.h);
234 | }
235 | $('.feedback-helper').each(function() {
236 | if ($(this).attr('data-type') == 'highlight')
237 | ctx.clearRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
238 | });
239 | $('.feedback-helper').each(function() {
240 | if ($(this).attr('data-type') == 'blackout') {
241 | ctx.fillStyle = 'rgba(0,0,0,1)';
242 | ctx.fillRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height())
243 | }
244 | });
245 | if (highlight == 0) {
246 | ctx.fillStyle = 'rgba(0,0,0,0.5)';
247 | ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
248 | }
249 | }
250 | });
251 |
252 | if (settings.highlightElement) {
253 | var highlighted = [],
254 | tmpHighlighted = [],
255 | hidx = 0;
256 |
257 | $(document).on('mousemove click', '#feedback-canvas',function(e) {
258 | if (canDraw) {
259 | redraw(ctx);
260 | tmpHighlighted = [];
261 |
262 | $('#feedback-canvas').css('cursor', 'crosshair');
263 |
264 | $('* :not(body,script,iframe,div,section,.feedback-btn,#feedback-module *)').each(function(){
265 | if ($(this).attr('data-highlighted') === 'true')
266 | return;
267 |
268 | if (e.pageX > $(this).offset().left && e.pageX < $(this).offset().left + $(this).width() && e.pageY > $(this).offset().top + parseInt($(this).css('padding-top'), 10) && e.pageY < $(this).offset().top + $(this).height() + parseInt($(this).css('padding-top'), 10)) {
269 | tmpHighlighted.push($(this));
270 | }
271 | });
272 |
273 | var $toHighlight = tmpHighlighted[tmpHighlighted.length - 1];
274 |
275 | if ($toHighlight && !drag) {
276 | $('#feedback-canvas').css('cursor', 'pointer');
277 |
278 | var _x = $toHighlight.offset().left - 2,
279 | _y = $toHighlight.offset().top - 2,
280 | _w = $toHighlight.width() + parseInt($toHighlight.css('padding-left'), 10) + parseInt($toHighlight.css('padding-right'), 10) + 6,
281 | _h = $toHighlight.height() + parseInt($toHighlight.css('padding-top'), 10) + parseInt($toHighlight.css('padding-bottom'), 10) + 6;
282 |
283 | if (highlight == 1) {
284 | drawlines(ctx, _x, _y, _w, _h);
285 | ctx.clearRect(_x, _y, _w, _h);
286 | dtype = 'highlight';
287 | }
288 |
289 | $('.feedback-helper').each(function() {
290 | if ($(this).attr('data-type') == 'highlight')
291 | ctx.clearRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
292 | });
293 |
294 | if (highlight == 0) {
295 | dtype = 'blackout';
296 | ctx.fillStyle = 'rgba(0,0,0,0.5)';
297 | ctx.fillRect(_x, _y, _w, _h);
298 | }
299 |
300 | $('.feedback-helper').each(function() {
301 | if ($(this).attr('data-type') == 'blackout') {
302 | ctx.fillStyle = 'rgba(0,0,0,1)';
303 | ctx.fillRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
304 | }
305 | });
306 |
307 | if (e.type == 'click' && e.pageX == rect.startX && e.pageY == rect.startY) {
308 | $('#feedback-helpers').append('');
309 | highlighted.push(hidx);
310 | ++hidx;
311 | redraw(ctx);
312 | }
313 | }
314 | }
315 | });
316 | }
317 |
318 | $(document).on('mouseleave', 'body,#feedback-canvas', function() {
319 | redraw(ctx);
320 | });
321 |
322 | $(document).on('mouseenter', '.feedback-helper', function() {
323 | redraw(ctx);
324 | });
325 |
326 | $(document).on('click', '#feedback-welcome-next', function() {
327 | if ($('#feedback-note').val().length > 0) {
328 | canDraw = true;
329 | $('#feedback-canvas').css('cursor', 'crosshair');
330 | $('#feedback-helpers').show();
331 | $('#feedback-welcome').hide();
332 | $('#feedback-highlighter').show();
333 | }
334 | else {
335 | $('#feedback-welcome-error').show();
336 | }
337 | });
338 |
339 | $(document).on('mouseenter mouseleave', '.feedback-helper', function(e) {
340 | if (drag)
341 | return;
342 |
343 | rect.w = 0;
344 | rect.h = 0;
345 |
346 | if (e.type === 'mouseenter') {
347 | $(this).css('z-index', '30001');
348 | $(this).append('');
349 | $(this).append('');
350 | $(this).find('#feedback-close').css({
351 | 'top' : -1 * ($(this).find('#feedback-close').height() / 2) + 'px',
352 | 'left' : $(this).width() - ($(this).find('#feedback-close').width() / 2) + 'px'
353 | });
354 |
355 | if ($(this).attr('data-type') == 'blackout') {
356 | /* redraw white */
357 | ctx.clearRect(0, 0, $('#feedback-canvas').width(), $('#feedback-canvas').height());
358 | ctx.fillStyle = 'rgba(102,102,102,0.5)';
359 | ctx.fillRect(0, 0, $('#feedback-canvas').width(), $('#feedback-canvas').height());
360 | $('.feedback-helper').each(function() {
361 | if ($(this).attr('data-type') == 'highlight')
362 | drawlines(ctx, parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
363 | });
364 | $('.feedback-helper').each(function() {
365 | if ($(this).attr('data-type') == 'highlight')
366 | ctx.clearRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
367 | });
368 |
369 | ctx.clearRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height())
370 | ctx.fillStyle = 'rgba(0,0,0,0.75)';
371 | ctx.fillRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height());
372 |
373 | ignore = $(this).attr('data-time');
374 |
375 | /* redraw black */
376 | $('.feedback-helper').each(function() {
377 | if ($(this).attr('data-time') == ignore)
378 | return true;
379 | if ($(this).attr('data-type') == 'blackout') {
380 | ctx.fillStyle = 'rgba(0,0,0,1)';
381 | ctx.fillRect(parseInt($(this).css('left'), 10), parseInt($(this).css('top'), 10), $(this).width(), $(this).height())
382 | }
383 | });
384 | }
385 | }
386 | else {
387 | $(this).css('z-index','30000');
388 | $(this).children().remove();
389 | if ($(this).attr('data-type') == 'blackout') {
390 | redraw(ctx);
391 | }
392 | }
393 | });
394 |
395 | $(document).on('click', '#feedback-close', function() {
396 | if (settings.highlightElement && $(this).parent().attr('data-highlight-id'))
397 | var _hidx = $(this).parent().attr('data-highlight-id');
398 |
399 | $(this).parent().remove();
400 |
401 | if (settings.highlightElement && _hidx)
402 | $('[data-highlight-id="' + _hidx + '"]').removeAttr('data-highlighted').removeAttr('data-highlight-id');
403 |
404 | redraw(ctx);
405 | });
406 |
407 | $('#feedback-module').on('click', '.feedback-wizard-close,.feedback-close-btn', function() {
408 | close();
409 | });
410 |
411 | $(document).on('keyup', function(e) {
412 | if (e.keyCode == 27)
413 | close();
414 | });
415 |
416 | $(document).on('selectstart dragstart', document, function(e) {
417 | e.preventDefault();
418 | });
419 |
420 | $(document).on('click', '#feedback-highlighter-back', function() {
421 | canDraw = false;
422 | $('#feedback-canvas').css('cursor', 'default');
423 | $('#feedback-helpers').hide();
424 | $('#feedback-highlighter').hide();
425 | $('#feedback-welcome-error').hide();
426 | $('#feedback-welcome').show();
427 | });
428 |
429 | $(document).on('mousedown', '.feedback-sethighlight', function() {
430 | highlight = 1;
431 | $(this).addClass('feedback-active');
432 | $('.feedback-setblackout').removeClass('feedback-active');
433 | });
434 |
435 | $(document).on('mousedown', '.feedback-setblackout', function() {
436 | highlight = 0;
437 | $(this).addClass('feedback-active');
438 | $('.feedback-sethighlight').removeClass('feedback-active');
439 | });
440 |
441 | $(document).on('click', '#feedback-highlighter-next', function() {
442 | canDraw = false;
443 | $('#feedback-canvas').css('cursor', 'default');
444 | var sy = $(document).scrollTop(),
445 | dh = $(window).height();
446 | $('#feedback-helpers').hide();
447 | $('#feedback-highlighter').hide();
448 | if (!settings.screenshotStroke)
449 | redraw(ctx, false);
450 |
451 | html2canvas($('body').eq(0), {
452 | onrendered: function(canvas) {
453 | if (!settings.screenshotStroke)
454 | redraw(ctx);
455 |
456 | _canvas = $('').hide().appendTo($('body').eq(0));
457 | _ctx = _canvas.get(0).getContext('2d');
458 | _ctx.drawImage(canvas, 0, sy, w, dh, 0, 0, w, dh);
459 | img = _canvas.get(0).toDataURL();
460 | $(document).scrollTop(sy);
461 |
462 | $('#feedback-canvas-tmp').remove();
463 | $('#feedback-overview').show();
464 | $('#feedback-overview-description-text>textarea').remove();
465 | $('#feedback-overview-screenshot>img').remove();
466 | $('').insertAfter('#feedback-overview-description-text h3:eq(0)');
467 | $('#feedback-overview-screenshot').append('