framework7/components/popover/popover.lazy.js

Full featured mobile HTML framework for building iOS & Android apps

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