UNPKG

@odyzeo/popup

Version:

Odyzeo popup component with Vue

2 lines 11.6 kB
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["popup"]=e(require("vue")):t["popup"]=e(t["Vue"])})("undefined"!==typeof self?self:this,(function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({3865:function(t,e,n){},"622c":function(t,e,n){"use strict";n("3865")},8875:function(t,e,n){var r,o,i;(function(n,u){o=[],r=u,i="function"===typeof r?r.apply(e,o):r,void 0===i||(t.exports=i)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(d){var n,r,o,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,u=/@([^@]*):(\d+):(\d+)\s*$/gi,s=i.exec(d.stack)||u.exec(d.stack),c=s&&s[1]||!1,p=s&&s[2]||!1,l=document.location.href.replace(document.location.hash,""),a=document.getElementsByTagName("script");c===l&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(p-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=n.replace(r,"$1").trim());for(var f=0;f<a.length;f++){if("interactive"===a[f].readyState)return a[f];if(a[f].src===c)return a[f];if(c===l&&a[f].innerHTML&&a[f].innerHTML.trim()===o)return a[f]}return null}}return t}))},"8bbf":function(e,n){e.exports=t},fb15:function(t,e,n){"use strict";if(n.r(e),"undefined"!==typeof window){var r=window.document.currentScript,o=n("8875");r=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var u=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"popup",class:[t.classType,"popup--"+t.type,t.transition&&"popup-transition-"+t.transition,t.menu&&"popup-menu popup-menu--"+t.menu]},[n("div",{ref:"inner",staticClass:"popup__inner"},[t.showCloseButton?n("div",{staticClass:"popup__close",on:{click:function(e){return e.preventDefault(),t.close(e)}}},[t._t("close",[t._m(0)])],2):t._e(),t._t("default",null,{close:t.close,ok:t.ok})],2)])},s=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"popup__close-default"},[n("img",{staticClass:"popup__icon-close",attrs:{src:"data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZmlsbD0iIzAwMCIgZD0iTTUwNy4zMzEgNDExLjMzYy0wLjAwMi0wLjAwMi0wLjAwNC0wLjAwNC0wLjAwNi0wLjAwNWwtMTU1LjMyMi0xNTUuMzI1IDE1NS4zMjItMTU1LjMyNWMwLjAwMi0wLjAwMiAwLjAwNC0wLjAwMyAwLjAwNi0wLjAwNSAxLjY3Mi0xLjY3MyAyLjg4MS0zLjYyNyAzLjY1Ni01LjcwOCAyLjEyMy01LjY4OCAwLjkxMi0xMi4zNDEtMy42NjItMTYuOTE1bC03My4zNzMtNzMuMzczYy00LjU3NC00LjU3My0xMS4yMjUtNS43ODMtMTYuOTE0LTMuNjYtMi4wODAgMC43NzUtNC4wMzUgMS45ODQtNS43MDkgMy42NTUgMCAwLjAwMi0wLjAwMiAwLjAwMy0wLjAwNCAwLjAwNWwtMTU1LjMyNCAxNTUuMzI2LTE1NS4zMjQtMTU1LjMyNWMtMC4wMDItMC4wMDItMC4wMDMtMC4wMDMtMC4wMDUtMC4wMDUtMS42NzMtMS42NzEtMy42MjctMi44OC01LjcwNy0zLjY1NS01LjY5LTIuMTI0LTEyLjM0MS0wLjkxMy0xNi45MTUgMy42NmwtNzMuMzc0IDczLjM3NGMtNC41NzQgNC41NzQtNS43ODQgMTEuMjI2LTMuNjYxIDE2LjkxNCAwLjc3NiAyLjA4MCAxLjk4NSA0LjAzNiAzLjY1NiA1LjcwOCAwLjAwMiAwLjAwMSAwLjAwMyAwLjAwMyAwLjAwNSAwLjAwNWwxNTUuMzI1IDE1NS4zMjQtMTU1LjMyNSAxNTUuMzI2Yy0wLjAwMSAwLjAwMi0wLjAwMyAwLjAwMy0wLjAwNCAwLjAwNS0xLjY3MSAxLjY3My0yLjg4IDMuNjI3LTMuNjU3IDUuNzA3LTIuMTI0IDUuNjg4LTAuOTEzIDEyLjM0MSAzLjY2MSAxNi45MTVsNzMuMzc0IDczLjM3M2M0LjU3NSA0LjU3NCAxMS4yMjYgNS43ODQgMTYuOTE1IDMuNjYxIDIuMDgwLTAuNzc2IDQuMDM1LTEuOTg1IDUuNzA4LTMuNjU2IDAuMDAxLTAuMDAyIDAuMDAzLTAuMDAzIDAuMDA1LTAuMDA1bDE1NS4zMjQtMTU1LjMyNSAxNTUuMzI0IDE1NS4zMjVjMC4wMDIgMC4wMDEgMC4wMDQgMC4wMDMgMC4wMDYgMC4wMDQgMS42NzQgMS42NzIgMy42MjcgMi44ODEgNS43MDcgMy42NTcgNS42ODkgMi4xMjMgMTIuMzQyIDAuOTEzIDE2LjkxNC0zLjY2MWw3My4zNzMtNzMuMzc0YzQuNTc0LTQuNTc0IDUuNzg1LTExLjIyNyAzLjY2Mi0xNi45MTUtMC43NzYtMi4wODAtMS45ODUtNC4wMzQtMy42NTctNS43MDd6Ij48L3BhdGg+Cjwvc3ZnPgo="}})])}],c=n("8bbf"),p=n.n(c),l=new p.a;function a(t){return y(t)||M(t)||d(t)||f()}function f(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function d(t,e){if(t){if("string"===typeof t)return h(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(t,e):void 0}}function M(t){if("undefined"!==typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function y(t){if(Array.isArray(t))return h(t)}function h(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var w={name:"Popup",props:{value:{type:Boolean,default:!1},name:{required:!0,type:String},type:{type:String,default:"fixed"},disableClose:{type:Boolean,default:!1},disableOffClick:{type:Boolean,default:!1},disableEsc:{type:Boolean,default:!1},menu:{type:String,default:null},transition:{type:String,default:"fade"},permanent:{type:Boolean,default:!1},inline:{type:Boolean,default:!1},parentSelector:{type:String,default:null}},data:function(){return{isOpen:!1,scrollTop:null,originalParent:null}},computed:{parent:function(){var t,e=this.parentSelector||this.$popup.parentSelector;return null!==(t=document.querySelector(e))&&void 0!==t?t:document.body},classType:function(){return this.isOpen?"popup--open":""},enableEsc:function(){return!this.permanent&&!this.disableEsc},enableOffClick:function(){return!this.permanent&&!this.disableOffClick},showCloseButton:function(){return!this.permanent&&!this.disableClose}},watch:{value:function(t){this.toggle(t)},inline:function(t){t?this.appendToParent():this.appendToBody()}},beforeMount:function(){l.$on("toggle",this.handleToggleEvent)},mounted:function(){this.originalParent=this.$el.parentNode,this.inline||this.appendToBody(),this.value&&this.toggle(!0)},beforeDestroy:function(){l.$off("toggle",this.handleToggleEvent),this.isOpen&&this.close(),this.removePopupFromDOM()},methods:{appendToParent:function(){this.originalParent.appendChild(this.$el)},appendToBody:function(){this.parent.appendChild(this.$el)},handleToggleEvent:function(t,e){if(this.name===t){var n="undefined"===typeof e?!this.isOpen:e;this.toggle(n)}},toggle:function(t){t?this.show():this.close()},escClose:function(t){27===t.keyCode&&(t.preventDefault(),this.close())},show:function(){var t=this;this.isOpen=!0,this.scrollTop=window.pageYOffset||this.parent.scrollTop,"fixed"===this.type&&this.addBodyStyles(),this.enableOffClick&&setTimeout((function(){document.addEventListener("click",t.offClick)})),this.enableEsc&&window.addEventListener("keydown",this.escClose),this.$popup.currentPopups=new Set([].concat(a(this.$popup.currentPopups),[this.name])),this.$emit("show",this.name),this.$emit("input",!0)},ok:function(){this.closePopup()},close:function(){this.closePopup(),this.$emit("close",this.name)},closePopup:function(){var t=this;this.isOpen=!1,this.$popup.currentPopups=new Set(a(this.$popup.currentPopups).filter((function(e){return e!==t.name}))),"fixed"===this.type&&this.removeBodyStyles(),this.enableOffClick&&document.removeEventListener("click",this.offClick),this.enableEsc&&window.removeEventListener("keydown",this.escClose),this.$emit("input",!1)},removePopupFromDOM:function(){this.parent.contains(this.$el)&&(this.inline?this.originalParent.removeChild(this.$el):this.parent.removeChild(this.$el))},addBodyStyles:function(){this.parent.style.width="".concat(this.parent.clientWidth,"px"),this.parent.classList.add("open-popup"),this.parent.style.top="-".concat(this.scrollTop,"px")},removeBodyStyles:function(){this.parent.style.top=null,this.parent.style.width=null,this.parent.classList.remove("open-popup"),window.scrollTo(0,this.scrollTop)},offClick:function(t){this.$refs.inner.contains(t.target)||this.close()}}},j=w;n("622c");function g(t,e,n,r,o,i,u,s){var c,p="function"===typeof t?t.options:t;if(e&&(p.render=e,p.staticRenderFns=n,p._compiled=!0),r&&(p.functional=!0),i&&(p._scopeId="data-v-"+i),u?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(u)},p._ssrRegister=c):o&&(c=s?function(){o.call(this,(p.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(p.functional){p._injectStyles=c;var l=p.render;p.render=function(t,e){return c.call(e),l(t,e)}}else{var a=p.beforeCreate;p.beforeCreate=a?[].concat(a,c):[c]}return{exports:t,options:p}}var m=g(j,u,s,!1,null,null,null),L=m.exports;function A(t){return T(t)||v(t)||S(t)||N()}function N(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function S(t,e){if(t){if("string"===typeof t)return C(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?C(t,e):void 0}}function v(t){if("undefined"!==typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function T(t){if(Array.isArray(t))return C(t)}function C(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var b={install:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.installed){var r="Popup";this.installed=!0,this.componentName=n.componentName||r,this.parentSelector=n.parentSelector,this.currentPopups=new t({data:{getCurrentPopups:new Set}}),t.prototype.$popup={show:function(t){"string"===typeof t&&(this.currentPopups.add(t),l.$emit("toggle",t,!0))},hide:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null==t?(this.currentPopups.forEach((function(t){l.$emit("toggle",t,!1)})),this.currentPopups=new Set):(l.$emit("toggle",t,!1),this.currentPopups=new Set(A(this.currentPopups).filter((function(e){return e!==t}))))},parentSelector:this.parentSelector},Object.defineProperties(t.prototype.$popup,{currentPopups:{get:function(){return e.currentPopups.getCurrentPopups},set:function(t){return e.currentPopups.getCurrentPopups=t,e.currentPopups.getCurrentPopups}}}),t.component(this.componentName,L)}}},D=b;e["default"]=D}})})); //# sourceMappingURL=popup.umd.min.js.map