diff --git a/README.md b/README.md index 743f68d..40d1e0b 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,11 @@ If set to true, Macy will wait for all images on the page to load before running Set this to true if you would prefer to use a different image loaded library. +#### **mobileFirst** +*Default: `false`* + +Setting this value to true will alter how the breakAt options will work. Macy will now work in a mobile first way so the default `columns` will be the default then if for example you have `400: 2` in your breakAt object, if the document is greater or equal to 400px the column count will be 2. + #### **breakAt** *Default: `None`* diff --git a/bower.json b/bower.json index 14f8cc3..54f7cc4 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "macy", - "version": "2.2.0", + "version": "2.3.0", "homepage": "http://macyjs.com/", "author": { "name": "Big Bite Creative", diff --git a/demo/index.html b/demo/index.html index 5c6b8f0..b5d2a1f 100644 --- a/demo/index.html +++ b/demo/index.html @@ -103,39 +103,22 @@

Macy.js is a lightweight, dependency free, 2kb (gzipped) diff --git a/dist/macy.js b/dist/macy.js index 37a22c9..65f79a9 100644 --- a/dist/macy.js +++ b/dist/macy.js @@ -1 +1 @@ -!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.Macy=n()}(this,function(){"use strict";function t(t,n){var e=void 0;return function(){e&&clearTimeout(e),e=setTimeout(t,n)}}function n(t,n){for(var e=t.length,o=e,r=[];e--;)r.push(n(t[o-e-1]));return r}function e(t,n){E(t,n,arguments.length>2&&void 0!==arguments[2]&&arguments[2])}function o(t){var n=document.body.clientWidth,e={columns:t.columns},o=void 0;_(t.margin)?e.margin={x:t.margin.x,y:t.margin.y}:e.margin={x:t.margin,y:t.margin};for(var r=Object.keys(t.breakAt),i=r.length-1;i>=0;i--){var s=parseInt(r[i],10);n<=s&&(o=t.breakAt[s],_(o)||(e.columns=o),_(o)&&o.columns&&(e.columns=o.columns),_(o)&&o.margin&&!_(o.margin)&&(e.margin={x:o.margin,y:o.margin}),_(o)&&o.margin&&_(o.margin)&&o.margin.x&&(e.margin.x=o.margin.x),_(o)&&o.margin&&_(o.margin)&&o.margin.y&&(e.margin.y=o.margin.y))}return e}function r(t){return o(t).columns}function i(t){return o(t).margin}function s(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],e=r(t),o=i(t).x,s=100/e;return n?1===e?"100%":(o=(e-1)*o/e,"calc("+s+"% - "+o+"px)"):s}function a(t,n){var e=r(t.options),o=0,a=void 0,c=void 0;return 1===++n?0:(c=i(t.options).x,a=(c-(e-1)*c/e)*(n-1),o+=s(t.options,!1)*(n-1),"calc("+o+"% + "+a+"px)")}function c(t){var n=0,e=t.container;p(t.rows,function(t){n=t>n?t:n}),e.style.height=n+"px"}function u(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],s=r(t.options),a=i(t.options).y;b(t,s,e),p(n,function(n){var e=0,r=parseInt(n.offsetHeight,10);isNaN(r)||(t.rows.forEach(function(n,o){n2&&void 0!==arguments[2]&&arguments[2],o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],s=r(t.options),a=i(t.options).y;b(t,s,e),p(n,function(n){t.lastcol===s&&(t.lastcol=0);var e=L(n,"height");e=parseInt(n.offsetHeight,10),isNaN(e)||(n.style.position="absolute",n.style.top=t.rows[t.lastcol]+"px",n.style.left=""+t.cols[t.lastcol],t.rows[t.lastcol]+=isNaN(e)?0:e+a,t.lastcol+=1,o&&(n.dataset.macyComplete=1))}),o&&(t.tmpRows=null),c(t)}var h=function t(n,e){if(!(this instanceof t))return new t(n,e);if(n=n.replace(/^\s*/,"").replace(/\s*$/,""),e)return this.byCss(n,e);for(var o in this.selectors)if(e=o.split("/"),new RegExp(e[1],e[2]).test(n))return this.selectors[o](n);return this.byCss(n)};h.prototype.byCss=function(t,n){return(n||document).querySelectorAll(t)},h.prototype.selectors={},h.prototype.selectors[/^\.[\w\-]+$/]=function(t){return document.getElementsByClassName(t.substring(1))},h.prototype.selectors[/^\w+$/]=function(t){return document.getElementsByTagName(t)},h.prototype.selectors[/^\#[\w\-]+$/]=function(t){return document.getElementById(t.substring(1))};var p=function(t,n){for(var e=t.length,o=e;e--;)n(t[o-e-1])},f=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.running=!1,this.events=[],this.add(t)};f.prototype.run=function(){if(!this.running&&this.events.length>0){var t=this.events.shift();this.running=!0,t(),this.running=!1,this.run()}},f.prototype.add=function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return!!n&&(Array.isArray(n)?p(n,function(n){return t.add(n)}):(this.events.push(n),void this.run()))},f.prototype.clear=function(){this.events=[]};var m=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.instance=t,this.data=n,this},v=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.events={},this.instance=t};v.prototype.on=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!(!t||!n)&&(Array.isArray(this.events[t])||(this.events[t]=[]),this.events[t].push(n))},v.prototype.emit=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t||!Array.isArray(this.events[t]))return!1;var e=new m(this.instance,n);p(this.events[t],function(t){return t(e)})};var d=function(t){return!("naturalHeight"in t&&t.naturalHeight+t.naturalWidth===0)||t.width+t.height!==0},g=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return new Promise(function(t,e){if(n.complete)return d(n)?t(n):e(n);n.addEventListener("load",function(){return d(n)?t(n):e(n)}),n.addEventListener("error",function(){return e(n)})}).then(function(n){e&&t.emit(t.constants.EVENT_IMAGE_LOAD,{img:n})}).catch(function(n){return t.emit(t.constants.EVENT_IMAGE_ERROR,{img:n})})},y=function(t,e){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return n(e,function(n){return g(t,n,o)})},E=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return Promise.all(y(t,n,e)).then(function(){t.emit(t.constants.EVENT_IMAGE_COMPLETE)})},w=function(n){return t(function(){n.emit(n.constants.EVENT_RESIZE),n.queue.add(function(){return n.recalculate(!0,!0)})},100)},A=function(t){if(t.container=h(t.options.container),t.container instanceof h||!t.container)return!!t.options.debug&&console.error("Error: Container not found");delete t.options.container,t.container.length&&(t.container=t.container[0]),t.container.style.position="relative"},I=function(t){t.queue=new f,t.events=new v(t),t.rows=[],t.resizer=w(t)},N=function(t){var n=h("img",t.container);window.addEventListener("resize",t.resizer),t.on(t.constants.EVENT_IMAGE_LOAD,function(){return t.recalculate(!1,!1)}),t.on(t.constants.EVENT_IMAGE_COMPLETE,function(){return t.recalculate(!0,!0)}),t.options.useOwnImageLoader||e(t,n,!t.options.waitForImages),t.emit(t.constants.EVENT_INITIALIZED)},T=function(t){A(t),I(t),N(t)},_=function(t){return t===Object(t)&&"[object Array]"!==Object.prototype.toString.call(t)},L=function(t,n){return window.getComputedStyle(t,null).getPropertyValue(n)},b=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t.lastcol||(t.lastcol=0),t.rows.length<1&&(e=!0),e){t.rows=[],t.cols=[],t.lastcol=0;for(var o=n-1;o>=0;o--)t.rows[o]=0,t.cols[o]=a(t,o)}else if(t.tmpRows){t.rows=[];for(var o=n-1;o>=0;o--)t.rows[o]=t.tmpRows[o]}else{t.tmpRows=[];for(var o=n-1;o>=0;o--)t.tmpRows[o]=t.rows[o]}},O=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],o=n?t.container.children:h(':scope > *:not([data-macy-complete="1"])',t.container),r=s(t.options);return p(o,function(t){n&&(t.dataset.macyComplete=0),t.style.width=r}),t.options.trueOrder?(l(t,o,n,e),t.emit(t.constants.EVENT_RECALCULATED)):(u(t,o,n,e),t.emit(t.constants.EVENT_RECALCULATED))},M=Object.assign||function(t){for(var n=1;n0&&void 0!==arguments[0]?arguments[0]:C;if(!(this instanceof t))return new t(n);this.options={},M(this.options,C,n),T(this)};return V.init=function(t){return console.warn("Depreciated: Macy.init will be removed in v3.0.0 opt to use Macy directly like so Macy({ /*options here*/ }) "),new V(t)},V.prototype.recalculateOnImageLoad=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return e(this,h("img",this.container),!t)},V.prototype.runOnImageLoad=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=h("img",this.container);return this.on(this.constants.EVENT_IMAGE_COMPLETE,t),n&&this.on(this.constants.EVENT_IMAGE_LOAD,t),e(this,o,n)},V.prototype.recalculate=function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return e&&this.queue.clear(),this.queue.add(function(){return O(t,n,e)})},V.prototype.remove=function(){window.removeEventListener("resize",this.resizer),p(this.container.children,function(t){t.removeAttribute("data-macy-complete"),t.removeAttribute("style")}),this.container.removeAttribute("style")},V.prototype.reInit=function(){this.recalculate(!0,!0),this.emit(this.constants.EVENT_INITIALIZED),window.addEventListener("resize",this.resizer),this.container.style.position="relative"},V.prototype.on=function(t,n){this.events.on(t,n)},V.prototype.emit=function(t,n){this.events.emit(t,n)},V.constants={EVENT_INITIALIZED:"macy.initialized",EVENT_RECALCULATED:"macy.recalculated",EVENT_IMAGE_LOAD:"macy.image.load",EVENT_IMAGE_ERROR:"macy.image.error",EVENT_IMAGE_COMPLETE:"macy.images.complete",EVENT_RESIZE:"macy.resize"},V.prototype.constants=V.constants,V}); +!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.Macy=n()}(this,function(){"use strict";function t(t,n){var e=void 0;return function(){e&&clearTimeout(e),e=setTimeout(t,n)}}function n(t,n){for(var e=t.length,o=e,r=[];e--;)r.push(n(t[o-e-1]));return r}function e(t,n){A(t,n,arguments.length>2&&void 0!==arguments[2]&&arguments[2])}function o(t){for(var n=t.options,e=t.responsiveOptions,o=t.keys,r=t.docWidth,i=void 0,s=0;s=a&&(i=n.breakAt[a],O(i,e))}return e}function r(t){for(var n=t.options,e=t.responsiveOptions,o=t.keys,r=t.docWidth,i=void 0,s=o.length-1;s>=0;s--){var a=parseInt(o[s],10);r<=a&&(i=n.breakAt[a],O(i,e))}return e}function i(t){var n=document.body.clientWidth,e={columns:t.columns};L(t.margin)?e.margin={x:t.margin.x,y:t.margin.y}:e.margin={x:t.margin,y:t.margin};var i=Object.keys(t.breakAt);return t.mobileFirst?o({options:t,responsiveOptions:e,keys:i,docWidth:n}):r({options:t,responsiveOptions:e,keys:i,docWidth:n})}function s(t){return i(t).columns}function a(t){return i(t).margin}function c(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],e=s(t),o=a(t).x,r=100/e;return n?1===e?"100%":(o=(e-1)*o/e,"calc("+r+"% - "+o+"px)"):r}function u(t,n){var e=s(t.options),o=0,r=void 0,i=void 0;return 1===++n?0:(i=a(t.options).x,r=(i-(e-1)*i/e)*(n-1),o+=c(t.options,!1)*(n-1),"calc("+o+"% + "+r+"px)")}function l(t){var n=0,e=t.container;m(t.rows,function(t){n=t>n?t:n}),e.style.height=n+"px"}function p(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=s(t.options),i=a(t.options).y;C(t,r,e),m(n,function(n){var e=0,r=parseInt(n.offsetHeight,10);isNaN(r)||(t.rows.forEach(function(n,o){n2&&void 0!==arguments[2]&&arguments[2],o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=s(t.options),i=a(t.options).y;C(t,r,e),m(n,function(n){t.lastcol===r&&(t.lastcol=0);var e=M(n,"height");e=parseInt(n.offsetHeight,10),isNaN(e)||(n.style.position="absolute",n.style.top=t.rows[t.lastcol]+"px",n.style.left=""+t.cols[t.lastcol],t.rows[t.lastcol]+=isNaN(e)?0:e+i,t.lastcol+=1,o&&(n.dataset.macyComplete=1))}),o&&(t.tmpRows=null),l(t)}var f=function t(n,e){if(!(this instanceof t))return new t(n,e);if(n=n.replace(/^\s*/,"").replace(/\s*$/,""),e)return this.byCss(n,e);for(var o in this.selectors)if(e=o.split("/"),new RegExp(e[1],e[2]).test(n))return this.selectors[o](n);return this.byCss(n)};f.prototype.byCss=function(t,n){return(n||document).querySelectorAll(t)},f.prototype.selectors={},f.prototype.selectors[/^\.[\w\-]+$/]=function(t){return document.getElementsByClassName(t.substring(1))},f.prototype.selectors[/^\w+$/]=function(t){return document.getElementsByTagName(t)},f.prototype.selectors[/^\#[\w\-]+$/]=function(t){return document.getElementById(t.substring(1))};var m=function(t,n){for(var e=t.length,o=e;e--;)n(t[o-e-1])},v=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.running=!1,this.events=[],this.add(t)};v.prototype.run=function(){if(!this.running&&this.events.length>0){var t=this.events.shift();this.running=!0,t(),this.running=!1,this.run()}},v.prototype.add=function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return!!n&&(Array.isArray(n)?m(n,function(n){return t.add(n)}):(this.events.push(n),void this.run()))},v.prototype.clear=function(){this.events=[]};var d=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.instance=t,this.data=n,this},g=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.events={},this.instance=t};g.prototype.on=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!(!t||!n)&&(Array.isArray(this.events[t])||(this.events[t]=[]),this.events[t].push(n))},g.prototype.emit=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0],n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!t||!Array.isArray(this.events[t]))return!1;var e=new d(this.instance,n);m(this.events[t],function(t){return t(e)})};var y=function(t){return!("naturalHeight"in t&&t.naturalHeight+t.naturalWidth===0)||t.width+t.height!==0},E=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return new Promise(function(t,e){if(n.complete)return y(n)?t(n):e(n);n.addEventListener("load",function(){return y(n)?t(n):e(n)}),n.addEventListener("error",function(){return e(n)})}).then(function(n){e&&t.emit(t.constants.EVENT_IMAGE_LOAD,{img:n})}).catch(function(n){return t.emit(t.constants.EVENT_IMAGE_ERROR,{img:n})})},w=function(t,e){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return n(e,function(n){return E(t,n,o)})},A=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return Promise.all(w(t,n,e)).then(function(){t.emit(t.constants.EVENT_IMAGE_COMPLETE)})},I=function(n){return t(function(){n.emit(n.constants.EVENT_RESIZE),n.queue.add(function(){return n.recalculate(!0,!0)})},100)},N=function(t){if(t.container=f(t.options.container),t.container instanceof f||!t.container)return!!t.options.debug&&console.error("Error: Container not found");delete t.options.container,t.container.length&&(t.container=t.container[0]),t.container.style.position="relative"},T=function(t){t.queue=new v,t.events=new g(t),t.rows=[],t.resizer=I(t)},b=function(t){var n=f("img",t.container);window.addEventListener("resize",t.resizer),t.on(t.constants.EVENT_IMAGE_LOAD,function(){return t.recalculate(!1,!1)}),t.on(t.constants.EVENT_IMAGE_COMPLETE,function(){return t.recalculate(!0,!0)}),t.options.useOwnImageLoader||e(t,n,!t.options.waitForImages),t.emit(t.constants.EVENT_INITIALIZED)},_=function(t){N(t),T(t),b(t)},L=function(t){return t===Object(t)&&"[object Array]"!==Object.prototype.toString.call(t)},O=function(t,n){L(t)||(n.columns=t),L(t)&&t.columns&&(n.columns=t.columns),L(t)&&t.margin&&!L(t.margin)&&(n.margin={x:t.margin,y:t.margin}),L(t)&&t.margin&&L(t.margin)&&t.margin.x&&(n.margin.x=t.margin.x),L(t)&&t.margin&&L(t.margin)&&t.margin.y&&(n.margin.y=t.margin.y)},M=function(t,n){return window.getComputedStyle(t,null).getPropertyValue(n)},C=function(t,n){var e=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t.lastcol||(t.lastcol=0),t.rows.length<1&&(e=!0),e){t.rows=[],t.cols=[],t.lastcol=0;for(var o=n-1;o>=0;o--)t.rows[o]=0,t.cols[o]=u(t,o)}else if(t.tmpRows){t.rows=[];for(var o=n-1;o>=0;o--)t.rows[o]=t.tmpRows[o]}else{t.tmpRows=[];for(var o=n-1;o>=0;o--)t.tmpRows[o]=t.rows[o]}},V=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],e=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],o=n?t.container.children:f(':scope > *:not([data-macy-complete="1"])',t.container),r=c(t.options);return m(o,function(t){n&&(t.dataset.macyComplete=0),t.style.width=r}),t.options.trueOrder?(h(t,o,n,e),t.emit(t.constants.EVENT_RECALCULATED)):(p(t,o,n,e),t.emit(t.constants.EVENT_RECALCULATED))},R=Object.assign||function(t){for(var n=1;n0&&void 0!==arguments[0]?arguments[0]:x;if(!(this instanceof t))return new t(n);this.options={},R(this.options,x,n),_(this)};return q.init=function(t){return console.warn("Depreciated: Macy.init will be removed in v3.0.0 opt to use Macy directly like so Macy({ /*options here*/ }) "),new q(t)},q.prototype.recalculateOnImageLoad=function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return e(this,f("img",this.container),!t)},q.prototype.runOnImageLoad=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=f("img",this.container);return this.on(this.constants.EVENT_IMAGE_COMPLETE,t),n&&this.on(this.constants.EVENT_IMAGE_LOAD,t),e(this,o,n)},q.prototype.recalculate=function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];return e&&this.queue.clear(),this.queue.add(function(){return V(t,n,e)})},q.prototype.remove=function(){window.removeEventListener("resize",this.resizer),m(this.container.children,function(t){t.removeAttribute("data-macy-complete"),t.removeAttribute("style")}),this.container.removeAttribute("style")},q.prototype.reInit=function(){this.recalculate(!0,!0),this.emit(this.constants.EVENT_INITIALIZED),window.addEventListener("resize",this.resizer),this.container.style.position="relative"},q.prototype.on=function(t,n){this.events.on(t,n)},q.prototype.emit=function(t,n){this.events.emit(t,n)},q.constants={EVENT_INITIALIZED:"macy.initialized",EVENT_RECALCULATED:"macy.recalculated",EVENT_IMAGE_LOAD:"macy.image.load",EVENT_IMAGE_ERROR:"macy.image.error",EVENT_IMAGE_COMPLETE:"macy.images.complete",EVENT_RESIZE:"macy.resize"},q.prototype.constants=q.constants,q}); diff --git a/package.json b/package.json index a4e6b1b..f919e9e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "macy", "description": "Macy is a lightweight, dependency free, masonry layout library", - "version": "2.2.0", + "version": "2.3.0", "author": { "name": "Big Bite Creative", "url": "http://bigbitecreative.com", diff --git a/rollup.config.js b/rollup.config.js index 6f45bbb..176c562 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -7,7 +7,7 @@ let buildObj = { entry: 'src/macy.js', format: 'umd', moduleName: 'Macy', - banner: '/* Macy.js - v2.2.0 */', + banner: '/* Macy.js - v2.3.0 */', plugins: [ eslint(), babel(), diff --git a/src/helpers/getResponsiveOptions.js b/src/helpers/getResponsiveOptions.js new file mode 100644 index 0000000..fb9c08f --- /dev/null +++ b/src/helpers/getResponsiveOptions.js @@ -0,0 +1,103 @@ +import isObject from './isObject'; + +/** + * Replaces responsiveOptions with temporary options where applicable. + * @param tempOpts + * @param responsiveOptions + */ +const replaceOptionsResponsively = (tempOpts, responsiveOptions) => { + if (!isObject(tempOpts)) { + responsiveOptions.columns = tempOpts; + } + + if (isObject(tempOpts) && tempOpts.columns) { + responsiveOptions.columns = tempOpts.columns; + } + + if (isObject(tempOpts) && tempOpts.margin && !isObject(tempOpts.margin)) { + responsiveOptions.margin = { + x: tempOpts.margin, + y: tempOpts.margin + } + } + + if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.x) { + responsiveOptions.margin.x = tempOpts.margin.x; + } + + if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.y) { + responsiveOptions.margin.y = tempOpts.margin.y; + } +}; + +/** + * Return the current spacing options based on document size, in a mobile first manner. + * @param {Object} args - This passes the macy instance options, responsiveOptions object, the width keys and document width. + * @return {Object} - Object containing the current spacing options + */ +export function getOptionsAsMobileFirst ({ options, responsiveOptions, keys, docWidth }) { + let tempOpts; + + for (let i = 0; i < keys.length; i++) { + let widths = parseInt(keys[i], 10); + + if (docWidth >= widths) { + tempOpts = options.breakAt[widths]; + replaceOptionsResponsively(tempOpts, responsiveOptions); + } + } + + return responsiveOptions; +} + +/** + * Return the current spacing options based on document size, in a desktop first manner. + * @param {Object} args - This passes the macy instance options, responsiveOptions object, the width keys and document width. + * @return {Object} - Object containing the current spacing options + */ +export function getOptionsAsDesktopFirst ({ options, responsiveOptions, keys, docWidth }) { + let tempOpts; + + for (let i = keys.length - 1; i >= 0; i--) { + let widths = parseInt(keys[i], 10); + + if (docWidth <= widths) { + tempOpts = options.breakAt[widths]; + replaceOptionsResponsively(tempOpts, responsiveOptions); + } + } + + return responsiveOptions; +} + +/** + * Return the current spacing options based on document size. + * @param {Object} options - Macy instance's options + * @return {Object} - Object containing the current spacing options + */ +export function getResponsiveOptions (options) { + let docWidth = document.body.clientWidth; + let responsiveOptions = { + columns: options.columns, + }; + + if (!isObject(options.margin)) { + responsiveOptions.margin = { + x: options.margin, + y: options.margin + } + } else { + responsiveOptions.margin = { + x: options.margin.x, + y: options.margin.y + } + } + + let keys = Object.keys(options.breakAt); + + if (options.mobileFirst) { + return getOptionsAsMobileFirst({ options, responsiveOptions, keys, docWidth }); + } + + return getOptionsAsDesktopFirst({ options, responsiveOptions, keys, docWidth }); +} diff --git a/src/modules/calculations.js b/src/modules/calculations.js index 2324e6e..4a987e4 100644 --- a/src/modules/calculations.js +++ b/src/modules/calculations.js @@ -1,67 +1,5 @@ -import isObject from '../helpers/isObject'; import foreach from '../helpers/foreach'; - -/** - * Return the current spacing options based on document size. - * @param {Object} options - Macy instance's options - * @return {Object} - Object containing the current spacing options - */ -export function getResponsiveOptions (options) { - let docWidth = document.body.clientWidth; - let responsiveOptions = { - columns: options.columns, - }; - - let tempOpts; - - if (!isObject(options.margin)) { - responsiveOptions.margin = { - x: options.margin, - y: options.margin - } - } else { - responsiveOptions.margin = { - x: options.margin.x, - y: options.margin.y - } - } - - let keys = Object.keys(options.breakAt); - - for (let i = keys.length - 1; i >= 0; i--) { - let widths = parseInt(keys[i], 10); - - if (docWidth <= widths) { - tempOpts = options.breakAt[widths]; - - if (!isObject(tempOpts)) { - responsiveOptions.columns = tempOpts; - } - - if (isObject(tempOpts) && tempOpts.columns) { - responsiveOptions.columns = tempOpts.columns; - } - - if (isObject(tempOpts) && tempOpts.margin && !isObject(tempOpts.margin)) { - responsiveOptions.margin = { - x: tempOpts.margin, - y: tempOpts.margin - } - } - - if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.x) { - responsiveOptions.margin.x = tempOpts.margin.x; - } - - if (isObject(tempOpts) && tempOpts.margin && isObject(tempOpts.margin) && tempOpts.margin.y) { - responsiveOptions.margin.y = tempOpts.margin.y; - } - - } - } - - return responsiveOptions; -} +import { getResponsiveOptions } from '../helpers/getResponsiveOptions'; /** * Return the current number of columns macy should be