forked from niklasvh/feedback.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
feedback.min.js
31 lines (30 loc) · 11.9 KB
/
feedback.min.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
feedback.js <http://experiments.hertzen.com/jsfeedback/>
Copyright (c) 2012 Niklas von Hertzen. All rights reserved.
http://www.twitter.com/niklasvh
Released under MIT License
*/
(function(b,d,g){if(b.Feedback===g){var o=function(a){for(var b=0,c=a.length;b<c;b++){var d=Array.prototype.pop.call(a);d!==g&&d.parentNode!==null&&d.parentNode.removeChild(d)}},y=function(){var a=d.createElement("div"),b=3;for(a.className="feedback-loader";b--;)a.appendChild(d.createElement("span"));return a},q=function(a){for(var b;(b=a.firstChild)!==null&&a.removeChild(b););},l=function(a,b){var c=d.createElement(a);c.appendChild(d.createTextNode(b));return c},w=function(a,d){if(a.onload===g)if(a.onreadystatechange!==
g){var c=function(){a.readyState!=="loaded"&&a.readyState!=="complete"?b.setTimeout(c,250):d()};b.setTimeout(c,250)}else b.console.log("ERROR: We can't track when script is loaded");else return d},h,f=d.createElement("div");b.Feedback=function(a){a=a||{};a.label=a.label||"Send Feedback";a.header=a.header||"Send Feedback";a.url=a.url||"/";a.adapter=a.adapter||new b.Feedback.XHR(a.url);a.nextLabel=a.nextLabel||"Continue";a.reviewLabel=a.reviewLabel||"Review";a.sendLabel=a.sendLabel||"Send";a.closeLabel=
a.closeLabel||"Close";a.messageSuccess=a.messageSuccess||"Your feedback was sent succesfully.";a.messageError=a.messageError||"There was an error sending your feedback to the server.";if(a.pages===g)a.pages=[new b.Feedback.Form,new b.Feedback.Screenshot(a),new b.Feedback.Review];var i,c,e,j=d.createElement("div"),n={open:function(){var r=a.pages.length;for(e=0;e<r;e++)a.pages[e]instanceof b.Feedback.Review||a.pages[e].render();var m=l("a","\u00d7"),k=d.createElement("div"),g=d.createElement("div");
c=d.createElement("div");d.body.appendChild(j);m.className="feedback-close";m.onclick=n.close;m.href="#";i.disabled=!0;k.appendChild(m);k.appendChild(l("h3",a.header));k.className="feedback-header";f.className="feedback-body";q(f);e=0;f.appendChild(a.pages[e++].dom);h=l("button",a.nextLabel);h.className="feedback-btn";h.onclick=function(){if(!(e>0&&a.pages[e-1].end(c)===!1))if(q(f),e===r)n.send(a.adapter);else{a.pages[e].start(c,k,g,h);a.pages[e]instanceof b.Feedback.Review&&a.pages[e].render(a.pages);
f.appendChild(a.pages[e++].dom);if(e===r)h.firstChild.nodeValue=a.sendLabel;if(a.pages[e]instanceof b.Feedback.Review)h.firstChild.nodeValue=a.reviewLabel}};g.className="feedback-footer";g.appendChild(h);c.className="feedback-modal";c.setAttribute("data-html2canvas-ignore",!0);c.appendChild(k);c.appendChild(f);c.appendChild(g);d.body.appendChild(c)},close:function(){i.disabled=!1;o([c,j]);e>0&&a.pages[e-1].end(c);for(var b=0,d=a.pages.length;b<d;b++)a.pages[b].close();return!1},send:function(c){if(!(c instanceof
b.Feedback.Send))throw Error("Adapter is not an instance of Feedback.Send");for(var i=0,e=a.pages.length,g=[],j=0,l;i<e;i++)if((l=a.pages[i].data())!==!1)g[j++]=l;h.disabled=!0;q(f);f.appendChild(y());c.send(g,function(b){q(f);h.disabled=!1;h.firstChild.nodeValue=a.closeLabel;h.onclick=function(){n.close();return!1};b===!0?f.appendChild(d.createTextNode(a.messageSuccess)):f.appendChild(d.createTextNode(a.messageError))})}};j.className="feedback-glass";j.style.pointerEvents="none";j.setAttribute("data-html2canvas-ignore",
!0);a=a||{};i=l("button",a.label);i.className="feedback-btn feedback-bottom-right";i.setAttribute("data-html2canvas-ignore",!0);i.onclick=n.open;a.appendTo!==null&&(a.appendTo!==g?a.appendTo:d.body).appendChild(i);return n};b.Feedback.Page=function(){};b.Feedback.Page.prototype={render:function(a){this.dom=a},start:function(){},close:function(){},data:function(){return!1},review:function(){return null},end:function(){return!0}};b.Feedback.Send=function(){};b.Feedback.Send.prototype={send:function(){}};
b.Feedback.Form=function(a){this.elements=a||[{type:"textarea",name:"Issue",label:"Please describe the issue you are experiencing",required:!1}];this.dom=d.createElement("div")};b.Feedback.Form.prototype=new b.Feedback.Page;b.Feedback.Form.prototype.render=function(){var a=0,b=this.elements.length,c;for(q(this.dom);a<b;a++)switch(c=this.elements[a],c.type){case "textarea":this.dom.appendChild(l("label",c.label+":"+(c.required===!0?" *":""))),this.dom.appendChild(c.element=d.createElement("textarea"))}return this};
b.Feedback.Form.prototype.end=function(){for(var a=0,b=this.elements.length,c;a<b;a++)if(c=this.elements[a],c.required===!0&&c.element.value.length===0)return c.element.className="feedback-error",!1;else c.element.className="";return!0};b.Feedback.Form.prototype.data=function(){if(this._data!==g)return this._data;for(var a=0,b=this.elements.length,c,d={};a<b;a++)c=this.elements[a],d[c.name]=c.element.value;return this._data=d};b.Feedback.Form.prototype.review=function(a){for(var b=0,c,e=this.elements.length;b<
e;b++)c=this.elements[b],c.element.value.length>0&&(a.appendChild(l("label",c.name+":")),a.appendChild(d.createTextNode(c.element.value.length)),a.appendChild(d.createElement("hr")));return a};b.Feedback.Review=function(){this.dom=d.createElement("div");this.dom.className="feedback-review"};b.Feedback.Review.prototype=new b.Feedback.Page;b.Feedback.Review.prototype.render=function(a){var b=0,c=a.length;for(q(this.dom);b<c;b++)a[b].review(this.dom);return this};b.Feedback.Screenshot=function(a){this.options=
a||{};this.options.blackoutClass=this.options.blackoutClass||"feedback-blackedout";this.options.highlightClass=this.options.highlightClass||"feedback-highlighted";this.h2cDone=!1};b.Feedback.Screenshot.prototype=new b.Feedback.Page;b.Feedback.Screenshot.prototype.end=function(a){a.className=a.className.replace(/feedback\-animate\-toside/,"");d.body.removeEventListener("mousemove",this.mouseMoveEvent,!1);d.body.removeEventListener("click",this.mouseClickEvent,!1);o([this.h2cCanvas]);this.h2cDone=!1};
b.Feedback.Screenshot.prototype.close=function(){o([this.blackoutBox,this.highlightContainer,this.highlightBox,this.highlightClose]);o(d.getElementsByClassName(this.options.blackoutClass));o(d.getElementsByClassName(this.options.highlightClass))};b.Feedback.Screenshot.prototype.start=function(a,i,c,e){if(this.h2cDone){q(this.dom);e.disabled=!1;var j=this,n=!0;this.mouseMoveEvent=function(c){if(c.target!==p&&(c.target.className.indexOf(j.options.blackoutClass)!==-1||c.target.className.indexOf(j.options.highlightClass)!==
-1)){var d=parseInt(c.target.style.left,10)+parseInt(c.target.style.width,10),d=Math.max(d,10),d=Math.min(d,b.innerWidth-15),f=parseInt(c.target.style.top,10),f=Math.max(f,10);m.style.left=d+"px";m.style.top=f+"px";o=c.target;x();p=g}else if(c.target.nodeName==="BODY"||c.target===m||c.target===a||c.target===e||c.target.parentNode===a||c.target.parentNode===i)x(),p=c.target;else if(A(),c.target!==p)p=c.target,b.clearTimeout(r),r=b.setTimeout(function(){var a=p.getBoundingClientRect(),c;n===!1?c=h:
(c=k,c.width=a.width,c.height=a.height,z.drawImage(j.h2cCanvas,b.pageXOffset+a.left,b.pageYOffset+a.top,a.width,a.height,0,0,a.width,a.height));c.setAttribute("data-exclude",!1);c.style.left=b.pageXOffset+a.left+"px";c.style.top=b.pageYOffset+a.top+"px";c.style.width=a.width+"px";c.style.height=a.height+"px"},100)};this.mouseClickEvent=function(a){a.preventDefault();if(n===!1){if(h.getAttribute("data-exclude")==="false")a=d.createElement("div"),a.className=j.options.blackoutClass,a.style.left=h.style.left,
a.style.top=h.style.top,a.style.width=h.style.width,a.style.height=h.style.height,d.body.appendChild(a),p=g}else if(k.getAttribute("data-exclude")==="false")k.className+=" "+j.options.highlightClass,k.className=k.className.replace(/feedback\-highlight\-element/g,""),j.highlightBox=k=d.createElement("canvas"),z=k.getContext("2d"),k.className+=" feedback-highlight-element",d.body.appendChild(k),x(),p=g};this.highlightClose=l("div","\u00d7");this.blackoutBox=d.createElement("div");this.highlightBox=
d.createElement("canvas");this.highlightContainer=d.createElement("div");var r,m=this.highlightClose,k=this.highlightBox,h=this.blackoutBox,f=this.highlightContainer,o,z=k.getContext("2d"),w=function(a){a.preventDefault();t.className.indexOf("active")===-1?(t.className+=" active",u.className=u.className.replace(/active/g,"")):(u.className+=" active",t.className=t.className.replace(/active/g,""));n=!n},x=function(){B(h);B(k);b.clearTimeout(r)},B=function(a){a.style.left="-5px";a.style.top="-5px";a.style.width=
"0px";a.style.height="0px";a.setAttribute("data-exclude",!0)},A=function(){m.style.left="-50px";m.style.top="-50px"},t=l("a","Blackout"),u=l("a","Highlight"),p;a.className+=" feedback-animate-toside";m.id="feedback-highlight-close";m.addEventListener("click",function(){o.parentNode.removeChild(o);A()},!1);d.body.appendChild(m);this.h2cCanvas.className="feedback-canvas";d.body.appendChild(this.h2cCanvas);var v=[u,t];this.dom.appendChild(l("p","Highlight or blackout important information"));for(var s=
0;s<2;s++)v[s].className="feedback-btn feedback-btn-small "+(s===0?"active":"feedback-btn-inverse"),v[s].href="#",v[s].onclick=w,this.dom.appendChild(v[s]),this.dom.appendChild(d.createTextNode(" "));f.id="feedback-highlight-container";f.style.width=this.h2cCanvas.width+"px";f.style.height=this.h2cCanvas.height+"px";this.highlightBox.className+=" feedback-highlight-element";this.blackoutBox.id="feedback-blackout-element";d.body.appendChild(this.highlightBox);f.appendChild(this.blackoutBox);d.body.appendChild(f);
d.body.addEventListener("mousemove",this.mouseMoveEvent,!1);d.body.addEventListener("click",this.mouseClickEvent,!1)}else{var C=arguments,j=this;e.disabled!==!0&&this.dom.appendChild(y());e.disabled=!0;b.setTimeout(function(){j.start.apply(j,C)},500)}};b.Feedback.Screenshot.prototype.render=function(){this.dom=d.createElement("div");var a,i=this,c=this.options,e=function(){try{c.onrendered=c.onrendered||function(a){i.h2cCanvas=a;i.h2cDone=!0},b.html2canvas([d.body],c)}catch(a){i.h2cDone=!0,b.console.log("Error in html2canvas: "+
a.message)}};if(b.html2canvas===g&&a===g){a=d.createElement("script");a.src=c.h2cPath||"libs/html2canvas.js";a.onerror=function(){b.console.log("Failed to load html2canvas library, check that the path is correctly defined")};a.onload=w(a,function(){b.html2canvas===g?b.console.log("Loaded html2canvas, but library not found"):(b.html2canvas.logging=b.Feedback.debug,e())});var f=d.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}else e();return this};b.Feedback.Screenshot.prototype.data=
function(){if(this._data!==g)return this._data;if(this.h2cCanvas!==g){var a=this.h2cCanvas.getContext("2d"),b,c;a.fillStyle="#000";Array.prototype.slice.call(d.getElementsByClassName("feedback-blackedout"),0).forEach(function(b){b=b.getBoundingClientRect();a.fillRect(b.left,b.top,b.width,b.height)});var e=Array.prototype.slice.call(d.getElementsByClassName("feedback-highlighted"),0);if(e.length>0)b=d.createElement("canvas"),c=b.getContext("2d"),b.width=this.h2cCanvas.width,b.height=this.h2cCanvas.height,
c.drawImage(this.h2cCanvas,0,0),a.fillStyle="#777",a.globalAlpha=0.5,a.fillRect(0,0,this.h2cCanvas.width,this.h2cCanvas.height),a.beginPath(),e.forEach(function(b){var c=parseInt(b.style.left,10),d=parseInt(b.style.top,10),e=parseInt(b.style.width,10),b=parseInt(b.style.height,10);a.moveTo(c+5,d);a.lineTo(c+e-5,d);a.quadraticCurveTo(c+e,d,c+e,d+5);a.lineTo(c+e,d+b-5);a.quadraticCurveTo(c+e,d+b,c+e-5,d+b);a.lineTo(c+5,d+b);a.quadraticCurveTo(c,d+b,c,d+b-5);a.lineTo(c,d+5);a.quadraticCurveTo(c,d,c+
5,d)}),a.closePath(),a.clip(),a.globalAlpha=1,a.drawImage(b,0,0);try{return this._data=this.h2cCanvas.toDataURL()}catch(f){}}};b.Feedback.Screenshot.prototype.review=function(a){var b=this.data();if(b!==g){var c=new Image;c.src=b;c.style.width="300px";a.appendChild(c)}};b.Feedback.XHR=function(a){this.xhr=new XMLHttpRequest;this.url=a};b.Feedback.XHR.prototype=new b.Feedback.Send;b.Feedback.XHR.prototype.send=function(a,d){var c=this.xhr;c.onreadystatechange=function(){c.readyState==4&&d(c.status===
200)};c.open("POST",this.url,!0);c.setRequestHeader("Content-type","application/x-www-form-urlencoded");c.send("data="+encodeURIComponent(b.JSON.stringify(a)))}}})(window,document);