framework7/components/popover.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var t=document,a=window,r=o.$,p=(o.Template7,o.utils),n=(o.device,o.support,o.Class,o.Modal),s=(o.ConstructorMethods,o.ModalMethods),i=function(o){function e(e,n){var s=p.extend({on:{}},e.params.popover,n);o.call(this,e,s);var i,l=this;if(l.params=s,(i=l.params.el?r(l.params.el).eq(0):r(l.params.content).filter((function(o,e){return 1===e.nodeType})).eq(0))&&i.length>0&&i[0].f7Modal)return i[0].f7Modal;var d,c,h=r(l.params.targetEl).eq(0);if(0===i.length)return l.destroy();l.params.backdrop&&l.params.backdropEl?d=r(l.params.backdropEl):l.params.backdrop&&0===(d=e.root.children(".popover-backdrop")).length&&(d=r('<div class="popover-backdrop"></div>'),e.root.append(d)),0===i.find(".popover-angle").length?(c=r('<div class="popover-angle"></div>'),i.prepend(c)):c=i.find(".popover-angle");var m=l.open;function v(){l.resize()}function f(o){var t=o.target,p=r(t);!e.device.desktop&&e.device.cordova&&(a.Keyboard&&a.Keyboard.isVisible||a.cordova.plugins&&a.cordova.plugins.Keyboard&&a.cordova.plugins.Keyboard.isVisible)||0===p.closest(l.el).length&&(l.params.closeByBackdropClick&&l.params.backdrop&&l.backdropEl&&l.backdropEl===t||l.params.closeByOutsideClick)&&l.close()}function u(o){27===o.keyCode&&l.params.closeOnEscape&&l.close()}return p.extend(l,{app:e,$el:i,el:i[0],$targetEl:h,targetEl:h[0],$angleEl:c,angleEl:c[0],$backdropEl:d,backdropEl:d&&d[0],type:"popover",open:function(){for(var o,e=[],t=arguments.length;t--;)e[t]=arguments[t];var a=e[0],p=e[1];return"boolean"==typeof e[0]&&(p=(o=e)[0],a=o[1]),a&&(l.$targetEl=r(a),l.targetEl=l.$targetEl[0]),m.call(l,p)}}),l.on("popoverOpen",(function(){l.resize(),e.on("resize",v),r(a).on("keyboardDidShow keyboardDidHide",v),l.on("popoverClose popoverBeforeDestroy",(function(){e.off("resize",v),r(a).off("keyboardDidShow keyboardDidHide",v)}))})),l.params.closeOnEscape&&(l.on("popoverOpen",(function(){r(t).on("keydown",u)})),l.on("popoverClose",(function(){r(t).off("keydown",u)}))),l.on("popoverOpened",(function(){(l.params.closeByOutsideClick||l.params.closeByBackdropClick)&&e.on("click",f)})),l.on("popoverClose",(function(){(l.params.closeByOutsideClick||l.params.closeByBackdropClick)&&e.off("click",f)})),i[0].f7Modal=l,l}return o&&(e.__proto__=o),e.prototype=Object.create(o&&o.prototype),e.prototype.constructor=e,e.prototype.resize=function(){var o=this.app,e=this.$el,t=this.$targetEl,a=this.$angleEl,p=this.params,n=p.targetX,s=p.targetY;e.css({left:"",top:""});var i,l,d,c,h,m,v=[e.width(),e.height()],f=v[0],u=v[1],g=0;"ios"===o.theme||"aurora"===o.theme?(a.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),g=a.width()/2):e.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""});var k=parseInt(r("html").css("--f7-safe-area-top"),10);if(Number.isNaN(k)&&(k=0),t&&t.length>0){d=t.outerWidth(),c=t.outerHeight();var b=t.offset();h=b.left-o.left,m=b.top-o.top;var y=t.parents(".page");y.length>0&&(m-=y[0].scrollTop)}else void 0!==n&&"undefined"!==s&&(h=n,m=s,d=this.params.targetWidth||0,c=this.params.targetHeight||0);var C,M=[0,0,0],E=M[0],w=M[1],x=M[2],B="md"===o.theme?"bottom":"top";"md"===o.theme?(u<o.height-m-c?(B="bottom",w=m+c):u<m-k?(w=m-u,B="top"):(B="middle",w=c/2+m-u/2),w=Math.max(8,Math.min(w,o.height-u-8)),h<o.width/2?(C="right",E="middle"===B?h+d:h):(C="left",E="middle"===B?h-f:h+d-f),E=Math.max(8,Math.min(E,o.width-f-8)),e.addClass("popover-on-"+B+" popover-on-"+C)):(u+g<m-k?w=m-u-g:u+g<o.height-m-c?(B="bottom",w=m+c+g):(B="middle",x=w=c/2+m-u/2,x-=w=Math.max(5,Math.min(w,o.height-u-5))),"top"===B||"bottom"===B?(x=E=d/2+h-f/2,E=Math.max(5,Math.min(E,o.width-f-5)),"top"===B&&a.addClass("on-bottom"),"bottom"===B&&a.addClass("on-top"),i=f/2-g+(x-=E),i=Math.max(Math.min(i,f-2*g-13),13),a.css({left:i+"px"})):"middle"===B&&(E=h-f-g,a.addClass("on-right"),(E<5||E+f>o.width)&&(E<5&&(E=h+d+g),E+f>o.width&&(E=o.width-f-5),a.removeClass("on-right").addClass("on-left")),l=u/2-g+x,l=Math.max(Math.min(l,u-2*g-13),13),a.css({top:l+"px"})));e.css({top:w+"px",left:E+"px"})},e}(n),l={name:"popover",params:{popover:{backdrop:!0,backdropEl:void 0,closeByBackdropClick:!0,closeByOutsideClick:!0,closeOnEscape:!1}},static:{Popover:i},create:function(){var o=this;o.popover=p.extend(s({app:o,constructor:i,defaultSelector:".popover.modal-in"}),{open:function(e,t,a){var p=r(e);if(p.length>1){var n=r(t).parents(".page");n.length&&p.each((function(o,e){var t=r(e);t.parents(n)[0]===n[0]&&(p=t)}))}p.length>1&&(p=p.eq(p.length-1));var s=p[0].f7Modal;return s||(s=new i(o,{el:p,targetEl:t})),s.open(t,a)}})},clicks:{".popover-open":function(o,e){void 0===e&&(e={});this.popover.open(e.popover,o,e.animate)},".popover-close":function(o,e){void 0===e&&(e={});this.popover.close(e.popover,e.animate,o)}}};if(e){if(o.prototype.modules&&o.prototype.modules[l.name])return;o.use(l),o.instance&&(o.instance.useModuleParams(l,o.instance.params),o.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))