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,i=this;if(i.params=p,(n=i.params.el?t(i.params.el).eq(0):t(i.params.content).filter(function(o,e){return 1===e.nodeType}).eq(0))&&n.length>0&&n[0].f7Modal)return n[0].f7Modal;var s,d,l=t(i.params.targetEl).eq(0);if(0===n.length)return i.destroy();i.params.backdrop&&i.params.backdropEl?s=t(i.params.backdropEl):i.params.backdrop&&0===(s=e.root.children(".popover-backdrop")).length&&(s=t('<div class="popover-backdrop"></div>'),e.root.append(s)),0===n.find(".popover-angle").length?(d=t('<div class="popover-angle"></div>'),n.prepend(d)):d=n.find(".popover-angle");var c=i.open;function m(){i.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(i.el).length&&(i.params.closeByBackdropClick&&i.params.backdrop&&i.backdropEl&&i.backdropEl===a?i.close():i.params.closeByOutsideClick&&i.close())}function v(o){27===o.keyCode&&i.params.closeOnEscape&&i.close()}return a.extend(i,{app:e,$el:n,el:n[0],$targetEl:l,targetEl:l[0],$angleEl:d,angleEl:d[0],$backdropEl:s,backdropEl:s&&s[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&&(i.$targetEl=t(r),i.targetEl=i.$targetEl[0]),c.call(i,p)}}),i.on("popoverOpen",function(){i.resize(),e.on("resize",m),t(window).on("keyboardDidShow keyboardDidHide",m),i.on("popoverClose popoverBeforeDestroy",function(){e.off("resize",m),t(window).off("keyboardDidShow keyboardDidHide",m)})}),i.params.closeOnEscape&&(i.on("popoverOpen",function(){t(document).on("keydown",v)}),i.on("popoverClose",function(){t(document).off("keydown",v)})),i.on("popoverOpened",function(){(i.params.closeByOutsideClick||i.params.closeByBackdropClick)&&e.on("click",h)}),i.on("popoverClose",function(){(i.params.closeByOutsideClick||i.params.closeByBackdropClick)&&e.off("click",h)}),n[0].f7Modal=i,i}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,r=this.params,p=r.targetX,n=r.targetY;e.css({left:"",top:""});var i,s,d,l,c,m,h=[e.width(),e.height()],v=h[0],f=h[1],u=0;if("ios"===o.theme||"aurora"===o.theme?(a.removeClass("on-left on-right on-top on-bottom").css({left:"",top:""}),u=a.width()/2):e.removeClass("popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle").css({left:"",top:""}),t&&t.length>0){d=t.outerWidth(),l=t.outerHeight();var g=t.offset();c=g.left-o.left,m=g.top-o.top;var k=t.parents(".page");k.length>0&&(m-=k[0].scrollTop)}else void 0!==p&&"undefined"!==n&&(c=p,m=n,d=this.params.targetWidth||0,l=this.params.targetHeight||0);var b,w=[0,0,0],y=w[0],C=w[1],M=w[2],E="md"===o.theme?"bottom":"top";"md"===o.theme?(f<o.height-m-l?(E="bottom",C=m+l):f<m?(C=m-f,E="top"):(E="middle",C=l/2+m-f/2),C=Math.max(8,Math.min(C,o.height-f-8)),c<o.width/2?(b="right",y="middle"===E?c+d:c):(b="left",y="middle"===E?c-v:c+d-v),y=Math.max(8,Math.min(y,o.width-v-8)),e.addClass("popover-on-"+E+" popover-on-"+b)):(f+u<m?C=m-f-u:f+u<o.height-m-l?(E="bottom",C=m+l+u):(E="middle",M=C=l/2+m-f/2,M-=C=Math.max(5,Math.min(C,o.height-f-5))),"top"===E||"bottom"===E?(M=y=d/2+c-v/2,y=Math.max(5,Math.min(y,o.width-v-5)),"top"===E&&a.addClass("on-bottom"),"bottom"===E&&a.addClass("on-top"),i=v/2-u+(M-=y),i=Math.max(Math.min(i,v-2*u-13),13),a.css({left:i+"px"})):"middle"===E&&(y=c-v-u,a.addClass("on-right"),(y<5||y+v>o.width)&&(y<5&&(y=c+d+u),y+v>o.width&&(y=o.width-v-5),a.removeClass("on-right").addClass("on-left")),s=f/2-u+M,s=Math.max(Math.min(s,f-2*u-13),13),a.css({top:s+"px"})));e.css({top:C+"px",left:y+"px"})},e}(r),i={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),i=p[0].f7Modal;return i||(i=new n(o,{el:p,targetEl:a})),i.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[i.name])return;o.use(i),o.instance&&(o.instance.useModuleParams(i,o.instance.params),o.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))