framework7/components/card/card.lazy.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);var t=e.$,r=e.utils,n=e.getDevice,s=e.getSupport,o=(e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,e.$jsx,r.bindMethods);const d={open(e,a){void 0===e&&(e=".card-expandable"),void 0===a&&(a=!0);const r=this,o=n(),d=s(),l=t(e).eq(0);if(!l||!l.length)return;if(l.hasClass("card-opened")||l.hasClass("card-opening")||l.hasClass("card-closing"))return;const c=l.parents(".page").eq(0);if(!c.length)return;if(c.find(".card-opened").length)return;let i;function p(){i=!0}if(l.trigger("card:beforeopen",{prevent:p}),r.emit("cardBeforeOpen",l[0],p),i)return;const h=Object.assign({animate:a},r.params.card,l.dataset()),f=l.parents(".page-content");let g,b,m;l.attr("data-backdrop-el")&&(g=t(l.attr("data-backdrop-el"))),!g&&h.backdrop&&(g=f.find(".card-backdrop"),g.length||(g=t('<div class="card-backdrop"></div>'),f.append(g))),h.hideNavbarOnOpen&&(b=c.children(".navbar"),b.length||c[0].f7Page&&(b=c[0].f7Page.$navbarEl)),h.hideToolbarOnOpen&&(m=c.children(".toolbar"),m.length||(m=c.parents(".view").children(".toolbar")),m.length||(m=c.parents(".views").children(".toolbar")));const v=l.css("transform");let u;v&&v.match(/[2-9]/)&&(u=!0);const C=l.children(".card-content"),O=t(document.createElement("div")).addClass("card-expandable-size");l.append(O);let $,x=l[0].offsetWidth,k=l[0].offsetHeight,T=c[0].offsetWidth,w=c[0].offsetHeight,E=O[0].offsetWidth||T,N=O[0].offsetHeight||w;b&&!h.hideStatusbarOnOpen&&N===w&&($=parseInt(b.css("--f7-safe-area-top"),10),Number.isNaN($)&&($=0)),$&&(N-=$);let H,M,y=E/x,B=N/k,K=l.offset(),S=c.offset();if($&&(S.top+=$/2),K.left-=S.left,u){const e=v.replace(/matrix\(|\)/g,"").split(",").map((e=>e.trim()));if(e&&e.length>1){const a=parseFloat(e[0]);H=K.left-x*(1-a)/2,M=K.top-S.top-k*(1-a)/2,r.rtl&&(H-=l[0].scrollLeft)}else H=l[0].offsetLeft,M=l[0].offsetTop-(f.length?f[0].scrollTop:0)}else H=K.left,M=K.top-S.top,r.rtl&&(H-=l[0].scrollLeft);H-=(T-E)/2,M-=(w-N)/2;let W=E-x-H;r.rtl&&([H,W]=[W,H]);let q,L,P,z,j,I,X,D,Y,F,A,G,J=N-k-M,Q=(W-H)/2,R=(J-M)/2;function U(){c.addClass("page-with-card-opened"),o.ios&&f.length&&(f.css("height",`${f[0].offsetHeight+1}px`),setTimeout((()=>{f.css("height","")}))),l.addClass("card-opened"),l.removeClass("card-opening"),l.trigger("card:opened"),r.emit("cardOpened",l[0],c[0])}function V(){l.removeClass("card-transitioning"),x=l[0].offsetWidth,k=l[0].offsetHeight,T=c[0].offsetWidth,w=c[0].offsetHeight,E=O[0].offsetWidth||T,N=O[0].offsetHeight||w,$=0,b&&!h.hideStatusbarOnOpen&&N===w&&($=parseInt(b.css("--f7-safe-area-top"),10),Number.isNaN($)&&($=0)),$&&(N-=$),y=E/x,B=N/k,l.transform("translate3d(0px, 0px, 0) scale(1)"),K=l.offset(),S=c.offset(),$&&(S.top+=$/2),K.left-=S.left,K.top-=S.top,H=K.left-(T-E)/2,r.rtl&&(H-=l[0].scrollLeft),M=K.top-(w-N)/2,W=E-x-H,J=N-k-M,r.rtl&&([H,W]=[W,H]),Q=(W-H)/2,R=(J-M)/2,l.transform(`translate3d(${r.rtl?-Q:Q}px, ${R}px, 0) scale(${y}, ${B})`),C.css({width:`${E}px`,height:`${N}px`}).transform(`translate3d(${r.rtl?H+Q:-H-Q}px, 0px, 0) scale(${1/y}, ${1/B})`)}function Z(e){t(e.target).closest(l).length&&l.hasClass("card-opened")&&(G=l.find(h.scrollableEl),q=G[0]&&G[0]!==C[0]&&!G[0].contains(e.target)?0:G.scrollTop(),L=!0,z=e.targetTouches[0].pageX,j=e.targetTouches[0].pageY,D=void 0,F=!1,A=!1)}function _(e){if(L){if(I=e.targetTouches[0].pageX,X=e.targetTouches[0].pageY,void 0===D&&(D=!!(D||Math.abs(X-j)>Math.abs(I-z))),A||F||(!D&&e.targetTouches[0].clientX<=50?A=!0:F=!0),!A&&!F||F&&0!==q)return L=!0,void(P=!0);P||l.removeClass("card-transitioning"),P=!0,Y=F?Math.max((X-j)/150,0):Math.max((I-z)/(x/2),0),(Y>0&&F||A)&&(F&&o.ios&&G[0]===C[0]&&(G.css("-webkit-overflow-scrolling","auto"),G.scrollTop(0)),e.preventDefault()),Y>1&&(Y**=.3),Y>(F?1.3:1.1)?(L=!1,P=!1,r.card.close(l)):l.transform(`translate3d(${r.rtl?-Q:Q}px, ${R}px, 0) scale(${y*(1-.2*Y)}, ${B*(1-.2*Y)})`)}}function ee(){L&&P&&(L=!1,P=!1,o.ios&&G.css("-webkit-overflow-scrolling",""),Y>=.8?r.card.close(l):l.addClass("card-transitioning").transform(`translate3d(${r.rtl?-Q:Q}px, ${R}px, 0) scale(${y}, ${B})`))}h.hideNavbarOnOpen&&b&&b.length&&(b.closest(".navbar-hidden").length?l[0].f7KeepNavbarOnClose=!0:(delete l[0].f7KeepNavbarOnClose,r.navbar.hide(b,h.animate,h.hideStatusbarOnOpen,!0))),h.hideToolbarOnOpen&&m&&m.length&&(m.closest(".toolbar-hidden").length?l[0].f7KeepToolbarOnClose=!0:(delete l[0].f7KeepToolbarOnClose,r.toolbar.hide(m,h.animate))),g&&g.removeClass("card-backdrop-out").addClass("card-backdrop-in"),l.removeClass("card-transitioning"),h.animate&&l.addClass("card-opening"),l.trigger("card:open"),r.emit("cardOpen",l[0]),C.css({width:`${E}px`,height:`${N}px`}).transform(`translate3d(${r.rtl?H+Q:-H-Q}px, 0px, 0) scale(${1/y}, ${1/B})`),l.transform(`translate3d(${r.rtl?-Q:Q}px, ${R}px, 0) scale(${y}, ${B})`),h.animate?l.transitionEnd((()=>{U()})):U(),l[0].detachEventHandlers=function(){r.off("resize",V),d.touch&&h.swipeToClose&&(r.off("touchstart:passive",Z),r.off("touchmove:active",_),r.off("touchend:passive",ee))},r.on("resize",V),d.touch&&h.swipeToClose&&(r.on("touchstart:passive",Z),r.on("touchmove:active",_),r.on("touchend:passive",ee))},close(e,a){void 0===e&&(e=".card-expandable.card-opened"),void 0===a&&(a=!0);const r=this,s=n(),o=t(e).eq(0);if(!o||!o.length)return;if(!o.hasClass("card-opened")||o.hasClass("card-opening")||o.hasClass("card-closing"))return;const d=o.children(".card-content"),l=o.parents(".page-content"),c=o.parents(".page").eq(0);if(!c.length)return;const i=Object.assign({animate:a},r.params.card,o.dataset()),p=o.find(i.scrollableEl);let h,f,g;o.attr("data-backdrop-el")&&(g=t(o.attr("data-backdrop-el"))),i.backdrop&&(g=o.parents(".page-content").find(".card-backdrop")),i.hideNavbarOnOpen&&(h=c.children(".navbar"),h.length||c[0].f7Page&&(h=c[0].f7Page.$navbarEl),h&&h.length&&!o[0].f7KeepNavbarOnClose&&r.navbar.show(h,i.animate,!0)),i.hideToolbarOnOpen&&(f=c.children(".toolbar"),f.length||(f=c.parents(".view").children(".toolbar")),f.length||(f=c.parents(".views").children(".toolbar")),f&&f.length&&!o[0].f7KeepToolbarOnClose&&r.toolbar.show(f,i.animate)),c.removeClass("page-with-card-opened"),s.ios&&l.length&&(l.css("height",`${l[0].offsetHeight+1}px`),setTimeout((()=>{l.css("height","")}))),g&&g.length&&g.removeClass("card-backdrop-in").addClass("card-backdrop-out"),o.removeClass("card-opened card-transitioning"),i.animate?o.addClass("card-closing"):o.addClass("card-no-transition"),o.transform(""),o.trigger("card:close"),r.emit("cardClose",o[0],c[0]);const b=o.hasClass("card-expandable-animate-width");function m(){b||d.css({width:"",height:""}),g&&g.length&&g.removeClass("card-backdrop-in card-backdrop-out"),o.removeClass("card-closing card-no-transition"),o.trigger("card:closed"),o.find(".card-expandable-size").remove(),r.emit("cardClosed",o[0],c[0])}b&&d.css({width:"",height:""}),d.transform("").scrollTop(0,a?300:0),p.length&&p[0]!==d[0]&&p.scrollTop(0,a?300:0),a?d.transitionEnd((()=>{m()})):m(),o[0].detachEventHandlers&&(o[0].detachEventHandlers(),delete o[0].detachEventHandlers)},toggle(e,a){void 0===e&&(e=".card-expandable");const r=this,n=t(e).eq(0);n.length&&(n.hasClass("card-opened")?r.card.close(n,a):r.card.open(n,a))}};var l={name:"card",params:{card:{hideNavbarOnOpen:!0,hideStatusbarOnOpen:!0,hideToolbarOnOpen:!0,scrollableEl:".card-content",swipeToClose:!0,closeByBackdropClick:!0,backdrop:!0}},create(){o(this,{card:d})},on:{pageBeforeIn(e){const a=this;if(a.params.card.hideNavbarOnOpen&&e.navbarEl&&e.$el.find(".card-opened.card-expandable").length&&a.navbar.hide(e.navbarEl,!0,a.params.card.hideStatusbarOnOpen,!0),a.params.card.hideToolbarOnOpen&&e.$el.find(".card-opened.card-expandable").length){let t=e.$el.children(".toolbar");t.length||(t=e.$el.parents(".view").children(".toolbar")),t.length||(t=e.$el.parents(".views").children(".toolbar")),t&&t.length&&a.toolbar.hide(t)}}},clicks:{".card-close":function(e,a){this.card.close(a.card,a.animate)},".card-open":function(e,a){this.card.open(a.card,a.animate)},".card-expandable":function(e,a,r){e.hasClass("card-opened")||e.hasClass("card-opening")||e.hasClass("card-closing")||t(r.target).closest(".card-prevent-open, .card-close").length||this.card.open(e)},".card-backdrop-in":function(){let e=!1;this.params.card.closeByBackdropClick&&(e=!0);const a=t(".card-opened");a.length&&("true"===a.attr("data-close-by-backdrop-click")?e=!0:"false"===a.attr("data-close-by-backdrop-click")&&(e=!1),e&&this.card.close(a))}}};if(a){if(e.prototype.modules&&e.prototype.modules[l.name])return;e.use(l),e.instance&&(e.instance.useModuleParams(l,e.instance.params),e.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))