feedback.min.js

// feedback.js
// 2013, Kázmér Rapavi, https://github.com/ivoviz/feedback
// Licensed under the MIT license.

(function(e){e.feedback=function(t){function s(){canDraw=false;e(document).off("mouseenter mouseleave",".feedback-helper");e(document).off("mouseup keyup");e(document).off("mousedown",".feedback-setblackout");e(document).off("mousedown",".feedback-sethighlight");e(document).off("mousedown click","#feedback-close");e(document).off("mousedown","#feedback-canvas");e(document).off("click","#feedback-highlighter-next");e(document).off("click","#feedback-highlighter-back");e(document).off("click","#feedback-welcome-next");e(document).off("click","#feedback-overview-back");e(document).off("mouseleave","body");e(document).off("mouseenter",".feedback-helper");e(document).off("selectstart dragstart",document);e("#feedback-module").off("click",".feedback-wizard-close,.feedback-close-btn");e(document).off("click","#feedback-submit");if(n.highlightElement){e(document).off("click","#feedback-canvas");e(document).off("mousemove","#feedback-canvas")}e('[data-highlighted="true"]').removeAttr("data-highlight-id").removeAttr("data-highlighted");e("#feedback-module").remove();e(".feedback-btn").show();n.onClose.call(this)}function o(t,n){n=typeof n!=="undefined"?n:true;t.clearRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());t.fillStyle="rgba(102,102,102,0.5)";t.fillRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")if(n)u(t,parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")t.clearRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="blackout"){t.fillStyle="rgba(0,0,0,1)";t.fillRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())}})}function u(e,t,r,i,s){e.strokeStyle=n.strokeStyle;e.shadowColor=n.shadowColor;e.shadowOffsetX=n.shadowOffsetX;e.shadowOffsetY=n.shadowOffsetY;e.shadowBlur=n.shadowBlur;e.lineJoin=n.lineJoin;e.lineWidth=n.lineWidth;e.strokeRect(t,r,i,s);e.shadowOffsetX=0;e.shadowOffsetY=0;e.shadowBlur=0;e.lineWidth=1}var n=e.extend({ajaxURL:"",postBrowserInfo:true,postHTML:true,postURL:true,proxy:undefined,letterRendering:false,initButtonText:"Send feedback",strokeStyle:"black",shadowColor:"black",shadowOffsetX:1,shadowOffsetY:1,shadowBlur:10,lineJoin:"bevel",lineWidth:3,html2canvasURL:"html2canvas.js",tpl:{description:'<div id="feedback-welcome"><div class="feedback-logo">Feedback</div><p>Feedback lets you send us suggestions about our products. We welcome problem reports, feature ideas and general comments.</p><p>Start by writing a brief description:</p><textarea id="feedback-note-tmp"></textarea><p>Next we\'ll let you identify areas of the page related to your description.</p><button id="feedback-welcome-next" class="feedback-next-btn feedback-btn-gray">Next</button><div id="feedback-welcome-error">Please enter a description.</div><div class="feedback-wizard-close"></div></div>',highlighter:'<div id="feedback-highlighter"><div class="feedback-logo">Feedback</div><p>Click and drag on the page to help us better understand your feedback. You can move this dialog if it\'s in the way.</p><button class="feedback-sethighlight feedback-active"><div class="ico"></div><span>Highlight</span></button><label>Highlight areas relevant to your feedback.</label><button class="feedback-setblackout"><div class="ico"></div><span>Black out</span></button><label class="lower">Black out any personal information.</label><div class="feedback-buttons"><button id="feedback-highlighter-next" class="feedback-next-btn feedback-btn-gray">Next</button><button id="feedback-highlighter-back" class="feedback-back-btn feedback-btn-gray">Back</button></div><div class="feedback-wizard-close"></div></div>',overview:'<div id="feedback-overview"><div class="feedback-logo">Feedback</div><div id="feedback-overview-description"><div id="feedback-overview-description-text"><h3>Description</h3><h3 class="feedback-additional">Additional info</h3><div id="feedback-additional-none"><span>None</span></div><div id="feedback-browser-info"><span>Browser Info</span></div><div id="feedback-page-info"><span>Page Info</span></div><div id="feedback-page-structure"><span>Page Structure</span></div></div></div><div id="feedback-overview-screenshot"><h3>Screenshot</h3></div><div class="feedback-buttons"><button id="feedback-submit" class="feedback-submit-btn feedback-btn-blue">Submit</button><button id="feedback-overview-back" class="feedback-back-btn feedback-btn-gray">Back</button></div><div id="feedback-overview-error">Please enter a description.</div><div class="feedback-wizard-close"></div></div>',submitSuccess:'<div id="feedback-submit-success"><div class="feedback-logo">Feedback</div><p>Thank you for your feedback. We value every piece of feedback we receive.</p><p>We cannot respond individually to every one, but we will use your comments as we strive to improve your experience.</p><button class="feedback-close-btn feedback-btn-blue">OK</button><div class="feedback-wizard-close"></div></div>',submitError:'<div id="feedback-submit-error"><div class="feedback-logo">Feedback</div><p>Sadly an error occured while sending your feedback. Please try again.</p><button class="feedback-close-btn feedback-btn-blue">OK</button><div class="feedback-wizard-close"></div></div>'},onClose:function(){},screenshotStroke:true,highlightElement:true,initialBox:false},t);var r=false;var i=!!window.HTMLCanvasElement;if(i){e("body").append('<button class="feedback-btn feedback-btn-gray">'+n.initButtonText+"</button>");e(document).on("click",".feedback-btn",function(){e(this).hide();if(!r){e.getScript(n.html2canvasURL,function(){r=true})}var t=false,i="",a=e(document).height(),f=e(document).width(),l='<div id="feedback-module">';if(n.initialBox){l+=n.tpl.description}l+=n.tpl.highlighter+n.tpl.overview+'<canvas id="feedback-canvas"></canvas><div id="feedback-helpers"></div><input id="feedback-note" name="feedback-note" type="hidden"></div>';e("body").append(l);moduleStyle={position:"absolute",left:"0px",top:"0px"};canvasAttr={width:f,height:a};e("#feedback-module").css(moduleStyle);e("#feedback-canvas").attr(canvasAttr).css("z-index","30000");if(!n.initialBox){e("#feedback-highlighter-back").remove();t=true;e("#feedback-canvas").css("cursor","crosshair");e("#feedback-helpers").show();e("#feedback-welcome").hide();e("#feedback-highlighter").show()}e("#feedback-highlighter").on("mousedown",function(t){var n=e(this).addClass("feedback-draggable"),r=n.outerHeight(),i=n.outerWidth(),s=n.offset().top+r-t.pageY,o=n.offset().left+i-t.pageX;n.css("z-index",4e4).parents().on("mousemove",function(t){_top=t.pageY+s-r;_left=t.pageX+o-i;_bottom=r-t.pageY;_right=i-t.pageX;if(_left<0)_left=0;if(_top<0)_top=0;if(_right>e(window).width())_left=e(window).width()-i;if(_left>e(window).width()-i)_left=e(window).width()-i;if(_bottom>e(document).height())_top=e(document).height()-r;if(_top>e(document).height()-r)_top=e(document).height()-r;e(".feedback-draggable").offset({top:_top,left:_left}).on("mouseup",function(){e(this).removeClass("feedback-draggable")})});t.preventDefault()}).on("mouseup",function(){e(this).removeClass("feedback-draggable");e(this).parents().off("mousemove mousedown")});var c=e("#feedback-canvas")[0].getContext("2d");c.fillStyle="rgba(102,102,102,0.5)";c.fillRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());rect={};drag=false;highlight=1,post={};if(n.postBrowserInfo){post.browser={};post.browser.appCodeName=navigator.appCodeName;post.browser.appName=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=[];e.each(navigator.plugins,function(e){post.browser.plugins.push(navigator.plugins[e].name)});e("#feedback-browser-info").show()}if(n.postURL){post.url=encodeURIComponent(document.URL);e("#feedback-page-info").show()}if(n.postHTML){post.html=encodeURIComponent(e("html").html());e("#feedback-page-structure").show()}if(!n.postBrowserInfo&&!n.postURL&&!n.postHTML)e("#feedback-additional-none").show();e(document).on("mousedown","#feedback-canvas",function(n){if(t){rect.startX=n.pageX-e(this).offset().left;rect.startY=n.pageY-e(this).offset().top;rect.w=0;rect.h=0;drag=true}});e(document).on("mouseup",function(){if(t){drag=false;var n=rect.startY,r=rect.startX,i=rect.w,s=rect.h;dtype="highlight";if(i==0||s==0)return;if(i<0){r+=i;i*=-1}if(s<0){n+=s;s*=-1}if(n+s>e(document).height())s=e(document).height()-n;if(r+i>e(document).width())i=e(document).width()-r;if(highlight==0)dtype="blackout";e("#feedback-helpers").append('<div class="feedback-helper" data-type="'+dtype+'" data-time="'+Date.now()+'" style="position:absolute;top:'+n+"px;left:"+r+"px;width:"+i+"px;height:"+s+'px;z-index:30000;"></div>');o(c);rect.w=0}});e(document).on("mousemove",function(n){if(t&&drag){e("#feedback-highlighter").css("cursor","default");rect.w=n.pageX-e("#feedback-canvas").offset().left-rect.startX;rect.h=n.pageY-e("#feedback-canvas").offset().top-rect.startY;c.clearRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());c.fillStyle="rgba(102,102,102,0.5)";c.fillRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")u(c,parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});if(highlight==1){u(c,rect.startX,rect.startY,rect.w,rect.h);c.clearRect(rect.startX,rect.startY,rect.w,rect.h)}e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")c.clearRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="blackout"){c.fillStyle="rgba(0,0,0,1)";c.fillRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())}});if(highlight==0){c.fillStyle="rgba(0,0,0,0.5)";c.fillRect(rect.startX,rect.startY,rect.w,rect.h)}}});if(n.highlightElement){var h=[],p=[],d=0;e(document).on("mousemove click","#feedback-canvas",function(n){if(t){o(c);p=[];e("#feedback-canvas").css("cursor","crosshair");e("* :not(body,script,iframe,div,section,.feedback-btn,#feedback-module *)").each(function(){if(e(this).attr("data-highlighted")==="true")return;if(n.pageX>e(this).offset().left&&n.pageX<e(this).offset().left+e(this).width()&&n.pageY>e(this).offset().top+parseInt(e(this).css("padding-top"),10)&&n.pageY<e(this).offset().top+e(this).height()+parseInt(e(this).css("padding-top"),10)){p.push(e(this))}});var r=p[p.length-1];if(r&&!drag){e("#feedback-canvas").css("cursor","pointer");var i=r.offset().left-2,s=r.offset().top-2,a=r.width()+parseInt(r.css("padding-left"),10)+parseInt(r.css("padding-right"),10)+6,f=r.height()+parseInt(r.css("padding-top"),10)+parseInt(r.css("padding-bottom"),10)+6;if(highlight==1){u(c,i,s,a,f);c.clearRect(i,s,a,f);dtype="highlight"}e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")c.clearRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});if(highlight==0){dtype="blackout";c.fillStyle="rgba(0,0,0,0.5)";c.fillRect(i,s,a,f)}e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="blackout"){c.fillStyle="rgba(0,0,0,1)";c.fillRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())}});if(n.type=="click"&&n.pageX==rect.startX&&n.pageY==rect.startY){e("#feedback-helpers").append('<div class="feedback-helper" data-highlight-id="'+d+'" data-type="'+dtype+'" data-time="'+Date.now()+'" style="position:absolute;top:'+s+"px;left:"+i+"px;width:"+a+"px;height:"+f+'px;z-index:30000;"></div>');h.push(d);++d;o(c)}}}})}e(document).on("mouseleave","body,#feedback-canvas",function(){o(c)});e(document).on("mouseenter",".feedback-helper",function(){o(c)});e(document).on("click","#feedback-welcome-next",function(){if(e("#feedback-note").val().length>0){t=true;e("#feedback-canvas").css("cursor","crosshair");e("#feedback-helpers").show();e("#feedback-welcome").hide();e("#feedback-highlighter").show()}else{e("#feedback-welcome-error").show()}});e(document).on("mouseenter mouseleave",".feedback-helper",function(t){if(drag)return;rect.w=0;rect.h=0;if(t.type==="mouseenter"){e(this).css("z-index","30001");e(this).append('<div class="feedback-helper-inner" style="width:'+(e(this).width()-2)+"px;height:"+(e(this).height()-2)+'px;position:absolute;margin:1px;"></div>');e(this).append('<div id="feedback-close"></div>');e(this).find("#feedback-close").css({top:-1*(e(this).find("#feedback-close").height()/2)+"px",left:e(this).width()-e(this).find("#feedback-close").width()/2+"px"});if(e(this).attr("data-type")=="blackout"){c.clearRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());c.fillStyle="rgba(102,102,102,0.5)";c.fillRect(0,0,e("#feedback-canvas").width(),e("#feedback-canvas").height());e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")u(c,parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});e(".feedback-helper").each(function(){if(e(this).attr("data-type")=="highlight")c.clearRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())});c.clearRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height());c.fillStyle="rgba(0,0,0,0.75)";c.fillRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height());ignore=e(this).attr("data-time");e(".feedback-helper").each(function(){if(e(this).attr("data-time")==ignore)return true;if(e(this).attr("data-type")=="blackout"){c.fillStyle="rgba(0,0,0,1)";c.fillRect(parseInt(e(this).css("left"),10),parseInt(e(this).css("top"),10),e(this).width(),e(this).height())}})}}else{e(this).css("z-index","30000");e(this).children().remove();if(e(this).attr("data-type")=="blackout"){o(c)}}});e(document).on("click","#feedback-close",function(){if(n.highlightElement&&e(this).parent().attr("data-highlight-id"))var t=e(this).parent().attr("data-highlight-id");e(this).parent().remove();if(n.highlightElement&&t)e('[data-highlight-id="'+t+'"]').removeAttr("data-highlighted").removeAttr("data-highlight-id");o(c)});e("#feedback-module").on("click",".feedback-wizard-close,.feedback-close-btn",function(){s()});e(document).on("keyup",function(e){if(e.keyCode==27)s()});e(document).on("selectstart dragstart",document,function(e){e.preventDefault()});e(document).on("click","#feedback-highlighter-back",function(){t=false;e("#feedback-canvas").css("cursor","default");e("#feedback-helpers").hide();e("#feedback-highlighter").hide();e("#feedback-welcome-error").hide();e("#feedback-welcome").show()});e(document).on("mousedown",".feedback-sethighlight",function(){highlight=1;e(this).addClass("feedback-active");e(".feedback-setblackout").removeClass("feedback-active")});e(document).on("mousedown",".feedback-setblackout",function(){highlight=0;e(this).addClass("feedback-active");e(".feedback-sethighlight").removeClass("feedback-active")});e(document).on("click","#feedback-highlighter-next",function(){t=false;e("#feedback-canvas").css("cursor","default");var r=e(document).scrollTop(),s=e(window).height();e("#feedback-helpers").hide();e("#feedback-highlighter").hide();if(!n.screenshotStroke)o(c,false);html2canvas(e("body"),{onrendered:function(t){if(!n.screenshotStroke)o(c);_canvas=e('<canvas id="feedback-canvas-tmp" width="'+f+'" height="'+s+'"/>').hide().appendTo("body");_ctx=_canvas.get(0).getContext("2d");_ctx.drawImage(t,0,r,f,s,0,0,f,s);i=_canvas.get(0).toDataURL();e(document).scrollTop(r);e("#feedback-canvas-tmp").remove();e("#feedback-overview").show();e("#feedback-overview-description-text>textarea").remove();e("#feedback-overview-screenshot>img").remove();e('<textarea id="feedback-overview-note">'+e("#feedback-note").val()+"</textarea>").insertAfter("#feedback-overview-description-text h3:eq(0)");e("#feedback-overview-screenshot").append('<img class="feedback-screenshot" src="'+i+'" />')},proxy:n.proxy,letterRendering:n.letterRendering})});e(document).on("click","#feedback-overview-back",function(n){t=true;e("#feedback-canvas").css("cursor","crosshair");e("#feedback-overview").hide();e("#feedback-helpers").show();e("#feedback-highlighter").show();e("#feedback-overview-error").hide()});e(document).on("keyup","#feedback-note-tmp,#feedback-overview-note",function(t){var n;if(t.target.id==="feedback-note-tmp")n=e("#feedback-note-tmp").val();else{n=e("#feedback-overview-note").val();e("#feedback-note-tmp").val(n)}e("#feedback-note").val(n)});e(document).on("click","#feedback-submit",function(){t=false;if(e("#feedback-note").val().length>0){e("#feedback-submit-success,#feedback-submit-error").remove();e("#feedback-overview").hide();post.img=i;post.note=e("#feedback-note").val();e.ajax({url:n.ajaxURL,dataType:"json",type:"POST",data:post,success:function(){e("#feedback-module").append(n.tpl.submitSuccess)},error:function(){e("#feedback-module").append(n.tpl.submitError)}})}else{e("#feedback-overview-error").show()}})})}}})(jQuery)