@golden-tiger/outer-box
Version:
@golden-tiger/outer-box
1 lines • 2.68 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@golden-tiger/regexp-gene"),require("@golden-tiger/dom")):"function"==typeof define&&define.amd?define([,],t):"object"==typeof exports?exports.Template=t(require("@golden-tiger/regexp-gene"),require("@golden-tiger/dom")):e.Template=t(e[void 0],e[void 0])}("undefined"==typeof self?this:self,((e,t)=>(()=>{"use strict";var r={162:e=>{e.exports=t},713:t=>{t.exports=e}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var l=o[e]={exports:{}};return r[e](l,l.exports,i),l.exports}i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{i.r(l),i.d(l,{useOuterBox:()=>o});var e=i(713),t=i(162);const r={target:null,boxWidth:2,boxStyle:"dashed",boxColor:"red"};function o(o){let{target:i,boxWidth:l,boxStyle:p,boxColor:n}={...r,...o};const c="outer-box-"+Date.now()+"-"+(0,e.gene)(/[\w]{10}/),a=(0,t.createElement)({tag:"div",attributes:{id:c,style:`\n --clip-x: ${l}px;\n --clip-y: ${l}px;\n --clip-width: calc(100% - ${2*l}px);\n --clip-height: calc(100% - ${2*l}px);\n position: absolute;\n z-index: 9999;\n border: ${l}px ${p} ${n};\n top: 0;\n left: 0;\n width: 0px;\n height: 0px;\n transform: translate(-${l}px, -${l}px);\n clip-path: polygon(\n 0 0, 0 100%, var(--clip-x) 100%, var(--clip-x) 0, 0 0,\n var(--clip-x) 0, var(--clip-x) var(--clip-y), 100% var(--clip-y), 100% 0, 0 0,\n calc(var(--clip-x) + var(--clip-width)) 0, calc(var(--clip-x) + var(--clip-width)) 100%, 100% 100%, 100% 0, 0 0,\n var(--clip-x) 0, var(--clip-x) calc(var(--clip-y) + var(--clip-height)), var(--clip-x) 100%, calc(var(--clip-x) + var(--clip-width)) 100%, calc(var(--clip-x) + var(--clip-width)) calc(var(--clip-y) + var(--clip-height)), var(--clip-x) calc(var(--clip-y) + var(--clip-height)), var(--clip-x) 0, 0 0);\n `}});function x(){const{left:e,top:t,width:r,height:o}=i.getBoundingClientRect(),l=document.querySelector(`#${c}`);l?(l.style.left=e+"px",l.style.top=t+"px",l.style.width=r+"px",l.style.height=o+"px"):(a.style.left=e+"px",a.style.top=t+"px",a.style.width=r+"px",a.style.height=o+"px",document.body.append(a))}return i&&x(),{outerBox:a,update:x,setTarget:function(e){if(e)i=e,x();else{const e=document.querySelector(`#${c}`);e&&e.remove()}}}}})(),l})()));