framework7/components/grid.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);document,window;var r=e.$,a=(e.Template7,e.utils);e.device,e.support,e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods;function i(e,t){var r=t.css("min-"+e);return"auto"===r||"none"===r?r=0:r.indexOf("px")>=0?r=parseFloat(r):r.indexOf("%")>=0&&(r=t.parent()[0]["height"===e?"offsetHeight":"offsetWidth"]*parseFloat(r)/100),r}function s(e,t){var r=t.css("max-"+e);return"auto"===r||"none"===r?r=null:r.indexOf("px")>=0?r=parseFloat(r):r.indexOf("%")>=0&&(r=t.parent()[0]["height"===e?"offsetHeight":"offsetWidth"]*parseFloat(r)/100),r}var o={init:function(){var e,t,a,o,n,l,g,d,h,c,p,f,u,v,z,m,x,b=this;r(document).on(b.touchEvents.start,".col > .resize-handler, .row > .resize-handler",(function(i){e||t||(n=r(i.target).closest(".resize-handler"),a="touchstart"===i.type?i.targetTouches[0].pageX:i.pageX,o="touchstart"===i.type?i.targetTouches[0].pageY:i.pageY,e=!0,l=void 0,g=void 0,x=void 0)})),b.on("touchmove",(function(r){if(e){var w=1===n.parent(".row").length,y=w?"height":"width",C=w?"offsetHeight":"offsetWidth";t||(!(l=n.parent(w?".row":".col")).length||l.hasClass("resizable")&&!l.hasClass("resizable-fixed")||(l=l.prevAll(".resizable:not(.resizable-fixed)").eq(0)),!(g=l.next(w?".row":".col")).length||g.hasClass("resizable")&&!g.hasClass("resizable-fixed")||(g=g.nextAll(".resizable:not(.resizable-fixed)").eq(0)),l.length&&(d=l[0][C],h=i(y,l),c=s(y,l),v=l.parent()[0][C],z=l.parent().children(w?".row":'[class*="col-"], .col').length,m=parseFloat(l.css(w?"--f7-grid-row-gap":"--f7-grid-gap"))),g.length&&(p=g[0][C],f=i(y,g),u=s(y,g),l.length||(v=g.parent()[0][C],z=g.parent().children(w?".row":'[class*="col-"], .col').length,m=parseFloat(g.css(w?"--f7-grid-row-gap":"--f7-grid-gap"))))),t=!0;var M="touchmove"===r.type?r.targetTouches[0].pageX:r.pageX,F="touchmove"===r.type?r.targetTouches[0].pageY:r.pageY;if(void 0!==x||w||(x=!!(x||Math.abs(F-o)>Math.abs(M-a))),x)return e=!1,void(t=!1);var T=l.hasClass("resizable-absolute")||g.hasClass("resizable-absolute"),O=!w||w&&!T;if(O&&!g.length||!l.length)return e=!1,void(t=!1);r.preventDefault();var R,X,Y=w?F-o:M-a;if(l.length&&((R=d+Y)<h&&(Y=(R=h)-d),c&&R>c&&(Y=(R=c)-d)),g.length&&O&&((X=p-Y)<f&&(R=d+(Y=p-(X=f))),u&&X>u&&(R=d+(Y=p-(X=u)))),T)return l[0].style[y]=R+"px",O&&(g[0].style[y]=X+"px"),l.trigger("grid:resize"),g.trigger("grid:resize"),b.emit("gridResize",l[0]),void b.emit("gridResize",g[0]);var H=(z-1)*m/z,W=w?z-1+" * var(--f7-grid-row-gap) / "+z:"(var(--f7-cols-per-row) - 1) * var(--f7-grid-gap) / var(--f7-cols-per-row)",q=R+H,A=X+H;l[0].style[y]="calc("+q/v*100+"% - "+W+")",g[0].style[y]="calc("+A/v*100+"% - "+W+")",l.trigger("grid:resize"),g.trigger("grid:resize"),b.emit("gridResize",l[0]),b.emit("gridResize",g[0])}})),b.on("touchend",(function(){e&&(t||(e=!1),e=!1,t=!1)}))}},n={name:"grid",create:function(){a.extend(this,{grid:{init:o.init.bind(this)}})},on:{init:function(){this.grid.init()}}};if(t){if(e.prototype.modules&&e.prototype.modules[n.name])return;e.use(n),e.instance&&(e.instance.useModuleParams(n,e.instance.params),e.instance.useModule(n))}return n}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))