framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
2 lines (1 loc) • 4.1 kB
JavaScript
(function framework7ComponentLoader(t,e){void 0===e&&(e=!0);var s=t.$,a=t.utils,o=(t.getDevice,t.getSupport,t.Class,t.Modal,t.ConstructorMethods,t.ModalMethods,t.$jsx,a.getTranslate),n=a.nextFrame,f=a.bindMethods;const r={morphOpen(t,e){const a=this,f=s(t),r=s(e);if(0===r.length)return;r.transition(0).addClass("fab-morph-target-visible");const i={width:r[0].offsetWidth,height:r[0].offsetHeight,offset:r.offset(),borderRadius:r.css("border-radius"),zIndex:r.css("z-index")},h={width:f[0].offsetWidth,height:f[0].offsetHeight,offset:f.offset(),translateX:o(f[0],"x"),translateY:o(f[0],"y")};f[0].f7FabMorphData={$targetEl:r,target:i,fab:h};const l=h.offset.left+h.width/2-(i.offset.left+i.width/2)-h.translateX,d=h.offset.top+h.height/2-(i.offset.top+i.height/2)-h.translateY,p=i.width/h.width,b=i.height/h.height;let c=Math.ceil(parseInt(i.borderRadius,10)/Math.max(p,b));c>0&&(c+=2),f[0].f7FabMorphResizeHandler=function(){f.transition(0).transform(""),r.transition(0),i.width=r[0].offsetWidth,i.height=r[0].offsetHeight,i.offset=r.offset(),h.offset=f.offset();const t=h.offset.left+h.width/2-(i.offset.left+i.width/2)-h.translateX,e=h.offset.top+h.height/2-(i.offset.top+i.height/2)-h.translateY,s=i.width/h.width,a=i.height/h.height;f.transform(`translate3d(${-t}px, ${-e}px, 0) scale(${s}, ${a})`)},r.css("opacity",0).transform(`scale(${1/p}, ${1/b})`),f.addClass("fab-opened").css("z-index",i.zIndex-1).transform(`translate3d(${-l}px, ${-d}px, 0)`),f.transitionEnd((()=>{r.transition(""),n((()=>{r.css("opacity",1).transform("scale(1,1)"),f.transform(`translate3d(${-l}px, ${-d}px, 0) scale(${p}, ${b})`).css("border-radius",`${c}px`).css("box-shadow","none").css("opacity","0")})),a.on("resize",f[0].f7FabMorphResizeHandler),r.parents(".page-content").length>0&&r.parents(".page-content").on("scroll",f[0].f7FabMorphResizeHandler)}))},morphClose(t){const e=s(t),a=e[0].f7FabMorphData;if(!a)return;const{$targetEl:o,target:f,fab:r}=a;if(0===o.length)return;const i=r.offset.left+r.width/2-(f.offset.left+f.width/2)-r.translateX,h=r.offset.top+r.height/2-(f.offset.top+f.height/2)-r.translateY,l=f.width/r.width,d=f.height/r.height;this.off("resize",e[0].f7FabMorphResizeHandler),o.parents(".page-content").length>0&&o.parents(".page-content").off("scroll",e[0].f7FabMorphResizeHandler),o.css("opacity",0).transform(`scale(${1/l}, ${1/d})`),e.transition("").css("box-shadow","").css("border-radius","").css("opacity","1").transform(`translate3d(${-i}px, ${-h}px, 0)`),e.transitionEnd((()=>{e.css("z-index","").removeClass("fab-opened").transform(""),n((()=>{e.transitionEnd((()=>{o.removeClass("fab-morph-target-visible").css("opacity","").transform("").transition("")}))}))}))},open(t,e){const a=this,o=s(t).eq(0),n=o.find(".fab-buttons");if(o.length&&!o.hasClass("fab-opened")&&(n.length||o.hasClass("fab-morph"))){if(a.fab.openedEl){if(a.fab.openedEl===o[0])return;a.fab.close(a.fab.openedEl)}a.fab.openedEl=o[0],o.hasClass("fab-morph")?a.fab.morphOpen(o,e||o.attr("data-morph-to")):o.addClass("fab-opened"),o.siblings(".fab-backdrop").addClass("backdrop-in"),o.trigger("fab:open")}},close(t){void 0===t&&(t=".fab-opened");const e=this,a=s(t).eq(0),o=a.find(".fab-buttons");a.length&&a.hasClass("fab-opened")&&(o.length||a.hasClass("fab-morph"))&&(e.fab.openedEl=null,a.hasClass("fab-morph")?e.fab.morphClose(a):a.removeClass("fab-opened"),a.siblings(".fab-backdrop").removeClass("backdrop-in"),a.trigger("fab:close"))},toggle(t){s(t).hasClass("fab-opened")?this.fab.close(t):this.fab.open(t)}};var i={name:"fab",create(){f(this,{fab:{openedEl:null,...r}})},clicks:{".fab > a":function(t){this.fab.toggle(t.parents(".fab"))},".fab-open":function(t,e){void 0===e&&(e={});this.fab.open(e.fab)},".fab-close":function(t,e){void 0===e&&(e={});this.fab.close(e.fab)},".fab-backdrop":function(){this.fab.close()}}};if(e){if(t.prototype.modules&&t.prototype.modules[i.name])return;t.use(i),t.instance&&(t.instance.useModuleParams(i,t.instance.params),t.instance.useModule(i))}return i}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))