관리-도구
편집 파일: ai-modal.min.js
"use strict";class DraggableModal{constructor(t,e,i,s,o,l){this.modal=document.querySelector(t),this.dragger=document.querySelector(e),this.toggleBtn=document.querySelector(i),this.closeBtn=document.querySelector(s),this.positionStorageKey=o,this.visibilityStorageKey=l,this.init()}init(){this.restoreVisibility(),this.restorePosition(),this.addEventListeners()}static saveToSession(t,e){sessionStorage.setItem(t,JSON.stringify(e))}static getFromSession(t,e=null){let i=sessionStorage.getItem(t);return i?JSON.parse(i):e}toggleVisibility(){let t="true"===this.modal.getAttribute("data-visibility"),e=t?"false":"true";this.modal.setAttribute("data-visibility",e),DraggableModal.saveToSession(this.visibilityStorageKey,e)}restoreVisibility(){let t=DraggableModal.getFromSession(this.visibilityStorageKey,"false");this.modal.setAttribute("data-visibility",t)}restorePosition(){let t=DraggableModal.getFromSession(this.positionStorageKey);t&&(this.modal.style.left=`${t.left}px`,this.modal.style.top=`${t.top}px`)}enableDragging(){let t=!1,e,i,s=s=>{e=s.clientX-this.modal.offsetLeft,i=s.clientY-this.modal.offsetTop,t=!0,document.body.style.userSelect="none"},o=s=>{t&&requestAnimationFrame(()=>{let t=window.innerWidth,o=window.innerHeight,l=this.modal.offsetWidth,a=this.modal.offsetHeight,n=s.clientX-e,r=s.clientY-i;n=Math.max(0,Math.min(n,t-l)),r=Math.max(0,Math.min(r,o-a)),this.modal.style.left=`${n}px`,this.modal.style.top=`${r}px`,DraggableModal.saveToSession(this.positionStorageKey,{left:n,top:r})})},l=()=>{t=!1,document.body.style.userSelect="auto"};this.dragger.addEventListener("mousedown",s),document.addEventListener("mousemove",o),document.addEventListener("mouseup",l)}handleResize(){let t=window.innerWidth,e=window.innerHeight,i=this.modal.offsetWidth,s=this.modal.offsetHeight,o=this.modal.offsetLeft,l=this.modal.offsetTop;this.modal.style.left=`${Math.max(0,Math.min(o,t-i))}px`,this.modal.style.top=`${Math.max(0,Math.min(l,e-s))}px`}addEventListeners(){this.toggleBtn?.addEventListener("click",this.toggleVisibility.bind(this)),this.closeBtn?.addEventListener("click",this.toggleVisibility.bind(this)),this.enableDragging(),window.addEventListener("resize",this.handleResize.bind(this))}}const draggableModal=new DraggableModal("#ai-modal-generate","#ai-content-modal-dragger",".ai-content-modal-btn",".ai-content-modal-close-btn","modalPosition","modalVisibility");class VerticalDraggable{constructor(t,e){this.element=document.querySelector(t),this.dragger=document.querySelector(e),this.init()}init(){this.enableVerticalDragging()}enableVerticalDragging(){let t=!1,e,i=i=>{e=i.clientY-this.element.offsetTop,t=!0,document.body.style.userSelect="none"},s=i=>{t&&requestAnimationFrame(()=>{let t=window.innerHeight,s=this.element.offsetHeight,o=i.clientY-e;o=Math.max(0,Math.min(o,t-s)),this.element.style.top=`${o}px`})},o=()=>{t=!1,document.body.style.userSelect="auto"};this.dragger.addEventListener("mousedown",i),document.addEventListener("mousemove",s),document.addEventListener("mouseup",o)}}new VerticalDraggable("#ai-content-modal-btn-wrapper","#ai-content-modal-btn-dragger");