zmp-core/components/card/card.js

Full featured mobile HTML framework for building iOS & Android apps

(function zmpComponentLoader(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,r.bindMethods),d={open:function(e,a){void 0===e&&(e=".card-expandable"),void 0===a&&(a=!0);var r=this,o=n(),d=s(),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].zmpPage&&(h=i[0].zmpPage.$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,T=i[0].offsetWidth,w=i[0].offsetHeight,z=C[0].offsetWidth||T,E=C[0].offsetHeight||w;h&&!g.hideStatusbarOnOpen&&E===w&&(O=parseInt(h.css("--zmp-safe-area-top"),10),Number.isNaN(O)&&(O=0)),O&&(E-=O);var N,H,M=z/x,$=E/k,y=l.offset(),B=i.offset();if(O&&(B.top+=O/2),y.left-=B.left,b){var K=m.replace(/matrix\(|\)/g,"").split(",").map((function(e){return e.trim()}));if(K&&K.length>1){var S=parseFloat(K[0]);N=y.left-x*(1-S)/2,H=y.top-B.top-k*(1-S)/2,r.rtl&&(N-=l[0].scrollLeft)}else N=l[0].offsetLeft,H=l[0].offsetTop-(v.length?v[0].scrollTop:0)}else N=y.left,H=y.top-B.top,r.rtl&&(N-=l[0].scrollLeft);H-=(w-E)/2;var W=z-x-(N-=(T-z)/2);if(r.rtl){var q=[W,N];N=q[0],W=q[1]}var L,P,I,X,j,D,Y,F,A,G,J,Q,R=E-k-H,U=(W-N)/2,V=(R-H)/2;g.hideNavbarOnOpen&&h&&h.length&&(h.closest(".navbar-hidden").length?l[0].zmpKeepNavbarOnClose=!0:(delete l[0].zmpKeepNavbarOnClose,r.navbar.hide(h,g.animate,g.hideStatusbarOnOpen,!0))),g.hideToolbarOnOpen&&f&&f.length&&(f.closest(".toolbar-hidden").length?l[0].zmpKeepToolbarOnClose=!0:(delete l[0].zmpKeepToolbarOnClose,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:z+"px",height:E+"px"}).transform("translate3d("+(r.rtl?N+U:-N-U)+"px, 0px, 0) scale("+1/M+", "+1/$+")"),l.transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+M+", "+$+")"),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"),o.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,T=i[0].offsetWidth,w=i[0].offsetHeight,z=C[0].offsetWidth||T,E=C[0].offsetHeight||w,O=0,h&&!g.hideStatusbarOnOpen&&E===w&&(O=parseInt(h.css("--zmp-safe-area-top"),10),Number.isNaN(O)&&(O=0)),O&&(E-=O),M=z/x,$=E/k,l.transform("translate3d(0px, 0px, 0) scale(1)"),y=l.offset(),B=i.offset(),O&&(B.top+=O/2),y.left-=B.left,y.top-=B.top,N=y.left-(T-z)/2,r.rtl&&(N-=l[0].scrollLeft),H=y.top-(w-E)/2,W=z-x-N,R=E-k-H,r.rtl){var e=[W,N];N=e[0],W=e[1]}U=(W-N)/2,V=(R-H)/2,l.transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+M+", "+$+")"),u.css({width:z+"px",height:E+"px"}).transform("translate3d("+(r.rtl?N+U:-N-U)+"px, 0px, 0) scale("+1/M+", "+1/$+")")}function ae(e){t(e.target).closest(l).length&&l.hasClass("card-opened")&&(Q=l.find(g.scrollableEl),L=Q[0]&&Q[0]!==u[0]&&!Q[0].contains(e.target)?0:Q.scrollTop(),P=!0,X=e.targetTouches[0].pageX,j=e.targetTouches[0].pageY,F=void 0,G=!1,J=!1)}function te(e){if(P){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!==L)return P=!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&&o.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)?(P=!1,I=!1,r.card.close(l)):l.transform("translate3d("+(r.rtl?-U:U)+"px, "+V+"px, 0) scale("+M*(1-.2*A)+", "+$*(1-.2*A)+")")}}function re(){P&&I&&(P=!1,I=!1,o.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("+M+", "+$+")"))}},close:function(e,a){void 0===e&&(e=".card-expandable.card-opened"),void 0===a&&(a=!0);var r=this,s=n(),o=t(e).eq(0);if(o&&o.length&&o.hasClass("card-opened")&&!o.hasClass("card-opening")&&!o.hasClass("card-closing")){var d=o.children(".card-content"),l=o.parents(".page-content"),c=o.parents(".page").eq(0);if(c.length){var i,p,h,f=Object.assign({animate:a},r.params.card,o.dataset()),g=o.find(f.scrollableEl);o.attr("data-backdrop-el")&&(h=t(o.attr("data-backdrop-el"))),f.backdrop&&(h=o.parents(".page-content").find(".card-backdrop")),f.hideNavbarOnOpen&&((i=c.children(".navbar")).length||c[0].zmpPage&&(i=c[0].zmpPage.$navbarEl),i&&i.length&&!o[0].zmpKeepNavbarOnClose&&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&&!o[0].zmpKeepToolbarOnClose&&r.toolbar.show(p,f.animate)),c.removeClass("page-with-card-opened"),s.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"),o.removeClass("card-opened card-transitioning"),f.animate?o.addClass("card-closing"):o.addClass("card-no-transition"),o.transform(""),o.trigger("card:close"),r.emit("cardClose",o[0],c[0]);var v=o.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(),o[0].detachEventHandlers&&(o[0].detachEventHandlers(),delete o[0].detachEventHandlers)}}function b(){v||d.css({width:"",height:""}),h&&h.length&&h.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])}},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(){o(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}(ZMP, typeof ZMPAutoInstallComponent === 'undefined' ? undefined : ZMPAutoInstallComponent))