Floating Button

A Draggable Floating Button

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://greasyfork.org/scripts/415470-floating-button/code/Floating%20Button.js?version=865776

!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var o in n)("object"==typeof exports?exports:t)[o]=n[o]}}(window,(function(){return(()=>{"use strict";var t={623:(t,e,n)=>{function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t){var e=document.createElement("div");return e.innerHTML=t.trim(),e.firstChild}function s(t,e){for(var n in e)t.setAttribute(n,e[n])}function a(t,e){Object.assign(t.style,e)}n.r(e),n.d(e,{createElementFromHTML:()=>i,setAttributes:()=>s,setStyles:()=>a,FloatingButton:()=>r});var r=function(){function t(e){var n=e.src,o=e.on,s=void 0===o?function(){}:o,r=e.off,u=void 0===r?function(){}:r,h=e.onDragOver,d=void 0===h?function(){}:h,l=e.buttonSize,p=void 0===l?30:l,c=e.paddingSize,v=void 0===c?15:c;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.handleWrapperMouseenter=this.handleWrapperMouseenter.bind(this),this.handleWrapperMouseleave=this.handleWrapperMouseleave.bind(this),this.handleButtonMouseenter=this.handleButtonMouseenter.bind(this),this.handleButtonMouseleave=this.handleButtonMouseleave.bind(this),this.handleButtonMousedown=this.handleButtonMousedown.bind(this),this.handleButtonMouseup=this.handleButtonMouseup.bind(this),this.handleButtonDragMousedown=this.handleButtonDragMousedown.bind(this),this.handleButtonDragMousemove=this.handleButtonDragMousemove.bind(this),this.handleButtonDragMouseup=this.handleButtonDragMouseup.bind(this),this.handleDocumentKeydown=this.handleDocumentKeydown.bind(this),this.handleButtonClick=this.handleButtonClick.bind(this),this.wrapper=i("<div>"),this.button=i('<img src="'.concat(n,'"/>')),this.on=s.bind(this),this.off=u.bind(this),this.state=!1,this.timeout=0,this.onDragOver=d.bind(this),this.drag=!1,this.dragPos=[0,0,0,0],this.dragAnimation=this.button.animate([{transform:"rotate(0deg)"},{transform:"rotate(-10deg)"},{transform:"rotate(0deg)"},{transform:"rotate(10deg)"}],{duration:140,iterations:1/0}),this.dragAnimation.pause(),a(this.wrapper,{position:"fixed",top:"0%",left:"0%",bottom:"auto",right:"auto",boxSizing:"content-box",padding:v+"px",zIndex:2147483647}),a(this.button,{width:p+"px",height:p+"px",opacity:0,transition:"filter 0.2s, opacity 0.2s",cursor:"auto",pointerEvents:"auto",filter:"grayscale(100%) drop-shadow(0px 0px 4px gray)"}),this.wrapper.appendChild(this.button),this.wrapper.addEventListener("mouseenter",this.handleWrapperMouseenter),this.button.addEventListener("mouseenter",this.handleButtonMouseenter),this.button.addEventListener("mouseleave",this.handleButtonMouseleave),this.wrapper}var e,n;return e=t,(n=[{key:"handleWrapperMouseenter",value:function(){if(!this.drag){var t=this.wrapper,e=this.button;document.addEventListener("mousemove",this.handleWrapperMouseleave),t.style.pointerEvents="none",e.style.opacity=.2}}},{key:"handleWrapperMouseleave",value:function(t){var e=t.clientX,n=t.clientY;if(!this.drag){var o=this.wrapper,i=this.button,s=o.getBoundingClientRect(),a=s.left,r=s.top,u=s.right,h=s.bottom;(e<a||e>u||n<r||n>h)&&(document.removeEventListener("mousemove",this.handleWrapperMouseleave),i.style.opacity=0,o.style.pointerEvents="auto")}}},{key:"handleButtonMouseenter",value:function(){var t=this;if(!this.drag){var e=this.button,n=this.state;e.style.cursor="grab",e.addEventListener("mousedown",this.handleButtonDragMousedown),this.timeout=setTimeout((function(){e.removeEventListener("mousedown",t.handleButtonDragMousedown),e.addEventListener("mousedown",t.handleButtonMousedown),e.addEventListener("mouseup",t.handleButtonMouseup),e.addEventListener("click",t.handleButtonClick),a(e,{filter:"drop-shadow(0px 0px 4px gray)",opacity:"1",cursor:"pointer"})}),n?0:500)}}},{key:"handleButtonMouseleave",value:function(){if(!this.drag){var t=this.button,e=this.timeout;clearTimeout(e),t.removeEventListener("click",this.handleButtonClick),t.removeEventListener("mouseup",this.handleButtonMouseup),t.removeEventListener("mousedown",this.handleButtonMousedown),a(t,{filter:"grayscale(100%) drop-shadow(0px 0px 4px gray)",opacity:.2,cursor:"auto"})}}},{key:"handleButtonMousedown",value:function(){this.drag||(this.button.style.filter="brightness(0.5) drop-shadow(0px 0px 4px gray)")}},{key:"handleButtonMouseup",value:function(){this.drag||(this.button.style.filter="drop-shadow(0px 0px 4px gray)")}},{key:"handleButtonDragMousedown",value:function(t){var e=t.clientX,n=t.clientY,o=this.wrapper,i=this.button,s=this.dragPos,r=this.dragAnimation,u=this.timeout;clearTimeout(u),this.drag=!0,s[2]=e,s[3]=n,document.addEventListener("mousemove",this.handleButtonDragMousemove),document.addEventListener("mouseup",this.handleButtonDragMouseup),a(i,{opacity:1,cursor:"grabbing"}),o.style.transition="",r.play()}},{key:"handleButtonDragMousemove",value:function(t){t.preventDefault();var e=document.documentElement,n=e.clientWidth,o=e.clientHeight,i=t.clientX,s=t.clientY,r=this.wrapper,u=this.dragPos;u[0]=u[2]-i,u[1]=u[3]-s,u[2]=i,u[3]=s,a(r,{left:(r.offsetLeft-u[0])/n*100+"%",top:(r.offsetTop-u[1])/o*100+"%",right:"auto",bottom:"auto"})}},{key:"handleButtonDragMouseup",value:function(t){t.preventDefault();var e=document.documentElement,n=e.clientWidth,o=e.clientHeight,i=this.wrapper,s=this.button,r=this.dragAnimation,u=i.clientWidth,h=i.clientHeight;this.drag=!1,r.pause(),r.currentTime=0;var d,l,p,c=i.offsetLeft,v=i.offsetTop;c<n/2-u/2?v<o/2-h/2?d=1:(d=2,v=o-v-h):(c=n-c-u,v<o/2-h/2?d=0:(d=3,v=o-v-h)),l=c/n*2,p=v/o*2;var f=0===d||1===d?50*p+"%":"auto",m=2===d||3===d?50*p+"%":"auto",g=0===d||3===d?50*l+"%":"auto",y=1===d||2===d?50*l+"%":"auto";a(i,{top:f,bottom:m,right:g,left:y}),l=Math.max(l,0),p=Math.max(p,0),(c=Math.max(c,0))<=(v=Math.max(v,0))?l=0:p=0,f=0===d||1===d?50*p+"%":"auto",m=2===d||3===d?50*p+"%":"auto",g=0===d||3===d?50*l+"%":"auto",y=1===d||2===d?50*l+"%":"auto",document.removeEventListener("mouseup",this.handleButtonDragMouseup),document.removeEventListener("mousemove",this.handleButtonDragMousemove),i.offsetHeight,i.style.transition="inset 0.2s",a(s,{opacity:.2,cursor:"grab"}),a(i,{top:f,bottom:m,right:g,left:y}),this.onDragOver({corner:d,h:l,v:p})}},{key:"handleDocumentKeydown",value:function(t){if("Escape"===t.key)return this.handleButtonClick(),!1}},{key:"handleButtonClick",value:function(){if(!this.drag)switch(this.state){case!1:this.state=!0,document.addEventListener("keydown",this.handleDocumentKeydown),this.on();break;case!0:this.state=!1,document.removeEventListener("keydown",this.handleDocumentKeydown),this.off()}}}])&&o(e.prototype,n),t}()}},e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}return n.d=(t,e)=>{for(var o in e)n.o(e,o)&&!n.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n(623)})()}));