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