feeeedback
Version:
Simple, beautiful, open-source feedback widget with Discord webhooks
1 lines • 2.28 kB
JavaScript
!function(){let t="https://feeeedback.tiag.workers.dev/widget/index.html#"+encodeURIComponent(location.hostname+"/"+document.currentScript?.getAttribute("pid")),e=document.createElement("iframe");function l(t){let e={width:window.innerWidth,height:window.innerHeight},l={top:t.getBoundingClientRect().top,left:t.getBoundingClientRect().left,width:t.offsetWidth,height:t.offsetHeight,bottom:t.getBoundingClientRect().bottom,right:t.getBoundingClientRect().right},n={top:0,left:0,placement:"bottom"};return l.bottom+178+4<=e.height?(n.top=l.bottom+4,n.placement="bottom"):l.top-178-4>=0?(n.top=l.top-178-4,n.placement="top"):(n.top=Math.max(4,(e.height-178)/2),n.placement="center"),l.left+320+4<=e.width?n.left=l.left:l.right-320>=4?n.left=l.right-320:n.left=Math.max(4,(e.width-320)/2),n.top=Math.max(4,Math.min(n.top,e.height-178-4)),n.left=Math.max(4,Math.min(n.left,e.width-320-4)),n}function n(){e.style.opacity="0",e.style.transform="scale(0.95)",setTimeout(()=>{e.style.display="none"},200)}e.src=t,e.style.display="none",e.style.width="320px",e.style.height="178px",e.style.border="none",e.style.boxShadow="0 18px 50px -10px rgba(0, 0, 0, 0.2)",e.style.borderRadius="16px",e.frameborder="none",e.style.position="fixed",e.style.backgroundColor="white",e.style.zIndex="9999",e.style.transition="opacity 200ms ease, transform 200ms ease",e.style.opacity="0",e.style.transform="scale(0.95)",document.body.appendChild(e),document.body.addEventListener("click",function(t){var o;let i=t.target.closest("[data-feeeedback]")||(t.target.getAttribute("data-feeeedback")?t.target:null);if(!i){n();return}let a=l(i);o=a,e.style.display="block",e.style.top=o.top+"px",e.style.left=o.left+"px",e.setAttribute("data-placement",o.placement),requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1)"}),e.contentWindow.postMessage("feeeedback--reset","*")}),window.addEventListener("message",function(t){"feeeedback--close"==t.data&&n()});let o;window.addEventListener("resize",function(){"none"!==e.style.display&&(clearTimeout(o),o=setTimeout(()=>{let t=document.querySelector("[data-feeeedback]:hover")||document.querySelector("[data-feeeedback]");if(t){let n=l(t);e.style.top=n.top+"px",e.style.left=n.left+"px",e.setAttribute("data-placement",n.placement)}},100))})}();