@qutejs/popup
Version:
Qute Popup component
16 lines (15 loc) • 8.63 kB
JavaScript
(function (css, beforeTarget) {
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
if (beforeTarget) {
var target = document.getElementById(beforeTarget);
if (target) {
target.parentNode.insertBefore(style, target);
return;
}
}
(document.head || document.getElementsByTagName('head')[0]).appendChild(style);
})(".qute-Popup-content{position:relative;will-change:opacity,transform}.qute-Popup--fade .qute-Popup-content{opacity:0;transition:opacity .3s}.qute-Popup--fade.is-visible .qute-Popup-content{opacity:1}.qute-Popup--slide .qute-Popup-content{opacity:0;transform:translateY(-20%);transition:opacity .3s,transform .3s}.qute-Popup--slide.is-visible .qute-Popup-content{opacity:1;transform:translateY(0)}", null);
!function(t,e){"use strict";function o(){if("__qute_cache"in o)return o.__qute_cache;var t,i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"},n=e.document.createElement("DIV").style;for(var r in i)if(null!=n[r]){t=i[r];break}return o.__qute_cache=t}function i(t,e,o,i){i.top=e.bottom,i.top+t.height>o.bottom&&(i.top=e.top-t.height)}function n(t,e,o,i){i.top=e.top-t.height,i.top<o.top&&(i.top=e.bottom)}function r(t,e,o,i){i.left=e.right,i.left+t.width>o.right&&(i.left=e.left-t.width)}function p(t,e,o,i){i.left=e.left-t.width,i.left<o.left&&(i.left=e.right)}var s={top:n,bottom:i,left:p,right:r,coverup:function(t,e,o,i){i.top=e.bottom-t.height,i.top<o.top&&(i.top=e.top)},coverdown:function(t,e,o,i){i.top=e.top,i.top+t.height>o.bottom&&(i.top=e.bottom-t.height)}},l={start:function(t,e,o,i){i.top=e.top,i.top+t.height>o.bottom&&(i.top=e.bottom-t.height)},end:function(t,e,o,i){i.top=e.bottom-t.height,i.top<o.top&&(i.top=e.top)},center:function(t,e,o,i){i.top=e.top+(e.height-t.height)/2},top:n,bottom:i},h={start:function(t,e,o,i){i.left=e.left,i.left+t.width>o.right&&(i.left=e.right-t.width)},end:function(t,e,o,i){i.left=e.right-t.width,i.left<o.left&&(i.left=e.left)},center:function(t,e,o,i){i.left=e.left+(e.width-t.width)/2,i.left<o.left?i.left=o.left:i.left+t.width>o.right&&(i.left=o.right-t.width)},left:p,right:r};function a(t,o){o||(o={}),this.el=function(t,o){var i=e.document,n=i.createElement("DIV"),r=n.style;r.visibility="hidden",r.position="absolute",r.overflow="hidden",n.className=o?"qute-Popup "+o:"qute-Popup";var p=i.createElement("DIV");if(p.style.position="relative",p.className="qute-Popup-content",n.appendChild(p),t.jquery)p.appendChild(t[0]);else if("string"==typeof t)p.innerHTML=t;else if(Array.isArray(t))for(var s=0,l=t.length;s<l;s++)p.appendChild(t[s]);else p.appendChild(t);return n}(t,o.modifierClass),this.opts={position:"bottom",align:"start",closeOnClick:!0,animation:null,open:null,ready:null,close:null},o&&Object.assign(this.opts,o)}a.prototype={update:function(t){var o=this.opts;t.jquery&&(t=t[0]);var i=function(t,o){var i,n,r,p;if(t){var s=t.getBoundingClientRect();i=s.left,n=s.top,r=s.right,p=s.bottom}else i=0,n=0,r=e.innerWidth,p=e.innerHeight;if(o.length)for(var l=0,h=o.length;l<h;l++){var a=o[l].getBoundingClientRect();a.left>i&&(i=a.left),a.right<r&&(r=a.right),a.top>n&&(n=a.top),a.bottom<p&&(p=a.bottom)}return{left:i,top:n,right:r,bottom:p,width:r-i,height:p-n}}(this.container,this.ofs),n=t.getBoundingClientRect();if(!(n.top>=i.bottom||n.bottom<=i.top||n.left>=i.right||n.right<=i.left)){var r=this.el.style,p=o.position,a=o.align;"fill"===a?("left"===p||"right"===p?r.height=t.offsetHeight+"px":r.width=t.offsetWidth+"px",a="start"):(r.width&&(r.width=""),r.height&&(r.height=""));var u=this.el.getBoundingClientRect(),c={},f=s[p];if(!f)throw new Error("Invalid position argument: "+p+". Expecting: top|bottom|left|right");f(u,n,i,c);var d=null==c.top?l:h,g=d[a];if(!g)throw new Error("Invalid vert align argument: "+a+". Expecting: "+Object.keys(d).join("|"));return g(u,n,i,c),r.left=c.left+e.pageXOffset+"px",r.top=c.top+e.pageYOffset+"px",r.visibility="visible",this}this.el.style.visibility="hidden"},open:function(t){if(!t)throw new Error("Attempting to open a popup without specifying a target element!");var o=e.document;if(!this.el.parentNode){for(var i,n=!1,r=this,p=function(){n||(e.requestAnimationFrame((function(){r.update(t),n=!1})),n=!0)},s=t.closest(".qute-Popup--container"),l=s||o.body,h=[],a=t.parentNode;a&&a!==l;)(a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth)&&(h.push(a),a.addEventListener("scroll",p)),a=a.parentNode;return e.addEventListener("scroll",p),e.addEventListener("resize",p),this.container=s,this.ofs=h,this.opts.closeOnClick&&(i=function(t){r.el.contains(t.target)||r.close()},e.setTimeout((function(){o.addEventListener("click",i)}),0)),this.cleanup=function(){i&&o.removeEventListener("click",i),e.removeEventListener("resize",p),e.removeEventListener("scroll",p);for(var t=0,n=h.length;t<n;t++)h[t].removeEventListener("scroll",p)},this.opts.open&&this.opts.open(this),o.body.appendChild(this.el),this.update(t),this.el.classList.add("is-visible"),this.opts.ready&&this.opts.ready(this),this}},close:function(){this.opts.close&&this.opts.close(this),this.cleanup();var t=this.el;return t.classList.remove("is-visible"),this.opts.animation?function(t,i,n){var r=o();if(r){var p=function(e){try{return i(e)}finally{t.removeEventListener(r,p)}};t.addEventListener(r,p)}else e.setTimeout(i,n||20)}(t,(function(){t.style.visibility="hidden",t.parentNode&&t.parentNode.removeChild(t)})):(t.style.visibility="hidden",t.parentNode.removeChild(t)),this},toggle:function(t){return this.el.parentNode?this.close():this.open(t),this},isOpen:function(){return this.el.parentNode},position:function(t,e){if(void 0===e){var o=(t=t.trim()).indexOf(" ");o>-1&&(e=t.substring(o+1).trim(),t=t.substring(0,o))}return this.opts.position=t,e&&(this.opts.align=e),this},closeOnClick:function(t){return this.opts.closeOnClick=t,this},animation:function(t){var e=this.opts.animation;this.opts.animation=t;var o=this.el.classList;return e&&o.remove("qute-Popup--"+e),o.add("qute-Popup--"+t),this}};var u=t.ViewModel;t.Property;var c=t.Watch;var f,d,g=function(t){function o(){for(var e=[],o=arguments.length;o--;)e[o]=arguments[o];t.apply(this,e),this.defineProp(String,"position","bottom start"),this.defineProp(String,"animation",null),this.defineProp(Boolean,"autoClose",!0),this.defineProp(String,"id",void 0)}t&&(o.__proto__=t),o.prototype=Object.create(t&&t.prototype),o.prototype.constructor=o;var i={isOpen:{configurable:!0}};return o.prototype.render=function(){return e.document.createComment("[popup]")},o.prototype.created=function(){var t=this,e=this.$slots;if(!e||!e.default)throw new Error("<popup> requires a content!");this.popup=new a(e.default,{modifierClass:this.$attrs.class||"",open:function(){t.emit("open",t.popup.el)},ready:function(){t.emit("ready",t.popup.el)},close:function(){t.emit("close",t.popup.el)}}).animation(this.animation).position(this.position).closeOnClick(this.autoClose),this.id&&this.publish(this.id)},o.prototype.element=function(){return this.popup.el},o.prototype.find=function(t){return this.popup.el&&this.popup.el.querySelector(t)},o.prototype.open=function(t,e){this.popup.open(t)},o.prototype.openAsync=function(t){var o=this.popup;e.setTimeout((function(){o.open(t)}),0)},o.prototype.toggle=function(t,e){this.popup.toggle(t)},o.prototype.toggleAsync=function(t){var o=this.popup;e.setTimeout((function(){o.toggle(t)}),0)},o.prototype.close=function(){this.popup.close()},i.isOpen.get=function(){return this.popup.isOpen()},o.prototype.onPositionChanged=function(t){return this.popup.position(t),!1},o.prototype.onAnimationChanged=function(t){return this.popup.animation(t),!1},o.prototype.onAutoCloseChanged=function(t){return this.popup.closeOnClick(!!t),!1},Object.defineProperties(o.prototype,i),o}(u);f=g.prototype,d=Object.getOwnPropertyDescriptor(f,"onPositionChanged"),c("position")(f,"onPositionChanged",d),d=Object.getOwnPropertyDescriptor(f,"onAnimationChanged"),c("animation")(f,"onAnimationChanged",d),d=Object.getOwnPropertyDescriptor(f,"onAutoCloseChanged"),c("autoClose")(f,"onAutoCloseChanged",d);var v=Object.freeze({__proto__:null,Popup:a,qPopup:g,qPopupTrigger:function(t,e,o,i){return function(t){var o=this.eval(e),i=this.model.$app;if("string"!=typeof o)throw new Error("Invalid value for q:popup-trigger. A popup id is expected.");t.addEventListener("click",(function(e){var n=i.lookup(o);if(!n)throw Error("Popup not found: "+o);n.toggle(t)}))}}});t.import(v)}(Qute,window);
//# sourceMappingURL=qute-popup.min.js.map