hotline.mjs/hotline.mjs.min

"use strict";/**
 * @name hotline.mjs
 *
 * @description
 * Module for creating "hot lines"
 *
 * @class
 * @public
 *
 * @example
 * сonst instance = new hotline(shell);
 * instance.step = '-5';
 * instance.start();
 *
 * {@link https://git.mirzaev.sexy/mirzaev/hotline.mjs}
 *
 * @license http://www.wtfpl.net/ Do What The Fuck You Want To Public License
 * @author Arsen Mirzaev Tatyano-Muradovich <arsen@mirzaev.sexy>
 */ export default class e{#a;#b={};#c={};#d=null;#e=null;interval=10;alive=!0;#f=!1;#g="false";get moving(){return this.#g}movable=!0;wheel=!1;delta=30;button=0;hover=!0;step=1;transfer=!0;#h=!0;sticky=!1;#i=Object.freeze({beginning:Symbol("beginning"),center:Symbol("center"),end:Symbol("end")});get magnetism(){return this.#i}magnetic=null;magnet=1;vertical=!1;observe=!1;#j=null;events=new Map([["ready",!1],["started",!1],["stopped",!1],["configured",!1],["move",!1],["move.mouse",!1],["move.touch",!1],["move.freezed",!1],["move.unfreezed",!1],["moved.forward",!1],["moved.backward",!1],["offset",!1],["transfer.beginning",!0],["transfer.end",!0],["observer.started",!1],["observer.stopped",!1]]);#k=new Set(["events"]);#l=new Map;constructor(e,t=!1){e instanceof HTMLElement&&(this.#a=e,t&&(this.#a.hotline=this),this.#a.childElementCount>1&&(this.#d="ready",this.events.get("ready")&&this.#a.dispatchEvent(new CustomEvent("hotline.ready"))))}start(){if(null===this.#e){let e=this;this.#e=setInterval(()=>{e.#b.element=e.#a.firstElementChild,e.#b.rectangle=e.#b.element.getBoundingClientRect(),e.vertical?(e.#b.position=parseFloat(e.#b.element.style.marginTop)||0,e.#b.offset=parseFloat(getComputedStyle(e.#b.element).marginBottom)||0,e.#b.end=e.#b.rectangle.y+e.#b.rectangle.height+e.#b.offset):(e.#b.position=parseFloat(e.#b.element.style.marginLeft)||0,e.#b.offset=parseFloat(getComputedStyle(e.#b.element).marginRight)||0,e.#b.end=e.#b.rectangle.x+e.#b.rectangle.width+e.#b.offset),e.vertical&&Math.round(e.#b.end)<e.#a.offsetTop||!e.vertical&&Math.round(e.#b.end)<e.#a.offsetLeft?!0===e.transfer&&e.#h&&(e.#a.appendChild(e.#b.element),e.vertical?(e.#b.element.style.marginTop=null,e.events.get("transfer.end")&&e.#a.dispatchEvent(new CustomEvent("hotline.transfer.end",{detail:{element:e.#b.element,offset:-(e.#b.rectangle.height+e.#b.offset)}})),e.#b={}):(e.#b.element.style.marginLeft=null,e.events.get("transfer.end")&&e.#a.dispatchEvent(new CustomEvent("hotline.transfer.end",{detail:{element:e.#b.element,offset:-(e.#b.rectangle.width+e.#b.offset)}})),e.#b={})):e.vertical&&Math.round(e.#b.rectangle.y)>e.#a.offsetTop||!e.vertical&&Math.round(e.#b.rectangle.x)>e.#a.offsetLeft?!0===e.transfer&&e.#h&&(e.#c.element=e.#a.lastElementChild,e.#c.rectangle=e.#c.element.getBoundingClientRect(),e.#a.insertBefore(e.#c.element,e.#b.element),e.vertical?(e.#c.offset=parseFloat(getComputedStyle(e.#c.element).marginBottom)||e.#b.offset||0,e.events.get("transfer.beginning")&&e.#a.dispatchEvent(new CustomEvent("hotline.transfer.beginning",{detail:{element:e.#c.element,offset:e.#c.rectangle.height+e.#c.offset}})),e.#c.element.style.marginTop=-e.#c.rectangle.height-e.#c.offset+"px",e.#b.element.style.marginTop=null,e.#b={}):(e.#c.offset=parseFloat(getComputedStyle(e.#c.element).marginRight)||e.#b.offset||0,e.events.get("transfer.beginning")&&e.#a.dispatchEvent(new CustomEvent("hotline.transfer.beginning",{detail:{element:e.#c.element,offset:e.#c.rectangle.width+e.#c.offset}})),e.#c.element.style.marginLeft=-e.#c.rectangle.width-e.#c.offset+"px",e.#b.element.style.marginLeft=null,e.#b={})):!0===this.alive&&!1===this.#f&&e.move()},e.interval),this.hover?(this.#l.set("hover",t=>{e.#f=!0,e.events.get("moving.freezed")&&e.#a.dispatchEvent(new CustomEvent("hotline.moving.freezed",{detail:{event:t}}))}),this.#a.addEventListener("mouseover",this.#l.get("hover"))):(this.#a.removeEventListener("mouseover",this.#l.get("hover")),this.#l.delete("hover")),this.wheel?(this.#l.set("wheel",t=>{"started"===e.#d&&e.position((parseFloat(e.#a.firstElementChild.style[e.vertical?"marginTop":"marginLeft"])||0)+(null===e.delta?t.wheelDelta:t.wheelDelta>0?e.delta:-e.delta))}),this.#a.addEventListener("wheel",this.#l.get("wheel"))):(this.#a.removeEventListener("wheel",this.#l.get("wheel")),this.#l.delete("wheel"));let t=0,s=function(e){t+=e.detail.offset??0};e.movable?(e.#l.set("move.start",n=>{if("touchstart"===n.type||n.button===e.button){e.#f=!0,e.events.get("moving.freezed")&&e.#a.dispatchEvent(new CustomEvent("hotline.moving.freezed",{detail:{event:n}}));let i=n.pageX||n.touches&&n.touches[0]?.pageX||0,l=n.pageY||n.touches&&n.touches[0]?.pageY||0;e.#a.addEventListener("hotline.transfer.beginning",s),e.#a.addEventListener("hotline.transfer.end",s);let r=e.#b.position;e.#l.set("moving",s=>{if("started"===e.#d){if(e.#g=!0,e.vertical){let n=s.pageY||s.touches&&s.touches[0].pageY||0;e.position(n-(l+t-r))}else{let o=s.pageX||s.touches&&s.touches[0].pageX||0;e.position(o-(i+t-r))}"mousemove"===s.type?e.events.get("move.mouse")&&e.#a.dispatchEvent(new CustomEvent("hotline.move.mouse",{detail:{from:r,to:e.#b.position}})):"touchmove"===s.type&&e.events.get("move.touch")&&e.#a.dispatchEvent(new CustomEvent("hotline.move.touch",{detail:{from:r,to:e.#b.position}}))}}),document.addEventListener("mousemove",e.#l.get("moving")),document.addEventListener("touchmove",e.#l.get("moving"))}}),e.#a.addEventListener("mousedown",e.#l.get("move.start")),e.#a.addEventListener("touchstart",e.#l.get("move.start")),e.#l.set("move.leaved",()=>{document.removeEventListener("mousemove",e.#l.get("moving")),e.#l.delete("moving"),document.removeEventListener("mouseleave",e.#l.get("move.leaved"))}),document.addEventListener("mouseleave",e.#l.get("move.leaved")),e.#l.set("move.end",n=>{if(e.#g=!1,document.removeEventListener("mousemove",e.#l.get("moving")),document.removeEventListener("touchmove",e.#l.get("moving")),e.#l.delete("moving"),t=0,e.#a.removeEventListener("hotline.transfer.beginning",s),e.#a.removeEventListener("hotline.transfer.end",s),(!1!==e.hover||!e.#a.contains(n.target))&&(e.#f=!1,e.events.get("move.unfreezed")&&e.#a.dispatchEvent(new CustomEvent("hotline.move.unfreezed"))),null!==e.magnetic){if(n.target===e.#a);else{let i=n.target,l=100;for(;i.parentElement!==e.#a&&0!=--l;)i=i.parentElement;i instanceof HTMLElement&&i.parentElement===e.#a&&e.magnetize(i,e.magnetic)}}}),e.#a.addEventListener("mouseup",e.#l.get("move.end")),e.#a.addEventListener("touchend",e.#l.get("move.end")),e.#l.set("move.leave",n=>{t=0,!1===e.sticky&&(e.#g=!1,document.removeEventListener("mousemove",e.#l.get("moving")),document.removeEventListener("touchmove",e.#l.get("moving")),e.#l.delete("moving"),e.#a.removeEventListener("hotline.transfer.beginning",s),e.#a.removeEventListener("hotline.transfer.end",s)),e.#f=!1,e.events.get("move.unfreezed")&&e.#a.dispatchEvent(new CustomEvent("hotline.move.unfreezed"))}),e.#a.addEventListener("mouseleave",e.#l.get("move.leave"))):(e.#a.removeEventListener("mousedown",e.#l.get("move.start")),e.#a.removeEventListener("touchstart",e.#l.get("move.start")),e.#l.delete("move.start"),e.#g=!1,document.removeEventListener("mousemove",e.#l.get("moving")),document.removeEventListener("touchmove",e.#l.get("moving")),e.#l.delete("moving"),t=0,e.#a.removeEventListener("mouseup",e.#l.get("move.end")),e.#a.removeEventListener("touchend",e.#l.get("move.end")),e.#l.delete("move.end"),e.#a.addEventListener("mouseleave",e.#l.get("move.leave")),e.#l.delete("move.leave")),this.#d="started",e.events.get("started")&&this.#a.dispatchEvent(new CustomEvent("hotline.started"))}this.observe?null===this.#j&&(this.#j=new MutationObserver(function(e){for(let t of e)"attributes"===t.type&&this.configure(t.attributeName);this.restart()}),this.#j.observe(this.#a,{attributes:!0}),this.events.get("observer.started")&&this.#a.dispatchEvent(new CustomEvent("hotline.observer.started",{detail:{instance:this.#j}}))):this.#j instanceof MutationObserver&&(this.#j.disconnect(),this.#j=null,this.events.get("observer.stopped")&&this.#a.dispatchEvent(new CustomEvent("hotline.observer.stopped")))}stop(){clearInterval(this.#e),this.#e=null,this.#d="stopped",this.events.get("stopped")&&this.#a.dispatchEvent(new CustomEvent("hotline.stopped"))}restart(){this.stop(),this.start()}configure(e){let t=(/^data-hotline-(\w+)$/.exec(e)??[,null])[1];if("string"==typeof t){if(this.#k.has(t))return;let s=this.#a.getAttribute(e);"magnetic"===t&&"symbol"==typeof this.magnetism[s]?this.magnetic=this.magnetism[s]:"string"==typeof s&&("true"===s||"on"===s||"yes"===s?this[t]=!0:"false"===s||"off"===s||"no"===s?this[t]=!1:this[t]=parseFloat(s)||s,this.events.get("configured")&&this.#a.dispatchEvent(new CustomEvent("hotline.configured",{detail:{name:t,value:this[t]}})))}}position(e){let t=this.#b.position||void 0;return(void 0===this.#b.element&&(this.#b.element=this.#a.firstElementChild),this.#b.element instanceof HTMLElement)?(this.#b.position=e,this.#b.element.style[this.vertical?"marginTop":"marginLeft"]=this.#b.position+"px",this.events.get("position")&&this.#a.dispatchEvent(new CustomEvent("hotline.position",{detail:{from:t,to:e}})),e-(t||0)):null}move(e){let t=this.#b.position,s=this.#b.position+(e||this.step),n=this.position(s);return this.events.get("moving")&&document.dispatchEvent(new CustomEvent("hotline.moving",{detail:{from:t,to:s}})),n}forward(){return new Promise((e,t)=>{let s,n=Math.abs(this.step)||1,i=setInterval(()=>{++n,this.move(n)},this.interval),l=()=>{n>10&&(clearInterval(i),clearTimeout(s),this.events.get("moved.forward")&&this.#a.dispatchEvent(new CustomEvent("hotline.moved.forward")),this.#a.removeEventListener("hotline.transfer.beginning",l),e())};this.#a.addEventListener("hotline.transfer.beginning",l,!1),s=setTimeout(()=>{clearTimeout(i),t()},5e3)})}backward(){return new Promise((e,t)=>{let s,n=-Math.abs(this.step)||-1,i=setInterval(()=>{--n,this.move(n)},this.interval),l=()=>{n<-10&&(clearInterval(i),clearTimeout(s),this.events.get("moved.backward")&&this.#a.dispatchEvent(new CustomEvent("hotline.moved.backward")),this.#a.removeEventListener("hotline.transfer.end",l),e())};this.#a.addEventListener("hotline.transfer.end",l,!1),s=setTimeout(()=>{clearTimeout(i),t()},5e3)})}magnetize(e,t){return new Promise((s,n)=>{if(e instanceof HTMLElement){let i=e.getBoundingClientRect(),l=this.#a.getBoundingClientRect(),r;switch(t){case this.#i.beginning:break;case this.#i.center:r=i.x+i.width/2-(l.x+l.width/2);break;case this.#i.end:break;default:return}if(r>0){let o,h=-Math.abs(this.magnet)||-Math.abs(this.step)||0,a=setInterval(()=>{--h;let e=r+h;e<=0&&(h=-r),0===(r+=this.move(h)||0)&&(clearInterval(a),clearTimeout(o),this.events.get("magnetized")&&this.#a.dispatchEvent(new CustomEvent("hotline.magnetized",{detail:{magnetism:t}})),s(t))},this.interval);o=setTimeout(()=>{clearTimeout(a),n()},5e3)}else if(r<0){let v,m=Math.abs(this.magnet)||Math.abs(this.step)||0,d=setInterval(()=>{++m;let e=r+m;e>=0&&(m=-r),0===(r+=this.move(m)||0)&&(clearInterval(d),clearTimeout(v),this.events.get("magnetized")&&this.#a.dispatchEvent(new CustomEvent("hotline.magnetized",{detail:{magnetism:t}})),s(t))},this.interval);v=setTimeout(()=>{clearTimeout(d),n()},5e3)}else this.events.get("magnetized")&&this.#a.dispatchEvent(new CustomEvent("hotline.magnetized",{detail:{magnetism:t}})),s(t)}})}static preprocessing(e=!1,t=!1){let s=new Set;for(let n of document.querySelectorAll('*[data-hotline="true"]')){let i=new this(n,t);for(let l of n.getAttributeNames())i.configure(l);i.start(),s.add(i)}return e&&document.dispatchEvent(new CustomEvent("hotline.preprocessed"),{detail:{generated:s}}),s}};