zmp-core/components/popover/popover.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(e,o){void 0===o&&(o=!0);var t=e.$,r=e.utils,n=(e.getDevice,e.getSupport,e.Class,e.Modal),a=(e.ConstructorMethods,e.ModalMethods),p=r.extend;function i(e){this.wrapped=e}function s(e){var o,t;function r(o,t){try{var a=e[o](t),p=a.value,s=p instanceof i;Promise.resolve(s?p.wrapped:p).then((function(e){s?r("return"===o?"return":"next",e):n(a.done?"return":"normal",e)}),(function(e){r("throw",e)}))}catch(e){n("throw",e)}}function n(e,n){switch(e){case"return":o.resolve({value:n,done:!0});break;case"throw":o.reject(n);break;default:o.resolve({value:n,done:!1})}(o=o.next)?r(o.key,o.arg):t=null}this._invoke=function(e,n){return new Promise((function(a,p){var i={key:e,arg:n,resolve:a,reject:p,next:null};t?t=t.next=i:(o=t=i,r(e,n))}))},"function"!=typeof e.return&&(this.return=void 0)}function l(e,o){return(l=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}function c(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}s.prototype["function"==typeof Symbol&&Symbol.asyncIterator||"@@asyncIterator"]=function(){return this},s.prototype.next=function(e){return this._invoke("next",e)},s.prototype.throw=function(e){return this._invoke("throw",e)},s.prototype.return=function(e){return this._invoke("return",e)};var d=function(e){var o,r;function n(o,r){var n,a,i=p({on:{}},o.params.popover,r),s=c(n=e.call(this,o,i)||this);if(s.params=i,(a=s.params.el?t(s.params.el).eq(0):t(s.params.content).filter((function(e){return 1===e.nodeType})).eq(0))&&a.length>0&&a[0].zmpModal)return a[0].zmpModal||c(n);var l,d,u=t(s.params.targetEl).eq(0);if(0===a.length)return s.destroy()||c(n);s.params.backdrop&&s.params.backdropEl?l=t(s.params.backdropEl):s.params.backdrop&&0===(l=s.$containerEl.children(".popover-backdrop")).length&&(l=t('<div class="popover-backdrop"></div>'),s.$containerEl.append(l)),0===a.find(".popover-angle").length?(d=t('<div class="popover-angle"></div>'),a.prepend(d)):d=a.find(".popover-angle");var h=s.open;function m(){s.resize()}function f(e){var o=e.target;0===t(o).closest(s.el).length&&(s.params.closeByBackdropClick&&s.params.backdrop&&s.backdropEl&&s.backdropEl===o||s.params.closeByOutsideClick)&&s.close()}function v(e){27===e.keyCode&&s.params.closeOnEscape&&s.close()}return p(s,{app:o,$el:a,el:a[0],$targetEl:u,targetEl:u[0],$angleEl:d,angleEl:d[0],$backdropEl:l,backdropEl:l&&l[0],type:"popover",open:function(){for(var e=arguments.length,o=new Array(e),r=0;r<e;r++)o[r]=arguments[r];var n=o[0],a=o[1];return"boolean"==typeof o[0]&&(a=o[0],n=o[1]),n&&(s.$targetEl=t(n),s.targetEl=s.$targetEl[0]),h.call(s,a)}}),s.on("popoverOpen",(function(){s.resize(),o.on("resize",m),t(window).on("keyboardDidShow keyboardDidHide",m),s.on("popoverClose popoverBeforeDestroy",(function(){o.off("resize",m),t(window).off("keyboardDidShow keyboardDidHide",m)}))})),s.params.closeOnEscape&&(s.on("popoverOpen",(function(){t(document).on("keydown",v)})),s.on("popoverClose",(function(){t(document).off("keydown",v)}))),s.on("popoverOpened",(function(){(s.params.closeByOutsideClick||s.params.closeByBackdropClick)&&o.on("click",f)})),s.on("popoverClose",(function(){(s.params.closeByOutsideClick||s.params.closeByBackdropClick)&&o.off("click",f)})),a[0].zmpModal=s,s||c(n)}return r=e,(o=n).prototype=Object.create(r.prototype),o.prototype.constructor=o,l(o,r),n.prototype.resize=function(){var e=this,o=e.app,r=e.$el,n=e.$targetEl,a=e.$angleEl,p=e.params,i=p.targetX,s=p.targetY;r.css({left:"",top:""});var l,c,d,u,h,m,f=[r.width(),r.height()],v=f[0],g=f[1],k=0;"ios"===o.theme||"aurora"===o.theme?(a.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),k=a.width()/2):r.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});var y=parseInt(t("html").css("--zmp-safe-area-top"),10),b=parseInt(t("html").css("--zmp-safe-area-left"),10),w=parseInt(t("html").css("--zmp-safe-area-right"),10);if(Number.isNaN(y)&&(y=0),Number.isNaN(b)&&(b=0),Number.isNaN(w)&&(w=0),n&&n.length>0){d=n.outerWidth(),u=n.outerHeight();var E=n.offset();h=E.left-o.left,m=E.top-o.top;var C=n.parents(".page");C.length>0&&(m-=C[0].scrollTop)}else void 0!==i&&"undefined"!==s&&(h=i,m=s,d=e.params.targetWidth||0,u=e.params.targetHeight||0);var M,x=0,O=0,z=0,B="md"===o.theme?"bottom":"top";"md"===o.theme?(g<o.height-m-u?(B="bottom",O=m+u):g<m-y?(O=m-g,B="top"):(B="middle",O=u/2+m-g/2),O=Math.max(8,Math.min(O,o.height-g-8)),h<o.width/2?(M="right",x="middle"===B?h+d:h):(M="left",x="middle"===B?h-v:h+d-v),x=Math.max(8,Math.min(x,o.width-v-8-w),b),r.addClass("popover-on-"+B+" popover-on-"+M)):(g+k<m-y?O=m-g-k:g+k<o.height-m-u?(B="bottom",O=m+u+k):(B="middle",z=O=u/2+m-g/2,z-=O=Math.max(5,Math.min(O,o.height-g-5))),"top"===B||"bottom"===B?(z=x=d/2+h-v/2,x=Math.max(5,Math.min(x,o.width-v-5)),b&&(x=Math.max(x,b)),w&&x+v>o.width-5-w&&(x=o.width-5-w-v),"top"===B&&a.addClass("on-bottom"),"bottom"===B&&a.addClass("on-top"),l=v/2-k+(z-=x),l=Math.max(Math.min(l,v-2*k-13),13),a.css({left:l+"px"})):"middle"===B&&(x=h-v-k,a.addClass("on-right"),(x<5||x+v+w>o.width||x<b)&&(x<5&&(x=h+d+k),x+v+w>o.width&&(x=o.width-v-5-w),x<b&&(x=b),a.removeClass("on-right").addClass("on-left")),c=g/2-k+z,c=Math.max(Math.min(c,g-2*k-13),13),a.css({top:c+"px"})));r.css({top:O+"px",left:x+"px"})},n}(n),u={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1,containerEl:null}},static:{Popover:d},create:function(){var e=this;e.popover=p(a({app:e,constructor:d,defaultSelector:".popover.modal-in"}),{open:function(o,r,n){var a=t(o);if(a.length>1){var p=t(r).parents(".page");p.length&&a.each((function(e){var o=t(e);o.parents(p)[0]===p[0]&&(a=o)}))}a.length>1&&(a=a.eq(a.length-1));var i=a[0].zmpModal,s=a.dataset();return i||(i=new d(e,Object.assign({el:a,targetEl:r},s))),i.open(r,n)}})},clicks:{".popover-open":function(e,o){void 0===o&&(o={});this.popover.open(o.popover,e,o.animate)},".popover-close":function(e,o){void 0===o&&(o={});this.popover.close(o.popover,o.animate,e)}}};if(o){if(e.prototype.modules&&e.prototype.modules[u.name])return;e.use(u),e.instance&&(e.instance.useModuleParams(u,e.instance.params),e.instance.useModule(u))}return u}(ZMP, typeof ZMPAutoInstallComponent === 'undefined' ? undefined : ZMPAutoInstallComponent))