diff --git a/dist/float.min.js b/dist/float.min.js index 480b0cd..741ca24 100644 --- a/dist/float.min.js +++ b/dist/float.min.js @@ -1 +1 @@ -var float=function(t){var n={};function o(e){if(n[e])return n[e].exports;var s=n[e]={i:e,l:!1,exports:{}};return t[e].call(s.exports,s,s.exports,o),s.l=!0,s.exports}return o.m=t,o.c=n,o.d=function(t,n,e){o.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,n){if(1&n&&(t=o(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(o.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var s in t)o.d(e,s,function(n){return t[n]}.bind(null,s));return e},o.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(n,"a",n),n},o.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},o.p="",o(o.s=0)}([function(t,n,o){"use strict";o.r(n);class e{constructor(t,n){this.x=t,this.y=n,this.add=t=>new e(this.x+t.x,this.y+t.y),this.subtract=t=>new e(this.x-t.x,this.y-t.y),this.dot=t=>new e(this.x*t.x,this.y*t.y)}}window.customElements.define("floater-box",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="";const t=document.createElement("style");t.textContent="\n :host {\n position: fixed;\n z-index: 999;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n border-radius: 4px;\n background-color: #fff;\n opacity: 0;\n pointer-events: none;\n }\n :host(.show) {\n transition: opacity .2s ease;\n opacity: 1;\n pointer-events: initial;\n }\n :host(.bounce-top) {\n transform: translate(0, -8px);\n }\n :host(.bounce-top.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-top;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-top {\n 0% {\n transform: translate(0, -8px);\n }\n 30% {\n transform: translate(0, 2px);\n }\n 60% {\n transform: translate(0, -1px);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n :host(.bounce-bottom) {\n transform: translate(0, 8px);\n }\n :host(.bounce-bottom.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-bottom;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-bottom {\n 0% {\n transform: translate(0, 8px);\n }\n 30% {\n transform: translate(0, -2px);\n }\n 60% {\n transform: translate(0, 1px);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n :host(.bounce-left) {\n transform: translate(-8px, 0);\n }\n :host(.bounce-left.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-left;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-left {\n 0% {\n transform: translate(-8px, 0);\n }\n 30% {\n transform: translate(2px, 0);\n }\n 60% {\n transform: translate(-1px, 0);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n :host(.bounce-right) {\n transform: translate(8px, 0);\n }\n :host(.bounce-right.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-right;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-right {\n 0% {\n transform: translate(8px, 0);\n }\n 30% {\n transform: translate(-2px, 0);\n }\n 60% {\n transform: translate(1px, 0);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n ",this.shadowRoot.appendChild(t)}show(){this.backdropComponent&&this.backdropComponent.show(),this.classList.toggle("show",!0)}hide(){this.backdropComponent&&this.backdropComponent.hide(),this.classList.toggle("show",!1),this.config.onHide&&this.config.onHide()}connectedCallback(){const t=this.config.template;if(t.style.position=t.style.position||"relative",t.style.borderRadius=t.style.borderRadius||"4px",this.config.customCss){const t=document.createElement("style");t.textContent=this.config.customCss,this.shadowRoot.appendChild(t)}this.appendChild(this.config.template),this.backdropComponent&&this.config.closeOnBackdropClick&&this.backdropComponent.addEventListener("click",()=>this.hide()),this.config.arrowStrategy&&(this.arrowComponent=document.createElement("floater-arrow"),this.arrowComponent.arrowStrategy=this.config.arrowStrategy,this.shadowRoot.appendChild(this.arrowComponent)),this.config.transition&&this.classList.toggle(this.config.transition(),!0),this.reposition(),window.addEventListener("resize",()=>this.reposition())}reposition(){const{attachTo:t}=this.config,n=function(t,n=new e(0,0)){if(!t||"BODY"===t.tagName)return n;const o=t.getBoundingClientRect();return n.add(new e(o.x,o.y))}(t),o=new e(t.clientWidth,t.clientHeight);this.arrowComponent&&this.arrowComponent.reposition(),this.positionWithAlignment(n,o)}positionWithAlignment(t,n){const{x:o,y:s}=this.config.positionStrategy({attachToDim:n,attachToPos:t,contentDim:new e(this.clientWidth,this.clientHeight)});Object.assign(this.style,{left:`${o}px`,top:`${s}px`})}}),window.customElements.define("floater-arrow",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent="\n :host {\n display: block;\n position: absolute;\n transform: rotate(45deg);\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n background-color: #fff;\n z-index: -1;\n }\n ",this.shadowRoot.appendChild(t)}connectedCallback(){this.reposition();const t=this.arrowStrategy().customCss;if(t){const n=document.createElement("style");n.textContent=t,this.shadowRoot.appendChild(n)}}reposition(){const{x:t,y:n,size:o,fromRight:e,fromBottom:s}=this.arrowStrategy(),i=o/2;Object.assign(this.style,{[e?"right":"left"]:`${t-i}px`,[s?"bottom":"top"]:`${n-i}px`,width:`${o}px`,height:`${o}px`})}}),window.customElements.define("floater-backdrop",class extends HTMLElement{constructor(){super(),this.visible=!1,this.bgColor="#fff",this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent="\n :host {\n display: block;\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n opacity: 0;\n pointer-events: none;\n transition: opacity .2s ease;\n z-index: 2;\n }\n :host(.show) {\n opacity: .8;\n pointer-events: initial;\n }\n ",this.shadowRoot.appendChild(t)}show(){this.visible=!0,this.classList.toggle("show",!0)}hide(){this.visible=!1,this.classList.toggle("show",!1)}connectedCallback(){this.style.backgroundColor=this.bgColor}});class s{constructor(t){this.config=t,this.boxComponent=document.createElement("floater-box"),this.boxComponent.config=t;const n=t.parent||document.body;t.hasBackdrop&&(this.backdropComponent=document.createElement("floater-backdrop"),t.backdropColor&&(this.backdropComponent.bgColor=t.backdropColor),n.appendChild(this.backdropComponent),this.boxComponent.backdropComponent=this.backdropComponent),n.appendChild(this.boxComponent)}remove(){this.boxComponent.remove(),this.backdropComponent&&this.backdropComponent.remove()}show(){this.boxComponent.show(),this.config.onShow&&this.config.onShow()}hide(){this.boxComponent.hide(),this.config.onHide&&this.config.onHide()}reposition(){this.boxComponent.reposition()}}n.default=t=>new s(t)}]).default; \ No newline at end of file +var float=function(t){var n={};function o(e){if(n[e])return n[e].exports;var s=n[e]={i:e,l:!1,exports:{}};return t[e].call(s.exports,s,s.exports,o),s.l=!0,s.exports}return o.m=t,o.c=n,o.d=function(t,n,e){o.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:e})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,n){if(1&n&&(t=o(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var e=Object.create(null);if(o.r(e),Object.defineProperty(e,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var s in t)o.d(e,s,function(n){return t[n]}.bind(null,s));return e},o.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(n,"a",n),n},o.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},o.p="",o(o.s=0)}([function(t,n,o){"use strict";o.r(n);class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent="\n :host {\n display: block;\n position: absolute;\n transform: rotate(45deg);\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n background-color: #fff;\n z-index: -1;\n }\n ",this.shadowRoot.appendChild(t)}connectedCallback(){this.reposition();const t=this.arrowStrategy().customCss;if(t){const n=document.createElement("style");n.textContent=t,this.shadowRoot.appendChild(n)}}reposition(){const{x:t,y:n,size:o,fromRight:e,fromBottom:s}=this.arrowStrategy(),i=o/2;Object.assign(this.style,{[e?"right":"left"]:t-i+"px",[s?"bottom":"top"]:n-i+"px",width:o+"px",height:o+"px"})}}class s extends HTMLElement{constructor(){super(),this.visible=!1,this.bgColor="#fff",this.attachShadow({mode:"open"});const t=document.createElement("style");t.textContent="\n :host {\n display: block;\n position: fixed;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n opacity: 0;\n pointer-events: none;\n transition: opacity .2s ease;\n z-index: 2;\n }\n :host(.show) {\n opacity: .8;\n pointer-events: initial;\n }\n ",this.shadowRoot.appendChild(t)}show(){this.visible=!0,this.classList.toggle("show",!0)}hide(){this.visible=!1,this.classList.toggle("show",!1)}connectedCallback(){this.style.backgroundColor=this.bgColor}}class i{constructor(t,n){this.x=t,this.y=n,this.add=t=>new i(this.x+t.x,this.y+t.y),this.subtract=t=>new i(this.x-t.x,this.y-t.y),this.dot=t=>new i(this.x*t.x,this.y*t.y)}}class r extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="";const t=document.createElement("style");t.textContent="\n :host {\n position: fixed;\n z-index: 999;\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n border-radius: 4px;\n background-color: #fff;\n opacity: 0;\n pointer-events: none;\n }\n :host(.show) {\n transition: opacity .2s ease;\n opacity: 1;\n pointer-events: initial;\n }\n :host(.bounce-top) {\n transform: translate(0, -8px);\n }\n :host(.bounce-top.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-top;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-top {\n 0% {\n transform: translate(0, -8px);\n }\n 30% {\n transform: translate(0, 2px);\n }\n 60% {\n transform: translate(0, -1px);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n :host(.bounce-bottom) {\n transform: translate(0, 8px);\n }\n :host(.bounce-bottom.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-bottom;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-bottom {\n 0% {\n transform: translate(0, 8px);\n }\n 30% {\n transform: translate(0, -2px);\n }\n 60% {\n transform: translate(0, 1px);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n :host(.bounce-left) {\n transform: translate(-8px, 0);\n }\n :host(.bounce-left.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-left;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-left {\n 0% {\n transform: translate(-8px, 0);\n }\n 30% {\n transform: translate(2px, 0);\n }\n 60% {\n transform: translate(-1px, 0);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n :host(.bounce-right) {\n transform: translate(8px, 0);\n }\n :host(.bounce-right.show) {\n transform: translate(0, 0);\n animation-name: bounce-from-right;\n animation-duration: .4s;\n animation-iteration-count: 1;\n }\n @keyframes bounce-from-right {\n 0% {\n transform: translate(8px, 0);\n }\n 30% {\n transform: translate(-2px, 0);\n }\n 60% {\n transform: translate(1px, 0);\n }\n 100% {\n transform: translate(0, 0);\n }\n }\n ",this.shadowRoot.appendChild(t)}show(){this.backdropComponent&&this.backdropComponent.show(),this.classList.toggle("show",!0)}hide(){this.backdropComponent&&this.backdropComponent.hide(),this.classList.toggle("show",!1),this.config.onHide&&this.config.onHide()}connectedCallback(){const t=this.config.template;if(t.style.position=t.style.position||"relative",t.style.borderRadius=t.style.borderRadius||"4px",this.config.customCss){const t=document.createElement("style");t.textContent=this.config.customCss,this.shadowRoot.appendChild(t)}this.appendChild(this.config.template),this.backdropComponent&&this.config.closeOnBackdropClick&&this.backdropComponent.addEventListener("click",()=>this.hide()),this.config.arrowStrategy&&(this.arrowComponent=document.createElement("floater-arrow"),this.arrowComponent.arrowStrategy=this.config.arrowStrategy,this.shadowRoot.appendChild(this.arrowComponent)),this.config.transition&&this.classList.toggle(this.config.transition(),!0),this.reposition(),window.addEventListener("resize",()=>this.reposition())}reposition(){const{attachTo:t}=this.config,n=function(t,n=new i(0,0)){if(!t||"BODY"===t.tagName)return n;const o=t.getBoundingClientRect();return n.add(new i(o.x,o.y))}(t),o=new i(t.clientWidth,t.clientHeight);this.arrowComponent&&this.arrowComponent.reposition(),this.positionWithAlignment(n,o)}positionWithAlignment(t,n){const{x:o,y:e}=this.config.positionStrategy({attachToDim:n,attachToPos:t,contentDim:new i(this.clientWidth,this.clientHeight)});Object.assign(this.style,{left:o+"px",top:e+"px"})}}c("floater-box",r),c("floater-arrow",e),c("floater-backdrop",s);class a{constructor(t){this.config=t,this.boxComponent=document.createElement("floater-box"),this.boxComponent.config=t;const n=t.parent||document.body;t.hasBackdrop&&(this.backdropComponent=document.createElement("floater-backdrop"),t.backdropColor&&(this.backdropComponent.bgColor=t.backdropColor),n.appendChild(this.backdropComponent),this.boxComponent.backdropComponent=this.backdropComponent),n.appendChild(this.boxComponent)}remove(){this.boxComponent.remove(),this.backdropComponent&&this.backdropComponent.remove()}show(){this.boxComponent.show(),this.config.onShow&&this.config.onShow()}hide(){this.boxComponent.hide(),this.config.onHide&&this.config.onHide()}reposition(){this.boxComponent.reposition()}}n.default=t=>new a(t);function c(t,n,o){window.customElements.get(t)||window.customElements.define(t,n,o)}}]).default; \ No newline at end of file diff --git a/dist/floaters.min.js b/dist/floaters.min.js index da27668..98570ea 100644 --- a/dist/floaters.min.js +++ b/dist/floaters.min.js @@ -1 +1 @@ -var floaters=function(t){var n={};function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)e.d(r,o,function(n){return t[n]}.bind(null,o));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=0)}([function(t,n,e){"use strict";e.r(n);var r={};e.r(r),e.d(r,"topStart",function(){return i}),e.d(r,"topEnd",function(){return a}),e.d(r,"leftStart",function(){return s}),e.d(r,"leftEnd",function(){return c}),e.d(r,"rightStart",function(){return u}),e.d(r,"rightEnd",function(){return d}),e.d(r,"bottomStart",function(){return f}),e.d(r,"bottomEnd",function(){return b});var o={};e.r(o),e.d(o,"ninja",function(){return l});const i=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0},e),a=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0,fromRight:!0},e),s=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n},e),c=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n,fromBottom:!0},e),u=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n,fromRight:!0},e),d=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n,fromRight:!0,fromBottom:!0},e),f=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0,fromBottom:!0},e),b=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0,fromRight:!0,fromBottom:!0},e);class g{constructor(t,n){this.x=t,this.y=n,this.add=t=>new g(this.x+t.x,this.y+t.y),this.subtract=t=>new g(this.x-t.x,this.y-t.y),this.dot=t=>new g(this.x*t.x,this.y*t.y)}}const l=(t="BOTTOM_LEFT",n=new g(0,0),e=!1,r=!1)=>({attachToDim:o,attachToPos:i,contentDim:a})=>{let s=i;const c=new g(window.innerWidth,window.innerHeight);switch(t){case"TOP_RIGHT":s=s.add(new g(o.x,0));break;case"BOTTOM_RIGHT":s=s.add(new g(o.x,o.y));break;case"BOTTOM_LEFT":s=s.add(new g(0,o.y));break;case"TOP_CENTER":s=s.dot(new g(0,1)).add(new g((c.x-a.x)/2,0));break;case"BOTTOM_CENTER":s=s.dot(new g(0,1)).add(new g((c.x-a.x)/2,o.y));break;case"CENTER_CENTER":s=c.subtract(a).dot(new g(.5,.5))}return e&&(s=s.add(new g(-a.x,0))),r&&(s=s.add(new g(0,-a.y))),s=s.add(n)};function p(){return{arrowStrategy:u(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("TOP_LEFT",new g(-16,0),!0,!1),transition:()=>"bounce-left"}}function y(){return{arrowStrategy:f(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("TOP_LEFT",new g(0,-16),!1,!0),transition:()=>"bounce-top"}}function T(){return{arrowStrategy:s(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("TOP_RIGHT",new g(16,0),!1,!1),transition:()=>"bounce-right"}}function O(){return{arrowStrategy:i(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("BOTTOM_LEFT",new g(0,16),!1,!1),transition:()=>"bounce-bottom"}}n.default={generic:(t,n,e={})=>{const r=(()=>{if("string"!=typeof n)return n;const t=document.createElement("div");return t.innerHTML=n,t})();return float(Object.assign({attachTo:t,template:r,hasBackdrop:!0,closeOnBackdropClick:!0,backdropColor:"#fff",transition:()=>"bounce-top",arrowStrategy:()=>({x:16,y:0,size:8}),positionStrategy:({attachToPos:t,attachToDim:n})=>t.add(n).add(new g(-22,8))},e))},arrowStrategies:r,positionStrategies:o,ufo:(t,n,e="BOTTOM",r={})=>{const o=(()=>{if("string"!=typeof n)return n;const t=document.createElement("div");return t.innerHTML=n,t})();Object.assign(o.style,{padding:"12px",color:"#353d46",fontWeight:"500",background:"#fff",fontSize:"14px",cursor:"pointer",borderRadius:"8px"});const i={LEFT:p,TOP:y,RIGHT:T,BOTTOM:O}[e](),a=float(Object.assign(Object.assign({attachTo:t,template:o,hasBackdrop:!1,customCss:"\n :host {\n box-shadow: 0 1px 3px rgba(60,64,67, 0.3), 0 4px 8px 3px rgba(60,64,67, 0.15);\n border-radius: 8px;\n }\n "},i),r));return o.addEventListener("click",t=>{r.onClick&&r.onClick(t),a.hide()}),a}}}]).default; \ No newline at end of file +var floaters=function(t){var n={};function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)e.d(r,o,function(n){return t[n]}.bind(null,o));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="",e(e.s=0)}([function(t,n,e){"use strict";e.r(n);var r={};e.r(r),e.d(r,"topStart",(function(){return i})),e.d(r,"topEnd",(function(){return a})),e.d(r,"leftStart",(function(){return s})),e.d(r,"leftEnd",(function(){return c})),e.d(r,"rightStart",(function(){return u})),e.d(r,"rightEnd",(function(){return d})),e.d(r,"bottomStart",(function(){return f})),e.d(r,"bottomEnd",(function(){return b}));var o={};e.r(o),e.d(o,"ninja",(function(){return l}));const i=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0},e),a=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0,fromRight:!0},e),s=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n},e),c=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n,fromBottom:!0},e),u=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n,fromRight:!0},e),d=(t=8,n=16,e)=>()=>Object.assign({size:t,x:0,y:n,fromRight:!0,fromBottom:!0},e),f=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0,fromBottom:!0},e),b=(t=8,n=16,e)=>()=>Object.assign({size:t,x:n,y:0,fromRight:!0,fromBottom:!0},e);class g{constructor(t,n){this.x=t,this.y=n,this.add=t=>new g(this.x+t.x,this.y+t.y),this.subtract=t=>new g(this.x-t.x,this.y-t.y),this.dot=t=>new g(this.x*t.x,this.y*t.y)}}const l=(t="BOTTOM_LEFT",n=new g(0,0),e=!1,r=!1)=>({attachToDim:o,attachToPos:i,contentDim:a})=>{let s=i;const c=new g(window.innerWidth,window.innerHeight);switch(t){case"TOP_RIGHT":s=s.add(new g(o.x,0));break;case"BOTTOM_RIGHT":s=s.add(new g(o.x,o.y));break;case"BOTTOM_LEFT":s=s.add(new g(0,o.y));break;case"TOP_CENTER":s=s.dot(new g(0,1)).add(new g((c.x-a.x)/2,0));break;case"BOTTOM_CENTER":s=s.dot(new g(0,1)).add(new g((c.x-a.x)/2,o.y));break;case"CENTER_CENTER":s=c.subtract(a).dot(new g(.5,.5))}return e&&(s=s.add(new g(-a.x,0))),r&&(s=s.add(new g(0,-a.y))),s=s.add(n),s};function p(){return{arrowStrategy:u(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("TOP_LEFT",new g(-16,0),!0,!1),transition:()=>"bounce-left"}}function y(){return{arrowStrategy:f(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("TOP_LEFT",new g(0,-16),!1,!0),transition:()=>"bounce-top"}}function T(){return{arrowStrategy:s(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("TOP_RIGHT",new g(16,0),!1,!1),transition:()=>"bounce-right"}}function O(){return{arrowStrategy:i(8,16,{customCss:"\n :host {\n background: #fff;\n }\n "}),positionStrategy:l("BOTTOM_LEFT",new g(0,16),!1,!1),transition:()=>"bounce-bottom"}}n.default={generic:(t,n,e={})=>{const r=(()=>{if("string"!=typeof n)return n;const t=document.createElement("div");return t.innerHTML=n,t})();return float(Object.assign({attachTo:t,template:r,hasBackdrop:!0,closeOnBackdropClick:!0,backdropColor:"#fff",transition:()=>"bounce-top",arrowStrategy:()=>({x:16,y:0,size:8}),positionStrategy:({attachToPos:t,attachToDim:n})=>t.add(n).add(new g(-22,8))},e))},arrowStrategies:r,positionStrategies:o,ufo:(t,n,e="BOTTOM",r={})=>{const o=(()=>{if("string"!=typeof n)return n;const t=document.createElement("div");return t.innerHTML=n,t})();Object.assign(o.style,{padding:"12px",color:"#353d46",fontWeight:"500",background:"#fff",fontSize:"14px",cursor:"pointer",borderRadius:"8px"});const i={LEFT:p,TOP:y,RIGHT:T,BOTTOM:O}[e](),a=float(Object.assign(Object.assign({attachTo:t,template:o,hasBackdrop:!1,customCss:"\n :host {\n box-shadow: 0 1px 3px rgba(60,64,67, 0.3), 0 4px 8px 3px rgba(60,64,67, 0.15);\n border-radius: 8px;\n }\n "},i),r));return o.addEventListener("click",t=>{r.onClick&&r.onClick(t),a.hide()}),a}}}]).default; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 43abcfb..f889aa7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1487,12 +1487,6 @@ "semver": "^5.0.1" } }, - "typescript": { - "version": "3.6.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.6.2.tgz", - "integrity": "sha512-lmQ4L+J6mnu3xweP8+rOrUwzmN+MRAj7TgtJtDaXE5PMyX2kCrklhg3rvOsOIfNeAWMQWO2F1GPc1kMD2vLAfw==", - "dev": true - }, "union-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.0.tgz", diff --git a/package.json b/package.json index 07d5047..9ce8404 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,7 @@ "css-loader": "^2.1.1", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", - "ts-loader": "^5.3.3", - "typescript": "^3.6.2" + "ts-loader": "^5.3.3" }, "dependencies": {} } diff --git a/src/main.ts b/src/main.ts index 056894f..26f3b1d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,9 +3,9 @@ import { FloaterBackdropComponent } from './floater-backdrop'; import { FloaterBoxComponent } from './floater-box'; import { V2 } from './v2'; -window.customElements.define('floater-box', FloaterBoxComponent); -window.customElements.define('floater-arrow', FloaterArrowComponent); -window.customElements.define('floater-backdrop', FloaterBackdropComponent); +customElementsDefine('floater-box', FloaterBoxComponent); +customElementsDefine('floater-arrow', FloaterArrowComponent); +customElementsDefine('floater-backdrop', FloaterBackdropComponent); class Floater { private boxComponent: FloaterBoxComponent; @@ -99,3 +99,14 @@ export type ArrowStrategy = () => { }; export type Transition = () => string; + +// Define custom element if not already defined. +function customElementsDefine( + name: string, + constructor: CustomElementConstructor, + options?: ElementDefinitionOptions, +): void { + if (!window.customElements.get(name)) { + window.customElements.define(name, constructor, options); + } +}