framework7/components/popover.js

Full featured mobile HTML framework for building iOS & Android apps

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